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

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

@@ -0,0 +1,205 @@
+Renders an HTTP status code as a code `Badge` coloured by its class — green for success, blue for a redirect, amber for a client error, red for a server error, slate for informational. A mask counts as well as a number, so `2XX` or `40X` from a filter suggestion takes the colour of its leading digit, and anything outside 100–599 falls back to slate rather than guessing. Pairs with `HttpMethod`.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `code` | `string \| number` | yes | — | HTTP response status code. The category (1xx/2xx/3xx/4xx/5xx) is derived from the first digit and decides the Badge color via `RESPONSE_CODE_COLOR`. Values outside 100–599 render in slate as the "unknown" fallback. |
+| `size` | `"small" \| "medium" \| "large" \| null \| undefined` | no | `medium` | Badge size — defaults to `medium`. |
+| `title` | `string \| undefined` | no | — |  |
+| `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 | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+
+## Stories
+
+### Playground
+
+One badge on the controls, for checking which class a particular code lands in.
+
+Source: ResponseCode/ResponseCode.stories.tsx#Playground
+
+### AllCategories
+
+The five classes at their round numbers. This is the colour vocabulary, and like
+`HttpMethod` it is fixed rather than chosen per screen.
+
+Source: ResponseCode/ResponseCode.stories.tsx#AllCategories
+
+### RealWorldCodes
+
+The codes that actually turn up in logs, a row per class — every code in a row shares its
+colour, so the eye sorts by severity before it reads the number.
+
+Source: ResponseCode/ResponseCode.stories.tsx#RealWorldCodes
+
+### Sizes
+
+`medium` is the default; `large` adds vertical padding and leaves the code type where it
+is, exactly as on `HttpMethod`.
+
+Source: ResponseCode/ResponseCode.stories.tsx#Sizes
+
+### WildcardGroups
+
+The wildcard forms, which is what a filter chip shows when the query matches a whole
+class rather than one code.
+
+Source: ResponseCode/ResponseCode.stories.tsx#WildcardGroups
+
+### UnknownCodeFallsBackToSlate
+
+`0`, `42`, `999` and `???` all fall outside 100–599, so each is printed verbatim in slate
+— an unrecognised code is shown, never swallowed.
+
+Source: ResponseCode/ResponseCode.stories.tsx#UnknownCodeFallsBackToSlate
+
+## Story sources
+
+### ResponseCode/ResponseCode.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { ResponseCode } from './ResponseCode';
+
+const DESCRIPTION = [
+  'Renders an HTTP status code as a code `Badge` coloured by its class — green for success, blue for a redirect, amber for a client error, red for a server error, slate for informational.',
+  'A mask counts as well as a number, so `2XX` or `40X` from a filter suggestion takes the colour of its leading digit, and anything outside 100–599 falls back to slate rather than guessing. Pairs with `HttpMethod`.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/ResponseCode',
+  component: ResponseCode,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  args: {
+    code: 200,
+    size: 'medium',
+  },
+  argTypes: {
+    code: {
+      control: 'number',
+    },
+    size: {
+      control: 'select',
+      options: ['medium', 'large'],
+    },
+  },
+} satisfies Meta<typeof ResponseCode>;
+
+export default meta;
+
+/**
+ * One badge on the controls, for checking which class a particular code lands in.
+ */
+export const Playground: StoryFn<typeof ResponseCode> = args => <ResponseCode {...args} />;
+
+/**
+ * The five classes at their round numbers. This is the colour vocabulary, and like
+ * `HttpMethod` it is fixed rather than chosen per screen.
+ */
+export const AllCategories: StoryFn<typeof meta> = () => (
+  <VStack align='start' gap={8}>
+    <ResponseCode code={100} />
+    <ResponseCode code={200} />
+    <ResponseCode code={300} />
+    <ResponseCode code={400} />
+    <ResponseCode code={500} />
+  </VStack>
+);
+
+/**
+ * The codes that actually turn up in logs, a row per class — every code in a row shares its
+ * colour, so the eye sorts by severity before it reads the number.
+ */
+export const RealWorldCodes: StoryFn<typeof meta> = () => (
+  <VStack align='start' gap={8}>
+    <HStack gap={8}>
+      <ResponseCode code={100} />
+      <ResponseCode code={101} />
+    </HStack>
+    <HStack gap={8}>
+      <ResponseCode code={200} />
+      <ResponseCode code={201} />
+      <ResponseCode code={204} />
+    </HStack>
+    <HStack gap={8}>
+      <ResponseCode code={301} />
+      <ResponseCode code={302} />
+      <ResponseCode code={304} />
+    </HStack>
+    <HStack gap={8}>
+      <ResponseCode code={400} />
+      <ResponseCode code={401} />
+      <ResponseCode code={403} />
+      <ResponseCode code={404} />
+      <ResponseCode code={429} />
+    </HStack>
+    <HStack gap={8}>
+      <ResponseCode code={500} />
+      <ResponseCode code={502} />
+      <ResponseCode code={503} />
+      <ResponseCode code={504} />
+    </HStack>
+  </VStack>
+);
+
+/**
+ * `medium` is the default; `large` adds vertical padding and leaves the code type where it
+ * is, exactly as on `HttpMethod`.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <VStack gap={16}>
+    <HStack align='center' gap={8}>
+      <ResponseCode code={100} size='medium' />
+      <ResponseCode code={200} size='medium' />
+      <ResponseCode code={301} size='medium' />
+      <ResponseCode code={404} size='medium' />
+      <ResponseCode code={500} size='medium' />
+    </HStack>
+    <HStack align='center' gap={8}>
+      <ResponseCode code={100} size='large' />
+      <ResponseCode code={200} size='large' />
+      <ResponseCode code={301} size='large' />
+      <ResponseCode code={404} size='large' />
+      <ResponseCode code={500} size='large' />
+    </HStack>
+  </VStack>
+);
+
+/**
+ * The wildcard forms, which is what a filter chip shows when the query matches a whole
+ * class rather than one code.
+ */
+export const WildcardGroups: StoryFn<typeof meta> = () => (
+  <VStack align='start' gap={8}>
+    <ResponseCode code='1XX' />
+    <ResponseCode code='2XX' />
+    <ResponseCode code='3XX' />
+    <ResponseCode code='4XX' />
+    <ResponseCode code='5XX' />
+  </VStack>
+);
+
+/**
+ * `0`, `42`, `999` and `???` all fall outside 100–599, so each is printed verbatim in slate
+ * — an unrecognised code is shown, never swallowed.
+ */
+export const UnknownCodeFallsBackToSlate: StoryFn<typeof meta> = () => (
+  <HStack align='center' gap={8}>
+    <ResponseCode code={0} />
+    <ResponseCode code={42} />
+    <ResponseCode code={999} />
+    <ResponseCode code='???' />
+  </HStack>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" 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/ResponseCode/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,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))f.call(e,o)||o===r||i(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>x,c:()=>S,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>z,useRenderCounter:()=>T};for(var h in y)i(m,h,{get:y[h],enumerable:!0});e.exports=p(i({},"__esModule",{value:!0}),m);var g=(o=null!=(n=r("C"))?c(d(n)):{},p(n&&n.__esModule?o:i(o,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:b,isValidElement:R}=g,w=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,E=Symbol.for("react.memo_cache_sentinel"),S="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]=E;return t[E]=!0,t},[])},$={};["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]=()=>{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 v=null;function C(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=v)return v.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function k(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(v=t),t===$)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($)}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&&(v=null),C(e)}else if(2===e)N.push(t),C(v);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 M(e){for(let t=0;t<e.length;t++)e[t]=E}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var z=new Map;function D(){for(let e of z.values())e.forEach(e=>{e.count=0})}function T(e){let t=_(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=z.get(e))&&(r=new Set,z.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=z.get(e))&&n.delete(r))}})}var j=new Set;function x(e,t,r,n,o,a){function l(e,t,l,c){let i=`${n}:${a} [${o}] ${r}${l} changed from ${e} to ${t} at depth ${c}`;j.has(i)||(j.add(i),console.error(i))}!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),c=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,c]of t)r.has(a)?e(c,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||c)if(a!==c)l(`type ${a?"array":"object"}`,`type ${c?"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(R(t)||R(r))R(t)!==R(r)?l(`type ${R(t)?"React element":"object"}`,`type ${R(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,...c}=o.props;return e.createElement(o.type,void 0===n?c:{...c,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function c(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,c=a(e,o.type,{...o.props,ref:l});return c.type===o.type&&"string"!=typeof o.type?o:e.createElement(c.type,{...c.props,key:o.key})}}}r.d(t,{MA:()=>l,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:_,isValidElement:b,lazy:R,memo:w,startTransition:E,unstable_act:S,useCallback:$,useContext:v,useDebugValue:C,useDeferredValue:N,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:z,useLayoutEffect:D,useMemo:T,useReducer:j,useRef:x,useState:P,useSyncExternalStore:A,useTransition:I,version:X,use:W}=n;r.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:_,isValidElement:b,lazy:R,memo:w,startTransition:E,unstable_act:S,use:W,useCallback:$,useContext:v,useDebugValue:C,useDeferredValue:N,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:z,useLayoutEffect:D,useMemo:T,useReducer:j,useRef:x,useState:P,useSyncExternalStore:A,useTransition:I,version:X})}},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");let l=window.WallarmDS.HStack,c=window.WallarmDS.VStack,i=window.WallarmDS.ResponseCode,s={title:"Data Display/ResponseCode",component:i,parameters:{layout:"centered",docs:{description:{component:"Renders an HTTP status code as a code `Badge` coloured by its class — green for success, blue for a redirect, amber for a client error, red for a server error, slate for informational. A mask counts as well as a number, so `2XX` or `40X` from a filter suggestion takes the colour of its leading digit, and anything outside 100–599 falls back to slate rather than guessing. Pairs with `HttpMethod`."}}},args:{code:200,size:"medium"},argTypes:{code:{control:"number"},size:{control:"select",options:["medium","large"]}}};var u=r("C");let d=[{name:"Playground",story:t=>{let r,n=(0,a.c)(2);return n[0]!==t?(r=e(i,{...t}),n[0]=t,n[1]=r):r=n[1],r},meta:s},{name:"AllCategories",story:()=>{let r,n=(0,a.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{align:"start",gap:8,children:[e(i,{code:100}),e(i,{code:200}),e(i,{code:300}),e(i,{code:400}),e(i,{code:500})]}),n[0]=r):r=n[0],r},meta:s},{name:"RealWorldCodes",story:()=>{let r,n,o,s,u,d=(0,a.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{gap:8,children:[e(i,{code:100}),e(i,{code:101})]}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(l,{gap:8,children:[e(i,{code:200}),e(i,{code:201}),e(i,{code:204})]}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(l,{gap:8,children:[e(i,{code:301}),e(i,{code:302}),e(i,{code:304})]}),d[2]=o):o=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(s=t(l,{gap:8,children:[e(i,{code:400}),e(i,{code:401}),e(i,{code:403}),e(i,{code:404}),e(i,{code:429})]}),d[3]=s):s=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(u=t(c,{align:"start",gap:8,children:[r,n,o,s,t(l,{gap:8,children:[e(i,{code:500}),e(i,{code:502}),e(i,{code:503}),e(i,{code:504})]})]}),d[4]=u):u=d[4],u},meta:s},{name:"Sizes",story:()=>{let r,n,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{align:"center",gap:8,children:[e(i,{code:100,size:"medium"}),e(i,{code:200,size:"medium"}),e(i,{code:301,size:"medium"}),e(i,{code:404,size:"medium"}),e(i,{code:500,size:"medium"})]}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{gap:16,children:[r,t(l,{align:"center",gap:8,children:[e(i,{code:100,size:"large"}),e(i,{code:200,size:"large"}),e(i,{code:301,size:"large"}),e(i,{code:404,size:"large"}),e(i,{code:500,size:"large"})]})]}),o[1]=n):n=o[1],n},meta:s},{name:"WildcardGroups",story:()=>{let r,n=(0,a.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{align:"start",gap:8,children:[e(i,{code:"1XX"}),e(i,{code:"2XX"}),e(i,{code:"3XX"}),e(i,{code:"4XX"}),e(i,{code:"5XX"})]}),n[0]=r):r=n[0],r},meta:s},{name:"UnknownCodeFallsBackToSlate",story:()=>{let r,n=(0,a.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{align:"center",gap:8,children:[e(i,{code:0}),e(i,{code:42}),e(i,{code:999}),e(i,{code:"???"})]}),n[0]=r):r=n[0],r},meta:s}];function f({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=()=>u.default.createElement(o,n),l={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,l)}return u.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},u.default.createElement("h2",{className:"text-sm mb-12"},e.name),u.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(u.default.createElement(window.WallarmDS.Root,null,d.map((e,t)=>u.default.createElement(f,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,234 @@
+A scroll container with the house scrollbar instead of the browser’s: compose `ScrollAreaViewport` › `ScrollAreaContent`, then one `ScrollAreaScrollbar` per axis and a `ScrollAreaCorner` where two of them meet. It can only scroll inside a bounded parent, so give the wrapper a height or a width — with nothing to overflow, the content simply grows.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `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 | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `ids` | `ElementIds \| undefined` | no | — | The ids of the scroll area elements |
+| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ScrollAreaContent` — `ScrollAreaContentProps` in the declaration bundle.
+- `WallarmDS.ScrollAreaCorner` — `ScrollAreaCornerProps` in the declaration bundle.
+- `WallarmDS.ScrollAreaScrollbar` — `ScrollAreaScrollbarProps` in the declaration bundle.
+- `WallarmDS.ScrollAreaViewport` — `ScrollAreaViewportProps` in the declaration bundle.
+
+## Stories
+
+### Vertical
+
+The default vertical bar, inside a 320px box that gives the fifty rows something to overflow.
+
+Source: ScrollArea/ScrollArea.stories.tsx#Vertical
+
+### Horizontal
+
+`orientation='horizontal'` puts the bar along the bottom edge, for a row that runs past its container rather than a column that runs below it.
+
+Source: ScrollArea/ScrollArea.stories.tsx#Horizontal
+
+### Virtualized
+
+`ScrollAreaViewport` forwards its `ref` to the scrolling element itself, so a row
+virtualiser such as `@tanstack/react-virtual` can track scroll position inside the
+house scrollbar instead of falling back to a bare `overflow-y: auto` div. Ten thousand
+rows here, a few dozen in the DOM.
+
+Two things this story is deliberately showing:
+
+- `useVirtualizer` is called in the same component that declares the ref. Called from a
+  component rendered *inside* the viewport, `getScrollElement()` runs once — before React
+  has attached the host element's ref — returns `null`, and nothing ever re-runs it, so the
+  list stays permanently empty.
+- `ScrollAreaContent` gets `h-auto min-h-full` so it grows with the virtual sizer. The
+  scrollbar is only rendered while the viewport reports `data-overflow-y`, and that flag is
+  recomputed from a `ResizeObserver` watching the content box — which at its default `h-full`
+  stays the height of the viewport. A list that grows *after* mount therefore keeps its
+  scrollbar hidden until something else forces a remeasure.
+
+Source: ScrollArea/ScrollArea.stories.tsx#Virtualized
+
+## Story sources
+
+### ScrollArea/ScrollArea.stories.tsx
+
+```tsx
+import { type FC, type PropsWithChildren, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { cn } from '../../utils/cn';
+import { HStack, VStack } from '../Stack';
+import { ScrollArea } from './ScrollArea';
+import { ScrollAreaContent } from './ScrollAreaContent';
+import { ScrollAreaCorner } from './ScrollAreaCorner';
+import { ScrollAreaScrollbar } from './ScrollAreaScrollbar';
+import { ScrollAreaViewport } from './ScrollAreaViewport';
+
+const DESCRIPTION = [
+  'A scroll container with the house scrollbar instead of the browser’s: compose `ScrollAreaViewport` › `ScrollAreaContent`, then one `ScrollAreaScrollbar` per axis and a `ScrollAreaCorner` where two of them meet.',
+  'It can only scroll inside a bounded parent, so give the wrapper a height or a width — with nothing to overflow, the content simply grows.',
+].join(' ');
+
+const meta = {
+  title: 'Layout/ScrollArea',
+  component: ScrollArea,
+  subcomponents: {
+    ScrollAreaViewport,
+    ScrollAreaContent,
+    ScrollAreaScrollbar,
+    ScrollAreaCorner,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+
+const Box: FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => (
+  <div
+    className={cn(
+      'flex py-4 px-8 items-center justify-center rounded-6 border border-border-info bg-bg-light-info font-mono text-xs text-text-info',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+/** The default vertical bar, inside a 320px box that gives the fifty rows something to overflow. */
+export const Vertical: StoryFn<typeof meta> = () => (
+  <div className='w-320 h-320 overflow-hidden'>
+    <ScrollArea>
+      <ScrollAreaViewport>
+        <ScrollAreaContent>
+          <VStack>
+            {new Array(50).fill(null).map((_, index) => {
+              const value = `${index + 1}`;
+
+              return (
+                <Box key={value} className='h-40 w-full'>
+                  {value}
+                </Box>
+              );
+            })}
+          </VStack>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+
+      <ScrollAreaScrollbar />
+
+      <ScrollAreaCorner />
+    </ScrollArea>
+  </div>
+);
+
+/** `orientation='horizontal'` puts the bar along the bottom edge, for a row that runs past its container rather than a column that runs below it. */
+export const Horizontal: StoryFn<typeof meta> = () => (
+  <div className='w-320 h-320 overflow-hidden'>
+    <ScrollArea>
+      <ScrollAreaViewport>
+        <ScrollAreaContent>
+          <HStack>
+            {new Array(50).fill(null).map((_, index) => {
+              const value = `${index + 1}`;
+
+              return (
+                <Box key={value} className='h-320 w-40'>
+                  {value}
+                </Box>
+              );
+            })}
+          </HStack>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+
+      <ScrollAreaScrollbar orientation='horizontal' />
+
+      <ScrollAreaCorner />
+    </ScrollArea>
+  </div>
+);
+
+/**
+ * `ScrollAreaViewport` forwards its `ref` to the scrolling element itself, so a row
+ * virtualiser such as `@tanstack/react-virtual` can track scroll position inside the
+ * house scrollbar instead of falling back to a bare `overflow-y: auto` div. Ten thousand
+ * rows here, a few dozen in the DOM.
+ *
+ * Two things this story is deliberately showing:
+ *
+ * - `useVirtualizer` is called in the same component that declares the ref. Called from a
+ *   component rendered *inside* the viewport, `getScrollElement()` runs once — before React
+ *   has attached the host element's ref — returns `null`, and nothing ever re-runs it, so the
+ *   list stays permanently empty.
+ * - `ScrollAreaContent` gets `h-auto min-h-full` so it grows with the virtual sizer. The
+ *   scrollbar is only rendered while the viewport reports `data-overflow-y`, and that flag is
+ *   recomputed from a `ResizeObserver` watching the content box — which at its default `h-full`
+ *   stays the height of the viewport. A list that grows *after* mount therefore keeps its
+ *   scrollbar hidden until something else forces a remeasure.
+ */
+export const Virtualized: StoryFn<typeof meta> = () => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: 10_000,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 44,
+    overscan: 8,
+  });
+
+  return (
+    <div className='w-320 h-320 overflow-hidden'>
+      <ScrollArea>
+        <ScrollAreaViewport ref={scrollRef}>
+          <ScrollAreaContent className='h-auto min-h-full'>
+            <div className='relative w-full' style={{ height: virtualizer.getTotalSize() }}>
+              {virtualizer.getVirtualItems().map(item => (
+                <div
+                  key={item.key}
+                  className='absolute top-0 left-0 w-full pb-4'
+                  style={{ height: item.size, transform: `translateY(${item.start}px)` }}
+                >
+                  <Box className='h-full w-full'>{item.index + 1}</Box>
+                </div>
+              ))}
+            </div>
+          </ScrollAreaContent>
+        </ScrollAreaViewport>
+
+        <ScrollAreaScrollbar />
+
+        <ScrollAreaCorner />
+      </ScrollArea>
+    </div>
+  );
+};
+```
+
+### ../utils/cn.ts
+
+```tsx
+import { type ClassArray, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassArray): string => {
+  return twMerge(clsx(inputs));
+};
+```

package/dist/project/components/ScrollArea/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>