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

package/dist/project/components/AgentGlyph/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/AgentGlyph/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,p=Object.getOwnPropertyNames,d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,m=(e,t,a,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of p(t))u.call(e,r)||r===a||s(e,r,{get:()=>t[r],enumerable:!(n=c(t,r))||n.enumerable});return e},f={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>A,$reset:()=>N,$structuralCheck:()=>I,c:()=>_,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>D,useRenderCounter:()=>O};for(var y in h)s(f,y,{get:h[y],enumerable:!0});e.exports=m(s({},"__esModule",{value:!0}),f);var g=(r=null!=(n=a("C"))?i(d(n)):{},m(n&&n.__esModule?r:s(r,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:w,isValidElement:v}=g,x=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,E=Symbol.for("react.memo_cache_sentinel"),_="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 a=0;a<e;a++)t[a]=E;return t[E]=!0,t},[])},$={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{$[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var R=null;function S(e){return x.ReactCurrentDispatcher.current=e,x.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function C(e){let t=x.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(R=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.");S($)}else if(1===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&(R=null),S(e)}else if(2===e)k.push(t),S(R);else if(3===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");S(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function N(e){for(let t=0;t<e.length;t++)e[t]=E}function A(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function M(){for(let e of D.values())e.forEach(e=>{e.count=0})}function O(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let a,n={count:0};null==(a=D.get(e))&&(a=new Set,D.set(e,a)),a.add(n),t.current=n}return()=>{var a;let n;null!==t.current&&(a=t.current,null!=(n=D.get(e))&&n.delete(a))}})}var z=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}`;z.has(s)||(z.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(v(t)||v(a))v(t)!==v(a)?l(`type ${v(t)?"React element":"object"}`,`type ${v(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:p,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:g,forwardRef:b,isValidElement:w,lazy:v,memo:x,startTransition:E,unstable_act:_,useCallback:$,useContext:R,useDebugValue:S,useDeferredValue:k,useEffect:C,useId:N,useImperativeHandle:A,useInsertionEffect:D,useLayoutEffect:M,useMemo:O,useReducer:z,useRef:I,useState:T,useSyncExternalStore:j,useTransition:P,version:F,use:W}=n;a.d(t,{},{Children:r,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:p,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:b,isValidElement:w,lazy:v,memo:x,startTransition:E,unstable_act:_,use:W,useCallback:$,useContext:R,useDebugValue:S,useDeferredValue:k,useEffect:C,useId:N,useImperativeHandle:A,useInsertionEffect:D,useLayoutEffect:M,useMemo:O,useReducer:z,useRef:I,useState:T,useSyncExternalStore:j,useTransition:P,version:F})}},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");let l=["dome","gumdrop","cushion","pebble","capsule","cloud","egg","mochi","kettle","mug","padlock","safe"],i=["round","oval","tall","sleepy"],s=[{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"}],c=new Set(["cobalt","sky","powder","petrol"]);function p(e,{isWally:t,others:a}){let n=[];for(let r of("coral"!==e.color||t||n.push("coral-not-wally"),("cloud"===e.shape&&c.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 d=s.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),m=window.WallarmDS.HStack,f=window.WallarmDS.VStack,h=window.WallarmDS.Text,y=window.WallarmDS.AgentGlyph,g=["idle","hello","working","needs","done","failed","off","box","invite"],b={idle:"On duty",hello:"Hello",working:"Working",needs:"Needs you",done:"Done",failed:"Failed",off:"Deactivated",box:"Not set up",invite:"Inviting"},w={title:"AI/AgentGlyph",component:y,parameters:{layout:"centered",docs:{description:{component:'The character of an AI agent as a flat 16–32 px glyph: the same silhouette, colour, visor and eyes as the 3D `AgentAvatar`, drawn flat so it stays sharp and cheap in text, chips and table rows. It is static and loads no canvas, bake or animation code. A glyph is always decorative: put it next to the agent’s visible name, which is what screen readers announce. Use 20 px beside `text-sm` or larger and in table rows, 16 px beside `text-xs`; from 40 px up use `AgentAvatar`. With `align="optical"` (the default) the glyph lifts its body onto the text line, so every shape reads as centred next to the name without moving the layout; use `align="box"` in ladders and stacks. Only the top-of-head props are drawn at this size.'}}},argTypes:{agent:{control:"select",options:s.map(e=>e.id),description:"Preset character of a Wallarm agent."},size:{control:"select",options:[16,20,24,32],description:"16 beside text-xs, 20 beside text-sm or larger and in table rows."},state:{control:"select",options:g,description:"State frame. Hello and Done show their arcs; a glyph never animates."},align:{control:"inline-radio",options:["optical","box"],description:"`optical` lifts the body onto the text line; `box` keeps the box."},hasApplications:{control:"boolean",description:"The agent’s template has applications."},coverage:{control:"inline-radio",options:["full","partial"],description:"`partial` draws the grey crown of Partial coverage, on duty only."}}},v=t=>{let a,n=(0,o.c)(2);return n[0]!==t?(a=e(y,{"data-testid":"agent-glyph",...t}),n[0]=t,n[1]=a):a=n[1],a};v.args={agent:"radar",size:20,state:"idle"};let x=["3f2a9c1e-7b4d-4e8a-9c21-5d6e7f8a9b0c","8c1d2e3f-4a5b-4c6d-8e7f-9a0b1c2d3e4f","b7e6d5c4-b3a2-4918-8776-655443322110"];function E(t){return e("span",{className:"sb-annotation w-64",children:t.name.toLowerCase()},t.id)}function _(a){return t(m,{gap:16,align:"center",children:[e("span",{className:"w-120",children:e(h,{size:"sm",children:b[a]})}),s.map(t=>e("span",{className:"w-64",children:e(y,{"data-testid":`agent-glyph-${t.id}-${a}`,agent:t.id,size:20,state:a,align:"box"})},t.id))]},a)}function $(a){return t(f,{gap:8,align:"center",children:[e("span",{className:"sb-annotation",children:a}),e(y,{"data-testid":`agent-glyph-${a}`,agent:"wally",size:a,align:"box"})]},a)}function R(a){return t(f,{gap:8,children:[e("span",{className:"sb-annotation",children:a}),s.map(n=>t(m,{gap:8,align:"center",children:[e(y,{"data-testid":`agent-glyph-inline-${a}-${n.id}`,agent:n.id,size:20,align:a}),e(h,{size:"sm",children:n.name}),e(y,{"data-testid":`agent-glyph-inline-xs-${a}-${n.id}`,agent:n.id,size:16,align:a}),e(h,{size:"xs",color:"secondary",children:n.role})]},n.id))]},a)}function S(e){return"radar"===e.id||"sift"===e.id||"mend"===e.id}function k(a){return t(f,{gap:8,align:"center",children:[e(y,{"data-testid":`agent-glyph-partial-${a.id}`,agent:a.id,size:32,hasApplications:!0,coverage:"partial",align:"box"}),e(h,{size:"sm",children:a.name})]},a.id)}function C(a){return t(f,{gap:8,align:"center",children:[e(y,{"data-testid":`agent-glyph-custom-${a.slice(0,8)}`,look:function(e,t=d,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)],s=()=>({v:1,shape:o(l),color:o(u),eyes:o(i),prop:a.length?o(a):"none"}),c=s();if(0===p(c,{isWally:!1,others:t}).length)return c;for(let e=1;e<200;e++){let e=s();if(0===p(e,{isWally:!1,others:t}).length)return e}return c}(a),size:32,align:"box"}),e(h,{size:"xs",color:"secondary",children:a.slice(0,8)})]},a)}var N=a("C");let A=[{name:"Basic",story:v,meta:w},{name:"Cast",story:()=>{let a,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(f,{gap:12,children:[t(m,{gap:16,children:[e("span",{className:"sb-annotation w-120",children:"state"}),s.map(E)]}),g.map(_)]}),n[0]=a):a=n[0],a},meta:w},{name:"Sizes",story:()=>{let t,a,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=[16,20,24,32],n[0]=t):t=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(m,{gap:24,align:"end",children:t.map($)}),n[1]=a):a=n[1],a},meta:w},{name:"InlineWithText",story:()=>{let t,a,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=["optical","box"],n[0]=t):t=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(m,{gap:48,align:"start",children:t.map(R)}),n[1]=a):a=n[1],a},meta:w},{name:"PartialCoverage",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(m,{gap:24,children:s.filter(S).map(k)}),a[0]=t):t=a[0],t},meta:w},{name:"CustomAgent",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(m,{gap:24,children:x.map(C)}),a[0]=t):t=a[0],t},meta:w}];function D({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=()=>N.default.createElement(r,n),l={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,l)}return N.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},N.default.createElement("h2",{className:"text-sm mb-12"},e.name),N.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(N.default.createElement(window.WallarmDS.Root,null,A.map((e,t)=>N.default.createElement(D,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,269 @@
+The builder entry: everything a product needs to let admins pick an agent’s look. It holds the kit with display names (`AGENT_SHAPES`, `AGENT_COLORS`, `AGENT_EYES`, `AGENT_PROPS`), `lookIssues` for the combinations to avoid and `defaultLook` for a first look. `enableAgentLookLibrary()` loads the full prop library. Any app that renders stored custom looks calls it once at start-up — the cards, rows and tables that show them, not only the picker. Without it `AgentAvatar` and `AgentGlyph` draw only the six presets’ props, and any other prop is left out with a warning in development. Mounted glyphs pick it up on their next render; a mounted 3D character keeps what it drew until its look changes or it remounts, so call it before the first render. It ships no picker UI; the stories build one from DS `Select`s. `lookIssues` only warns, never blocks; coral is Wally’s and is not offered.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| — | See emitted declarations in `components/index.d.ts`. | | | |
+
+## Stories
+
+### AnyLook
+
+Any look from the kit, as the 72 px live character of the team card and the 24 and 20 px glyphs, with the
+`lookIssues` warnings. Random draws a look with no issue from the whole prop library.
+
+Source: AgentLookBuilder/AgentLookBuilder.stories.tsx#AnyLook
+
+### Library
+
+Every shape in the first colour of each palette group (coral, Wally's, aside), static, with no prop; the last
+column wears the magnifier, a library prop that shows only on the 3D character.
+
+Source: AgentLookBuilder/AgentLookBuilder.stories.tsx#Library
+
+## Story sources
+
+### AgentLookBuilder/AgentLookBuilder.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import { createListCollection } from '@ark-ui/react/collection';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { AgentAvatar } from '../AgentAvatar';
+import { AgentGlyph } from '../AgentGlyph';
+import { Button } from '../Button';
+import {
+  Select,
+  SelectButton,
+  SelectContent,
+  SelectOption,
+  SelectOptionIndicator,
+  SelectOptionText,
+  SelectPositioner,
+} from '../Select';
+import { HStack, VStack } from '../Stack';
+import { Text } from '../Text';
+import {
+  AGENT_COLORS,
+  AGENT_EYES,
+  AGENT_PROPS,
+  AGENT_SHAPES,
+  type AgentLook,
+  defaultLook,
+  enableAgentLookLibrary,
+  type LookIssueCode,
+  lookIssues,
+} from './index';
+
+const DESCRIPTION = [
+  'The builder entry: everything a product needs to let admins pick an agent’s look. It holds the kit with display names (`AGENT_SHAPES`, `AGENT_COLORS`, `AGENT_EYES`, `AGENT_PROPS`), `lookIssues` for the combinations to avoid and `defaultLook` for a first look.',
+  '`enableAgentLookLibrary()` loads the full prop library. Any app that renders stored custom looks calls it once at start-up — the cards, rows and tables that show them, not only the picker. Without it `AgentAvatar` and `AgentGlyph` draw only the six presets’ props, and any other prop is left out with a warning in development. Mounted glyphs pick it up on their next render; a mounted 3D character keeps what it drew until its look changes or it remounts, so call it before the first render.',
+  'It ships no picker UI; the stories build one from DS `Select`s. `lookIssues` only warns, never blocks; coral is Wally’s and is not offered.',
+].join(' ');
+
+const ISSUE_TEXT: Record<LookIssueCode, string> = {
+  'coral-not-wally': 'Coral belongs to Wally.',
+  'dots-look-alike': 'Looks like a character from OpenAI Dots.',
+  'reads-as-wally': 'A dome with antennae reads as a second Wally.',
+  'glyph-twin':
+    'Another agent has the same shape and colour: as glyphs they are hard to tell apart.',
+  'sky-teal-same-shape': 'Sky and teal on the same shape are hard to tell apart.',
+};
+
+const shapes = createListCollection({
+  items: AGENT_SHAPES.map(s => ({ value: s.id, label: s.name })),
+});
+// Coral is Wally's (D22): the picker never offers it.
+const colors = createListCollection({
+  items: AGENT_COLORS.filter(c => !c.brand).map(c => ({ value: c.id, label: c.name })),
+});
+const eyes = createListCollection({
+  items: AGENT_EYES.map(e => ({ value: e.id, label: e.name })),
+});
+const props = createListCollection({
+  items: AGENT_PROPS.map(p => ({ value: p.id, label: p.glyph ? p.name : `${p.name} (3D only)` })),
+});
+const PROP_POOL = AGENT_PROPS.filter(p => p.id !== 'none').map(p => p.id);
+const FIRST_LOOK: AgentLook = {
+  v: 1,
+  shape: 'mochi',
+  color: 'lavender',
+  eyes: 'oval',
+  prop: 'sprout',
+};
+
+const meta = {
+  title: 'AI/AgentLookBuilder',
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+/**
+ * Any look from the kit, as the 72 px live character of the team card and the 24 and 20 px glyphs, with the
+ * `lookIssues` warnings. Random draws a look with no issue from the whole prop library.
+ */
+export const AnyLook: StoryFn = () => {
+  // In an app: once at start-up, before any stored custom look renders (here, before this story's first render).
+  enableAgentLookLibrary();
+  const [look, setLook] = useState<AgentLook>(FIRST_LOOK);
+  const [draws, setDraws] = useState(0);
+  const issues = lookIssues(look, { isWally: false, others: [] });
+
+  const handleShape = ({ value }: { value: string[] }) =>
+    setLook({ ...look, shape: value[0] as AgentLook['shape'] });
+  const handleColor = ({ value }: { value: string[] }) =>
+    setLook({ ...look, color: value[0] as AgentLook['color'] });
+  const handleEyes = ({ value }: { value: string[] }) =>
+    setLook({ ...look, eyes: value[0] as AgentLook['eyes'] });
+  const handleProp = ({ value }: { value: string[] }) =>
+    setLook({ ...look, prop: value[0] as AgentLook['prop'] });
+  const handleRandom = () => {
+    setLook(defaultLook(`random-${draws}`, [], PROP_POOL));
+    setDraws(draws + 1);
+  };
+
+  return (
+    <VStack gap={24} align='start' data-testid='any-look'>
+      <HStack gap={24} align='end'>
+        <AgentAvatar look={look} size={72} seed='builder' live data-testid='any-look--avatar' />
+        <AgentGlyph look={look} size={24} data-testid='any-look--glyph-24' />
+        <AgentGlyph look={look} size={20} data-testid='any-look--glyph-20' />
+      </HStack>
+      <HStack gap={12} align='start'>
+        <Select
+          collection={shapes}
+          value={[look.shape]}
+          onValueChange={handleShape}
+          data-testid='any-look--shape'
+        >
+          <SelectButton aria-label='Shape' />
+          <SelectPositioner>
+            <SelectContent>
+              {shapes.items.map(item => (
+                <SelectOption key={item.value} item={item}>
+                  <SelectOptionText>{item.label}</SelectOptionText>
+                  <SelectOptionIndicator />
+                </SelectOption>
+              ))}
+            </SelectContent>
+          </SelectPositioner>
+        </Select>
+        <Select
+          collection={colors}
+          value={[look.color]}
+          onValueChange={handleColor}
+          data-testid='any-look--color'
+        >
+          <SelectButton aria-label='Colour' />
+          <SelectPositioner>
+            <SelectContent>
+              {colors.items.map(item => (
+                <SelectOption key={item.value} item={item}>
+                  <SelectOptionText>{item.label}</SelectOptionText>
+                  <SelectOptionIndicator />
+                </SelectOption>
+              ))}
+            </SelectContent>
+          </SelectPositioner>
+        </Select>
+        <Select
+          collection={eyes}
+          value={[look.eyes]}
+          onValueChange={handleEyes}
+          data-testid='any-look--eyes'
+        >
+          <SelectButton aria-label='Eyes' />
+          <SelectPositioner>
+            <SelectContent>
+              {eyes.items.map(item => (
+                <SelectOption key={item.value} item={item}>
+                  <SelectOptionText>{item.label}</SelectOptionText>
+                  <SelectOptionIndicator />
+                </SelectOption>
+              ))}
+            </SelectContent>
+          </SelectPositioner>
+        </Select>
+        <Select
+          collection={props}
+          value={[look.prop]}
+          onValueChange={handleProp}
+          data-testid='any-look--prop'
+        >
+          <SelectButton aria-label='Prop' />
+          <SelectPositioner>
+            <SelectContent>
+              {props.items.map(item => (
+                <SelectOption key={item.value} item={item}>
+                  <SelectOptionText>{item.label}</SelectOptionText>
+                  <SelectOptionIndicator />
+                </SelectOption>
+              ))}
+            </SelectContent>
+          </SelectPositioner>
+        </Select>
+        <Button
+          variant='outline'
+          color='neutral'
+          onClick={handleRandom}
+          data-testid='any-look--random'
+        >
+          Random
+        </Button>
+      </HStack>
+      <VStack gap={4} align='start' data-testid='any-look--issues'>
+        {issues.map(issue => (
+          <Text key={issue.code} size='sm' color='danger'>
+            {ISSUE_TEXT[issue.code]}
+          </Text>
+        ))}
+      </VStack>
+    </VStack>
+  );
+};
+
+/**
+ * Every shape in the first colour of each palette group (coral, Wally's, aside), static, with no prop; the last
+ * column wears the magnifier, a library prop that shows only on the 3D character.
+ */
+export const Library: StoryFn = () => {
+  // In an app: once at start-up, before any stored custom look renders.
+  enableAgentLookLibrary();
+  const groups = [...new Set(AGENT_COLORS.filter(c => !c.brand).map(c => c.group))];
+  const firstColors = groups.map(g => AGENT_COLORS.find(c => c.group === g)?.id ?? 'cobalt');
+
+  return (
+    <VStack gap={12} align='start' data-testid='library'>
+      {AGENT_SHAPES.map(s => (
+        <HStack key={s.id} gap={12} align='center'>
+          <div className='w-80'>
+            <Text size='sm'>{s.name}</Text>
+          </div>
+          {firstColors.map(color => (
+            <AgentAvatar
+              key={color}
+              look={{ v: 1, shape: s.id, color, eyes: 'oval', prop: 'none' }}
+              size={48}
+              seed={`${s.id}-${color}`}
+              data-testid={`library--${s.id}-${color}`}
+            />
+          ))}
+          <AgentAvatar
+            look={{ v: 1, shape: s.id, color: 'sky', eyes: 'oval', prop: 'magnifier' }}
+            size={48}
+            seed={`${s.id}-magnifier`}
+            data-testid={`library--${s.id}-magnifier`}
+          />
+        </HStack>
+      ))}
+    </VStack>
+  );
+};
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let i,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 l,a,o=Object.create,s=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,i)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of c(t))f.call(e,n)||n===r||s(e,n,{get:()=>t[n],enumerable:!(i=u(t,n))||i.enumerable});return e},m={},d={$dispatcherGuard:()=>$,$makeReadOnly:()=>D,$reset:()=>x,$structuralCheck:()=>V,c:()=>E,clearRenderCounterRegistry:()=>A,renderCounterRegistry:()=>N,useRenderCounter:()=>C};for(var y in d)s(m,y,{get:d[y],enumerable:!0});e.exports=p(s({},"__esModule",{value:!0}),m);var g=(n=null!=(i=r("C"))?o(h(i)):{},p(i&&i.__esModule?n:s(n,"default",{value:i,enumerable:!0}),i)),{useRef:b,useEffect:w,isValidElement:S}=g,v=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=k;return t[k]=!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 I=null;function O(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=I)return I.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function $(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(I=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.");O(_)}else if(1===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===R.length&&(I=null),O(e)}else if(2===e)R.push(t),O(I);else if(3===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");O(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function x(e){for(let t=0;t<e.length;t++)e[t]=k}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var N=new Map;function A(){for(let e of N.values())e.forEach(e=>{e.count=0})}function C(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,i={count:0};null==(r=N.get(e))&&(r=new Set,N.set(e,r)),r.add(i),t.current=i}return()=>{var r;let i;null!==t.current&&(r=t.current,null!=(i=N.get(e))&&i.delete(r))}})}var M=new Set;function V(e,t,r,i,n,l){function a(e,t,a,o){let s=`${i}:${l} [${n}] ${r}${a} changed from ${e} to ${t} at depth ${o}`;M.has(s)||(M.add(s),console.error(s))}!function e(t,r,i,n){if(!(n>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,i,n);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,i,n);else if(null===r)a(`type ${typeof t}`,"null",i,n);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,i,n);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${i}.get(${l})`,n+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,i,n);else a("Map instance","other value",i,n);else if(r instanceof Map)a("other value","Map instance",i,n);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,i,n);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,i,n);else a("Set instance","other value",i,n);else if(r instanceof Set)a("other value","Set instance",i,n);else if(l||o)if(l!==o)a(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,i,n);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,i,n);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${i}[${l}]`,n+1);else if(S(t)||S(r))S(t)!==S(r)?a(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,i,n):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,i,n):e(t.props,r.props,`[props of ${i}]`,n+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,i,n);for(let l in t)l in r?e(t[l],r[l],`${i}.${l}`,n+1):a(`object with key ${l}`,`object without key ${l}`,i,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,i,n):t!==r&&a(t,r,i,n)}}}(e,t,"",0)}},p(e,t,r){let i=new WeakMap,n=new WeakMap;function l(e,t,r){let l=t,a=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=a.ref&&!l.prototype?.isReactComponent){let t=l,r=i.get(e);r||(r=new WeakMap,i.set(e,r));let n=r.get(t);n||((n=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof l&&null!=a.ref&&(l=function(e,t){let r=n.get(e);r||(r=new Map,n.set(e,r));let i=r.get(t);if(i)return i;let l=e.forwardRef((r,i)=>{let n=e.useRef(null);if(!n.current||n.current.original!==i){let e;n.current={original:i,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof i){let r=i(t);e="function"==typeof r?r:void 0}else i&&(i.current=t)}}}return e.createElement(t,{...r,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,r,i)=>{let n=l(e,t,r??{});return e.createElement(n.type,void 0===i?n.props:{...n.props,key:i})};return{jsx:t,jsxs:(t,r,i)=>{let n=l(e,t,r??{}),{children:a,...o}=n.props;return e.createElement(n.type,void 0===i?o:{...o,key:i},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...i)=>{let n=l(e,t,r??{});return e.createElement(n.type,n.props,...i)},cloneElement:(t,r,...i)=>{let n=e.cloneElement(t,r??void 0,...i),a=n.ref,o=l(e,n.type,{...n.props,ref:a});return o.type===n.type&&"string"!=typeof n.type?n:e.createElement(o.type,{...o.props,key:n.key})}}}r.d(t,{MA:()=>a,YJ:()=>o})},C(e,t,r){r.r(t);let i=(0,r("p").YJ)(window.React),{Children:n,Component:l,Fragment:a,Profiler:o,PureComponent:s,StrictMode:u,Suspense:c,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:f,cloneElement:p,createContext:m,createElement:d,createFactory:y,createRef:g,forwardRef:b,isValidElement:w,lazy:S,memo:v,startTransition:k,unstable_act:E,useCallback:_,useContext:I,useDebugValue:O,useDeferredValue:R,useEffect:$,useId:x,useImperativeHandle:D,useInsertionEffect:N,useLayoutEffect:A,useMemo:C,useReducer:M,useRef:V,useState:T,useSyncExternalStore:j,useTransition:W,version:P,use:z}=i;r.d(t,{},{Children:n,Component:l,Fragment:a,Profiler:o,PureComponent:s,StrictMode:u,Suspense:c,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:h,act:f,cloneElement:p,createContext:m,createElement:d,createFactory:y,createRef:g,default:i,forwardRef:b,isValidElement:w,lazy:S,memo:v,startTransition:k,unstable_act:E,use:z,useCallback:_,useContext:I,useDebugValue:O,useDeferredValue:R,useEffect:$,useId:x,useImperativeHandle:D,useInsertionEffect:N,useLayoutEffect:A,useMemo:C,useReducer:M,useRef:V,useState:T,useSyncExternalStore:j,useTransition:W,version:P})}},t={};function r(i){var n=t[i];if(void 0!==n)return n.exports;var l=t[i]={exports:{}};return e[i](l,l.exports,r),l.exports}r.d=(e,t,i)=>{var n=(t,i)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[i]:t[n]})};n(t,"get"),n(i,"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:i,Fragment:n}=(0,r("p").MA)(window.React);var l=r("vD"),a=r("C"),o=Object.defineProperty,s=(e,t,r)=>{let i;return(i="symbol"!=typeof t?t+"":t)in e?o(e,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[i]=r},u=e=>null!=e&&"object"==typeof e&&!Array.isArray(e),c=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Function.prototype.toString.call(Object);var h=e=>e?.constructor.name==="Array",f=(e,t)=>{if(Object.is(e,t))return!0;if(null==e&&null!=t||null!=e&&null==t)return!1;if("function"==typeof e?.isEqual&&"function"==typeof t?.isEqual)return e.isEqual(t);if("function"==typeof e&&"function"==typeof t)return e.toString()===t.toString();if(h(e)&&h(t))return((e,t)=>{if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(!f(e[r],t[r]))return!1;return!0})(Array.from(e),Array.from(t));if("object"!=typeof e||"object"!=typeof t)return!1;let r=Object.keys(t??Object.create(null)),i=r.length;for(let t=0;t<i;t++)if(!Reflect.has(e,r[t]))return!1;for(let n=0;n<i;n++){let i=r[n];if(!f(e[i],t[i]))return!1}return!0},p={itemToValue:e=>"string"==typeof e?e:u(e)&&c(e,"value")?e.value:"",itemToString:e=>"string"==typeof e?e:u(e)&&c(e,"label")?e.label:p.itemToValue(e),isItemDisabled:e=>!!(u(e)&&c(e,"disabled"))&&!!e.disabled},m=class e{constructor(t){s(this,"options",t),s(this,"items"),s(this,"indexMap",null),s(this,"copy",t=>new e({...this.options,items:t??[...this.items]})),s(this,"isEqual",e=>f(this.items,e.items)),s(this,"setItems",e=>this.copy(e)),s(this,"getValues",(e=this.items)=>{let t=[];for(let r of e){let e=this.getItemValue(r);null!=e&&t.push(e)}return t}),s(this,"find",e=>{if(null==e)return null;let t=this.indexOf(e);return -1!==t?this.at(t):null}),s(this,"findMany",e=>{let t=[];for(let r of e){let e=this.find(r);null!=e&&t.push(e)}return t}),s(this,"at",e=>{if(!this.options.groupBy&&!this.options.groupSort)return this.items[e]??null;let t=0;for(let[,r]of this.group())for(let i of r){if(t===e)return i;t++}return null}),s(this,"sortFn",(e,t)=>(this.indexOf(e)??0)-(this.indexOf(t)??0)),s(this,"sort",e=>[...e].sort(this.sortFn.bind(this))),s(this,"getItemValue",e=>null==e?null:this.options.itemToValue?.(e)??p.itemToValue(e)),s(this,"getItemDisabled",e=>null!=e&&(this.options.isItemDisabled?.(e)??p.isItemDisabled(e))),s(this,"stringifyItem",e=>null==e?null:this.options.itemToString?.(e)??p.itemToString(e)),s(this,"stringify",e=>null==e?null:this.stringifyItem(this.find(e))),s(this,"stringifyItems",(e,t=", ")=>{let r=[];for(let t of e){let e=this.stringifyItem(t);null!=e&&r.push(e)}return r.join(t)}),s(this,"stringifyMany",(e,t)=>this.stringifyItems(this.findMany(e),t)),s(this,"has",e=>-1!==this.indexOf(e)),s(this,"hasItem",e=>null!=e&&this.has(this.getItemValue(e))),s(this,"group",()=>{let{groupBy:e,groupSort:t}=this.options;if(!e)return[["",[...this.items]]];let r=new Map;this.items.forEach((t,i)=>{let n=e(t,i);r.has(n)||r.set(n,[]),r.get(n).push(t)});let i=Array.from(r.entries());return t&&i.sort(([e],[r])=>{if("function"==typeof t)return t(e,r);if(Array.isArray(t)){let i=t.indexOf(e),n=t.indexOf(r);return -1===i?1:-1===n?-1:i-n}return"asc"===t?e.localeCompare(r):"desc"===t?r.localeCompare(e):0}),i}),s(this,"getNextValue",(e,t=1,r=!1)=>{let i=this.indexOf(e);if(-1===i)return null;for(i=r?Math.min(i+t,this.size-1):i+t;i<=this.size&&this.getItemDisabled(this.at(i));)i++;return this.getItemValue(this.at(i))}),s(this,"getPreviousValue",(e,t=1,r=!1)=>{let i=this.indexOf(e);if(-1===i)return null;for(i=r?Math.max(i-t,0):i-t;i>=0&&this.getItemDisabled(this.at(i));)i--;return this.getItemValue(this.at(i))}),s(this,"indexOf",e=>{if(null==e)return -1;if(!this.options.groupBy&&!this.options.groupSort)return this.items.findIndex(t=>this.getItemValue(t)===e);if(!this.indexMap){this.indexMap=new Map;let e=0;for(let[,t]of this.group())for(let r of t){let t=this.getItemValue(r);null!=t&&this.indexMap.set(t,e),e++}}return this.indexMap.get(e)??-1}),s(this,"getByText",(e,t)=>{let r=null!=t?this.indexOf(t):-1,i=1===e.length;for(let n=0;n<this.items.length;n++){let l=this.items[(r+n+1)%this.items.length];if((!i||this.getItemValue(l)!==t)&&!this.getItemDisabled(l)&&d(this.stringifyItem(l),e))return l}}),s(this,"search",(e,t)=>{let{state:r,currentValue:i,timeout:n=350}=t,l=r.keysSoFar+e,a=l.length>1&&Array.from(l).every(e=>e===l[0])?l[0]:l,o=this.getByText(a,i),s=this.getItemValue(o);function u(){clearTimeout(r.timer),r.timer=-1}return!function e(t){r.keysSoFar=t,u(),""!==t&&(r.timer=+setTimeout(()=>{e(""),u()},n))}(l),s}),s(this,"update",(e,t)=>{let r=this.indexOf(e);return -1===r?this:this.copy([...this.items.slice(0,r),t,...this.items.slice(r+1)])}),s(this,"upsert",(e,t,r="append")=>{let i=this.indexOf(e);return -1===i?("append"===r?this.append:this.prepend)(t):this.copy([...this.items.slice(0,i),t,...this.items.slice(i+1)])}),s(this,"insert",(e,...t)=>this.copy(y(this.items,e,...t))),s(this,"insertBefore",(e,...t)=>{let r=this.indexOf(e);if(-1===r)if(0!==this.items.length)return this;else r=0;return this.copy(y(this.items,r,...t))}),s(this,"insertAfter",(e,...t)=>{let r=this.indexOf(e);if(-1===r)if(0!==this.items.length)return this;else r=0;return this.copy(y(this.items,r+1,...t))}),s(this,"prepend",(...e)=>this.copy(y(this.items,0,...e))),s(this,"append",(...e)=>this.copy(y(this.items,this.items.length,...e))),s(this,"filter",e=>{let t=this.items.filter((t,r)=>e(this.stringifyItem(t),r,t));return this.copy(t)}),s(this,"remove",(...e)=>{let t=e.map(e=>"string"==typeof e?e:this.getItemValue(e));return this.copy(this.items.filter(e=>{let r=this.getItemValue(e);return null!=r&&!t.includes(r)}))}),s(this,"move",(e,t)=>{let r=this.indexOf(e);return -1===r?this:this.copy(g(this.items,[r],t))}),s(this,"moveBefore",(e,...t)=>{let r=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===r)return this;let i=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(g(this.items,i,r))}),s(this,"moveAfter",(e,...t)=>{let r=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===r)return this;let i=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(g(this.items,i,r+1))}),s(this,"reorder",(e,t)=>this.copy(g(this.items,[e],t))),s(this,"compareValue",(e,t)=>{let r=this.indexOf(e),i=this.indexOf(t);return r<i?-1:+(r>i)}),s(this,"range",(e,t)=>{let r=[],i=e;for(;null!=i;){if(this.find(i)&&r.push(i),i===t)return r;i=this.getNextValue(i)}return[]}),s(this,"getValueRange",(e,t)=>e&&t?0>=this.compareValue(e,t)?this.range(e,t):this.range(t,e):[]),s(this,"toString",()=>{let e="";for(let t of this.items)e+=[this.getItemValue(t),this.stringifyItem(t),this.getItemDisabled(t)].filter(Boolean).join(":")+",";return e}),s(this,"toJSON",()=>({size:this.size,first:this.firstValue,last:this.lastValue})),this.items=[...t.items]}get size(){return this.items.length}get firstValue(){let e=0;for(;this.getItemDisabled(this.at(e));)e++;return this.getItemValue(this.at(e))}get lastValue(){let e=this.size-1;for(;this.getItemDisabled(this.at(e));)e--;return this.getItemValue(this.at(e))}*[Symbol.iterator](){yield*this.items}},d=(e,t)=>!!e?.toLowerCase().startsWith(t.toLowerCase());function y(e,t,...r){return[...e.slice(0,t),...r,...e.slice(t)]}function g(e,t,r){let i=(t=[...t].sort((e,t)=>e-t)).map(t=>e[t]);for(let r=t.length-1;r>=0;r--)e=[...e.slice(0,t[r]),...e.slice(t[r]+1)];return r=Math.max(0,r-t.filter(e=>e<r).length),[...e.slice(0,r),...i,...e.slice(r)]}var b=e=>new m(e);let w=window.WallarmDS.AgentAvatar,S=window.WallarmDS.AgentGlyph,v=window.WallarmDS.Button,k=window.WallarmDS.Select,E=window.WallarmDS.SelectButton,_=window.WallarmDS.SelectContent,I=window.WallarmDS.SelectOption,O=window.WallarmDS.SelectOptionIndicator,R=window.WallarmDS.SelectOptionText,$=window.WallarmDS.SelectPositioner,x=window.WallarmDS.HStack,D=window.WallarmDS.VStack,N=window.WallarmDS.Text,A=window.WallarmDS.AGENT_COLORS,C=window.WallarmDS.AGENT_EYES,M=window.WallarmDS.AGENT_PROPS,V=window.WallarmDS.AGENT_SHAPES,T=window.WallarmDS.defaultLook,j=window.WallarmDS.enableAgentLookLibrary,W=window.WallarmDS.lookIssues,P={"coral-not-wally":"Coral belongs to Wally.","dots-look-alike":"Looks like a character from OpenAI Dots.","reads-as-wally":"A dome with antennae reads as a second Wally.","glyph-twin":"Another agent has the same shape and colour: as glyphs they are hard to tell apart.","sky-teal-same-shape":"Sky and teal on the same shape are hard to tell apart."},z=b({items:V.map(e=>({value:e.id,label:e.name}))}),L=b({items:A.filter(e=>!e.brand).map(e=>({value:e.id,label:e.name}))}),B=b({items:C.map(e=>({value:e.id,label:e.name}))}),F=b({items:M.map(e=>({value:e.id,label:e.glyph?e.name:`${e.name} (3D only)`}))}),G=M.filter(e=>"none"!==e.id).map(e=>e.id),U={v:1,shape:"mochi",color:"lavender",eyes:"oval",prop:"sprout"},H={title:"AI/AgentLookBuilder",parameters:{layout:"centered",docs:{description:{component:"The builder entry: everything a product needs to let admins pick an agent’s look. It holds the kit with display names (`AGENT_SHAPES`, `AGENT_COLORS`, `AGENT_EYES`, `AGENT_PROPS`), `lookIssues` for the combinations to avoid and `defaultLook` for a first look. `enableAgentLookLibrary()` loads the full prop library. Any app that renders stored custom looks calls it once at start-up — the cards, rows and tables that show them, not only the picker. Without it `AgentAvatar` and `AgentGlyph` draw only the six presets’ props, and any other prop is left out with a warning in development. Mounted glyphs pick it up on their next render; a mounted 3D character keeps what it drew until its look changes or it remounts, so call it before the first render. It ships no picker UI; the stories build one from DS `Select`s. `lookIssues` only warns, never blocks; coral is Wally’s and is not offered."}}}};function Y(r){return t(I,{item:r,children:[e(R,{children:r.label}),e(O,{})]},r.value)}function q(r){return t(I,{item:r,children:[e(R,{children:r.label}),e(O,{})]},r.value)}function J(r){return t(I,{item:r,children:[e(R,{children:r.label}),e(O,{})]},r.value)}function Z(r){return t(I,{item:r,children:[e(R,{children:r.label}),e(O,{})]},r.value)}function X(t){return e(N,{size:"sm",color:"danger",children:P[t.code]},t.code)}function K(e){return!e.brand}function Q(e){return e.group}function ee(e){return A.find(t=>t.group===e)?.id??"cobalt"}let et=[{name:"AnyLook",story:()=>{let r,i,n,o,s,u,c,h,f,p,m,d,y,g=(0,l.c)(75);j();let[b,I]=(0,a.useState)(U),[O,R]=(0,a.useState)(0);if(g[0]!==O||g[1]!==b){let l,a,d,y,N,A,C,M,V,j,P,U,H,K,Q,ee,et,er,ei,en,el,ea,eo=W(b,{isWally:!1,others:[]});g[13]!==b?(l=e=>{let{value:t}=e;return I({...b,shape:t[0]})},g[13]=b,g[14]=l):l=g[14];let es=l;g[15]!==b?(a=e=>{let{value:t}=e;return I({...b,color:t[0]})},g[15]=b,g[16]=a):a=g[16];let eu=a;g[17]!==b?(d=e=>{let{value:t}=e;return I({...b,eyes:t[0]})},g[17]=b,g[18]=d):d=g[18];let ec=d;g[19]!==b?(y=e=>{let{value:t}=e;return I({...b,prop:t[0]})},g[19]=b,g[20]=y):y=g[20];let eh=y;g[21]!==O?(N=()=>{I(T(`random-${O}`,[],G)),R(O+1)},g[21]=O,g[22]=N):N=g[22];let ef=N;i=D,c=24,h="start",f="any-look",g[23]!==b?(p=t(x,{gap:24,align:"end",children:[e(w,{look:b,size:72,seed:"builder",live:!0,"data-testid":"any-look--avatar"}),e(S,{look:b,size:24,"data-testid":"any-look--glyph-24"}),e(S,{look:b,size:20,"data-testid":"any-look--glyph-20"})]}),g[23]=b,g[24]=p):p=g[24],g[25]!==b.shape?(A=[b.shape],g[25]=b.shape,g[26]=A):A=g[26],g[27]===Symbol.for("react.memo_cache_sentinel")?(C=e(E,{"aria-label":"Shape"}),g[27]=C):C=g[27],g[28]===Symbol.for("react.memo_cache_sentinel")?(M=e($,{children:e(_,{children:z.items.map(Y)})}),g[28]=M):M=g[28],g[29]!==es||g[30]!==A?(V=t(k,{collection:z,value:A,onValueChange:es,"data-testid":"any-look--shape",children:[C,M]}),g[29]=es,g[30]=A,g[31]=V):V=g[31],g[32]!==b.color?(j=[b.color],g[32]=b.color,g[33]=j):j=g[33],g[34]===Symbol.for("react.memo_cache_sentinel")?(P=e(E,{"aria-label":"Colour"}),g[34]=P):P=g[34],g[35]===Symbol.for("react.memo_cache_sentinel")?(U=e($,{children:e(_,{children:L.items.map(q)})}),g[35]=U):U=g[35],g[36]!==eu||g[37]!==j?(H=t(k,{collection:L,value:j,onValueChange:eu,"data-testid":"any-look--color",children:[P,U]}),g[36]=eu,g[37]=j,g[38]=H):H=g[38],g[39]!==b.eyes?(K=[b.eyes],g[39]=b.eyes,g[40]=K):K=g[40],g[41]===Symbol.for("react.memo_cache_sentinel")?(Q=e(E,{"aria-label":"Eyes"}),g[41]=Q):Q=g[41],g[42]===Symbol.for("react.memo_cache_sentinel")?(ee=e($,{children:e(_,{children:B.items.map(J)})}),g[42]=ee):ee=g[42],g[43]!==ec||g[44]!==K?(et=t(k,{collection:B,value:K,onValueChange:ec,"data-testid":"any-look--eyes",children:[Q,ee]}),g[43]=ec,g[44]=K,g[45]=et):et=g[45],g[46]!==b.prop?(er=[b.prop],g[46]=b.prop,g[47]=er):er=g[47],g[48]===Symbol.for("react.memo_cache_sentinel")?(ei=e(E,{"aria-label":"Prop"}),g[48]=ei):ei=g[48],g[49]===Symbol.for("react.memo_cache_sentinel")?(en=e($,{children:e(_,{children:F.items.map(Z)})}),g[49]=en):en=g[49],g[50]!==eh||g[51]!==er?(el=t(k,{collection:F,value:er,onValueChange:eh,"data-testid":"any-look--prop",children:[ei,en]}),g[50]=eh,g[51]=er,g[52]=el):el=g[52],g[53]!==ef?(ea=e(v,{variant:"outline",color:"neutral",onClick:ef,"data-testid":"any-look--random",children:"Random"}),g[53]=ef,g[54]=ea):ea=g[54],g[55]!==V||g[56]!==H||g[57]!==et||g[58]!==el||g[59]!==ea?(m=t(x,{gap:12,align:"start",children:[V,H,et,el,ea]}),g[55]=V,g[56]=H,g[57]=et,g[58]=el,g[59]=ea,g[60]=m):m=g[60],r=D,n=4,o="start",s="any-look--issues",u=eo.map(X),g[0]=O,g[1]=b,g[2]=r,g[3]=i,g[4]=n,g[5]=o,g[6]=s,g[7]=u,g[8]=c,g[9]=h,g[10]=f,g[11]=p,g[12]=m}else r=g[2],i=g[3],n=g[4],o=g[5],s=g[6],u=g[7],c=g[8],h=g[9],f=g[10],p=g[11],m=g[12];return g[61]!==r||g[62]!==n||g[63]!==o||g[64]!==s||g[65]!==u?(d=e(r,{gap:n,align:o,"data-testid":s,children:u}),g[61]=r,g[62]=n,g[63]=o,g[64]=s,g[65]=u,g[66]=d):d=g[66],g[67]!==i||g[68]!==c||g[69]!==h||g[70]!==f||g[71]!==p||g[72]!==m||g[73]!==d?(y=t(i,{gap:c,align:h,"data-testid":f,children:[p,m,d]}),g[67]=i,g[68]=c,g[69]=h,g[70]=f,g[71]=p,g[72]=m,g[73]=d,g[74]=y):y=g[74],y},meta:H},{name:"Library",story:()=>{let r,i=(0,l.c)(1);if(j(),i[0]===Symbol.for("react.memo_cache_sentinel")){let n=[...new Set(A.filter(K).map(Q))].map(ee);r=e(D,{gap:12,align:"start","data-testid":"library",children:V.map(r=>t(x,{gap:12,align:"center",children:[e("div",{className:"w-80",children:e(N,{size:"sm",children:r.name})}),n.map(t=>e(w,{look:{v:1,shape:r.id,color:t,eyes:"oval",prop:"none"},size:48,seed:`${r.id}-${t}`,"data-testid":`library--${r.id}-${t}`},t)),e(w,{look:{v:1,shape:r.id,color:"sky",eyes:"oval",prop:"magnifier"},size:48,seed:`${r.id}-magnifier`,"data-testid":`library--${r.id}-magnifier`})]},r.id))}),i[0]=r}else r=i[0];return r},meta:H}];function er({entry:e}){let{story:t,meta:r}=e,i={...r.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>a.default.createElement(n,i),o={args:i,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return a.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},a.default.createElement("h2",{className:"text-sm mb-12"},e.name),a.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(a.default.createElement(window.WallarmDS.Root,null,et.map((e,t)=>a.default.createElement(er,{key:t,entry:e})))),t}}})();