@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/Tooltip/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * 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.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))d.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>N,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>x,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>k,useRenderCounter:()=>W};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(l=null!=(n=r("C"))?i(f(n)):{},p(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:_,isValidElement:v}=g,b=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=S;return t[S]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function C(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function N(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");C(E)}else if(1===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===D.length&&($=null),C(e)}else if(2===e)D.push(t),C($);else if(3===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");C(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=S}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function T(){for(let e of k.values())e.forEach(e=>{e.count=0})}function W(e){let t=w(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let r,n={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=k.get(e))&&n.delete(r))}})}var j=new Set;function x(e,t,r,n,l,o){function a(e,t,a,i){let c=`${n}:${o} [${l}] ${r}${a} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,l);else if(null===r)a(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,l+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,n,l);else a("Map instance","other value",n,l);else if(r instanceof Map)a("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else a("Set instance","other value",n,l);else if(r instanceof Set)a("other value","Set instance",n,l);else if(o||i)if(o!==i)a(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,l+1);else if(v(t)||v(r))v(t)!==v(r)?a(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,n,l):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,n,l);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,l+1):a(`object with key ${o}`,`object without key ${o}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&a(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function o(e,t,r){let o=t,a=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=a.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),o=l}if("string"==typeof o&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof o&&null!=a.ref&&(o=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:a}}function a(e){let t=(t,r,n)=>{let l=o(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=o(e,t,r??{}),{children:a,...i}=l.props;return e.createElement(l.type,void 0===n?i:{...i,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let l=o(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),a=l.ref,i=o(e,l.type,{...l.props,ref:a});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:_,lazy:v,memo:b,startTransition:S,unstable_act:R,useCallback:E,useContext:$,useDebugValue:C,useDeferredValue:D,useEffect:N,useId:O,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:T,useMemo:W,useReducer:j,useRef:x,useState:I,useSyncExternalStore:A,useTransition:P,version:z,use:L}=n;r.d(t,{},{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:d,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:_,lazy:v,memo:b,startTransition:S,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:C,useDeferredValue:D,useEffect:N,useId:O,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:T,useMemo:W,useReducer:j,useRef:x,useState:I,useSyncExternalStore:A,useTransition:P,version:z})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:l}=(0,r("p").MA)(window.React);var o=r("vD");let a=window.WallarmDS.Icons.ChevronRight,i=window.WallarmDS.Button,c=window.WallarmDS.Dialog,s=window.WallarmDS.DialogBody,u=window.WallarmDS.DialogContent,f=window.WallarmDS.DialogHeader,d=window.WallarmDS.DialogTitle,p=window.WallarmDS.DialogTrigger,m=window.WallarmDS.Kbd,h=window.WallarmDS.Text,y=window.WallarmDS.Tooltip,g=window.WallarmDS.TooltipContent,w=window.WallarmDS.TooltipTrigger,_={title:"Overlay/Tooltip",component:y,subcomponents:{TooltipContent:g,TooltipTrigger:w},parameters:{layout:"centered",docs:{description:{component:"A short label on hover or focus, for naming something the interface cannot afford to spell out — an icon button, a truncated value. It holds no interactive content and cannot be reached by keyboard beyond its trigger, so anything the reader needs to click belongs in a `Popover`."}}}};var v=r("C");let b=[{name:"Basic",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(y,{"data-testid":"tooltip",children:[e(w,{asChild:!0,children:e(i,{variant:"outline",color:"neutral",children:e(a,{})})}),e(g,{children:"Right"})]}),n[0]=r):r=n[0],r},meta:_},{name:"WithDescription",story:()=>{let r,n,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(w,{asChild:!0,children:e(i,{variant:"outline",color:"neutral",children:e(a,{})})}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(y,{children:[r,t(g,{children:[e(h,{size:"xs",weight:"medium",children:"Title"}),e(h,{size:"xs",children:"Description"})]})]}),l[1]=n):n=l[1],n},meta:_},{name:"WithNestedDialog",story:()=>{let r,n,l,a,m,h=(0,o.c)(5);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{asChild:!0,children:e(i,{variant:"outline",color:"neutral",children:"Open dialog with nested tooltip"})}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{children:e(d,{children:"[Level 1] Main Dialog"})}),h[1]=n):n=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(p,{asChild:!0,children:e(i,{variant:"ghost",color:"neutral",size:"small",children:"Open nested dialog"})}),h[2]=l):l=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{children:e(d,{children:"[Level 2] With Tooltip"})}),h[3]=a):a=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(m=t(c,{children:[r,t(u,{children:[n,e(s,{children:t(c,{children:[l,t(u,{children:[a,e(s,{children:t(y,{"data-testid":"nested-tooltip",interactive:!0,children:[e(w,{asChild:!0,children:e(i,{variant:"outline",color:"neutral",children:"Hover me"})}),e(g,{children:"Tooltip above the dialog"})]})})]})]})})]})]}),h[4]=m):m=h[4],m},meta:_},{name:"WithKbd",story:()=>{let r,n,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(w,{asChild:!0,children:e(i,{variant:"outline",color:"neutral",children:e(a,{})})}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(y,{children:[r,t(g,{children:["Add instance ",e(m,{children:"⌘"})]})]}),l[1]=n):n=l[1],n},meta:_}];function S({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>v.default.createElement(l,n),a={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,a)}return v.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},v.default.createElement("h2",{className:"text-sm mb-12"},e.name),v.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(v.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>v.default.createElement(S,{key:t,entry:e})))),t}}})();

package/dist/project/components/TopHeader/README.md

@@ -0,0 +1,21 @@
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TopHeaderActions` — `TopHeaderActionsProps` in the declaration bundle.
+- `WallarmDS.TopHeaderLogo` — `TopHeaderLogoProps` in the declaration bundle.
+- `WallarmDS.TopHeaderSeparator` — `TopHeaderSeparatorProps` in the declaration bundle.

package/dist/project/components/Tour/README.md

@@ -0,0 +1,532 @@
+A guided walk through the interface, for a feature the reader would not find on their own — configured with `useTour({ steps })` and one rendered `Tour`. It owns how a step looks, not when the tour runs: deciding who sees it and how often is the application's job.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `present` | `boolean \| undefined` | no | — | Whether the node is present (controlled by the user) |
+| `on-exit-complete` | `VoidFunction \| undefined` | no | — | Function called when the animation ends in the closed state |
+| `on-enter-complete` | `VoidFunction \| undefined` | no | — | Function called when the animation ends in the open state |
+| `immediate` | `boolean \| undefined` | no | — | Whether to synchronize the present change immediately or defer it to the next frame |
+| `lazy-mount` | `boolean \| undefined` | no | `true` | Whether to enable lazy mounting |
+| `unmount-on-exit` | `boolean \| undefined` | no | `true` | Whether to unmount on exit. |
+| `skip-animation-on-mount` | `boolean \| undefined` | no | — | Whether to allow the initial presence animation. |
+| `hide-mode` | `"display-none" \| "activity"` | no | — | How to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+. |
+| `tour` | `complex` | yes | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TourClose` — `TourCloseProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+A full tour end to end. Keep it short — every step is one the reader did not choose to take.
+
+Source: Tour/Tour.stories.tsx#Basic
+
+### Placement
+
+Where a step sits relative to its target. Choose the side that leaves the target visible,
+since the target is the point.
+
+Source: Tour/Tour.stories.tsx#Placement
+
+### BeaconTriggered
+
+A beacon the reader opens themselves, which turns the tour from an interruption into an
+offer.
+
+Source: Tour/Tour.stories.tsx#BeaconTriggered
+
+### WaitForInteraction
+
+A step that waits for the reader to act before advancing, for teaching by doing rather than
+by reading.
+
+Source: Tour/Tour.stories.tsx#WaitForInteraction
+
+### WaitForInput
+
+The same, gated on input rather than a click — for a step where the reader has to type
+something real to continue.
+
+Source: Tour/Tour.stories.tsx#WaitForInput
+
+## Story sources
+
+### Tour/Tour.stories.tsx
+
+```tsx
+import { useRef } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Info } from '../../icons';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Checkbox, CheckboxIndicator, CheckboxLabel } from '../Checkbox';
+import { Field, FieldLabel, FieldSet } from '../Field';
+import { Input } from '../Input';
+import { Kbd, KbdGroup } from '../Kbd';
+import { HStack, VStack } from '../Stack';
+import { beaconStepEffect, waitForStepEvent } from './lib';
+import { Tour } from './Tour';
+import type { TourStepDetails } from './types';
+import { useTour } from './useTour';
+
+const DESCRIPTION = [
+  'A guided walk through the interface, for a feature the reader would not find on their own — configured with `useTour({ steps })` and one rendered `Tour`.',
+  "It owns how a step looks, not when the tour runs: deciding who sees it and how often is the application's job.",
+].join(' ');
+
+const meta = {
+  title: 'Overlay/Tour',
+  component: Tour,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Tour>;
+
+export default meta;
+
+/**
+ * A full tour end to end. Keep it short — every step is one the reader did not choose to take.
+ */
+export const Basic: StoryFn<typeof meta> = () => {
+  const firstRef = useRef<HTMLButtonElement>(null);
+  const secondRef = useRef<HTMLButtonElement>(null);
+  const thirdRef = useRef<HTMLButtonElement>(null);
+  const fourthRef = useRef<SVGSVGElement>(null);
+
+  const steps: TourStepDetails[] = [
+    {
+      id: 'intro',
+      type: 'dialog',
+      title: 'Welcome on a board!',
+      description: 'Here is the start dialog window',
+    },
+    {
+      id: 'firstStep',
+      type: 'tooltip',
+      target: () => firstRef.current,
+      title: 'Common use case',
+      description: 'Tour step with title, descriptions and progress info.',
+    },
+    {
+      id: 'secondStep',
+      type: 'tooltip',
+      target: () => secondRef.current,
+      title: 'Add an image, GIF, or video',
+      description:
+        'Tour step with an optional media slot displayed above the text content. Media is defined per step via the meta.mediaSrc field and automatically shows or hides based on the current step.',
+      placement: 'top',
+      meta: {
+        mediaSrc: './tour-cat.jpg',
+        mediaAlt: 'Image alt',
+      },
+    },
+    {
+      id: 'thirdStep',
+      type: 'tooltip',
+      target: () => thirdRef.current,
+      title: 'A variant where the target element is highlighted without overlay',
+      description:
+        "The rest of the interface remains fully visible and interactive. Best suited for subtle, non-blocking hints that guide without interrupting the user's workflow.",
+      backdrop: false,
+    },
+    {
+      id: 'fourthStep',
+      type: 'tooltip',
+      target: () => fourthRef.current as HTMLElement | null,
+      title: 'An alternative spotlight shape',
+      description:
+        'Ideal for highlighting compact or icon-sized elements where a rectangular highlight would feel oversized.',
+      backdrop: false,
+      meta: { shape: 'circle' },
+    },
+    {
+      id: 'finish',
+      type: 'dialog',
+      title: 'Done!',
+      description:
+        "You've completed the tour and can enjoy that doggo on the final dialog box of the tour!",
+      actions: [
+        { label: 'Back', action: 'prev' },
+        { label: 'Finish', action: 'dismiss' },
+      ],
+      meta: {
+        mediaSrc: './tour-dog.gif',
+        mediaAlt: 'Completion',
+      },
+    },
+  ];
+
+  const tour = useTour({ closeOnInteractOutside: false, steps });
+
+  return (
+    <div className='w-600 p-32'>
+      <VStack gap={24} align='stretch'>
+        <VStack gap={4} align='stretch'>
+          <span className='sb-annotation'>keyboard</span>
+          <HStack gap={8}>
+            <KbdGroup>
+              <Kbd>&larr;</Kbd>
+              <Kbd>&rarr;</Kbd>
+            </KbdGroup>
+            <span className='sb-annotation'>move</span>
+          </HStack>
+          <HStack gap={8}>
+            <Kbd>Esc</Kbd>
+            <span className='sb-annotation'>dismiss</span>
+          </HStack>
+          <HStack gap={8}>
+            <Kbd>Tab</Kbd>
+            <span className='sb-annotation'>focus</span>
+          </HStack>
+        </VStack>
+
+        <HStack gap={8}>
+          <Button ref={firstRef} variant='outline' color='neutral' size='large'>
+            First step
+          </Button>
+
+          <Button ref={secondRef} variant='outline' color='neutral' size='large'>
+            Second step
+          </Button>
+
+          <Button ref={thirdRef} variant='outline' color='neutral' size='large'>
+            Third step
+          </Button>
+
+          <Badge variant='dotted' color='green' size='medium'>
+            Last step
+          </Badge>
+
+          <Info ref={fourthRef} />
+        </HStack>
+
+        <Button
+          data-testid='tour-start'
+          variant='secondary'
+          color='neutral'
+          size='large'
+          onClick={() => tour.start()}
+        >
+          Start tour
+        </Button>
+      </VStack>
+
+      <Tour tour={tour} />
+    </div>
+  );
+};
+
+const PLACEMENTS = [
+  'top-start',
+  'top',
+  'top-end',
+  'left-start',
+  'left',
+  'left-end',
+  'right-start',
+  'right',
+  'right-end',
+  'bottom-start',
+  'bottom',
+  'bottom-end',
+] as const;
+
+/**
+ * Where a step sits relative to its target. Choose the side that leaves the target visible,
+ * since the target is the point.
+ */
+export const Placement: StoryFn<typeof meta> = () => {
+  const topStartRef = useRef<HTMLButtonElement>(null);
+  const topRef = useRef<HTMLButtonElement>(null);
+  const topEndRef = useRef<HTMLButtonElement>(null);
+  const leftStartRef = useRef<HTMLButtonElement>(null);
+  const leftRef = useRef<HTMLButtonElement>(null);
+  const leftEndRef = useRef<HTMLButtonElement>(null);
+  const rightStartRef = useRef<HTMLButtonElement>(null);
+  const rightRef = useRef<HTMLButtonElement>(null);
+  const rightEndRef = useRef<HTMLButtonElement>(null);
+  const bottomStartRef = useRef<HTMLButtonElement>(null);
+  const bottomRef = useRef<HTMLButtonElement>(null);
+  const bottomEndRef = useRef<HTMLButtonElement>(null);
+
+  const refs: Record<(typeof PLACEMENTS)[number], typeof topRef> = {
+    'top-start': topStartRef,
+    top: topRef,
+    'top-end': topEndRef,
+    'left-start': leftStartRef,
+    left: leftRef,
+    'left-end': leftEndRef,
+    'right-start': rightStartRef,
+    right: rightRef,
+    'right-end': rightEndRef,
+    'bottom-start': bottomStartRef,
+    bottom: bottomRef,
+    'bottom-end': bottomEndRef,
+  };
+
+  const steps: TourStepDetails[] = PLACEMENTS.map(p => ({
+    id: p,
+    type: 'tooltip' as const,
+    target: () => refs[p].current,
+    title: p,
+    description: `Tooltip placed at "${p}". Auto-flips when it would overflow the viewport.`,
+    placement: p,
+  }));
+
+  const tour = useTour({ closeOnInteractOutside: false, steps });
+
+  return (
+    <div className='w-600 p-32'>
+      <VStack gap={24} align='stretch'>
+        <div className='grid grid-cols-3 gap-8 max-w-[50vw] mx-auto'>
+          {PLACEMENTS.map(p => (
+            <Button key={p} ref={refs[p]} variant='outline' color='neutral' size='medium'>
+              {p}
+            </Button>
+          ))}
+        </div>
+
+        <Button
+          data-testid='tour-start'
+          variant='secondary'
+          color='neutral'
+          size='large'
+          onClick={() => tour.start()}
+        >
+          Explore placement options
+        </Button>
+      </VStack>
+
+      <Tour tour={tour} />
+    </div>
+  );
+};
+
+/**
+ * A beacon the reader opens themselves, which turns the tour from an interruption into an
+ * offer.
+ */
+export const BeaconTriggered: StoryFn<typeof meta> = () => {
+  const targetRef = useRef<HTMLButtonElement>(null);
+
+  const steps: TourStepDetails[] = [
+    {
+      id: 'beacon',
+      type: 'tooltip',
+      target: () => targetRef.current,
+      title: 'Quick tip',
+      description:
+        'When there is only one step, the footer shows a single "Got it" dismiss button instead of navigation controls. No progress indicator is displayed.',
+      backdrop: false,
+      effect: beaconStepEffect(),
+    },
+  ];
+
+  const tour = useTour({ closeOnInteractOutside: false, steps, autoStart: true });
+
+  return (
+    <div className='w-600 p-32'>
+      <VStack gap={24} align='stretch'>
+        <HStack gap={8}>
+          <Button ref={targetRef} variant='outline' color='neutral' size='large'>
+            Quick tip
+          </Button>
+        </HStack>
+      </VStack>
+
+      <Tour tour={tour} />
+    </div>
+  );
+};
+
+/**
+ * A step that waits for the reader to act before advancing, for teaching by doing rather than
+ * by reading.
+ */
+export const WaitForInteraction: StoryFn<typeof meta> = () => {
+  const firstRef = useRef<HTMLButtonElement>(null);
+  const secondRef = useRef<HTMLButtonElement>(null);
+
+  const steps: TourStepDetails[] = [
+    {
+      id: 'intro',
+      type: 'dialog',
+      title: 'New feature available!',
+      description:
+        'This tour will guide you through actions. You must complete each step to proceed.',
+      actions: [{ label: 'Start', action: 'next' }],
+    },
+    {
+      id: 'firstButton',
+      type: 'tooltip',
+      title: 'Click the Add button',
+      description: 'Click the "Add Item" button to continue.',
+      target: () => firstRef.current,
+      effect: args => waitForStepEvent('click', args),
+    },
+    {
+      id: 'secondButton',
+      type: 'tooltip',
+      title: 'Click the Change button',
+      description: 'Click the "Change Item" button to continue.',
+      target: () => secondRef.current,
+      effect: args => waitForStepEvent('click', args),
+    },
+    {
+      id: 'done',
+      type: 'dialog',
+      title: 'Great!',
+      description: 'Let`s move on',
+    },
+  ];
+
+  const tour = useTour({ closeOnInteractOutside: false, steps });
+
+  return (
+    <div className='w-600 p-32'>
+      <VStack gap={24} align='stretch'>
+        <HStack gap={8}>
+          <Button ref={firstRef} variant='outline' color='neutral' size='large'>
+            Add Item
+          </Button>
+          <Button ref={secondRef} variant='outline' color='neutral' size='large'>
+            Change Item
+          </Button>
+        </HStack>
+
+        <Button
+          data-testid='tour-start'
+          variant='secondary'
+          color='neutral'
+          size='large'
+          onClick={() => tour.start()}
+        >
+          Interactive tour with buttons
+        </Button>
+      </VStack>
+
+      <Tour tour={tour} />
+    </div>
+  );
+};
+
+/**
+ * The same, gated on input rather than a click — for a step where the reader has to type
+ * something real to continue.
+ */
+export const WaitForInput: StoryFn<typeof meta> = () => {
+  const nameRef = useRef<HTMLInputElement>(null);
+  const emailRef = useRef<HTMLInputElement>(null);
+  const termsRef = useRef<HTMLLabelElement>(null);
+
+  const steps: TourStepDetails[] = [
+    {
+      id: 'enter-name',
+      type: 'tooltip',
+      title: 'Enter Your Name',
+      description: 'Type your name in the input field to continue (at least 2 characters).',
+      target: () => nameRef.current,
+      placement: 'bottom-start',
+      effect: args =>
+        waitForStepEvent('input', args, {
+          predicate: el => (el as HTMLInputElement).value.trim().length >= 2,
+          delay: 1500,
+        }),
+    },
+    {
+      id: 'enter-email',
+      type: 'tooltip',
+      title: 'Enter Your Email',
+      description: 'Now enter a valid email address.',
+      target: () => emailRef.current,
+      placement: 'bottom-start',
+      effect: args =>
+        waitForStepEvent('input', args, {
+          predicate: el => {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test((el as HTMLInputElement).value);
+          },
+          delay: 1500,
+        }),
+    },
+    {
+      id: 'check-terms',
+      type: 'tooltip',
+      title: 'Accept Terms',
+      description: 'Check the checkbox to accept the terms.',
+      target: () => termsRef.current,
+      placement: 'bottom-start',
+      effect: args =>
+        waitForStepEvent(
+          'change',
+          {
+            ...args,
+            target: () => termsRef.current?.querySelector<HTMLInputElement>('input') ?? null,
+          },
+          {
+            predicate: el => el.checked,
+          },
+        ),
+    },
+    {
+      id: 'complete',
+      type: 'dialog',
+      title: 'Form Complete!',
+      description: 'You have successfully filled out the form',
+      meta: {
+        mediaSrc: './tour-cat.jpg',
+        mediaAlt: 'Completion',
+      },
+    },
+  ];
+
+  const tour = useTour({ closeOnInteractOutside: false, steps });
+
+  return (
+    <div className='w-600 p-32'>
+      <VStack gap={24} align='stretch'>
+        <FieldSet>
+          <Field>
+            <FieldLabel>Name</FieldLabel>
+            <Input ref={nameRef} placeholder='Enter your name' />
+          </Field>
+          <Field>
+            <FieldLabel>Email</FieldLabel>
+            <Input ref={emailRef} type='email' placeholder='Enter your email' />
+          </Field>
+
+          <Checkbox ref={termsRef}>
+            <CheckboxIndicator />
+            <CheckboxLabel>I accept the terms and conditions</CheckboxLabel>
+          </Checkbox>
+        </FieldSet>
+
+        <Button
+          data-testid='tour-start'
+          variant='secondary'
+          color='neutral'
+          size='large'
+          onClick={() => tour.start()}
+        >
+          Interactive tour with inputs
+        </Button>
+      </VStack>
+
+      <Tour tour={tour} />
+    </div>
+  );
+};
+```

package/dist/project/components/Tour/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Overlay" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Tour/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,o;/**
+ * 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.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))m.call(e,o)||o===r||c(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},f={},h={$dispatcherGuard:()=>$,$makeReadOnly:()=>I,$reset:()=>O,$structuralCheck:()=>W,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>M};for(var y in h)c(f,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),f);var g=(o=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?o:c(o,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:w,isValidElement:_}=g,S=null!=(a=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var k=null;function C(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=k)return k.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function $(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(k=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");C(E)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(k=null),C(e)}else if(2===e)N.push(t),C(k);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");C(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=v}function I(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function M(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var x=new Set;function W(e,t,r,n,o,a){function l(e,t,l,i){let c=`${n}:${a} [${o}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,o){if(!(o>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,o);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,o);else if(null===r)l(`type ${typeof t}`,"null",n,o);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,o);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,o+1):l(`Map instance with key ${a}`,`Map instance without key ${a}`,n,o);else l("Map instance","other value",n,o);else if(r instanceof Map)l("other value","Map instance",n,o);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,o);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,o);else l("Set instance","other value",n,o);else if(r instanceof Set)l("other value","Set instance",n,o);else if(a||i)if(a!==i)l(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,o);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,o);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,o+1);else if(_(t)||_(r))_(t)!==_(r)?l(`type ${_(t)?"React element":"object"}`,`type ${_(r)?"React element":"object"}`,n,o):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,o):e(t.props,r.props,`[props of ${n}]`,o+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,o);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,o+1):l(`object with key ${a}`,`object without key ${a}`,n,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,o):t!==r&&l(t,r,n,o)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,o=new WeakMap;function a(e,t,r){let a=t,l=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=l.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let o=r.get(t);o||((o=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,o)),a=o}if("string"==typeof a&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof a&&null!=l.ref&&(a=function(e,t){let r=o.get(e);r||(r=new Map,o.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let o=e.useRef(null);if(!o.current||o.current.original!==n){let e;o.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:o.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:l}}function l(e){let t=(t,r,n)=>{let o=a(e,t,r??{});return e.createElement(o.type,void 0===n?o.props:{...o.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let o=a(e,t,r??{}),{children:l,...i}=o.props;return e.createElement(o.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let o=a(e,t,r??{});return e.createElement(o.type,o.props,...n)},cloneElement:(t,r,...n)=>{let o=e.cloneElement(t,r??void 0,...n),l=o.ref,i=a(e,o.type,{...o.props,ref:l});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:p,createContext:f,createElement:h,createFactory:y,createRef:g,forwardRef:b,isValidElement:w,lazy:_,memo:S,startTransition:v,unstable_act:R,useCallback:E,useContext:k,useDebugValue:C,useDeferredValue:N,useEffect:$,useId:O,useImperativeHandle:I,useInsertionEffect:D,useLayoutEffect:T,useMemo:M,useReducer:x,useRef:W,useState:A,useSyncExternalStore:j,useTransition:z,version:P,use:F}=n;r.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:p,createContext:f,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:b,isValidElement:w,lazy:_,memo:S,startTransition:v,unstable_act:R,use:F,useCallback:E,useContext:k,useDebugValue:C,useDeferredValue:N,useEffect:$,useId:O,useImperativeHandle:I,useInsertionEffect:D,useLayoutEffect:T,useMemo:M,useReducer:x,useRef:W,useState:A,useSyncExternalStore:j,useTransition:z,version:P})}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var o=(t,n)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[n]:t[o]})};o(t,"get"),o(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:o}=(0,r("p").MA)(window.React);var a=r("vD"),l=r("C");let i=window.WallarmDS.Icons.Info,c=window.WallarmDS.Badge,s=window.WallarmDS.Button,u=window.WallarmDS.Checkbox,d=window.WallarmDS.CheckboxIndicator,m=window.WallarmDS.CheckboxLabel,p=window.WallarmDS.Field,f=window.WallarmDS.FieldLabel,h=window.WallarmDS.FieldSet,y=window.WallarmDS.Input,g=window.WallarmDS.Kbd,b=window.WallarmDS.KbdGroup,w=window.WallarmDS.HStack,_=window.WallarmDS.VStack,S=window.WallarmDS.beaconStepEffect,v=window.WallarmDS.waitForStepEvent,R=window.WallarmDS.Tour,E=window.WallarmDS.useTour,k={title:"Overlay/Tour",component:R,parameters:{layout:"centered",docs:{description:{component:"A guided walk through the interface, for a feature the reader would not find on their own — configured with `useTour({ steps })` and one rendered `Tour`. It owns how a step looks, not when the tour runs: deciding who sees it and how often is the application's job."}}}},C=["top-start","top","top-end","left-start","left","left-end","right-start","right","right-end","bottom-start","bottom","bottom-end"];function N(e){return v("click",e)}function $(e){return v("click",e)}function O(e){return e.value.trim().length>=2}function I(e){return v("input",e,{predicate:O,delay:1500})}function D(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.value)}function T(e){return v("input",e,{predicate:D,delay:1500})}function M(e){return e.checked}let x=[{name:"Basic",story:()=>{let r,n,o,u,d,m,p,f,h,y,S,v,k,C,N,$=(0,a.c)(16),O=(0,l.useRef)(null),I=(0,l.useRef)(null),D=(0,l.useRef)(null),T=(0,l.useRef)(null);$[0]===Symbol.for("react.memo_cache_sentinel")?(r={id:"intro",type:"dialog",title:"Welcome on a board!",description:"Here is the start dialog window"},$[0]=r):r=$[0],$[1]===Symbol.for("react.memo_cache_sentinel")?(n={id:"firstStep",type:"tooltip",target:()=>O.current,title:"Common use case",description:"Tour step with title, descriptions and progress info."},$[1]=n):n=$[1],$[2]===Symbol.for("react.memo_cache_sentinel")?(o=()=>I.current,$[2]=o):o=$[2],$[3]===Symbol.for("react.memo_cache_sentinel")?(u={id:"secondStep",type:"tooltip",target:o,title:"Add an image, GIF, or video",description:"Tour step with an optional media slot displayed above the text content. Media is defined per step via the meta.mediaSrc field and automatically shows or hides based on the current step.",placement:"top",meta:{mediaSrc:"./tour-cat.jpg",mediaAlt:"Image alt"}},$[3]=u):u=$[3],$[4]===Symbol.for("react.memo_cache_sentinel")?(d={id:"thirdStep",type:"tooltip",target:()=>D.current,title:"A variant where the target element is highlighted without overlay",description:"The rest of the interface remains fully visible and interactive. Best suited for subtle, non-blocking hints that guide without interrupting the user's workflow.",backdrop:!1},$[4]=d):d=$[4],$[5]===Symbol.for("react.memo_cache_sentinel")?(m=()=>T.current,$[5]=m):m=$[5],$[6]===Symbol.for("react.memo_cache_sentinel")?(p={id:"fourthStep",type:"tooltip",target:m,title:"An alternative spotlight shape",description:"Ideal for highlighting compact or icon-sized elements where a rectangular highlight would feel oversized.",backdrop:!1,meta:{shape:"circle"}},$[6]=p):p=$[6],$[7]===Symbol.for("react.memo_cache_sentinel")?(f=[r,n,u,d,p,{id:"finish",type:"dialog",title:"Done!",description:"You've completed the tour and can enjoy that doggo on the final dialog box of the tour!",actions:[{label:"Back",action:"prev"},{label:"Finish",action:"dismiss"}],meta:{mediaSrc:"./tour-dog.gif",mediaAlt:"Completion"}}],$[7]=f):f=$[7];let M=f;$[8]===Symbol.for("react.memo_cache_sentinel")?(h={closeOnInteractOutside:!1,steps:M},$[8]=h):h=$[8];let x=E(h);return $[9]===Symbol.for("react.memo_cache_sentinel")?(y=e("span",{className:"sb-annotation",children:"keyboard"}),$[9]=y):y=$[9],$[10]===Symbol.for("react.memo_cache_sentinel")?(S=t(w,{gap:8,children:[t(b,{children:[e(g,{children:"←"}),e(g,{children:"→"})]}),e("span",{className:"sb-annotation",children:"move"})]}),$[10]=S):S=$[10],$[11]===Symbol.for("react.memo_cache_sentinel")?(v=t(w,{gap:8,children:[e(g,{children:"Esc"}),e("span",{className:"sb-annotation",children:"dismiss"})]}),$[11]=v):v=$[11],$[12]===Symbol.for("react.memo_cache_sentinel")?(k=t(_,{gap:4,align:"stretch",children:[y,S,v,t(w,{gap:8,children:[e(g,{children:"Tab"}),e("span",{className:"sb-annotation",children:"focus"})]})]}),$[12]=k):k=$[12],$[13]===Symbol.for("react.memo_cache_sentinel")?(C=t(w,{gap:8,children:[e(s,{ref:O,variant:"outline",color:"neutral",size:"large",children:"First step"}),e(s,{ref:I,variant:"outline",color:"neutral",size:"large",children:"Second step"}),e(s,{ref:D,variant:"outline",color:"neutral",size:"large",children:"Third step"}),e(c,{variant:"dotted",color:"green",size:"medium",children:"Last step"}),e(i,{ref:T})]}),$[13]=C):C=$[13],$[14]!==x?(N=t("div",{className:"w-600 p-32",children:[t(_,{gap:24,align:"stretch",children:[k,C,e(s,{"data-testid":"tour-start",variant:"secondary",color:"neutral",size:"large",onClick:()=>x.start(),children:"Start tour"})]}),e(R,{tour:x})]}),$[14]=x,$[15]=N):N=$[15],N},meta:k},{name:"Placement",story:()=>{let r,n,o,i,c,u,d=(0,a.c)(14),m={"top-start":(0,l.useRef)(null),top:(0,l.useRef)(null),"top-end":(0,l.useRef)(null),"left-start":(0,l.useRef)(null),left:(0,l.useRef)(null),"left-end":(0,l.useRef)(null),"right-start":(0,l.useRef)(null),right:(0,l.useRef)(null),"right-end":(0,l.useRef)(null),"bottom-start":(0,l.useRef)(null),bottom:(0,l.useRef)(null),"bottom-end":(0,l.useRef)(null)},p=C.map(e=>({id:e,type:"tooltip",target:()=>m[e].current,title:e,description:`Tooltip placed at "${e}". Auto-flips when it would overflow the viewport.`,placement:e}));d[0]!==p?(r={closeOnInteractOutside:!1,steps:p},d[0]=p,d[1]=r):r=d[1];let f=E(r),h=C.map(t=>e(s,{ref:m[t],variant:"outline",color:"neutral",size:"medium",children:t},t));return d[2]!==h?(n=e("div",{className:"grid grid-cols-3 gap-8 max-w-[50vw] mx-auto",children:h}),d[2]=h,d[3]=n):n=d[3],d[4]!==f?(o=e(s,{"data-testid":"tour-start",variant:"secondary",color:"neutral",size:"large",onClick:()=>f.start(),children:"Explore placement options"}),d[4]=f,d[5]=o):o=d[5],d[6]!==n||d[7]!==o?(i=t(_,{gap:24,align:"stretch",children:[n,o]}),d[6]=n,d[7]=o,d[8]=i):i=d[8],d[9]!==f?(c=e(R,{tour:f}),d[9]=f,d[10]=c):c=d[10],d[11]!==i||d[12]!==c?(u=t("div",{className:"w-600 p-32",children:[i,c]}),d[11]=i,d[12]=c,d[13]=u):u=d[13],u},meta:k},{name:"BeaconTriggered",story:()=>{let r,n,o,i,c,u=(0,a.c)(6),d=(0,l.useRef)(null);u[0]===Symbol.for("react.memo_cache_sentinel")?(r=()=>d.current,u[0]=r):r=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(n=[{id:"beacon",type:"tooltip",target:r,title:"Quick tip",description:'When there is only one step, the footer shows a single "Got it" dismiss button instead of navigation controls. No progress indicator is displayed.',backdrop:!1,effect:S()}],u[1]=n):n=u[1];let m=n;u[2]===Symbol.for("react.memo_cache_sentinel")?(o={closeOnInteractOutside:!1,steps:m,autoStart:!0},u[2]=o):o=u[2];let p=E(o);return u[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{gap:24,align:"stretch",children:e(w,{gap:8,children:e(s,{ref:d,variant:"outline",color:"neutral",size:"large",children:"Quick tip"})})}),u[3]=i):i=u[3],u[4]!==p?(c=t("div",{className:"w-600 p-32",children:[i,e(R,{tour:p})]}),u[4]=p,u[5]=c):c=u[5],c},meta:k},{name:"WaitForInteraction",story:()=>{let r,n,o,i,c,u,d=(0,a.c)(7),m=(0,l.useRef)(null),p=(0,l.useRef)(null);d[0]===Symbol.for("react.memo_cache_sentinel")?(r={id:"intro",type:"dialog",title:"New feature available!",description:"This tour will guide you through actions. You must complete each step to proceed.",actions:[{label:"Start",action:"next"}]},d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n={id:"firstButton",type:"tooltip",title:"Click the Add button",description:'Click the "Add Item" button to continue.',target:()=>m.current,effect:N},d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(o=[r,n,{id:"secondButton",type:"tooltip",title:"Click the Change button",description:'Click the "Change Item" button to continue.',target:()=>p.current,effect:$},{id:"done",type:"dialog",title:"Great!",description:"Let`s move on"}],d[2]=o):o=d[2];let f=o;d[3]===Symbol.for("react.memo_cache_sentinel")?(i={closeOnInteractOutside:!1,steps:f},d[3]=i):i=d[3];let h=E(i);return d[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(w,{gap:8,children:[e(s,{ref:m,variant:"outline",color:"neutral",size:"large",children:"Add Item"}),e(s,{ref:p,variant:"outline",color:"neutral",size:"large",children:"Change Item"})]}),d[4]=c):c=d[4],d[5]!==h?(u=t("div",{className:"w-600 p-32",children:[t(_,{gap:24,align:"stretch",children:[c,e(s,{"data-testid":"tour-start",variant:"secondary",color:"neutral",size:"large",onClick:()=>h.start(),children:"Interactive tour with buttons"})]}),e(R,{tour:h})]}),d[5]=h,d[6]=u):u=d[6],u},meta:k},{name:"WaitForInput",story:()=>{let r,n,o,i,c,g,b,w,S,k,C=(0,a.c)(11),N=(0,l.useRef)(null),$=(0,l.useRef)(null),O=(0,l.useRef)(null);C[0]===Symbol.for("react.memo_cache_sentinel")?(r={id:"enter-name",type:"tooltip",title:"Enter Your Name",description:"Type your name in the input field to continue (at least 2 characters).",target:()=>N.current,placement:"bottom-start",effect:I},C[0]=r):r=C[0],C[1]===Symbol.for("react.memo_cache_sentinel")?(n={id:"enter-email",type:"tooltip",title:"Enter Your Email",description:"Now enter a valid email address.",target:()=>$.current,placement:"bottom-start",effect:T},C[1]=n):n=C[1],C[2]===Symbol.for("react.memo_cache_sentinel")?(o=()=>O.current,C[2]=o):o=C[2],C[3]===Symbol.for("react.memo_cache_sentinel")?(i={id:"check-terms",type:"tooltip",title:"Accept Terms",description:"Check the checkbox to accept the terms.",target:o,placement:"bottom-start",effect:e=>v("change",{...e,target:()=>O.current?.querySelector("input")??null},{predicate:M})},C[3]=i):i=C[3],C[4]===Symbol.for("react.memo_cache_sentinel")?(c=[r,n,i,{id:"complete",type:"dialog",title:"Form Complete!",description:"You have successfully filled out the form",meta:{mediaSrc:"./tour-cat.jpg",mediaAlt:"Completion"}}],C[4]=c):c=C[4];let D=c;C[5]===Symbol.for("react.memo_cache_sentinel")?(g={closeOnInteractOutside:!1,steps:D},C[5]=g):g=C[5];let x=E(g);return C[6]===Symbol.for("react.memo_cache_sentinel")?(b=t(p,{children:[e(f,{children:"Name"}),e(y,{ref:N,placeholder:"Enter your name"})]}),C[6]=b):b=C[6],C[7]===Symbol.for("react.memo_cache_sentinel")?(w=t(p,{children:[e(f,{children:"Email"}),e(y,{ref:$,type:"email",placeholder:"Enter your email"})]}),C[7]=w):w=C[7],C[8]===Symbol.for("react.memo_cache_sentinel")?(S=t(h,{children:[b,w,t(u,{ref:O,children:[e(d,{}),e(m,{children:"I accept the terms and conditions"})]})]}),C[8]=S):S=C[8],C[9]!==x?(k=t("div",{className:"w-600 p-32",children:[t(_,{gap:24,align:"stretch",children:[S,e(s,{"data-testid":"tour-start",variant:"secondary",color:"neutral",size:"large",onClick:()=>x.start(),children:"Interactive tour with inputs"})]}),e(R,{tour:x})]}),C[9]=x,C[10]=k):k=C[10],k},meta:k}];function W({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>l.default.createElement(o,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,i)}return l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,x.map((e,t)=>l.default.createElement(W,{key:t,entry:e})))),t}}})();