https://shizenlearn.com/assets/onboarding-tour-queue-C1gdrxkC.js

1import{r as m,j as n}from"./react-vendor-CR6PEHFZ.js";import{m as M,u as L,A as tt}from"./motion-CJOt5odT.js";import{cn as et,W as G,as as ot}from"./index-4BgFHtDy.js";import{u as rt}from"./useVisualViewportRect-D1a4QLn_.js";function nt({rect:t,padding:l=8,interactive:u,targetId:a}){m.useEffect(()=>{if(!u||!a)return;const e=document.querySelector(`[data-tour-id="${a}"]`);if(!e)return;const r={value:e.style.getPropertyValue("position"),priority:e.style.getPropertyPriority("position")},s={value:e.style.getPropertyValue("z-index"),priority:e.style.getPropertyPriority("z-index")},c=(g,h)=>{h.value?e.style.setProperty(g,h.value,h.priority):e.style.removeProperty(g)},f=getComputedStyle(e).position;return(!f||f==="static")&&e.style.setProperty("position","relative","important"),e.style.setProperty("z-index","var(--mobile-z-coaching)","important"),()=>{c("position",r),c("z-index",s)}},[u,a]);const o=t?{top:t.top-l,left:t.left-l,width:t.width+l*2,height:t.height+l*2}:null,p=u&&o?[{key:"top",style:{top:0,left:0,right:0,height:Math.max(0,o.top)}},{key:"bottom",style:{top:o.top+o.height,left:0,right:0,bottom:0}},{key:"left",style:{top:o.top,left:0,width:Math.max(0,o.left),height:o.height}},{key:"right",style:{top:o.top,left:o.left+o.width,right:0,height:o.height}}]:null;return n.jsxs(n.Fragment,{children:[o&&n.jsx(M.div,{className:"wc-tour-cutout",style:{top:o.top,left:o.left,width:o.width,height:o.height},initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.3}}),p?p.map(({key:e,style:r})=>n.jsx("div",{"data-tour-blocker-segment":e,className:"wc-tour-cutout-blocker",style:{inset:"auto",pointerEvents:"auto",...r},onClick:s=>s.stopPropagation()},e)):n.jsx("div",{className:"wc-tour-cutout-blocker",style:{pointerEvents:"auto"},onClick:e=>e.stopPropagation()})]})}const Y={rust:{name:"Kana",module:"kana"},maple:{name:"Vocabulary",module:"vocabulary"},sakura:{name:"Grammar",module:"grammar"},dusk:{name:"Immersion",module:"immersion"},lake:{name:"Conversation",module:"conversation"},leaf:{name:"Dictionary",module:"dictionary"},ink:{name:"Shizen",module:"immersion"},iris:{name:"Shizen",module:"immersion"}};function _(t="ink"){return Y[t].name+" guide"}function Q({accent:t="ink",onClose:l}){const u=Y[t];return n.jsxs("div",{className:"wc-tour-identity",children:[n.jsx("img",{src:"/watercolor/system-v2/modules/nav-"+u.module+".webp",alt:"",width:"28",height:"28"}),n.jsx("span",{children:_(t)}),n.jsx("button",{type:"button",className:"wc-tour-close",onClick:l,"aria-label":"Close tour",children:n.jsx("img",{src:et,alt:"",width:"18",height:"18"})})]})}function U({state:t,actions:l,finishLabel:u="Done",accent:a="ink"}){const o=t.currentStepIndex===t.totalSteps-1,p=t.currentStepIndex===0,e=(t.currentStepIndex+1)/t.totalSteps*100;return n.jsxs("div",{className:"wc-tour-footer","data-tour-accent":a,children:[n.jsxs("div",{className:"wc-tour-footer-progress",children:[n.jsxs("span",{className:"wc-tour-footer-counter",children:["Step ",t.currentStepIndex+1," of ",t.totalSteps]}),n.jsx("div",{className:"wc-tour-footer-bar","aria-hidden":"true",children:n.jsx("div",{className:"wc-tour-footer-bar-fill",style:{width:`${e}%`}})})]}),n.jsxs("div",{className:"wc-tour-footer-nav",children:[n.jsx("button",{type:"button",onClick:l.skip,className:"wc-tour-footer-skip",children:"Skip tour"}),!p&&n.jsx(G,{as:"button",variant:a,emphasis:"secondary",onClick:r=>{r.stopPropagation(),l.back()},className:"wc-tour-footer-cta wc-tour-footer-cta--back",children:"Back"}),n.jsx(G,{as:"button",variant:a==="ink"?"rust":a,onClick:r=>{r.stopPropagation(),l.next()},className:"wc-tour-footer-cta",children:o?u:"Next"})]})]})}const k=16,y=16;function st(t,l,u,a,o){const p=l.getBoundingClientRect(),e=p.width,r=p.height,s=o.left,c=o.top,f=o.right,g=Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--bottom-nav-occupied-h")),h=o.width<=640&&Number.isFinite(g)?g:0,d=o.bottom-h,x={top:t.top-a,left:t.left-a,width:t.width+a*2,height:t.height+a*2,bottom:t.bottom+a,right:t.right+a},v=x.left+x.width/2-e/2,b=x.top+x.height/2-r/2,E={bottom:{top:x.bottom+k,left:Math.max(s+y,Math.min(v,f-e-y))},top:{top:x.top-r-k,left:Math.max(s+y,Math.min(v,f-e-y))},right:{top:Math.max(c+y,Math.min(b,d-r-y)),left:x.right+k},left:{top:Math.max(c+y,Math.min(b,d-r-y)),left:x.left-e-k}},P={bottom:x.bottom+k+r<d-y,top:x.top-k-r>c+y,right:x.right+k+e<f-y,left:x.left-k-e>s+y},R=u==="auto"?["bottom","top","right","left"]:[u,"bottom","top","right","left"];for(const j of R)if(P[j])return{...E[j],actualPosition:j};return{top:Math.max(c+y,Math.min(E.bottom.top,d-r-y)),left:E.bottom.left,actualPosition:"bottom"}}function it({step:t,rect:l,state:u,actions:a,finishLabel:o,accent:p}){const e=m.useId(),r=L(),s=m.useRef(null),c=rt(),[f,g]=m.useState({top:0,left:0,actualPosition:"bottom"}),h=t.spotlightPadding??8;return m.useEffect(()=>{s.current?.focus({preventScroll:!0})},[t.id]),m.useEffect(()=>{s.current&&requestAnimationFrame(()=>{if(!s.current)return;const d=st(l,s.current,t.position||"auto",h,c);g(d)})},[l,t,h,c]),n.jsx(M.div,{ref:s,className:"wc-modal-root wc-tour-tooltip","data-tour-accent":p,role:"dialog",tabIndex:-1,"aria-labelledby":e,style:{top:f.top,left:f.left,maxWidth:Math.max(0,c.width-y*2),maxHeight:Math.max(180,c.height-y*2-72)},initial:{opacity:0,y:8},animate:{opacity:1,y:0},exit:{opacity:0,y:8},transition:{duration:r?0:.2,ease:[.22,1,.36,1]},children:n.jsxs("div",{className:"wc-tour-tooltip-frame wc-pencil-frame wc-pencil-frame--xs",children:[n.jsx(Q,{accent:p,onClose:a.skip}),n.jsx("h3",{id:e,className:"wc-tour-tooltip-title",children:t.title}),n.jsx("div",{className:"wc-tour-tooltip-body",children:t.content}),n.jsx(U,{state:u,actions:a,finishLabel:o,accent:p})]})})}function O({step:t,state:l,actions:u,finishLabel:a,accent:o}){const p=L(),e=m.useRef(null);return m.useEffect(()=>{const r=document.activeElement instanceof HTMLElement?document.activeElement:null;return e.current?.focus({preventScroll:!0}),()=>{r?.isConnected&&r.focus({preventScroll:!0})}},[]),n.jsxs(n.Fragment,{children:[n.jsx(M.div,{className:"wc-tour-card-scrim",initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:p?0:.2},onClick:r=>r.stopPropagation()}),n.jsx("div",{className:"wc-tour-card-stage",style:{pointerEvents:"none"},children:n.jsx(M.div,{ref:e,tabIndex:-1,role:"dialog","aria-modal":"true","aria-label":_(o),"data-tour-accent":o,onKeyDown:r=>{if(r.key!=="Tab")return;const s=Array.from(r.currentTarget.querySelectorAll('button:not(:disabled), a[href], input:not(:disabled), [tabindex="0"]')).filter(g=>g.getClientRects().length),c=s[0],f=s[s.length-1];if(!c){r.preventDefault();return}r.shiftKey&&(document.activeElement===c||document.activeElement===r.currentTarget)?(r.preventDefault(),f.focus()):!r.shiftKey&&(document.activeElement===f||document.activeElement===r.currentTarget)&&(r.preventDefault(),c.focus())},className:ot("wc-modal-root wc-tour-card",t.maxWidth||"wc-tour-card--default"),style:{pointerEvents:"auto"},initial:{opacity:0,scale:.96,y:10},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.96,y:10},transition:{duration:p?0:.2,ease:[.22,1,.36,1]},children:n.jsxs("div",{className:"wc-tour-card-frame wc-pencil-frame wc-pencil-frame--md",children:[n.jsx(Q,{accent:o,onClose:u.skip}),n.jsx("div",{className:"wc-tour-card-body",children:t.content}),n.jsx(U,{state:l,actions:u,finishLabel:a,accent:o})]})})})]})}function at(t){const[l,u]=m.useState(null),a=m.useRef("");return m.useEffect(()=>{if(!t){u(null);return}let o,p=!0;const e=()=>{if(!p)return;const r=document.querySelector(`[data-tour-id="${t}"]`),s=r?.getBoundingClientRect();if(!r||!s||s.width===0&&s.height===0)a.current!==""&&(a.current="",u(null));else{const c=`${s.top|0},${s.left|0},${s.width|0},${s.height|0}`;c!==a.current&&(a.current=c,u({top:s.top,left:s.left,width:s.width,height:s.height,bottom:s.bottom,right:s.right}))}o=requestAnimationFrame(e)};return o=requestAnimationFrame(e),()=>{p=!1,cancelAnimationFrame(o)}},[t]),l}const ct=m.createContext(null),F={},lt=4e3;function H(t,l="center"){return new Promise(u=>{const a=document.querySelector(`[data-tour-id="${t}"]`);if(!a){u();return}a.scrollIntoView({behavior:window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":"smooth",block:l});let o=0,p=a.getBoundingClientRect().top,e=!1;const r=()=>{e||(e=!0,u())},s=()=>

1{if(e)return;const c=a.getBoundingClientRect().top;if(Math.abs(c-p)<1){if(o++,o>=3){r();return}}else o=0;p=c,requestAnimationFrame(s)};requestAnimationFrame(s),setTimeout(r,800)})}function ft({config:t,autoStart:l=!0,finishLabel:u,accent:a="ink",onPersistCompletion:o,children:p}){const[e,r]=m.useState(()=>{if(!l)return-1;const i=F[t.id];return i&&i.step>0&&i.step<t.steps.length&&Date.now()-i.ts<lt?i.step:0}),[s,c]=m.useState(!1),f=m.useRef(t);f.current=t;const g=m.useRef(-1);m.useLayoutEffect(()=>{e>0?F[t.id]={step:e,ts:Date.now()}:delete F[t.id]},[e,t.id]);const h=e>=0&&e<t.steps.length,d=h?t.steps[e]:null,x=d?.type==="spotlight"||d?.type==="navigate"?d.targetId:null,v=at(x);m.useEffect(()=>{const i=f.current.steps[e];if(!i||e<0||g.current===e)return;g.current=e;let w=!1;if(i.type==="navigate"){c(!1),i.onEnter();let T=0;const V=i.scrollBlock??"center",B=i.watchScrollMs??0;let S=null;const $=setInterval(()=>{if(w){clearInterval($);return}T++;const W=document.querySelector(`[data-tour-id="${i.targetId}"]`);if(W||T>=30){if(clearInterval($),!W||w){w||c(!0);return}H(i.targetId,V).then(()=>{if(w||(c(!0),B<=0))return;const Z=Date.now()+B;S=setInterval(()=>{if(w){S&&clearInterval(S);return}const A=document.querySelector(`[data-tour-id="${i.targetId}"]`);if(A){const z=A.getBoundingClientRect(),K=window.innerHeight||document.documentElement.clientHeight;(z.top>K*.55||z.bottom<K*.15)&&A.scrollIntoView({behavior:window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":"smooth",block:V})}Date.now()>=Z&&S&&clearInterval(S)},250)})}},100);return()=>{w=!0,clearInterval($),S&&clearInterval(S)}}if(i.type==="spotlight")return c(!1),i.scrollIntoView!==!1?H(i.targetId).then(()=>{w||c(!0)}):c(!0),()=>{w=!0};i.type==="card"&&(i.onEnter&&i.onEnter(),c(!0))},[e]),m.useEffect(()=>{if(!h)return;const i=w=>{w.key==="Escape"&&j()};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[h]);const b=m.useCallback(i=>{const w=f.current.steps[i];w?.type==="navigate"&&w.onExit&&w.onExit()},[]),E=m.useCallback(()=>{g.current=-1,r(0)},[]),P=m.useCallback(()=>{r(i=>(g.current=-1,c(!1),i>=f.current.steps.length-1?(b(i),localStorage.setItem(f.current.storageKey,"true"),o?.(),f.current.onComplete?.(),-1):i+1))},[b,o]),R=m.useCallback(()=>{r(i=>(b(i),g.current=-1,c(!1),Math.max(0,i-1)))},[b]),j=m.useCallback(()=>{r(i=>(b(i),localStorage.setItem(f.current.storageKey,"true"),o?.(),f.current.onSkip?.(i),-1))},[b,o]),I={isActive:h,currentStepIndex:e,currentStep:d,totalSteps:t.steps.length},N={start:E,next:P,back:R,skip:j},q=d?.type==="spotlight"||d?.type==="navigate",D=h&&d&&s&&q&&v,J=h&&d&&s&&d.type==="card",X=h&&d&&s&&q&&!v;return n.jsxs(ct.Provider,{value:{state:I,actions:N},children:[p,n.jsxs(tt,{children:[J&&n.jsx(O,{step:d,state:I,actions:N,finishLabel:u,accent:a},`card-${e}`),X&&n.jsx(O,{step:{type:"card",id:d.id,content:n.jsxs("div",{children:[n.jsx("h3",{className:"wc-tour-tooltip-title serif",children:d.title}),n.jsx("div",{className:"wc-tour-tooltip-body",children:d.content})]})},state:I,actions:N,finishLabel:u,accent:a},`fallback-${e}`),D&&v&&n.jsx(nt,{rect:v,padding:d.spotlightPadding,interactive:d.interactive,targetId:x},`overlay-${e}`),D&&v&&n.jsx(it,{step:d,rect:v,state:I,actions:N,finishLabel:u,accent:a},`tooltip-${e}`)]})]})}const C="onboarding.tourQueue";function ht(){const t=localStorage.getItem(C);if(!t)return null;try{const l=JSON.parse(t);return l.shift(),l.length===0?(localStorage.removeItem(C),"/"):(localStorage.setItem(C,JSON.stringify(l)),l[0])}catch{return localStorage.removeItem(C),null}}export{ft as G,ht as a};