diff --git a/pages/protocol/tutorials.mdx b/pages/protocol/tutorials.mdx
index 5b3dc1b..7b8618c 100644
--- a/pages/protocol/tutorials.mdx
+++ b/pages/protocol/tutorials.mdx
@@ -19,10 +19,10 @@ lang: en-US
     margin: '20px 0'
   }}>
     <iframe
-      src="https://app.supademo.com/embed/cmbvtwu9cfvncsn1rj0yj4x3t?embed_v=2"
+      src="/tutorials/how-to-connect-your-wallet/index.html"
       loading="lazy"
       title="How to connect your wallet - Frax"
-      allow="clipboard-write"
+      allow="clipboard-write; fullscreen"
       frameBorder="0"
       allowFullScreen
       style={{
diff --git a/public/tutorials/how-to-connect-your-wallet/assets/step-001.webp b/public/tutorials/how-to-connect-your-wallet/assets/step-001.webp
new file mode 100644
index 0000000..a84a19a
Binary files /dev/null and b/public/tutorials/how-to-connect-your-wallet/assets/step-001.webp differ
diff --git a/public/tutorials/how-to-connect-your-wallet/assets/step-002.webp b/public/tutorials/how-to-connect-your-wallet/assets/step-002.webp
new file mode 100644
index 0000000..aa2e02a
Binary files /dev/null and b/public/tutorials/how-to-connect-your-wallet/assets/step-002.webp differ
diff --git a/public/tutorials/how-to-connect-your-wallet/assets/step-003.webp b/public/tutorials/how-to-connect-your-wallet/assets/step-003.webp
new file mode 100644
index 0000000..beb46e7
Binary files /dev/null and b/public/tutorials/how-to-connect-your-wallet/assets/step-003.webp differ
diff --git a/public/tutorials/how-to-connect-your-wallet/demo.json b/public/tutorials/how-to-connect-your-wallet/demo.json
new file mode 100644
index 0000000..60cc9b7
--- /dev/null
+++ b/public/tutorials/how-to-connect-your-wallet/demo.json
@@ -0,0 +1,78 @@
+{
+  "schemaVersion": 1,
+  "id": "p5h2urttptw9ayhb",
+  "title": "How to connect your wallet",
+  "slug": "how-to-connect-your-wallet",
+  "theme": {
+    "mode": "frax-dark",
+    "accentColor": "#3b82f6",
+    "borderRadius": 8,
+    "tooltipStyle": "solid",
+    "hotspotPulse": true
+  },
+  "playback": {
+    "cursor": true,
+    "zoom": true,
+    "zoomLevel": 1.35
+  },
+  "steps": [
+    {
+      "id": "pshgq4832mowkks6",
+      "order": 0,
+      "screenshotPath": "assets/step-001.webp",
+      "sourceUrl": "https://frax.com/",
+      "pageTitle": "Frax",
+      "title": "Click Connect",
+      "body": "Click the Connect button to start linking your wallet.",
+      "hotspot": {
+        "x": 0.9393310546875,
+        "y": 0.015772870662460567,
+        "width": 0.0450439453125,
+        "height": 0.04416403785488959,
+        "clickX": 0.9552083333333333,
+        "clickY": 0.03785488958990536,
+        "shape": "rectangle",
+        "tooltipPlacement": "auto",
+        "borderRadius": 0.0067708333333333336
+      },
+      "advanceMode": "either"
+    },
+    {
+      "id": "grv4j29d7xyaclsa",
+      "order": 1,
+      "screenshotPath": "assets/step-002.webp",
+      "sourceUrl": "https://frax.com/",
+      "pageTitle": "Frax",
+      "title": "Select Rabby Wallet",
+      "body": "Choose your prefered wallet from the list of wallet options, then confirm the connection in the wallet extension.",
+      "zoom": {
+        "mode": "custom",
+        "level": 1.2,
+        "focusX": 1,
+        "focusY": 0.4175067555404568
+      },
+      "hotspot": {
+        "x": 0.7940476190476192,
+        "y": 0.08131918498217706,
+        "width": 0.19523809523809507,
+        "height": 0.8074461342158933,
+        "clickX": 0.8869791666666667,
+        "clickY": 0.5425867507886435,
+        "shape": "rectangle",
+        "tooltipPlacement": "auto"
+      },
+      "advanceMode": "either"
+    },
+    {
+      "id": "l1chwkwhfqi5e2j7",
+      "order": 2,
+      "screenshotPath": "assets/step-003.webp",
+      "sourceUrl": "https://frax.com/",
+      "pageTitle": "Frax",
+      "title": "Finish Setup",
+      "body": "Check that your wallet address now appears on the page to confirm the connection.",
+      "advanceMode": "either"
+    }
+  ],
+  "generatedAt": "2026-07-21T06:33:07.671Z"
+}
\ No newline at end of file
diff --git a/public/tutorials/how-to-connect-your-wallet/index.html b/public/tutorials/how-to-connect-your-wallet/index.html
new file mode 100644
index 0000000..e6ff62d
--- /dev/null
+++ b/public/tutorials/how-to-connect-your-wallet/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'" />
+  <meta name="description" content="Interactive step-by-step tutorial: How to connect your wallet" />
+  <meta name="generator" content="Frax Demo Studio" />
+  <title>How to connect your wallet</title>
+  <link rel="stylesheet" href="../player/player.css" />
+</head>
+<body>
+  <div id="frax-demo-root" data-demo-src="./demo.json"></div>
+  <script type="application/json" id="frax-demo-data">{"schemaVersion":1,"id":"p5h2urttptw9ayhb","title":"How to connect your wallet","slug":"how-to-connect-your-wallet","theme":{"mode":"frax-dark","accentColor":"#3b82f6","borderRadius":8,"tooltipStyle":"solid","hotspotPulse":true},"playback":{"cursor":true,"zoom":true,"zoomLevel":1.35},"steps":[{"id":"pshgq4832mowkks6","order":0,"screenshotPath":"assets/step-001.webp","sourceUrl":"https://frax.com/","pageTitle":"Frax","title":"Click Connect","body":"Click the Connect button to start linking your wallet.","hotspot":{"x":0.9393310546875,"y":0.015772870662460567,"width":0.0450439453125,"height":0.04416403785488959,"clickX":0.9552083333333333,"clickY":0.03785488958990536,"shape":"rectangle","tooltipPlacement":"auto","borderRadius":0.0067708333333333336},"advanceMode":"either"},{"id":"grv4j29d7xyaclsa","order":1,"screenshotPath":"assets/step-002.webp","sourceUrl":"https://frax.com/","pageTitle":"Frax","title":"Select Rabby Wallet","body":"Choose your prefered wallet from the list of wallet options, then confirm the connection in the wallet extension.","zoom":{"mode":"custom","level":1.2,"focusX":1,"focusY":0.4175067555404568},"hotspot":{"x":0.7940476190476192,"y":0.08131918498217706,"width":0.19523809523809507,"height":0.8074461342158933,"clickX":0.8869791666666667,"clickY":0.5425867507886435,"shape":"rectangle","tooltipPlacement":"auto"},"advanceMode":"either"},{"id":"l1chwkwhfqi5e2j7","order":2,"screenshotPath":"assets/step-003.webp","sourceUrl":"https://frax.com/","pageTitle":"Frax","title":"Finish Setup","body":"Check that your wallet address now appears on the page to confirm the connection.","advanceMode":"either"}],"generatedAt":"2026-07-21T06:33:07.671Z"}</script>
+  <script src="../player/player.js"></script>
+</body>
+</html>
diff --git a/public/tutorials/player/player.css b/public/tutorials/player/player.css
new file mode 100644
index 0000000..e5c1553
--- /dev/null
+++ b/public/tutorials/player/player.css
@@ -0,0 +1 @@
+.fds-player{--fds-accent: #3b82f6;--fds-radius: 8px;--fds-bg: #f4f5f8;--fds-fg: #1b1e28;--fds-muted: #5b6172;--fds-border: rgba(15, 18, 32, .14);--fds-tooltip-bg: #ffffff;--fds-tooltip-fg: #1b1e28;--fds-tooltip-bg-soft: rgba(255, 255, 255, .78);--fds-control-bg: #ffffff;--fds-control-hover: rgba(15, 18, 32, .07);--fds-stage-bg: #e6e8ee;position:relative;display:flex;flex-direction:column;width:100%;box-sizing:border-box;background:var(--fds-bg);color:var(--fds-fg);border-radius:var(--fds-radius);overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.fds-player *,.fds-player *:before,.fds-player *:after{box-sizing:border-box}.fds-player [hidden]{display:none!important}.fds-dark{--fds-bg: #15171f;--fds-fg: #e8eaf0;--fds-muted: #9aa0b4;--fds-border: rgba(220, 226, 245, .14);--fds-tooltip-bg: #232633;--fds-tooltip-fg: #e8eaf0;--fds-tooltip-bg-soft: rgba(35, 38, 51, .74);--fds-control-bg: #1b1e28;--fds-control-hover: rgba(220, 226, 245, .1);--fds-stage-bg: #0f1117}.fds-frax-dark{--fds-bg: #0b0e1a;--fds-fg: #f2f4fb;--fds-muted: #97a0c2;--fds-border: rgba(148, 163, 216, .18);--fds-tooltip-bg: #141a33;--fds-tooltip-fg: #f2f4fb;--fds-tooltip-bg-soft: rgba(20, 26, 51, .72);--fds-control-bg: #0e1224;--fds-control-hover: rgba(148, 163, 216, .14);--fds-stage-bg: #070a13}.fds-player :focus-visible{outline:2px solid var(--fds-accent);outline-offset:2px}.fds-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fds-stage{position:relative;width:100%;aspect-ratio:16 / 10;background:var(--fds-stage-bg);overflow:hidden;container-type:inline-size}.fds-zoom-layer{position:relative;width:100%;height:100%;transform-origin:0 0;transition:transform .9s cubic-bezier(.22,.8,.3,1);will-change:transform}.fds-continuity .fds-hotspot{transition:left .5s cubic-bezier(.22,.8,.3,1),top .5s cubic-bezier(.22,.8,.3,1),width .5s cubic-bezier(.22,.8,.3,1),height .5s cubic-bezier(.22,.8,.3,1)}.fds-cursor{position:absolute;z-index:4;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid #ffffff;background:var(--fds-accent);opacity:.92;box-shadow:0 2px 8px #00000073,0 0 0 4px #ffffff2e;pointer-events:none;transition:left .78s cubic-bezier(.3,.7,.25,1),top .78s cubic-bezier(.3,.7,.25,1)}.fds-cursor-click{animation:fds-cursor-click .42s ease-out}@keyframes fds-cursor-click{0%{transform:scale(1)}40%{transform:scale(.65);box-shadow:0 2px 8px #00000073,0 0 0 12px #ffffff47}to{transform:scale(1)}}.fds-fade{animation:fds-fadein .18s ease}@keyframes fds-fadein{0%{opacity:0}to{opacity:1}}.fds-screenshot{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none}.fds-broken .fds-screenshot{visibility:hidden}.fds-screenshot-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--fds-muted);font-size:14px;border:1px dashed var(--fds-border);border-radius:var(--fds-radius);margin:12px}.fds-blur-layer{position:absolute;inset:0;pointer-events:none;z-index:1}.fds-blur{position:absolute;pointer-events:none;overflow:hidden;border-radius:2px}.fds-blur-img{position:absolute;max-width:none;filter:blur(12px) saturate(.85)}.fds-blur:after{content:"";position:absolute;inset:0;background:#78829640}.fds-hotspot{position:absolute;z-index:2;padding:0;margin:0;border:2px solid var(--fds-accent);border-radius:6px;background:transparent;cursor:pointer;min-width:8px;min-height:8px}.fds-hotspot-circle{border-radius:50%}.fds-hotspot-decorative{pointer-events:none;cursor:default}.fds-hotspot-pulse{animation:fds-pulse 1.8s ease-out infinite}@keyframes fds-pulse{0%{box-shadow:0 0 0 0 var(--fds-accent)}70%,to{box-shadow:0 0 0 14px transparent}}.fds-tooltip{position:absolute;z-index:3;max-width:min(340px,78%);padding:10px 14px;background:var(--fds-tooltip-bg);color:var(--fds-tooltip-fg);border:1px solid var(--fds-border);border-radius:var(--fds-radius);box-shadow:0 10px 28px #00000047;font-size:14px;line-height:1.45;pointer-events:none;text-align:left}.fds-tooltip-soft{background:var(--fds-tooltip-bg-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.fds-tooltip-title{display:block;font-weight:650}.fds-tooltip-body{margin:4px 0 0;color:inherit;opacity:.9}.fds-tooltip-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;pointer-events:auto}.fds-tooltip-nav .fds-btn{padding:4px 12px;font-size:12.5px}.fds-tooltip{transition:left .9s cubic-bezier(.22,.8,.3,1),right .9s cubic-bezier(.22,.8,.3,1),top .9s cubic-bezier(.22,.8,.3,1),bottom .9s cubic-bezier(.22,.8,.3,1),transform .9s cubic-bezier(.22,.8,.3,1)}.fds-tooltip[data-placement=top]{transform:translate(calc(-50% + var(--fds-tt-dx, 0px)),var(--fds-tt-dy, 0px));margin-bottom:10px}.fds-tooltip[data-placement=bottom]{transform:translate(calc(-50% + var(--fds-tt-dx, 0px)),var(--fds-tt-dy, 0px));margin-top:10px}.fds-tooltip[data-placement=left]{transform:translate(var(--fds-tt-dx, 0px),calc(-50% + var(--fds-tt-dy, 0px)));margin-right:10px}.fds-tooltip[data-placement=right]{transform:translate(var(--fds-tt-dx, 0px),calc(-50% + var(--fds-tt-dy, 0px)));margin-left:10px}.fds-tooltip-centered{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}.fds-controls{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--fds-control-bg);border-top:1px solid var(--fds-border)}.fds-logo{height:22px;width:auto;flex:none}.fds-btn{flex:none;font:inherit;font-size:14px;color:var(--fds-fg);background:transparent;border:1px solid var(--fds-border);border-radius:calc(var(--fds-radius) * .75);padding:6px 14px;cursor:pointer;transition:background-color .12s ease}.fds-btn:hover:not(:disabled){background:var(--fds-control-hover)}.fds-btn:disabled{opacity:.45;cursor:default}.fds-btn-primary{background:var(--fds-accent);border-color:var(--fds-accent);color:#fff}.fds-btn-primary:hover:not(:disabled){background:var(--fds-accent);filter:brightness(1.1)}.fds-btn-restart,.fds-btn-fullscreen{padding:6px 10px;line-height:1}.fds-progress{flex:1 1 auto;height:6px;min-width:40px;border-radius:999px;background:var(--fds-border);overflow:hidden}.fds-progress-fill{height:100%;width:0%;background:var(--fds-accent);border-radius:inherit;transition:width .18s ease}.fds-counter{flex:none;font-variant-numeric:tabular-nums;font-size:13px;color:var(--fds-muted);white-space:nowrap}.fds-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:48px 24px;min-height:300px}.fds-screen-logo{max-height:64px;max-width:220px;object-fit:contain;margin-bottom:18px}.fds-screen-title{margin:0;font-size:24px;font-weight:650;letter-spacing:-.01em}.fds-screen-description{margin:0;max-width:54ch;color:var(--fds-muted)}.fds-external-link{color:var(--fds-accent);text-decoration:underline;text-underline-offset:3px}.fds-external-suffix{font-size:12px;opacity:.85;margin-left:4px}.fds-fatal{margin:0;padding:24px;color:var(--fds-muted);text-align:center}.fds-fatal-panel{display:flex;align-items:center;justify-content:center;min-height:160px}.fds-player:fullscreen{width:100%;height:100%;border-radius:0}.fds-player:fullscreen .fds-stage{flex:1 1 auto;aspect-ratio:auto}@media(prefers-reduced-motion:reduce){.fds-player,.fds-player *,.fds-player *:before,.fds-player *:after{animation:none!important;transition:none!important}.fds-cursor{display:none!important}.fds-zoom-layer{transform:none!important}}
diff --git a/public/tutorials/player/player.js b/public/tutorials/player/player.js
new file mode 100644
index 0000000..5f50c75
--- /dev/null
+++ b/public/tutorials/player/player.js
@@ -0,0 +1 @@
+var FraxDemoPlayer=(function(b){"use strict";var j=Object.defineProperty;var q=(b,c,m)=>c in b?j(b,c,{enumerable:!0,configurable:!0,writable:!0,value:m}):b[c]=m;var a=(b,c,m)=>q(b,typeof c!="symbol"?c+"":c,m);function c(e,t,s){return Math.min(Math.max(e,t),s)}function m(e){return`${Number((e*100).toFixed(4))}%`}function U(e){return/^https?:\/\//i.test(e)}function A(e,t,s){return new z(e,t,s)}class z{constructor(t,s,o){a(this,"demo");a(this,"baseUrl");a(this,"doc");a(this,"root");a(this,"live");a(this,"screenEl");a(this,"stage");a(this,"zoomLayer");a(this,"img");a(this,"imgError");a(this,"blurLayer");a(this,"hotspot");a(this,"cursor");a(this,"tooltip");a(this,"controls");a(this,"backBtn");a(this,"nextBtn");a(this,"restartBtn");a(this,"fsBtn");a(this,"progressFill");a(this,"counter");a(this,"tooltipBack",null);a(this,"tooltipNext",null);a(this,"view");a(this,"index",0);a(this,"destroyed",!1);a(this,"aspectSet",!1);a(this,"onFullscreenChange");a(this,"cursorPos",{x:.5,y:.55});a(this,"motionTimers",[]);a(this,"reducedMotion");a(this,"camera",null);a(this,"lastStepUrl",null);var n,l,h,u,f,d;this.demo=s,this.baseUrl=((n=o==null?void 0:o.baseUrl)!=null?n:".").replace(/\/+$/,"");const i=t.ownerDocument;if(this.doc=i,this.reducedMotion=(f=(u=(h=(l=i.defaultView)==null?void 0:l.matchMedia)==null?void 0:h.call(l,"(prefers-reduced-motion: reduce)"))==null?void 0:u.matches)!=null?f:!1,this.root=i.createElement("div"),this.root.className=`fds-player fds-${s.theme.mode}`,this.root.setAttribute("role","application"),this.root.setAttribute("aria-label",s.title||"Interactive tutorial"),this.root.tabIndex=0,this.root.style.setProperty("--fds-accent",s.theme.accentColor),this.root.style.setProperty("--fds-radius",`${c(s.theme.borderRadius,0,32)}px`),this.live=i.createElement("div"),this.live.className="fds-visually-hidden",this.live.setAttribute("aria-live","polite"),this.live.setAttribute("role","status"),this.screenEl=i.createElement("div"),this.screenEl.className="fds-screen",this.screenEl.hidden=!0,this.stage=i.createElement("div"),this.stage.className="fds-stage",this.img=i.createElement("img"),this.img.className="fds-screenshot",this.img.alt="",this.img.draggable=!1,this.img.addEventListener("load",()=>{!this.aspectSet&&this.img.naturalWidth>0&&this.img.naturalHeight>0&&(this.aspectSet=!0,this.stage.style.aspectRatio=`${this.img.naturalWidth} / ${this.img.naturalHeight}`)}),this.img.addEventListener("error",()=>{this.stage.classList.add("fds-broken"),this.imgError.hidden=!1}),this.imgError=i.createElement("div"),this.imgError.className="fds-screenshot-error",this.imgError.textContent="Screenshot unavailable",this.imgError.hidden=!0,this.blurLayer=i.createElement("div"),this.blurLayer.className="fds-blur-layer",this.blurLayer.setAttribute("aria-hidden","true"),this.hotspot=i.createElement("button"),this.hotspot.type="button",this.hotspot.className="fds-hotspot",this.hotspot.hidden=!0,this.hotspot.addEventListener("click",()=>{const p=this.currentStep();p&&p.advanceMode!=="button"&&this.next()}),this.hotspot.addEventListener("keydown",p=>{if(p.key!=="Enter"&&p.key!==" ")return;p.preventDefault();const v=this.currentStep();v&&v.advanceMode!=="button"&&this.next()}),this.tooltip=i.createElement("div"),this.tooltip.className="fds-tooltip",this.tooltip.hidden=!0,this.cursor=i.createElement("div"),this.cursor.className="fds-cursor",this.cursor.setAttribute("aria-hidden","true"),this.cursor.hidden=!0,this.zoomLayer=i.createElement("div"),this.zoomLayer.className="fds-zoom-layer",this.zoomLayer.append(this.img,this.blurLayer,this.hotspot,this.cursor),this.stage.append(this.zoomLayer,this.tooltip,this.imgError),this.controls=i.createElement("div"),this.controls.className="fds-controls",s.theme.logoPath){const p=i.createElement("img");p.className="fds-logo",p.alt="",p.src=this.asset(s.theme.logoPath),p.addEventListener("error",()=>{p.hidden=!0}),this.controls.appendChild(p)}this.backBtn=this.makeButton("fds-btn fds-btn-back","Previous step","Back"),this.backBtn.addEventListener("click",()=>this.back());const r=i.createElement("div");r.className="fds-progress",r.setAttribute("aria-hidden","true"),this.progressFill=i.createElement("div"),this.progressFill.className="fds-progress-fill",r.appendChild(this.progressFill),this.counter=i.createElement("span"),this.counter.className="fds-counter",this.nextBtn=this.makeButton("fds-btn fds-btn-primary fds-btn-next","Next step","Next"),this.nextBtn.addEventListener("click",()=>this.next()),this.restartBtn=this.makeButton("fds-btn fds-btn-restart","Restart tutorial","↺"),this.restartBtn.addEventListener("click",()=>this.restart()),this.fsBtn=this.makeButton("fds-btn fds-btn-fullscreen","Enter fullscreen","⛶"),this.fsBtn.addEventListener("click",()=>this.toggleFullscreen()),typeof this.root.requestFullscreen!="function"&&(this.fsBtn.hidden=!0),this.controls.append(this.backBtn,r,this.counter,this.nextBtn,this.restartBtn,this.fsBtn),this.root.addEventListener("keydown",p=>this.onKeyDown(p)),this.onFullscreenChange=()=>{const p=this.doc.fullscreenElement===this.root;this.fsBtn.setAttribute("aria-label",p?"Exit fullscreen":"Enter fullscreen"),this.root.classList.toggle("fds-fullscreen",p)},i.addEventListener("fullscreenchange",this.onFullscreenChange),this.root.append(this.live,this.screenEl,this.stage,this.controls),t.replaceChildren(this.root),this.view=(d=s.intro)!=null&&d.enabled?"intro":"step",this.render()}get currentIndex(){return this.index}goTo(t){this.destroyed||this.demo.steps.length===0||(this.index=c(Math.trunc(t),0,this.demo.steps.length-1),this.view="step",this.render())}next(){var t;if(!this.destroyed){if(this.view==="intro"){this.goTo(0);return}if(this.view!=="complete"){if(this.index<this.demo.steps.length-1){this.goTo(this.index+1);return}(t=this.demo.completion)!=null&&t.enabled&&(this.view="complete",this.render())}}}back(){var t;if(!this.destroyed){if(this.view==="complete"){this.goTo(this.demo.steps.length-1);return}this.view==="step"&&(this.index>0?this.goTo(this.index-1):(t=this.demo.intro)!=null&&t.enabled&&(this.view="intro",this.render()))}}restart(){var t;this.destroyed||(this.index=0,this.view=(t=this.demo.intro)!=null&&t.enabled?"intro":"step",this.render())}destroy(){this.destroyed||(this.destroyed=!0,this.clearMotion(),this.doc.removeEventListener("fullscreenchange",this.onFullscreenChange),this.root.remove())}playback(){var s,o,i;const t=this.demo.playback;return{cursor:(s=t==null?void 0:t.cursor)!=null?s:!0,zoom:(o=t==null?void 0:t.zoom)!=null?o:!0,zoomLevel:c((i=t==null?void 0:t.zoomLevel)!=null?i:1.35,1,10)}}clearMotion(){for(const t of this.motionTimers)clearTimeout(t);this.motionTimers=[],this.cursor.classList.remove("fds-cursor-click")}applyCamera(t,s=!1){s&&(this.zoomLayer.style.transition="none"),this.zoomLayer.style.transform=t?`translate(${(t.fx*(1-t.s)*100).toFixed(3)}%, ${(t.fy*(1-t.s)*100).toFixed(3)}%) scale(${t.s})`:"",s&&(this.zoomLayer.offsetWidth,this.zoomLayer.style.transition="")}animateCameraTo(t){this.camera=t,this.applyCamera(t)}resetCamera(){this.camera=null,this.lastStepUrl=null,this.applyCamera(null,!0)}canStandStill(t,s){const o=this.camera;if(!o||Math.abs(o.s-t.s)>.05)return!1;const i=1/o.s,r=o.fx*(1-i),n=o.fy*(1-i),l=.05*i,h=s!=null?s:{x:t.fx,y:t.fy,width:0,height:0};return h.x>=r+l&&h.y>=n+l&&h.x+h.width<=r+i-l&&h.y+h.height<=n+i-l}animateStep(t,s){var p,v,N;this.clearMotion();const o=this.playback(),i=t.hotspot,r=t.zoom;let n=o.zoom,l=o.zoomLevel;(r==null?void 0:r.mode)==="off"?n=!1:(r==null?void 0:r.mode)==="custom"&&(n=!0,l=c((p=r.level)!=null?p:l,1,10));const h=(r==null?void 0:r.mode)==="custom"&&r.focusX!==void 0&&r.focusY!==void 0?{x:c(r.focusX,0,1),y:c(r.focusY,0,1)}:null;if(this.reducedMotion){this.cursor.hidden=!0;return}if(!i&&!h){this.cursor.hidden=!0,this.animateCameraTo(null);return}const u=i?{x:c((v=i.clickX)!=null?v:i.x+i.width/2,0,1),y:c((N=i.clickY)!=null?N:i.y+i.height/2,0,1)}:h,f=h!=null?h:u;o.cursor&&i?(this.cursor.hidden=!1,this.cursor.style.transition="none",this.cursor.style.left=m(this.cursorPos.x),this.cursor.style.top=m(this.cursorPos.y),this.cursor.offsetWidth,this.cursor.style.transition="",this.motionTimers.push(setTimeout(()=>{this.cursor.style.left=m(u.x),this.cursor.style.top=m(u.y)},200),setTimeout(()=>this.cursor.classList.add("fds-cursor-click"),1e3))):this.cursor.hidden=!0,this.cursorPos=u;const d=n&&l>1.001?{s:l,fx:f.x,fy:f.y}:null;if(!d){this.animateCameraTo(null);return}if(!(this.camera&&s&&this.canStandStill(d,i))){if(this.camera&&s){this.motionTimers.push(setTimeout(()=>{this.animateCameraTo(d),!this.tooltip.hidden&&i&&this.positionTooltip(i,{s:d.s,ox:d.fx,oy:d.fy})},150));return}this.camera=null,this.applyCamera(null,!0),this.motionTimers.push(setTimeout(()=>{this.animateCameraTo(d),!this.tooltip.hidden&&i&&this.positionTooltip(i,{s:d.s,ox:d.fx,oy:d.fy})},600))}}currentStep(){return this.demo.steps[this.index]}asset(t){return/^[a-z][a-z0-9+.-]*:/i.test(t)?t:`${this.baseUrl}/${t}`}makeButton(t,s,o){const i=this.doc.createElement("button");return i.type="button",i.className=t,i.setAttribute("aria-label",s),i.textContent=o,i}announce(t){this.live.textContent=t}effectiveMode(t){return t.advanceMode==="hotspot"&&!t.hotspot?"either":t.advanceMode}onKeyDown(t){if(!(t.altKey||t.ctrlKey||t.metaKey))switch(t.key){case"ArrowRight":{const s=this.currentStep();this.view==="intro"?(this.next(),t.preventDefault()):this.view==="step"&&s&&this.effectiveMode(s)!=="hotspot"&&(this.next(),t.preventDefault());break}case"ArrowLeft":(this.view==="step"||this.view==="complete")&&(this.back(),t.preventDefault());break;case"Home":this.restart(),t.preventDefault();break;case"f":case"F":this.toggleFullscreen();break}}toggleFullscreen(){if(typeof this.root.requestFullscreen=="function")try{this.doc.fullscreenElement?this.doc.exitFullscreen().catch(()=>{}):this.root.requestFullscreen().catch(()=>{})}catch{}}render(){if(!this.destroyed){if(this.demo.steps.length===0){this.renderEmpty();return}this.view==="intro"?this.renderIntro():this.view==="complete"?this.renderCompletion():this.renderStep()}}showScreen(){this.clearMotion(),this.resetCamera(),this.cursor.hidden=!0,this.screenEl.hidden=!1,this.stage.hidden=!0,this.controls.hidden=!0}renderEmpty(){this.showScreen();const t=this.doc.createElement("p");t.className="fds-fatal",t.textContent="This tutorial has no steps.",this.screenEl.replaceChildren(t),this.announce("This tutorial has no steps.")}screenLogo(){if(!this.demo.theme.logoPath)return null;const t=this.doc.createElement("img");return t.className="fds-screen-logo",t.alt="",t.src=this.asset(this.demo.theme.logoPath),t.addEventListener("error",()=>{t.hidden=!0}),t}renderIntro(){this.showScreen();const t=this.demo.intro,s=(t==null?void 0:t.title)||this.demo.title,o=(t==null?void 0:t.description)||this.demo.description||"",i=(t==null?void 0:t.startLabel)||"Start tutorial",r=[],n=this.screenLogo();n&&r.push(n);const l=this.doc.createElement("h2");if(l.className="fds-screen-title",l.textContent=s,r.push(l),o){const u=this.doc.createElement("p");u.className="fds-screen-description",u.textContent=o,r.push(u)}const h=this.makeButton("fds-btn fds-btn-primary fds-btn-start",i,i);h.addEventListener("click",()=>this.goTo(0)),r.push(h),this.screenEl.replaceChildren(...r),this.announce(`${s}. ${i} to begin.`)}renderCompletion(){this.showScreen();const t=this.demo.completion,s=(t==null?void 0:t.message)||"You have completed this tutorial.",o=(t==null?void 0:t.restartLabel)||"Restart",i=[],r=this.screenLogo();r&&i.push(r);const n=this.doc.createElement("h2");n.className="fds-screen-title",n.textContent=this.demo.title,i.push(n);const l=this.doc.createElement("p");l.className="fds-screen-description fds-completion-message",l.textContent=s,i.push(l);const h=this.makeButton("fds-btn fds-btn-primary fds-btn-restart-screen",o,o);h.addEventListener("click",()=>this.restart()),i.push(h);const u=t==null?void 0:t.externalLink;if(u!=null&&u.enabled&&U(u.url)){const f=this.doc.createElement("a");f.className="fds-external-link",f.href=u.url,f.target="_blank",f.rel="noopener noreferrer";const d=u.label||"Learn more";f.textContent=d;const p=this.doc.createElement("span");p.className="fds-external-suffix",p.textContent=" ↗ external link",f.appendChild(p),f.setAttribute("aria-label",`${d} (external link, opens in a new tab)`),i.push(f)}this.screenEl.replaceChildren(...i),this.announce(s)}renderStep(){const t=this.currentStep();if(!t)return;this.screenEl.hidden=!0,this.stage.hidden=!1,this.controls.hidden=!1;const s=this.lastStepUrl!==null&&this.lastStepUrl===t.sourceUrl;this.lastStepUrl=t.sourceUrl,this.stage.classList.toggle("fds-continuity",s),s||(this.stage.classList.remove("fds-fade"),this.stage.offsetWidth,this.stage.classList.add("fds-fade")),this.stage.classList.remove("fds-broken"),this.imgError.hidden=!0,this.img.setAttribute("src",this.asset(t.screenshotPath)),this.img.alt=t.pageTitle||t.title||"",this.renderBlurRegions(t),this.renderHotspot(t),this.renderTooltip(t),this.updateControls(t),this.animateStep(t,s),this.announce(`Step ${this.index+1} of ${this.demo.steps.length}: ${t.title||"Untitled step"}`)}renderBlurRegions(t){const s=Array.isArray(t.blurRegions)?t.blurRegions:[],o=this.asset(t.screenshotPath),i=s.map(r=>{const n=c(r.x,0,1),l=c(r.y,0,1),h=Math.max(c(r.width,0,1),.005),u=Math.max(c(r.height,0,1),.005),f=this.doc.createElement("div");f.className="fds-blur",f.style.left=m(n),f.style.top=m(l),f.style.width=m(h),f.style.height=m(u);const d=this.doc.createElement("img");return d.className="fds-blur-img",d.alt="",d.draggable=!1,d.src=o,d.style.width=`${(100/h).toFixed(3)}%`,d.style.height=`${(100/u).toFixed(3)}%`,d.style.left=`${(-n/h*100).toFixed(3)}%`,d.style.top=`${(-l/u*100).toFixed(3)}%`,f.appendChild(d),f});this.blurLayer.replaceChildren(...i)}renderHotspot(t){const s=t.hotspot;if(!s){this.hotspot.hidden=!0;return}this.hotspot.hidden=!1,this.hotspot.style.left=m(c(s.x,0,1)),this.hotspot.style.top=m(c(s.y,0,1)),this.hotspot.style.width=m(c(s.width,0,1)),this.hotspot.style.height=m(c(s.height,0,1)),this.hotspot.classList.toggle("fds-hotspot-circle",s.shape==="circle"),this.hotspot.classList.toggle("fds-hotspot-pulse",this.demo.theme.hotspotPulse),s.shape!=="circle"&&typeof s.borderRadius=="number"&&s.borderRadius>0?this.hotspot.style.borderRadius=`${(c(s.borderRadius,0,.5)*100).toFixed(3)}cqw`:this.hotspot.style.borderRadius="";const o=t.advanceMode==="button";this.hotspot.classList.toggle("fds-hotspot-decorative",o),o?(this.hotspot.setAttribute("aria-hidden","true"),this.hotspot.tabIndex=-1,this.hotspot.removeAttribute("aria-label")):(this.hotspot.removeAttribute("aria-hidden"),this.hotspot.tabIndex=0,this.hotspot.setAttribute("aria-label",t.title?`${t.title} — activate to continue`:"Continue to the next step"))}resolvePlacement(t){if(t.tooltipPlacement!=="auto")return t.tooltipPlacement;const s={top:t.y,bottom:1-(t.y+t.height),left:t.x,right:1-(t.x+t.width)};let o="bottom";for(const i of["top","right","left"])s[i]>s[o]&&(o=i);return o}renderTooltip(t){if(!(t.title!==""||t.body!=="")){this.tooltip.hidden=!0;return}this.tooltip.hidden=!1,this.tooltip.className="fds-tooltip",this.demo.theme.tooltipStyle==="soft"&&this.tooltip.classList.add("fds-tooltip-soft"),this.tooltip.style.cssText="";const o=[];if(t.title){const n=this.doc.createElement("strong");n.className="fds-tooltip-title",n.textContent=t.title,o.push(n)}if(t.body){const n=this.doc.createElement("p");n.className="fds-tooltip-body",n.textContent=t.body,o.push(n)}const i=this.doc.createElement("div");i.className="fds-tooltip-nav",this.tooltipBack=this.makeButton("fds-btn fds-tt-back","Back","Back"),this.tooltipBack.addEventListener("click",()=>this.back()),this.tooltipNext=this.makeButton("fds-btn fds-btn-primary fds-tt-next","Next","Next"),this.tooltipNext.addEventListener("click",()=>this.next()),i.append(this.tooltipBack,this.tooltipNext),o.push(i),this.tooltip.replaceChildren(...o);const r=t.hotspot;if(!r){this.tooltip.classList.add("fds-tooltip-centered"),this.tooltip.removeAttribute("data-placement");return}this.camera?this.positionTooltip(r,{s:this.camera.s,ox:this.camera.fx,oy:this.camera.fy}):(this.tooltip.style.transition="none",this.positionTooltip(r,null),this.tooltip.offsetWidth,this.tooltip.style.transition="")}positionTooltip(t,s){const o=B=>s?s.ox+(B-s.ox)*s.s:B,i=B=>s?s.oy+(B-s.oy)*s.s:B,r=o(t.x),n=o(t.x+t.width),l=i(t.y),h=i(t.y+t.height),u=this.resolvePlacement(t);this.tooltip.setAttribute("data-placement",u),this.tooltip.style.setProperty("--fds-tt-dx","0px"),this.tooltip.style.setProperty("--fds-tt-dy","0px"),this.tooltip.style.left="",this.tooltip.style.right="",this.tooltip.style.top="",this.tooltip.style.bottom="";const f=c((r+n)/2,.06,.94),d=c((l+h)/2,.06,.94),p=c(1-l,.02,.98),v=c(h,.02,.98),N=c(1-r,.02,.98),R=c(n,.02,.98);switch(u){case"top":this.tooltip.style.left=m(f),this.tooltip.style.bottom=m(p);break;case"bottom":this.tooltip.style.left=m(f),this.tooltip.style.top=m(v);break;case"left":this.tooltip.style.top=m(d),this.tooltip.style.right=m(N);break;case"right":this.tooltip.style.top=m(d),this.tooltip.style.left=m(R);break}const C=this.stage.clientWidth,P=this.stage.clientHeight;if(C<=0||P<=0)return;const g=this.tooltip.getBoundingClientRect(),S=10,k=8;let E,L;switch(u){case"top":E=f*C-g.width/2,L=(1-p)*P-S-g.height;break;case"bottom":E=f*C-g.width/2,L=v*P+S;break;case"left":E=(1-N)*C-S-g.width,L=d*P-g.height/2;break;case"right":E=R*C+S,L=d*P-g.height/2;break}let F=0,M=0;E<k?F=k-E:E+g.width>C-k&&(F=C-k-(E+g.width)),L<k?M=k-L:L+g.height>P-k&&(M=P-k-(L+g.height)),F!==0&&this.tooltip.style.setProperty("--fds-tt-dx",`${F.toFixed(1)}px`),M!==0&&this.tooltip.style.setProperty("--fds-tt-dy",`${M.toFixed(1)}px`)}updateControls(t){var l,h;const s=this.demo.steps.length,o=this.index===0,i=this.index===s-1,r=((l=this.demo.completion)==null?void 0:l.enabled)===!0,n=this.effectiveMode(t);this.backBtn.disabled=o&&((h=this.demo.intro)==null?void 0:h.enabled)!==!0,this.nextBtn.disabled=n==="hotspot"||i&&!r,this.tooltipBack&&(this.tooltipBack.disabled=this.backBtn.disabled),this.tooltipNext&&(this.tooltipNext.disabled=this.nextBtn.disabled),this.counter.textContent=`${this.index+1} / ${s}`,this.progressFill.style.width=m((this.index+1)/s)}}function x(e){return typeof e=="object"&&e!==null}function y(e,t){return typeof e=="string"?e:t}function T(e){if(!(typeof e!="number"||!Number.isFinite(e)))return Math.min(Math.max(e,0),1)}function D(e){if(!x(e))return;const t=T(e.x),s=T(e.y),o=T(e.width),i=T(e.height);if(t===void 0||s===void 0||o===void 0||i===void 0)return;const r={x:t,y:s,width:o,height:i,shape:e.shape==="circle"?"circle":"rectangle",tooltipPlacement:e.tooltipPlacement==="top"||e.tooltipPlacement==="right"||e.tooltipPlacement==="bottom"||e.tooltipPlacement==="left"?e.tooltipPlacement:"auto"},n=T(e.clickX),l=T(e.clickY);return n!==void 0&&(r.clickX=n),l!==void 0&&(r.clickY=l),r}function w(e,t){if(!x(e)||typeof e.screenshotPath!="string"||e.screenshotPath.length===0)return null;const s={id:typeof e.id=="string"&&e.id!==""?e.id:`step-${t+1}`,order:t,screenshotPath:e.screenshotPath,title:y(e.title,""),body:y(e.body,""),advanceMode:e.advanceMode==="hotspot"||e.advanceMode==="button"?e.advanceMode:"either"};typeof e.sourceUrl=="string"&&(s.sourceUrl=e.sourceUrl),typeof e.pageTitle=="string"&&(s.pageTitle=e.pageTitle);const o=D(e.hotspot);return o&&(s.hotspot=o),s}function I(e){const t=x(e)?e:{},s={mode:t.mode==="light"||t.mode==="dark"?t.mode:"frax-dark",accentColor:typeof t.accentColor=="string"&&/^#[0-9a-fA-F]{6}$/.test(t.accentColor)?t.accentColor:"#3b82f6",borderRadius:typeof t.borderRadius=="number"&&Number.isFinite(t.borderRadius)?Math.min(Math.max(t.borderRadius,0),32):8,tooltipStyle:t.tooltipStyle==="soft"?"soft":"solid",hotspotPulse:typeof t.hotspotPulse=="boolean"?t.hotspotPulse:!0};return typeof t.logoPath=="string"&&t.logoPath!==""&&!t.logoPath.includes("..")&&!t.logoPath.startsWith("/")&&(s.logoPath=t.logoPath),s}function H(e){if(x(e))return{enabled:e.enabled===!0,title:y(e.title,""),description:y(e.description,""),startLabel:y(e.startLabel,"Start tutorial")||"Start tutorial"}}function W(e){if(!x(e))return;const t={enabled:e.enabled===!0,message:y(e.message,"You have completed this tutorial."),restartLabel:y(e.restartLabel,"Restart")||"Restart"};return x(e.externalLink)&&(t.externalLink={enabled:e.externalLink.enabled===!0,url:y(e.externalLink.url,""),label:y(e.externalLink.label,"Learn more")}),t}function Y(e){const t=x(e)?e:{},s=typeof t.zoomLevel=="number"?t.zoomLevel:1.35;return{cursor:t.cursor!==!1,zoom:t.zoom!==!1,zoomLevel:Math.min(2,Math.max(1,s))}}function X(e){if(!x(e)||!Array.isArray(e.steps))return null;const t=[];for(const r of e.steps){const n=w(r,t.length);n&&t.push(n)}const s={schemaVersion:1,id:y(e.id,"demo")||"demo",title:y(e.title,"Untitled tutorial"),slug:y(e.slug,"demo")||"demo",theme:I(e.theme),playback:Y(e.playback),steps:t,generatedAt:y(e.generatedAt,new Date(0).toISOString())};typeof e.description=="string"&&(s.description=e.description);const o=H(e.intro);o&&(s.intro=o);const i=W(e.completion);return i&&(s.completion=i),s}function $(e,t){const s=e.ownerDocument,o=s.createElement("div");o.className="fds-player fds-frax-dark fds-fatal-panel";const i=s.createElement("p");i.className="fds-fatal",i.setAttribute("role","alert"),i.textContent=t,o.appendChild(i),e.replaceChildren(o)}async function K(e){var i,r;const t=e.getElementById("frax-demo-root");if(!t)return;let s;try{const n=e.getElementById("frax-demo-data"),l=(i=n==null?void 0:n.textContent)==null?void 0:i.trim();if(l)s=JSON.parse(l);else{const h=(r=t.dataset.demoSrc)!=null?r:"./demo.json",u=await fetch(h);if(!u.ok)throw new Error(`Failed to load demo data (HTTP ${u.status})`);s=await u.json()}}catch{$(t,"This tutorial could not be loaded: demo data is missing or invalid.");return}const o=X(s);if(!o){$(t,"This tutorial could not be loaded: demo data has an invalid format.");return}try{A(t,o)}catch{$(t,"This tutorial could not be started due to an unexpected error.")}}function O(e=document){const t=()=>{K(e)};e.readyState==="loading"?e.addEventListener("DOMContentLoaded",t,{once:!0}):t()}return O(),b.DemoPlayer=z,b.createPlayer=A,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"}),b})({});