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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))m.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},p={},f={$dispatcherGuard:()=>M,$makeReadOnly:()=>D,$reset:()=>C,$structuralCheck:()=>W,c:()=>E,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>O,useRenderCounter:()=>T};for(var y in f)c(p,y,{get:f[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),p);var w=(l=null!=(n=r("C"))?o(u(n)):{},h(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:v,useEffect:_,isValidElement:g}=w,b=null!=(a=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(i=w.__COMPILER_RUNTIME)?void 0:i.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=S;return t[S]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 N=null;function $(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function M(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(N=t),t===R)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)}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&&(N=null),$(e)}else if(2===e)k.push(t),$(N);else if(3===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function C(e){for(let t=0;t<e.length;t++)e[t]=S}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function x(){for(let e of O.values())e.forEach(e=>{e.count=0})}function T(e){let t=v(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var A=new Set;function W(e,t,r,n,l,a){function i(e,t,i,o){let c=`${n}:${a} [${l}] ${r}${i} changed from ${e} to ${t} at depth ${o}`;A.has(c)||(A.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)i(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)i("null",`type ${typeof r}`,n,l);else if(null===r)i(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)i(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[a,o]of t)r.has(a)?e(o,r.get(a),`${n}.get(${a})`,l+1):i(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else i("Map instance","other value",n,l);else if(r instanceof Map)i("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)i(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else i("Set instance","other value",n,l);else if(r instanceof Set)i("other value","Set instance",n,l);else if(a||o)if(a!==o)i(`type ${a?"array":"object"}`,`type ${o?"array":"object"}`,n,l);else if(t.length!==r.length)i(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,l+1);else if(g(t)||g(r))g(t)!==g(r)?i(`type ${g(t)?"React element":"object"}`,`type ${g(r)?"React element":"object"}`,n,l):t.type!==r.type?i(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||i(`object without key ${e}`,`object with key ${e}`,n,l);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,l+1):i(`object with key ${a}`,`object without key ${a}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&i(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function a(e,t,r){let a=t,i=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=i.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof a&&null!=i.ref&&(a=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:i}}function i(e){let t=(t,r,n)=>{let l=a(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=a(e,t,r??{}),{children:i,...o}=l.props;return e.createElement(l.type,void 0===n?o:{...o,key:n},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let l=a(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),i=l.ref,o=a(e,l.type,{...l.props,ref:i});return o.type===l.type&&"string"!=typeof l.type?l:e.createElement(o.type,{...o.props,key:l.key})}}}r.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:p,createElement:f,createFactory:y,createRef:w,forwardRef:v,isValidElement:_,lazy:g,memo:b,startTransition:S,unstable_act:E,useCallback:R,useContext:N,useDebugValue:$,useDeferredValue:k,useEffect:M,useId:C,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:x,useMemo:T,useReducer:A,useRef:W,useState:j,useSyncExternalStore:I,useTransition:P,version:z,use:L}=n;r.d(t,{},{Children:l,Component:a,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:p,createElement:f,createFactory:y,createRef:w,default:n,forwardRef:v,isValidElement:_,lazy:g,memo:b,startTransition:S,unstable_act:E,use:L,useCallback:R,useContext:N,useDebugValue:$,useDeferredValue:k,useEffect:M,useId:C,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:x,useMemo:T,useReducer:A,useRef:W,useState:j,useSyncExternalStore:I,useTransition:P,version:z})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:l}=(0,r("p").MA)(window.React);var a=r("vD");let i=window.WallarmDS.Chart,o=window.WallarmDS.ChartHeader,c=window.WallarmDS.ChartTitle,s=window.WallarmDS.Metric,d=window.WallarmDS.MetricCaption,u=window.WallarmDS.MetricDelta,m=window.WallarmDS.MetricHeader,h=window.WallarmDS.MetricSkeleton,p=window.WallarmDS.MetricSparkline,f=window.WallarmDS.MetricTotal,y=window.WallarmDS.MetricValue,w="https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12610-10640",v={title:"Data Display/SimpleCharts/Metric",component:s,parameters:{layout:"padded",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11437-11939"},docs:{description:{component:"The family's compact stat — one number, optionally against a total and a change — for a card with no breakdown to draw; reach for `HorizontalBarStack` once that number splits into named parts. It is a brick set rather than a set of props: `MetricHeader` holds `MetricValue`, `MetricTotal` and `MetricDelta`, with `MetricCaption` beneath. On the delta, `sentiment` picks the colour and `trend` picks the arrow, on purpose independently — a number going up is not always good news. Add `MetricSparkline` after `Metric` to show the trend over the period; hover it for a point's date and value."}}}},_=r=>{let n,l,s=(0,a.c)(5),{title:d,children:u}=r;return s[0]!==d?(n=e(o,{children:e(c,{children:d})}),s[0]=d,s[1]=n):n=s[1],s[2]!==u||s[3]!==n?(l=e("div",{className:"w-320",children:t(i,{children:[n,u]})}),s[2]=u,s[3]=n,s[4]=l):l=s[4],l},g=[{x:new Date(2026,0,1),value:14},{x:new Date(2026,0,2),value:11},{x:new Date(2026,0,3),value:11},{x:new Date(2026,0,4),value:11},{x:new Date(2026,0,5),value:16},{x:new Date(2026,0,6),value:18},{x:new Date(2026,0,7),value:20},{x:new Date(2026,0,8),value:19},{x:new Date(2026,0,9),value:13}],b=()=>{let r,n,l=(0,a.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(o,{children:e(c,{children:"Attacks"})}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-400",children:t(i,{children:[r,t(s,{children:[t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"positive"})]}),e(d,{children:"last 9 days"})]}),e(p,{"data-testid":"sparkline",data:g,label:"Attacks"})]})}),l[1]=n):n=l[1],n};b.parameters={design:{type:"figma",url:w}};let S=()=>{let r,n,l,h,f,w,v,_,b=(0,a.c)(8);return b[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(o,{children:e(c,{children:"Negative"})}),b[0]=r):r=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-256",children:t(i,{children:[r,t(s,{children:[t(m,{children:[e(y,{children:"74"}),e(u,{value:5,trend:"down",sentiment:"negative"})]}),e(d,{children:"last 9 days"})]}),e(p,{data:g,color:"negative",label:"Attacks"})]})}),b[1]=n):n=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(o,{children:e(c,{children:"Positive"})}),b[2]=l):l=b[2],b[3]===Symbol.for("react.memo_cache_sentinel")?(h=e("div",{className:"w-256",children:t(i,{children:[l,t(s,{children:[t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"positive"})]}),e(d,{children:"last 9 days"})]}),e(p,{data:g,color:"positive",label:"Attacks"})]})}),b[3]=h):h=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(f=e(o,{children:e(c,{children:"Brand"})}),b[4]=f):f=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(w=e("div",{className:"w-256",children:t(i,{children:[f,t(s,{children:[t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"positive"})]}),e(d,{children:"last 9 days"})]}),e(p,{data:g,label:"Attacks"})]})}),b[5]=w):w=b[5],b[6]===Symbol.for("react.memo_cache_sentinel")?(v=e(o,{children:e(c,{children:"Neutral"})}),b[6]=v):v=b[6],b[7]===Symbol.for("react.memo_cache_sentinel")?(_=t("div",{className:"flex flex-wrap gap-16",children:[n,h,w,e("div",{className:"w-256",children:t(i,{children:[v,t(s,{children:[t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"positive"})]}),e(d,{children:"last 9 days"})]}),e(p,{data:g,color:"neutral",label:"Attacks"})]})})]}),b[7]=_):_=b[7],_};S.parameters={design:{type:"figma",url:w}};var E=r("C");let R=[{name:"Gallery",story:()=>{let r,n,l,i,o,c,h,p,w,v=(0,a.c)(9);return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(_,{title:"Value only",children:e(s,{"data-testid":"metric",children:e(m,{children:e(y,{children:"91"})})})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(_,{title:"Negative — count rose",children:e(s,{children:t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})})}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(_,{title:"Positive — count fell",children:e(s,{children:t(m,{children:[e(y,{children:"74"}),e(u,{value:8,trend:"down",sentiment:"positive"})]})})}),v[2]=l):l=v[2],v[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{title:"Neutral",children:e(s,{children:t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up"})]})})}),v[3]=i):i=v[3],v[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(_,{title:"Total — slash",children:e(s,{children:t(m,{children:[e(y,{children:"91"}),e(f,{connector:"slash",children:"120"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})})}),v[4]=o):o=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(_,{title:"Total — of",children:e(s,{children:t(m,{children:[e(y,{children:"91"}),e(f,{connector:"of",children:"120"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})})}),v[5]=c):c=v[5],v[6]===Symbol.for("react.memo_cache_sentinel")?(h=e(_,{title:"Total — total",children:e(s,{children:t(m,{children:[e(y,{children:"91"}),e(f,{connector:"total",children:"120"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})})}),v[6]=h):h=v[6],v[7]===Symbol.for("react.memo_cache_sentinel")?(p=e(_,{title:"With caption",children:t(s,{children:[t(m,{children:[e(y,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]}),e(d,{children:"blocked today"})]})}),v[7]=p):p=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(w=t("div",{className:"flex flex-wrap gap-16",children:[r,n,l,i,o,c,h,p,e(_,{title:"Everything",children:t(s,{children:[t(m,{children:[e(y,{children:"91"}),e(f,{connector:"of",children:"120"}),e(u,{value:10,trend:"up",sentiment:"negative"})]}),e(d,{children:"blocked today"})]})})]}),v[8]=w):w=v[8],w},meta:v},{name:"Loading",story:()=>{let t,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(_,{title:"Findings",children:e(h,{"data-testid":"metric-skeleton"})}),r[0]=t):t=r[0],t},meta:v},{name:"Sparkline",story:b,meta:v},{name:"SparklineColors",story:S,meta:v}];function N({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>E.default.createElement(l,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=a;a=()=>e(t,i)}return E.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},E.default.createElement("h2",{className:"text-sm mb-12"},e.name),E.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(E.default.createElement(window.WallarmDS.Root,null,R.map((e,t)=>E.default.createElement(N,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,25 @@
+## 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 |
+| --- | --- | --- | --- | --- |
+| `mode` | `"expanded" \| "collapsed" \| "compact"` | no | `expanded` | How the rail lays out its items: `expanded` (icon beside label), `collapsed` (icon only) or `compact` (icon over a short label). Wins over `collapsed` when both are set. |
+| `collapsed` | `boolean \| undefined` | no | `false` | Shorthand for `mode='collapsed'`, kept so existing hosts keep working. Prefer `mode`. |
+| `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 | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.NavRailBody` — `NavRailBodyProps` in the declaration bundle.
+- `WallarmDS.NavRailFooter` — `NavRailFooterProps` in the declaration bundle.
+- `WallarmDS.NavRailItem` — `NavRailItemProps` in the declaration bundle.
+- `WallarmDS.NavRailSeparator` — `NavRailSeparatorProps` in the declaration bundle.
+- `WallarmDS.NavRailSkeleton` — `NavRailSkeletonProps` in the declaration bundle.

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

@@ -0,0 +1,91 @@
+The in-app notification inbox the bell in the top header opens: unread count on the bell, New and Read tabs, and a list where each card is one click target with its own action buttons. It is composition only — the app owns the data, decides when an item counts as read, and picks what each body shows: a list, `NotificationCenterSkeleton` while loading, or `NotificationCenterEmpty` for the empty and error states.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean \| undefined` | no | — | Controlled open state. Omit for uncontrolled. |
+| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — |  |
+| `positioning` | `complex` | no | `{ placement: 'bottom-end', gutter: 4 }` | Default: right-aligned under the bell with a 4px gap. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.NotificationCenterBody` — `NotificationCenterBodyProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterEmpty` — `NotificationCenterEmptyProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterSkeleton` — `NotificationCenterSkeletonProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterContent` — `NotificationCenterContentProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterHeaderAction` — `NotificationCenterHeaderActionProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterHeaderActions` — `NotificationCenterHeaderActionsProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterHeader` — `NotificationCenterHeaderProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterTitle` — `NotificationCenterTitleProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterItemActions` — `NotificationCenterItemActionsProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterItemDescription` — `NotificationCenterItemDescriptionProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterItem` — `NotificationCenterItemProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterList` — `NotificationCenterListProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterItemTime` — `NotificationCenterItemTimeProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterItemTitle` — `NotificationCenterItemTitleProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterTabsList` — `NotificationCenterTabsListProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterTabs` — `NotificationCenterTabsProps` in the declaration bundle.
+- `WallarmDS.NotificationCenterTrigger` — `NotificationCenterTriggerProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The four kinds of notification are plain composition: two actions for a decision, one call to
+action for triage and digests, none for an FYI. `data-analytics-id` goes on the title and on
+each action button.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#Basic
+
+### ReadTab
+
+Read items drop the dot and show their age; the tab opens on Read here through `defaultValue`.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#ReadTab
+
+### Empty
+
+Each tab has its own empty state, built from `EmptyState` parts. "Mark all as read" is disabled
+by the app when nothing is unread.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#Empty
+
+### Loading
+
+While the inbox loads, the body shows placeholder rows and the bell has no badge yet.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#Loading
+
+### ErrorState
+
+A failed load reuses `NotificationCenterEmpty` with a retry button. Tabs are optional: here the
+body sits straight under the header.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#ErrorState
+
+### ManyItems
+
+Past 640px the list scrolls inside the body while the header and tabs stay put.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#ManyItems
+
+### InTopHeader
+
+Where it lives: the bell in the shell's top header, between the AI Assistant toggle and Quick
+help, opening right-aligned under the button.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#InTopHeader
+
+### Controlled
+
+Controlled open state: the app can close the inbox itself, for example after navigating.
+
+Source: NotificationCenter/NotificationCenter.stories.tsx#Controlled
+
+## Story sources
+
+The story files and their local imports are in [stories.md](./stories.md), verbatim.

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,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,i,o=Object.create,c=Object.defineProperty,d=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,m=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of s(t))h.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=d(t,a))||r.enumerable});return e},u={},p={$dispatcherGuard:()=>R,$makeReadOnly:()=>M,$reset:()=>E,$structuralCheck:()=>V,c:()=>C,clearRenderCounterRegistry:()=>$,renderCounterRegistry:()=>T,useRenderCounter:()=>x};for(var y in p)c(u,y,{get:p[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),u);var w=(a=null!=(r=n("C"))?o(m(r)):{},f(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:_,useEffect:S,isValidElement:b}=w,v=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"),C="function"==typeof(null==(i=w.__COMPILER_RUNTIME)?void 0:i.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=g;return t[g]=!0,t},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[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 D=null;function W(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=D)return D.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function R(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(D=t),t===N)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.");W(N)}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&&(D=null),W(e)}else if(2===e)k.push(t),W(D);else if(3===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");W(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function E(e){for(let t=0;t<e.length;t++)e[t]=g}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var T=new Map;function $(){for(let e of T.values())e.forEach(e=>{e.count=0})}function x(e){let t=_(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,r={count:0};null==(n=T.get(e))&&(n=new Set,T.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=T.get(e))&&r.delete(n))}})}var I=new Set;function V(e,t,n,r,a,l){function i(e,t,i,o){let c=`${r}:${l} [${a}] ${n}${i} changed from ${e} to ${t} at depth ${o}`;I.has(c)||(I.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)i(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(n);if(null===t&&null!==n)i("null",`type ${typeof n}`,r,a);else if(null===n)i(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)i(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[l,o]of t)n.has(l)?e(o,n.get(l),`${r}.get(${l})`,a+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,r,a);else i("Map instance","other value",r,a);else if(n instanceof Map)i("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)i(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else i("Set instance","other value",r,a);else if(n instanceof Set)i("other value","Set instance",r,a);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,r,a);else if(t.length!==n.length)i(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${r}[${l}]`,a+1);else if(b(t)||b(n))b(t)!==b(n)?i(`type ${b(t)?"React element":"object"}`,`type ${b(n)?"React element":"object"}`,r,a):t.type!==n.type?i(`React element of type ${t.type}`,`React element of type ${n.type}`,r,a):e(t.props,n.props,`[props of ${r}]`,a+1);else{for(let e in n)e in t||i(`object without key ${e}`,`object with key ${e}`,r,a);for(let l in t)l in n?e(t[l],n[l],`${r}.${l}`,a+1):i(`object with key ${l}`,`object without key ${l}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&i(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function l(e,t,n){let l=t,i=n;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!=i.ref&&!l.prototype?.isReactComponent){let t=l,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let a=n.get(t);a||((a=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=function(e,t){let n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let l=e.forwardRef((n,r)=>{let a=e.useRef(null);if(!a.current||a.current.original!==r){let e;a.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,n,r)=>{let a=l(e,t,n??{});return e.createElement(a.type,void 0===r?a.props:{...a.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let a=l(e,t,n??{}),{children:i,...o}=a.props;return e.createElement(a.type,void 0===r?o:{...o,key:r},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,n,...r)=>{let a=l(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),i=a.ref,o=l(e,a.type,{...a.props,ref:i});return o.type===a.type&&"string"!=typeof a.type?a:e.createElement(o.type,{...o.props,key:a.key})}}}n.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:d,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:f,createContext:u,createElement:p,createFactory:y,createRef:w,forwardRef:_,isValidElement:S,lazy:b,memo:v,startTransition:g,unstable_act:C,useCallback:N,useContext:D,useDebugValue:W,useDeferredValue:k,useEffect:R,useId:E,useImperativeHandle:M,useInsertionEffect:T,useLayoutEffect:$,useMemo:x,useReducer:I,useRef:V,useState:L,useSyncExternalStore:A,useTransition:O,version:j,use:H}=r;n.d(t,{},{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:d,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:f,createContext:u,createElement:p,createFactory:y,createRef:w,default:r,forwardRef:_,isValidElement:S,lazy:b,memo:v,startTransition:g,unstable_act:C,use:H,useCallback:N,useContext:D,useDebugValue:W,useDeferredValue:k,useEffect:R,useId:E,useImperativeHandle:M,useInsertionEffect:T,useLayoutEffect:$,useMemo:x,useReducer:I,useRef:V,useState:L,useSyncExternalStore:A,useTransition:O,version:j})}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,n),l.exports}n.d=(e,t,r)=>{var a=(t,r)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[r]:t[a]})};a(t,"get"),a(r,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.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:r,Fragment:a}=(0,n("p").MA)(window.React);var l=n("vD"),i=n("C");let o=()=>{let n,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("svg",{width:"89",height:"16",viewBox:"0 0 89 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M33.9026 4.87835H35.5876L37.698 11.2096L39.383 4.87835H41.4934L38.5405 14.1625H36.8555L34.7451 7.83127L32.6346 14.1625H30.9496L27.9884 4.87835H30.0988L31.7838 11.2096L33.8942 4.87835H33.9026ZM44.9886 12.7862C46.3733 12.7862 47.4076 12.0104 47.4076 10.8676V10.292C46.8738 10.0835 46.1314 9.92502 45.3139 9.92502C44.0042 9.92502 43.2201 10.4589 43.2201 11.3931V11.4265C43.2201 12.294 43.9959 12.7778 44.9802 12.7778L44.9886 12.7862ZM42.7613 5.35382C43.5371 5.07855 44.388 4.90337 45.5057 4.90337C48.2001 4.90337 49.518 6.24637 49.518 8.68212V14.1709H47.4076V13.0531C46.782 13.7955 45.8728 14.3627 44.4881 14.3627C42.7614 14.3627 41.2432 13.3784 41.2432 11.5433V11.5099C41.2432 9.5413 42.8197 8.57368 44.9385 8.57368C46.0479 8.57368 46.6986 8.73217 47.4076 8.95739V8.73217C47.4076 7.47258 46.6652 6.78023 45.2138 6.78023C44.2712 6.78023 43.5204 6.98043 42.7613 7.28073V5.3705V5.35382ZM50.786 14.1625V1.5H52.8964V14.1625H50.786ZM54.1643 14.1625V1.5H56.2747L56.3164 14.1625H54.1643ZM61.0378 12.7862C62.4225 12.7862 63.4569 12.0104 63.4569 10.8676V10.292C62.923 10.0835 62.1806 9.92502 61.3631 9.92502C60.0535 9.92502 59.2694 10.4589 59.2694 11.3931V11.4265C59.2694 12.294 60.0451 12.7778 61.0295 12.7778L61.0378 12.7862ZM58.8106 5.35382C59.578 5.07855 60.4372 4.90337 61.555 4.90337C64.2493 4.90337 65.5589 6.24637 65.5589 8.68212V14.1709H63.4485V13.0531C62.8229 13.7955 61.9137 14.3627 60.529 14.3627C58.8022 14.3627 57.2841 13.3784 57.2841 11.5433V11.5099C57.2841 9.5413 58.8606 8.57368 60.9794 8.57368C62.0888 8.57368 62.7395 8.73217 63.4485 8.95739V8.73217C63.4485 7.47258 62.7061 6.78023 61.2547 6.78023C60.3121 6.78023 59.5613 6.98043 58.8022 7.28073V5.3705L58.8106 5.35382ZM66.8269 14.1625V4.87835H68.9373V6.93872C69.5045 5.5707 70.5389 4.63644 72.1405 4.71152V6.92204H72.0237C70.1885 6.92204 68.9373 8.11489 68.9373 10.534V14.1709H66.8269V14.1625ZM87.0969 8.18162V14.1709H84.9865V8.94071C84.9865 7.48927 84.3359 6.58838 83.1597 6.58838C81.9835 6.58838 81.1911 7.47258 81.1911 8.94071V14.1709H79.0807V8.80724C79.0807 7.38917 78.43 6.58838 77.2705 6.58838C76.1111 6.58838 75.2769 7.52263 75.2769 8.94071V14.1709H73.1665V4.87835H75.2769V6.26305C75.8692 5.45392 76.695 4.68649 78.0964 4.68649C79.406 4.68649 80.3236 5.32879 80.8074 6.29642C81.5498 5.32879 82.5174 4.68649 83.9021 4.68649C85.8874 4.68649 87.0969 5.94607 87.0969 8.18162Z",fill:"currentColor"}),e("path",{d:"M0.849998 6.83954L9.8954 3V8.4134L16.4618 5.62599V9.59236L21.2757 7.54864V10.4542L16.4618 12.498V10.754L9.8954 13.5414V11.1662L0.849998 15V6.83954Z",fill:"#FF441C"})]}),r[0]=n):n=r[0],n},c=window.WallarmDS.Icons.Activity,d=window.WallarmDS.Icons.Book,s=window.WallarmDS.Icons.CircleHelp,m=window.WallarmDS.Icons.LifeBuoy,h=window.WallarmDS.Icons.NotebookText,f=window.WallarmDS.Icons.SquareArrowOutUpRight,u=window.WallarmDS.Button,p=window.WallarmDS.DropdownMenu,y=window.WallarmDS.DropdownMenuContent,w=window.WallarmDS.DropdownMenuItem,_=window.WallarmDS.DropdownMenuItemContent,S=window.WallarmDS.DropdownMenuItemIcon,b=window.WallarmDS.DropdownMenuItemText,v=window.WallarmDS.DropdownMenuSeparator,g=window.WallarmDS.DropdownMenuTrigger,C=window.WallarmDS.Text,N=window.WallarmDS.Tooltip,D=window.WallarmDS.TooltipContent,W=window.WallarmDS.TooltipTrigger,k=()=>{let n,r,a,i,o,k,x,I,V,L,A,O,j,H=(0,l.c)(13);return H[0]===Symbol.for("react.memo_cache_sentinel")?(n={placement:"bottom-end",gutter:4},H[0]=n):n=H[0],H[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(N,{children:[e(W,{asChild:!0,children:e("span",{className:"inline-flex",children:e(g,{asChild:!0,children:e(u,{variant:"ghost",size:"small",color:"neutral","aria-label":"Quick Help",children:e(s,{})})})})}),e(D,{children:"Quick help"})]}),H[1]=r):r=H[1],H[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(S,{children:e(d,{})}),H[2]=a):a=H[2],H[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(w,{onSelect:R,children:[a,t(_,{children:[e(b,{children:"Documentation"}),e(C,{size:"xs",color:"secondary",children:"Setup, deployment, and how-tos"})]})]}),H[3]=i):i=H[3],H[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(S,{children:e(c,{})}),H[4]=o):o=H[4],H[5]===Symbol.for("react.memo_cache_sentinel")?(k=t(w,{onSelect:E,children:[o,t(_,{children:[e(b,{children:"Service status"}),e(C,{size:"xs",color:"secondary",children:"Live uptime and alerts"})]})]}),H[5]=k):k=H[5],H[6]===Symbol.for("react.memo_cache_sentinel")?(x=e(S,{children:e(m,{})}),H[6]=x):x=H[6],H[7]===Symbol.for("react.memo_cache_sentinel")?(I=t(w,{onSelect:M,children:[x,t(_,{children:[e(b,{children:"Support"}),e(C,{size:"xs",color:"secondary",children:"Talk to our team"})]})]}),H[7]=I):I=H[7],H[8]===Symbol.for("react.memo_cache_sentinel")?(V=e(S,{children:e(h,{})}),H[8]=V):V=H[8],H[9]===Symbol.for("react.memo_cache_sentinel")?(A=t(w,{onSelect:T,children:[V,t(_,{children:[e(b,{children:"Blog"}),e(C,{size:"xs",color:"secondary",children:"Security news and updates"})]})]}),L=e(v,{}),H[9]=L,H[10]=A):(L=H[9],A=H[10]),H[11]===Symbol.for("react.memo_cache_sentinel")?(O=e(S,{children:e(f,{})}),H[11]=O):O=H[11],H[12]===Symbol.for("react.memo_cache_sentinel")?(j=t(p,{positioning:n,children:[r,t(y,{className:"w-320",children:[i,k,I,A,L,t(w,{onSelect:$,children:[O,t(_,{children:[e(b,{children:"Wallarm Playground"}),e(C,{size:"xs",color:"secondary",children:"Try the platform without any setup"})]})]})]})]}),H[12]=j):j=H[12],j};function R(){return window.open("https://docs.wallarm.com/","_blank")}function E(){return window.open("https://status.wallarm.com/","_blank")}function M(){return window.open("mailto:support@wallarm.com")}function T(){return window.open("https://lab.wallarm.com","_blank")}function $(){return window.open("https://playground.wallarm.com","_blank")}let x=window.WallarmDS.Icons.CheckCheck,I=window.WallarmDS.Icons.History,V=window.WallarmDS.Icons.Settings,L=window.WallarmDS.Icons.TriangleAlert,A=window.WallarmDS.AppShell,O=window.WallarmDS.AppShellHeader,j=window.WallarmDS.Button,H=window.WallarmDS.ChatTrigger,z=window.WallarmDS.EmptyStateActions,P=window.WallarmDS.EmptyStateDescription,U=window.WallarmDS.EmptyStateIllustration,Z=window.WallarmDS.EmptyStateMessage,B=window.WallarmDS.EmptyStateTitle,F=window.WallarmDS.NumericBadge,Q=window.WallarmDS.TabsContent,Y=window.WallarmDS.TabsTrigger,J=window.WallarmDS.TopHeader,G=window.WallarmDS.TopHeaderActions,q=window.WallarmDS.TopHeaderLogo,X=window.WallarmDS.TopHeaderSeparator,K=window.WallarmDS.NotificationCenter,ee=window.WallarmDS.NotificationCenterBody,et=window.WallarmDS.NotificationCenterEmpty,en=window.WallarmDS.NotificationCenterSkeleton,er=window.WallarmDS.NotificationCenterContent,ea=window.WallarmDS.NotificationCenterHeader,el=window.WallarmDS.NotificationCenterHeaderAction,ei=window.WallarmDS.NotificationCenterHeaderActions,eo=window.WallarmDS.NotificationCenterTitle,ec=window.WallarmDS.NotificationCenterItem,ed=window.WallarmDS.NotificationCenterItemActions,es=window.WallarmDS.NotificationCenterItemDescription,em=window.WallarmDS.NotificationCenterList,eh=window.WallarmDS.NotificationCenterItemTime,ef=window.WallarmDS.NotificationCenterItemTitle,eu=window.WallarmDS.NotificationCenterTabs,ep=window.WallarmDS.NotificationCenterTabsList,ey=window.WallarmDS.NotificationCenterTrigger,ew={title:"Messaging/NotificationCenter",component:K,subcomponents:{NotificationCenterTrigger:ey,NotificationCenterContent:er,NotificationCenterHeader:ea,NotificationCenterTitle:eo,NotificationCenterHeaderActions:ei,NotificationCenterHeaderAction:el,NotificationCenterTabs:eu,NotificationCenterTabsList:ep,NotificationCenterBody:ee,NotificationCenterList:em,NotificationCenterItem:ec,NotificationCenterItemTitle:ef,NotificationCenterItemTime:eh,NotificationCenterItemDescription:es,NotificationCenterItemActions:ed,NotificationCenterEmpty:et,NotificationCenterSkeleton:en},parameters:{layout:"padded",docs:{description:{component:"The in-app notification inbox the bell in the top header opens: unread count on the bell, New and Read tabs, and a list where each card is one click target with its own action buttons. It is composition only — the app owns the data, decides when an item counts as read, and picks what each body shows: a list, `NotificationCenterSkeleton` while loading, or `NotificationCenterEmpty` for the empty and error states."}}}},e_=e=>new Date(Date.now()-6e4*e),eS=Array.from({length:24},(e,t)=>({id:`node-${t}`,title:`Node wallarm-node-${t+1} is offline`,description:"No heartbeat for 15 minutes. Traffic fails over to the remaining nodes.",createdAt:e_(37*t+1)})),eb=()=>{let n,r,a,i,c,d,s,m,h,f,u,p,y,w,_,S,b,v=(0,l.c)(17);return v[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(q,{href:"/",children:e(o,{})}),v[0]=n):n=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(j,{variant:"ghost",size:"small",color:"neutral",children:"Tenant Name"}),a=e(X,{}),i=e(H,{}),v[1]=r,v[2]=a,v[3]=i):(r=v[1],a=v[2],i=v[3]),v[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(ey,{count:2}),v[4]=c):c=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(eo,{}),v[5]=d):d=v[5],v[6]===Symbol.for("react.memo_cache_sentinel")?(s=e(el,{children:"Mark all as read"}),v[6]=s):s=v[6],v[7]===Symbol.for("react.memo_cache_sentinel")?(m=t(ea,{children:[d,t(ei,{children:[s,e(el,{asChild:!0,"aria-label":"Notification settings",children:e("a",{href:"#notification-settings",children:e(V,{})})})]})]}),v[7]=m):m=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(h=t(ep,{children:[t(Y,{value:"new",children:["New ",e(F,{size:"small",children:"2"})]}),e(Y,{value:"read",children:"Read"})]}),v[8]=h):h=v[8],v[9]===Symbol.for("react.memo_cache_sentinel")?(f=e(ef,{children:"New attack detected on api.example.com"}),v[9]=f):f=v[9],v[10]===Symbol.for("react.memo_cache_sentinel")?(u=e(eh,{value:e_(3)}),p=e(es,{children:"214 SQL injection attempts from 12 IPs in the last 10 minutes."}),v[10]=u,v[11]=p):(u=v[10],p=v[11]),v[12]===Symbol.for("react.memo_cache_sentinel")?(y=t(ec,{unread:!0,children:[f,u,p,e(ed,{children:e(j,{size:"small",children:"View attacks"})})]}),v[12]=y):y=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(w=e(ef,{children:"Node wallarm-node-3 is offline"}),v[13]=w):w=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(_=e(Q,{value:"new",children:e(ee,{children:t(em,{children:[y,t(ec,{unread:!0,children:[w,e(eh,{value:e_(22)}),e(es,{children:"No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1."})]})]})})}),v[14]=_):_=v[14],v[15]===Symbol.for("react.memo_cache_sentinel")?(S=e(ef,{children:"Weekly API discovery report is ready"}),v[15]=S):S=v[15],v[16]===Symbol.for("react.memo_cache_sentinel")?(b=e(A,{ambient:!1,className:"h-[720px]",children:e(O,{children:t(J,{children:[n,t(G,{children:[r,a,i,t(K,{"data-testid":"notification-center",children:[c,t(er,{children:[m,t(eu,{defaultValue:"new",children:[h,_,e(Q,{value:"read",children:e(ee,{children:e(em,{children:t(ec,{children:[S,e(eh,{value:e_(10080)}),e(es,{children:"38 new endpoints this week, 5 of them handling sensitive data."})]})})})})]})]})]}),e(k,{})]})]})})}),v[16]=b):b=v[16],b};function ev(n){return t(ec,{unread:!0,children:[e(ef,{children:n.title}),e(eh,{value:n.createdAt}),e(es,{children:n.description})]},n.id)}eb.parameters={layout:"fullscreen"};let eg=[{name:"Basic",story:()=>{let n,r,a,i,o,c,d,s,m,h,f,u,p,y,w,_,S,b,v,g,C,N,D,W=(0,l.c)(23);return W[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(ey,{count:5,"data-analytics-id":"notifications-open"}),W[0]=n):n=W[0],W[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(eo,{}),W[1]=r):r=W[1],W[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(el,{"data-analytics-id":"notifications-mark-all-read",children:"Mark all as read"}),W[2]=a):a=W[2],W[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(ea,{children:[r,t(ei,{children:[a,e(el,{asChild:!0,"aria-label":"Notification settings",children:e("a",{href:"#notification-settings",children:e(V,{})})})]})]}),W[3]=i):i=W[3],W[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(ep,{children:[t(Y,{value:"new",children:["New ",e(F,{size:"small",children:"5"})]}),e(Y,{value:"read",children:"Read"})]}),W[4]=o):o=W[4],W[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(ef,{"data-analytics-id":"notification-open",children:"Apply a virtual patch to api.example.com?"}),W[5]=c):c=W[5],W[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(eh,{value:e_(3)}),s=e(es,{children:"Wally drafted a patch for the SQL injection on POST /v1/orders. It blocks the payload without touching the code."}),W[6]=d,W[7]=s):(d=W[6],s=W[7]),W[8]===Symbol.for("react.memo_cache_sentinel")?(m=t(ec,{unread:!0,"data-testid":"notification-center--item-patch",children:[c,d,s,t(ed,{children:[e(j,{size:"small","data-analytics-id":"notification-patch-approve",children:"Approve"}),e(j,{size:"small",variant:"outline",color:"neutral","data-analytics-id":"notification-patch-reject",children:"Reject"})]})]}),W[8]=m):m=W[8],W[9]===Symbol.for("react.memo_cache_sentinel")?(h=e(ef,{"data-analytics-id":"notification-open",children:"New attack detected on api.example.com"}),W[9]=h):h=W[9],W[10]===Symbol.for("react.memo_cache_sentinel")?(f=e(eh,{value:e_(9)}),u=e(es,{children:"214 SQL injection attempts from 12 IPs in the last 10 minutes."}),W[10]=f,W[11]=u):(f=W[10],u=W[11]),W[12]===Symbol.for("react.memo_cache_sentinel")?(p=t(ec,{unread:!0,children:[h,f,u,e(ed,{children:e(j,{size:"small","data-analytics-id":"notification-view-attacks",children:"View attacks"})})]}),W[12]=p):p=W[12],W[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(ef,{"data-analytics-id":"notification-open",children:"Node wallarm-node-3 is offline"}),W[13]=y):y=W[13],W[14]===Symbol.for("react.memo_cache_sentinel")?(w=t(ec,{unread:!0,children:[y,e(eh,{value:e_(22)}),e(es,{children:"No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1."})]}),W[14]=w):w=W[14],W[15]===Symbol.for("react.memo_cache_sentinel")?(_=e(ef,{"data-analytics-id":"notification-open",children:"Filtering rules updated"}),W[15]=_):_=W[15],W[16]===Symbol.for("react.memo_cache_sentinel")?(S=t(ec,{unread:!0,children:[_,e(eh,{value:e_(60)}),e(es,{children:"All nodes picked up the latest rule set. Nothing to do."})]}),W[16]=S):S=W[16],W[17]===Symbol.for("react.memo_cache_sentinel")?(b=e(ef,{"data-analytics-id":"notification-open",children:"Weekly API discovery report is ready"}),W[17]=b):b=W[17],W[18]===Symbol.for("react.memo_cache_sentinel")?(v=e(eh,{value:e_(120)}),g=e(es,{children:"38 new endpoints this week, 5 of them handling sensitive data."}),W[18]=v,W[19]=g):(v=W[18],g=W[19]),W[20]===Symbol.for("react.memo_cache_sentinel")?(C=e(Q,{value:"new",children:e(ee,{children:t(em,{children:[m,p,w,S,t(ec,{unread:!0,children:[b,v,g,e(ed,{children:e(j,{size:"small","data-analytics-id":"notification-view-report",children:"View report"})})]})]})})}),W[20]=C):C=W[20],W[21]===Symbol.for("react.memo_cache_sentinel")?(N=e(ef,{children:"Node wallarm-node-2 is back online"}),W[21]=N):N=W[21],W[22]===Symbol.for("react.memo_cache_sentinel")?(D=e("div",{className:"flex h-[720px] justify-end",children:t(K,{"data-testid":"notification-center",children:[n,t(er,{children:[i,t(eu,{defaultValue:"new",children:[o,C,e(Q,{value:"read",children:e(ee,{children:e(em,{children:t(ec,{children:[N,e(eh,{value:e_(1440)}),e(es,{children:"The node reconnected and is filtering traffic again."})]})})})})]})]})]})}),W[22]=D):D=W[22],D},meta:ew},{name:"ReadTab",story:()=>{let n,r,a,i,o,c,d,s,m,h,f,u,p,y=(0,l.c)(13);return y[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(ey,{}),y[0]=n):n=y[0],y[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(eo,{}),y[1]=r):r=y[1],y[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(el,{disabled:!0,children:"Mark all as read"}),y[2]=a):a=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(ea,{children:[r,t(ei,{children:[a,e(el,{asChild:!0,"aria-label":"Notification settings",children:e("a",{href:"#notification-settings",children:e(V,{})})})]})]}),y[3]=i):i=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(ep,{children:[e(Y,{value:"new",children:"New"}),e(Y,{value:"read",children:"Read"})]}),y[4]=o):o=y[4],y[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(ef,{children:"Apply a virtual patch to api.example.com?"}),y[5]=c):c=y[5],y[6]===Symbol.for("react.memo_cache_sentinel")?(d=t(ec,{children:[c,e(eh,{value:e_(1440)}),e(es,{children:"Approved. The patch is live on all nodes."})]}),y[6]=d):d=y[6],y[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(ef,{children:"New attack detected on api.example.com"}),y[7]=s):s=y[7],y[8]===Symbol.for("react.memo_cache_sentinel")?(m=t(ec,{children:[s,e(eh,{value:e_(2880)}),e(es,{children:"214 SQL injection attempts from 12 IPs in the last 10 minutes."})]}),y[8]=m):m=y[8],y[9]===Symbol.for("react.memo_cache_sentinel")?(h=e(ef,{children:"Node wallarm-node-3 is offline"}),y[9]=h):h=y[9],y[10]===Symbol.for("react.memo_cache_sentinel")?(f=t(ec,{children:[h,e(eh,{value:e_(4320)}),e(es,{children:"No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1."})]}),y[10]=f):f=y[10],y[11]===Symbol.for("react.memo_cache_sentinel")?(u=e(ef,{children:"Weekly API discovery report is ready"}),y[11]=u):u=y[11],y[12]===Symbol.for("react.memo_cache_sentinel")?(p=e("div",{className:"flex h-[720px] justify-end",children:t(K,{"data-testid":"notification-center",children:[n,t(er,{children:[i,t(eu,{defaultValue:"read",children:[o,e(Q,{value:"read",children:e(ee,{children:t(em,{children:[d,m,f,t(ec,{children:[u,e(eh,{value:e_(10080)}),e(es,{children:"38 new endpoints this week, 5 of them handling sensitive data."})]})]})})})]})]})]})}),y[12]=p):p=y[12],p},meta:ew},{name:"Empty",story:()=>{let n,r,a,i,o,c,d,s,m,h=(0,l.c)(9);return h[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(ey,{}),h[0]=n):n=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(eo,{}),h[1]=r):r=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(el,{disabled:!0,children:"Mark all as read"}),h[2]=a):a=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(ea,{children:[r,t(ei,{children:[a,e(el,{asChild:!0,"aria-label":"Notification settings",children:e("a",{href:"#notification-settings",children:e(V,{})})})]})]}),h[3]=i):i=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(ep,{children:[e(Y,{value:"new",children:"New"}),e(Y,{value:"read",children:"Read"})]}),h[4]=o):o=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(U,{children:e(x,{size:"lg"})}),h[5]=c):c=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(Q,{value:"new",children:e(ee,{children:t(et,{children:[c,t(Z,{children:[e(B,{children:"You're all caught up"}),e(P,{children:"No new notifications."})]})]})})}),h[6]=d):d=h[6],h[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(U,{children:e(I,{size:"lg"})}),h[7]=s):s=h[7],h[8]===Symbol.for("react.memo_cache_sentinel")?(m=e("div",{className:"flex h-[400px] justify-end",children:t(K,{"data-testid":"notification-center",children:[n,t(er,{children:[i,t(eu,{defaultValue:"new",children:[o,d,e(Q,{value:"read",children:e(ee,{children:t(et,{children:[s,t(Z,{children:[e(B,{children:"Nothing read yet"}),e(P,{children:"Notifications you've read will show up here."})]})]})})})]})]})]})}),h[8]=m):m=h[8],m},meta:ew},{name:"Loading",story:()=>{let n,r,a,i=(0,l.c)(3);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(ey,{}),i[0]=n):n=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(ea,{children:e(eo,{})}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("div",{className:"flex h-[400px] justify-end",children:t(K,{"data-testid":"notification-center",children:[n,t(er,{children:[r,e(ee,{children:e(en,{})})]})]})}),i[2]=a):a=i[2],a},meta:ew},{name:"ErrorState",story:()=>{let n,r,a,i,o,c=(0,l.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(ey,{}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(ea,{children:e(eo,{})}),c[1]=r):r=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(U,{children:e(L,{size:"lg"})}),c[2]=a):a=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(Z,{children:[e(B,{children:"Couldn't load notifications"}),e(P,{children:"Something went wrong. Refresh the page or try again later."})]}),c[3]=i):i=c[3],c[4]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"flex h-[400px] justify-end",children:t(K,{"data-testid":"notification-center",children:[n,t(er,{children:[r,e(ee,{children:t(et,{children:[a,i,e(z,{children:e(j,{variant:"outline",color:"neutral","data-analytics-id":"notifications-retry",children:"Try again"})})]})})]})]})}),c[4]=o):o=c[4],o},meta:ew},{name:"ManyItems",story:()=>{let n,r,a,i,o,c=(0,l.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(ey,{count:eS.length}),c[0]=n):n=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(eo,{}),c[1]=r):r=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(ea,{children:[r,e(ei,{children:e(el,{children:"Mark all as read"})})]}),c[2]=a):a=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(ep,{children:[t(Y,{value:"new",children:["New ",e(F,{size:"small",children:eS.length})]}),e(Y,{value:"read",children:"Read"})]}),c[3]=i):i=c[3],c[4]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"flex h-[720px] justify-end",children:t(K,{"data-testid":"notification-center",children:[n,t(er,{children:[a,t(eu,{defaultValue:"new",children:[i,e(Q,{value:"new",children:e(ee,{children:e(em,{children:eS.map(ev)})})})]})]})]})}),c[4]=o):o=c[4],o},meta:ew},{name:"InTopHeader",story:eb,meta:ew},{name:"Controlled",story:()=>{let n,r,a,o,c,d,s,m,h,f,u,p=(0,l.c)(19),[y,w]=(0,i.useState)(!1),[_,S]=(0,i.useState)(!0);p[0]===Symbol.for("react.memo_cache_sentinel")?(n=()=>S(!1),p[0]=n):n=p[0];let b=n;p[1]===Symbol.for("react.memo_cache_sentinel")?(r=()=>S(!1),p[1]=r):r=p[1];let v=r,g=+!!_;p[2]!==g?(a=e(ey,{count:g}),p[2]=g,p[3]=a):a=p[3],p[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(eo,{}),p[4]=o):o=p[4];let C=!_;return p[5]!==C?(c=t(ea,{children:[o,e(ei,{children:e(el,{disabled:C,onClick:b,children:"Mark all as read"})})]}),p[5]=C,p[6]=c):c=p[6],p[7]===Symbol.for("react.memo_cache_sentinel")?(d=e(ef,{onClick:v,children:"Weekly API discovery report is ready"}),p[7]=d):d=p[7],p[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(eh,{value:e_(120)}),m=e(es,{children:"38 new endpoints this week, 5 of them handling sensitive data."}),p[8]=s,p[9]=m):(s=p[8],m=p[9]),p[10]!==_?(h=e(ee,{children:e(em,{children:t(ec,{unread:_,children:[d,s,m]})})}),p[10]=_,p[11]=h):h=p[11],p[12]!==h||p[13]!==c?(f=t(er,{children:[c,h]}),p[12]=h,p[13]=c,p[14]=f):f=p[14],p[15]!==y||p[16]!==f||p[17]!==a?(u=e("div",{className:"flex h-[400px] justify-end",children:t(K,{"data-testid":"notification-center",open:y,onOpenChange:w,children:[a,f]})}),p[15]=y,p[16]=f,p[17]=a,p[18]=u):u=p[18],u},meta:ew}];function eC({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>i.default.createElement(a,r),o={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,eg.map((e,t)=>i.default.createElement(eC,{key:t,entry:e})))),t}}})();