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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let s,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 n,o,l=Object.create,i=Object.defineProperty,c=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,u=(e,t,a,s)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))m.call(e,r)||r===a||i(e,r,{get:()=>t[r],enumerable:!(s=c(t,r))||s.enumerable});return e},h={},y={$dispatcherGuard:()=>W,$makeReadOnly:()=>E,$reset:()=>$,$structuralCheck:()=>P,c:()=>k,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>N,useRenderCounter:()=>A};for(var f in y)i(h,f,{get:y[f],enumerable:!0});e.exports=u(i({},"__esModule",{value:!0}),h);var w=(r=null!=(s=a("C"))?l(p(s)):{},u(s&&s.__esModule?r:i(r,"default",{value:s,enumerable:!0}),s)),{useRef:g,useEffect:S,isValidElement:b}=w,_=null!=(n=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?n:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),k="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=v;return t[v]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[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 _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=x)return x.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function W(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(x=t),t===C)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(C)}else if(1===e){let e=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===D.length&&(x=null),R(e)}else if(2===e)D.push(t),R(x);else if(3===e){let e=D.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 $(e){for(let t=0;t<e.length;t++)e[t]=v}function E(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var N=new Map;function T(){for(let e of N.values())e.forEach(e=>{e.count=0})}function A(e){let t=g(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let a,s={count:0};null==(a=N.get(e))&&(a=new Set,N.set(e,a)),a.add(s),t.current=s}return()=>{var a;let s;null!==t.current&&(a=t.current,null!=(s=N.get(e))&&s.delete(a))}})}var M=new Set;function P(e,t,a,s,r,n){function o(e,t,o,l){let i=`${s}:${n} [${r}] ${a}${o} changed from ${e} to ${t} at depth ${l}`;M.has(i)||(M.add(i),console.error(i))}!function e(t,a,s,r){if(!(r>2)){if(t!==a)if(typeof t!=typeof a)o(`type ${typeof t}`,`type ${typeof a}`,s,r);else if("object"==typeof t){let n=Array.isArray(t),l=Array.isArray(a);if(null===t&&null!==a)o("null",`type ${typeof a}`,s,r);else if(null===a)o(`type ${typeof t}`,"null",s,r);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)o(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,s,r);else for(let[n,l]of t)a.has(n)?e(l,a.get(n),`${s}.get(${n})`,r+1):o(`Map instance with key ${n}`,`Map instance without key ${n}`,s,r);else o("Map instance","other value",s,r);else if(a instanceof Map)o("other value","Map instance",s,r);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)o(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,s,r);else for(let e of a)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,s,r);else o("Set instance","other value",s,r);else if(a instanceof Set)o("other value","Set instance",s,r);else if(n||l)if(n!==l)o(`type ${n?"array":"object"}`,`type ${l?"array":"object"}`,s,r);else if(t.length!==a.length)o(`array with length ${t.length}`,`array with length ${a.length}`,s,r);else for(let n=0;n<t.length;n++)e(t[n],a[n],`${s}[${n}]`,r+1);else if(b(t)||b(a))b(t)!==b(a)?o(`type ${b(t)?"React element":"object"}`,`type ${b(a)?"React element":"object"}`,s,r):t.type!==a.type?o(`React element of type ${t.type}`,`React element of type ${a.type}`,s,r):e(t.props,a.props,`[props of ${s}]`,r+1);else{for(let e in a)e in t||o(`object without key ${e}`,`object with key ${e}`,s,r);for(let n in t)n in a?e(t[n],a[n],`${s}.${n}`,r+1):o(`object with key ${n}`,`object without key ${n}`,s,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,s,r):t!==a&&o(t,a,s,r)}}}(e,t,"",0)}},p(e,t,a){let s=new WeakMap,r=new WeakMap;function n(e,t,a){let n=t,o=a;if("object"==typeof n&&null!==n&&"$$typeof"in n&&n.$$typeof===Symbol.for("react.context")&&"Provider"in n&&(n=n.Provider),"function"==typeof n&&null!=o.ref&&!n.prototype?.isReactComponent){let t=n,a=s.get(e);a||(a=new WeakMap,s.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)),n=r}if("string"==typeof n&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof n)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof n&&null!=o.ref&&(n=function(e,t){let a=r.get(e);a||(a=new Map,r.set(e,a));let s=a.get(t);if(s)return s;let n=e.forwardRef((a,s)=>{let r=e.useRef(null);if(!r.current||r.current.original!==s){let e;r.current={original:s,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof s){let a=s(t);e="function"==typeof a?a:void 0}else s&&(s.current=t)}}}return e.createElement(t,{...a,ref:r.current.callback})});return n.displayName=`CanvasHost(${t})`,a.set(t,n),n}(e,n)),{type:n,props:o}}function o(e){let t=(t,a,s)=>{let r=n(e,t,a??{});return e.createElement(r.type,void 0===s?r.props:{...r.props,key:s})};return{jsx:t,jsxs:(t,a,s)=>{let r=n(e,t,a??{}),{children:o,...l}=r.props;return e.createElement(r.type,void 0===s?l:{...l,key:s},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function l(e){return{...e,createElement:(t,a,...s)=>{let r=n(e,t,a??{});return e.createElement(r.type,r.props,...s)},cloneElement:(t,a,...s)=>{let r=e.cloneElement(t,a??void 0,...s),o=r.ref,l=n(e,r.type,{...r.props,ref:o});return l.type===r.type&&"string"!=typeof r.type?r:e.createElement(l.type,{...l.props,key:r.key})}}}a.d(t,{MA:()=>o,YJ:()=>l})},C(e,t,a){a.r(t);let s=(0,a("p").YJ)(window.React),{Children:r,Component:n,Fragment:o,Profiler:l,PureComponent:i,StrictMode:c,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:u,createContext:h,createElement:y,createFactory:f,createRef:w,forwardRef:g,isValidElement:S,lazy:b,memo:_,startTransition:v,unstable_act:k,useCallback:C,useContext:x,useDebugValue:R,useDeferredValue:D,useEffect:W,useId:$,useImperativeHandle:E,useInsertionEffect:N,useLayoutEffect:T,useMemo:A,useReducer:M,useRef:P,useState:I,useSyncExternalStore:O,useTransition:j,version:z,use:L}=s;a.d(t,{},{Children:r,Component:n,Fragment:o,Profiler:l,PureComponent:i,StrictMode:c,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:u,createContext:h,createElement:y,createFactory:f,createRef:w,default:s,forwardRef:g,isValidElement:S,lazy:b,memo:_,startTransition:v,unstable_act:k,use:L,useCallback:C,useContext:x,useDebugValue:R,useDeferredValue:D,useEffect:W,useId:$,useImperativeHandle:E,useInsertionEffect:N,useLayoutEffect:T,useMemo:A,useReducer:M,useRef:P,useState:I,useSyncExternalStore:O,useTransition:j,version:z})}},t={};function a(s){var r=t[s];if(void 0!==r)return r.exports;var n=t[s]={exports:{}};return e[s](n,n.exports,a),n.exports}a.d=(e,t,s)=>{var r=(t,s)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[s]:t[r]})};r(t,"get"),r(s,"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:s,Fragment:r}=(0,a("p").MA)(window.React);var n=a("vD"),o=a("C");let l=new Set(["pending","running","awaiting-approval"]),i=(e,t)=>{let a=e.findIndex(e=>e.id===t.id);return a<0?[...e,t]:e.map((e,s)=>s===a?t:e)},c=e=>"chain-of-thought"===e.type,d=(e,t)=>e.some(e=>e.id===t||d(e.steps??[],t)),p=(e,t)=>{let a=e.map(e=>{let a=e.steps&&p(e.steps,t);return t(a===e.steps?e:{...e,steps:a})});return a.every((t,a)=>t===e[a])?e:a},m=(e,t)=>{let a=e.parts.map(e=>{if(!c(e))return e;let a=t(e.steps);return a===e.steps?e:{...e,steps:a}});return a.every((t,a)=>t===e.parts[a])?e:{...e,parts:a}},u=(e,t)=>m(e,e=>p(e,e=>l.has(e.status)?{...e,status:t}:e)),h=(e,t,a="streaming")=>{let s=`${(e=>{for(let t=e.messages.length-1;t>=0;t--)if(e.messages[t]?.role==="user")return e.messages[t]?.id})(e)??"boot"}:reply`,r=e.messages.find(e=>e.id===s),n=r?.role==="assistant"?r:{role:"assistant",id:s,parts:[]};return{...e,status:a,messages:i(e.messages,t(n))}};function y(e,t){switch(t.t){case"user":return{...e,status:"submitted",messages:i(e.messages,{role:"user",id:t.id,createdAt:t.at,parts:[{type:"text",id:`${t.id}:text`,text:t.text}]})};case"step":return h(e,e=>((e,t,a)=>{let s=t=>e.parts.some(e=>c(e)&&d(e.steps,t));if(s(t.id))return m(e,e=>p(e,e=>e.id===t.id?{...t,steps:t.steps??e.steps}:e));if(a&&s(a))return m(e,e=>p(e,e=>e.id===a?{...e,steps:[...e.steps??[],t]}:e));let r=[...e.parts].reverse().find(e=>"approval"!==e.type);return r&&c(r)?{...e,parts:e.parts.map(e=>e===r?{...r,steps:[...r.steps,t]}:e)}:{...e,parts:[...e.parts,{type:"chain-of-thought",id:`${e.id}:cot:${e.parts.length}`,steps:[t]}]}})(e,t.step,t.parentId));case"text":return h(e,e=>{let a=e.parts[e.parts.length-1];return a?.type==="text"?{...e,parts:[...e.parts.slice(0,-1),{...a,text:a.text+t.delta}]}:{...e,parts:[...e.parts,{type:"text",id:`${e.id}:text:${e.parts.length}`,text:t.delta}]}});case"approval":return h(e,e=>{let a={...e,parts:i(e.parts,t.approval)};if("pending"===t.approval.status)return a;let s="approved"===t.approval.status?"done":"denied";return m(a,e=>p(e,e=>"awaiting-approval"===e.status?{...e,status:s}:e))});case"summary":return h(e,e=>{let a=e.parts.find(c);return a?{...e,parts:e.parts.map(e=>e===a?{...a,summary:t.text}:e)}:e});case"error":return h(e,e=>{let a=u(e,"error");return{...a,parts:i(a.parts,{type:"error",id:`${e.id}:error`,text:t.text,retryable:!0})}},"error");case"end":return t.stopped?h(e,e=>{let t;return{...t=u(e,"cancelled"),parts:t.parts.map(e=>"approval"===e.type&&"pending"===e.status?{...e,status:"rejected",resolvedLabel:"Cancelled"}:e)}},"ready"):{...e,status:"ready"};default:return e}}let f=e=>e.match(/\S+\s*/g)??[],w="The user wants the noisiest attack sources. I will query the last 24 hours of attack events, check which applications they hit, then read the policy to see what is already blocked.",g="Over the last 24 hours `api.example.com` received 1,204 attacks, mostly SQL injection from 3 IPs.\n\nTwo of those IPs are already on the denylist. I can propose a rule for the third one, `203.0.113.7`.",S=(e,t,a)=>({id:"reasoning",kind:"reasoning",status:e,label:t,content:a}),b=(e,t,a,s,r)=>[[500,{t:"step",step:{id:e,kind:"tool",icon:t,status:"running",label:a}}],[900,{t:"step",step:{id:e,kind:"tool",icon:t,status:"done",label:s,metric:r}}]],_=[[400,{t:"step",step:S("running","Thinking...")}],...f(w).map((e,t,a)=>[30,{t:"step",step:S("running","Thinking...",a.slice(0,t+1).join(""))}]),[200,{t:"step",step:S("done","Thought for 3s",w)}],...b("query","query","Querying attack events...","Queried attack events","1,204"),...b("apps","scan","Checking applications...","Checked 3 applications"),...b("policy","read","Reading the policy for api.example.com...","Read the policy for api.example.com"),...f(g).map((e,t)=>[0===t?400:30,{t:"text",delta:e}]),[300,{t:"summary",text:"Worked for 12s"}],[100,{t:"end"}]],v=(e,t,a)=>({role:"user",id:e,createdAt:a,parts:[{type:"text",id:`${e}:text`,text:t}]}),k={messages:[],status:"ready",suggestions:[{id:"top-attacks",label:"Show top attacks today"},{id:"blocked",label:"Which requests were blocked?",prompt:"Which requests were blocked in the last hour?"},{id:"rule",label:"Create a mitigation rule"}]},C={status:"ready",messages:[v("u1","Show me the top attacks from the last 24 hours","2026-10-21T09:00:00.000Z"),{role:"assistant",id:"u1:reply",createdAt:"2026-10-21T09:00:12.000Z",parts:[{type:"chain-of-thought",id:"u1:reply:cot:0",summary:"Worked for 12s",steps:[S("done","Thought for 3s",w),{id:"query",kind:"tool",icon:"query",status:"done",label:"Queried attack events",metric:"1,204"},{id:"apps",kind:"tool",icon:"scan",status:"done",label:"Checked 3 applications"}]},{type:"text",id:"u1:reply:text:1",text:g}]},v("u2","Which of them were blocked?","2026-10-21T09:01:00.000Z"),{role:"assistant",id:"u2:reply",createdAt:"2026-10-21T09:01:05.000Z",feedback:"positive",parts:[{type:"chain-of-thought",id:"u2:reply:cot:0",steps:[{id:"reasoning",kind:"reasoning",status:"done",label:"Thought for 2s"}]},{type:"text",id:"u2:reply:text:1",text:"1,019 of the 1,204 attacks were blocked by the `sqli-default` rule. The other 185 came from `203.0.113.7`, which is not on the denylist yet."}]}],suggestions:[{id:"deny",label:"Add 203.0.113.7 to the denylist"},{id:"details",label:"Show attack details"}],permissions:[{id:"deny",title:"propose_add_to_denylist",description:"Propose a denylist entry for an IP",allowed:!0},{id:"rules",title:"create_mitigation_rule",allowed:!1}]},x={status:"ready",messages:[v("u1","Block 203.0.113.7 for a day"),{role:"assistant",id:"u1:reply",parts:[{type:"chain-of-thought",id:"u1:reply:cot:0",steps:[{id:"policy",kind:"tool",icon:"read",status:"done",label:"Read the policy for api.example.com"},{id:"deny",kind:"tool",name:"propose_add_to_denylist",icon:"create",status:"awaiting-approval",label:"Proposing a denylist entry..."}]},{type:"approval",id:"u1:reply:approval",status:"pending",content:'Wally wants to run `propose_add_to_denylist`:\n\n```json\n{ "ip": "203.0.113.7", "duration": "24h" }\n```'}]}]},R={status:"error",messages:[v("u1","Show me the top attacks from the last 24 hours"),{role:"assistant",id:"u1:reply",parts:[{type:"error",id:"u1:reply:error",text:"Wally couldn't reach the attack store.",retryable:!0}]}]};function D(e){let t,a,s,r,l,i,c,d,p=(0,n.c)(17);p[0]!==e?(t=void 0===e?{}:e,p[0]=e,p[1]=t):t=p[1];let{initial:m,script:u,speed:h}=t,f=void 0===m?k:m,w=void 0===u?_:u,g=void 0===h?1:h,[S,b]=(0,o.useReducer)(y,f),v=(0,o.useRef)(void 0);p[2]===Symbol.for("react.memo_cache_sentinel")?(a=()=>()=>clearTimeout(v.current),s=[],p[2]=a,p[3]=s):(a=p[2],s=p[3]),(0,o.useEffect)(a,s),p[4]!==w||p[5]!==g?(r=e=>{let t=w[e];if(!t)return;let[a,s]=t;v.current=setTimeout(()=>{b(s),r(e+1)},a*g)},p[4]=w,p[5]=g,p[6]=r):r=p[6],p[7]!==r||p[8]!==S?(l=e=>{clearTimeout(v.current);let t=S.messages.filter(W).length+1;b({t:"user",id:`u${t}`,text:e}),r(0)},p[7]=r,p[8]=S,p[9]=l):l=p[9];let C=l;p[10]===Symbol.for("react.memo_cache_sentinel")?(i=()=>{clearTimeout(v.current),b({t:"end",stopped:!0})},p[10]=i):i=p[10];let x=i;p[11]!==S?(c=(e,t)=>{let a;b({t:"approval",approval:{...t,status:e.approved?"approved":"rejected"}}),"submitted"!==(a=S.status)&&"streaming"!==a&&b({t:"end"})},p[11]=S,p[12]=c):c=p[12];let R=c;return p[13]!==R||p[14]!==C||p[15]!==S?(d={snapshot:S,send:C,stop:x,respond:R},p[13]=R,p[14]=C,p[15]=S,p[16]=d):d=p[16],d}function W(e){return"user"===e.role}let $=window.WallarmDS.Icons.Ellipsis,E=window.WallarmDS.Icons.History,N=window.WallarmDS.Icons.Paperclip,T=window.WallarmDS.Icons.Plus,A=window.WallarmDS.Icons.X,M=window.WallarmDS.Button,P=window.WallarmDS.Chat,I=window.WallarmDS.ChatFooter,O=window.WallarmDS.ChatHeader,j=window.WallarmDS.ChatHeaderTitle,z=window.WallarmDS.ChatTrigger,L=window.WallarmDS.ChatInput,F=window.WallarmDS.ChatInputSubmit,V=window.WallarmDS.ChatInputTextarea,U=window.WallarmDS.ConversationContent,q=window.WallarmDS.Conversation,Z=window.WallarmDS.ConversationScrollButton,H=window.WallarmDS.Copyable,B=window.WallarmDS.CopyableIcon,Q=window.WallarmDS.Drawer,Y=window.WallarmDS.DrawerClose,G=window.WallarmDS.DrawerContent,J=window.WallarmDS.DrawerTitle,K=window.WallarmDS.DrawerTrigger,X=window.WallarmDS.DropdownMenu,ee=window.WallarmDS.DropdownMenuContent,et=window.WallarmDS.DropdownMenuItem,ea=window.WallarmDS.DropdownMenuTrigger,es=window.WallarmDS.MessageAction,er=window.WallarmDS.createListCollection,en=window.WallarmDS.Select,eo=window.WallarmDS.SelectButton,el=window.WallarmDS.SelectContent,ei=window.WallarmDS.SelectOption,ec=window.WallarmDS.SelectOptionIndicator,ed=window.WallarmDS.SelectOptionText,ep=window.WallarmDS.SelectPositioner,em=window.WallarmDS.Separator,eu=window.WallarmDS.ChatMessageView,eh=window.WallarmDS.ChatPartView,ey=window.WallarmDS.ChatViewProvider,ef=window.WallarmDS.copyTextOf,ew=window.WallarmDS.deriveChatState,eg=window.WallarmDS.WallyAssistant,eS={title:"AI/WallyAssistant",component:eg,parameters:{layout:"centered",docs:{description:{component:"The closed Wally panel: pass a `ChatSnapshot` (messages, status, suggestions, permissions, context) and callbacks, and it renders the whole Figma chat — header, stick-to-bottom log, greeting, chain of thought, docked approval and input. It holds no agent state: the app folds its stream into a new snapshot on every delta. Send is blocked while the last message has a pending approval (typing still works), and a resolved card stays docked until the next message. Every rule lives in exported pieces — `ChatViewProvider`, `deriveChatState`, `ChatMessageView`, `ChatPartView` — so a custom layout reuses them (Custom Layout). Seams like `renderPart`, `renderStepContent` and `renderMessageActions` hand back the default rendering. Stories are driven by `useMockWally()` from `WallyAssistant/mocks` and keep feedback and permissions in app state. Messages render with the default `AssistantMessageMarkdown`, and fenced code highlights with the lazy Prism adapter WallyAssistant mounts unless the app provides a `CodeSnippetAdapterProvider`."}}}},eb=e=>new Date(e).toISOString().slice(11,16),e_=new WeakMap,ev=(e,t)=>{let a=e_.get(e);if(a&&a.feedback===t)return a.message;let s={...e,feedback:t};return e_.set(e,{feedback:t,message:s}),s},ek={...C,messages:[...C.messages,{role:"user",id:"u3",createdAt:"2026-10-21T09:02:00.000Z",parts:[{type:"text",id:"u3:text",text:"Summarize the attacks"}]},{role:"assistant",id:"u3:reply",createdAt:"2026-10-21T09:02:04.000Z",parts:[{type:"chain-of-thought",id:"u3:reply:cot:0",steps:[{id:"search",kind:"tool",name:"search_attacks",icon:"query",status:"done",label:"Searched attacks",metric:"3 sources"}]},{type:"custom",id:"u3:reply:summary",kind:"wallarm.attack-summary",data:{total:1204,blocked:1019}},{type:"text",id:"u3:reply:text",text:"Most of it is SQL injection from `203.0.113.7`."}]}]},eC=[{ip:"203.0.113.7",attacks:185},{ip:"198.51.100.4",attacks:610},{ip:"192.0.2.10",attacks:409}],ex=er({items:[{value:"attacks",label:"Top attacks today"},{value:"rules",label:"Rule tuning for API v2"}]}),eR=e=>{if("custom"!==e.type||"wallarm.attack-summary"!==e.kind)return;let{total:a,blocked:s}=e.data;return t("div",{"data-testid":"attack-summary",className:"rounded-8 border border-border-primary-light p-12 text-sm text-text-primary",children:[s," of ",a," attacks blocked"]})},eD=a=>"search_attacks"===a.name?e("table",{"data-testid":"search-table",className:"text-xs text-text-secondary",children:e("tbody",{children:eC.map(a=>t("tr",{children:[e("td",{className:"pr-12 font-mono",children:a.ip}),e("td",{children:a.attacks})]},a.ip))})}):void 0,eW=(a,s)=>"user"===a.role?void 0:t(r,{children:[e(H,{text:ef(a),children:e(es,{"aria-label":"Kopieren","data-analytics-id":"wally.copy",children:e(B,{})})}),s.like,s.dislike,t(X,{positioning:{placement:"bottom-end"},children:[e(ea,{asChild:!0,children:e(es,{"aria-label":"More actions","data-analytics-id":"wally.more",children:e($,{})})}),t(ee,{children:[t(et,{"data-analytics-id":"wally.report",children:["Report ",a.id]}),e(et,{children:"Share"})]})]}),s.timestamp]}),e$=(a,s)=>"user"===a.role?void 0:t(r,{children:[e(H,{text:ef(a),children:e(es,{"aria-label":"Copy","data-analytics-id":"wally.copy",children:e(B,{})})}),s.like,s.dislike,s.timestamp]}),eE=t=>{let a,s,r,l,i,c,d=(0,n.c)(17),{speed:p}=t;d[0]!==p?(a={initial:C,speed:p},d[0]=p,d[1]=a):a=d[1];let m=D(a);d[2]===Symbol.for("react.memo_cache_sentinel")?(s={},d[2]=s):s=d[2];let[u,h]=(0,o.useState)(s),[y,f]=(0,o.useState)(C.permissions);if(d[3]!==u||d[4]!==m.snapshot.messages){let e;d[6]!==u?(e=e=>"assistant"===e.role&&e.id in u?ev(e,u[e.id]??null):e,d[6]=u,d[7]=e):e=d[7],r=m.snapshot.messages.map(e),d[3]=u,d[4]=m.snapshot.messages,d[5]=r}else r=d[5];let w=r;d[8]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{h(a=>({...a,[e.id]:t}))},d[8]=l):l=d[8];let g=l;d[9]===Symbol.for("react.memo_cache_sentinel")?(i=(e,t)=>{f(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},d[9]=i):i=d[9];let S=i;return d[10]!==w||d[11]!==y||d[12]!==m.respond||d[13]!==m.send||d[14]!==m.snapshot||d[15]!==m.stop?(c=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally",...m.snapshot,messages:w,permissions:y,formatTimestamp:eb,onSubmit:m.send,onStop:m.stop,onApprovalRespond:m.respond,onFeedback:g,onPermissionChange:S})}),d[10]=w,d[11]=y,d[12]=m.respond,d[13]=m.send,d[14]=m.snapshot,d[15]=m.stop,d[16]=c):c=d[16],c};eE.args={speed:1},eE.argTypes={speed:{control:{type:"range",min:0,max:3,step:.25}}};let eN=()=>{let a,s,r,l,i,c,d,p,m,u,h,y,f,w,g,S,b,_,v,k,x,R,W,$,E=(0,n.c)(53);E[0]===Symbol.for("react.memo_cache_sentinel")?(a={initial:C},E[0]=a):a=E[0];let N=D(a),[T,A]=(0,o.useState)(""),{messages:M,status:z}=N.snapshot;if(E[1]!==M||E[2]!==z||E[3]!==N){let a,n=(c=ew(M,z,"docked")).rows[c.rows.length-1];i=e=>{c.awaitingApproval||(N.send(e),A(""))},l=ey,S=z,b="docked",p=eb,m=N.respond,g="h-screen",r=P,h="wally",y=c.empty?"strong":"subtle",E[20]===Symbol.for("react.memo_cache_sentinel")?(f=e(O,{children:e(j,{label:"Wally workspace"})}),E[20]=f):f=E[20],E[21]===Symbol.for("react.memo_cache_sentinel")?(a=e(Z,{}),E[21]=a):a=E[21],w=t(q,{autoScrollKey:c.lastUserMessageId,children:[e(U,{"aria-busy":c.busy,contentClassName:"mx-auto w-full max-w-768",children:c.rows.map((t,a)=>e(eu,{message:t,index:a,isLast:a===c.rows.length-1},t.id))}),a]}),s=I,d="mx-auto w-full max-w-768",u=n&&c.dockedApprovals.map(t=>e(eh,{part:t,message:n,isLast:!0,placement:"docked"},t.id)),E[1]=M,E[2]=z,E[3]=N,E[4]=s,E[5]=r,E[6]=l,E[7]=i,E[8]=c,E[9]=d,E[10]=p,E[11]=m,E[12]=u,E[13]=h,E[14]=y,E[15]=f,E[16]=w,E[17]=g,E[18]=S,E[19]=b}else s=E[4],r=E[5],l=E[6],i=E[7],c=E[8],d=E[9],p=E[10],m=E[11],u=E[12],h=E[13],y=E[14],f=E[15],w=E[16],g=E[17],S=E[18],b=E[19];E[22]===Symbol.for("react.memo_cache_sentinel")?(_=e(V,{}),E[22]=_):_=E[22];let H=c.awaitingApproval&&!c.running;return E[23]!==H?(v=e(F,{disabled:H}),E[23]=H,E[24]=v):v=E[24],E[25]!==T||E[26]!==i||E[27]!==c.running||E[28]!==v||E[29]!==N.stop?(k=t(L,{value:T,onValueChange:A,onSubmit:i,onStop:N.stop,isRunning:c.running,children:[_,v]}),E[25]=T,E[26]=i,E[27]=c.running,E[28]=v,E[29]=N.stop,E[30]=k):k=E[30],E[31]!==s||E[32]!==d||E[33]!==k||E[34]!==u?(x=t(s,{className:d,children:[u,k]}),E[31]=s,E[32]=d,E[33]=k,E[34]=u,E[35]=x):x=E[35],E[36]!==r||E[37]!==x||E[38]!==h||E[39]!==y||E[40]!==f||E[41]!==w?(R=t(r,{"data-testid":h,background:y,children:[f,w,x]}),E[36]=r,E[37]=x,E[38]=h,E[39]=y,E[40]=f,E[41]=w,E[42]=R):R=E[42],E[43]!==R||E[44]!==g?(W=e("div",{className:g,children:R}),E[43]=R,E[44]=g,E[45]=W):W=E[45],E[46]!==l||E[47]!==p||E[48]!==m||E[49]!==W||E[50]!==S||E[51]!==b?($=e(l,{status:S,approvalPlacement:b,formatTimestamp:p,onApprovalRespond:m,children:W}),E[46]=l,E[47]=p,E[48]=m,E[49]=W,E[50]=S,E[51]=b,E[52]=$):$=E[52],$};function eT(e){return e+1}function eA(a){return t(ei,{item:a,children:[e(ed,{children:a.label}),e(ec,{})]},a.value)}eN.parameters={layout:"fullscreen"};let eM=[{name:"Empty",story:()=>{let t,a,s,r,l,i,c=(0,n.c)(16);c[0]===Symbol.for("react.memo_cache_sentinel")?(t={initial:k},c[0]=t):t=c[0];let d=D(t);c[1]===Symbol.for("react.memo_cache_sentinel")?(a={},c[1]=a):a=c[1];let[p,m]=(0,o.useState)(a),[u,h]=(0,o.useState)(k.permissions);if(c[2]!==p||c[3]!==d.snapshot.messages){let e;c[5]!==p?(e=e=>"assistant"===e.role&&e.id in p?ev(e,p[e.id]??null):e,c[5]=p,c[6]=e):e=c[6],s=d.snapshot.messages.map(e),c[2]=p,c[3]=d.snapshot.messages,c[4]=s}else s=c[4];let y=s;c[7]===Symbol.for("react.memo_cache_sentinel")?(r=(e,t)=>{m(a=>({...a,[e.id]:t}))},c[7]=r):r=c[7];let f=r;c[8]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{h(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},c[8]=l):l=c[8];let w=l;return c[9]!==y||c[10]!==u||c[11]!==d.respond||c[12]!==d.send||c[13]!==d.snapshot||c[14]!==d.stop?(i=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally",...d.snapshot,messages:y,permissions:u,formatTimestamp:eb,onSubmit:d.send,onStop:d.stop,onApprovalRespond:d.respond,onFeedback:f,onPermissionChange:w})}),c[9]=y,c[10]=u,c[11]=d.respond,c[12]=d.send,c[13]=d.snapshot,c[14]=d.stop,c[15]=i):i=c[15],i},meta:eS},{name:"Conversation",story:()=>{let t,a,s,r,l,i,c=(0,n.c)(16);c[0]===Symbol.for("react.memo_cache_sentinel")?(t={initial:C},c[0]=t):t=c[0];let d=D(t);c[1]===Symbol.for("react.memo_cache_sentinel")?(a={},c[1]=a):a=c[1];let[p,m]=(0,o.useState)(a),[u,h]=(0,o.useState)(C.permissions);if(c[2]!==p||c[3]!==d.snapshot.messages){let e;c[5]!==p?(e=e=>"assistant"===e.role&&e.id in p?ev(e,p[e.id]??null):e,c[5]=p,c[6]=e):e=c[6],s=d.snapshot.messages.map(e),c[2]=p,c[3]=d.snapshot.messages,c[4]=s}else s=c[4];let y=s;c[7]===Symbol.for("react.memo_cache_sentinel")?(r=(e,t)=>{m(a=>({...a,[e.id]:t}))},c[7]=r):r=c[7];let f=r;c[8]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{h(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},c[8]=l):l=c[8];let w=l;return c[9]!==y||c[10]!==u||c[11]!==d.respond||c[12]!==d.send||c[13]!==d.snapshot||c[14]!==d.stop?(i=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally",...d.snapshot,messages:y,permissions:u,formatTimestamp:eb,onSubmit:d.send,onStop:d.stop,onApprovalRespond:d.respond,onFeedback:f,onPermissionChange:w})}),c[9]=y,c[10]=u,c[11]=d.respond,c[12]=d.send,c[13]=d.snapshot,c[14]=d.stop,c[15]=i):i=c[15],i},meta:eS},{name:"StreamingSimulation",story:eE,meta:eS},{name:"Approval",story:()=>{let t,a,s,r,l,i,c=(0,n.c)(16);c[0]===Symbol.for("react.memo_cache_sentinel")?(t={initial:x},c[0]=t):t=c[0];let d=D(t);c[1]===Symbol.for("react.memo_cache_sentinel")?(a={},c[1]=a):a=c[1];let[p,m]=(0,o.useState)(a),[u,h]=(0,o.useState)(x.permissions);if(c[2]!==p||c[3]!==d.snapshot.messages){let e;c[5]!==p?(e=e=>"assistant"===e.role&&e.id in p?ev(e,p[e.id]??null):e,c[5]=p,c[6]=e):e=c[6],s=d.snapshot.messages.map(e),c[2]=p,c[3]=d.snapshot.messages,c[4]=s}else s=c[4];let y=s;c[7]===Symbol.for("react.memo_cache_sentinel")?(r=(e,t)=>{m(a=>({...a,[e.id]:t}))},c[7]=r):r=c[7];let f=r;c[8]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{h(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},c[8]=l):l=c[8];let w=l;return c[9]!==y||c[10]!==u||c[11]!==d.respond||c[12]!==d.send||c[13]!==d.snapshot||c[14]!==d.stop?(i=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally",...d.snapshot,messages:y,permissions:u,formatTimestamp:eb,onSubmit:d.send,onStop:d.stop,onApprovalRespond:d.respond,onFeedback:f,onPermissionChange:w})}),c[9]=y,c[10]=u,c[11]=d.respond,c[12]=d.send,c[13]=d.snapshot,c[14]=d.stop,c[15]=i):i=c[15],i},meta:eS},{name:"ErrorState",story:()=>{let a,s,r,l,i,c,d,p,m=(0,n.c)(20);m[0]===Symbol.for("react.memo_cache_sentinel")?(a={initial:R},m[0]=a):a=m[0];let u=D(a);m[1]===Symbol.for("react.memo_cache_sentinel")?(s={},m[1]=s):s=m[1];let[h,y]=(0,o.useState)(s),[f,w]=(0,o.useState)(R.permissions),[g,S]=(0,o.useState)(0);if(m[2]!==h||m[3]!==u.snapshot.messages){let e;m[5]!==h?(e=e=>"assistant"===e.role&&e.id in h?ev(e,h[e.id]??null):e,m[5]=h,m[6]=e):e=m[6],r=u.snapshot.messages.map(e),m[2]=h,m[3]=u.snapshot.messages,m[4]=r}else r=m[4];let b=r;m[7]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{y(a=>({...a,[e.id]:t}))},m[7]=l):l=m[7];let _=l;m[8]===Symbol.for("react.memo_cache_sentinel")?(i=(e,t)=>{w(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},m[8]=i):i=m[8];let v=i;m[9]===Symbol.for("react.memo_cache_sentinel")?(c=()=>{S(eT)},m[9]=c):c=m[9];let k=c;return m[10]!==g?(d=g?t("p",{className:"text-xs text-text-secondary",children:["Retried ",g,"×"]}):null,m[10]=g,m[11]=d):d=m[11],m[12]!==b||m[13]!==f||m[14]!==d||m[15]!==u.respond||m[16]!==u.send||m[17]!==u.snapshot||m[18]!==u.stop?(p=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally",...u.snapshot,messages:b,permissions:f,formatTimestamp:eb,onSubmit:u.send,onStop:u.stop,onApprovalRespond:u.respond,onFeedback:_,onPermissionChange:v,onRetry:k,footerStart:d})}),m[12]=b,m[13]=f,m[14]=d,m[15]=u.respond,m[16]=u.send,m[17]=u.snapshot,m[18]=u.stop,m[19]=p):p=m[19],p},meta:eS},{name:"Overrides",story:()=>{let a,s,r,l,i,c,d,p,m,u,h,y=(0,n.c)(21);y[0]===Symbol.for("react.memo_cache_sentinel")?(a={initial:ek},y[0]=a):a=y[0];let f=D(a);y[1]===Symbol.for("react.memo_cache_sentinel")?(s={},y[1]=s):s=y[1];let[w,g]=(0,o.useState)(s),[S,b]=(0,o.useState)(ek.permissions);if(y[2]!==w||y[3]!==f.snapshot.messages){let e;y[5]!==w?(e=e=>"assistant"===e.role&&e.id in w?ev(e,w[e.id]??null):e,y[5]=w,y[6]=e):e=y[6],r=f.snapshot.messages.map(e),y[2]=w,y[3]=f.snapshot.messages,y[4]=r}else r=y[4];let _=r;y[7]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{g(a=>({...a,[e.id]:t}))},y[7]=l):l=y[7];let v=l;y[8]===Symbol.for("react.memo_cache_sentinel")?(i=(e,t)=>{b(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},y[8]=i):i=y[8];let k=i;return y[9]===Symbol.for("react.memo_cache_sentinel")?(c=["attacks"],d=e(eo,{variant:"ghost",size:"small",placeholder:"New chat"}),y[9]=c,y[10]=d):(c=y[9],d=y[10]),y[11]===Symbol.for("react.memo_cache_sentinel")?(p=t(en,{collection:ex,defaultValue:c,children:[d,e(ep,{children:e(el,{children:ex.items.map(eA)})})]}),y[11]=p):p=y[11],y[12]===Symbol.for("react.memo_cache_sentinel")?(m=e(M,{variant:"ghost",color:"neutral",size:"small","aria-label":"Datei anhängen",children:e(N,{})}),u={placeholder:"Frag Wally...",input:"Nachricht an Wally",send:"Senden",stop:"Antwort stoppen",disclaimer:"Wally kann sich irren; bitte prüfen.",suggestions:"Vorschläge",feedbackPositive:"Gute Antwort",feedbackNegative:"Schlechte Antwort"},y[12]=m,y[13]=u):(m=y[12],u=y[13]),y[14]!==_||y[15]!==S||y[16]!==f.respond||y[17]!==f.send||y[18]!==f.snapshot||y[19]!==f.stop?(h=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally",...f.snapshot,messages:_,permissions:S,formatTimestamp:eb,onSubmit:f.send,onStop:f.stop,onApprovalRespond:f.respond,onFeedback:v,onPermissionChange:k,renderPart:eR,renderStepContent:eD,renderMessageActions:eW,headerTitle:p,inputTools:m,labels:u})}),y[14]=_,y[15]=S,y[16]=f.respond,y[17]=f.send,y[18]=f.snapshot,y[19]=f.stop,y[20]=h):h=y[20],h},meta:eS},{name:"CustomLayout",story:eN,meta:eS},{name:"InDrawer",story:()=>{let a,s,o,l,i,c,d,p,m=(0,n.c)(12);m[0]===Symbol.for("react.memo_cache_sentinel")?(a={initial:C},m[0]=a):a=m[0];let u=D(a);return m[1]===Symbol.for("react.memo_cache_sentinel")?(s=e(K,{asChild:!0,children:e(z,{"data-testid":"chat-trigger"})}),m[1]=s):s=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"sr-only",children:e(J,{children:"Wally"})}),m[2]=o):o=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(M,{variant:"ghost",color:"neutral",size:"small","aria-label":"New chat",children:e(T,{})}),m[3]=l):l=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(M,{variant:"ghost",color:"neutral",size:"small","aria-label":"Chat history",children:e(E,{})}),c=e(em,{orientation:"vertical"}),m[4]=i,m[5]=c):(i=m[4],c=m[5]),m[6]===Symbol.for("react.memo_cache_sentinel")?(d=t(r,{children:[l,i,c,e(Y,{asChild:!0,children:e(M,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close chat",children:e(A,{})})})]}),m[6]=d):d=m[6],m[7]!==u.respond||m[8]!==u.send||m[9]!==u.snapshot||m[10]!==u.stop?(p=t(Q,{width:480,children:[s,t(G,{children:[o,e(eg,{"data-testid":"wally",...u.snapshot,formatTimestamp:eb,onSubmit:u.send,onStop:u.stop,onApprovalRespond:u.respond,headerActions:d})]})]}),m[7]=u.respond,m[8]=u.send,m[9]=u.snapshot,m[10]=u.stop,m[11]=p):p=m[11],p},meta:eS},{name:"Analytics",story:()=>{let t,a,s,r,l,i,c,d=(0,n.c)(17);d[0]===Symbol.for("react.memo_cache_sentinel")?(t={initial:C},d[0]=t):t=d[0];let p=D(t);d[1]===Symbol.for("react.memo_cache_sentinel")?(a={},d[1]=a):a=d[1];let[m,u]=(0,o.useState)(a),[h,y]=(0,o.useState)(C.permissions);if(d[2]!==m||d[3]!==p.snapshot.messages){let e;d[5]!==m?(e=e=>"assistant"===e.role&&e.id in m?ev(e,m[e.id]??null):e,d[5]=m,d[6]=e):e=d[6],s=p.snapshot.messages.map(e),d[2]=m,d[3]=p.snapshot.messages,d[4]=s}else s=d[4];let f=s;d[7]===Symbol.for("react.memo_cache_sentinel")?(r=(e,t)=>{u(a=>({...a,[e.id]:t}))},d[7]=r):r=d[7];let w=r;d[8]===Symbol.for("react.memo_cache_sentinel")?(l=(e,t)=>{y(a=>a?.map(a=>a.id===e.id?{...a,allowed:t}:a))},d[8]=l):l=d[8];let g=l;return d[9]===Symbol.for("react.memo_cache_sentinel")?(i=e(M,{variant:"ghost",color:"neutral",size:"small","aria-label":"New chat","data-analytics-id":"wally.new-chat",children:e(T,{})}),d[9]=i):i=d[9],d[10]!==f||d[11]!==h||d[12]!==p.respond||d[13]!==p.send||d[14]!==p.snapshot||d[15]!==p.stop?(c=e("div",{className:"h-640 w-480",children:e(eg,{"data-testid":"wally","data-analytics-id":"wally.panel","data-analytics-props":'{"surface":"story"}',...p.snapshot,messages:f,permissions:h,formatTimestamp:eb,onSubmit:p.send,onStop:p.stop,onApprovalRespond:p.respond,onFeedback:w,onPermissionChange:g,headerActions:i,renderMessageActions:e$})}),d[10]=f,d[11]=h,d[12]=p.respond,d[13]=p.send,d[14]=p.snapshot,d[15]=p.stop,d[16]=c):c=d[16],c},meta:eS}];function eP({entry:e}){let{story:t,meta:a}=e,s={...a.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,n=()=>o.default.createElement(r,s),l={args:s,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=n;n=()=>e(t,l)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(n))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,eM.map((e,t)=>o.default.createElement(eP,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,130 @@
+Wally, the mascot for Wallarm’s AI assistant — the mark that signals an AI surface rather than a general-purpose icon, so keep it for the assistant and reach for the icon set for everything else. `simple` is the bare mark and `circle` wraps it in its own badge so it can sit on a coloured surface; both are sized by height from 16px to 64px, with the width following.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `variant` | `"circle" \| "simple"` | no | `simple` |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `type` | `string \| undefined` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `height` | `string \| number \| undefined` | no | — |  |
+| `max` | `string \| number \| undefined` | no | — |  |
+| `min` | `string \| number \| undefined` | no | — |  |
+| `target` | `string \| undefined` | no | — |  |
+| `width` | `string \| number \| undefined` | no | — |  |
+| `href` | `string \| undefined` | no | — |  |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | no | `md` |  |
+
+## Stories
+
+### Basic
+
+Wally at the defaults — `simple` at `md`, which is 24px tall.
+
+Source: WallyIcon/WallyIcon.stories.tsx#Basic
+
+### Styles
+
+The two variants side by side. The badge is what lets the mark keep its edge on a coloured or busy surface; on a plain panel the bare mark is enough.
+
+Source: WallyIcon/WallyIcon.stories.tsx#Styles
+
+### Sizes
+
+`xs` to `xl` in both variants. Worth reading down the columns to see where the detail in the bare mark gives out and the badge stops helping.
+
+Source: WallyIcon/WallyIcon.stories.tsx#Sizes
+
+## Story sources
+
+### WallyIcon/WallyIcon.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { WallyIcon, type WallyIconProps } from './WallyIcon';
+
+const DESCRIPTION = [
+  'Wally, the mascot for Wallarm’s AI assistant — the mark that signals an AI surface rather than a general-purpose icon, so keep it for the assistant and reach for the icon set for everything else.',
+  '`simple` is the bare mark and `circle` wraps it in its own badge so it can sit on a coloured surface; both are sized by height from 16px to 64px, with the width following.',
+].join(' ');
+
+const meta = {
+  title: 'Brand/WallyIcon',
+  component: WallyIcon,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['simple', 'circle'],
+      description: 'Visual style of the icon.',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Height of the icon (width scales proportionally).',
+    },
+  },
+} satisfies Meta<typeof WallyIcon>;
+
+export default meta;
+
+/** Wally at the defaults — `simple` at `md`, which is 24px tall. */
+export const Basic: StoryFn<WallyIconProps> = args => <WallyIcon {...args} />;
+
+Basic.args = {
+  variant: 'simple',
+  size: 'md',
+};
+
+/** The two variants side by side. The badge is what lets the mark keep its edge on a coloured or busy surface; on a plain panel the bare mark is enough. */
+export const Styles: StoryFn<WallyIconProps> = args => (
+  <HStack gap={32} justify='around' align='start'>
+    <VStack gap={8} align='center'>
+      <span className='sb-annotation'>simple</span>
+      <WallyIcon {...args} variant='simple' />
+    </VStack>
+    <VStack gap={8} align='center'>
+      <span className='sb-annotation'>circle</span>
+      <WallyIcon {...args} variant='circle' />
+    </VStack>
+  </HStack>
+);
+
+Styles.args = {
+  size: 'xl',
+};
+
+/** `xs` to `xl` in both variants. Worth reading down the columns to see where the detail in the bare mark gives out and the badge stops helping. */
+export const Sizes: StoryFn<WallyIconProps> = args => (
+  <HStack gap={48} justify='center' align='stretch'>
+    <VStack gap={16} align='center'>
+      <WallyIcon {...args} variant='simple' size='xs' />
+      <WallyIcon {...args} variant='simple' size='sm' />
+      <WallyIcon {...args} variant='simple' size='md' />
+      <WallyIcon {...args} variant='simple' size='lg' />
+      <WallyIcon {...args} variant='simple' size='xl' />
+    </VStack>
+
+    <VStack gap={16} align='center'>
+      <WallyIcon {...args} variant='circle' size='xs' />
+      <WallyIcon {...args} variant='circle' size='sm' />
+      <WallyIcon {...args} variant='circle' size='md' />
+      <WallyIcon {...args} variant='circle' size='lg' />
+      <WallyIcon {...args} variant='circle' size='xl' />
+    </VStack>
+  </HStack>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Brand" 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/WallyIcon/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},d={},y={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>I,c:()=>$,clearRenderCounterRegistry:()=>z,renderCounterRegistry:()=>x,useRenderCounter:()=>j};for(var h in y)c(d,h,{get:y[h],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),d);var g=(a=null!=(n=r("C"))?i(p(n)):{},m(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:v,useEffect:w,isValidElement:R}=g,E=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,b=Symbol.for("react.memo_cache_sentinel"),$="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=b;return t[b]=!0,t},[])},_={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{_[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var S=null;function N(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(S=t),t===_)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(_)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(S=null),N(e)}else if(2===e)C.push(t),N(S);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=b}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function z(){for(let e of x.values())e.forEach(e=>{e.count=0})}function j(e){let t=v(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=x.get(e))&&(r=new Set,x.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=x.get(e))&&n.delete(r))}})}var D=new Set;function I(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;D.has(c)||(D.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(R(t)||R(r))R(t)!==R(r)?o(`type ${R(t)?"React element":"object"}`,`type ${R(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=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!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,forwardRef:v,isValidElement:w,lazy:R,memo:E,startTransition:b,unstable_act:$,useCallback:_,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:z,useMemo:j,useReducer:D,useRef:I,useState:T,useSyncExternalStore:A,useTransition:P,version:W,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:v,isValidElement:w,lazy:R,memo:E,startTransition:b,unstable_act:$,use:L,useCallback:_,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:z,useMemo:j,useReducer:D,useRef:I,useState:T,useSyncExternalStore:A,useTransition:P,version:W})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD");let o=window.WallarmDS.HStack,i=window.WallarmDS.VStack,c=window.WallarmDS.WallyIcon,s={title:"Brand/WallyIcon",component:c,parameters:{layout:"centered",docs:{description:{component:"Wally, the mascot for Wallarm’s AI assistant — the mark that signals an AI surface rather than a general-purpose icon, so keep it for the assistant and reach for the icon set for everything else. `simple` is the bare mark and `circle` wraps it in its own badge so it can sit on a coloured surface; both are sized by height from 16px to 64px, with the width following."}}},argTypes:{variant:{control:"select",options:["simple","circle"],description:"Visual style of the icon."},size:{control:"select",options:["xs","sm","md","lg","xl"],description:"Height of the icon (width scales proportionally)."}}},u=t=>{let r,n=(0,l.c)(2);return n[0]!==t?(r=e(c,{...t}),n[0]=t,n[1]=r):r=n[1],r};u.args={variant:"simple",size:"md"};let p=r=>{let n,a,s,u,p,f=(0,l.c)(9);return f[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation",children:"simple"}),f[0]=n):n=f[0],f[1]!==r?(a=t(i,{gap:8,align:"center",children:[n,e(c,{...r,variant:"simple"})]}),f[1]=r,f[2]=a):a=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(s=e("span",{className:"sb-annotation",children:"circle"}),f[3]=s):s=f[3],f[4]!==r?(u=t(i,{gap:8,align:"center",children:[s,e(c,{...r,variant:"circle"})]}),f[4]=r,f[5]=u):u=f[5],f[6]!==a||f[7]!==u?(p=t(o,{gap:32,justify:"around",align:"start",children:[a,u]}),f[6]=a,f[7]=u,f[8]=p):p=f[8],p};p.args={size:"xl"};var f=r("C");let m=[{name:"Basic",story:u,meta:s},{name:"Styles",story:p,meta:s},{name:"Sizes",story:r=>{let n,a,s,u=(0,l.c)(7);return u[0]!==r?(n=t(i,{gap:16,align:"center",children:[e(c,{...r,variant:"simple",size:"xs"}),e(c,{...r,variant:"simple",size:"sm"}),e(c,{...r,variant:"simple",size:"md"}),e(c,{...r,variant:"simple",size:"lg"}),e(c,{...r,variant:"simple",size:"xl"})]}),u[0]=r,u[1]=n):n=u[1],u[2]!==r?(a=t(i,{gap:16,align:"center",children:[e(c,{...r,variant:"circle",size:"xs"}),e(c,{...r,variant:"circle",size:"sm"}),e(c,{...r,variant:"circle",size:"md"}),e(c,{...r,variant:"circle",size:"lg"}),e(c,{...r,variant:"circle",size:"xl"})]}),u[2]=r,u[3]=a):a=u[3],u[4]!==n||u[5]!==a?(s=t(o,{gap:48,justify:"center",align:"stretch",children:[n,a]}),u[4]=n,u[5]=a,u[6]=s):s=u[6],s},meta:s}];function d({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>f.default.createElement(a,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return f.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},f.default.createElement("h2",{className:"text-sm mb-12"},e.name),f.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(f.default.createElement(window.WallarmDS.Root,null,m.map((e,t)=>f.default.createElement(d,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,96 @@
+Use the same WallySkeleton while the host downloads the assistant remote, the remote checks access, and the runtime connects. Import it from `@wallarm-org/design-system/WallySkeleton` without loading WallyAssistant or its markdown renderer. Give the parent a height; the skeleton fills it. Placeholders and the decorative mesh are static, so remounting between loading stages preserves the image, including with reduced motion. The surface announces “Loading Wally”; override `aria-label` for localization. It has no interactive controls.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Default
+
+Source: WallySkeleton/WallySkeleton.stories.tsx#Default
+
+### Narrow
+
+Source: WallySkeleton/WallySkeleton.stories.tsx#Narrow
+
+### Handoff
+
+Continue loading remounts the skeleton, like replacing the host fallback with the remote’s own loading state. Its geometry, colors and background stay identical.
+
+Source: WallySkeleton/WallySkeleton.stories.tsx#Handoff
+
+## Story sources
+
+### WallySkeleton/WallySkeleton.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Button } from '../Button';
+import { WallySkeleton } from './WallySkeleton';
+
+const meta = {
+  title: 'AI/WallySkeleton',
+  component: WallySkeleton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Use the same WallySkeleton while the host downloads the assistant remote, the remote checks access, and the runtime connects. Import it from `@wallarm-org/design-system/WallySkeleton` without loading WallyAssistant or its markdown renderer. Give the parent a height; the skeleton fills it. Placeholders and the decorative mesh are static, so remounting between loading stages preserves the image, including with reduced motion. The surface announces “Loading Wally”; override `aria-label` for localization. It has no interactive controls.',
+      },
+    },
+  },
+} satisfies Meta<typeof WallySkeleton>;
+
+export default meta;
+
+export const Default: StoryFn<typeof WallySkeleton> = args => (
+  <div className='h-640 w-480 max-w-full'>
+    <WallySkeleton {...args} data-testid='wally-loading' />
+  </div>
+);
+
+export const Narrow: StoryFn<typeof WallySkeleton> = args => (
+  <div className='h-640 w-320 max-w-full'>
+    <WallySkeleton {...args} data-testid='wally-loading' />
+  </div>
+);
+
+export const Handoff: StoryFn<typeof WallySkeleton> = args => {
+  const [stage, setStage] = useState(0);
+
+  return (
+    <div className='flex flex-col gap-12'>
+      <Button data-testid='next-stage' onClick={() => setStage(current => current + 1)}>
+        Continue loading
+      </Button>
+      <div className='h-640 w-480 max-w-full'>
+        <WallySkeleton key={stage} {...args} data-testid='wally-loading' />
+      </div>
+    </div>
+  );
+};
+
+Handoff.parameters = {
+  docs: {
+    description: {
+      story:
+        'Continue loading remounts the skeleton, like replacing the host fallback with the remote’s own loading state. Its geometry, colors and background stay identical.',
+    },
+  },
+};
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||s(e,a,{get:()=>t[a],enumerable:!(n=c(t,a))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>_,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>x,useRenderCounter:()=>D};for(var h in y)s(m,h,{get:y[h],enumerable:!0});e.exports=d(s({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:s(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:v,isValidElement:R}=g,E=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,$=Symbol.for("react.memo_cache_sentinel"),_="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=$;return t[$]=!0,t},[])},b={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{b[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var S=null;function N(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}b.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function C(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(S=t),t===b)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(b)}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&&(S=null),N(e)}else if(2===e)k.push(t),N(S);else if(3===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=$}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function j(){for(let e of x.values())e.forEach(e=>{e.count=0})}function D(e){let t=w(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let r,n={count:0};null==(r=x.get(e))&&(r=new Set,x.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=x.get(e))&&n.delete(r))}})}var I=new Set;function T(e,t,r,n,a,l){function o(e,t,o,i){let s=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;I.has(s)||(I.add(s),console.error(s))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(R(t)||R(r))R(t)!==R(r)?o(`type ${R(t)?"React element":"object"}`,`type ${R(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=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!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:w,isValidElement:v,lazy:R,memo:E,startTransition:$,unstable_act:_,useCallback:b,useContext:S,useDebugValue:N,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:j,useMemo:D,useReducer:I,useRef:T,useState:A,useSyncExternalStore:P,useTransition:W,version:z,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:w,isValidElement:v,lazy:R,memo:E,startTransition:$,unstable_act:_,use:L,useCallback:b,useContext:S,useDebugValue:N,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:j,useMemo:D,useReducer:I,useRef:T,useState:A,useSyncExternalStore:P,useTransition:W,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let i=window.WallarmDS.Button,s=window.WallarmDS.WallySkeleton,c={title:"AI/WallySkeleton",component:s,parameters:{layout:"centered",docs:{description:{component:"Use the same WallySkeleton while the host downloads the assistant remote, the remote checks access, and the runtime connects. Import it from `@wallarm-org/design-system/WallySkeleton` without loading WallyAssistant or its markdown renderer. Give the parent a height; the skeleton fills it. Placeholders and the decorative mesh are static, so remounting between loading stages preserves the image, including with reduced motion. The surface announces “Loading Wally”; override `aria-label` for localization. It has no interactive controls."}}}},u=r=>{let n,a,c=(0,l.c)(4),[u,p]=(0,o.useState)(0);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{"data-testid":"next-stage",onClick:()=>p(f),children:"Continue loading"}),c[0]=n):n=c[0],c[1]!==r||c[2]!==u?(a=t("div",{className:"flex flex-col gap-12",children:[n,e("div",{className:"h-640 w-480 max-w-full",children:e(s,{...r,"data-testid":"wally-loading"},u)})]}),c[1]=r,c[2]=u,c[3]=a):a=c[3],a};function f(e){return e+1}u.parameters={docs:{description:{story:"Continue loading remounts the skeleton, like replacing the host fallback with the remote’s own loading state. Its geometry, colors and background stay identical."}}};let p=[{name:"Default",story:t=>{let r,n=(0,l.c)(2);return n[0]!==t?(r=e("div",{className:"h-640 w-480 max-w-full",children:e(s,{...t,"data-testid":"wally-loading"})}),n[0]=t,n[1]=r):r=n[1],r},meta:c},{name:"Narrow",story:t=>{let r,n=(0,l.c)(2);return n[0]!==t?(r=e("div",{className:"h-640 w-320 max-w-full",children:e(s,{...t,"data-testid":"wally-loading"})}),n[0]=t,n[1]=r):r=n[1],r},meta:c},{name:"Handoff",story:u,meta:c}];function d({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(a,n),i={args:n,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,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,p.map((e,t)=>o.default.createElement(d,{key:t,entry:e})))),t}}})();