@wallarm-org/claude-design 4.12.3 → 4.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/SETUP.md CHANGED
@@ -1,6 +1,6 @@
1
- # Install Wallarm Design System 4.12.3 in Claude Design
1
+ # Install Wallarm Design System 4.13.0 in Claude Design
2
2
 
3
- This guide ships with Wallarm Design System 4.12.3. Work through the steps in order and run each check before moving on.
3
+ This guide ships with Wallarm Design System 4.13.0. Work through the steps in order and run each check before moving on.
4
4
 
5
5
  The export wrote `wallarm-design-system/`:
6
6
 
@@ -27,7 +27,7 @@ Create a new **Design System** artifact titled `Wallarm Design System`, with the
27
27
  - Send `project/components/index.d.ts` with the content type `text/plain`; the artifact refuses it otherwise. Every other file's type follows its extension.
28
28
  - A publish takes at most 255 files, so send the files in batches of up to 200.
29
29
  2. **Icons and logos.** The galleries are asset uploads, not files: never publish anything from `wallarm-design-system/assets/` as a file under `project/`.
30
- 1. Run `npx -y @wallarm-org/claude-design@4.12.3 index --blobs wallarm-design-system/blobs.json`. It exits 3 and lists in `wallarm-design-system/upload.json` the local paths of the SVGs to upload (identical SVGs share one upload).
30
+ 1. Run `npx -y @wallarm-org/claude-design@4.13.0 index --blobs wallarm-design-system/blobs.json`. It exits 3 and lists in `wallarm-design-system/upload.json` the local paths of the SVGs to upload (identical SVGs share one upload).
31
31
  2. Upload them in the order listed: the Artifact tool's publish with the system's `url`, `asset: true` and `file_paths` set to the next 25 paths from `upload.json`, copied as they are. With `upload_asset`, if that is the tool you have, send at most 10 per call. The first install takes about 24 calls. If an upload is refused, show the person the error and stop.
32
32
  3. After each call, add one entry per uploaded file to `wallarm-design-system/blobs.json`, a JSON object: the path as `upload.json` lists it, mapped to the `url` the result gives for that file, for example `{"wallarm-design-system/assets/Icons/activity.svg": "https://…/_blob/<id>"}`. Copy the url, not the asset's `id`. If the result has no url but gives each file's sha256 and id (as `upload_asset` does), key the entry by that sha256 instead.
33
33
  4. Run the `index` command again. It rewrites `blobs.json` keyed by sha256; keep its entries and add new ones after them. Exit 3: upload the paths it lists now and run it again. Exit 0: it wrote the asset groups into `project/design-system.json`.
@@ -35,7 +35,7 @@ Create a new **Design System** artifact titled `Wallarm Design System`, with the
35
35
 
36
36
  In artboards, icons are still `WallarmDS.Icons.<Name>` and the logo `WallarmDS.Logo`, from `components/bundle.js`; the galleries show them on the system's page.
37
37
 
38
- Check: every `project/` path in `wallarm-design-system/files.json` (374 files) is in the artifact, its title is `Wallarm Design System`, and `project/design-system.json` has a `lastChange.note` that starts with `v4.12.3:`. The Artifact tool's `list` with the system's `url` and `scope: "assets"` shows at least 580 assets. The system's page shows the asset groups Logos (1), Icons (582), with every icon drawn (no broken image). The page may add `project/manifest.json` and files under `project/api/`; they don't count. Give the person the artifact's link: they need it to install the system on other canvases and to update it.
38
+ Check: every `project/` path in `wallarm-design-system/files.json` (374 files) is in the artifact, its title is `Wallarm Design System`, and `project/design-system.json` has a `lastChange.note` that starts with `v4.13.0:`. The Artifact tool's `list` with the system's `url` and `scope: "assets"` shows at least 580 assets. The system's page shows the asset groups Logos (1), Icons (582), with every icon drawn (no broken image). The page may add `project/manifest.json` and files under `project/api/`; they don't count. Give the person the artifact's link: they need it to install the system on other canvases and to update it.
39
39
 
40
40
  If a publish is refused for a reason this step doesn't cover, show the person the error and stop. Don't edit or rename files to get past it.
41
41
 
@@ -141,10 +141,10 @@ To update a system the person already has, run `npx -y @wallarm-org/claude-desig
141
141
  | The publish is refused for `index.d.ts` | Send `project/components/index.d.ts` as `text/plain`. |
142
142
  | The publish is refused for too many files | Send smaller batches, as step 1 says. |
143
143
  | The `index` command exits 3 | Upload the paths in `upload.json`, add their urls to `blobs.json` and run it again. An entry it names as invalid has a key that matches no SVG or a value that isn't a 32-character blob id or `/_blob/<id>` url: copy it again from `upload.json` and the upload result. |
144
- | Publishing `project/design-system.json` is refused as stale | The system's page saved a newer index. Save the version the refusal hands back as `current-index.json` (copy it; don't retype it), run `npx -y @wallarm-org/claude-design@4.12.3 index --blobs wallarm-design-system/blobs.json --index current-index.json`, and publish the index again. Nothing needs uploading again. |
144
+ | Publishing `project/design-system.json` is refused as stale | The system's page saved a newer index. Save the version the refusal hands back as `current-index.json` (copy it; don't retype it), run `npx -y @wallarm-org/claude-design@4.13.0 index --blobs wallarm-design-system/blobs.json --index current-index.json`, and publish the index again. Nothing needs uploading again. |
145
145
  | The gallery is empty or shows broken images | `project/design-system.json` was published before the `index` command exited 0, or with a wrong url. Fix `blobs.json`, run `index` again and publish the index again. |
146
146
  | The skeleton shows no menu, or a click doesn't move the highlight | `APP.nav` is broken: every node needs `type`, `id` and `label`, every link a one-segment `path`, and `start` must be one of those paths. Fix the object; change nothing else. |
147
- | The rail's products, the page title or the tenant are empty | The canvas runtime ignores `children="{{…}}"` holes. Tell the person and report it with the version (4.12.3). |
147
+ | The rail's products, the page title or the tenant are empty | The canvas runtime ignores `children="{{…}}"` holes. Tell the person and report it with the version (4.13.0). |
148
148
  | No sampler board shows | The file isn't at `project/wallarm-sampler.dc.html`, or `project/canvas.json` has no `"wallarm-sampler.dc.html"` in `boards` or `order`. |
149
149
  | Components render unstyled | The link lines don't reach `project/ds/wallarm-design-system/`. The artboard must sit directly in `project/`, and the folder name must match step 2. |
150
150
  | `WallarmDS is not defined` | `components/bundle.js` isn't loaded: same cause as above. |
@@ -154,4 +154,4 @@ To update a system the person already has, run `npx -y @wallarm-org/claude-desig
154
154
  | Text shows in the system font | The fonts in `project/fonts/` weren't published or installed. Check step 1's file check and step 2. |
155
155
  | The export command fails or can't reach npm | Show the person its output and stop. |
156
156
 
157
- Never edit a file in the system artifact or under `project/ds/wallarm-design-system/` on a canvas to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.12.3). Problems go to https://github.com/wallarm/design-system/issues.
157
+ Never edit a file in the system artifact or under `project/ds/wallarm-design-system/` on a canvas to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.13.0). Problems go to https://github.com/wallarm/design-system/issues.
package/dist/UPDATE.md CHANGED
@@ -1,6 +1,6 @@
1
- # Update Wallarm Design System to 4.12.3 in Claude Design
1
+ # Update Wallarm Design System to 4.13.0 in Claude Design
2
2
 
3
- This guide updates a Wallarm Design System artifact the person installed in Claude Design to 4.12.3. Work through the steps in order and run each check before moving on.
3
+ This guide updates a Wallarm Design System artifact the person installed in Claude Design to 4.13.0. Work through the steps in order and run each check before moving on.
4
4
 
5
5
  ## 0. Find the system
6
6
 
@@ -18,15 +18,15 @@ Check: `current-files.json` is a JSON array that has `project/design-system.json
18
18
 
19
19
  ## 2. Export the release
20
20
 
21
- Run this command; it pins 4.12.3, the release of this guide:
21
+ Run this command; it pins 4.13.0, the release of this guide:
22
22
 
23
23
  ```bash
24
- npx -y @wallarm-org/claude-design@4.12.3 export --overwrite --existing current-files.json
24
+ npx -y @wallarm-org/claude-design@4.13.0 export --overwrite --existing current-files.json
25
25
  ```
26
26
 
27
27
  Exit 0 or 3 are both done; on 3 the output names the manual step, which is removing the paths in `wallarm-design-system/removed.json` (steps 3 and 6). Any other exit: show the person the output and stop.
28
28
 
29
- Check: `wallarm-design-system/files.json` and `wallarm-design-system/SETUP.md` exist, and `wallarm-design-system/SETUP.md` is for 4.12.3. The steps below point into it.
29
+ Check: `wallarm-design-system/files.json` and `wallarm-design-system/SETUP.md` exist, and `wallarm-design-system/SETUP.md` is for 4.13.0. The steps below point into it.
30
30
 
31
31
  ## 3. Confirm removals
32
32
 
@@ -42,14 +42,14 @@ Publish `wallarm-design-system/project/` to the same artifact link: every file e
42
42
  2. Run this exact command, and use it unchanged on every run below:
43
43
 
44
44
  ```bash
45
- npx -y @wallarm-org/claude-design@4.12.3 index --blobs wallarm-design-system/blobs.json --index current-index.json
45
+ npx -y @wallarm-org/claude-design@4.13.0 index --blobs wallarm-design-system/blobs.json --index current-index.json
46
46
  ```
47
47
 
48
48
  It reuses the blob id of every SVG whose sha256 the current index already has, so `upload.json` lists only the new and changed SVGs. Exit 3: upload them and add their urls to `blobs.json` as SETUP.md step 1's "Icons and logos" says (items 2 and 3), then run the command again. Exit 0: nothing (more) needs uploading.
49
49
  3. Right before publishing, read `project/design-system.json` again into `current-index.json` as in item 1 (the system's page may have saved it meanwhile), and run the command again: it exits 0 and merges this release into the index just read.
50
50
  4. Publish `project/design-system.json` at once, last and alone.
51
51
 
52
- Check: every `project/` path in `wallarm-design-system/files.json` (374 files) is in the artifact, `project/design-system.json` has a `lastChange.note` that starts with `v4.12.3:`, and the page shows Logos (1), Icons (582) with no broken image. `project/manifest.json` and files under `project/api/` are written by the system's page: they don't count and stay.
52
+ Check: every `project/` path in `wallarm-design-system/files.json` (374 files) is in the artifact, `project/design-system.json` has a `lastChange.note` that starts with `v4.13.0:`, and the page shows Logos (1), Icons (582) with no broken image. `project/manifest.json` and files under `project/api/` are written by the system's page: they don't count and stay.
53
53
 
54
54
  ## 6. Remove dropped files
55
55
 
@@ -71,7 +71,7 @@ On one canvas you reinstalled in step 7:
71
71
 
72
72
  Never replace or edit `project/wallarm-app.dc.html` on an update: the app skeleton is the person's own work (their product, menu and screens). Only the sampler is refreshed. Tell the person so; if they want the new release's skeleton too, add it as a new board as SETUP.md step 6 says, under another file name such as `wallarm-app-new.dc.html`.
73
73
 
74
- When every check passes, tell the person the system is on 4.12.3, give them the system link, and wait for their request.
74
+ When every check passes, tell the person the system is on 4.13.0, give them the system link, and wait for their request.
75
75
 
76
76
  ## When something looks wrong
77
77
 
@@ -83,4 +83,4 @@ When every check passes, tell the person the system is on 4.12.3, give them the
83
83
  | The gallery is empty or shows broken images | `project/design-system.json` was published before the `index` command exited 0, or with a wrong url. Fix `blobs.json`, run `index` again and publish the index again. |
84
84
  | A canvas shows an older version | Install the system again on that canvas. |
85
85
 
86
- Anything else: see "When something looks wrong" in `wallarm-design-system/SETUP.md`. Never edit a file in the system artifact or under a canvas's `project/ds/` folder to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.12.3). Problems go to https://github.com/wallarm/design-system/issues.
86
+ Anything else: see "When something looks wrong" in `wallarm-design-system/SETUP.md`. Never edit a file in the system artifact or under a canvas's `project/ds/` folder to make a check pass. If a check still fails, tell the person which check, what you saw and the version (4.13.0). Problems go to https://github.com/wallarm/design-system/issues.
@@ -44,7 +44,7 @@ Source: AgentAvatar/AgentAvatar.stories.tsx#Basic
44
44
 
45
45
  ### Cast
46
46
 
47
- The six agents on duty at the team-card size. Each is told apart by its shape, colour and prop.
47
+ The cast on duty at the team-card size. Each is told apart by its shape, colour and prop.
48
48
 
49
49
  Source: AgentAvatar/AgentAvatar.stories.tsx#Cast
50
50
 
@@ -9,4 +9,4 @@ var e={vD(e,t,a){let n,r;/**
9
9
  * @nolint
10
10
  * @preventMunge
11
11
  * @preserve-invariant-messages
12
- */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}}})();
12
+ */var o,l,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,u=(e,t,a,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))m.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(p(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:p,act:m,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:L}=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:p,act:m,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:L,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:"acquit",name:"Acquit",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:"lens",name:"Lens",role:"API Posture Reviewer",templateId:null,shape:"mochi",color:"mint",eyes:"tall",prop:"periscope"},{id:"bard",name:"Bard",role:"Security Posture Briefer",templateId:null,shape:"cloud",color:"powder",eyes:"oval",prop:"quill"}],d=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&&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 m=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=m,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===p(c,{isWally:!1,others:t}).length)return c;for(let e=1;e<200;e++){let e=l();if(0===p(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,p=(0,o.c)(16);p[0]===Symbol.for("react.memo_cache_sentinel")?(t={fps:0,js:0,max:0},p[0]=t):t=p[0];let[m,u]=(0,l.useState)(t);p[1]===Symbol.for("react.memo_cache_sentinel")?(a=()=>{var e;let t,a,n,r,o,l,i,s,c,d,p,m,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,p=new Map,m=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=>p.has(e)),retain:p,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=m.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),m.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=[],p[1]=a,p[2]=n):(a=p[1],n=p[2]),(0,l.useEffect)(a,n);let h=m.fps;p[3]!==m.js?(r=m.js.toFixed(3),p[3]=m.js,p[4]=r):r=p[4],p[5]!==m.max?(i=m.max.toFixed(3),p[5]=m.max,p[6]=i):i=p[6];let f=m.fps;p[7]!==m.js?(s=m.js.toFixed(2),p[7]=m.js,p[8]=s):s=p[8],p[9]!==m.max?(c=m.max.toFixed(2),p[9]=m.max,p[10]=c):c=p[10];let b=`${f} fps \xb7 ${s} ms JS per frame (max ${c})`;return p[11]!==m.fps||p[12]!==r||p[13]!==i||p[14]!==b?(d=e("span",{className:"sb-annotation","data-testid":"agent-avatar-meter","data-fps":h,"data-js":r,"data-max":i,children:b}),p[11]=m.fps,p[12]=r,p[13]=i,p[14]=b,p[15]=d):d=p[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:16-c.length},(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 L(e){return"radar"===e.id||"sift"===e.id||"acquit"===e.id}function W(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 q(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 H(t){return e(x,{"data-testid":`agent-avatar-many-${t.id}`,look:t.look,seed:t.id,size:120,live:!0},t.id)}function V(){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(L).map(W)}),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(q)}),a[0]=t):t=a[0],t},meta:M},{name:"Beats",story:()=>{let a,n,r,i,s,c,d=(0,o.c)(7),p=(0,l.useRef)(null),[m,u]=(0,l.useState)("");d[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>p.current?.play("hello"),d[0]=a):a=d[0];let h=a;d[1]===Symbol.for("react.memo_cache_sentinel")?(n=()=>p.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:p,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=m?`${m} 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-acquit",agent:"acquit",seed:"acquit",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 p=a;s[2]!==c?(n=e(x,{"data-testid":"agent-avatar-activation",agent:"bard",seed:"bard",size:120,shadow:!0,live:!0,state:c}),s[2]=c,s[3]=n):n=s[3];let m="box"===c?"Activate":"Reset";return s[4]!==m||s[5]!==p?(r=e(S,{"data-testid":"agent-avatar-activation-toggle",size:"small",onClick:p,children:m}),s[4]=m,s[5]=p,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),p=(0,l.useRef)(null),m=(0,l.useRef)(null),[u,h]=(0,l.useState)("partial");d[0]===Symbol.for("react.memo_cache_sentinel")?(a=()=>p.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:p,cueRef:m,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:m,"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(H)})})]}),r[1]=n):n=r[1],n},meta:M},{name:"ReducedMotion",story:()=>{let a,n,r,i,s,c,d,p=(0,o.c)(14),m=z(),[u,h]=(0,l.useState)(!1);p[0]!==u?(a=()=>($(!u),V),n=[u],p[0]=u,p[1]=a,p[2]=n):(a=p[1],n=p[2]),(0,l.useEffect)(a,n),p[3]!==u?(r=()=>h(!u),p[3]=u,p[4]=r):r=p[4];let f=r;p[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{gap:24,children:I.slice(0,4).map(Y)}),p[5]=i):i=p[5];let g=u?"Turn motion on":"Turn motion off";p[6]!==g||p[7]!==f?(s=e(S,{"data-testid":"agent-avatar-motion-toggle",variant:"outline",size:"small",onClick:f,children:g}),p[6]=g,p[7]=f,p[8]=s):s=p[8];let y=m?"Motion on":"Motion off (static frames)";return p[9]!==y?(c=e("span",{className:"sb-annotation",children:y}),p[9]=y,p[10]=c):c=p[10],p[11]!==s||p[12]!==c?(d=t(E,{gap:16,align:"center",children:[i,s,c]}),p[11]=s,p[12]=c,p[13]=d):d=p[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}}})();
@@ -93,7 +93,7 @@ export const Basic: StoryFn<AgentAvatarProps> = args => (
93
93
 
94
94
  Basic.args = { agent: 'radar', seed: 'radar', size: 72, state: 'idle', shadow: true };
95
95
 
96
- /** The six agents on duty at the team-card size. Each is told apart by its shape, colour and prop. */
96
+ /** The cast on duty at the team-card size. Each is told apart by its shape, colour and prop. */
97
97
  export const Cast: StoryFn = () => (
98
98
  <HStack gap={24} align='end'>
99
99
  {CAST.map(p => (
@@ -146,7 +146,7 @@ export const Places: StoryFn = () => (
146
146
  /** Partial coverage: the agent covers only some of its applications, so the top of its head stays in grey felt. */
147
147
  export const PartialCoverage: StoryFn = () => (
148
148
  <HStack gap={24}>
149
- {CAST.filter(p => p.id === 'radar' || p.id === 'sift' || p.id === 'mend').map(p => (
149
+ {CAST.filter(p => p.id === 'radar' || p.id === 'sift' || p.id === 'acquit').map(p => (
150
150
  <AgentAvatar
151
151
  key={p.id}
152
152
  data-testid={`agent-avatar-partial-${p.id}`}
@@ -181,13 +181,13 @@ export const CustomAgent: StoryFn = () => (
181
181
  </HStack>
182
182
  );
183
183
 
184
- // The six presets plus ten custom agents, as stored looks.
184
+ // The presets plus custom agents, as stored looks: 16 in all.
185
185
  const TEAM = [
186
186
  ...CAST.map(p => ({
187
187
  id: p.id,
188
188
  look: { v: 1 as const, shape: p.shape, color: p.color, eyes: p.eyes, prop: p.prop },
189
189
  })),
190
- ...Array.from({ length: 10 }, (_, i) => ({
190
+ ...Array.from({ length: 16 - CAST.length }, (_, i) => ({
191
191
  id: `custom-${i}`,
192
192
  look: defaultLook(`team-agent-${i}`),
193
193
  })),
@@ -289,9 +289,9 @@ export const Inviting: StoryFn = () => {
289
289
  <VStack gap={24} align='center'>
290
290
  <HStack gap={24}>
291
291
  <AgentAvatar
292
- data-testid='agent-avatar-invite-mend'
293
- agent='mend'
294
- seed='mend'
292
+ data-testid='agent-avatar-invite-acquit'
293
+ agent='acquit'
294
+ seed='acquit'
295
295
  size={72}
296
296
  state='invite'
297
297
  live
@@ -322,8 +322,8 @@ export const Activation: StoryFn = () => {
322
322
  <VStack gap={16} align='center'>
323
323
  <AgentAvatar
324
324
  data-testid='agent-avatar-activation'
325
- agent='probe'
326
- seed='probe'
325
+ agent='bard'
326
+ seed='bard'
327
327
  size={120}
328
328
  shadow
329
329
  live
@@ -439,15 +439,15 @@ export const ReducedMotion: StoryFn = () => {
439
439
  ### ../lib/agent-characters/data.gen.ts
440
440
 
441
441
  ```tsx
442
- // GENERATED by scripts/agent-avatars/export-data.ts from the handoff data (reference look v14). Do not edit.
443
- // Source export: 2026-11-04, Playwright (playwright-core 1.58.2) with Chrome 156 headless, 1440 x 900 viewport, deviceScaleFactor 2; values read from the page's own constants and functions at runtime
442
+ // GENERATED by scripts/agent-avatars/export-data.ts from the handoff data (reference look v17). Do not edit.
443
+ // Source export: 2026-11-11, look v17, Playwright (playwright-core 1.63.0) with Chrome 157 headless, 1440 x 900 viewport, deviceScaleFactor 2; values read from the page's own constants and functions at runtime
444
444
 
445
445
  // Id unions: the page's own ids (07 §6.2). `cyan` is labelled «teal».
446
446
  export type AgentShapeId = 'dome' | 'gumdrop' | 'cushion' | 'pebble' | 'capsule' | 'cloud' | 'egg' | 'mochi' | 'kettle' | 'mug' | 'padlock' | 'safe';
447
447
  export type AgentColorId = 'coral' | 'cobalt' | 'sky' | 'cyan' | 'lilac' | 'heather' | 'pink' | 'sand' | 'toffee' | 'powder' | 'lavender' | 'blush' | 'butter' | 'mint' | 'sage' | 'petrol' | 'plum' | 'cocoa' | 'olive' | 'graphite' | 'stone' | 'oat';
448
448
  export type AgentEyeStyle = 'round' | 'oval' | 'tall' | 'sleepy';
449
- export type AgentPropId = 'antennae' | 'dish' | 'glasses' | 'seam' | 'beanie' | 'headlamp' | 'periscope' | 'magnifier' | 'pennant' | 'flowerclip' | 'plaster' | 'sprout' | 'badge' | 'windkey' | 'monocle' | 'none';
450
- export type AgentCharacterId = 'wally' | 'radar' | 'sift' | 'mend' | 'trim' | 'probe';
449
+ export type AgentPropId = 'antennae' | 'dish' | 'glasses' | 'seam' | 'beanie' | 'headlamp' | 'periscope' | 'magnifier' | 'pennant' | 'flowerclip' | 'plaster' | 'sprout' | 'badge' | 'windkey' | 'monocle' | 'quill' | 'none';
450
+ export type AgentCharacterId = 'wally' | 'radar' | 'sift' | 'acquit' | 'trim' | 'lens' | 'bard';
451
451
  export type AgentToneId = 'metal' | 'ink' | 'leaf' | 'wood' | 'oat' | 'honey' | 'brass' | 'cocoa' | 'glass' | 'beige';
452
452
 
453
453
  /** A stored look: four ids and a schema version, so a later kit change can migrate stored looks. */
@@ -459,7 +459,7 @@ export interface AgentLook {
459
459
  prop: AgentPropId;
460
460
  }
461
461
 
462
- /** A preset: a look plus its default name, role and template (null: Wally, and Probe until its template exists). */
462
+ /** A preset: a look plus its default name, role and template (null: Wally, and an agent whose template does not exist yet). */
463
463
  export interface AgentPreset extends Omit<AgentLook, 'v'> {
464
464
  id: AgentCharacterId;
465
465
  name: string;
@@ -563,6 +563,7 @@ export const PROP_IDS: AgentPropId[] = [
563
563
  "badge",
564
564
  "windkey",
565
565
  "monocle",
566
+ "quill",
566
567
  "none"
567
568
  ];
568
569
 
@@ -1008,6 +1009,10 @@ export const PROPS: [AgentPropId, string][] = [
1008
1009
  "monocle",
1009
1010
  "Monocle"
1010
1011
  ],
1012
+ [
1013
+ "quill",
1014
+ "Quill"
1015
+ ],
1011
1016
  [
1012
1017
  "none",
1013
1018
  "No prop"
@@ -1021,7 +1026,8 @@ export const GLYPH_PROPS: ReadonlySet<string> = new Set([
1021
1026
  "periscope",
1022
1027
  "pennant",
1023
1028
  "sprout",
1024
- "windkey"
1029
+ "windkey",
1030
+ "quill"
1025
1031
  ]);
1026
1032
 
1027
1033
  export const CAST: AgentPreset[] = [
@@ -1056,8 +1062,8 @@ export const CAST: AgentPreset[] = [
1056
1062
  "prop": "glasses"
1057
1063
  },
1058
1064
  {
1059
- "id": "mend",
1060
- "name": "Mend",
1065
+ "id": "acquit",
1066
+ "name": "Acquit",
1061
1067
  "role": "False Positive Resolver",
1062
1068
  "templateId": "fp-resolver",
1063
1069
  "shape": "pebble",
@@ -1076,18 +1082,28 @@ export const CAST: AgentPreset[] = [
1076
1082
  "prop": "windkey"
1077
1083
  },
1078
1084
  {
1079
- "id": "probe",
1080
- "name": "Probe",
1081
- "role": "Exploitability Verifier",
1085
+ "id": "lens",
1086
+ "name": "Lens",
1087
+ "role": "API Posture Reviewer",
1082
1088
  "templateId": null,
1083
- "shape": "egg",
1084
- "color": "olive",
1085
- "eyes": "round",
1086
- "prop": "headlamp"
1089
+ "shape": "mochi",
1090
+ "color": "mint",
1091
+ "eyes": "tall",
1092
+ "prop": "periscope"
1093
+ },
1094
+ {
1095
+ "id": "bard",
1096
+ "name": "Bard",
1097
+ "role": "Security Posture Briefer",
1098
+ "templateId": null,
1099
+ "shape": "cloud",
1100
+ "color": "powder",
1101
+ "eyes": "oval",
1102
+ "prop": "quill"
1087
1103
  }
1088
1104
  ];
1089
1105
 
1090
- /** propDef() for the six presets, keyed `shape|hex|prop`; any other look needs the AgentLookBuilder entry. */
1106
+ /** propDef() for the presets, keyed `shape|hex|prop`; any other look needs the AgentLookBuilder entry. */
1091
1107
  export const PRESET_PROPS: Partial<Record<string, PropDef>> = {
1092
1108
  "dome|#FF4D2E|antennae": {
1093
1109
  "layers": [
@@ -1199,34 +1215,59 @@ export const PRESET_PROPS: Partial<Record<string, PropDef>> = {
1199
1215
  "py": 10
1200
1216
  }
1201
1217
  },
1202
- "egg|#7E7C48|headlamp": {
1218
+ "mochi|#A8DCC8|periscope": {
1203
1219
  "layers": [
1204
1220
  {
1205
- "d": "M34.62 33.55L38.22 32.61L41.85 31.81L45.48 31.16L49.11 30.65L52.74 30.29L56.37 30.07L60 30L63.63 30.07L67.26 30.29L70.89 30.65L74.52 31.16L78.15 31.81L81.78 32.61L85.38 33.55A1.5 1.5 0 0 1 84.62 36.45L81.08 35.53L77.56 34.76L74.05 34.12L70.54 33.63L67.02 33.28L63.51 33.07L60 33L56.49 33.07L52.98 33.28L49.46 33.63L45.95 34.12L42.44 34.76L38.92 35.53L35.38 36.45A1.5 1.5 0 0 1 34.62 33.55Z",
1206
- "col": "#262A36",
1221
+ "d": "M59 54L59 33A3 3 0 0 1 65 33L65 54A3 3 0 0 1 59 54Z",
1222
+ "col": "#A3ABBB",
1207
1223
  "mat": "vinyl"
1208
1224
  },
1209
1225
  {
1210
- "d": "M57 25H63A4 4 0 0 1 67 29V32A4 4 0 0 1 63 36H57A4 4 0 0 1 53 32V29A4 4 0 0 1 57 25Z",
1226
+ "d": "M62.5 23H69.5A3.5 3.5 0 0 1 73 26.5V29.5A3.5 3.5 0 0 1 69.5 33H62.5A3.5 3.5 0 0 1 59 29.5V26.5A3.5 3.5 0 0 1 62.5 23Z",
1211
1227
  "col": "#A3ABBB",
1212
1228
  "mat": "vinyl"
1213
1229
  },
1214
1230
  {
1215
- "d": "M55.4 30.5A4.6 3.8 0 1 1 64.6 30.5A4.6 3.8 0 1 1 55.4 30.5Z",
1216
- "col": "#EEE5D6",
1231
+ "d": "M67.8 28A2.2 3.2 0 1 1 72.2 28A2.2 3.2 0 1 1 67.8 28Z",
1232
+ "col": "#262A36",
1217
1233
  "mat": "vinyl"
1218
1234
  }
1219
1235
  ],
1220
- "deco": [
1236
+ "deco": [],
1237
+ "anim": {
1238
+ "type": "sway",
1239
+ "px": 62,
1240
+ "py": 54
1241
+ },
1242
+ "fid": {
1243
+ "k": "turn",
1244
+ "px": 62,
1245
+ "py": 54
1246
+ }
1247
+ },
1248
+ "cloud|#B9D7F0|quill": {
1249
+ "layers": [
1250
+ {
1251
+ "d": "M66.35 40.76L68.24 39.85L69.7 38.82L70.9 37.7L71.93 36.51L72.82 35.25L73.61 33.92L74.31 32.52L74.95 31.06L75.54 29.53L76.09 27.94L76.63 26.3L77.15 24.6L77.67 22.84L78.18 21.02L78.67 19.13L79 17L79 17L77.21 17.74L75.57 18.66L74 19.68L72.49 20.78L71.05 21.95L69.67 23.2L68.36 24.51L67.15 25.89L66.03 27.33L65.01 28.84L64.12 30.42L63.37 32.06L62.78 33.75L62.37 35.51L62.2 37.33L62.38 39.24Z",
1252
+ "col": "#E8B54E",
1253
+ "mat": null
1254
+ },
1221
1255
  {
1222
- "s": "<path class=\"beam\" d=\"M56 28L44 -6L76 -6L64 28Z\" fill=\"#FFF6D6\" opacity=\"0\"/>"
1256
+ "d": "M60.3 51.93L60.46 50.41L60.68 48.87L60.96 47.32L61.31 45.77L61.7 44.22L62.16 42.67L62.67 41.11L63.23 39.57L63.85 38.02L64.52 36.48L65.24 34.95L66 33.43L66.82 31.92L67.68 30.42L68.58 28.93L69.53 27.46L70.52 26.01L71.55 24.58L72.62 23.17L73.72 21.79L74.87 20.43L76.04 19.1A0.7 0.7 0 0 1 77.09 20.02L75.93 21.34L74.81 22.67L73.72 24.03L72.67 25.42L71.66 26.82L70.69 28.24L69.77 29.68L68.88 31.13L68.04 32.6L67.25 34.07L66.5 35.56L65.8 37.06L65.14 38.56L64.54 40.06L63.99 41.57L63.5 43.08L63.05 44.59L62.67 46.1L62.34 47.6L62.06 49.09L61.85 50.58L61.7 52.07A0.7 0.7 0 0 1 60.3 51.93Z",
1257
+ "col": "#5B3E33",
1258
+ "mat": null
1223
1259
  }
1224
1260
  ],
1225
- "anim": null,
1261
+ "deco": [],
1262
+ "anim": {
1263
+ "type": "sway",
1264
+ "px": 61,
1265
+ "py": 52
1266
+ },
1226
1267
  "fid": {
1227
- "k": "flicker",
1268
+ "k": "sway",
1228
1269
  "px": 60,
1229
- "py": 30
1270
+ "py": 48
1230
1271
  }
1231
1272
  }
1232
1273
  };