just-a-walkthrough
Version:
Framework-agnostic onboarding walkthrough / product tour library with optional React provider & Tailwind/shadcn support.
39 lines (38 loc) • 28.9 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react");var j={exports:{}},O={};/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var tt;function kt(){if(tt)return O;tt=1;var s=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function e(o,c,l){var n=null;if(l!==void 0&&(n=""+l),c.key!==void 0&&(n=""+c.key),"key"in c){l={};for(var i in c)i!=="key"&&(l[i]=c[i])}else l=c;return c=l.ref,{$$typeof:s,type:o,key:n,ref:c!==void 0?c:null,props:l}}return O.Fragment=t,O.jsx=e,O.jsxs=e,O}var P={};/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var et;function Et(){return et||(et=1,process.env.NODE_ENV!=="production"&&(function(){function s(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===bt?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case x:return"Fragment";case L:return"Profiler";case _:return"StrictMode";case mt:return"Suspense";case gt:return"SuspenseList";case xt:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case N:return"Portal";case ft:return(r.displayName||"Context")+".Provider";case ht:return(r._context.displayName||"Context")+".Consumer";case pt:var f=r.render;return r=r.displayName,r||(r=f.displayName||f.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case yt:return f=r.displayName||null,f!==null?f:s(r.type)||"Memo";case J:f=r._payload,r=r._init;try{return s(r(f))}catch{}}return null}function t(r){return""+r}function e(r){try{t(r);var f=!1}catch{f=!0}if(f){f=console;var m=f.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return m.call(f,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),t(r)}}function o(r){if(r===x)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===J)return"<...>";try{var f=s(r);return f?"<"+f+">":"<...>"}catch{return"<...>"}}function c(){var r=D.A;return r===null?null:r.getOwner()}function l(){return Error("react-stack-top-frame")}function n(r){if(V.call(r,"key")){var f=Object.getOwnPropertyDescriptor(r,"key").get;if(f&&f.isReactWarning)return!1}return r.key!==void 0}function i(r,f){function m(){G||(G=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",f))}m.isReactWarning=!0,Object.defineProperty(r,"key",{get:m,configurable:!0})}function a(){var r=s(this.type);return K[r]||(K[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),r=this.props.ref,r!==void 0?r:null}function u(r,f,m,b,S,E,F,W){return m=E.ref,r={$$typeof:y,type:r,key:f,props:E,_owner:S},(m!==void 0?m:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:a}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function h(r,f,m,b,S,E,F,W){var w=f.children;if(w!==void 0)if(b)if(wt(w)){for(b=0;b<w.length;b++)d(w[b]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else d(w);if(V.call(f,"key")){w=s(r);var C=Object.keys(f).filter(function(vt){return vt!=="key"});b=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",Q[w+b]||(C=0<C.length?"{"+C.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,b,w,C,w),Q[w+b]=!0)}if(w=null,m!==void 0&&(e(m),w=""+m),n(f)&&(e(f.key),w=""+f.key),"key"in f){m={};for(var H in f)H!=="key"&&(m[H]=f[H])}else m=f;return w&&i(m,typeof r=="function"?r.displayName||r.name||"Unknown":r),u(r,w,E,S,c(),m,F,W)}function d(r){typeof r=="object"&&r!==null&&r.$$typeof===y&&r._store&&(r._store.validated=1)}var p=v,y=Symbol.for("react.transitional.element"),N=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),ht=Symbol.for("react.consumer"),ft=Symbol.for("react.context"),pt=Symbol.for("react.forward_ref"),mt=Symbol.for("react.suspense"),gt=Symbol.for("react.suspense_list"),yt=Symbol.for("react.memo"),J=Symbol.for("react.lazy"),xt=Symbol.for("react.activity"),bt=Symbol.for("react.client.reference"),D=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,wt=Array.isArray,$=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(r){return r()}};var G,K={},X=p.react_stack_bottom_frame.bind(p,l)(),Z=$(o(l)),Q={};P.Fragment=x,P.jsx=function(r,f,m,b,S){var E=1e4>D.recentlyCreatedOwnerStacks++;return h(r,f,m,!1,b,S,E?Error("react-stack-top-frame"):X,E?$(o(r)):Z)},P.jsxs=function(r,f,m,b,S){var E=1e4>D.recentlyCreatedOwnerStacks++;return h(r,f,m,!0,b,S,E?Error("react-stack-top-frame"):X,E?$(o(r)):Z)}})()),P}var rt;function Tt(){return rt||(rt=1,process.env.NODE_ENV==="production"?j.exports=kt():j.exports=Et()),j.exports}var g=Tt();let ot=!1;try{typeof process<"u"&&process.env?.JUST_A_WALKTHROUGH_DEBUG==="true"&&(ot=!0)}catch{}function st(){return typeof window<"u"&&window.__JUST_A_WALKTHROUGH_DEBUG?!0:ot}function k(s,t,e,o){st()}new Proxy({},{get(s,t){return(...e)=>{if(st())try{console[t]?.("[walkthrough]",...e)}catch{}}}});const R=typeof window<"u"&&typeof document<"u";function _t(s){try{const t=document.implementation.createHTMLDocument("wt"),e=t.createElement("div");e.innerHTML=s;const o=new Set(["SCRIPT","STYLE","TEMPLATE","IFRAME","OBJECT","EMBED"]),c=["href","src","xlink:href"],l=/^(https?:|mailto:|tel:|data:image\/(?:png|gif|jpeg|jpg|webp|svg\+xml);)/i,n=t.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),i=[];for(;n.nextNode();){const a=n.currentNode;if(o.has(a.tagName)){i.push(a);continue}for(const u of Array.from(a.attributes)){const h=u.name.toLowerCase();if(h.startsWith("on")||h==="srcdoc"){a.removeAttribute(u.name);continue}if(c.includes(h)){const d=u.value.trim();d&&!l.test(d)&&a.removeAttribute(u.name)}}}for(const a of i)a.remove();return e.innerHTML}catch{const t=document.createElement("div");return t.textContent=s,t.innerHTML}}class I{steps;opts;index=-1;active=!1;root;overlayParts;resizeHandler=()=>this.reposition();scrollHandler=()=>this.reposition();keyHandler=t=>this.onKey(t);mutationObserver;focusTrapDisposer;constructor(t,e={}){this.steps=t.map(o=>({...o})),this.opts={backdropOpacity:e.backdropOpacity??.55,zIndex:e.zIndex??9999,keyboard:e.keyboard??!0,allowBodyScroll:e.allowBodyScroll??!1,stepWaitMs:Math.max(0,e.stepWaitMs??5e3),stepPollIntervalMs:Math.max(0,e.stepPollIntervalMs??120),onFinish:e.onFinish??(()=>{}),onSkip:e.onSkip??(()=>{}),onStepChange:e.onStepChange??(()=>{}),advanceOnTargetClick:e.advanceOnTargetClick??!1,advanceOnOverlayClick:e.advanceOnOverlayClick??!1,scrollIntoView:e.scrollIntoView??!0,scrollOptions:e.scrollOptions,persistProgress:e.persistProgress??!1,resume:e.resume??!!e.persistProgress,tourId:e.tourId,customTooltip:e.customTooltip,disableFocusTrap:e.disableFocusTrap??!1,theme:e.theme??"default",tooltipClass:e.tooltipClass,ringClass:e.ringClass,overlayClass:e.overlayClass,alwaysOnTop:e.alwaysOnTop??!0}}hasDOM(){return typeof window<"u"&&typeof document<"u"&&!!document.body}async start(t=0){if(this.active)return;if(!this.hasDOM()){k("walkthrough","start-no-dom",this.opts.tourId||"<anon>");return}if(this.active=!0,this.buildDom(),k("walkthrough","start",this.opts.tourId||"<anon>",{steps:this.steps.length,resume:this.opts.resume,persist:this.opts.persistProgress}),this.opts.allowBodyScroll||(document.body.style.overflow="hidden"),R&&(window.addEventListener("resize",this.resizeHandler,{passive:!0}),window.addEventListener("scroll",this.scrollHandler,!0)),this.opts.keyboard&&document.addEventListener("keydown",this.keyHandler),this.hasDOM()&&typeof MutationObserver<"u"){this.mutationObserver=new MutationObserver(()=>{this.hasDOM()&&(this.reposition(),this.opts.alwaysOnTop&&this.ensureRootOnTop())});try{this.mutationObserver.observe(document.body,{attributes:!0,childList:!0,subtree:!0})}catch{}}const e=this.loadProgress(),o=this.opts.persistProgress&&this.opts.resume&&e!=null?e:t;await this.go(o)}async go(t){if(!this.active)return;if(t<0||t>=this.steps.length)return this.finish();if(this.index>=0){const o=this.steps[this.index];o.afterStep&&await o.afterStep()}this.index=t,k("walkthrough","step",this.opts.tourId||"<anon>",{index:this.index,selector:this.steps[this.index].selector}),this.opts.onStepChange(this.index);const e=this.steps[this.index];if(e.beforeStep&&await e.beforeStep(),e._el=await this.resolveElement(e),!e._el)if(k("walkthrough",e.required?"missing-required":"missing-optional",this.opts.tourId||"<anon>",{selector:e.selector}),e.required){this.skip(`Required element not found for selector: ${e.selector}`);return}else return this.go(t+1);k("walkthrough","resolved",this.opts.tourId||"<anon>",{index:this.index,selector:e.selector}),this.renderStep(e),this.saveProgress()}next(){this.go(this.index+1)}prev(){this.go(this.index-1)}finish(){this.active&&(this.markCompleted(),this.cleanup(),k("walkthrough","finish",this.opts.tourId||"<anon>",{finalIndex:this.index}),this.opts.onFinish())}skip(t){this.active&&(this.cleanup(),k("walkthrough","skip",this.opts.tourId||"<anon>",{index:this.index}),this.opts.onSkip(t))}destroy(){this.cleanup(),k("walkthrough","destroy",this.opts.tourId||"<anon>")}async resolveElement(t){const e=Math.max(0,t.waitMs==null?this.opts.stepWaitMs:t.waitMs);if(e===0)return document.querySelector(t.selector)||null;const o=Date.now()+e,c=Math.max(1,this.opts.stepPollIntervalMs);for(;Date.now()<=o;){const l=document.querySelector(t.selector);if(l)return l;await new Promise(n=>setTimeout(n,c))}return null}buildDom(){if(this.root)return;const t=document.createElement("div");if(t.className="wt-root",t.setAttribute("data-walkthrough",""),t.style.position="fixed",t.style.inset="0",t.style.zIndex=String(this.opts.zIndex),t.style.pointerEvents="none",this.opts.theme==="default"&&!document.getElementById("__walkthrough_styles")){const h=document.createElement("style");h.id="__walkthrough_styles",h.textContent=this.generateStyles(),document.head.appendChild(h)}const e=h=>{const d=document.createElement("div");return d.className=`wt-part wt-overlay ${h}`,d.style.position="fixed",this.opts.theme==="default"?d.style.background=`rgba(0,0,0,${this.opts.backdropOpacity})`:this.opts.theme==="tailwind"&&d.classList.add("bg-black/60"),this.opts.overlayClass&&d.classList.add(...this.opts.overlayClass.split(/\s+/).filter(Boolean)),d.style.pointerEvents=this.opts.advanceOnOverlayClick?"auto":"none",d},o=e("wt-top"),c=e("wt-left"),l=e("wt-right"),n=e("wt-bottom"),i=document.createElement("div");i.className="wt-ring",i.style.position="fixed",i.style.pointerEvents="none",this.opts.theme==="default"?(i.style.border="2px solid #6366f1",i.style.borderRadius="8px",i.style.boxShadow="0 0 0 4px rgba(99,102,241,0.35), 0 4px 18px rgba(0,0,0,0.4)",i.style.transition="all 180ms cubic-bezier(.4,0,.2,1)"):this.opts.theme==="tailwind"&&i.classList.add("rounded-lg","border-2","border-primary","shadow-[0_0_0_4px_rgba(99,102,241,0.35)]","transition-all"),this.opts.ringClass&&i.classList.add(...this.opts.ringClass.split(/\s+/).filter(Boolean));const a=document.createElement("div");a.className="wt-tooltip",a.style.position="fixed",a.style.maxWidth="340px",a.style.pointerEvents="auto",a.style.display="flex",a.style.flexDirection="column",a.style.gap="12px",this.opts.theme==="tailwind"?a.classList.add("rounded-lg","border","p-4","bg-popover","text-popover-foreground","shadow-lg"):this.opts.theme==="unstyled"&&(a.removeAttribute("style"),a.style.position="fixed",a.style.pointerEvents="auto"),this.opts.tooltipClass&&a.classList.add(...this.opts.tooltipClass.split(/\s+/).filter(Boolean));const u=document.createElement("div");u.className="wt-live",u.setAttribute("aria-live","polite"),u.setAttribute("role","status"),u.style.position="absolute",u.style.width="1px",u.style.height="1px",u.style.overflow="hidden",u.style.clip="rect(1px,1px,1px,1px)",u.style.whiteSpace="nowrap",u.style.pointerEvents="none",t.appendChild(u),[o,c,l,n,i,a].forEach(h=>t.appendChild(h)),document.body.appendChild(t),this.root=t,this.overlayParts={top:o,left:c,right:l,bottom:n,ring:i,tooltip:a,live:u},this.opts.alwaysOnTop&&this.ensureRootOnTop(),this.opts.advanceOnOverlayClick&&[o,c,l,n].forEach(h=>h.addEventListener("click",()=>this.next()))}ensureRootOnTop(){if(!this.root)return;const t=document.body;t.lastElementChild!==this.root&&t.appendChild(this.root)}generateStyles(){return`
.wt-root { font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wt-tooltip { background: #111827EE; color: #f9fafb; border: 1px solid #374151; border-radius: 10px; padding: 16px 18px; box-shadow: 0 8px 28px -6px rgba(0,0,0,.55); }
.wt-tooltip h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.wt-tooltip .wt-content { font-size: 14px; line-height: 1.4; }
.wt-tooltip .wt-nav { display:flex; gap:8px; justify-content: flex-end; }
.wt-tooltip button { all:unset; font:inherit; background:#6366f1; color:#fff; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; box-shadow:0 2px 4px rgba(0,0,0,.25); }
.wt-tooltip button:hover { background:#4f46e5; }
.wt-tooltip button.wt-secondary { background:#374151; }
.wt-tooltip button.wt-secondary:hover { background:#4b5563; }
{
.wt-tooltip { background:#ffffffF2; color:#111827; border-color:#e5e7eb; }
.wt-tooltip button.wt-secondary { background:#e5e7eb; color:#111827; }
.wt-tooltip button.wt-secondary:hover { background:#d1d5db; }
}
`}renderStep(t){if(!t._el)return;const e=t.padding??8;if(this.positionHighlight(t._el,e),this.renderTooltip(t),t.focus)try{t._el.focus()}catch{}if(this.opts.scrollIntoView&&t._el)try{t._el.scrollIntoView(this.opts.scrollOptions||{behavior:"smooth",block:"center",inline:"center"})}catch{}if(this.opts.advanceOnTargetClick){const o=()=>{t._el?.removeEventListener("click",o),this.next()};t._el.addEventListener("click",o,{once:!0})}}positionHighlight(t,e){if(!R||typeof window>"u")return;const o=t.getBoundingClientRect(),c=e,l=o.left-c,n=o.top-c,i=o.width+c*2,a=o.height+c*2,{top:u,left:h,right:d,bottom:p,ring:y}=this.overlayParts;u.style.top="0px",u.style.left="0px",u.style.width="100%",u.style.height=`${Math.max(0,n)}px`,h.style.top=`${n}px`,h.style.left="0px",h.style.width=`${Math.max(0,l)}px`,h.style.height=`${a}px`,d.style.top=`${n}px`,d.style.left=`${l+i}px`,R&&(d.style.width=`${Math.max(0,window.innerWidth-(l+i))}px`),d.style.height=`${a}px`,p.style.top=`${n+a}px`,p.style.left="0px",p.style.width="100%",R&&(p.style.height=`${Math.max(0,window.innerHeight-(n+a))}px`),y.style.top=`${n}px`,y.style.left=`${l}px`,y.style.width=`${i}px`,y.style.height=`${a}px`,typeof window>"u"}renderTooltip(t){const{tooltip:e,live:o}=this.overlayParts;e.innerHTML="",o.textContent=t.title||"";let c=null;const l=()=>{const i=document.createElement("div");if(i.className="wt-nav",this.index>0){const d=document.createElement("button");d.className="wt-secondary",d.textContent="Back",d.addEventListener("click",()=>this.prev()),i.appendChild(d)}const a=document.createElement("button");a.className="wt-secondary",a.textContent="Skip",a.addEventListener("click",()=>this.skip("user-skip")),i.appendChild(a);const u=document.createElement("button"),h=this.index===this.steps.length-1;return u.textContent=h?"Done":"Next",u.addEventListener("click",()=>h?this.finish():this.next()),i.appendChild(u),i};if(this.opts.customTooltip){const i=this.opts.customTooltip({step:t,index:this.index,total:this.steps.length,api:this,defaultNav:l});e.appendChild(i)}else{if(t.title){const i=document.createElement("h3");i.textContent=t.title,e.appendChild(i)}if(t.content){const i=document.createElement("div");i.className="wt-content",i.innerHTML=t.allowUnsafeHTML?t.content:_t(t.content),e.appendChild(i)}e.appendChild(l())}t._el&&this.positionTooltip(t._el,e),this.opts.disableFocusTrap||this.setupFocusTrap(e);const n=e.querySelectorAll(I.FOCUSABLE_SEL);n.length?(c=n[0],setTimeout(()=>c?.focus(),0)):(e.tabIndex=-1,e.focus())}static FOCUSABLE_SEL='a[href], button:not([disabled]), textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])';setupFocusTrap(t){this.teardownFocusTrap();const e=o=>{if(o.key!=="Tab")return;const c=Array.from(t.querySelectorAll(I.FOCUSABLE_SEL)).filter(i=>!i.hasAttribute("disabled"));if(!c.length){o.preventDefault(),t.focus();return}const l=c[0],n=c[c.length-1];o.shiftKey?document.activeElement===l&&(o.preventDefault(),n.focus()):document.activeElement===n&&(o.preventDefault(),l.focus())};document.addEventListener("keydown",e,!0),this.focusTrapDisposer=()=>document.removeEventListener("keydown",e,!0)}teardownFocusTrap(){this.focusTrapDisposer?.(),this.focusTrapDisposer=void 0}positionTooltip(t,e){if(!R||typeof window>"u")return;const o=t.getBoundingClientRect(),c=14,l=e.offsetWidth||320,n=e.offsetHeight||140;let i=o.bottom+c,a=o.left+(o.width-l)/2,u=!1;const h=(d,p)=>d>=4&&d+l<=window.innerWidth-4&&p>=4&&p+n<=window.innerHeight-4;if(h(a,i)&&(u=!0),!u){const d=o.top-c-n;h(a,d)&&(i=d,u=!0)}if(!u){const d=o.right+c,p=o.top+(o.height-n)/2;h(d,p)&&(a=d,i=p,u=!0)}if(!u){const d=o.left-c-l,p=o.top+(o.height-n)/2;h(d,p)&&(a=d,i=p,u=!0)}u||(i=Math.min(Math.max(4,o.bottom+c),window.innerHeight-n-4),a=Math.min(Math.max(4,o.left+(o.width-l)/2),window.innerWidth-l-4)),e.style.top=`${i}px`,e.style.left=`${a}px`}reposition(){if(!this.active)return;const t=this.steps[this.index];!t||!t._el||(this.positionHighlight(t._el,t.padding??8),this.positionTooltip(t._el,this.overlayParts.tooltip),typeof window>"u")}onKey(t){if(this.active)switch(t.key){case"Escape":this.skip("esc");break;case"ArrowRight":case"Enter":this.next();break;case"ArrowLeft":this.prev();break}}cleanup(){this.active&&(this.active=!1,this.opts.allowBodyScroll||(document.body.style.overflow=""),R&&(window.removeEventListener("resize",this.resizeHandler),window.removeEventListener("scroll",this.scrollHandler,!0)),document.removeEventListener("keydown",this.keyHandler),this.teardownFocusTrap(),this.mutationObserver?.disconnect(),this.root?.parentNode&&this.root.parentNode.removeChild(this.root),k("walkthrough","cleanup",this.opts.tourId||"<anon>",{index:this.index}))}progressKey(){return this.opts.tourId?`__walkthrough:${this.opts.tourId}`:void 0}saveProgress(){if(!(!this.opts.persistProgress||!this.opts.tourId))try{const t=this.progressKey();t&&localStorage.setItem(t,JSON.stringify({index:this.index,completed:!1,ts:Date.now()}))}catch{}}loadProgress(){if(!this.opts.persistProgress||!this.opts.tourId)return null;try{const t=this.progressKey();if(!t)return null;const e=localStorage.getItem(t);if(!e)return null;const o=JSON.parse(e);if(o.completed)return null;if(typeof o.index=="number")return o.index}catch{}return null}markCompleted(){if(!(!this.opts.persistProgress||!this.opts.tourId))try{const t=this.progressKey();t&&localStorage.setItem(t,JSON.stringify({index:this.index,completed:!0,ts:Date.now()}))}catch{}}clearProgress(){if(this.opts.persistProgress&&this.opts.tourId)try{const t=this.progressKey();t&&localStorage.removeItem(t)}catch{}}}function A(s,t){const e=new I(s,t);return e.start(),e}class z{tours;currentIndex=-1;currentInstance=null;constructor(t){this.tours=t}start(){this.advanceToNext()}advanceToNext(){if(this.currentIndex++,this.currentInstance&&(this.currentInstance.destroy(),this.currentInstance=null),this.currentIndex>=this.tours.length)return;const t=this.tours[this.currentIndex];if(t.options?.persistProgress&&t.options.tourId)try{const o=localStorage.getItem(`__walkthrough:${t.options.tourId}`);if(o&&JSON.parse(o)?.completed){this.advanceToNext();return}}catch{}const e=new I(t.steps,{...t.options,onFinish:()=>{t.options?.onFinish?.(),this.advanceToNext()},onSkip:o=>{t.options?.onSkip?.(o)}});this.currentInstance=e,e.start()}stop(){this.currentInstance?.skip("chain-stop")}}const T=[];function nt(s){const t=T.findIndex(e=>e.id===s.id);t>=0?T.splice(t,1,s):T.push(s),k("orchestrator","register",s.id,{match:s.match})}function it(s){s.forEach(nt)}function at(){return[...T]}function St(){T.splice(0,T.length)}function B(s){const t=T.filter(e=>Ct(e.match,s));return k("orchestrator","match",s,{count:t.length}),t}function Ct(s,t){return typeof s=="string"?s.endsWith("*")?t.startsWith(s.slice(0,-1)):t===s:s instanceof RegExp?s.test(t):s(t)}function lt(s){return s?`__walkthrough:${s}`:void 0}function M(s){try{const t=lt(s);if(!t)return!1;const e=localStorage.getItem(t);return e?!!JSON.parse(e)?.completed:!1}catch{return!1}}function U(s){try{const t=lt(s);t&&localStorage.removeItem(t)}catch{}}async function Y({pathname:s,firstOnly:t}){const e=B(s).filter(c=>(c.trigger??"auto")==="auto"),o=[];for(const c of e){const{id:l,condition:n,oncePerSession:i,options:a,steps:u,skipIfCompleted:h=!0}=c;if(!(i&&sessionStorage.getItem(`__wt_session_started:${l}`))&&!(h&&a?.persistProgress&&(a.tourId||l)&&M(a.tourId||l))&&!(n&&!await n())&&(A(u,{tourId:a?.tourId||l,...a}),sessionStorage.setItem(`__wt_session_started:${l}`,"1"),o.push(l),t))break}return o}async function q(s){const t=B(s).filter(n=>(n.trigger??"auto")==="auto"),e=[];for(const n of t){const{id:i,condition:a,oncePerSession:u,options:h,skipIfCompleted:d=!0}=n;u&&sessionStorage.getItem(`__wt_session_started:${i}`)||d&&h?.persistProgress&&h.tourId&&M(h.tourId)||a&&!await a()||e.push(n)}if(!e.length)return{ids:[],chain:null};const o=[...e].sort((n,i)=>(n.order??0)-(i.order??0)),c=o.map(n=>n.id);o.forEach(n=>sessionStorage.setItem(`__wt_session_started:${n.id}`,"1"));const l=new z(o.map(n=>({id:n.id,steps:n.steps,options:{tourId:n.id,...n.options}})));return l.start(),{ids:c,chain:l}}function Rt(s){const t=T.find(e=>e.id===s);if(!t)throw new Error(`Tour '${s}' not registered`);return A(t.steps,{tourId:t.id,...t.options})}function ct(){T.forEach(s=>{(s.options?.tourId||s.id)&&U(s.options?.tourId||s.id)})}async function ut(s){const t=await import(s),e=t.tours??t.default??t.toursDefault;return Array.isArray(e)&&it(e),e}function It({pathname:s,className:t="",style:e,chainMatches:o}){const[c,l]=v.useState(0),[n,i]=v.useState(()=>{try{return localStorage.getItem("__wt_devpanel_collapsed")==="1"}catch{return!1}});v.useEffect(()=>{try{localStorage.setItem("__wt_devpanel_collapsed",n?"1":"0")}catch{}},[n]);const a=at(),u=()=>l(x=>x+1),h=s||(typeof window<"u"?window.location.pathname:"/"),d=async()=>{o?await q(h):await Y({pathname:h}),u()},p=x=>{const _=a.find(L=>L.id===x);_&&A(_.steps,{tourId:_.id,..._.options})},y=x=>{U(x),u()},N=()=>{ct(),u()};return n?g.jsxs("button",{type:"button",onClick:()=>i(!1),className:`walkthrough-dev-panel-collapsed ${t}`,style:{position:"fixed",bottom:16,right:16,zIndex:999999,background:"#111",color:"#fff",border:"1px solid #333",borderRadius:20,padding:"6px 12px",fontSize:12,fontFamily:"ui-sans-serif, system-ui, sans-serif",cursor:"pointer",boxShadow:"0 4px 12px rgba(0,0,0,0.5)",...e},title:"Expand walkthrough dev panel",children:["Tours (",a.length,") ▴"]}):g.jsxs("div",{className:"walkthrough-dev-panel "+t,style:{position:"fixed",bottom:16,right:16,width:320,maxHeight:"60vh",overflowY:"auto",background:"#111",color:"#fff",fontFamily:"ui-sans-serif, system-ui, sans-serif",fontSize:12,border:"1px solid #333",borderRadius:8,padding:12,boxShadow:"0 4px 12px rgba(0,0,0,0.5)",zIndex:999999,...e},"data-refresh":c,children:[g.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8},children:[g.jsx("strong",{style:{fontSize:13},children:"Walkthrough Dev Panel"}),g.jsxs("div",{style:{display:"flex",gap:6},children:[g.jsx("button",{type:"button",onClick:()=>i(!0),style:{background:"#222",color:"#fff",border:"1px solid #444",borderRadius:4,padding:"2px 6px",cursor:"pointer"},title:"Minimize",children:"_"}),g.jsx("button",{type:"button",onClick:N,style:{background:"#222",color:"#fff",border:"1px solid #444",borderRadius:4,padding:"2px 6px",cursor:"pointer"},children:"Reset"})]})]}),g.jsxs("div",{style:{display:"flex",gap:8,marginBottom:8},children:[g.jsx("button",{type:"button",onClick:d,style:{flex:1,background:"#2563eb",color:"#fff",border:"none",borderRadius:4,padding:"4px 6px",cursor:"pointer"},children:o?"Chain Matches":"Run Matches"}),g.jsx("button",{type:"button",onClick:u,style:{background:"#222",color:"#fff",border:"1px solid #444",borderRadius:4,padding:"4px 6px",cursor:"pointer"},children:"Refresh"})]}),a.length===0&&g.jsx("div",{style:{opacity:.7},children:"No tours registered."}),g.jsx("ul",{style:{listStyle:"none",margin:0,padding:0,display:"flex",flexDirection:"column",gap:8},children:a.map(x=>{const _=M(x.id);return g.jsxs("li",{style:{border:"1px solid #333",borderRadius:6,padding:8,background:"#1c1c1c"},children:[g.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4},children:[g.jsx("span",{style:{fontWeight:600},children:x.id}),g.jsx("span",{style:{fontSize:10,opacity:.7},children:_?"completed":"pending"})]}),g.jsxs("div",{style:{fontSize:10,opacity:.7,marginBottom:4},children:["match:"," ",typeof x.match=="string"?x.match:x.match instanceof RegExp?x.match.toString():"fn"]}),g.jsxs("div",{style:{display:"flex",gap:6},children:[g.jsx("button",{type:"button",onClick:()=>p(x.id),style:{flex:1,background:"#10b981",color:"#fff",border:"none",borderRadius:4,padding:"4px 6px",cursor:"pointer"},children:"Start"}),g.jsx("button",{type:"button",onClick:()=>y(x.id),style:{background:"#dc2626",color:"#fff",border:"none",borderRadius:4,padding:"4px 6px",cursor:"pointer"},children:"Reset"})]})]},x.id)})})]})}const dt=v.createContext(void 0);function Ot({children:s,autoStart:t}){const[e,o]=v.useState(null),[c,l]=v.useState(null),n=!!e,i=v.useRef(null),a=v.useCallback((h,d)=>{i.current?.destroy();const p=A(h,{...d||{},onStepChange:y=>{l(y),d?.onStepChange?.(y)},onFinish:()=>{d?.onFinish?.(),i.current=null,o(null),l(null)},onSkip:y=>{d?.onSkip?.(y),i.current=null,o(null),l(null)}});return i.current=p,o(p),p},[]),u=v.useCallback(h=>{const d=new z(h.map(p=>({...p,options:{...p.options||{},onStepChange:y=>{l(y),p.options?.onStepChange?.(y)},onFinish:()=>{p.options?.onFinish?.()},onSkip:y=>{p.options?.onSkip?.(y)}}})));return d.start(),d},[]);return v.useEffect(()=>{t&&a(t.steps,t.options)},[]),g.jsx(dt.Provider,{value:{start:a,chain:u,active:n,currentIndex:c,instance:i.current},children:s})}function Pt(){const s=v.useContext(dt);if(!s)throw new Error("useWalkthrough must be used within WalkthroughProvider");return s}function At({pathname:s,firstOnly:t,chain:e,dynamicModule:o,onStartIds:c}){return v.useEffect(()=>{let l=!1;return(async()=>{if(o)try{await ut(o)}catch(n){k("react","dyn-load-fail",o,{error:n.message})}if(e){const{ids:n}=await q(s);!l&&n.length&&c&&c(n)}else{const n=await Y({pathname:s,firstOnly:t});!l&&n.length&&c&&c(n)}})(),()=>{l=!0}},[s,t,e,o,c]),null}exports.RouteOrchestrator=At;exports.Walkthrough=I;exports.WalkthroughChain=z;exports.WalkthroughDevPanel=It;exports.WalkthroughProvider=Ot;exports.chainAutoMatches=q;exports.clearTourProgress=U;exports.clearTours=St;exports.findMatchingTours=B;exports.isTourCompleted=M;exports.listTours=at;exports.loadTours=ut;exports.registerTour=nt;exports.registerTours=it;exports.resetAllTourProgress=ct;exports.startAutoMatches=Y;exports.startTourById=Rt;exports.startWalkthrough=A;exports.useWalkthrough=Pt;
//# sourceMappingURL=react-walkthrough.cjs.js.map