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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,o,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))u.call(e,l)||l===r||i(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},f={},p={$dispatcherGuard:()=>k,$makeReadOnly:()=>D,$reset:()=>T,$structuralCheck:()=>x,c:()=>R,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>M,useRenderCounter:()=>A};for(var y in p)i(f,y,{get:p[y],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),f);var _=(l=null!=(n=r("C"))?c(m(n)):{},h(n&&n.__esModule?l:i(l,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:v,isValidElement:S}=_,w=null!=(a=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function N(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function T(e){for(let t=0;t<e.length;t++)e[t]=g}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function O(){for(let e of M.values())e.forEach(e=>{e.count=0})}function A(e){let t=b(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var j=new Set;function x(e,t,r,n,l,a){function o(e,t,o,c){let i=`${n}:${a} [${l}] ${r}${o} changed from ${e} to ${t} at depth ${c}`;j.has(i)||(j.add(i),console.error(i))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),c=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,l);else if(null===r)o(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[a,c]of t)r.has(a)?e(c,r.get(a),`${n}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else o("Map instance","other value",n,l);else if(r instanceof Map)o("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else o("Set instance","other value",n,l);else if(r instanceof Set)o("other value","Set instance",n,l);else if(a||c)if(a!==c)o(`type ${a?"array":"object"}`,`type ${c?"array":"object"}`,n,l);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,l+1);else if(S(t)||S(r))S(t)!==S(r)?o(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,n,l):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,l);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&o(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function a(e,t,r){let a=t,o=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!=o.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof a&&null!=o.ref&&(a=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,r,n)=>{let l=a(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=a(e,t,r??{}),{children:o,...c}=l.props;return e.createElement(l.type,void 0===n?c:{...c,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,r,...n)=>{let l=a(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),o=l.ref,c=a(e,l.type,{...l.props,ref:o});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}r.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:_,forwardRef:b,isValidElement:v,lazy:S,memo:w,startTransition:g,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:T,useImperativeHandle:D,useInsertionEffect:M,useLayoutEffect:O,useMemo:A,useReducer:j,useRef:x,useState:I,useSyncExternalStore:P,useTransition:z,version:W,use:V}=n;r.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:_,default:n,forwardRef:b,isValidElement:v,lazy:S,memo:w,startTransition:g,unstable_act:R,use:V,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:T,useImperativeHandle:D,useInsertionEffect:M,useLayoutEffect:O,useMemo:A,useReducer:j,useRef:x,useState:I,useSyncExternalStore:P,useTransition:z,version:W})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:l}=(0,r("p").MA)(window.React);var a=r("vD");let o=window.WallarmDS.Button,c=window.WallarmDS.NumericBadge,i=window.WallarmDS.Text,s=window.WallarmDS.Accordion,d=window.WallarmDS.AccordionActions,m=window.WallarmDS.AccordionContent,u=window.WallarmDS.AccordionItem,h=window.WallarmDS.AccordionTrigger,f={title:"Data Display/Accordion",component:s,subcomponents:{AccordionItem:u,AccordionTrigger:h,AccordionActions:d,AccordionContent:m},parameters:{layout:"centered",docs:{description:{component:"Stacks sections behind their own headers and opens each on demand — reach for `Tabs` when a few primary sections get switched between often, and leave content on the page when people read most of it anyway. `primary` and `secondary` are inline rows for grouping; `section` is the bordered panel, and the only variant with room for `AccordionActions`."}}},args:{onValueChange:function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t}()},argTypes:{variant:{control:"select",options:["primary","secondary","section"]},multiple:{control:"boolean"},collapsible:{control:"boolean"},disabled:{control:"boolean"},defaultValue:{control:"object"}}},p="The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.",y="A really long title that should truncate gracefully without breaking the layout";var _=r("C");let b=[{name:"Primary",story:r=>{let n,l,o,c,d,f=(0,a.c)(6);return f[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:"Title"}),f[0]=n):n=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{value:"1",children:[n,e(m,{children:e(i,{children:p})})]}),f[1]=l):l=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{children:"Title"}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(u,{value:"2",children:[o,e(m,{children:e(i,{children:p})})]}),f[3]=c):c=f[3],f[4]!==r?(d=e("div",{className:"w-440",children:t(s,{...r,variant:"primary","data-testid":"accordion-primary",children:[l,c]})}),f[4]=r,f[5]=d):d=f[5],d},meta:f},{name:"Secondary",story:r=>{let n,l,o,c,d,f=(0,a.c)(6);return f[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:"Title"}),f[0]=n):n=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{value:"1",children:[n,e(m,{children:e(i,{children:p})})]}),f[1]=l):l=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{children:"Title"}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(u,{value:"2",children:[o,e(m,{children:e(i,{children:p})})]}),f[3]=c):c=f[3],f[4]!==r?(d=e("div",{className:"w-440",children:t(s,{...r,variant:"secondary","data-testid":"accordion-secondary",children:[l,c]})}),f[4]=r,f[5]=d):d=f[5],d},meta:f},{name:"Section",story:r=>{let n,l,o,d,f,y,_=(0,a.c)(7);return _[0]===Symbol.for("react.memo_cache_sentinel")?(n=["1"],_[0]=n):n=_[0],_[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(h,{children:["Title ",e(c,{children:"2"})]}),_[1]=l):l=_[1],_[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(u,{value:"1",children:[l,e(m,{children:e(i,{children:p})})]}),_[2]=o):o=_[2],_[3]===Symbol.for("react.memo_cache_sentinel")?(d=t(h,{children:["Title ",e(c,{children:"2"})]}),_[3]=d):d=_[3],_[4]===Symbol.for("react.memo_cache_sentinel")?(f=t(u,{value:"2",children:[d,e(m,{children:e(i,{children:p})})]}),_[4]=f):f=_[4],_[5]!==r?(y=e("div",{className:"w-440",children:t(s,{...r,variant:"section",defaultValue:n,"data-testid":"accordion-section",children:[o,f]})}),_[5]=r,_[6]=y):y=_[6],y},meta:f},{name:"SectionWithActions",story:r=>{let n,l,f,y,_,b,v,S,w=(0,a.c)(9);return w[0]===Symbol.for("react.memo_cache_sentinel")?(n=["1"],w[0]=n):n=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(h,{children:["Title ",e(c,{children:"2"})]}),w[1]=l):l=w[1],w[2]===Symbol.for("react.memo_cache_sentinel")?(f=t(d,{children:[e(o,{variant:"ghost",size:"small",children:"Delete"}),e(o,{variant:"outline",size:"small",children:"Edit"})]}),w[2]=f):f=w[2],w[3]===Symbol.for("react.memo_cache_sentinel")?(y=t(u,{value:"1",children:[l,f,e(m,{children:e(i,{children:p})})]}),w[3]=y):y=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(_=t(h,{children:["Title ",e(c,{children:"2"})]}),w[4]=_):_=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(b=t(d,{children:[e(o,{variant:"ghost",size:"small",children:"Delete"}),e(o,{variant:"outline",size:"small",children:"Edit"})]}),w[5]=b):b=w[5],w[6]===Symbol.for("react.memo_cache_sentinel")?(v=t(u,{value:"2",children:[_,b,e(m,{children:e(i,{children:p})})]}),w[6]=v):v=w[6],w[7]!==r?(S=e("div",{className:"w-560",children:t(s,{...r,variant:"section",defaultValue:n,"data-testid":"accordion-section-actions",children:[y,v]})}),w[7]=r,w[8]=S):S=w[8],S},meta:f},{name:"LongTitlePrimary",story:r=>{let n,l,o,c=(0,a.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:y}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{value:"1",children:[n,e(m,{children:e(i,{children:p})})]}),c[1]=l):l=c[1],c[2]!==r?(o=e("div",{className:"w-320",children:e(s,{...r,variant:"primary","data-testid":"accordion-long-title-primary",children:l})}),c[2]=r,c[3]=o):o=c[3],o},meta:f},{name:"LongTitleSecondary",story:r=>{let n,l,o,c=(0,a.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:y}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{value:"1",children:[n,e(m,{children:e(i,{children:p})})]}),c[1]=l):l=c[1],c[2]!==r?(o=e("div",{className:"w-320",children:e(s,{...r,variant:"secondary","data-testid":"accordion-long-title-secondary",children:l})}),c[2]=r,c[3]=o):o=c[3],o},meta:f},{name:"Multiple",story:r=>{let n,l,o,c,d,f,y,_,b=(0,a.c)(9);return b[0]===Symbol.for("react.memo_cache_sentinel")?(n=["1","2"],b[0]=n):n=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(h,{children:"Section A"}),b[1]=l):l=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(u,{value:"1",children:[l,e(m,{children:e(i,{children:p})})]}),b[2]=o):o=b[2],b[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(h,{children:"Section B"}),b[3]=c):c=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(d=t(u,{value:"2",children:[c,e(m,{children:e(i,{children:p})})]}),b[4]=d):d=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(f=e(h,{children:"Section C"}),b[5]=f):f=b[5],b[6]===Symbol.for("react.memo_cache_sentinel")?(y=t(u,{value:"3",children:[f,e(m,{children:e(i,{children:p})})]}),b[6]=y):y=b[6],b[7]!==r?(_=e("div",{className:"w-440",children:t(s,{...r,variant:"section",multiple:!0,defaultValue:n,"data-testid":"accordion-multiple",children:[o,d,y]})}),b[7]=r,b[8]=_):_=b[8],_},meta:f},{name:"Disabled",story:r=>{let n,l,o,c,d,f=(0,a.c)(6);return f[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:"Available"}),f[0]=n):n=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{value:"1",children:[n,e(m,{children:e(i,{children:p})})]}),f[1]=l):l=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{children:"Disabled item"}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(u,{value:"2",disabled:!0,children:[o,e(m,{children:e(i,{children:p})})]}),f[3]=c):c=f[3],f[4]!==r?(d=e("div",{className:"w-440",children:t(s,{...r,variant:"primary","data-testid":"accordion-disabled",children:[l,c]})}),f[4]=r,f[5]=d):d=f[5],d},meta:f}];function v({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>_.default.createElement(l,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,o)}return _.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},_.default.createElement("h2",{className:"text-sm mb-12"},e.name),_.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(_.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>_.default.createElement(v,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,127 @@
+The character of an AI agent from 40 px up: a soft felt body baked in the browser from its silhouette, a glass visor and two light eyes that carry its state, and the prop that tells its job. Below 40 px use `AgentGlyph`. The body is baked once per outline, colour and size, off the main thread, and cached; until a layer is ready its flat fill shows. With `live` the character moves as the reference does: it blinks, glances, breathes and, on duty, now and then plays with its prop or looks at its neighbours (at most two on the page at once). Hello and Done are beats played through `handleRef`; they play in full, then the character shows `state` again. Reduced motion, or `setAgentMotion(false)` for the user’s setting, shows every state’s static frame. Size, liveness and the contact shadow are set by the place the character sits in (Overview rows 40 px, headers and toasts 48, beside people 56, the team card and the drawer 72, the empty chat 120); only the drawer header, the empty chat and 96 px and up get the shadow. Next to the agent’s visible name the character is decorative; give it a `label` only when it stands alone.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `id` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `type` | `string \| undefined` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `height` | `string \| number \| undefined` | no | — |  |
+| `max` | `string \| number \| undefined` | no | — |  |
+| `min` | `string \| number \| undefined` | no | — |  |
+| `target` | `string \| undefined` | no | — |  |
+| `width` | `string \| number \| undefined` | no | — |  |
+| `href` | `string \| undefined` | no | — |  |
+| `seed` | `string \| number \| undefined` | yes | — |  |
+| `agent` | `"wally" \| "radar" \| "sift" \| "mend" \| "trim" \| "probe"` | no | — |  |
+| `look` | `undefined` | no | — |  |
+| `size` | `complex` | yes | — | Set per place (see PLACES): 40 Overview rows, 48 headers and toasts, 56 beside people, 72 cards and the drawer, 120 the empty chat. |
+| `state` | `"idle" \| "working" \| "needs" \| "failed" \| "off" \| "box" \| "invite" \| "hello" \| "done"` | no | `idle` |  |
+| `has-applications` | `boolean \| undefined` | no | `false` | The agent's template has applications (`applications_scoped`): only then can it show Partial coverage. |
+| `coverage` | `"full" \| "partial" \| undefined` | no | `full` | `partial` keeps the top of the head in grey felt, in every state but Deactivated. |
+| `shadow` | `boolean \| undefined` | no | `false` | The contact shadow: the drawer header, the empty chat and 96 px and up (D1). |
+| `label` | `string \| undefined` | no | — | Set when the character stands alone; leave unset next to the agent's visible name (decorative). |
+| `live` | `boolean \| undefined` | no | `false` | Animated, set per place (40 Overview rows, 72 cards and the drawer, 120 the empty chat). Static under reduced motion or when motion is switched off (`setAgentMotion`). |
+| `handle-ref` | `complex` | no | — | Beats and Cover all: `play('hello' \| 'done')`, `coverAll()`, `cueHover(on)`. |
+| `on-beat-end` | `complex` | no | — | After Hello or Done has played in full; the character shows `state` again. |
+| `cue-ref` | `RefObject<HTMLElement \| null> \| undefined` | no | — | The Set up (or Cover all) control: Inviting glances at it; hover and focus on it are followed. |
+
+## Sub-components
+
+- `WallarmDS.AgentAvatarGroup` — `AgentAvatarGroupProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Radar on duty in the agent drawer header: 72 px with the contact shadow.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Basic
+
+### Cast
+
+The six agents on duty at the team-card size. Each is told apart by its shape, colour and prop.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Cast
+
+### States
+
+Every state frame of one agent. The eyes and a few body cues carry the state; red and crosses never appear.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#States
+
+### Places
+
+Each place in the product with its size and shadow.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Places
+
+### PartialCoverage
+
+Partial coverage: the agent covers only some of its applications, so the top of its head stays in grey felt.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#PartialCoverage
+
+### CustomAgent
+
+Agents without a preset get a deterministic look from their uid, the same one their glyph shows.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#CustomAgent
+
+### Team
+
+A full Agent team page: 16 cards opened with cold caches, the case the first-draw budget is set for.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Team
+
+### LiveStates
+
+Every persistent state, live. On duty plays its idle repertoire; Needs you is the only one that hops.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#LiveStates
+
+### Beats
+
+Hello (from On duty) and Done are one-shots: they play in full, then the character shows its state again.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Beats
+
+### Inviting
+
+Not set up, inviting: one agent on the page invites at a time, glancing at Set up; hover or focus on it and the
+ agent turns to it.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Inviting
+
+### Activation
+
+Activate: from Not set up the ghost lands, the colour fills from the floor and the eyes power on (1.15 s).
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Activation
+
+### Coverage
+
+Cover all applications: the grey crown fills to the top in 480 ms and the agent plays Done. Hover or focus on the
+ button raises the line first.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#Coverage
+
+### ManyOnScreen
+
+Fifteen live agents at 120 px, as on a full team page, with the engine's frame rate and JavaScript per frame.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#ManyOnScreen
+
+### ReducedMotion
+
+With motion off (the user's setting, or reduced motion in the system) every live agent shows its static frame.
+
+Source: AgentAvatar/AgentAvatar.stories.tsx#ReducedMotion
+
+## Story sources
+
+The story files and their local imports are in [stories.md](./stories.md), verbatim.

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let n,r;/**
+ * 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,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,u=(e,t,a,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))p.call(e,r)||r===a||s(e,r,{get:()=>t[r],enumerable:!(n=c(t,r))||n.enumerable});return e},h={},f={$dispatcherGuard:()=>z,$makeReadOnly:()=>A,$reset:()=>C,$structuralCheck:()=>I,c:()=>E,clearRenderCounterRegistry:()=>N,renderCounterRegistry:()=>M,useRenderCounter:()=>O};for(var g in f)s(h,g,{get:f[g],enumerable:!0});e.exports=u(s({},"__esModule",{value:!0}),h);var y=(r=null!=(n=a("C"))?i(m(n)):{},u(n&&n.__esModule?r:s(r,"default",{value:n,enumerable:!0}),n)),{useRef:v,useEffect:w,isValidElement:b}=y,S=null!=(o=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(l=y.__COMPILER_RUNTIME)?void 0:l.c)?y.__COMPILER_RUNTIME.c:function(e){return y.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=_;return t[_]=!0,t},[])},k={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{k[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 x=null;function R(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}k.useMemoCache=e=>{if(null!=x)return x.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function z(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(x=t),t===k)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(k)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(x=null),R(e)}else if(2===e)$.push(t),R(x);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function C(e){for(let t=0;t<e.length;t++)e[t]=_}function A(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function N(){for(let e of M.values())e.forEach(e=>{e.count=0})}function O(e){let t=v(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let a,n={count:0};null==(a=M.get(e))&&(a=new Set,M.set(e,a)),a.add(n),t.current=n}return()=>{var a;let n;null!==t.current&&(a=t.current,null!=(n=M.get(e))&&n.delete(a))}})}var D=new Set;function I(e,t,a,n,r,o){function l(e,t,l,i){let s=`${n}:${o} [${r}] ${a}${l} changed from ${e} to ${t} at depth ${i}`;D.has(s)||(D.add(s),console.error(s))}!function e(t,a,n,r){if(!(r>2)){if(t!==a)if(typeof t!=typeof a)l(`type ${typeof t}`,`type ${typeof a}`,n,r);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(a);if(null===t&&null!==a)l("null",`type ${typeof a}`,n,r);else if(null===a)l(`type ${typeof t}`,"null",n,r);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}`,n,r);else for(let[o,i]of t)a.has(o)?e(i,a.get(o),`${n}.get(${o})`,r+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,r);else l("Map instance","other value",n,r);else if(a instanceof Map)l("other value","Map instance",n,r);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}`,n,r);else for(let e of a)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,r);else l("Set instance","other value",n,r);else if(a instanceof Set)l("other value","Set instance",n,r);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,r);else if(t.length!==a.length)l(`array with length ${t.length}`,`array with length ${a.length}`,n,r);else for(let o=0;o<t.length;o++)e(t[o],a[o],`${n}[${o}]`,r+1);else if(b(t)||b(a))b(t)!==b(a)?l(`type ${b(t)?"React element":"object"}`,`type ${b(a)?"React element":"object"}`,n,r):t.type!==a.type?l(`React element of type ${t.type}`,`React element of type ${a.type}`,n,r):e(t.props,a.props,`[props of ${n}]`,r+1);else{for(let e in a)e in t||l(`object without key ${e}`,`object with key ${e}`,n,r);for(let o in t)o in a?e(t[o],a[o],`${n}.${o}`,r+1):l(`object with key ${o}`,`object without key ${o}`,n,r)}}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"}`,n,r):t!==a&&l(t,a,n,r)}}}(e,t,"",0)}},p(e,t,a){let n=new WeakMap,r=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=n.get(e);a||(a=new WeakMap,n.set(e,a));let r=a.get(t);r||((r=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,r)),o=r}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=r.get(e);a||(a=new Map,r.set(e,a));let n=a.get(t);if(n)return n;let o=e.forwardRef((a,n)=>{let r=e.useRef(null);if(!r.current||r.current.original!==n){let e;r.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let a=n(t);e="function"==typeof a?a:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...a,ref:r.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,n)=>{let r=o(e,t,a??{});return e.createElement(r.type,void 0===n?r.props:{...r.props,key:n})};return{jsx:t,jsxs:(t,a,n)=>{let r=o(e,t,a??{}),{children:l,...i}=r.props;return e.createElement(r.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,a,...n)=>{let r=o(e,t,a??{});return e.createElement(r.type,r.props,...n)},cloneElement:(t,a,...n)=>{let r=e.cloneElement(t,a??void 0,...n),l=r.ref,i=o(e,r.type,{...r.props,ref:l});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}a.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,a){a.r(t);let n=(0,a("p").YJ)(window.React),{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:p,cloneElement:u,createContext:h,createElement:f,createFactory:g,createRef:y,forwardRef:v,isValidElement:w,lazy:b,memo:S,startTransition:_,unstable_act:E,useCallback:k,useContext:x,useDebugValue:R,useDeferredValue:$,useEffect:z,useId:C,useImperativeHandle:A,useInsertionEffect:M,useLayoutEffect:N,useMemo:O,useReducer:D,useRef:I,useState:j,useSyncExternalStore:F,useTransition:T,version:P,use:W}=n;a.d(t,{},{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:p,cloneElement:u,createContext:h,createElement:f,createFactory:g,createRef:y,default:n,forwardRef:v,isValidElement:w,lazy:b,memo:S,startTransition:_,unstable_act:E,use:W,useCallback:k,useContext:x,useDebugValue:R,useDeferredValue:$,useEffect:z,useId:C,useImperativeHandle:A,useInsertionEffect:M,useLayoutEffect:N,useMemo:O,useReducer:D,useRef:I,useState:j,useSyncExternalStore:F,useTransition:T,version:P})}},t={};function a(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,a),o.exports}a.d=(e,t,n)=>{var r=(t,n)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[n]:t[r]})};r(t,"get"),r(n,"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:n,Fragment:r}=(0,a("p").MA)(window.React);var o=a("vD"),l=a("C");let i=["dome","gumdrop","cushion","pebble","capsule","cloud","egg","mochi","kettle","mug","padlock","safe"],s=["round","oval","tall","sleepy"],c=[{id:"wally",name:"Wally",role:"Assistant",templateId:null,shape:"dome",color:"coral",eyes:"oval",prop:"antennae"},{id:"radar",name:"Radar",role:"Attack Anomaly Investigator",templateId:"attack-anomaly-investigation",shape:"gumdrop",color:"cobalt",eyes:"tall",prop:"dish"},{id:"sift",name:"Sift",role:"False Positives Analyzer",templateId:"fp-marking",shape:"cushion",color:"lilac",eyes:"round",prop:"glasses"},{id:"mend",name:"Mend",role:"False Positive Resolver",templateId:"fp-resolver",shape:"pebble",color:"sand",eyes:"sleepy",prop:"seam"},{id:"trim",name:"Trim",role:"Ruleset Optimizer",templateId:"ruleset-optimizer",shape:"capsule",color:"cyan",eyes:"oval",prop:"windkey"},{id:"probe",name:"Probe",role:"Exploitability Verifier",templateId:null,shape:"egg",color:"olive",eyes:"round",prop:"headlamp"}],d=new Set(["cobalt","sky","powder","petrol"]);function m(e,{isWally:t,others:a}){let n=[];for(let r of("coral"!==e.color||t||n.push("coral-not-wally"),("cloud"===e.shape&&d.has(e.color)&&"beanie"===e.prop||"butter"===e.color&&("glasses"===e.prop||"monocle"===e.prop)||("mint"===e.color||"sage"===e.color)&&("pebble"===e.shape||"capsule"===e.shape||"egg"===e.shape))&&n.push("dots-look-alike"),t||"dome"!==e.shape||"antennae"!==e.prop||n.push("reads-as-wally"),a))r.shape===e.shape&&r.color===e.color&&n.push("glyph-twin"),r.shape===e.shape&&("sky"===r.color&&"cyan"===e.color||"cyan"===r.color&&"sky"===e.color)&&n.push("sky-teal-same-shape");return n.map(e=>({code:e,level:"warning"}))}let p=c.map(({shape:e,color:t,eyes:a,prop:n})=>({shape:e,color:t,eyes:a,prop:n})),u=[{id:"coral",name:"coral, Wally only",hex:"#FF4D2E",g:"brand",brand:!0},{id:"cobalt",name:"cobalt",hex:"#3F63DB",g:"cool"},{id:"sky",name:"sky",hex:"#62AEEB",g:"cool"},{id:"cyan",name:"teal",hex:"#2BA6BF",g:"cool"},{id:"lilac",name:"lilac",hex:"#9A7FE0",g:"cool"},{id:"heather",name:"heather",hex:"#9E86A8",g:"cool"},{id:"pink",name:"pink",hex:"#E373A8",g:"warm"},{id:"sand",name:"sand",hex:"#D8B68A",g:"warm"},{id:"toffee",name:"toffee",hex:"#A87A62",g:"warm"},{id:"powder",name:"powder",hex:"#B9D7F0",g:"pastel"},{id:"lavender",name:"lavender",hex:"#D3C6F3",g:"pastel"},{id:"blush",name:"blush",hex:"#F2B8C8",g:"pastel"},{id:"butter",name:"butter",hex:"#F2D57E",g:"pastel"},{id:"mint",name:"mint",hex:"#A8DCC8",g:"pastel"},{id:"sage",name:"sage",hex:"#9BAE8C",g:"pastel"},{id:"petrol",name:"petrol",hex:"#2D6E8E",g:"deep"},{id:"plum",name:"plum",hex:"#7C4485",g:"deep"},{id:"cocoa",name:"cocoa",hex:"#6B4C3F",g:"deep"},{id:"olive",name:"olive",hex:"#7E7C48",g:"deep"},{id:"graphite",name:"graphite",hex:"#4C5463",g:"neutral"},{id:"stone",name:"stone",hex:"#A9A59D",g:"neutral"},{id:"oat",name:"oat",hex:"#E9E0D0",g:"neutral"}].filter(e=>!e.brand).map(e=>e.id);function h(e,t=p,a=["none"]){let n,r=(n=[...e].reduce((e,t)=>31*e+t.charCodeAt(0)|0,7)>>>0,()=>{n|=0;let e=Math.imul((n=n+0x6d2b79f5|0)^n>>>15,1|n);return(((e^=e+Math.imul(e^e>>>7,61|e))^e>>>14)>>>0)/0x100000000}),o=e=>e[Math.floor(r()*e.length)],l=()=>({v:1,shape:o(i),color:o(u),eyes:o(s),prop:a.length?o(a):"none"}),c=l();if(0===m(c,{isWally:!1,others:t}).length)return c;for(let e=1;e<200;e++){let e=l();if(0===m(e,{isWally:!1,others:t}).length)return e}return c}let f={inline:{size:20,renderer:"glyph",live:!1,shadow:!1},inlineXs:{size:16,renderer:"glyph",live:!1,shadow:!1},tableRow:{size:20,renderer:"glyph",live:!1,shadow:!1},overviewRow:{size:40,renderer:"3d",live:!0,shadow:!1},overviewSetup:{size:40,renderer:"3d",live:!1,shadow:!1},header:{size:48,renderer:"3d",live:!1,shadow:!1},peopleRow:{size:56,renderer:"3d",live:!1,shadow:!1},teamCard:{size:72,renderer:"3d",live:!0,shadow:!1},drawerHeader:{size:72,renderer:"3d",live:!0,shadow:!0},emptyChat:{size:120,renderer:"3d",live:!0,shadow:!0}};class g{cap;onEvict;isPinned;map=new Map;constructor(e,t=()=>void 0,a=()=>!1){this.cap=e,this.onEvict=t,this.isPinned=a}has(e){return this.map.has(e)}get(e){let t=this.map.get(e);return void 0!==t&&(this.map.delete(e),this.map.set(e,t)),t}set(e,t){let a=this.map.get(e);if(void 0!==a&&a!==t&&this.onEvict(a),this.map.delete(e),this.map.set(e,t),!(this.map.size<=this.cap))for(let[t,a]of[...this.map]){if(this.map.size<=this.cap)break;t===e||this.isPinned(t)||(this.map.delete(t),this.onEvict(a))}}}let y=Symbol.for("wallarm.agent-characters"),v=new Set,w=e=>{for(let t of v)t(e)},b=()=>{let t,a,n,r,i,s,c,d,m=(0,o.c)(16);m[0]===Symbol.for("react.memo_cache_sentinel")?(t={fps:0,js:0,max:0},m[0]=t):t=m[0];let[p,u]=(0,l.useState)(t);m[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{var e;let t,a,n,r,o,l,i,s,c,d,m,p,h,f,b,S,_,E,k,x,R,$,z,C,A={n:0,sum:0,max:0},M=(e=e=>{A.n=A.n+1,A.sum=A.sum+e,A.max=Math.max(A.max,e)},t=globalThis,t[y]??=(n=(a="u">typeof document)&&"function"==typeof window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)"):null,r=new Set,o=()=>{for(let e of[...r])e()},l=0,i=0,s=0,c=!1,d=0,m=new Map,p=new WeakMap,h=()=>{c=!1,i=0,d&&"function"==typeof cancelAnimationFrame&&cancelAnimationFrame(d),d=0},f=null,b=()=>{z.rectEpoch++},S=()=>{i=0,s=0,document.hidden||z.kick()},_={capture:!0,passive:!0},E=e=>{z.live.delete(e),f?.unobserve(e.svg),z.inv.owner===e&&(z.inv.owner=null),!z.live.size&&(h(),a&&(f?.disconnect(),f=null,window.removeEventListener("scroll",b,_),window.removeEventListener("resize",b),document.removeEventListener("visibilitychange",S)))},k=e=>{z.motion.reduced=e.matches,z.motionOn()?z.kick():h(),o()},z={protocol:1,live:new Set,act:{last:0,cap:2},inv:{last:-1e9,owner:null},rectEpoch:0,motion:{reduced:!!n?.matches,enabled:!0},queue:(x=[],R=!1,$=()=>{let e=performance.now();for(;x.length&&performance.now()-e<14;){let e=x.shift();if(e.alive())try{e.run()}catch(e){console.error(e)}}x.length?setTimeout($,16):R=!1},{enqueue(e,t=!1){t?x.unshift(e):x.push(e),R||(R=!0,setTimeout($,0))}}),caches:{hc:new g(64),bc:new g(256,e=>URL.revokeObjectURL(e.url),e=>m.has(e)),retain:m,inflight:new Map,reg:new Map,measure:null},worker:null,motionOn:()=>(!r.size&&n&&(z.motion.reduced=n.matches),z.motion.enabled&&!z.motion.reduced),setMotionEnabled(e){z.motion.enabled!==e&&(z.motion.enabled=e,e?z.kick():h(),o())},subscribe:e=>(!r.size&&n&&(z.motion.reduced=n.matches,n.addEventListener?.("change",k)),r.add(e),()=>{r.delete(e)&&!r.size&&n?.removeEventListener?.("change",k)}),register(e){z.live.has(e)||(!z.live.size&&a&&("u">typeof IntersectionObserver&&(f=new IntersectionObserver(e=>{for(let t of e){let e=p.get(t.target);e&&(e.visible=t.isIntersecting,e.rectDirty=!0,t.isIntersecting&&z.kick())}},{rootMargin:"100px"})),window.addEventListener("scroll",b,_),window.addEventListener("resize",b,{passive:!0}),document.addEventListener("visibilitychange",S)),z.live.add(e),p.set(e.svg,e),f?.observe(e.svg),z.kick())},unregister(e){z.live.has(e)?E(e):z.inv.owner===e&&(z.inv.owner=null)},kick(){!c&&z.motionOn()&&z.live.size&&"function"==typeof requestAnimationFrame&&(c=!0,i=0,d=requestAnimationFrame(z.frame))},frame(e){if(d=0,!z.motionOn())return h();let t=z.onFrame?performance.now():0,a=Math.min(.05,i?(e-i)/1e3:.016);i=e;let n=e-s>=40;n&&(s=e);let r=!1;for(let t of z.live){if(!t.svg.isConnected){E(t);continue}t.visible&&(r=!0,document.hidden||t.tick(e,a,n))}z.onFrame?.(performance.now()-t),r?d=requestAnimationFrame(z.frame):h()},nextId:()=>`k${(++l).toString(36)}`}),C=t[y],v.add(e),C.onFrame=w,()=>{v.delete(e),v.size||C.onFrame!==w||(C.onFrame=void 0)}),N=setInterval(()=>{u({fps:A.n,js:A.n?A.sum/A.n:0,max:A.max}),A.n=0,A.sum=0,A.max=0},1e3);return()=>{clearInterval(N),M()}},n=[],m[1]=a,m[2]=n):(a=m[1],n=m[2]),(0,l.useEffect)(a,n);let h=p.fps;m[3]!==p.js?(r=p.js.toFixed(3),m[3]=p.js,m[4]=r):r=m[4],m[5]!==p.max?(i=p.max.toFixed(3),m[5]=p.max,m[6]=i):i=m[6];let f=p.fps;m[7]!==p.js?(s=p.js.toFixed(2),m[7]=p.js,m[8]=s):s=m[8],m[9]!==p.max?(c=p.max.toFixed(2),m[9]=p.max,m[10]=c):c=m[10];let b=`${f} fps \xb7 ${s} ms JS per frame (max ${c})`;return m[11]!==p.fps||m[12]!==r||m[13]!==i||m[14]!==b?(d=e("span",{className:"sb-annotation","data-testid":"agent-avatar-meter","data-fps":h,"data-js":r,"data-max":i,children:b}),m[11]=p.fps,m[12]=r,m[13]=i,m[14]=b,m[15]=d):d=m[15],d},S=window.WallarmDS.Button,_=window.WallarmDS.HStack,E=window.WallarmDS.VStack,k=window.WallarmDS.Text,x=window.WallarmDS.AgentAvatar,R=window.WallarmDS.AgentAvatarGroup,$=window.WallarmDS.setAgentMotion,z=window.WallarmDS.useAgentMotion,C=["idle","working","needs","failed","off","box","invite","hello","done"],A={idle:"On duty",working:"Working",needs:"Needs you",failed:"Failed",off:"Deactivated",box:"Not set up",invite:"Inviting",hello:"Hello",done:"Done"},M={title:"AI/AgentAvatar",component:x,parameters:{layout:"centered",docs:{description:{component:"The character of an AI agent from 40 px up: a soft felt body baked in the browser from its silhouette, a glass visor and two light eyes that carry its state, and the prop that tells its job. Below 40 px use `AgentGlyph`. The body is baked once per outline, colour and size, off the main thread, and cached; until a layer is ready its flat fill shows. With `live` the character moves as the reference does: it blinks, glances, breathes and, on duty, now and then plays with its prop or looks at its neighbours (at most two on the page at once). Hello and Done are beats played through `handleRef`; they play in full, then the character shows `state` again. Reduced motion, or `setAgentMotion(false)` for the user’s setting, shows every state’s static frame. Size, liveness and the contact shadow are set by the place the character sits in (Overview rows 40 px, headers and toasts 48, beside people 56, the team card and the drawer 72, the empty chat 120); only the drawer header, the empty chat and 96 px and up get the shadow. Next to the agent’s visible name the character is decorative; give it a `label` only when it stands alone."}}},argTypes:{agent:{control:"select",options:c.map(e=>e.id),description:"Preset character of a Wallarm agent."},size:{control:"select",options:[40,48,56,72,120],description:"Set by the place the character sits in."},state:{control:"select",options:C,description:"State frame."},shadow:{control:"boolean",description:"Contact shadow: drawer header, empty chat, 96 px and up."},hasApplications:{control:"boolean",description:"The agent’s template has applications."},coverage:{control:"inline-radio",options:["full","partial"],description:"`partial` keeps the top of the head in grey felt."},label:{control:"text",description:"Set only when the character stands alone without its name."},seed:{control:"text",description:"The agent’s uid."},live:{control:"boolean",description:"Animated; set by the place the character sits in."}}},N=t=>{let a,n=(0,o.c)(2);return n[0]!==t?(a=e(x,{"data-testid":"agent-avatar",...t}),n[0]=t,n[1]=a):a=n[1],a};N.args={agent:"radar",seed:"radar",size:72,state:"idle",shadow:!0};let O=["3f2a9c1e-7b4d-4e8a-9c21-5d6e7f8a9b0c","8c1d2e3f-4a5b-4c6d-8e7f-9a0b1c2d3e4f","b7e6d5c4-b3a2-4918-8776-655443322110"],D=[...c.map(e=>({id:e.id,look:{v:1,shape:e.shape,color:e.color,eyes:e.eyes,prop:e.prop}})),...Array.from({length:10},(e,t)=>({id:`custom-${t}`,look:h(`team-agent-${t}`)}))],I=["idle","working","needs","failed","off","box","invite"];function j(a){return t(E,{gap:8,align:"center",children:[e(x,{"data-testid":`agent-avatar-${a.id}`,agent:a.id,seed:a.id,size:72}),e(k,{size:"sm",children:a.name})]},a.id)}function F(a){return t(E,{gap:8,align:"center",children:[e(x,{"data-testid":`agent-avatar-${a}`,agent:"sift",seed:"sift",size:72,state:a}),e(k,{size:"sm",children:A[a]})]},a)}function T(e){let[,t]=e;return"3d"===t.renderer}function P(a){let[n,r]=a;return t(E,{gap:8,align:"center",children:[e(x,{"data-testid":`agent-avatar-place-${n}`,agent:"trim",seed:"trim",size:r.size,shadow:r.shadow}),e("span",{className:"sb-annotation",children:n})]},n)}function W(e){return"radar"===e.id||"sift"===e.id||"mend"===e.id}function L(t){return e(x,{"data-testid":`agent-avatar-partial-${t.id}`,agent:t.id,seed:t.id,size:72,hasApplications:!0,coverage:"partial"},t.id)}function B(t){return e(x,{"data-testid":`agent-avatar-custom-${t.slice(0,8)}`,look:h(t),seed:t,size:72},t)}function U(t){return e(x,{"data-testid":`agent-avatar-team-${t.id}`,look:t.look,seed:t.id,size:72},t.id)}function H(a){return t(E,{gap:8,align:"center",children:[e(x,{"data-testid":`agent-avatar-live-${a}`,agent:"radar",seed:`radar-${a}`,size:72,state:a,live:!0}),e(k,{size:"sm",children:A[a]})]},a)}function V(t){return e(x,{"data-testid":`agent-avatar-many-${t.id}`,look:t.look,seed:t.id,size:120,live:!0},t.id)}function q(){return $(!0)}function Y(t){return e(x,{"data-testid":`agent-avatar-motion-${t}`,agent:"trim",seed:`trim-${t}`,size:72,state:t,live:!0},t)}let G=[{name:"Basic",story:N,meta:M},{name:"Cast",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:24,align:"end",children:c.map(j)}),a[0]=t):t=a[0],t},meta:M},{name:"States",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:24,align:"end",wrap:"wrap",children:C.map(F)}),a[0]=t):t=a[0],t},meta:M},{name:"Places",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:32,align:"end",children:Object.entries(f).filter(T).map(P)}),a[0]=t):t=a[0],t},meta:M},{name:"PartialCoverage",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:24,children:c.filter(W).map(L)}),a[0]=t):t=a[0],t},meta:M},{name:"CustomAgent",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:24,children:O.map(B)}),a[0]=t):t=a[0],t},meta:M},{name:"Team",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"grid grid-cols-4 gap-24",children:D.map(U)}),a[0]=t):t=a[0],t},meta:M},{name:"LiveStates",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{gap:24,align:"end",wrap:"wrap",children:I.map(H)}),a[0]=t):t=a[0],t},meta:M},{name:"Beats",story:()=>{let a,n,r,i,s,c,d=(0,o.c)(7),m=(0,l.useRef)(null),[p,u]=(0,l.useState)("");d[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>m.current?.play("hello"),d[0]=a):a=d[0];let h=a;d[1]===Symbol.for("react.memo_cache_sentinel")?(n=()=>m.current?.play("done"),d[1]=n):n=d[1];let f=n;d[2]===Symbol.for("react.memo_cache_sentinel")?(r=e=>u(e),d[2]=r):r=d[2];let g=r;d[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(x,{"data-testid":"agent-avatar-beats",agent:"wally",seed:"wally",size:120,shadow:!0,live:!0,handleRef:m,onBeatEnd:g}),d[3]=i):i=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(_,{gap:8,children:[e(S,{"data-testid":"agent-avatar-beats-hello",variant:"outline",size:"small",onClick:h,children:"Hello"}),e(S,{"data-testid":"agent-avatar-beats-done",variant:"outline",size:"small",onClick:f,children:"Done"})]}),d[4]=s):s=d[4];let y=p?`${p} ended`:" ";return d[5]!==y?(c=t(E,{gap:16,align:"center",children:[i,s,e("span",{className:"sb-annotation","data-testid":"agent-avatar-beats-ended",children:y})]}),d[5]=y,d[6]=c):c=d[6],c},meta:M},{name:"Inviting",story:()=>{let a,n=(0,o.c)(1),r=(0,l.useRef)(null);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(E,{gap:24,align:"center",children:[t(_,{gap:24,children:[e(x,{"data-testid":"agent-avatar-invite-mend",agent:"mend",seed:"mend",size:72,state:"invite",live:!0,cueRef:r}),e(x,{"data-testid":"agent-avatar-invite-sift",agent:"sift",seed:"sift",size:72,state:"invite",live:!0,cueRef:r})]}),e(S,{ref:r,"data-testid":"agent-avatar-invite-setup",size:"small",children:"Set up"})]}),n[0]=a):a=n[0],a},meta:M},{name:"Activation",story:()=>{let a,n,r,i,s=(0,o.c)(10),[c,d]=(0,l.useState)("box");s[0]!==c?(a=()=>d("box"===c?"idle":"box"),s[0]=c,s[1]=a):a=s[1];let m=a;s[2]!==c?(n=e(x,{"data-testid":"agent-avatar-activation",agent:"probe",seed:"probe",size:120,shadow:!0,live:!0,state:c}),s[2]=c,s[3]=n):n=s[3];let p="box"===c?"Activate":"Reset";return s[4]!==p||s[5]!==m?(r=e(S,{"data-testid":"agent-avatar-activation-toggle",size:"small",onClick:m,children:p}),s[4]=p,s[5]=m,s[6]=r):r=s[6],s[7]!==n||s[8]!==r?(i=t(E,{gap:16,align:"center",children:[n,r]}),s[7]=n,s[8]=r,s[9]=i):i=s[9],i},meta:M},{name:"Coverage",story:()=>{let a,n,r,i,s,c,d=(0,o.c)(8),m=(0,l.useRef)(null),p=(0,l.useRef)(null),[u,h]=(0,l.useState)("partial");d[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>m.current?.coverAll(),d[0]=a):a=d[0];let f=a;d[1]===Symbol.for("react.memo_cache_sentinel")?(n=()=>h("full"),d[1]=n):n=d[1];let g=n;d[2]===Symbol.for("react.memo_cache_sentinel")?(r=()=>h("partial"),d[2]=r):r=d[2];let y=r;return d[3]!==u?(i=e(x,{"data-testid":"agent-avatar-coverage",agent:"radar",seed:"radar",size:120,shadow:!0,live:!0,hasApplications:!0,coverage:u,handleRef:m,cueRef:p,onBeatEnd:g}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(_,{gap:8,children:[e(S,{ref:p,"data-testid":"agent-avatar-coverage-all",size:"small",onClick:f,children:"Cover all applications"}),e(S,{"data-testid":"agent-avatar-coverage-reset",variant:"outline",size:"small",onClick:y,children:"Reset"})]}),d[5]=s):s=d[5],d[6]!==i?(c=t(E,{gap:16,align:"center",children:[i,s]}),d[6]=i,d[7]=c):c=d[7],c},meta:M},{name:"ManyOnScreen",story:()=>{let a,n,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(b,{}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(E,{gap:16,children:[a,e(R,{children:e("div",{className:"grid grid-cols-5 gap-16",children:D.slice(0,15).map(V)})})]}),r[1]=n):n=r[1],n},meta:M},{name:"ReducedMotion",story:()=>{let a,n,r,i,s,c,d,m=(0,o.c)(14),p=z(),[u,h]=(0,l.useState)(!1);m[0]!==u?(a=()=>($(!u),q),n=[u],m[0]=u,m[1]=a,m[2]=n):(a=m[1],n=m[2]),(0,l.useEffect)(a,n),m[3]!==u?(r=()=>h(!u),m[3]=u,m[4]=r):r=m[4];let f=r;m[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{gap:24,children:I.slice(0,4).map(Y)}),m[5]=i):i=m[5];let g=u?"Turn motion on":"Turn motion off";m[6]!==g||m[7]!==f?(s=e(S,{"data-testid":"agent-avatar-motion-toggle",variant:"outline",size:"small",onClick:f,children:g}),m[6]=g,m[7]=f,m[8]=s):s=m[8];let y=p?"Motion on":"Motion off (static frames)";return m[9]!==y?(c=e("span",{className:"sb-annotation",children:y}),m[9]=y,m[10]=c):c=m[10],m[11]!==s||m[12]!==c?(d=t(E,{gap:16,align:"center",children:[i,s,c]}),m[11]=s,m[12]=c,m[13]=d):d=m[13],d},meta:M}];function J({entry:e}){let{story:t,meta:a}=e,n={...a.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,o=()=>l.default.createElement(r,n),i={args:n,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,G.map((e,t)=>l.default.createElement(J,{key:t,entry:e})))),t}}})();