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

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

@@ -0,0 +1,166 @@
+A message the user sent to Wally: an `<article>` named "You" that right-aligns a light-brand bubble. The bubble keeps the text’s whitespace and clamps it to 11 lines; when it overflows, a fade appears with a Show more / Show less toggle that reports `aria-expanded` and points `aria-controls` at the text. The toggle is `UserMessageShowMore`, rendered by default — pass your own instance through `showMore` for custom labels or `data-*` attributes, or `null` for none. Put a `MessageActions` row (timestamp, then Copy) after the bubble; it is revealed when the message is hovered or focused.
+
+## 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.UserMessageBubble` — `UserMessageBubbleProps` in the declaration bundle.
+- `WallarmDS.UserMessageShowMore` — `UserMessageShowMoreProps` in the declaration bundle.
+
+## Stories
+
+### Short
+
+A one-line question: the bubble hugs its text and is 44px tall.
+
+Source: UserMessage/UserMessage.stories.tsx#Short
+
+### Multiline
+
+Line breaks and indentation in the text are kept as typed.
+
+Source: UserMessage/UserMessage.stories.tsx#Multiline
+
+### LongCollapsed
+
+Text longer than 11 lines is clamped under a fade with Show more. Click it to expand;
+the same button then reads Show less and collapses the text again.
+
+Source: UserMessage/UserMessage.stories.tsx#LongCollapsed
+
+### WithActions
+
+With the user actions row — timestamp, then Copy — revealed on hover or focus.
+
+Source: UserMessage/UserMessage.stories.tsx#WithActions
+
+### CustomShowMore
+
+Pass your own `UserMessageShowMore` to `showMore` for custom labels or analytics:
+`data-analytics-id` lands on the real `<button>`.
+
+Source: UserMessage/UserMessage.stories.tsx#CustomShowMore
+
+## Story sources
+
+### UserMessage/UserMessage.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Copyable, CopyableIcon } from '../Copyable';
+import { MessageAction, MessageActions, MessageTimestamp } from '../MessageActions';
+import { UserMessage, UserMessageBubble, UserMessageShowMore } from '.';
+
+const DESCRIPTION = [
+  'A message the user sent to Wally: an `<article>` named "You" that right-aligns a light-brand bubble.',
+  'The bubble keeps the text’s whitespace and clamps it to 11 lines; when it overflows, a fade appears with a Show more / Show less toggle that reports `aria-expanded` and points `aria-controls` at the text.',
+  'The toggle is `UserMessageShowMore`, rendered by default — pass your own instance through `showMore` for custom labels or `data-*` attributes, or `null` for none.',
+  'Put a `MessageActions` row (timestamp, then Copy) after the bubble; it is revealed when the message is hovered or focused.',
+].join(' ');
+
+const meta = {
+  title: 'AI/UserMessage',
+  component: UserMessage,
+  subcomponents: { UserMessageBubble, UserMessageShowMore },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  decorators: [
+    Story => (
+      <div className='w-420'>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof UserMessage>;
+
+export default meta;
+
+const LONG = Array.from(
+  { length: 16 },
+  (_, i) =>
+    `Line ${i + 1}: check the blocked requests from 203.0.113.${i + 1} against the API inventory.`,
+).join('\n');
+
+/** A one-line question: the bubble hugs its text and is 44px tall. */
+export const Short: StoryFn<typeof meta> = () => (
+  <UserMessage data-testid='short'>
+    <UserMessageBubble>Show me blocked attacks for the last 24 hours</UserMessageBubble>
+  </UserMessage>
+);
+
+/** Line breaks and indentation in the text are kept as typed. */
+export const Multiline: StoryFn<typeof meta> = () => (
+  <UserMessage data-testid='multiline'>
+    <UserMessageBubble>
+      {
+        'Compare these two endpoints:\n  - POST /api/v1/login\n  - POST /api/v2/login\n\nWhich one gets more attacks?'
+      }
+    </UserMessageBubble>
+  </UserMessage>
+);
+
+/**
+ * Text longer than 11 lines is clamped under a fade with Show more. Click it to expand;
+ * the same button then reads Show less and collapses the text again.
+ */
+export const LongCollapsed: StoryFn<typeof meta> = () => (
+  <UserMessage data-testid='long'>
+    <UserMessageBubble>{LONG}</UserMessageBubble>
+  </UserMessage>
+);
+
+/** With the user actions row — timestamp, then Copy — revealed on hover or focus. */
+export const WithActions: StoryFn<typeof meta> = () => {
+  const text = 'Show me blocked attacks for the last 24 hours';
+
+  return (
+    <UserMessage data-testid='with-actions'>
+      <UserMessageBubble>{text}</UserMessageBubble>
+      <MessageActions>
+        <MessageTimestamp dateTime='2026-10-21T09:41:00Z'>2m ago</MessageTimestamp>
+        <Copyable text={text}>
+          <MessageAction aria-label='Copy'>
+            <CopyableIcon />
+          </MessageAction>
+        </Copyable>
+      </MessageActions>
+    </UserMessage>
+  );
+};
+
+/**
+ * Pass your own `UserMessageShowMore` to `showMore` for custom labels or analytics:
+ * `data-analytics-id` lands on the real `<button>`.
+ */
+export const CustomShowMore: StoryFn<typeof meta> = () => (
+  <UserMessage data-testid='custom'>
+    <UserMessageBubble
+      showMore={
+        <UserMessageShowMore
+          showMoreLabel='Expand'
+          showLessLabel='Collapse'
+          data-analytics-id='WALLY_USER_MESSAGE_TOGGLE'
+        />
+      }
+    >
+      {LONG}
+    </UserMessageBubble>
+  </UserMessage>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="AI" 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/UserMessage/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 o,l,i=Object.create,s=Object.defineProperty,c=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||s(e,a,{get:()=>t[a],enumerable:!(n=c(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>N,$makeReadOnly:()=>O,$reset:()=>k,$structuralCheck:()=>j,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>A};for(var y in h)s(m,y,{get:h[y],enumerable:!0});e.exports=d(s({},"__esModule",{value:!0}),m);var w=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:s(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:b,isValidElement:S}=w,_=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,E=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=w.__COMPILER_RUNTIME)?void 0:l.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=E;return t[E]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 M(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function N(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===v)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.");M(v)}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),M(e)}else if(2===e)C.push(t),M($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");M(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function k(e){for(let t=0;t<e.length;t++)e[t]=E}function O(){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 A(e){let t=g(null);null!=t.current&&(t.current.count+=1),b(()=>{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 j(e,t,r,n,a,o){function l(e,t,l,i){let s=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;x.has(s)||(x.add(s),console.error(s))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);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,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);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,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(S(t)||S(r))S(t)!==S(r)?l(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`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||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}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,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=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!=l.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)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 o&&null!=l.ref&&(o=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 o=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 o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(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=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.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 a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,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:b,lazy:S,memo:_,startTransition:E,unstable_act:R,useCallback:v,useContext:$,useDebugValue:M,useDeferredValue:C,useEffect:N,useId:k,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:A,useReducer:x,useRef:j,useState:I,useSyncExternalStore:P,useTransition:L,version:W,use:U}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,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:b,lazy:S,memo:_,startTransition:E,unstable_act:R,use:U,useCallback:v,useContext:$,useDebugValue:M,useDeferredValue:C,useEffect:N,useId:k,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:A,useReducer:x,useRef:j,useState:I,useSyncExternalStore:P,useTransition:L,version:W})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.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 o=r("vD");let l=window.WallarmDS.Copyable,i=window.WallarmDS.CopyableIcon,s=window.WallarmDS.MessageAction,c=window.WallarmDS.MessageActions,u=window.WallarmDS.MessageTimestamp,f=window.WallarmDS.UserMessage,p=window.WallarmDS.UserMessageBubble,d=window.WallarmDS.UserMessageShowMore,m={title:"AI/UserMessage",component:f,subcomponents:{UserMessageBubble:p,UserMessageShowMore:d},parameters:{layout:"centered",docs:{description:{component:'A message the user sent to Wally: an `<article>` named "You" that right-aligns a light-brand bubble. The bubble keeps the text’s whitespace and clamps it to 11 lines; when it overflows, a fade appears with a Show more / Show less toggle that reports `aria-expanded` and points `aria-controls` at the text. The toggle is `UserMessageShowMore`, rendered by default — pass your own instance through `showMore` for custom labels or `data-*` attributes, or `null` for none. Put a `MessageActions` row (timestamp, then Copy) after the bubble; it is revealed when the message is hovered or focused.'}}},decorators:[t=>e("div",{className:"w-420",children:e(t,{})})]},h=Array.from({length:16},(e,t)=>`Line ${t+1}: check the blocked requests from 203.0.113.${t+1} against the API inventory.`).join("\n");var y=r("C");let w=[{name:"Short",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(f,{"data-testid":"short",children:e(p,{children:"Show me blocked attacks for the last 24 hours"})}),r[0]=t):t=r[0],t},meta:m},{name:"Multiline",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(f,{"data-testid":"multiline",children:e(p,{children:"Compare these two endpoints:\n  - POST /api/v1/login\n  - POST /api/v2/login\n\nWhich one gets more attacks?"})}),r[0]=t):t=r[0],t},meta:m},{name:"LongCollapsed",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(f,{"data-testid":"long",children:e(p,{children:h})}),r[0]=t):t=r[0],t},meta:m},{name:"WithActions",story:()=>{let r,n,a,d=(0,o.c)(3);return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{children:"Show me blocked attacks for the last 24 hours"}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(u,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(f,{"data-testid":"with-actions",children:[r,t(c,{children:[n,e(l,{text:"Show me blocked attacks for the last 24 hours",children:e(s,{"aria-label":"Copy",children:e(i,{})})})]})]}),d[2]=a):a=d[2],a},meta:m},{name:"CustomShowMore",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(f,{"data-testid":"custom",children:e(p,{showMore:e(d,{showMoreLabel:"Expand",showLessLabel:"Collapse","data-analytics-id":"WALLY_USER_MESSAGE_TOGGLE"}),children:h})}),r[0]=t):t=r[0],t},meta:m}];function g({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,o=()=>y.default.createElement(a,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=o;o=()=>e(t,l)}return y.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},y.default.createElement("h2",{className:"text-sm mb-12"},e.name),y.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(y.default.createElement(window.WallarmDS.Root,null,w.map((e,t)=>y.default.createElement(g,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,147 @@
+The whole-screen state template — 404, 403, 500, offline — for when the app itself cannot render; reach for `EmptyState` when only a region came back empty, and `Banner` or `Alert` when the app still works and this is only a message. It replaces the view and brings its own background and `Logo`, so what you supply is copy and one primary way out, not a layout.
+
+## 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` | yes | — |  |
+| `subtitle` | `string` | yes | — |  |
+| `description` | `string` | yes | — |  |
+| `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 | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Error404
+
+The lightest case — the address is wrong, not the product — so the description points at the link and the single button is the way back.
+
+Source: UtilityPage/UtilityPage.stories.tsx#Error404
+
+### Error403
+
+A permission wall rather than a failure: the copy names whose role is short and who can change it, so the reader knows the next move is a person and not a retry.
+
+Source: UtilityPage/UtilityPage.stories.tsx#Error403
+
+### Error500
+
+Ours to fix, said plainly, with the house reassurance that protection keeps running while the console does not. It is also the only story with a second button — one primary way out, at most one secondary.
+
+Source: UtilityPage/UtilityPage.stories.tsx#Error500
+
+### Offline
+
+The connection dropped, not the service: 'Try again' is the way out, and the copy promises automatic reconnection so nobody sits watching the button.
+
+Source: UtilityPage/UtilityPage.stories.tsx#Offline
+
+## Story sources
+
+### UtilityPage/UtilityPage.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ArrowRight } from '../../icons';
+import { Button } from '../Button';
+import { UtilityPage, type UtilityPageProps } from './UtilityPage';
+
+const DESCRIPTION = [
+  'The whole-screen state template — 404, 403, 500, offline — for when the app itself cannot render; reach for `EmptyState` when only a region came back empty, and `Banner` or `Alert` when the app still works and this is only a message.',
+  'It replaces the view and brings its own background and `Logo`, so what you supply is copy and one primary way out, not a layout.',
+].join(' ');
+
+const meta = {
+  title: 'Pages/UtilityPage',
+  component: UtilityPage,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    description: { control: 'text' },
+  },
+} satisfies Meta<typeof UtilityPage>;
+
+export default meta;
+
+/** The lightest case — the address is wrong, not the product — so the description points at the link and the single button is the way back. */
+export const Error404: StoryFn<UtilityPageProps> = args => (
+  <UtilityPage {...args}>
+    <Button variant='primary' color='brand' size='large'>
+      Take me home
+    </Button>
+  </UtilityPage>
+);
+
+Error404.args = {
+  title: '404',
+  subtitle: 'Page not found.',
+  description: 'Check the link or head back home.',
+};
+
+/** A permission wall rather than a failure: the copy names whose role is short and who can change it, so the reader knows the next move is a person and not a retry. */
+export const Error403: StoryFn<UtilityPageProps> = args => (
+  <UtilityPage {...args}>
+    <Button variant='primary' color='brand' size='large'>
+      Take me home
+    </Button>
+  </UtilityPage>
+);
+
+Error403.args = {
+  title: '403',
+  subtitle: 'No access.',
+  description:
+    "Your role doesn't include this page. If you think it should, your admin can fix that.",
+};
+
+/** Ours to fix, said plainly, with the house reassurance that protection keeps running while the console does not. It is also the only story with a second button — one primary way out, at most one secondary. */
+export const Error500: StoryFn<UtilityPageProps> = args => (
+  <UtilityPage {...args}>
+    <Button variant='primary' color='brand' size='large'>
+      Take me home
+    </Button>
+    <Button variant='secondary' color='neutral' size='large'>
+      Still broken? Check status <ArrowRight />
+    </Button>
+  </UtilityPage>
+);
+
+Error500.args = {
+  title: '500',
+  subtitle: 'Something broke.',
+  description:
+    'On our side, not yours. Your protection is still running \u2014 the console just hiccuped.',
+};
+
+/** The connection dropped, not the service: 'Try again' is the way out, and the copy promises automatic reconnection so nobody sits watching the button. */
+export const Offline: StoryFn<UtilityPageProps> = args => (
+  <UtilityPage {...args}>
+    <Button variant='primary' color='brand' size='large'>
+      Try again
+    </Button>
+  </UtilityPage>
+);
+
+Offline.args = {
+  title: 'Offline',
+  subtitle: 'Something broke.',
+  description:
+    "Your protection isn't affected \u2014 it runs outside this tab. We'll reconnect automatically.",
+};
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Pages" 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/UtilityPage/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,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))p.call(e,o)||o===r||c(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>I,c:()=>v,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>T,useRenderCounter:()=>x};for(var h in y)c(m,h,{get:y[h],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var g=(o=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?o:c(o,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:w,isValidElement:E}=g,_=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,R=Symbol.for("react.memo_cache_sentinel"),v="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]=R;return t[R]=!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 S=null;function k(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function C(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(S=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.");k($)}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&&(S=null),k(e)}else if(2===e)N.push(t),k(S);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");k(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=R}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var T=new Map;function j(){for(let e of T.values())e.forEach(e=>{e.count=0})}function x(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=T.get(e))&&(r=new Set,T.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=T.get(e))&&n.delete(r))}})}var D=new Set;function I(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}`;D.has(c)||(D.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(E(t)||E(r))E(t)!==E(r)?l(`type ${E(t)?"React element":"object"}`,`type ${E(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:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:b,isValidElement:w,lazy:E,memo:_,startTransition:R,unstable_act:v,useCallback:$,useContext:S,useDebugValue:k,useDeferredValue:N,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:T,useLayoutEffect:j,useMemo:x,useReducer:D,useRef:I,useState:P,useSyncExternalStore:A,useTransition:z,version:L,use:U}=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:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:b,isValidElement:w,lazy:E,memo:_,startTransition:R,unstable_act:v,use:U,useCallback:$,useContext:S,useDebugValue:k,useDeferredValue:N,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:T,useLayoutEffect:j,useMemo:x,useReducer:D,useRef:I,useState:P,useSyncExternalStore:A,useTransition:z,version:L})}},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.Icons.ArrowRight,i=window.WallarmDS.Button,c=window.WallarmDS.UtilityPage,s={title:"Pages/UtilityPage",component:c,parameters:{layout:"fullscreen",docs:{description:{component:"The whole-screen state template — 404, 403, 500, offline — for when the app itself cannot render; reach for `EmptyState` when only a region came back empty, and `Banner` or `Alert` when the app still works and this is only a message. It replaces the view and brings its own background and `Logo`, so what you supply is copy and one primary way out, not a layout."}}},argTypes:{title:{control:"text"},subtitle:{control:"text"},description:{control:"text"}}},u=t=>{let r,n,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{variant:"primary",color:"brand",size:"large",children:"Take me home"}),o[0]=r):r=o[0],o[1]!==t?(n=e(c,{...t,children:r}),o[1]=t,o[2]=n):n=o[2],n};u.args={title:"404",subtitle:"Page not found.",description:"Check the link or head back home."};let f=t=>{let r,n,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{variant:"primary",color:"brand",size:"large",children:"Take me home"}),o[0]=r):r=o[0],o[1]!==t?(n=e(c,{...t,children:r}),o[1]=t,o[2]=n):n=o[2],n};f.args={title:"403",subtitle:"No access.",description:"Your role doesn't include this page. If you think it should, your admin can fix that."};let p=r=>{let n,o,s,u=(0,a.c)(4);return u[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{variant:"primary",color:"brand",size:"large",children:"Take me home"}),u[0]=n):n=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(o=t(i,{variant:"secondary",color:"neutral",size:"large",children:["Still broken? Check status ",e(l,{})]}),u[1]=o):o=u[1],u[2]!==r?(s=t(c,{...r,children:[n,o]}),u[2]=r,u[3]=s):s=u[3],s};p.args={title:"500",subtitle:"Something broke.",description:"On our side, not yours. Your protection is still running — the console just hiccuped."};let d=t=>{let r,n,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{variant:"primary",color:"brand",size:"large",children:"Try again"}),o[0]=r):r=o[0],o[1]!==t?(n=e(c,{...t,children:r}),o[1]=t,o[2]=n):n=o[2],n};d.args={title:"Offline",subtitle:"Something broke.",description:"Your protection isn't affected — it runs outside this tab. We'll reconnect automatically."};var m=r("C");let y=[{name:"Error404",story:u,meta:s},{name:"Error403",story:f,meta:s},{name:"Error500",story:p,meta:s},{name:"Offline",story:d,meta:s}];function h({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=()=>m.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 m.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},m.default.createElement("h2",{className:"text-sm mb-12"},e.name),m.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(m.default.createElement(window.WallarmDS.Root,null,y.map((e,t)=>m.default.createElement(h,{key:t,entry:e})))),t}}})();