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

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

@@ -0,0 +1,124 @@
+The decorative backdrop behind the surfaces that have no chrome of their own — sign-in, the splash screen, the assistant. `pixel`, the default, sweeps a canvas dot grid; `blur` drifts a mesh gradient. Children sit centred above it. It is `aria-hidden` and lets the pointer through, with one exception: the pixel variant’s `game`, which takes pointer events for as long as it is running.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `variant` | `"pixel" \| undefined` | no | `pixel` |  |
+| `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 | — |  |
+
+## Sub-components
+
+- `WallarmDS.BlurBackground` — `BlurBackgroundProps` in the declaration bundle.
+- `WallarmDS.PixelBackground` — `PixelBackgroundProps` in the declaration bundle.
+
+## Stories
+
+### Pixel
+
+The default sweep across the dot grid, full-bleed with nothing on top of it.
+
+Source: AnimatedBackground/AnimatedBackground.stories.tsx#Pixel
+
+### PixelWithCard
+
+A card above the grid, with `excludeCardSize` keeping the dots clear behind it. This story also switches on `game` — the easter egg, and the one case where the backdrop accepts clicks.
+
+Source: AnimatedBackground/AnimatedBackground.stories.tsx#PixelWithCard
+
+### Blur
+
+`variant='blur'`: colour blobs drifting behind a frosted layer, which is the assistant’s backdrop rather than the console’s.
+
+Source: AnimatedBackground/AnimatedBackground.stories.tsx#Blur
+
+### BlurWithCard
+
+The same gradient with content over it. There is no exclusion to set here, since the blur has no grid for a card to interrupt.
+
+Source: AnimatedBackground/AnimatedBackground.stories.tsx#BlurWithCard
+
+## Story sources
+
+### AnimatedBackground/AnimatedBackground.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Card, CardContent, CardHeader, CardTitle } from '../Card';
+import { AnimatedBackground, type AnimatedBackgroundProps } from './AnimatedBackground';
+
+const DESCRIPTION = [
+  'The decorative backdrop behind the surfaces that have no chrome of their own — sign-in, the splash screen, the assistant. `pixel`, the default, sweeps a canvas dot grid; `blur` drifts a mesh gradient. Children sit centred above it.',
+  'It is `aria-hidden` and lets the pointer through, with one exception: the pixel variant’s `game`, which takes pointer events for as long as it is running.',
+].join(' ');
+
+const meta = {
+  title: 'Layout/AnimatedBackground',
+  component: AnimatedBackground,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof AnimatedBackground>;
+
+export default meta;
+
+/** The default sweep across the dot grid, full-bleed with nothing on top of it. */
+export const Pixel: StoryFn<AnimatedBackgroundProps> = () => (
+  <AnimatedBackground className='h-screen w-screen' />
+);
+
+/** A card above the grid, with `excludeCardSize` keeping the dots clear behind it. This story also switches on `game` — the easter egg, and the one case where the backdrop accepts clicks. */
+export const PixelWithCard: StoryFn<AnimatedBackgroundProps> = () => (
+  <AnimatedBackground
+    className='h-screen w-screen'
+    game
+    excludeCardSize={{ width: 300, height: 200 }}
+  >
+    <Card className='w-[300px] h-[200px]'>
+      <CardHeader>
+        <CardTitle>Sign In</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className='text-sm text-text-secondary'>
+          Decorative background renders behind interactive content.
+        </p>
+      </CardContent>
+    </Card>
+  </AnimatedBackground>
+);
+
+/** `variant='blur'`: colour blobs drifting behind a frosted layer, which is the assistant’s backdrop rather than the console’s. */
+export const Blur: StoryFn<AnimatedBackgroundProps> = () => (
+  <AnimatedBackground variant='blur' className='h-screen w-screen' />
+);
+
+/** The same gradient with content over it. There is no exclusion to set here, since the blur has no grid for a card to interrupt. */
+export const BlurWithCard: StoryFn<AnimatedBackgroundProps> = () => (
+  <AnimatedBackground variant='blur' className='h-screen w-screen'>
+    <Card className='w-[300px] h-[200px]'>
+      <CardHeader>
+        <CardTitle>Wally Chat</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className='text-sm text-text-secondary'>
+          Liquid gradient background renders behind chat content.
+        </p>
+      </CardContent>
+    </Card>
+  </AnimatedBackground>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Layout" 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/AnimatedBackground/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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 l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>x,$makeReadOnly:()=>O,$reset:()=>k,$structuralCheck:()=>I,c:()=>E,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>M,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var w=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:_,isValidElement:b}=w,v=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=R;return t[R]=!0,t},[])},S={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{S[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 N(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}S.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function x(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===S)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.");N(S)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function k(e){for(let t=0;t<e.length;t++)e[t]=R}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function D(){for(let e of M.values())e.forEach(e=>{e.count=0})}function j(e){let t=g(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var T=new Set;function I(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.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:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:w,forwardRef:g,isValidElement:_,lazy:b,memo:v,startTransition:R,unstable_act:E,useCallback:S,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:x,useId:k,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:D,useMemo:j,useReducer:T,useRef:I,useState:A,useSyncExternalStore:P,useTransition:W,version:z,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:h,createFactory:y,createRef:w,default:n,forwardRef:g,isValidElement:_,lazy:b,memo:v,startTransition:R,unstable_act:E,use:L,useCallback:S,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:x,useId:k,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:D,useMemo:j,useReducer:T,useRef:I,useState:A,useSyncExternalStore:P,useTransition:W,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(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:a}=(0,r("p").MA)(window.React);var l=r("vD");let o=window.WallarmDS.Card,i=window.WallarmDS.CardContent,c=window.WallarmDS.CardHeader,s=window.WallarmDS.CardTitle,u=window.WallarmDS.AnimatedBackground,f={title:"Layout/AnimatedBackground",component:u,parameters:{layout:"fullscreen",docs:{description:{component:"The decorative backdrop behind the surfaces that have no chrome of their own — sign-in, the splash screen, the assistant. `pixel`, the default, sweeps a canvas dot grid; `blur` drifts a mesh gradient. Children sit centred above it. It is `aria-hidden` and lets the pointer through, with one exception: the pixel variant’s `game`, which takes pointer events for as long as it is running."}}}};var p=r("C");let d=[{name:"Pixel",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(u,{className:"h-screen w-screen"}),r[0]=t):t=r[0],t},meta:f},{name:"PixelWithCard",story:()=>{let r,n,a,f=(0,l.c)(3);return f[0]===Symbol.for("react.memo_cache_sentinel")?(r={width:300,height:200},f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(s,{children:"Sign In"})}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(u,{className:"h-screen w-screen",game:!0,excludeCardSize:r,children:t(o,{className:"w-[300px] h-[200px]",children:[n,e(i,{children:e("p",{className:"text-sm text-text-secondary",children:"Decorative background renders behind interactive content."})})]})}),f[2]=a):a=f[2],a},meta:f},{name:"Blur",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(u,{variant:"blur",className:"h-screen w-screen"}),r[0]=t):t=r[0],t},meta:f},{name:"BlurWithCard",story:()=>{let r,n,a=(0,l.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{children:e(s,{children:"Wally Chat"})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(u,{variant:"blur",className:"h-screen w-screen",children:t(o,{className:"w-[300px] h-[200px]",children:[r,e(i,{children:e("p",{className:"text-sm text-text-secondary",children:"Liquid gradient background renders behind chat content."})})]})}),a[1]=n):n=a[1],n},meta:f}];function m({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>p.default.createElement(a,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return p.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},p.default.createElement("h2",{className:"text-sm mb-12"},e.name),p.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(p.default.createElement(window.WallarmDS.Root,null,d.map((e,t)=>p.default.createElement(m,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,75 @@
+The platform’s outermost frame — global top bar, product rail, and the content surface products mount into, with an optional `AppShellAside` panel docked to its right. There is exactly one, at the app root, and it persists while the content swaps. Do not wrap a page in it: a single product screen renders `RemoteShell` and its own content, blind to the shell. In-product navigation is `RemoteShell`, configured with a `NavConfig`, and laying out a page’s insides is `Stack` and `Flex`. The gray surround — header bar plus rail, everything that is not the canvas — is the **Frame**. It carries **Ambient**, a faint still layer of soft blooms, grain and a dot cluster pooled bottom-left, painted under everything. Ambient is on by default; `ambient={false}` leaves the flat Frame fill. The Frame comes in two styles, **Neutral** and **Branded**: a user preference next to light/dark, set with `useTheme().setFrameStyle` (from `ThemeProvider`) and written on `<html>` so every micro-frontend follows it. Branded warms the Frame and turns active navigation to the brand colour; try it from the account item → Appearance.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `reveal` | `boolean \| undefined` | no | — |  |
+| `expand-from` | `complex` | no | — |  |
+| `on-revealed` | `(() => void) \| undefined` | no | — |  |
+| `appeared` | `boolean \| undefined` | no | — |  |
+| `ambient` | `boolean \| undefined` | no | `true` | The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and rail. On by default; `false` leaves the flat Frame token fill. |
+| `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.AppShellAside` — `AppShellAsideProps` in the declaration bundle.
+- `WallarmDS.AppShellHeader` — `AppShellHeaderProps` in the declaration bundle.
+- `WallarmDS.AppShellRail` — `AppShellRailProps` in the declaration bundle.
+- `WallarmDS.AppShellRemote` — `AppShellRemoteProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls. Pick a product in the rail to drill into it, and the account item at the bottom for appearance and sidebar mode.
+
+Source: AppShell/AppShell.stories.tsx#Basic
+
+### Loading
+
+How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading.
+
+Source: AppShell/AppShell.stories.tsx#Loading
+
+### WithAside
+
+`AppShellAside` docks a panel right of the content surface — the real `WallyAssistant` here, driven by the `useMockWally` streaming mock and toggled from the header's `ChatTrigger` — that slides in as the canvas narrows, while closing widens the canvas back and hides the region without unmounting what is inside, so the conversation and text typed into the panel survive a close and reopen.
+
+Source: AppShell/AppShell.stories.tsx#WithAside
+
+### RevealFlow
+
+`reveal` animates the chrome in on the first application load only. Leave it unset for an ordinary screen; this exists for prototyping the boot moment itself.
+
+Source: AppShell/AppShell.stories.tsx#RevealFlow
+
+### LoginFlow
+
+The whole entrance: the splash hands off, the content surface expands from the sign-in card into the full shell. `onRevealed` fires when it has settled.
+
+Source: AppShell/AppShell.stories.tsx#LoginFlow
+
+### WithTanStackRouter
+
+`AppShell` and a `RemoteShell` per product on one TanStack Router: the root route is
+the shell (rail → `navigate`, `AppShellRemote` → `<Outlet />`), `/$product` is the
+remote (`RemoteShell` with `pathname` + `onNavigate`, content → `<Outlet />`), and
+`/$product/$` is the page. Every way of moving — the rail, the nav panel, the
+breadcrumbs, links in the page — goes through the router, and the active items follow.
+
+Source: AppShell/AppShell.stories.tsx#WithTanStackRouter
+
+## Story sources
+
+The story files and their local imports are in [stories.md](./stories.md), verbatim.

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Navigation" 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>