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

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

@@ -0,0 +1,255 @@
+The small row of icon buttons under a chat message — copy, feedback, a more menu and a timestamp. Every `MessageAction` is a ghost icon button whose required `aria-label` doubles as its tooltip, so the row never needs a visible caption. By default the row is transparent until the nearest `group/message` parent is hovered or holds focus, keeping its 30px height so the conversation does not jump; pass `visible` for the latest answer. Copy is composed with `Copyable` and `CopyableIcon`, menus with `DropdownMenuTrigger asChild`, and feedback with `aria-pressed` — the row itself holds no state. Give a menu-trigger action an explicit `data-testid`: the trigger injects its own `--trigger` id, which replaces the cascaded `--action` one.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `visible` | `boolean` | no | `false` | Force-show the row (e.g. the latest answer). By default the row is revealed on hover / focus-within of the nearest `group/message` parent, and always shown on `hover: none` devices. Hidden rows keep their 30px height and stay tabbable. |
+| `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.MessageAction` — `MessageActionProps` in the declaration bundle.
+- `WallarmDS.MessageTimestamp` — `MessageTimestampProps` in the declaration bundle.
+
+## Stories
+
+### User
+
+Under a user message: the timestamp first, then Copy. In a chat, the parent should align
+the row to the end of the bubble with `items-end`.
+
+Source: MessageActions/MessageActions.stories.tsx#User
+
+### Wally
+
+Under a Wally answer: Copy, thumbs up and down, a more menu, then the timestamp. The
+Ellipsis button is the menu trigger and keeps its own tooltip anchored to it.
+
+Source: MessageActions/MessageActions.stories.tsx#Wally
+
+### Visible
+
+Default versus `visible`. The first row stays transparent (but tabbable) until its message
+is hovered or focused; the second is forced on, as for the latest answer.
+
+Source: MessageActions/MessageActions.stories.tsx#Visible
+
+### PressedFeedback
+
+Thumbs feedback is a plain toggle: pass `aria-pressed` and the button keeps the
+`states-primary-active` background while pressed. Click one to try it.
+
+Source: MessageActions/MessageActions.stories.tsx#PressedFeedback
+
+### Analytics
+
+`data-analytics-id` and `data-analytics-props` go straight onto each `MessageAction` and
+land on its real `<button>` — also through `Copyable` and `DropdownMenuTrigger asChild`.
+
+Source: MessageActions/MessageActions.stories.tsx#Analytics
+
+## Story sources
+
+### MessageActions/MessageActions.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Ellipsis, ThumbsDown, ThumbsUp } from '../../icons';
+import { Copyable, CopyableIcon } from '../Copyable';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { MessageAction, MessageActions, MessageTimestamp } from '.';
+
+const DESCRIPTION = [
+  'The small row of icon buttons under a chat message — copy, feedback, a more menu and a timestamp.',
+  'Every `MessageAction` is a ghost icon button whose required `aria-label` doubles as its tooltip, so the row never needs a visible caption.',
+  'By default the row is transparent until the nearest `group/message` parent is hovered or holds focus, keeping its 30px height so the conversation does not jump; pass `visible` for the latest answer.',
+  'Copy is composed with `Copyable` and `CopyableIcon`, menus with `DropdownMenuTrigger asChild`, and feedback with `aria-pressed` — the row itself holds no state.',
+  'Give a menu-trigger action an explicit `data-testid`: the trigger injects its own `--trigger` id, which replaces the cascaded `--action` one.',
+].join(' ');
+
+const meta = {
+  title: 'AI/MessageActions',
+  component: MessageActions,
+  subcomponents: { MessageAction, MessageTimestamp },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof MessageActions>;
+
+export default meta;
+
+const ANSWER = 'Blocked 1,204 SQL injection attempts in the last 24 hours.';
+
+/**
+ * Under a user message: the timestamp first, then Copy. In a chat, the parent should align
+ * the row to the end of the bubble with `items-end`.
+ */
+export const User: StoryFn<typeof meta> = () => (
+  <MessageActions data-testid='user-actions' visible>
+    <MessageTimestamp dateTime='2026-10-21T09:41:00Z'>2m ago</MessageTimestamp>
+    <Copyable text='Show me blocked attacks'>
+      <MessageAction aria-label='Copy' data-testid='user-actions--copy'>
+        <CopyableIcon />
+      </MessageAction>
+    </Copyable>
+  </MessageActions>
+);
+
+/**
+ * Under a Wally answer: Copy, thumbs up and down, a more menu, then the timestamp. The
+ * Ellipsis button is the menu trigger and keeps its own tooltip anchored to it.
+ */
+export const Wally: StoryFn<typeof meta> = () => (
+  <MessageActions data-testid='wally-actions' visible>
+    <Copyable text={ANSWER}>
+      <MessageAction aria-label='Copy' data-testid='wally-actions--copy'>
+        <CopyableIcon />
+      </MessageAction>
+    </Copyable>
+    <MessageAction aria-label='Good response' data-testid='wally-actions--up'>
+      <ThumbsUp />
+    </MessageAction>
+    <MessageAction aria-label='Bad response' data-testid='wally-actions--down'>
+      <ThumbsDown />
+    </MessageAction>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <MessageAction aria-label='More actions' data-testid='wally-actions--more'>
+          <Ellipsis />
+        </MessageAction>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Regenerate</DropdownMenuItem>
+        <DropdownMenuItem>Report a problem</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    <MessageTimestamp dateTime='2026-10-21T09:42:00Z'>1m ago</MessageTimestamp>
+  </MessageActions>
+);
+
+/**
+ * Default versus `visible`. The first row stays transparent (but tabbable) until its message
+ * is hovered or focused; the second is forced on, as for the latest answer.
+ */
+export const Visible: StoryFn<typeof meta> = () => (
+  <div className='flex flex-col gap-16'>
+    <div className='group/message flex flex-col items-start gap-4' data-testid='message-default'>
+      <p className='text-sm text-text-primary'>Hover to reveal</p>
+      <MessageActions data-testid='actions-default'>
+        <Copyable text={ANSWER}>
+          <MessageAction aria-label='Copy' data-testid='actions-default--copy'>
+            <CopyableIcon />
+          </MessageAction>
+        </Copyable>
+        <MessageTimestamp dateTime='2026-10-21T09:42:00Z'>1m ago</MessageTimestamp>
+      </MessageActions>
+    </div>
+    <div className='group/message flex flex-col items-start gap-4' data-testid='message-visible'>
+      <p className='text-sm text-text-primary'>visible</p>
+      <MessageActions data-testid='actions-visible' visible>
+        <Copyable text={ANSWER}>
+          <MessageAction aria-label='Copy' data-testid='actions-visible--copy'>
+            <CopyableIcon />
+          </MessageAction>
+        </Copyable>
+        <MessageTimestamp dateTime='2026-10-21T09:42:00Z'>1m ago</MessageTimestamp>
+      </MessageActions>
+    </div>
+  </div>
+);
+
+/**
+ * Thumbs feedback is a plain toggle: pass `aria-pressed` and the button keeps the
+ * `states-primary-active` background while pressed. Click one to try it.
+ */
+export const PressedFeedback: StoryFn<typeof meta> = () => {
+  const [feedback, setFeedback] = useState<'up' | 'down' | null>('up');
+
+  const handleGoodClick = () => {
+    setFeedback(current => (current === 'up' ? null : 'up'));
+  };
+
+  const handleBadClick = () => {
+    setFeedback(current => (current === 'down' ? null : 'down'));
+  };
+
+  return (
+    <MessageActions data-testid='feedback-actions' visible>
+      <MessageAction
+        aria-label='Good response'
+        aria-pressed={feedback === 'up'}
+        data-testid='feedback-up'
+        onClick={handleGoodClick}
+      >
+        <ThumbsUp />
+      </MessageAction>
+      <MessageAction
+        aria-label='Bad response'
+        aria-pressed={feedback === 'down'}
+        data-testid='feedback-down'
+        onClick={handleBadClick}
+      >
+        <ThumbsDown />
+      </MessageAction>
+    </MessageActions>
+  );
+};
+
+/**
+ * `data-analytics-id` and `data-analytics-props` go straight onto each `MessageAction` and
+ * land on its real `<button>` — also through `Copyable` and `DropdownMenuTrigger asChild`.
+ */
+export const Analytics: StoryFn<typeof meta> = () => (
+  <MessageActions data-testid='analytics-actions' visible>
+    <Copyable text={ANSWER}>
+      <MessageAction
+        aria-label='Copy'
+        data-testid='analytics-actions--copy'
+        data-analytics-id='WALLY_ANSWER_COPY'
+      >
+        <CopyableIcon />
+      </MessageAction>
+    </Copyable>
+    <MessageAction
+      aria-label='Good response'
+      data-testid='analytics-actions--up'
+      data-analytics-id='WALLY_ANSWER_FEEDBACK'
+      data-analytics-props='{"rating":"up"}'
+    >
+      <ThumbsUp />
+    </MessageAction>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <MessageAction
+          aria-label='More actions'
+          data-testid='analytics-actions--more'
+          data-analytics-id='WALLY_ANSWER_MORE'
+        >
+          <Ellipsis />
+        </MessageAction>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Regenerate</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </MessageActions>
+);
+```

package/dist/project/components/MessageActions/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/MessageActions/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let r,n;/**
+ * 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,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of d(t))p.call(e,n)||n===a||c(e,n,{get:()=>t[n],enumerable:!(r=s(t,n))||r.enumerable});return e},f={},y={$dispatcherGuard:()=>M,$makeReadOnly:()=>x,$reset:()=>k,$structuralCheck:()=>W,c:()=>E,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>D,useRenderCounter:()=>T};for(var h in y)c(f,h,{get:y[h],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),f);var b=(n=null!=(r=a("C"))?i(u(r)):{},m(r&&r.__esModule?n:c(n,"default",{value:r,enumerable:!0}),r)),{useRef:w,useEffect:_,isValidElement:g}=b,S=null!=(o=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(l=b.__COMPILER_RUNTIME)?void 0:l.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=v;return t[v]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 C=null;function $(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function M(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(C=t),t===R)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.");$(R)}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&&(C=null),$(e)}else if(2===e)N.push(t),$(C);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function k(e){for(let t=0;t<e.length;t++)e[t]=v}function x(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function O(){for(let e of D.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let a,r={count:0};null==(a=D.get(e))&&(a=new Set,D.set(e,a)),a.add(r),t.current=r}return()=>{var a;let r;null!==t.current&&(a=t.current,null!=(r=D.get(e))&&r.delete(a))}})}var A=new Set;function W(e,t,a,r,n,o){function l(e,t,l,i){let c=`${r}:${o} [${n}] ${a}${l} changed from ${e} to ${t} at depth ${i}`;A.has(c)||(A.add(c),console.error(c))}!function e(t,a,r,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)l(`type ${typeof t}`,`type ${typeof a}`,r,n);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(a);if(null===t&&null!==a)l("null",`type ${typeof a}`,r,n);else if(null===a)l(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)l(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,r,n);else for(let[o,i]of t)a.has(o)?e(i,a.get(o),`${r}.get(${o})`,n+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,n);else l("Map instance","other value",r,n);else if(a instanceof Map)l("other value","Map instance",r,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)l(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,r,n);else for(let e of a)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else l("Set instance","other value",r,n);else if(a instanceof Set)l("other value","Set instance",r,n);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,n);else if(t.length!==a.length)l(`array with length ${t.length}`,`array with length ${a.length}`,r,n);else for(let o=0;o<t.length;o++)e(t[o],a[o],`${r}[${o}]`,n+1);else if(g(t)||g(a))g(t)!==g(a)?l(`type ${g(t)?"React element":"object"}`,`type ${g(a)?"React element":"object"}`,r,n):t.type!==a.type?l(`React element of type ${t.type}`,`React element of type ${a.type}`,r,n):e(t.props,a.props,`[props of ${r}]`,n+1);else{for(let e in a)e in t||l(`object without key ${e}`,`object with key ${e}`,r,n);for(let o in t)o in a?e(t[o],a[o],`${r}.${o}`,n+1):l(`object with key ${o}`,`object without key ${o}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,r,n):t!==a&&l(t,a,r,n)}}}(e,t,"",0)}},p(e,t,a){let r=new WeakMap,n=new WeakMap;function o(e,t,a){let o=t,l=a;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,a=r.get(e);a||(a=new WeakMap,r.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),o=n}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 a=n.get(e);a||(a=new Map,n.set(e,a));let r=a.get(t);if(r)return r;let o=e.forwardRef((a,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let a=r(t);e="function"==typeof a?a:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return o.displayName=`CanvasHost(${t})`,a.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,a,r)=>{let n=o(e,t,a??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,a,r)=>{let n=o(e,t,a??{}),{children:l,...i}=n.props;return e.createElement(n.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,a,...r)=>{let n=o(e,t,a??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,a,...r)=>{let n=e.cloneElement(t,a??void 0,...r),l=n.ref,i=o(e,n.type,{...n.props,ref:l});return i.type===n.type&&"string"!=typeof n.type?n:e.createElement(i.type,{...i.props,key:n.key})}}}a.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,a){a.r(t);let r=(0,a("p").YJ)(window.React),{Children:n,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:p,cloneElement:m,createContext:f,createElement:y,createFactory:h,createRef:b,forwardRef:w,isValidElement:_,lazy:g,memo:S,startTransition:v,unstable_act:E,useCallback:R,useContext:C,useDebugValue:$,useDeferredValue:N,useEffect:M,useId:k,useImperativeHandle:x,useInsertionEffect:D,useLayoutEffect:O,useMemo:T,useReducer:A,useRef:W,useState:j,useSyncExternalStore:I,useTransition:L,version:P,use:z}=r;a.d(t,{},{Children:n,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:p,cloneElement:m,createContext:f,createElement:y,createFactory:h,createRef:b,default:r,forwardRef:w,isValidElement:_,lazy:g,memo:S,startTransition:v,unstable_act:E,use:z,useCallback:R,useContext:C,useDebugValue:$,useDeferredValue:N,useEffect:M,useId:k,useImperativeHandle:x,useInsertionEffect:D,useLayoutEffect:O,useMemo:T,useReducer:A,useRef:W,useState:j,useSyncExternalStore:I,useTransition:L,version:P})}},t={};function a(r){var n=t[r];if(void 0!==n)return n.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,a),o.exports}a.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.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:r,Fragment:n}=(0,a("p").MA)(window.React);var o=a("vD"),l=a("C");let i=window.WallarmDS.Icons.Ellipsis,c=window.WallarmDS.Icons.ThumbsDown,s=window.WallarmDS.Icons.ThumbsUp,d=window.WallarmDS.Copyable,u=window.WallarmDS.CopyableIcon,p=window.WallarmDS.DropdownMenu,m=window.WallarmDS.DropdownMenuContent,f=window.WallarmDS.DropdownMenuItem,y=window.WallarmDS.DropdownMenuTrigger,h=window.WallarmDS.MessageAction,b=window.WallarmDS.MessageActions,w=window.WallarmDS.MessageTimestamp,_={title:"AI/MessageActions",component:b,subcomponents:{MessageAction:h,MessageTimestamp:w},parameters:{layout:"centered",docs:{description:{component:"The small row of icon buttons under a chat message — copy, feedback, a more menu and a timestamp. Every `MessageAction` is a ghost icon button whose required `aria-label` doubles as its tooltip, so the row never needs a visible caption. By default the row is transparent until the nearest `group/message` parent is hovered or holds focus, keeping its 30px height so the conversation does not jump; pass `visible` for the latest answer. Copy is composed with `Copyable` and `CopyableIcon`, menus with `DropdownMenuTrigger asChild`, and feedback with `aria-pressed` — the row itself holds no state. Give a menu-trigger action an explicit `data-testid`: the trigger injects its own `--trigger` id, which replaces the cascaded `--action` one."}}}},g="Blocked 1,204 SQL injection attempts in the last 24 hours.";function S(e){return"up"===e?null:"up"}function v(e){return"down"===e?null:"down"}let E=[{name:"User",story:()=>{let a,r,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(w,{dateTime:"2026-10-21T09:41:00Z",children:"2m ago"}),n[0]=a):a=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(b,{"data-testid":"user-actions",visible:!0,children:[a,e(d,{text:"Show me blocked attacks",children:e(h,{"aria-label":"Copy","data-testid":"user-actions--copy",children:e(u,{})})})]}),n[1]=r):r=n[1],r},meta:_},{name:"Wally",story:()=>{let a,r,n,l,_,S=(0,o.c)(5);return S[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{text:g,children:e(h,{"aria-label":"Copy","data-testid":"wally-actions--copy",children:e(u,{})})}),S[0]=a):a=S[0],S[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(h,{"aria-label":"Good response","data-testid":"wally-actions--up",children:e(s,{})}),S[1]=r):r=S[1],S[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{"aria-label":"Bad response","data-testid":"wally-actions--down",children:e(c,{})}),S[2]=n):n=S[2],S[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(y,{asChild:!0,children:e(h,{"aria-label":"More actions","data-testid":"wally-actions--more",children:e(i,{})})}),S[3]=l):l=S[3],S[4]===Symbol.for("react.memo_cache_sentinel")?(_=t(b,{"data-testid":"wally-actions",visible:!0,children:[a,r,n,t(p,{children:[l,t(m,{children:[e(f,{children:"Regenerate"}),e(f,{children:"Report a problem"})]})]}),e(w,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})]}),S[4]=_):_=S[4],_},meta:_},{name:"Visible",story:()=>{let a,r,n,l,i=(0,o.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=e("p",{className:"text-sm text-text-primary",children:"Hover to reveal"}),i[0]=a):a=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"group/message flex flex-col items-start gap-4","data-testid":"message-default",children:[a,t(b,{"data-testid":"actions-default",children:[e(d,{text:g,children:e(h,{"aria-label":"Copy","data-testid":"actions-default--copy",children:e(u,{})})}),e(w,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})]})]}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{className:"text-sm text-text-primary",children:"visible"}),i[2]=n):n=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(l=t("div",{className:"flex flex-col gap-16",children:[r,t("div",{className:"group/message flex flex-col items-start gap-4","data-testid":"message-visible",children:[n,t(b,{"data-testid":"actions-visible",visible:!0,children:[e(d,{text:g,children:e(h,{"aria-label":"Copy","data-testid":"actions-visible--copy",children:e(u,{})})}),e(w,{dateTime:"2026-10-21T09:42:00Z",children:"1m ago"})]})]})]}),i[3]=l):l=i[3],l},meta:_},{name:"PressedFeedback",story:()=>{let a,r,n,i,d,u,p,m=(0,o.c)(11),[f,y]=(0,l.useState)("up");m[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{y(S)},m[0]=a):a=m[0];let w=a;m[1]===Symbol.for("react.memo_cache_sentinel")?(r=()=>{y(v)},m[1]=r):r=m[1];let _=r,g="up"===f;m[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(s,{}),m[2]=n):n=m[2],m[3]!==g?(i=e(h,{"aria-label":"Good response","aria-pressed":g,"data-testid":"feedback-up",onClick:w,children:n}),m[3]=g,m[4]=i):i=m[4];let E="down"===f;return m[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(c,{}),m[5]=d):d=m[5],m[6]!==E?(u=e(h,{"aria-label":"Bad response","aria-pressed":E,"data-testid":"feedback-down",onClick:_,children:d}),m[6]=E,m[7]=u):u=m[7],m[8]!==i||m[9]!==u?(p=t(b,{"data-testid":"feedback-actions",visible:!0,children:[i,u]}),m[8]=i,m[9]=u,m[10]=p):p=m[10],p},meta:_},{name:"Analytics",story:()=>{let a,r,n,l,c=(0,o.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{text:g,children:e(h,{"aria-label":"Copy","data-testid":"analytics-actions--copy","data-analytics-id":"WALLY_ANSWER_COPY",children:e(u,{})})}),c[0]=a):a=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(h,{"aria-label":"Good response","data-testid":"analytics-actions--up","data-analytics-id":"WALLY_ANSWER_FEEDBACK","data-analytics-props":'{"rating":"up"}',children:e(s,{})}),c[1]=r):r=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(y,{asChild:!0,children:e(h,{"aria-label":"More actions","data-testid":"analytics-actions--more","data-analytics-id":"WALLY_ANSWER_MORE",children:e(i,{})})}),c[2]=n):n=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(b,{"data-testid":"analytics-actions",visible:!0,children:[a,r,t(p,{children:[n,e(m,{children:e(f,{children:"Regenerate"})})]})]}),c[3]=l):l=c[3],l},meta:_}];function R({entry:e}){let{story:t,meta:a}=e,r={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,o=()=>l.default.createElement(n,r),i={args:r,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>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(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,E.map((e,t)=>l.default.createElement(R,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,324 @@
+The family's compact stat — one number, optionally against a total and a change — for a card with no breakdown to draw; reach for `HorizontalBarStack` once that number splits into named parts. It is a brick set rather than a set of props: `MetricHeader` holds `MetricValue`, `MetricTotal` and `MetricDelta`, with `MetricCaption` beneath. On the delta, `sentiment` picks the colour and `trend` picks the arrow, on purpose independently — a number going up is not always good news. Add `MetricSparkline` after `Metric` to show the trend over the period; hover it for a point's date and value.
+
+## 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.MetricCaption` — `MetricCaptionProps` in the declaration bundle.
+- `WallarmDS.MetricDelta` — `MetricDeltaProps` in the declaration bundle.
+- `WallarmDS.MetricHeader` — `MetricHeaderProps` in the declaration bundle.
+- `WallarmDS.MetricSkeleton` — `MetricSkeletonProps` in the declaration bundle.
+- `WallarmDS.MetricSparkline` — `MetricSparklineProps` in the declaration bundle.
+- `WallarmDS.MetricTotal` — `MetricTotalProps` in the declaration bundle.
+- `WallarmDS.MetricValue` — `MetricValueProps` in the declaration bundle.
+
+## Stories
+
+### Gallery
+
+Every brick combination on its own card, mirroring the Figma options board: value alone,
+value with a delta in each sentiment, and the three `MetricTotal` connectors: a slash, the
+word "of", and the word "total" after the number.
+
+Source: SimpleCharts/Metric/Metric.stories.tsx#Gallery
+
+### Loading
+
+`MetricSkeleton` in place of the stat while the card loads, so the number arriving does not
+resize the card.
+
+Source: SimpleCharts/Metric/Metric.stories.tsx#Loading
+
+### Sparkline
+
+`MetricSparkline` after `Metric` draws the trend over the period, edge to edge along the
+card's bottom. Hover it for a ruler on the nearest point and a popover with its date and value.
+
+Source: SimpleCharts/Metric/Metric.stories.tsx#Sparkline
+
+### SparklineColors
+
+The sparkline's `color` is set per chart, on purpose apart from the delta's `sentiment`:
+`brand` (default), `positive`, `negative`, and `neutral`.
+
+Source: SimpleCharts/Metric/Metric.stories.tsx#SparklineColors
+
+## Story sources
+
+### SimpleCharts/Metric/Metric.stories.tsx
+
+```tsx
+import type { FC, ReactNode } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Chart } from '../Chart/Chart';
+import { ChartHeader } from '../Chart/ChartHeader';
+import { ChartTitle } from '../Chart/ChartTitle';
+import { Metric } from './Metric';
+import { MetricCaption } from './MetricCaption';
+import { MetricDelta } from './MetricDelta';
+import { MetricHeader } from './MetricHeader';
+import { MetricSkeleton } from './MetricSkeleton';
+import { MetricSparkline, type MetricSparklinePoint } from './MetricSparkline';
+import { MetricTotal } from './MetricTotal';
+import { MetricValue } from './MetricValue';
+
+const figmaUrl =
+  'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11437-11939';
+
+const sparklineFigmaUrl =
+  'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12610-10640';
+
+const DESCRIPTION = [
+  "The family's compact stat — one number, optionally against a total and a change — for a card with no breakdown to draw; reach for `HorizontalBarStack` once that number splits into named parts.",
+  'It is a brick set rather than a set of props: `MetricHeader` holds `MetricValue`, `MetricTotal` and `MetricDelta`, with `MetricCaption` beneath. On the delta, `sentiment` picks the colour and `trend` picks the arrow, on purpose independently — a number going up is not always good news.',
+  "Add `MetricSparkline` after `Metric` to show the trend over the period; hover it for a point's date and value.",
+].join(' ');
+
+const meta = {
+  title: 'Data Display/SimpleCharts/Metric',
+  component: Metric,
+  parameters: {
+    layout: 'padded',
+    design: { type: 'figma', url: figmaUrl },
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof Metric>;
+
+export default meta;
+
+/** A single Metric composed on the Chart card, as it ships in product. */
+const Card: FC<{ title: string; children: ReactNode }> = ({ title, children }) => (
+  <div className='w-320'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>{title}</ChartTitle>
+      </ChartHeader>
+      {children}
+    </Chart>
+  </div>
+);
+
+/**
+ * Every brick combination on its own card, mirroring the Figma options board: value alone,
+ * value with a delta in each sentiment, and the three `MetricTotal` connectors: a slash, the
+ * word "of", and the word "total" after the number.
+ */
+export const Gallery: StoryFn = () => (
+  <div className='flex flex-wrap gap-16'>
+    <Card title='Value only'>
+      <Metric data-testid='metric'>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='Negative — count rose'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricDelta value={10} trend='up' sentiment='negative' />
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='Positive — count fell'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>74</MetricValue>
+          <MetricDelta value={8} trend='down' sentiment='positive' />
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='Neutral'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricDelta value={10} trend='up' />
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='Total — slash'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricTotal connector='slash'>120</MetricTotal>
+          <MetricDelta value={10} trend='up' sentiment='negative' />
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='Total — of'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricTotal connector='of'>120</MetricTotal>
+          <MetricDelta value={10} trend='up' sentiment='negative' />
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='Total — total'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricTotal connector='total'>120</MetricTotal>
+          <MetricDelta value={10} trend='up' sentiment='negative' />
+        </MetricHeader>
+      </Metric>
+    </Card>
+
+    <Card title='With caption'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricDelta value={10} trend='up' sentiment='negative' />
+        </MetricHeader>
+        <MetricCaption>blocked today</MetricCaption>
+      </Metric>
+    </Card>
+
+    <Card title='Everything'>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricTotal connector='of'>120</MetricTotal>
+          <MetricDelta value={10} trend='up' sentiment='negative' />
+        </MetricHeader>
+        <MetricCaption>blocked today</MetricCaption>
+      </Metric>
+    </Card>
+  </div>
+);
+
+/**
+ * `MetricSkeleton` in place of the stat while the card loads, so the number arriving does not
+ * resize the card.
+ */
+export const Loading: StoryFn = () => (
+  <Card title='Findings'>
+    <MetricSkeleton data-testid='metric-skeleton' />
+  </Card>
+);
+
+const attacks: MetricSparklinePoint[] = [
+  { x: new Date(2026, 0, 1), value: 14 },
+  { x: new Date(2026, 0, 2), value: 11 },
+  { x: new Date(2026, 0, 3), value: 11 },
+  { x: new Date(2026, 0, 4), value: 11 },
+  { x: new Date(2026, 0, 5), value: 16 },
+  { x: new Date(2026, 0, 6), value: 18 },
+  { x: new Date(2026, 0, 7), value: 20 },
+  { x: new Date(2026, 0, 8), value: 19 },
+  { x: new Date(2026, 0, 9), value: 13 },
+];
+
+/**
+ * `MetricSparkline` after `Metric` draws the trend over the period, edge to edge along the
+ * card's bottom. Hover it for a ruler on the nearest point and a popover with its date and value.
+ */
+export const Sparkline: StoryFn = () => (
+  <div className='w-400'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Attacks</ChartTitle>
+      </ChartHeader>
+      <Metric>
+        <MetricHeader>
+          <MetricValue>91</MetricValue>
+          <MetricDelta value={10} trend='up' sentiment='positive' />
+        </MetricHeader>
+        <MetricCaption>last 9 days</MetricCaption>
+      </Metric>
+      <MetricSparkline data-testid='sparkline' data={attacks} label='Attacks' />
+    </Chart>
+  </div>
+);
+Sparkline.parameters = { design: { type: 'figma', url: sparklineFigmaUrl } };
+
+/**
+ * The sparkline's `color` is set per chart, on purpose apart from the delta's `sentiment`:
+ * `brand` (default), `positive`, `negative`, and `neutral`.
+ */
+export const SparklineColors: StoryFn = () => (
+  <div className='flex flex-wrap gap-16'>
+    <div className='w-256'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Negative</ChartTitle>
+        </ChartHeader>
+        <Metric>
+          <MetricHeader>
+            <MetricValue>74</MetricValue>
+            <MetricDelta value={5} trend='down' sentiment='negative' />
+          </MetricHeader>
+          <MetricCaption>last 9 days</MetricCaption>
+        </Metric>
+        <MetricSparkline data={attacks} color='negative' label='Attacks' />
+      </Chart>
+    </div>
+    <div className='w-256'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Positive</ChartTitle>
+        </ChartHeader>
+        <Metric>
+          <MetricHeader>
+            <MetricValue>91</MetricValue>
+            <MetricDelta value={10} trend='up' sentiment='positive' />
+          </MetricHeader>
+          <MetricCaption>last 9 days</MetricCaption>
+        </Metric>
+        <MetricSparkline data={attacks} color='positive' label='Attacks' />
+      </Chart>
+    </div>
+    <div className='w-256'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Brand</ChartTitle>
+        </ChartHeader>
+        <Metric>
+          <MetricHeader>
+            <MetricValue>91</MetricValue>
+            <MetricDelta value={10} trend='up' sentiment='positive' />
+          </MetricHeader>
+          <MetricCaption>last 9 days</MetricCaption>
+        </Metric>
+        <MetricSparkline data={attacks} label='Attacks' />
+      </Chart>
+    </div>
+    <div className='w-256'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Neutral</ChartTitle>
+        </ChartHeader>
+        <Metric>
+          <MetricHeader>
+            <MetricValue>91</MetricValue>
+            <MetricDelta value={10} trend='up' sentiment='positive' />
+          </MetricHeader>
+          <MetricCaption>last 9 days</MetricCaption>
+        </Metric>
+        <MetricSparkline data={attacks} color='neutral' label='Attacks' />
+      </Chart>
+    </div>
+  </div>
+);
+SparklineColors.parameters = { design: { type: 'figma', url: sparklineFigmaUrl } };
+```

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