@wallarm-org/claude-design 4.8.0 → 4.10.0

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

@@ -17,17 +17,17 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `width` | `string \| number \| undefined` | no | — |  |
 | `href` | `string \| undefined` | no | — |  |
 | `seed` | `string \| number \| undefined` | yes | — |  |
-| `agent` | `"wally" \| "radar" \| "sift" \| "mend" \| "trim" \| "probe"` | no | — |  |
+| `agent` | `AgentCharacterId` | no | — |  |
 | `look` | `undefined` | no | — |  |
-| `size` | `complex` | yes | — | Set per place (see PLACES): 40 Overview rows, 48 headers and toasts, 56 beside people, 72 cards and the drawer, 120 the empty chat. |
-| `state` | `"idle" \| "working" \| "needs" \| "failed" \| "off" \| "box" \| "invite" \| "hello" \| "done"` | no | `idle` |  |
+| `size` | `AgentAvatarSize` | yes | — | Set per place (see PLACES): 40 Overview rows, 48 headers and toasts, 56 beside people, 72 cards and the drawer, 120 the empty chat. |
+| `state` | `AgentAvatarState \| undefined` | no | `idle` |  |
 | `has-applications` | `boolean \| undefined` | no | `false` | The agent's template has applications (`applications_scoped`): only then can it show Partial coverage. |
 | `coverage` | `"full" \| "partial" \| undefined` | no | `full` | `partial` keeps the top of the head in grey felt, in every state but Deactivated. |
 | `shadow` | `boolean \| undefined` | no | `false` | The contact shadow: the drawer header, the empty chat and 96 px and up (D1). |
 | `label` | `string \| undefined` | no | — | Set when the character stands alone; leave unset next to the agent's visible name (decorative). |
 | `live` | `boolean \| undefined` | no | `false` | Animated, set per place (40 Overview rows, 72 cards and the drawer, 120 the empty chat). Static under reduced motion or when motion is switched off (`setAgentMotion`). |
-| `handle-ref` | `complex` | no | — | Beats and Cover all: `play('hello' \| 'done')`, `coverAll()`, `cueHover(on)`. |
-| `on-beat-end` | `complex` | no | — | After Hello or Done has played in full; the character shows `state` again. |
+| `handle-ref` | `Ref<AgentAvatarHandle> \| undefined` | no | — | Beats and Cover all: `play('hello' \| 'done')`, `coverAll()`, `cueHover(on)`. |
+| `on-beat-end` | `((beat: AgentAvatarBeat) => void) \| undefined` | no | — | After Hello or Done has played in full; the character shows `state` again. |
 | `cue-ref` | `RefObject<HTMLElement \| null> \| undefined` | no | — | The Set up (or Cover all) control: Inviting glances at it; hover and focus on it are followed. |
 
 ## Sub-components

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

@@ -16,10 +16,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | `target` | `string \| undefined` | no | — |  |
 | `width` | `string \| number \| undefined` | no | — |  |
 | `href` | `string \| undefined` | no | — |  |
-| `agent` | `"wally" \| "radar" \| "sift" \| "mend" \| "trim" \| "probe"` | no | — |  |
+| `agent` | `AgentCharacterId` | no | — |  |
 | `look` | `undefined` | no | — |  |
-| `size` | `complex` | yes | — | 16 beside text-xs, 20 beside text-sm or larger and in table rows (D3); 24 and 32 for other compact slots. |
-| `state` | `"idle" \| "working" \| "needs" \| "failed" \| "off" \| "box" \| "invite" \| "hello" \| "done"` | no | `idle` |  |
+| `size` | `AgentGlyphSize` | yes | — | 16 beside text-xs, 20 beside text-sm or larger and in table rows (D3); 24 and 32 for other compact slots. |
+| `state` | `AgentGlyphState \| undefined` | no | `idle` |  |
 | `has-applications` | `boolean \| undefined` | no | `false` | The agent's template has applications (`applications_scoped`): only then can it show Partial coverage. |
 | `coverage` | `"full" \| "partial" \| undefined` | no | `full` | `partial` draws the grey crown of Partial coverage, on duty only. |
 | `align` | `"box" \| "optical" \| undefined` | no | `optical` | `optical` lifts the body onto the text line (inline places); `box` keeps the box (ladders, stacks). |

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

@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | Attribute | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `reveal` | `boolean \| undefined` | no | — |  |
-| `expand-from` | `complex` | no | — |  |
+| `expand-from` | `AppShellExpandFrom \| undefined` | no | — |  |
 | `on-revealed` | `(() => void) \| undefined` | no | — |  |
 | `appeared` | `boolean \| undefined` | no | — |  |
 | `ambient` | `boolean \| undefined` | no | `true` | The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and rail. On by default; `false` leaves the flat Frame token fill. |

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

@@ -7,13 +7,13 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | Attribute | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `data` | `T[]` | yes | — | Long-form data array, one entry per X position. |
-| `series` | `complex` | yes | — | Schema describing each area drawn from `data`. |
+| `series` | `LineChartSeries<Extract<keyof T, string>>[]` | yes | — | Schema describing each area drawn from `data`. |
 | `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value. |
-| `variant` | `"standard" \| "stacked"` | no | `stacked` | Area chart variant. - `'stacked'` (default): series stack cumulatively — each band starts where the previous ends. - `'standard'`: series overlap from the baseline with transparency. |
+| `variant` | `AreaChartVariant \| undefined` | no | `stacked` | Area chart variant. - `'stacked'` (default): series stack cumulatively — each band starts where the previous ends. - `'standard'`: series overlap from the baseline with transparency. |
 | `active-key` | `string \| null \| undefined` | no | — | Controlled hover key — pass alongside `onActiveKeyChange` for cross-chart sync. |
 | `on-active-key-change` | `((key: string \| null) => void) \| undefined` | no | — |  |
 | `filtered-keys` | `string[] \| undefined` | no | — | Controlled set of `series.key` values to hide from the plot. |
-| `on-zoom-change` | `complex` | no | — | Fired after the user confirms a brush selection. |
+| `on-zoom-change` | `((range: LineChartZoomRange \| null) => void) \| undefined` | no | — | Fired after the user confirms a brush selection. |
 | `sync-id` | `string \| number \| undefined` | no | — | Charts that share a `syncId` synchronise their tooltip cursor. |
 | `sync-method` | `complex` | no | — | How sibling `syncId` charts match X positions. |
 | `default-checked` | `boolean \| undefined` | no | — |  |
@@ -130,10 +130,6 @@ const meta = {
   },
   parameters: {
     layout: 'centered',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11973-4142&m=dev',
-    },
     docs: { description: { component: DESCRIPTION } },
   },
   tags: ['autodocs'],

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

@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},h={},p={$dispatcherGuard:()=>N,$makeReadOnly:()=>M,$reset:()=>$,$structuralCheck:()=>L,c:()=>v,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>x,useRenderCounter:()=>W};for(var y in p)c(h,y,{get:p[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),h);var w=(a=null!=(n=r("C"))?i(u(n)):{},f(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:S,useEffect:_,isValidElement:b}=w,k=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),v="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 r=0;r<e;r++)t[r]=g;return t[g]=!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 E=null;function R(e){return k.ReactCurrentDispatcher.current=e,k.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function N(e){let t=k.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(E=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&&(E=null),R(e)}else if(2===e)D.push(t),R(E);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]=g}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function T(){for(let e of x.values())e.forEach(e=>{e.count=0})}function W(e){let t=S(null);null!=t.current&&(t.current.count+=1),_(()=>{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 O=new Set;function L(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}`;O.has(c)||(O.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(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(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:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:w,forwardRef:S,isValidElement:_,lazy:b,memo:k,startTransition:g,unstable_act:v,useCallback:C,useContext:E,useDebugValue:R,useDeferredValue:D,useEffect:N,useId:$,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:T,useMemo:W,useReducer:O,useRef:L,useState:A,useSyncExternalStore:F,useTransition:j,version:I,use:P}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:w,default:n,forwardRef:S,isValidElement:_,lazy:b,memo:k,startTransition:g,unstable_act:v,use:P,useCallback:C,useContext:E,useDebugValue:R,useDeferredValue:D,useEffect:N,useId:$,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:T,useMemo:W,useReducer:O,useRef:L,useState:A,useSyncExternalStore:F,useTransition:j,version:I})}},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=new Intl.NumberFormat("en-US"),c=(e,t,r)=>{let n=43758.5453*Math.sin((e+t)*r);return n-Math.floor(n)},s=(e,t=1)=>{let r=new Date(2025,0,1,0,0,0).getTime(),n=[];for(let a=0;a<e;a++){let e=r+60*a*6e4,l=Math.round(120+30*Math.sin((a+t)/4)+(c(a,t,12.9898)-.5)*80),o=Math.round(24+10*Math.cos((a+t)/5)+(c(a,t,78.233)-.5)*32),i=Math.round(80+14*Math.sin((a+t)/6)+(c(a,t,39.346)-.5)*40);n.push({timestamp:e,requests:l,errors:o,latency:i})}return n},m=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors",color:"red"},{key:"latency",label:"Latency",color:"blue"}],u=s(24);s(24,1),s(24,7);let d=(()=>{let e=new Date(2024,0,1,0,0,0).getTime(),t=[];for(let r=0;r<60;r++){let n=e+24*r*36e5,a=Math.round(1e3+400*Math.sin(r/9)+r%13*12),l=Math.round(80+30*Math.cos(r/11)+r%7*3);t.push({timestamp:n,requests:a,errors:l})}return t})();s(1e3),new Date(2025,0,1,12,0,0).getTime(),u.map((e,t)=>t>=6&&t<=8||t>=15&&t<=16?{...e,errors:null}:e);let f=window.WallarmDS.Icons.FilterX,h=window.WallarmDS.Icons.ZoomOut,p=window.WallarmDS.Button,y=window.WallarmDS.Skeleton,w=window.WallarmDS.Tooltip,S=window.WallarmDS.TooltipContent,_=window.WallarmDS.TooltipTrigger,b=window.WallarmDS.Chart,k=window.WallarmDS.ChartActions,g=window.WallarmDS.ChartHeader,v=window.WallarmDS.ChartTitle,C=window.WallarmDS.useChartTimeFormatters,E=window.WallarmDS.LineChartEmpty,R=window.WallarmDS.LineChartGrid,D=window.WallarmDS.LineChartHoverPopoverDot,N=window.WallarmDS.LineChartLegend,$=window.WallarmDS.LineChartLegendItem,M=window.WallarmDS.LineChartTooltip,x=window.WallarmDS.LineChartXAxis,T=window.WallarmDS.LineChartYAxis,W=window.WallarmDS.LineChartZoomBrush,O=window.WallarmDS.MetricDelta,L=window.WallarmDS.MetricHeader,A=window.WallarmDS.MetricValue,F=window.WallarmDS.AreaChart,j=window.WallarmDS.AreaChartArea,I=window.WallarmDS.AreaChartBody,P=e=>{let t;return t=Number(e),i.format(t)},z={title:"Data Display/SimpleCharts/AreaChart",component:F,subcomponents:{AreaChartBody:I,AreaChartArea:j},parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11973-4142&m=dev"},docs:{description:{component:"A stacked or overlaid area chart in the SimpleCharts family — ideal for showing cumulative totals or comparing volume across series over time. All interactions (hover crosshair, tooltip, legend click-to-filter, drag-to-zoom) come from the shared LineChart infrastructure and work identically."}}},tags:["autodocs"]},K=t=>{let r,n,a=(0,l.c)(4),{series:o}=t,i=void 0===o?m:o;return a[0]!==i?(r=i.map(G),a[0]=i,a[1]=r):r=a[1],a[2]!==r?(n=e(N,{children:r}),a[2]=r,a[3]=n):n=a[3],n},U=()=>{let r,n,a,i,c,s,u,f,y,E,D,N,$,O,L,A,j,z=(0,l.c)(32),{formatDate:U,formatDateWithTimezone:V}=C(),[G,Z]=(0,o.useState)(d);z[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e?Z(t=>t.slice(e.fromIndex,e.toIndex+1)):Z(d)},z[0]=r):r=z[0];let H=r,Y=G!==d;if(z[1]!==U)n=e=>`${U(e.from)} → ${U(e.to)}`,z[1]=U,z[2]=n;else n=z[2];let B=n,q=(0,o.useRef)(null);return z[3]!==Y?(a=()=>{if(!Y)return;let e=e=>{if("Escape"!==e.key)return;let t=e.target,r=null===t||t===document.body||t===document.documentElement,n=t instanceof Node&&q.current?.contains(t);(r||n)&&(e.preventDefault(),H(null))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},i=[Y,H],z[3]=Y,z[4]=a,z[5]=i):(a=z[4],i=z[5]),(0,o.useEffect)(a,i),z[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(v,{children:'Drag on the plot, then click "Zoom in" — Esc to cancel'}),z[6]=c):c=z[6],z[7]!==Y?(s=Y&&t(w,{children:[e(_,{asChild:!0,children:e(p,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>H(null),children:e(h,{})})}),e(S,{children:"Reset time selection"})]}),z[7]=Y,z[8]=s):s=z[8],z[9]!==Y||z[10]!==s?(u=t(g,{children:[c,e(k,{alwaysVisible:Y,children:s})]}),z[9]=Y,z[10]=s,z[11]=u):u=z[11],z[12]===Symbol.for("react.memo_cache_sentinel")?(f=e(K,{}),z[12]=f):f=z[12],z[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(R,{}),z[13]=y):y=z[13],z[14]!==U?(E=e(x,{tickFormatter:U,minTickGap:48}),z[14]=U,z[15]=E):E=z[15],z[16]===Symbol.for("react.memo_cache_sentinel")?(D=e(T,{tickFormatter:P}),N=m.map(X),z[16]=D,z[17]=N):(D=z[16],N=z[17]),z[18]!==V?($=e(M,{xTickFormatter:V}),z[18]=V,z[19]=$):$=z[19],z[20]!==B?(O=e(W,{formatRange:B}),z[20]=B,z[21]=O):O=z[21],z[22]!==$||z[23]!==O||z[24]!==E?(L=t(I,{height:220,children:[y,E,D,N,$,O]}),z[22]=$,z[23]=O,z[24]=E,z[25]=L):L=z[25],z[26]!==L||z[27]!==G?(A=t(F,{data:G,series:m,xKey:"timestamp",onZoomChange:H,children:[f,L]}),z[26]=L,z[27]=G,z[28]=A):A=z[28],z[29]!==A||z[30]!==u?(j=t(b,{ref:q,children:[u,A]}),z[29]=A,z[30]=u,z[31]=j):j=z[31],j},V=t=>{let r,n,a=(0,l.c)(3),{orientation:o}=t;return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=[0,1,2].map(J),a[0]=r):r=a[0],a[1]!==o?(n=e(N,{orientation:o,children:r}),a[1]=o,a[2]=n):n=a[2],n};function G(r){return t($,{seriesKey:r.key,children:[e(D,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function Z(t){return e(j,{seriesKey:t.key},t.key)}function H(t){return e(j,{seriesKey:t.key},t.key)}function Y(t){return e(j,{seriesKey:t.key},t.key)}function B(e){return e.key}function q(t){return e(j,{seriesKey:t.key},t.key)}function X(t){return e(j,{seriesKey:t.key},t.key)}function J(t){return e($,{seriesKey:`skeleton-${t}`,children:e(y,{width:"72px",height:"20px",rounded:4})},t)}let Q=[{name:"Default",story:()=>{let r,n,a,o,i,c,s,d,f=(0,l.c)(12),{formatHour:h,formatHourWithTimezone:p}=C();return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Traffic breakdown (stacked)"})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(K,{}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),f[2]=a):a=f[2],f[3]!==h?(o=e(x,{tickFormatter:h,minTickGap:32}),f[3]=h,f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{tickFormatter:P}),c=m.map(Z),f[5]=i,f[6]=c):(i=f[5],c=f[6]),f[7]!==p?(s=e(M,{xTickFormatter:p}),f[7]=p,f[8]=s):s=f[8],f[9]!==o||f[10]!==s?(d=e("div",{className:"w-560",children:t(b,{"data-testid":"chart",children:[r,t(F,{"data-testid":"area-chart",data:u,series:m,xKey:"timestamp",children:[n,t(I,{children:[a,o,i,c,s]})]})]})}),f[9]=o,f[10]=s,f[11]=d):d=f[11],d},meta:z},{name:"Standard",story:()=>{let r,n,a,o,i,c,s,d,f=(0,l.c)(12),{formatHour:h,formatHourWithTimezone:p}=C();return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Traffic breakdown (standard)"})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(K,{}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),f[2]=a):a=f[2],f[3]!==h?(o=e(x,{tickFormatter:h,minTickGap:32}),f[3]=h,f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{tickFormatter:P}),c=m.map(H),f[5]=i,f[6]=c):(i=f[5],c=f[6]),f[7]!==p?(s=e(M,{xTickFormatter:p}),f[7]=p,f[8]=s):s=f[8],f[9]!==o||f[10]!==s?(d=e("div",{className:"w-560",children:t(b,{children:[r,t(F,{data:u,series:m,xKey:"timestamp",variant:"standard",children:[n,t(I,{children:[a,o,i,c,s]})]})]})}),f[9]=o,f[10]=s,f[11]=d):d=f[11],d},meta:z},{name:"WithMetric",story:()=>{let r,n,a,o,i,c,s,d,f=(0,l.c)(12),{formatHour:h,formatHourWithTimezone:p}=C();return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Requests per hour"})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex items-center justify-between pr-8",children:[t(L,{className:"px-16",children:[e(A,{children:2903}),e(O,{value:10,trend:"up",sentiment:"negative"})]}),e(K,{})]}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),f[2]=a):a=f[2],f[3]!==h?(o=e(x,{tickFormatter:h,minTickGap:32}),f[3]=h,f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{tickFormatter:P}),c=m.map(Y),f[5]=i,f[6]=c):(i=f[5],c=f[6]),f[7]!==p?(s=e(M,{xTickFormatter:p}),f[7]=p,f[8]=s):s=f[8],f[9]!==o||f[10]!==s?(d=e("div",{className:"w-800",children:t(b,{children:[r,t(F,{data:u,series:m,xKey:"timestamp",children:[n,t(I,{children:[a,o,i,c,s]})]})]})}),f[9]=o,f[10]=s,f[11]=d):d=f[11],d},meta:z},{name:"Filterable",story:()=>{let r,n,a,i,c,s,d,h,y,E,W,O,L,A,j,z=(0,l.c)(29),{formatHour:K,formatHourWithTimezone:U}=C();z[0]===Symbol.for("react.memo_cache_sentinel")?(r=[],z[0]=r):r=z[0];let[V,G]=(0,o.useState)(r);z[1]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{G(t=>0===t.length?m.filter(t=>t.key!==e).map(B):t.includes(e)?t.filter(t=>t!==e):[...t,e])},z[1]=n):n=z[1];let Z=n,H=V.length>0;return z[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(v,{children:"Click a row to isolate, click another to add"}),z[2]=a):a=z[2],z[3]!==H?(i=H&&t(w,{children:[e(_,{asChild:!0,children:e(p,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",onClick:()=>G([]),children:e(f,{})})}),e(S,{children:"Remove filter"})]}),z[3]=H,z[4]=i):i=z[4],z[5]!==H||z[6]!==i?(c=t(g,{children:[a,e(k,{alwaysVisible:H,children:i})]}),z[5]=H,z[6]=i,z[7]=c):c=z[7],z[8]!==V?(s=m.map(r=>t(w,{children:[e(_,{asChild:!0,children:t($,{seriesKey:r.key,onClick:()=>Z(r.key),children:[e(D,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]})}),e(S,{children:V.includes(r.key)?"Remove filter":"Click to filter"})]},r.key)),z[8]=V,z[9]=s):s=z[9],z[10]!==s?(d=e(N,{children:s}),z[10]=s,z[11]=d):d=z[11],z[12]===Symbol.for("react.memo_cache_sentinel")?(h=e(R,{}),z[12]=h):h=z[12],z[13]!==K?(y=e(x,{tickFormatter:K,minTickGap:32}),z[13]=K,z[14]=y):y=z[14],z[15]===Symbol.for("react.memo_cache_sentinel")?(W=e(T,{tickFormatter:P}),E=m.map(q),z[15]=E,z[16]=W):(E=z[15],W=z[16]),z[17]!==U?(O=e(M,{xTickFormatter:U}),z[17]=U,z[18]=O):O=z[18],z[19]!==O||z[20]!==y?(L=t(I,{children:[h,y,W,E,O]}),z[19]=O,z[20]=y,z[21]=L):L=z[21],z[22]!==V||z[23]!==L||z[24]!==d?(A=t(F,{"data-testid":"area-chart",data:u,series:m,xKey:"timestamp",filteredKeys:V,children:[d,L]}),z[22]=V,z[23]=L,z[24]=d,z[25]=A):A=z[25],z[26]!==A||z[27]!==c?(j=e("div",{className:"w-560",children:t(b,{"data-testid":"chart",children:[c,A]})}),z[26]=A,z[27]=c,z[28]=j):j=z[28],j},meta:z},{name:"Zoom",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-560",children:e(U,{})}),r[0]=t):t=r[0],t},meta:z},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(b,{"aria-busy":"true","aria-live":"polite",children:[e(g,{children:e(v,{children:"Loading"})}),e(V,{}),e(E,{})]})}),n[0]=r):r=n[0],r},meta:z},{name:"Empty",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(b,{children:[e(g,{children:e(v,{children:"No data"})}),e(E,{children:"No data"})]})}),n[0]=r):r=n[0],r},meta:z}];function ee({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,Q.map((e,t)=>o.default.createElement(ee,{key:t,entry:e})))),t}}})();
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},h={},p={$dispatcherGuard:()=>D,$makeReadOnly:()=>M,$reset:()=>$,$structuralCheck:()=>L,c:()=>v,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>x,useRenderCounter:()=>W};for(var y in p)c(h,y,{get:p[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),h);var w=(a=null!=(n=r("C"))?i(u(n)):{},f(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:S,isValidElement:b}=w,k=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),v="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 r=0;r<e;r++)t[r]=g;return t[g]=!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 E=null;function R(e){return k.ReactCurrentDispatcher.current=e,k.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function D(e){let t=k.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(E=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=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(E=null),R(e)}else if(2===e)N.push(t),R(E);else if(3===e){let e=N.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]=g}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function T(){for(let e of x.values())e.forEach(e=>{e.count=0})}function W(e){let t=_(null);null!=t.current&&(t.current.count+=1),S(()=>{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 O=new Set;function L(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}`;O.has(c)||(O.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(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(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:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:w,forwardRef:_,isValidElement:S,lazy:b,memo:k,startTransition:g,unstable_act:v,useCallback:C,useContext:E,useDebugValue:R,useDeferredValue:N,useEffect:D,useId:$,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:T,useMemo:W,useReducer:O,useRef:L,useState:A,useSyncExternalStore:F,useTransition:j,version:I,use:P}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:w,default:n,forwardRef:_,isValidElement:S,lazy:b,memo:k,startTransition:g,unstable_act:v,use:P,useCallback:C,useContext:E,useDebugValue:R,useDeferredValue:N,useEffect:D,useId:$,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:T,useMemo:W,useReducer:O,useRef:L,useState:A,useSyncExternalStore:F,useTransition:j,version:I})}},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=new Intl.NumberFormat("en-US"),c=(e,t,r)=>{let n=43758.5453*Math.sin((e+t)*r);return n-Math.floor(n)},s=(e,t=1)=>{let r=new Date(2025,0,1,0,0,0).getTime(),n=[];for(let a=0;a<e;a++){let e=r+60*a*6e4,l=Math.round(120+30*Math.sin((a+t)/4)+(c(a,t,12.9898)-.5)*80),o=Math.round(24+10*Math.cos((a+t)/5)+(c(a,t,78.233)-.5)*32),i=Math.round(80+14*Math.sin((a+t)/6)+(c(a,t,39.346)-.5)*40);n.push({timestamp:e,requests:l,errors:o,latency:i})}return n},m=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors",color:"red"},{key:"latency",label:"Latency",color:"blue"}],u=s(24);s(24,1),s(24,7);let d=(()=>{let e=new Date(2024,0,1,0,0,0).getTime(),t=[];for(let r=0;r<60;r++){let n=e+24*r*36e5,a=Math.round(1e3+400*Math.sin(r/9)+r%13*12),l=Math.round(80+30*Math.cos(r/11)+r%7*3);t.push({timestamp:n,requests:a,errors:l})}return t})();s(1e3),new Date(2025,0,1,12,0,0).getTime(),u.map((e,t)=>t>=6&&t<=8||t>=15&&t<=16?{...e,errors:null}:e);let f=window.WallarmDS.Icons.FilterX,h=window.WallarmDS.Icons.ZoomOut,p=window.WallarmDS.Button,y=window.WallarmDS.Skeleton,w=window.WallarmDS.Tooltip,_=window.WallarmDS.TooltipContent,S=window.WallarmDS.TooltipTrigger,b=window.WallarmDS.Chart,k=window.WallarmDS.ChartActions,g=window.WallarmDS.ChartHeader,v=window.WallarmDS.ChartTitle,C=window.WallarmDS.useChartTimeFormatters,E=window.WallarmDS.LineChartEmpty,R=window.WallarmDS.LineChartGrid,N=window.WallarmDS.LineChartHoverPopoverDot,D=window.WallarmDS.LineChartLegend,$=window.WallarmDS.LineChartLegendItem,M=window.WallarmDS.LineChartTooltip,x=window.WallarmDS.LineChartXAxis,T=window.WallarmDS.LineChartYAxis,W=window.WallarmDS.LineChartZoomBrush,O=window.WallarmDS.MetricDelta,L=window.WallarmDS.MetricHeader,A=window.WallarmDS.MetricValue,F=window.WallarmDS.AreaChart,j=window.WallarmDS.AreaChartArea,I=window.WallarmDS.AreaChartBody,P=e=>{let t;return t=Number(e),i.format(t)},z={title:"Data Display/SimpleCharts/AreaChart",component:F,subcomponents:{AreaChartBody:I,AreaChartArea:j},parameters:{layout:"centered",docs:{description:{component:"A stacked or overlaid area chart in the SimpleCharts family — ideal for showing cumulative totals or comparing volume across series over time. All interactions (hover crosshair, tooltip, legend click-to-filter, drag-to-zoom) come from the shared LineChart infrastructure and work identically."}}},tags:["autodocs"]},K=t=>{let r,n,a=(0,l.c)(4),{series:o}=t,i=void 0===o?m:o;return a[0]!==i?(r=i.map(G),a[0]=i,a[1]=r):r=a[1],a[2]!==r?(n=e(D,{children:r}),a[2]=r,a[3]=n):n=a[3],n},U=()=>{let r,n,a,i,c,s,u,f,y,E,N,D,$,O,L,A,j,z=(0,l.c)(32),{formatDate:U,formatDateWithTimezone:V}=C(),[G,H]=(0,o.useState)(d);z[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e?H(t=>t.slice(e.fromIndex,e.toIndex+1)):H(d)},z[0]=r):r=z[0];let Z=r,Y=G!==d;if(z[1]!==U)n=e=>`${U(e.from)} → ${U(e.to)}`,z[1]=U,z[2]=n;else n=z[2];let B=n,q=(0,o.useRef)(null);return z[3]!==Y?(a=()=>{if(!Y)return;let e=e=>{if("Escape"!==e.key)return;let t=e.target,r=null===t||t===document.body||t===document.documentElement,n=t instanceof Node&&q.current?.contains(t);(r||n)&&(e.preventDefault(),Z(null))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},i=[Y,Z],z[3]=Y,z[4]=a,z[5]=i):(a=z[4],i=z[5]),(0,o.useEffect)(a,i),z[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(v,{children:'Drag on the plot, then click "Zoom in" — Esc to cancel'}),z[6]=c):c=z[6],z[7]!==Y?(s=Y&&t(w,{children:[e(S,{asChild:!0,children:e(p,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>Z(null),children:e(h,{})})}),e(_,{children:"Reset time selection"})]}),z[7]=Y,z[8]=s):s=z[8],z[9]!==Y||z[10]!==s?(u=t(g,{children:[c,e(k,{alwaysVisible:Y,children:s})]}),z[9]=Y,z[10]=s,z[11]=u):u=z[11],z[12]===Symbol.for("react.memo_cache_sentinel")?(f=e(K,{}),z[12]=f):f=z[12],z[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(R,{}),z[13]=y):y=z[13],z[14]!==U?(E=e(x,{tickFormatter:U,minTickGap:48}),z[14]=U,z[15]=E):E=z[15],z[16]===Symbol.for("react.memo_cache_sentinel")?(N=e(T,{tickFormatter:P}),D=m.map(J),z[16]=N,z[17]=D):(N=z[16],D=z[17]),z[18]!==V?($=e(M,{xTickFormatter:V}),z[18]=V,z[19]=$):$=z[19],z[20]!==B?(O=e(W,{formatRange:B}),z[20]=B,z[21]=O):O=z[21],z[22]!==$||z[23]!==O||z[24]!==E?(L=t(I,{height:220,children:[y,E,N,D,$,O]}),z[22]=$,z[23]=O,z[24]=E,z[25]=L):L=z[25],z[26]!==L||z[27]!==G?(A=t(F,{data:G,series:m,xKey:"timestamp",onZoomChange:Z,children:[f,L]}),z[26]=L,z[27]=G,z[28]=A):A=z[28],z[29]!==A||z[30]!==u?(j=t(b,{ref:q,children:[u,A]}),z[29]=A,z[30]=u,z[31]=j):j=z[31],j},V=t=>{let r,n,a=(0,l.c)(3),{orientation:o}=t;return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=[0,1,2].map(X),a[0]=r):r=a[0],a[1]!==o?(n=e(D,{orientation:o,children:r}),a[1]=o,a[2]=n):n=a[2],n};function G(r){return t($,{seriesKey:r.key,children:[e(N,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function H(t){return e(j,{seriesKey:t.key},t.key)}function Z(t){return e(j,{seriesKey:t.key},t.key)}function Y(t){return e(j,{seriesKey:t.key},t.key)}function B(e){return e.key}function q(t){return e(j,{seriesKey:t.key},t.key)}function J(t){return e(j,{seriesKey:t.key},t.key)}function X(t){return e($,{seriesKey:`skeleton-${t}`,children:e(y,{width:"72px",height:"20px",rounded:4})},t)}let Q=[{name:"Default",story:()=>{let r,n,a,o,i,c,s,d,f=(0,l.c)(12),{formatHour:h,formatHourWithTimezone:p}=C();return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Traffic breakdown (stacked)"})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(K,{}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),f[2]=a):a=f[2],f[3]!==h?(o=e(x,{tickFormatter:h,minTickGap:32}),f[3]=h,f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{tickFormatter:P}),c=m.map(H),f[5]=i,f[6]=c):(i=f[5],c=f[6]),f[7]!==p?(s=e(M,{xTickFormatter:p}),f[7]=p,f[8]=s):s=f[8],f[9]!==o||f[10]!==s?(d=e("div",{className:"w-560",children:t(b,{"data-testid":"chart",children:[r,t(F,{"data-testid":"area-chart",data:u,series:m,xKey:"timestamp",children:[n,t(I,{children:[a,o,i,c,s]})]})]})}),f[9]=o,f[10]=s,f[11]=d):d=f[11],d},meta:z},{name:"Standard",story:()=>{let r,n,a,o,i,c,s,d,f=(0,l.c)(12),{formatHour:h,formatHourWithTimezone:p}=C();return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Traffic breakdown (standard)"})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(K,{}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),f[2]=a):a=f[2],f[3]!==h?(o=e(x,{tickFormatter:h,minTickGap:32}),f[3]=h,f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{tickFormatter:P}),c=m.map(Z),f[5]=i,f[6]=c):(i=f[5],c=f[6]),f[7]!==p?(s=e(M,{xTickFormatter:p}),f[7]=p,f[8]=s):s=f[8],f[9]!==o||f[10]!==s?(d=e("div",{className:"w-560",children:t(b,{children:[r,t(F,{data:u,series:m,xKey:"timestamp",variant:"standard",children:[n,t(I,{children:[a,o,i,c,s]})]})]})}),f[9]=o,f[10]=s,f[11]=d):d=f[11],d},meta:z},{name:"WithMetric",story:()=>{let r,n,a,o,i,c,s,d,f=(0,l.c)(12),{formatHour:h,formatHourWithTimezone:p}=C();return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Requests per hour"})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex items-center justify-between pr-8",children:[t(L,{className:"px-16",children:[e(A,{children:2903}),e(O,{value:10,trend:"up",sentiment:"negative"})]}),e(K,{})]}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),f[2]=a):a=f[2],f[3]!==h?(o=e(x,{tickFormatter:h,minTickGap:32}),f[3]=h,f[4]=o):o=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(T,{tickFormatter:P}),c=m.map(Y),f[5]=i,f[6]=c):(i=f[5],c=f[6]),f[7]!==p?(s=e(M,{xTickFormatter:p}),f[7]=p,f[8]=s):s=f[8],f[9]!==o||f[10]!==s?(d=e("div",{className:"w-800",children:t(b,{children:[r,t(F,{data:u,series:m,xKey:"timestamp",children:[n,t(I,{children:[a,o,i,c,s]})]})]})}),f[9]=o,f[10]=s,f[11]=d):d=f[11],d},meta:z},{name:"Filterable",story:()=>{let r,n,a,i,c,s,d,h,y,E,W,O,L,A,j,z=(0,l.c)(29),{formatHour:K,formatHourWithTimezone:U}=C();z[0]===Symbol.for("react.memo_cache_sentinel")?(r=[],z[0]=r):r=z[0];let[V,G]=(0,o.useState)(r);z[1]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{G(t=>0===t.length?m.filter(t=>t.key!==e).map(B):t.includes(e)?t.filter(t=>t!==e):[...t,e])},z[1]=n):n=z[1];let H=n,Z=V.length>0;return z[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(v,{children:"Click a row to isolate, click another to add"}),z[2]=a):a=z[2],z[3]!==Z?(i=Z&&t(w,{children:[e(S,{asChild:!0,children:e(p,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",onClick:()=>G([]),children:e(f,{})})}),e(_,{children:"Remove filter"})]}),z[3]=Z,z[4]=i):i=z[4],z[5]!==Z||z[6]!==i?(c=t(g,{children:[a,e(k,{alwaysVisible:Z,children:i})]}),z[5]=Z,z[6]=i,z[7]=c):c=z[7],z[8]!==V?(s=m.map(r=>t(w,{children:[e(S,{asChild:!0,children:t($,{seriesKey:r.key,onClick:()=>H(r.key),children:[e(N,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]})}),e(_,{children:V.includes(r.key)?"Remove filter":"Click to filter"})]},r.key)),z[8]=V,z[9]=s):s=z[9],z[10]!==s?(d=e(D,{children:s}),z[10]=s,z[11]=d):d=z[11],z[12]===Symbol.for("react.memo_cache_sentinel")?(h=e(R,{}),z[12]=h):h=z[12],z[13]!==K?(y=e(x,{tickFormatter:K,minTickGap:32}),z[13]=K,z[14]=y):y=z[14],z[15]===Symbol.for("react.memo_cache_sentinel")?(W=e(T,{tickFormatter:P}),E=m.map(q),z[15]=E,z[16]=W):(E=z[15],W=z[16]),z[17]!==U?(O=e(M,{xTickFormatter:U}),z[17]=U,z[18]=O):O=z[18],z[19]!==O||z[20]!==y?(L=t(I,{children:[h,y,W,E,O]}),z[19]=O,z[20]=y,z[21]=L):L=z[21],z[22]!==V||z[23]!==L||z[24]!==d?(A=t(F,{"data-testid":"area-chart",data:u,series:m,xKey:"timestamp",filteredKeys:V,children:[d,L]}),z[22]=V,z[23]=L,z[24]=d,z[25]=A):A=z[25],z[26]!==A||z[27]!==c?(j=e("div",{className:"w-560",children:t(b,{"data-testid":"chart",children:[c,A]})}),z[26]=A,z[27]=c,z[28]=j):j=z[28],j},meta:z},{name:"Zoom",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-560",children:e(U,{})}),r[0]=t):t=r[0],t},meta:z},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(b,{"aria-busy":"true","aria-live":"polite",children:[e(g,{children:e(v,{children:"Loading"})}),e(V,{}),e(E,{})]})}),n[0]=r):r=n[0],r},meta:z},{name:"Empty",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(b,{children:[e(g,{children:e(v,{children:"No data"})}),e(E,{children:"No data"})]})}),n[0]=r):r=n[0],r},meta:z}];function ee({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,Q.map((e,t)=>o.default.createElement(ee,{key:t,entry:e})))),t}}})();

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

@@ -8,7 +8,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 | --- | --- | --- | --- | --- |
 | `loading` | `boolean \| undefined` | no | `false` | Show skeleton placeholders instead of children |
 | `is-empty` | `boolean \| undefined` | no | `false` | When true, `AttributeValue` renders the em-dash placeholder instead of its children, and any `AttributeEmptyDescription` inside the tree renders (it returns `null` otherwise). Ignored while `loading` is true (skeleton wins). |
-| `orientation` | `"vertical" \| "horizontal"` | no | `vertical` | Layout direction of the label and value. - `vertical` (default): label above value - `horizontal`: label on the left, value on the right |
+| `orientation` | `AttributeOrientation \| undefined` | no | `vertical` | Layout direction of the label and value. - `vertical` (default): label above value - `horizontal`: label on the left, value on the right |
 | `default-checked` | `boolean \| undefined` | no | — |  |
 | `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
 | `auto-focus` | `boolean \| undefined` | no | — |  |

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

@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 
 | Attribute | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
-| `on-status-change` | `complex` | no | — |  |
+| `on-status-change` | `((details: StatusChangeDetails) => void) \| undefined` | no | — |  |
 | `default-checked` | `boolean \| undefined` | no | — |  |
 | `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
 | `auto-focus` | `boolean \| undefined` | no | — |  |

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

@@ -573,13 +573,10 @@ interface ColorClassesMap {
   solid: string;
   solidMuted?: string;
   secondary: string;
-  secondaryMuted?: string;
   outline: string;
   outlineMuted?: string;
   text: string;
-  textMuted?: string;
   textColor: string;
-  textColorMuted?: string;
 }
 
 export const badgeColorsMuted: BadgeColor[] = [
@@ -602,66 +599,42 @@ export const generateBadgeVariants = (): ColorVariant[] => {
       solid: 'bg-badge-slate-strong text-badge-on-solid',
       solidMuted: 'bg-badge-slate-dark-alt text-badge-on-solid',
       secondary: 'bg-badge-slate-light text-badge-slate-dark',
-      secondaryMuted: 'bg-badge-slate-light text-badge-slate-muted',
       outline: 'border-badge-slate-dark text-badge-slate-dark',
       outlineMuted: 'border-border-primary text-badge-slate-dark',
       text: 'text-badge-label-primary [&_svg]:text-badge-slate-strong before:bg-badge-slate-strong',
-      textMuted:
-        'text-badge-label-primary [&_svg]:text-badge-slate-muted before:bg-badge-slate-muted',
       textColor: 'text-badge-slate-strong',
-      textColorMuted: 'text-badge-slate-muted',
     },
     gray: {
       solid: 'bg-badge-gray-strong text-badge-on-solid',
       solidMuted: 'bg-badge-gray-dark-alt text-badge-on-solid',
       secondary: 'bg-badge-gray-light text-badge-gray-dark',
-      secondaryMuted: 'bg-badge-gray-light text-badge-gray-muted',
       outline: 'border-badge-gray-dark text-badge-gray-dark',
-      outlineMuted: 'border-badge-gray-muted text-badge-gray-muted',
       text: 'text-badge-label-primary [&_svg]:text-badge-gray-strong before:bg-badge-gray-strong',
-      textMuted:
-        'text-badge-label-primary [&_svg]:text-badge-gray-muted before:bg-badge-gray-muted',
       textColor: 'text-badge-gray-strong',
-      textColorMuted: 'text-badge-gray-muted',
     },
     zinc: {
       solid: 'bg-badge-zinc-strong text-badge-on-solid',
       solidMuted: 'bg-badge-zinc-dark-alt text-badge-on-solid',
       secondary: 'bg-badge-zinc-light text-badge-zinc-dark',
-      secondaryMuted: 'bg-badge-zinc-light text-badge-zinc-muted',
       outline: 'border-badge-zinc-dark text-badge-zinc-dark',
-      outlineMuted: 'border-badge-zinc-muted text-badge-zinc-muted',
       text: 'text-badge-label-primary [&_svg]:text-badge-zinc-strong before:bg-badge-zinc-strong',
-      textMuted:
-        'text-badge-label-primary [&_svg]:text-badge-zinc-muted before:bg-badge-zinc-muted',
       textColor: 'text-badge-zinc-strong',
-      textColorMuted: 'text-badge-zinc-muted',
     },
     neutral: {
       solid: 'bg-badge-neutral-strong text-badge-on-solid',
       solidMuted: 'bg-badge-neutral-dark-alt text-badge-on-solid',
       secondary: 'bg-badge-neutral-light text-badge-neutral-dark',
-      secondaryMuted: 'bg-badge-neutral-light text-badge-neutral-muted',
       outline: 'border-badge-neutral-dark text-badge-neutral-dark',
-      outlineMuted: 'border-badge-neutral-muted text-badge-neutral-muted',
       text: 'text-badge-label-primary [&_svg]:text-badge-neutral-strong before:bg-badge-neutral-strong',
-      textMuted:
-        'text-badge-label-primary [&_svg]:text-badge-neutral-muted before:bg-badge-neutral-muted',
       textColor: 'text-badge-neutral-strong',
-      textColorMuted: 'text-badge-neutral-muted',
     },
     stone: {
       solid: 'bg-badge-stone-strong text-badge-on-solid',
       solidMuted: 'bg-badge-stone-dark-alt text-badge-on-solid',
       secondary: 'bg-badge-stone-light text-badge-stone-dark',
-      secondaryMuted: 'bg-badge-stone-light text-badge-stone-muted',
       outline: 'border-badge-stone-dark text-badge-stone-dark',
-      outlineMuted: 'border-badge-stone-muted text-badge-stone-muted',
       text: 'text-badge-label-primary [&_svg]:text-badge-stone-strong before:bg-badge-stone-strong',
-      textMuted:
-        'text-badge-label-primary [&_svg]:text-badge-stone-muted before:bg-badge-stone-muted',
       textColor: 'text-badge-stone-strong',
-      textColorMuted: 'text-badge-stone-muted',
     },
     // Colors without muted support
     red: {
@@ -801,21 +774,22 @@ export const generateBadgeVariants = (): ColorVariant[] => {
     variants.push(createVariant('solid', color, classes.solid, false));
     variants.push(createVariant('solid', color, classes.solidMuted ?? '', true));
 
+    // Figma has muted only for solid and the slate outline; other types ignore `muted`
     // Secondary variants
     variants.push(createVariant('secondary', color, classes.secondary, false));
-    variants.push(createVariant('secondary', color, classes.secondaryMuted ?? '', true));
+    variants.push(createVariant('secondary', color, classes.secondary, true));
 
     // Outline variants
     variants.push(createVariant('outline', color, classes.outline, false));
-    variants.push(createVariant('outline', color, classes.outlineMuted ?? '', true));
+    variants.push(createVariant('outline', color, classes.outlineMuted ?? classes.outline, true));
 
     // Text variants
     variants.push(createVariant('text', color, classes.text, false));
-    variants.push(createVariant('text', color, classes.textMuted ?? '', true));
+    variants.push(createVariant('text', color, classes.text, true));
 
     // Text-color variants
     variants.push(createVariant('text-color', color, classes.textColor, false));
-    variants.push(createVariant('text-color', color, classes.textColorMuted ?? '', true));
+    variants.push(createVariant('text-color', color, classes.textColor, true));
   });
 
   // Process colors without muted support

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

@@ -212,10 +212,6 @@ const meta = {
   },
   parameters: {
     layout: 'padded',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-121720&m=dev',
-    },
     docs: { description: { component: DESCRIPTION } },
   },
   tags: ['autodocs'],