@wallarm-org/claude-design 4.14.0 → 4.16.0

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

@@ -2690,6 +2690,7 @@ export const WallarmLogo = () => (
 ```tsx
 import { useState } from 'react';
 import { Building, CircleDashed, Plus } from '../../../icons';
+import { AgentGlyph } from '../../AgentGlyph';
 import { Button } from '../../Button';
 import { Code } from '../../Code';
 import { EmptyState, EmptyStateDescription, EmptyStateMessage } from '../../EmptyState';
@@ -2707,7 +2708,6 @@ import {
   SearchModalTrigger,
 } from '../../SearchModal';
 import { Text } from '../../Text';
-import { WallyIcon } from '../../WallyIcon';
 
 const recentItems = [
   { page: 'Attacks', product: 'Cloud WAF', date: '2 hours ago', href: '/attacks' },
@@ -2796,7 +2796,7 @@ export const StorySearchModal = () => {
               </Text>
             </SearchModalGroupLabel>
             <SearchModalItem onSelect={() => {}}>
-              <WallyIcon variant='circle' size='sm' />
+              <AgentGlyph agent='wally' size={20} />
               <Text size='sm'>Ask Wally</Text>
             </SearchModalItem>
 

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

@@ -1,4 +1,4 @@
-Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight.
+Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. When an agent other than Wally asks, its live 40px `AgentItem` opens the `ApprovalCardContent`. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight.
 
 ## Props as canvas attributes
 
@@ -33,6 +33,12 @@ The default ask: what Wally wants to do, then the split approve button and Rejec
 
 Source: ApprovalCard/ApprovalCard.stories.tsx#Pending
 
+### WithRequester
+
+An agent's request: its live 40px `AgentItem` (the 3D character, name and role, no plate) opens the content.
+
+Source: ApprovalCard/ApprovalCard.stories.tsx#WithRequester
+
 ### PendingLongText
 
 Long text wraps, and unbroken strings such as URLs break rather than overflow the card.
@@ -85,6 +91,7 @@ Source: ApprovalCard/ApprovalCard.stories.tsx#Analytics
 ```tsx
 import type { Meta, StoryFn } from 'storybook-react-rsbuild';
 import { ChevronDown } from '../../icons';
+import { AgentItem, AvatarContent, AvatarDescription, AvatarName } from '../Avatar';
 import { Button } from '../Button';
 import { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot } from '../CodeSnippet';
 import {
@@ -100,6 +107,7 @@ const DESCRIPTION = [
   'Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs.',
   'While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own.',
   'The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input.',
+  'When an agent other than Wally asks, its live 40px `AgentItem` opens the `ApprovalCardContent`.',
   'Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight.',
 ].join(' ');
 
@@ -147,6 +155,27 @@ export const Pending: StoryFn<typeof meta> = () => (
   </ApprovalCard>
 );
 
+/** An agent's request: its live 40px `AgentItem` (the 3D character, name and role, no plate) opens the content. */
+export const WithRequester: StoryFn<typeof meta> = () => (
+  <ApprovalCard data-testid='approval-card'>
+    <ApprovalCardContent>
+      <AgentItem agent='acquit' size={40} live data-testid='approval-card-requester'>
+        <AvatarContent>
+          <AvatarName>Acquit</AvatarName>
+          <AvatarDescription>False Positive Resolver</AvatarDescription>
+        </AvatarContent>
+      </AgentItem>
+      <p>Mark 12 requests to /api/search as false positives and add an exception rule</p>
+    </ApprovalCardContent>
+    <ApprovalCardActions>
+      <Button>Allow</Button>
+      <Button variant='secondary' color='neutral'>
+        Reject
+      </Button>
+    </ApprovalCardActions>
+  </ApprovalCard>
+);
+
 /** Long text wraps, and unbroken strings such as URLs break rather than overflow the card. */
 export const PendingLongText: StoryFn<typeof meta> = () => (
   <ApprovalCard data-testid='approval-card'>

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

@@ -1,4 +1,4 @@
-var e={vD(e,t,n){let r,a;/**
+var e={vD(e,t,n){let a,r;/**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -9,4 +9,4 @@ var e={vD(e,t,n){let r,a;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of d(t))m.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=s(t,a))||r.enumerable});return e},u={},f={$dispatcherGuard:()=>M,$makeReadOnly:()=>N,$reset:()=>O,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>D,useRenderCounter:()=>k};for(var y in f)c(u,y,{get:f[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),u);var _=(a=null!=(r=n("C"))?i(p(r)):{},h(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:w,useEffect:b,isValidElement:S}=_,v=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=g;return t[g]=!0,t},[])},A={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{A[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 C=null;function E(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}A.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function M(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(C=t),t===A)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.");E(A)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(C=null),E(e)}else if(2===e)$.push(t),E(C);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=g}function N(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function j(){for(let e of D.values())e.forEach(e=>{e.count=0})}function k(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,r={count:0};null==(n=D.get(e))&&(n=new Set,D.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=D.get(e))&&r.delete(n))}})}var P=new Set;function I(e,t,n,r,a,o){function l(e,t,l,i){let c=`${r}:${o} [${a}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;P.has(c)||(P.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,r,a);else if(null===n)l(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${r}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,a);else l("Map instance","other value",r,a);else if(n instanceof Map)l("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else l("Set instance","other value",r,a);else if(n instanceof Set)l("other value","Set instance",r,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,a);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${r}[${o}]`,a+1);else if(S(t)||S(n))S(t)!==S(n)?l(`type ${S(t)?"React element":"object"}`,`type ${S(n)?"React element":"object"}`,r,a):t.type!==n.type?l(`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||l(`object without key ${e}`,`object with key ${e}`,r,a);for(let o in t)o in n?e(t[o],n[o],`${r}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&l(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function o(e,t,n){let o=t,l=n;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let o=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 o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,r)=>{let a=o(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=o(e,t,n??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let a=o(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:_,forwardRef:w,isValidElement:b,lazy:S,memo:v,startTransition:g,unstable_act:R,useCallback:A,useContext:C,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:O,useImperativeHandle:N,useInsertionEffect:D,useLayoutEffect:j,useMemo:k,useReducer:P,useRef:I,useState:W,useSyncExternalStore:L,useTransition:T,version:x,use:z}=r;n.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:_,default:r,forwardRef:w,isValidElement:b,lazy:S,memo:v,startTransition:g,unstable_act:R,use:z,useCallback:A,useContext:C,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:O,useImperativeHandle:N,useInsertionEffect:D,useLayoutEffect:j,useMemo:k,useReducer:P,useRef:I,useState:W,useSyncExternalStore:L,useTransition:T,version:x})}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.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 o=n("vD");let l=window.WallarmDS.Icons.ChevronDown,i=window.WallarmDS.Button,c=window.WallarmDS.CodeSnippetCode,s=window.WallarmDS.CodeSnippetContent,d=window.WallarmDS.CodeSnippetRoot,p=window.WallarmDS.DropdownMenu,m=window.WallarmDS.DropdownMenuContent,h=window.WallarmDS.DropdownMenuItem,u=window.WallarmDS.DropdownMenuTrigger,f=window.WallarmDS.SplitButton,y=window.WallarmDS.ApprovalCard,_=window.WallarmDS.ApprovalCardActions,w=window.WallarmDS.ApprovalCardContent,b={title:"AI/ApprovalCard",component:y,subcomponents:{ApprovalCardContent:w,ApprovalCardActions:_},parameters:{layout:"centered",docs:{description:{component:"Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight."}}},decorators:[t=>e("div",{className:"w-[440px]",children:e(t,{})})]};var S=n("C");let v=[{name:"Pending",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"PendingLongText",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:'Disable the rule "Block SQL injection attempts" for the application "Payments API" and redeploy the policy to every node in the eu-west-1 cluster. Affected endpoint: https://payments.example.com/api/v2/transactions/refunds/batch-processing/callbacks'}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"PendingWithCodeSnippet",story:()=>{let n,r,a,b,S,v,g=(0,o.c)(6);return g[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{children:"Run this command on the node:"}),g[0]=n):n=g[0],g[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(w,{children:[n,e(d,{code:"wallarm-cli rules disable --id 4021 --app payments-api",language:"bash",children:e(s,{children:e(c,{})})})]}),g[1]=r):r=g[1],g[2]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},g[2]=a):a=g[2],g[3]===Symbol.for("react.memo_cache_sentinel")?(b=e(i,{children:"Always allow in this session"}),g[3]=b):b=g[3],g[4]===Symbol.for("react.memo_cache_sentinel")?(S=t(f,{children:[b,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),g[4]=S):S=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(v=t(y,{"data-testid":"approval-card",children:[r,t(_,{children:[t(p,{positioning:a,children:[S,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),g[5]=v):v=g[5],v},meta:b},{name:"AllowOnceMenu",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,defaultOpen:!0,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Loading",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{disabled:!0,children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-testid":"approval-card-more",disabled:!0,children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",disabled:!0,children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Approved",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",status:"approved",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Rejected",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card",status:"rejected",rejectedLabel:"Denylist change rejected",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b},{name:"Analytics",story:()=>{let n,r,a,c,s,d=(0,o.c)(5);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(w,{children:"Add 203.0.113.42 to the denylist on all applications"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{"data-analytics-id":"AI_APPROVAL_ALLOW_SESSION",children:"Always allow in this session"}),d[2]=a):a=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{children:[a,e(u,{asChild:!0,children:e(i,{"aria-label":"More approval options","data-analytics-id":"AI_APPROVAL_MORE",children:e(l,{})})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(s=t(y,{"data-testid":"approval-card","data-analytics-id":"AI_APPROVAL_CARD",children:[n,t(_,{children:[t(p,{positioning:r,children:[c,e(m,{children:e(h,{"data-analytics-id":"AI_APPROVAL_ALLOW_ONCE",children:"Allow once"})})]}),e(i,{variant:"secondary",color:"neutral","data-analytics-id":"AI_APPROVAL_REJECT",children:"Reject"})]})]}),d[4]=s):s=d[4],s},meta:b}];function g({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,o=()=>S.default.createElement(a,r),l={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return S.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},S.default.createElement("h2",{className:"text-sm mb-12"},e.name),S.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(S.default.createElement(window.WallarmDS.Root,null,v.map((e,t)=>S.default.createElement(g,{key:t,entry:e})))),t}}})();
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of d(t))m.call(e,r)||r===n||c(e,r,{get:()=>t[r],enumerable:!(a=s(t,r))||a.enumerable});return e},u={},f={$dispatcherGuard:()=>M,$makeReadOnly:()=>N,$reset:()=>D,$structuralCheck:()=>W,c:()=>A,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>O,useRenderCounter:()=>k};for(var y in f)c(u,y,{get:f[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),u);var _=(r=null!=(a=n("C"))?i(p(a)):{},h(a&&a.__esModule?r:c(r,"default",{value:a,enumerable:!0}),a)),{useRef:w,useEffect:b,isValidElement:v}=_,S=null!=(l=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),A="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=g;return t[g]=!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 C=null;function E(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function M(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(C=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.");E(R)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(C=null),E(e)}else if(2===e)$.push(t),E(C);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let t=0;t<e.length;t++)e[t]=g}function N(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function j(){for(let e of O.values())e.forEach(e=>{e.count=0})}function k(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,a={count:0};null==(n=O.get(e))&&(n=new Set,O.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=O.get(e))&&a.delete(n))}})}var P=new Set;function W(e,t,n,a,r,l){function o(e,t,o,i){let c=`${a}:${l} [${r}] ${n}${o} changed from ${e} to ${t} at depth ${i}`;P.has(c)||(P.add(c),console.error(c))}!function e(t,n,a,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,a,r);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,a,r);else if(null===n)o(`type ${typeof t}`,"null",a,r);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)o(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,a,r);else for(let[l,i]of t)n.has(l)?e(i,n.get(l),`${a}.get(${l})`,r+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,a,r);else o("Map instance","other value",a,r);else if(n instanceof Map)o("other value","Map instance",a,r);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)o(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,a,r);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,a,r);else o("Set instance","other value",a,r);else if(n instanceof Set)o("other value","Set instance",a,r);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,a,r);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,a,r);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${a}[${l}]`,r+1);else if(v(t)||v(n))v(t)!==v(n)?o(`type ${v(t)?"React element":"object"}`,`type ${v(n)?"React element":"object"}`,a,r):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,a,r):e(t.props,n.props,`[props of ${a}]`,r+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,a,r);for(let l in t)l in n?e(t[l],n[l],`${a}.${l}`,r+1):o(`object with key ${l}`,`object without key ${l}`,a,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,a,r):t!==n&&o(t,n,a,r)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,r=new WeakMap;function l(e,t,n){let l=t,o=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!=o.ref&&!l.prototype?.isReactComponent){let t=l,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),l=r}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 n=r.get(e);n||(n=new Map,r.set(e,n));let a=n.get(t);if(a)return a;let l=e.forwardRef((n,a)=>{let r=e.useRef(null);if(!r.current||r.current.original!==a){let e;r.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:r.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,n,a)=>{let r=l(e,t,n??{});return e.createElement(r.type,void 0===a?r.props:{...r.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let r=l(e,t,n??{}),{children:o,...i}=r.props;return e.createElement(r.type,void 0===a?i:{...i,key:a},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...a)=>{let r=l(e,t,n??{});return e.createElement(r.type,r.props,...a)},cloneElement:(t,n,...a)=>{let r=e.cloneElement(t,n??void 0,...a),o=r.ref,i=l(e,r.type,{...r.props,ref:o});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}n.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:_,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:g,unstable_act:A,useCallback:R,useContext:C,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:D,useImperativeHandle:N,useInsertionEffect:O,useLayoutEffect:j,useMemo:k,useReducer:P,useRef:W,useState:I,useSyncExternalStore:x,useTransition:L,version:T,use:z}=a;n.d(t,{},{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:h,createContext:u,createElement:f,createFactory:y,createRef:_,default:a,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:g,unstable_act:A,use:z,useCallback:R,useContext:C,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:D,useImperativeHandle:N,useInsertionEffect:O,useLayoutEffect:j,useMemo:k,useReducer:P,useRef:W,useState:I,useSyncExternalStore:x,useTransition:L,version:T})}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var l=t[a]={exports:{}};return e[a](l,l.exports,n),l.exports}n.d=(e,t,a)=>{var r=(t,a)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[a]:t[r]})};r(t,"get"),r(a,"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:a,Fragment:r}=(0,n("p").MA)(window.React);var l=n("vD");let o=window.WallarmDS.Icons.ChevronDown,i=window.WallarmDS.AgentItem,c=window.WallarmDS.AvatarContent,s=window.WallarmDS.AvatarDescription,d=window.WallarmDS.AvatarName,p=window.WallarmDS.Button,m=window.WallarmDS.CodeSnippetCode,h=window.WallarmDS.CodeSnippetContent,u=window.WallarmDS.CodeSnippetRoot,f=window.WallarmDS.DropdownMenu,y=window.WallarmDS.DropdownMenuContent,_=window.WallarmDS.DropdownMenuItem,w=window.WallarmDS.DropdownMenuTrigger,b=window.WallarmDS.SplitButton,v=window.WallarmDS.ApprovalCard,S=window.WallarmDS.ApprovalCardActions,g=window.WallarmDS.ApprovalCardContent,A={title:"AI/ApprovalCard",component:v,subcomponents:{ApprovalCardContent:g,ApprovalCardActions:S},parameters:{layout:"centered",docs:{description:{component:"Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. When an agent other than Wally asks, its live 40px `AgentItem` opens the `ApprovalCardContent`. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight."}}},decorators:[t=>e("div",{className:"w-[440px]",children:e(t,{})})]};var R=n("C");let C=[{name:"Pending",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:"Add 203.0.113.42 to the denylist on all applications"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card",children:[n,t(S,{children:[t(f,{positioning:a,children:[i,e(y,{children:e(_,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A},{name:"WithRequester",story:()=>{let n,a,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{children:[e(i,{agent:"acquit",size:40,live:!0,"data-testid":"approval-card-requester",children:t(c,{children:[e(d,{children:"Acquit"}),e(s,{children:"False Positive Resolver"})]})}),e("p",{children:"Mark 12 requests to /api/search as false positives and add an exception rule"})]}),r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(v,{"data-testid":"approval-card",children:[n,t(S,{children:[e(p,{children:"Allow"}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),r[1]=a):a=r[1],a},meta:A},{name:"PendingLongText",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:'Disable the rule "Block SQL injection attempts" for the application "Payments API" and redeploy the policy to every node in the eu-west-1 cluster. Affected endpoint: https://payments.example.com/api/v2/transactions/refunds/batch-processing/callbacks'}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card",children:[n,t(S,{children:[t(f,{positioning:a,children:[i,e(y,{children:e(_,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A},{name:"PendingWithCodeSnippet",story:()=>{let n,a,r,i,c,s,d=(0,l.c)(6);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("p",{children:"Run this command on the node:"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(g,{children:[n,e(u,{code:"wallarm-cli rules disable --id 4021 --app payments-api",language:"bash",children:e(h,{children:e(m,{})})})]}),d[1]=a):a=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(r={placement:"bottom-end"},d[2]=r):r=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(p,{children:"Always allow in this session"}),d[3]=i):i=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(b,{children:[i,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(o,{})})})]}),d[4]=c):c=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(v,{"data-testid":"approval-card",children:[a,t(S,{children:[t(f,{positioning:r,children:[c,e(y,{children:e(_,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),d[5]=s):s=d[5],s},meta:A},{name:"AllowOnceMenu",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:"Add 203.0.113.42 to the denylist on all applications"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options","data-testid":"approval-card-more",children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card",children:[n,t(S,{children:[t(f,{positioning:a,defaultOpen:!0,children:[i,e(y,{children:e(_,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A},{name:"Loading",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:"Add 203.0.113.42 to the denylist on all applications"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{disabled:!0,children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options","data-testid":"approval-card-more",disabled:!0,children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card",children:[n,t(S,{children:[t(f,{positioning:a,children:[i,e(y,{children:e(_,{"data-testid":"approval-card-allow-once",children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",disabled:!0,children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A},{name:"Approved",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:"Add 203.0.113.42 to the denylist on all applications"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options",children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card",status:"approved",children:[n,t(S,{children:[t(f,{positioning:a,children:[i,e(y,{children:e(_,{children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A},{name:"Rejected",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:"Add 203.0.113.42 to the denylist on all applications"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options",children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card",status:"rejected",rejectedLabel:"Denylist change rejected",children:[n,t(S,{children:[t(f,{positioning:a,children:[i,e(y,{children:e(_,{children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral",children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A},{name:"Analytics",story:()=>{let n,a,r,i,c,s=(0,l.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(g,{children:"Add 203.0.113.42 to the denylist on all applications"}),s[0]=n):n=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(a={placement:"bottom-end"},s[1]=a):a=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{"data-analytics-id":"AI_APPROVAL_ALLOW_SESSION",children:"Always allow in this session"}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{children:[r,e(w,{asChild:!0,children:e(p,{"aria-label":"More approval options","data-analytics-id":"AI_APPROVAL_MORE",children:e(o,{})})})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(v,{"data-testid":"approval-card","data-analytics-id":"AI_APPROVAL_CARD",children:[n,t(S,{children:[t(f,{positioning:a,children:[i,e(y,{children:e(_,{"data-analytics-id":"AI_APPROVAL_ALLOW_ONCE",children:"Allow once"})})]}),e(p,{variant:"secondary",color:"neutral","data-analytics-id":"AI_APPROVAL_REJECT",children:"Reject"})]})]}),s[4]=c):c=s[4],c},meta:A}];function E({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>R.default.createElement(r,a),o={args:a,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 R.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},R.default.createElement("h2",{className:"text-sm mb-12"},e.name),R.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(R.default.createElement(window.WallarmDS.Root,null,C.map((e,t)=>R.default.createElement(E,{key:t,entry:e})))),t}}})();

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

@@ -113,6 +113,13 @@ The same value components in the horizontal layout, where a wide one such as
 
 Source: Attribute/Attribute.stories.tsx#HorizontalComposition
 
+### AgentValue
+
+An agent as the value — Run by, Proposed by: `AgentItem` at 20 px beside the text-sm value, the agent's glyph with
+no plate, where a person gets the `Avatar` plate.
+
+Source: Attribute/Attribute.stories.tsx#AgentValue
+
 ### HorizontalLoading
 
 The horizontal skeleton is a 16px line against the vertical 24px, matching the
@@ -179,6 +186,7 @@ Source: Attribute/Attribute.stories.tsx#HorizontalMixed
 import { useState } from 'react';
 import type { Meta, StoryFn } from 'storybook-react-rsbuild';
 import { Copy, Filter } from '../../icons';
+import { AgentItem, Avatar, AvatarContent, AvatarFallback, AvatarName } from '../Avatar';
 import { Badge } from '../Badge';
 import { Code } from '../Code';
 import { InlineCodeSnippet } from '../CodeSnippet';
@@ -871,6 +879,46 @@ export const HorizontalComposition: StoryFn<AttributeProps> = () => (
   </div>
 );
 
+/**
+ * An agent as the value — Run by, Proposed by: `AgentItem` at 20 px beside the text-sm value, the agent's glyph with
+ * no plate, where a person gets the `Avatar` plate.
+ */
+export const AgentValue: StoryFn<AttributeProps> = () => (
+  <div className='w-[400px] flex flex-col gap-16'>
+    <Attribute data-testid='attr-run-by'>
+      <AttributeLabel>Run by</AttributeLabel>
+      <AttributeValue>
+        <AgentItem agent='radar' data-testid='attr-run-by-agent'>
+          <AvatarContent>
+            <AvatarName>Radar</AvatarName>
+          </AvatarContent>
+        </AgentItem>
+      </AttributeValue>
+    </Attribute>
+    <Attribute orientation='horizontal' data-testid='attr-proposed-by'>
+      <AttributeLabel>Proposed by</AttributeLabel>
+      <AttributeValue>
+        <AgentItem agent='acquit' data-testid='attr-proposed-by-agent'>
+          <AvatarContent>
+            <AvatarName>Acquit</AvatarName>
+          </AvatarContent>
+        </AgentItem>
+      </AttributeValue>
+    </Attribute>
+    <Attribute orientation='horizontal' data-testid='attr-approved-by'>
+      <AttributeLabel>Approved by</AttributeLabel>
+      <AttributeValue>
+        <Avatar size='sm' data-testid='attr-approved-by-person'>
+          <AvatarFallback name='Artem Miskevich' />
+          <AvatarContent>
+            <AvatarName>Artem Miskevich</AvatarName>
+          </AvatarContent>
+        </Avatar>
+      </AttributeValue>
+    </Attribute>
+  </div>
+);
+
 /**
  * The horizontal skeleton is a 16px line against the vertical 24px, matching the
  * single-line row it stands in for.

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

@@ -1,4 +1,4 @@
-var e={vD(e,t,n){let r,l;/**
+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
@@ -9,4 +9,4 @@ var e={vD(e,t,n){let r,l;/**
  * @nolint
  * @preventMunge
  * @preserve-invariant-messages
- */var i,c,o=Object.create,a=Object.defineProperty,d=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,s=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of m(t))h.call(e,l)||l===n||a(e,l,{get:()=>t[l],enumerable:!(r=d(t,l))||r.enumerable});return e},f={},_={$dispatcherGuard:()=>I,$makeReadOnly:()=>C,$reset:()=>D,$structuralCheck:()=>k,c:()=>E,clearRenderCounterRegistry:()=>$,renderCounterRegistry:()=>A,useRenderCounter:()=>W};for(var y in _)a(f,y,{get:_[y],enumerable:!0});e.exports=u(a({},"__esModule",{value:!0}),f);var p=(l=null!=(r=n("C"))?o(s(r)):{},u(r&&r.__esModule?l:a(l,"default",{value:r,enumerable:!0}),r)),{useRef:S,useEffect:b,isValidElement:w}=p,g=null!=(i=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?i:p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(c=p.__COMPILER_RUNTIME)?void 0:c.c)?p.__COMPILER_RUNTIME.c:function(e){return p.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=v;return t[v]=!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 z=null;function R(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=z)return z.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function I(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(z=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.");R(N)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(z=null),R(e)}else if(2===e)x.push(t),R(z);else if(3===e){let e=x.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 D(e){for(let t=0;t<e.length;t++)e[t]=v}function C(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var A=new Map;function $(){for(let e of A.values())e.forEach(e=>{e.count=0})}function W(e){let t=S(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let n,r={count:0};null==(n=A.get(e))&&(n=new Set,A.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=A.get(e))&&r.delete(n))}})}var O=new Set;function k(e,t,n,r,l,i){function c(e,t,c,o){let a=`${r}:${i} [${l}] ${n}${c} changed from ${e} to ${t} at depth ${o}`;O.has(a)||(O.add(a),console.error(a))}!function e(t,n,r,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)c(`type ${typeof t}`,`type ${typeof n}`,r,l);else if("object"==typeof t){let i=Array.isArray(t),o=Array.isArray(n);if(null===t&&null!==n)c("null",`type ${typeof n}`,r,l);else if(null===n)c(`type ${typeof t}`,"null",r,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)c(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,l);else for(let[i,o]of t)n.has(i)?e(o,n.get(i),`${r}.get(${i})`,l+1):c(`Map instance with key ${i}`,`Map instance without key ${i}`,r,l);else c("Map instance","other value",r,l);else if(n instanceof Map)c("other value","Map instance",r,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)c(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,l);else for(let e of n)t.has(e)||c(`Set instance without element ${e}`,`Set instance with element ${e}`,r,l);else c("Set instance","other value",r,l);else if(n instanceof Set)c("other value","Set instance",r,l);else if(i||o)if(i!==o)c(`type ${i?"array":"object"}`,`type ${o?"array":"object"}`,r,l);else if(t.length!==n.length)c(`array with length ${t.length}`,`array with length ${n.length}`,r,l);else for(let i=0;i<t.length;i++)e(t[i],n[i],`${r}[${i}]`,l+1);else if(w(t)||w(n))w(t)!==w(n)?c(`type ${w(t)?"React element":"object"}`,`type ${w(n)?"React element":"object"}`,r,l):t.type!==n.type?c(`React element of type ${t.type}`,`React element of type ${n.type}`,r,l):e(t.props,n.props,`[props of ${r}]`,l+1);else{for(let e in n)e in t||c(`object without key ${e}`,`object with key ${e}`,r,l);for(let i in t)i in n?e(t[i],n[i],`${r}.${i}`,l+1):c(`object with key ${i}`,`object without key ${i}`,r,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&c(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,l):t!==n&&c(t,n,r,l)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,l=new WeakMap;function i(e,t,n){let i=t,c=n;if("object"==typeof i&&null!==i&&"$$typeof"in i&&i.$$typeof===Symbol.for("react.context")&&"Provider"in i&&(i=i.Provider),"function"==typeof i&&null!=c.ref&&!i.prototype?.isReactComponent){let t=i,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,l)),i=l}if("string"==typeof i&&"boolean"==typeof c.inert&&((c={...c}).inert?c.inert="":delete c.inert),"string"==typeof i)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in c&&(c={...c,[t]:c[e]},delete c[e]);return"string"==typeof i&&null!=c.ref&&(i=function(e,t){let n=l.get(e);n||(n=new Map,l.set(e,n));let r=n.get(t);if(r)return r;let i=e.forwardRef((n,r)=>{let l=e.useRef(null);if(!l.current||l.current.original!==r){let e;l.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:l.current.callback})});return i.displayName=`CanvasHost(${t})`,n.set(t,i),i}(e,i)),{type:i,props:c}}function c(e){let t=(t,n,r)=>{let l=i(e,t,n??{});return e.createElement(l.type,void 0===r?l.props:{...l.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let l=i(e,t,n??{}),{children:c,...o}=l.props;return e.createElement(l.type,void 0===r?o:{...o,key:r},...Array.isArray(c)?c:[c])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,n,...r)=>{let l=i(e,t,n??{});return e.createElement(l.type,l.props,...r)},cloneElement:(t,n,...r)=>{let l=e.cloneElement(t,n??void 0,...r),c=l.ref,o=i(e,l.type,{...l.props,ref:c});return o.type===l.type&&"string"!=typeof l.type?l:e.createElement(o.type,{...o.props,key:l.key})}}}n.d(t,{MA:()=>c,YJ:()=>o})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:l,Component:i,Fragment:c,Profiler:o,PureComponent:a,StrictMode:d,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:s,act:h,cloneElement:u,createContext:f,createElement:_,createFactory:y,createRef:p,forwardRef:S,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:E,useCallback:N,useContext:z,useDebugValue:R,useDeferredValue:x,useEffect:I,useId:D,useImperativeHandle:C,useInsertionEffect:A,useLayoutEffect:$,useMemo:W,useReducer:O,useRef:k,useState:P,useSyncExternalStore:M,useTransition:T,version:L,use:j}=r;n.d(t,{},{Children:l,Component:i,Fragment:c,Profiler:o,PureComponent:a,StrictMode:d,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:s,act:h,cloneElement:u,createContext:f,createElement:_,createFactory:y,createRef:p,default:r,forwardRef:S,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:E,use:j,useCallback:N,useContext:z,useDebugValue:R,useDeferredValue:x,useEffect:I,useId:D,useImperativeHandle:C,useInsertionEffect:A,useLayoutEffect:$,useMemo:W,useReducer:O,useRef:k,useState:P,useSyncExternalStore:M,useTransition:T,version:L})}},t={};function n(r){var l=t[r];if(void 0!==l)return l.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=(e,t,r)=>{var l=(t,r)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[r]:t[l]})};l(t,"get"),l(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:l}=(0,n("p").MA)(window.React);var i=n("vD"),c=n("C");let o=window.WallarmDS.Icons.Copy,a=window.WallarmDS.Icons.Filter,d=window.WallarmDS.Badge,m=window.WallarmDS.Code,s=window.WallarmDS.InlineCodeSnippet,h=window.WallarmDS.FormatDateTime,u=window.WallarmDS.InlineEditControl,f=window.WallarmDS.InlineEditError,_=window.WallarmDS.InlineEditInput,y=window.WallarmDS.InlineEditPreview,p=window.WallarmDS.InlineEdit,S=window.WallarmDS.Ip,b=window.WallarmDS.IpAddress,w=window.WallarmDS.IpCountry,g=window.WallarmDS.IpList,v=window.WallarmDS.IpProvider,E=window.WallarmDS.Link,N=window.WallarmDS.OverflowList,z=window.WallarmDS.Tag,R=window.WallarmDS.Text,x=window.WallarmDS.Attribute,I=window.WallarmDS.AttributeActions,D=window.WallarmDS.AttributeActionsContent,C=window.WallarmDS.AttributeActionsItem,A=window.WallarmDS.AttributeActionsTarget,$=window.WallarmDS.AttributeEmptyDescription,W=window.WallarmDS.AttributeLabel,O=window.WallarmDS.AttributeLabelDescription,k=window.WallarmDS.AttributeLabelInfo,P=window.WallarmDS.AttributeValue,M={title:"Data Display/Attribute",component:x,subcomponents:{AttributeLabel:W,AttributeLabelDescription:O,AttributeLabelInfo:k,AttributeValue:P,AttributeEmptyDescription:$,AttributeActions:I,AttributeActionsTarget:A,AttributeActionsContent:D,AttributeActionsItem:C,InlineEditPreview:y,InlineEditControl:u,InlineEditInput:_,InlineEditError:f},parameters:{layout:"centered",docs:{description:{component:"Pairs one field's label with its value on a detail page — reach for `Table` when the same fields repeat across many objects, and `Field` when the value is being collected rather than read. The value slot takes whichever display component fits the data and hosts `InlineEdit` when the field is editable in place, while `AttributeActions` hangs a per-value menu off it."}}}},T=()=>t(D,{children:[t(C,{onSelect:()=>{},children:[e(a,{}),"Investigate by this value"]}),t(C,{onSelect:()=>{},children:[e(o,{}),"Copy value"]})]}),L=n=>t(l,{children:[t(x,{orientation:"horizontal",children:[e(W,{children:"Source IP"}),e(P,{children:t(I,{"data-testid":"attr-source-ip",children:[e(A,{disableNestedInteractive:n,children:e(R,{size:"sm",children:"142.198.167.52"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Status"}),e(P,{children:t(I,{"data-testid":"attr-badge",children:[e(A,{disableNestedInteractive:n,children:e(d,{"data-testid":"attr-badge-value",color:"red",variant:"dotted",children:"Blocked"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"IPs"}),e(P,{children:t(I,{"data-testid":"attr-ip-overflow",children:[e(A,{disableNestedInteractive:n,children:t(g,{type:"horizontal",children:[t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]}),t(S,{children:[e(w,{code:"NL"}),e(b,{children:"10.0.0.1"})]}),t(S,{children:[e(w,{code:"JP"}),e(b,{children:"192.168.1.1"})]})]})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Payload"}),e(P,{children:t(I,{"data-testid":"attr-code-snippet",children:[e(A,{disableNestedInteractive:n,children:e(s,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Documentation"}),e(P,{children:t(I,{"data-testid":"attr-link",children:[e(A,{disableNestedInteractive:n,children:e(E,{href:"#",size:"md",children:"View full report"})}),T()]})})]}),t(x,{orientation:"horizontal",children:[e(W,{children:"Tags"}),e(P,{children:t(I,{"data-testid":"attr-tags",children:[e(A,{disableNestedInteractive:n,children:e(N,{className:"gap-4",items:["production","us-east-1","critical","tier-1","public","monitored"],itemRenderer:t=>e(z,{"data-testid":"attr-tag",children:t},t)})}),T()]})})]})]}),j=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-[400px] flex flex-col gap-8",children:L(!1)}),n[0]=t):t=n[0],t};j.storyName="Horizontal With Actions (default — copy on text, menu outside)";let U=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-[400px] flex flex-col gap-8",children:L(!0)}),n[0]=t):t=n[0],t};function F(n){let r,l,o,a,d,m,s,h=(0,i.c)(12),{orientation:S}=n,[b,w]=(0,c.useState)("Checkout API");return h[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:"Name"}),h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(l=e=>w(e),h[1]=l):l=h[1],h[2]!==b?(o=e(y,{children:b}),h[2]=b,h[3]=o):o=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(a=e(u,{children:e(_,{})}),d=e(f,{}),h[4]=a,h[5]=d):(a=h[4],d=h[5]),h[6]!==b||h[7]!==o?(m=e(P,{children:t(p,{value:b,onValueCommit:l,children:[o,a,d]})}),h[6]=b,h[7]=o,h[8]=m):m=h[8],h[9]!==S||h[10]!==m?(s=e("div",{className:"w-[420px]",children:t(x,{orientation:S,"data-testid":"attr",children:[r,m]})}),h[9]=S,h[10]=m,h[11]=s):s=h[11],s}function H(n){let r,l,o,a,d,m,s,h,S,b,w,g,v,E,N=(0,i.c)(25),{orientation:z}=n,[D,C]=(0,c.useState)("Checkout API"),$="horizontal"===z?"w-[420px] flex flex-col gap-8":"w-[420px] flex flex-col gap-16";return N[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:"Request ID"}),N[0]=r):r=N[0],N[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})}),N[1]=l):l=N[1],N[2]!==z?(o=t(x,{orientation:z,"data-testid":"attr-plain",children:[r,l]}),N[2]=z,N[3]=o):o=N[3],N[4]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{children:"Source IP"}),N[4]=a):a=N[4],N[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(P,{children:t(I,{children:[e(A,{children:e(R,{size:"sm",children:"142.198.167.52"})}),T()]})}),N[5]=d):d=N[5],N[6]!==z?(m=t(x,{orientation:z,"data-testid":"attr-actions",children:[a,d]}),N[6]=z,N[7]=m):m=N[7],N[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(W,{children:"Name"}),N[8]=s):s=N[8],N[9]===Symbol.for("react.memo_cache_sentinel")?(h=e=>C(e),N[9]=h):h=N[9],N[10]!==D?(S=e(y,{children:D}),N[10]=D,N[11]=S):S=N[11],N[12]===Symbol.for("react.memo_cache_sentinel")?(b=e(u,{children:e(_,{})}),w=e(f,{}),N[12]=b,N[13]=w):(b=N[12],w=N[13]),N[14]!==D||N[15]!==S?(g=e(P,{children:t(p,{value:D,onValueCommit:h,children:[S,b,w]})}),N[14]=D,N[15]=S,N[16]=g):g=N[16],N[17]!==z||N[18]!==g?(v=t(x,{orientation:z,"data-testid":"attr-inline-edit",children:[s,g]}),N[17]=z,N[18]=g,N[19]=v):v=N[19],N[20]!==$||N[21]!==v||N[22]!==o||N[23]!==m?(E=t("div",{className:$,children:[o,m,v]}),N[20]=$,N[21]=v,N[22]=o,N[23]=m,N[24]=E):E=N[24],E}U.storyName="Horizontal With Actions (disableNestedInteractive — menu only)";let V=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(H,{}),n[0]=t):t=n[0],t};V.storyName="Mixed (plain + Actions + InlineEdit)";let B=()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(H,{orientation:"horizontal"}),n[0]=t):t=n[0],t};function X(t){return e(z,{children:t},t)}function q(t){return e(z,{children:t},t)}function Z(t){return e(z,{children:t},t)}function G(t){return e(z,{children:t},t)}function J(t){return e(z,{children:t},t)}function Y(t){return e(z,{children:t},t)}B.storyName="Horizontal Mixed (plain + Actions + InlineEdit)";let Q=[{name:"Default",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Request ID"}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"WithDescription",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:["Created at",e(O,{children:"The time when the request was first received"})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"April 9, 2026, 14:32"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"WithInfo",story:()=>{let n,r,l,c,o=(0,i.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:["Request ID",e(k,{children:"Unique identifier assigned to each incoming request"})]}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})})]}),o[1]=r):r=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{children:[e(k,{children:"Unique identifier assigned to each incoming request"}),"Request ID"]}),o[2]=l):l=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(c=t("div",{className:"w-[400px] flex flex-col gap-16",children:[r,t(x,{children:[l,e(P,{children:e(R,{size:"sm",children:"abc-123-def-456"})})]})]}),o[3]=c):c=o[3],c},meta:M},{name:"WithLink",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:["Source",e(E,{href:"#",size:"md",children:"View docs"})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{children:[n,e(P,{children:e(R,{size:"sm",children:"API Gateway"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"Empty",story:()=>{let n,r,l,c,o,a=(0,i.c)(5);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{children:[t(W,{children:["Region",e(O,{children:"Manual composition"})]}),e(P,{})]}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:"Region"}),a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(x,{isEmpty:!0,children:[r,e(P,{children:e(R,{size:"sm",children:"This text is replaced by the em-dash placeholder"})})]}),a[2]=l):l=a[2],a[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{isEmpty:!0,children:[t(W,{children:["Owner",e($,{children:"Not yet assigned"})]}),e(P,{})]}),a[3]=c):c=a[3],a[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"w-[400px] flex flex-col gap-16",children:[n,l,c,t(x,{isEmpty:!0,children:[t(W,{children:["SSO provider",t($,{children:["Not connected —"," ",e(E,{href:"#",size:"md",children:"set up integration"})]})]}),e(P,{})]})]}),a[4]=o):o=a[4],o},meta:M},{name:"Loading",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{loading:!0,children:[e(W,{children:"Created at"}),e(P,{})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"w-[400px] flex flex-col gap-16",children:[n,t(x,{loading:!0,children:[e(W,{children:"Status"}),e(P,{})]})]}),l[1]=r):r=l[1],r},meta:M},{name:"Composition",story:()=>{let n,r,l,c,o,a,u,f,_,y,p,z,I,D,C,A,$,O,k,M,T,L,j,U,F,H,V=(0,i.c)(26);return V[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),V[0]=n):n=V[0],V[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{children:[n,e(P,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})})]}),V[1]=r):r=V[1],V[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{children:"First seen"}),V[2]=l):l=V[2],V[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{children:[l,e(P,{children:e(h,{value:"2026-04-03T10:15:00Z",format:"relative"})})]}),V[3]=c):c=V[3],V[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Attack type"}),V[4]=o):o=V[4],V[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{children:[o,e(P,{children:e(N,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:X})})]}),V[5]=a):a=V[5],V[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(W,{children:"Sessions"}),V[6]=u):u=V[6],V[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{children:[u,e(P,{children:e(R,{size:"sm",children:"3 sessions"})})]}),V[7]=f):f=V[7],V[8]===Symbol.for("react.memo_cache_sentinel")?(_=e(W,{children:"Users"}),V[8]=_):_=V[8],V[9]===Symbol.for("react.memo_cache_sentinel")?(y=t(x,{children:[_,e(P,{children:e(N,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:q})})]}),V[9]=y):y=V[9],V[10]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{children:"IPs"}),V[10]=p):p=V[10],V[11]===Symbol.for("react.memo_cache_sentinel")?(z=t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),V[11]=z):z=V[11],V[12]===Symbol.for("react.memo_cache_sentinel")?(I=t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),V[12]=I):I=V[12],V[13]===Symbol.for("react.memo_cache_sentinel")?(D=t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]}),V[13]=D):D=V[13],V[14]===Symbol.for("react.memo_cache_sentinel")?(C=t(S,{children:[e(w,{code:"NL"}),e(b,{children:"10.0.0.1"})]}),V[14]=C):C=V[14],V[15]===Symbol.for("react.memo_cache_sentinel")?(A=t(x,{children:[p,e(P,{children:t(g,{children:[z,I,D,C,t(S,{children:[e(w,{code:"JP"}),e(b,{children:"192.168.1.1"})]})]})})]}),V[15]=A):A=V[15],V[16]===Symbol.for("react.memo_cache_sentinel")?($=e(W,{children:"Source IP"}),V[16]=$):$=V[16],V[17]===Symbol.for("react.memo_cache_sentinel")?(O=t(x,{children:[$,e(P,{children:t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]})})]}),V[17]=O):O=V[17],V[18]===Symbol.for("react.memo_cache_sentinel")?(k=e(W,{children:"Created at"}),V[18]=k):k=V[18],V[19]===Symbol.for("react.memo_cache_sentinel")?(M=t(x,{children:[k,e(P,{children:e(h,{value:"2026-04-02T14:03:00Z",format:"datetime"})})]}),V[19]=M):M=V[19],V[20]===Symbol.for("react.memo_cache_sentinel")?(T=e(W,{children:"Documentation"}),V[20]=T):T=V[20],V[21]===Symbol.for("react.memo_cache_sentinel")?(L=t(x,{children:[T,e(P,{children:e(E,{href:"#",size:"md",children:"View full report"})})]}),V[21]=L):L=V[21],V[22]===Symbol.for("react.memo_cache_sentinel")?(j=e(W,{children:"Payload (inline)"}),V[22]=j):j=V[22],V[23]===Symbol.for("react.memo_cache_sentinel")?(U=t(x,{children:[j,e(P,{children:e(s,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})})]}),V[23]=U):U=V[23],V[24]===Symbol.for("react.memo_cache_sentinel")?(F=e(W,{children:"Payload (code)"}),V[24]=F):F=V[24],V[25]===Symbol.for("react.memo_cache_sentinel")?(H=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]",children:[r,c,a,f,y,A,O,M,L,U,t(x,{children:[F,e(P,{children:e(m,{size:"s",children:'{ "action": "login", "user_id": 42 }'})})]})]}),V[25]=H):H=V[25],H},meta:M},{name:"WithActions",story:()=>{let n,r,l,c,o,a,u,f,_,y,p,z,D,C,$,O,k,M,L,j,U,F,H,V,B,X,q=(0,i.c)(26);return q[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),q[0]=n):n=q[0],q[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{children:[n,e(P,{children:t(I,{"data-testid":"attribute-with-actions",children:[e(A,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})}),T()]})})]}),q[1]=r):r=q[1],q[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{children:"First seen"}),q[2]=l):l=q[2],q[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{children:[l,e(P,{children:t(I,{children:[e(A,{children:e(h,{value:"2026-04-03T10:15:00Z",format:"relative"})}),T()]})})]}),q[3]=c):c=q[3],q[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Attack type"}),q[4]=o):o=q[4],q[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{children:[o,e(P,{children:t(I,{children:[e(A,{children:e(N,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:Z})}),T()]})})]}),q[5]=a):a=q[5],q[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(W,{children:"Sessions"}),q[6]=u):u=q[6],q[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{children:[u,e(P,{children:t(I,{children:[e(A,{children:e(R,{size:"sm",children:"3 sessions"})}),T()]})})]}),q[7]=f):f=q[7],q[8]===Symbol.for("react.memo_cache_sentinel")?(_=e(W,{children:"Users"}),q[8]=_):_=q[8],q[9]===Symbol.for("react.memo_cache_sentinel")?(y=t(x,{children:[_,e(P,{children:t(I,{children:[e(A,{children:e(N,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:G})}),T()]})})]}),q[9]=y):y=q[9],q[10]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{children:"IPs"}),q[10]=p):p=q[10],q[11]===Symbol.for("react.memo_cache_sentinel")?(z=t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),q[11]=z):z=q[11],q[12]===Symbol.for("react.memo_cache_sentinel")?(D=t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),q[12]=D):D=q[12],q[13]===Symbol.for("react.memo_cache_sentinel")?(C=t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]}),q[13]=C):C=q[13],q[14]===Symbol.for("react.memo_cache_sentinel")?($=t(S,{children:[e(w,{code:"NL"}),e(b,{children:"10.0.0.1"})]}),q[14]=$):$=q[14],q[15]===Symbol.for("react.memo_cache_sentinel")?(O=t(x,{children:[p,e(P,{children:t(I,{children:[e(A,{children:t(g,{children:[z,D,C,$,t(S,{children:[e(w,{code:"JP"}),e(b,{children:"192.168.1.1"})]})]})}),T()]})})]}),q[15]=O):O=q[15],q[16]===Symbol.for("react.memo_cache_sentinel")?(k=e(W,{children:"Source IP"}),q[16]=k):k=q[16],q[17]===Symbol.for("react.memo_cache_sentinel")?(M=t(x,{children:[k,e(P,{children:t(I,{children:[e(A,{children:t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]})}),T()]})})]}),q[17]=M):M=q[17],q[18]===Symbol.for("react.memo_cache_sentinel")?(L=e(W,{children:"Created at"}),q[18]=L):L=q[18],q[19]===Symbol.for("react.memo_cache_sentinel")?(j=t(x,{children:[L,e(P,{children:t(I,{children:[e(A,{children:e(h,{value:"2026-04-02T14:03:00Z",format:"datetime"})}),T()]})})]}),q[19]=j):j=q[19],q[20]===Symbol.for("react.memo_cache_sentinel")?(U=e(W,{children:"Documentation"}),q[20]=U):U=q[20],q[21]===Symbol.for("react.memo_cache_sentinel")?(F=t(x,{children:[U,e(P,{children:t(I,{children:[e(A,{children:e(E,{href:"#",size:"md",children:"View full report"})}),T()]})})]}),q[21]=F):F=q[21],q[22]===Symbol.for("react.memo_cache_sentinel")?(H=e(W,{children:"Payload (inline)"}),q[22]=H):H=q[22],q[23]===Symbol.for("react.memo_cache_sentinel")?(V=t(x,{children:[H,e(P,{children:t(I,{children:[e(A,{children:e(s,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})}),T()]})})]}),q[23]=V):V=q[23],q[24]===Symbol.for("react.memo_cache_sentinel")?(B=e(W,{children:"Payload (code)"}),q[24]=B):B=q[24],q[25]===Symbol.for("react.memo_cache_sentinel")?(X=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]",children:[r,c,a,f,y,O,M,j,F,V,t(x,{children:[B,e(P,{children:t(I,{children:[e(A,{children:e(m,{size:"s",children:'{ "action": "login", "user_id": 42 }'})}),T()]})})]})]}),q[25]=X):X=q[25],X},meta:M},{name:"Horizontal",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-[400px]",children:t(x,{orientation:"horizontal",children:[n,e(P,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})})]})}),l[1]=r):r=l[1],r},meta:M},{name:"HorizontalTruncation",story:()=>{let n,r,l,c,o,a,d=(0,i.c)(6);return d[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{width:256,children:"Short"}),d[0]=n):n=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{orientation:"horizontal",children:[n,e(P,{children:e(R,{size:"sm",children:"Fits in 256px label cell"})})]}),d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{width:256,children:"This label text is much longer than 256 pixels and must be truncated"}),d[2]=l):l=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{orientation:"horizontal",children:[l,e(P,{children:e(R,{size:"sm",children:"Value"})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Users"}),d[4]=o):o=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(a=t("div",{className:"w-[500px] flex flex-col gap-8",children:[r,c,t(x,{orientation:"horizontal",children:[o,e(P,{children:e(R,{size:"sm",truncate:!0,children:"artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com"})})]})]}),d[5]=a):a=d[5],a},meta:M},{name:"HorizontalComposition",story:()=>{let n,r,l,c,o,a,m,s,u,f,_,y,p,E,z,I,D=(0,i.c)(16);return D[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(W,{children:"Status"}),D[0]=n):n=D[0],D[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(x,{orientation:"horizontal",children:[n,e(P,{children:e(d,{color:"red",variant:"dotted",children:"Blocked"})})]}),D[1]=r):r=D[1],D[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(W,{children:"First seen"}),D[2]=l):l=D[2],D[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{orientation:"horizontal",children:[l,e(P,{children:e(h,{value:"2026-04-03T10:15:00Z",format:"relative"})})]}),D[3]=c):c=D[3],D[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(W,{children:"Attack type"}),D[4]=o):o=D[4],D[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(x,{orientation:"horizontal",children:[o,e(P,{children:e(N,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:J})})]}),D[5]=a):a=D[5],D[6]===Symbol.for("react.memo_cache_sentinel")?(m=e(W,{children:"Last seen"}),D[6]=m):m=D[6],D[7]===Symbol.for("react.memo_cache_sentinel")?(s=t(x,{orientation:"horizontal",children:[m,e(P,{children:e(h,{value:"2025-04-02T14:03:00Z",format:"date"})})]}),D[7]=s):s=D[7],D[8]===Symbol.for("react.memo_cache_sentinel")?(u=e(W,{children:"Sessions"}),D[8]=u):u=D[8],D[9]===Symbol.for("react.memo_cache_sentinel")?(f=t(x,{orientation:"horizontal",children:[u,e(P,{children:e(R,{size:"sm",children:"3 sessions"})})]}),D[9]=f):f=D[9],D[10]===Symbol.for("react.memo_cache_sentinel")?(_=e(W,{children:"Users"}),D[10]=_):_=D[10],D[11]===Symbol.for("react.memo_cache_sentinel")?(y=t(x,{orientation:"horizontal",children:[_,e(P,{children:e(N,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:Y})})]}),D[11]=y):y=D[11],D[12]===Symbol.for("react.memo_cache_sentinel")?(p=e(W,{children:"IPs"}),D[12]=p):p=D[12],D[13]===Symbol.for("react.memo_cache_sentinel")?(E=t(S,{children:[e(w,{code:"US"}),e(b,{children:"142.198.167.52"}),e(v,{children:"Azure"})]}),D[13]=E):E=D[13],D[14]===Symbol.for("react.memo_cache_sentinel")?(z=t(S,{children:[e(w,{code:"US"}),e(b,{children:"34.74.73.20"}),e(v,{children:"AWS"})]}),D[14]=z):z=D[14],D[15]===Symbol.for("react.memo_cache_sentinel")?(I=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]",children:[r,c,a,s,f,y,e("div",{className:"col-span-2",children:t(x,{orientation:"horizontal",children:[p,e(P,{children:t(g,{type:"horizontal",children:[E,z,t(S,{children:[e(w,{code:"DE"}),e(b,{children:"34.74.73.20"}),e(v,{children:"GCP"})]})]})})]})})]}),D[15]=I):I=D[15],I},meta:M},{name:"HorizontalLoading",story:()=>{let n,r,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{orientation:"horizontal",loading:!0,children:[e(W,{children:"Created at"}),e(P,{})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"w-[400px] flex flex-col gap-8",children:[n,t(x,{orientation:"horizontal",loading:!0,children:[e(W,{children:"Status"}),e(P,{})]})]}),l[1]=r):r=l[1],r},meta:M},{name:"HorizontalEmpty",story:()=>{let n,r,l,c,o,a=(0,i.c)(5);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(x,{orientation:"horizontal",children:[t(W,{width:160,children:["Region",e(O,{children:"Manual composition"})]}),e(P,{})]}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{width:160,children:"Region"}),a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(x,{orientation:"horizontal",isEmpty:!0,children:[r,e(P,{children:e(R,{size:"sm",children:"This text is replaced by the em-dash placeholder"})})]}),a[2]=l):l=a[2],a[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(x,{orientation:"horizontal",isEmpty:!0,children:[t(W,{width:160,children:["Owner",e($,{children:"Not yet assigned"})]}),e(P,{})]}),a[3]=c):c=a[3],a[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"w-[400px] flex flex-col gap-8",children:[n,l,c,t(x,{orientation:"horizontal",isEmpty:!0,children:[t(W,{width:160,children:["SSO provider",t($,{children:["Not connected —"," ",e(E,{href:"#",size:"md",children:"set up integration"})]})]}),e(P,{})]})]}),a[4]=o):o=a[4],o},meta:M},{name:"HorizontalWithActions",story:j,meta:M},{name:"HorizontalWithActionsMenuOnly",story:U,meta:M},{name:"WithInlineEdit",story:()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(F,{}),n[0]=t):t=n[0],t},meta:M},{name:"HorizontalWithInlineEdit",story:()=>{let t,n=(0,i.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(F,{orientation:"horizontal"}),n[0]=t):t=n[0],t},meta:M},{name:"Mixed",story:V,meta:M},{name:"HorizontalMixed",story:B,meta:M}];function K({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,i=()=>c.default.createElement(l,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=i;i=()=>e(t,o)}return c.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},c.default.createElement("h2",{className:"text-sm mb-12"},e.name),c.default.createElement(i))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(c.default.createElement(window.WallarmDS.Root,null,Q.map((e,t)=>c.default.createElement(K,{key:t,entry:e})))),t}}})();
+ */var i,c,o=Object.create,a=Object.defineProperty,d=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,s=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of m(t))h.call(e,l)||l===r||a(e,l,{get:()=>t[l],enumerable:!(n=d(t,l))||n.enumerable});return e},u={},y={$dispatcherGuard:()=>D,$makeReadOnly:()=>A,$reset:()=>I,$structuralCheck:()=>O,c:()=>z,clearRenderCounterRegistry:()=>W,renderCounterRegistry:()=>C,useRenderCounter:()=>$};for(var _ in y)a(u,_,{get:y[_],enumerable:!0});e.exports=f(a({},"__esModule",{value:!0}),u);var p=(l=null!=(n=r("C"))?o(s(n)):{},f(n&&n.__esModule?l:a(l,"default",{value:n,enumerable:!0}),n)),{useRef:S,useEffect:b,isValidElement:w}=p,g=null!=(i=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?i:p.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),z="function"==typeof(null==(c=p.__COMPILER_RUNTIME)?void 0:c.c)?p.__COMPILER_RUNTIME.c:function(e){return p.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!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 E=null;function R(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function D(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(E=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.");R(N)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(E=null),R(e)}else if(2===e)x.push(t),R(E);else if(3===e){let e=x.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 I(e){for(let t=0;t<e.length;t++)e[t]=v}function A(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var C=new Map;function W(){for(let e of C.values())e.forEach(e=>{e.count=0})}function $(e){let t=S(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=C.get(e))&&(r=new Set,C.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=C.get(e))&&n.delete(r))}})}var k=new Set;function O(e,t,r,n,l,i){function c(e,t,c,o){let a=`${n}:${i} [${l}] ${r}${c} changed from ${e} to ${t} at depth ${o}`;k.has(a)||(k.add(a),console.error(a))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)c(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let i=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)c("null",`type ${typeof r}`,n,l);else if(null===r)c(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)c(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[i,o]of t)r.has(i)?e(o,r.get(i),`${n}.get(${i})`,l+1):c(`Map instance with key ${i}`,`Map instance without key ${i}`,n,l);else c("Map instance","other value",n,l);else if(r instanceof Map)c("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)c(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||c(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else c("Set instance","other value",n,l);else if(r instanceof Set)c("other value","Set instance",n,l);else if(i||o)if(i!==o)c(`type ${i?"array":"object"}`,`type ${o?"array":"object"}`,n,l);else if(t.length!==r.length)c(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let i=0;i<t.length;i++)e(t[i],r[i],`${n}[${i}]`,l+1);else if(w(t)||w(r))w(t)!==w(r)?c(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,l):t.type!==r.type?c(`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||c(`object without key ${e}`,`object with key ${e}`,n,l);for(let i in t)i in r?e(t[i],r[i],`${n}.${i}`,l+1):c(`object with key ${i}`,`object without key ${i}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&c(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&c(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function i(e,t,r){let i=t,c=r;if("object"==typeof i&&null!==i&&"$$typeof"in i&&i.$$typeof===Symbol.for("react.context")&&"Provider"in i&&(i=i.Provider),"function"==typeof i&&null!=c.ref&&!i.prototype?.isReactComponent){let t=i,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)),i=l}if("string"==typeof i&&"boolean"==typeof c.inert&&((c={...c}).inert?c.inert="":delete c.inert),"string"==typeof i)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in c&&(c={...c,[t]:c[e]},delete c[e]);return"string"==typeof i&&null!=c.ref&&(i=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 i=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 i.displayName=`CanvasHost(${t})`,r.set(t,i),i}(e,i)),{type:i,props:c}}function c(e){let t=(t,r,n)=>{let l=i(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=i(e,t,r??{}),{children:c,...o}=l.props;return e.createElement(l.type,void 0===n?o:{...o,key:n},...Array.isArray(c)?c:[c])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let l=i(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),c=l.ref,o=i(e,l.type,{...l.props,ref:c});return o.type===l.type&&"string"!=typeof l.type?l:e.createElement(o.type,{...o.props,key:l.key})}}}r.d(t,{MA:()=>c,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:i,Fragment:c,Profiler:o,PureComponent:a,StrictMode:d,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:s,act:h,cloneElement:f,createContext:u,createElement:y,createFactory:_,createRef:p,forwardRef:S,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:z,useCallback:N,useContext:E,useDebugValue:R,useDeferredValue:x,useEffect:D,useId:I,useImperativeHandle:A,useInsertionEffect:C,useLayoutEffect:W,useMemo:$,useReducer:k,useRef:O,useState:P,useSyncExternalStore:M,useTransition:T,version:L,use:j}=n;r.d(t,{},{Children:l,Component:i,Fragment:c,Profiler:o,PureComponent:a,StrictMode:d,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:s,act:h,cloneElement:f,createContext:u,createElement:y,createFactory:_,createRef:p,default:n,forwardRef:S,isValidElement:b,lazy:w,memo:g,startTransition:v,unstable_act:z,use:j,useCallback:N,useContext:E,useDebugValue:R,useDeferredValue:x,useEffect:D,useId:I,useImperativeHandle:A,useInsertionEffect:C,useLayoutEffect:W,useMemo:$,useReducer:k,useRef:O,useState:P,useSyncExternalStore:M,useTransition:T,version:L})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.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 i=r("vD"),c=r("C");let o=window.WallarmDS.Icons.Copy,a=window.WallarmDS.Icons.Filter,d=window.WallarmDS.AgentItem,m=window.WallarmDS.Avatar,s=window.WallarmDS.AvatarContent,h=window.WallarmDS.AvatarFallback,f=window.WallarmDS.AvatarName,u=window.WallarmDS.Badge,y=window.WallarmDS.Code,_=window.WallarmDS.InlineCodeSnippet,p=window.WallarmDS.FormatDateTime,S=window.WallarmDS.InlineEditControl,b=window.WallarmDS.InlineEditError,w=window.WallarmDS.InlineEditInput,g=window.WallarmDS.InlineEditPreview,v=window.WallarmDS.InlineEdit,z=window.WallarmDS.Ip,N=window.WallarmDS.IpAddress,E=window.WallarmDS.IpCountry,R=window.WallarmDS.IpList,x=window.WallarmDS.IpProvider,D=window.WallarmDS.Link,I=window.WallarmDS.OverflowList,A=window.WallarmDS.Tag,C=window.WallarmDS.Text,W=window.WallarmDS.Attribute,$=window.WallarmDS.AttributeActions,k=window.WallarmDS.AttributeActionsContent,O=window.WallarmDS.AttributeActionsItem,P=window.WallarmDS.AttributeActionsTarget,M=window.WallarmDS.AttributeEmptyDescription,T=window.WallarmDS.AttributeLabel,L=window.WallarmDS.AttributeLabelDescription,j=window.WallarmDS.AttributeLabelInfo,U=window.WallarmDS.AttributeValue,F={title:"Data Display/Attribute",component:W,subcomponents:{AttributeLabel:T,AttributeLabelDescription:L,AttributeLabelInfo:j,AttributeValue:U,AttributeEmptyDescription:M,AttributeActions:$,AttributeActionsTarget:P,AttributeActionsContent:k,AttributeActionsItem:O,InlineEditPreview:g,InlineEditControl:S,InlineEditInput:w,InlineEditError:b},parameters:{layout:"centered",docs:{description:{component:"Pairs one field's label with its value on a detail page — reach for `Table` when the same fields repeat across many objects, and `Field` when the value is being collected rather than read. The value slot takes whichever display component fits the data and hosts `InlineEdit` when the field is editable in place, while `AttributeActions` hangs a per-value menu off it."}}}},H=()=>t(k,{children:[t(O,{onSelect:()=>{},children:[e(a,{}),"Investigate by this value"]}),t(O,{onSelect:()=>{},children:[e(o,{}),"Copy value"]})]}),V=r=>t(l,{children:[t(W,{orientation:"horizontal",children:[e(T,{children:"Source IP"}),e(U,{children:t($,{"data-testid":"attr-source-ip",children:[e(P,{disableNestedInteractive:r,children:e(C,{size:"sm",children:"142.198.167.52"})}),H()]})})]}),t(W,{orientation:"horizontal",children:[e(T,{children:"Status"}),e(U,{children:t($,{"data-testid":"attr-badge",children:[e(P,{disableNestedInteractive:r,children:e(u,{"data-testid":"attr-badge-value",color:"red",variant:"dotted",children:"Blocked"})}),H()]})})]}),t(W,{orientation:"horizontal",children:[e(T,{children:"IPs"}),e(U,{children:t($,{"data-testid":"attr-ip-overflow",children:[e(P,{disableNestedInteractive:r,children:t(R,{type:"horizontal",children:[t(z,{children:[e(E,{code:"US"}),e(N,{children:"142.198.167.52"}),e(x,{children:"Azure"})]}),t(z,{children:[e(E,{code:"US"}),e(N,{children:"34.74.73.20"}),e(x,{children:"AWS"})]}),t(z,{children:[e(E,{code:"DE"}),e(N,{children:"34.74.73.20"}),e(x,{children:"GCP"})]}),t(z,{children:[e(E,{code:"NL"}),e(N,{children:"10.0.0.1"})]}),t(z,{children:[e(E,{code:"JP"}),e(N,{children:"192.168.1.1"})]})]})}),H()]})})]}),t(W,{orientation:"horizontal",children:[e(T,{children:"Payload"}),e(U,{children:t($,{"data-testid":"attr-code-snippet",children:[e(P,{disableNestedInteractive:r,children:e(_,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})}),H()]})})]}),t(W,{orientation:"horizontal",children:[e(T,{children:"Documentation"}),e(U,{children:t($,{"data-testid":"attr-link",children:[e(P,{disableNestedInteractive:r,children:e(D,{href:"#",size:"md",children:"View full report"})}),H()]})})]}),t(W,{orientation:"horizontal",children:[e(T,{children:"Tags"}),e(U,{children:t($,{"data-testid":"attr-tags",children:[e(P,{disableNestedInteractive:r,children:e(I,{className:"gap-4",items:["production","us-east-1","critical","tier-1","public","monitored"],itemRenderer:t=>e(A,{"data-testid":"attr-tag",children:t},t)})}),H()]})})]})]}),q=()=>{let t,r=(0,i.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-[400px] flex flex-col gap-8",children:V(!1)}),r[0]=t):t=r[0],t};q.storyName="Horizontal With Actions (default — copy on text, menu outside)";let B=()=>{let t,r=(0,i.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-[400px] flex flex-col gap-8",children:V(!0)}),r[0]=t):t=r[0],t};function X(r){let n,l,o,a,d,m,s,h=(0,i.c)(12),{orientation:f}=r,[u,y]=(0,c.useState)("Checkout API");return h[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{children:"Name"}),h[0]=n):n=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(l=e=>y(e),h[1]=l):l=h[1],h[2]!==u?(o=e(g,{children:u}),h[2]=u,h[3]=o):o=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(a=e(S,{children:e(w,{})}),d=e(b,{}),h[4]=a,h[5]=d):(a=h[4],d=h[5]),h[6]!==u||h[7]!==o?(m=e(U,{children:t(v,{value:u,onValueCommit:l,children:[o,a,d]})}),h[6]=u,h[7]=o,h[8]=m):m=h[8],h[9]!==f||h[10]!==m?(s=e("div",{className:"w-[420px]",children:t(W,{orientation:f,"data-testid":"attr",children:[n,m]})}),h[9]=f,h[10]=m,h[11]=s):s=h[11],s}function Z(r){let n,l,o,a,d,m,s,h,f,u,y,_,p,z,N=(0,i.c)(25),{orientation:E}=r,[R,x]=(0,c.useState)("Checkout API"),D="horizontal"===E?"w-[420px] flex flex-col gap-8":"w-[420px] flex flex-col gap-16";return N[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{children:"Request ID"}),N[0]=n):n=N[0],N[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(U,{children:e(C,{size:"sm",children:"abc-123-def-456"})}),N[1]=l):l=N[1],N[2]!==E?(o=t(W,{orientation:E,"data-testid":"attr-plain",children:[n,l]}),N[2]=E,N[3]=o):o=N[3],N[4]===Symbol.for("react.memo_cache_sentinel")?(a=e(T,{children:"Source IP"}),N[4]=a):a=N[4],N[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(U,{children:t($,{children:[e(P,{children:e(C,{size:"sm",children:"142.198.167.52"})}),H()]})}),N[5]=d):d=N[5],N[6]!==E?(m=t(W,{orientation:E,"data-testid":"attr-actions",children:[a,d]}),N[6]=E,N[7]=m):m=N[7],N[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(T,{children:"Name"}),N[8]=s):s=N[8],N[9]===Symbol.for("react.memo_cache_sentinel")?(h=e=>x(e),N[9]=h):h=N[9],N[10]!==R?(f=e(g,{children:R}),N[10]=R,N[11]=f):f=N[11],N[12]===Symbol.for("react.memo_cache_sentinel")?(u=e(S,{children:e(w,{})}),y=e(b,{}),N[12]=u,N[13]=y):(u=N[12],y=N[13]),N[14]!==R||N[15]!==f?(_=e(U,{children:t(v,{value:R,onValueCommit:h,children:[f,u,y]})}),N[14]=R,N[15]=f,N[16]=_):_=N[16],N[17]!==E||N[18]!==_?(p=t(W,{orientation:E,"data-testid":"attr-inline-edit",children:[s,_]}),N[17]=E,N[18]=_,N[19]=p):p=N[19],N[20]!==D||N[21]!==p||N[22]!==o||N[23]!==m?(z=t("div",{className:D,children:[o,m,p]}),N[20]=D,N[21]=p,N[22]=o,N[23]=m,N[24]=z):z=N[24],z}B.storyName="Horizontal With Actions (disableNestedInteractive — menu only)";let G=()=>{let t,r=(0,i.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(Z,{}),r[0]=t):t=r[0],t};G.storyName="Mixed (plain + Actions + InlineEdit)";let J=()=>{let t,r=(0,i.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(Z,{orientation:"horizontal"}),r[0]=t):t=r[0],t};function Y(t){return e(A,{children:t},t)}function Q(t){return e(A,{children:t},t)}function K(t){return e(A,{children:t},t)}function ee(t){return e(A,{children:t},t)}function et(t){return e(A,{children:t},t)}function er(t){return e(A,{children:t},t)}J.storyName="Horizontal Mixed (plain + Actions + InlineEdit)";let en=[{name:"Default",story:()=>{let r,n,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{children:"Request ID"}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-[400px]",children:t(W,{children:[r,e(U,{children:e(C,{size:"sm",children:"abc-123-def-456"})})]})}),l[1]=n):n=l[1],n},meta:F},{name:"WithDescription",story:()=>{let r,n,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(T,{children:["Created at",e(L,{children:"The time when the request was first received"})]}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-[400px]",children:t(W,{children:[r,e(U,{children:e(C,{size:"sm",children:"April 9, 2026, 14:32"})})]})}),l[1]=n):n=l[1],n},meta:F},{name:"WithInfo",story:()=>{let r,n,l,c,o=(0,i.c)(4);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(T,{children:["Request ID",e(j,{children:"Unique identifier assigned to each incoming request"})]}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:[r,e(U,{children:e(C,{size:"sm",children:"abc-123-def-456"})})]}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(T,{children:[e(j,{children:"Unique identifier assigned to each incoming request"}),"Request ID"]}),o[2]=l):l=o[2],o[3]===Symbol.for("react.memo_cache_sentinel")?(c=t("div",{className:"w-[400px] flex flex-col gap-16",children:[n,t(W,{children:[l,e(U,{children:e(C,{size:"sm",children:"abc-123-def-456"})})]})]}),o[3]=c):c=o[3],c},meta:F},{name:"WithLink",story:()=>{let r,n,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(T,{children:["Source",e(D,{href:"#",size:"md",children:"View docs"})]}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-[400px]",children:t(W,{children:[r,e(U,{children:e(C,{size:"sm",children:"API Gateway"})})]})}),l[1]=n):n=l[1],n},meta:F},{name:"Empty",story:()=>{let r,n,l,c,o,a=(0,i.c)(5);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(W,{children:[t(T,{children:["Region",e(L,{children:"Manual composition"})]}),e(U,{})]}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{children:"Region"}),a[1]=n):n=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{isEmpty:!0,children:[n,e(U,{children:e(C,{size:"sm",children:"This text is replaced by the em-dash placeholder"})})]}),a[2]=l):l=a[2],a[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{isEmpty:!0,children:[t(T,{children:["Owner",e(M,{children:"Not yet assigned"})]}),e(U,{})]}),a[3]=c):c=a[3],a[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"w-[400px] flex flex-col gap-16",children:[r,l,c,t(W,{isEmpty:!0,children:[t(T,{children:["SSO provider",t(M,{children:["Not connected —"," ",e(D,{href:"#",size:"md",children:"set up integration"})]})]}),e(U,{})]})]}),a[4]=o):o=a[4],o},meta:F},{name:"Loading",story:()=>{let r,n,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(W,{loading:!0,children:[e(T,{children:"Created at"}),e(U,{})]}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"w-[400px] flex flex-col gap-16",children:[r,t(W,{loading:!0,children:[e(T,{children:"Status"}),e(U,{})]})]}),l[1]=n):n=l[1],n},meta:F},{name:"Composition",story:()=>{let r,n,l,c,o,a,d,m,s,h,f,S,b,w,g,v,A,$,k,O,P,M,L,j,F,H,V=(0,i.c)(26);return V[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{children:"Status"}),V[0]=r):r=V[0],V[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:[r,e(U,{children:e(u,{color:"red",variant:"dotted",children:"Blocked"})})]}),V[1]=n):n=V[1],V[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{children:"First seen"}),V[2]=l):l=V[2],V[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{children:[l,e(U,{children:e(p,{value:"2026-04-03T10:15:00Z",format:"relative"})})]}),V[3]=c):c=V[3],V[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(T,{children:"Attack type"}),V[4]=o):o=V[4],V[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(W,{children:[o,e(U,{children:e(I,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:Y})})]}),V[5]=a):a=V[5],V[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(T,{children:"Sessions"}),V[6]=d):d=V[6],V[7]===Symbol.for("react.memo_cache_sentinel")?(m=t(W,{children:[d,e(U,{children:e(C,{size:"sm",children:"3 sessions"})})]}),V[7]=m):m=V[7],V[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(T,{children:"Users"}),V[8]=s):s=V[8],V[9]===Symbol.for("react.memo_cache_sentinel")?(h=t(W,{children:[s,e(U,{children:e(I,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:Q})})]}),V[9]=h):h=V[9],V[10]===Symbol.for("react.memo_cache_sentinel")?(f=e(T,{children:"IPs"}),V[10]=f):f=V[10],V[11]===Symbol.for("react.memo_cache_sentinel")?(S=t(z,{children:[e(E,{code:"US"}),e(N,{children:"142.198.167.52"}),e(x,{children:"Azure"})]}),V[11]=S):S=V[11],V[12]===Symbol.for("react.memo_cache_sentinel")?(b=t(z,{children:[e(E,{code:"US"}),e(N,{children:"34.74.73.20"}),e(x,{children:"AWS"})]}),V[12]=b):b=V[12],V[13]===Symbol.for("react.memo_cache_sentinel")?(w=t(z,{children:[e(E,{code:"DE"}),e(N,{children:"34.74.73.20"}),e(x,{children:"GCP"})]}),V[13]=w):w=V[13],V[14]===Symbol.for("react.memo_cache_sentinel")?(g=t(z,{children:[e(E,{code:"NL"}),e(N,{children:"10.0.0.1"})]}),V[14]=g):g=V[14],V[15]===Symbol.for("react.memo_cache_sentinel")?(v=t(W,{children:[f,e(U,{children:t(R,{children:[S,b,w,g,t(z,{children:[e(E,{code:"JP"}),e(N,{children:"192.168.1.1"})]})]})})]}),V[15]=v):v=V[15],V[16]===Symbol.for("react.memo_cache_sentinel")?(A=e(T,{children:"Source IP"}),V[16]=A):A=V[16],V[17]===Symbol.for("react.memo_cache_sentinel")?($=t(W,{children:[A,e(U,{children:t(z,{children:[e(E,{code:"US"}),e(N,{children:"142.198.167.52"}),e(x,{children:"Azure"})]})})]}),V[17]=$):$=V[17],V[18]===Symbol.for("react.memo_cache_sentinel")?(k=e(T,{children:"Created at"}),V[18]=k):k=V[18],V[19]===Symbol.for("react.memo_cache_sentinel")?(O=t(W,{children:[k,e(U,{children:e(p,{value:"2026-04-02T14:03:00Z",format:"datetime"})})]}),V[19]=O):O=V[19],V[20]===Symbol.for("react.memo_cache_sentinel")?(P=e(T,{children:"Documentation"}),V[20]=P):P=V[20],V[21]===Symbol.for("react.memo_cache_sentinel")?(M=t(W,{children:[P,e(U,{children:e(D,{href:"#",size:"md",children:"View full report"})})]}),V[21]=M):M=V[21],V[22]===Symbol.for("react.memo_cache_sentinel")?(L=e(T,{children:"Payload (inline)"}),V[22]=L):L=V[22],V[23]===Symbol.for("react.memo_cache_sentinel")?(j=t(W,{children:[L,e(U,{children:e(_,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})})]}),V[23]=j):j=V[23],V[24]===Symbol.for("react.memo_cache_sentinel")?(F=e(T,{children:"Payload (code)"}),V[24]=F):F=V[24],V[25]===Symbol.for("react.memo_cache_sentinel")?(H=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]",children:[n,c,a,m,h,v,$,O,M,j,t(W,{children:[F,e(U,{children:e(y,{size:"s",children:'{ "action": "login", "user_id": 42 }'})})]})]}),V[25]=H):H=V[25],H},meta:F},{name:"WithActions",story:()=>{let r,n,l,c,o,a,d,m,s,h,f,S,b,w,g,v,A,k,O,M,L,j,F,V,q,B,X=(0,i.c)(26);return X[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{children:"Status"}),X[0]=r):r=X[0],X[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{children:[r,e(U,{children:t($,{"data-testid":"attribute-with-actions",children:[e(P,{children:e(u,{color:"red",variant:"dotted",children:"Blocked"})}),H()]})})]}),X[1]=n):n=X[1],X[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{children:"First seen"}),X[2]=l):l=X[2],X[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{children:[l,e(U,{children:t($,{children:[e(P,{children:e(p,{value:"2026-04-03T10:15:00Z",format:"relative"})}),H()]})})]}),X[3]=c):c=X[3],X[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(T,{children:"Attack type"}),X[4]=o):o=X[4],X[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(W,{children:[o,e(U,{children:t($,{children:[e(P,{children:e(I,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:K})}),H()]})})]}),X[5]=a):a=X[5],X[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(T,{children:"Sessions"}),X[6]=d):d=X[6],X[7]===Symbol.for("react.memo_cache_sentinel")?(m=t(W,{children:[d,e(U,{children:t($,{children:[e(P,{children:e(C,{size:"sm",children:"3 sessions"})}),H()]})})]}),X[7]=m):m=X[7],X[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(T,{children:"Users"}),X[8]=s):s=X[8],X[9]===Symbol.for("react.memo_cache_sentinel")?(h=t(W,{children:[s,e(U,{children:t($,{children:[e(P,{children:e(I,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:ee})}),H()]})})]}),X[9]=h):h=X[9],X[10]===Symbol.for("react.memo_cache_sentinel")?(f=e(T,{children:"IPs"}),X[10]=f):f=X[10],X[11]===Symbol.for("react.memo_cache_sentinel")?(S=t(z,{children:[e(E,{code:"US"}),e(N,{children:"142.198.167.52"}),e(x,{children:"Azure"})]}),X[11]=S):S=X[11],X[12]===Symbol.for("react.memo_cache_sentinel")?(b=t(z,{children:[e(E,{code:"US"}),e(N,{children:"34.74.73.20"}),e(x,{children:"AWS"})]}),X[12]=b):b=X[12],X[13]===Symbol.for("react.memo_cache_sentinel")?(w=t(z,{children:[e(E,{code:"DE"}),e(N,{children:"34.74.73.20"}),e(x,{children:"GCP"})]}),X[13]=w):w=X[13],X[14]===Symbol.for("react.memo_cache_sentinel")?(g=t(z,{children:[e(E,{code:"NL"}),e(N,{children:"10.0.0.1"})]}),X[14]=g):g=X[14],X[15]===Symbol.for("react.memo_cache_sentinel")?(v=t(W,{children:[f,e(U,{children:t($,{children:[e(P,{children:t(R,{children:[S,b,w,g,t(z,{children:[e(E,{code:"JP"}),e(N,{children:"192.168.1.1"})]})]})}),H()]})})]}),X[15]=v):v=X[15],X[16]===Symbol.for("react.memo_cache_sentinel")?(A=e(T,{children:"Source IP"}),X[16]=A):A=X[16],X[17]===Symbol.for("react.memo_cache_sentinel")?(k=t(W,{children:[A,e(U,{children:t($,{children:[e(P,{children:t(z,{children:[e(E,{code:"US"}),e(N,{children:"142.198.167.52"}),e(x,{children:"Azure"})]})}),H()]})})]}),X[17]=k):k=X[17],X[18]===Symbol.for("react.memo_cache_sentinel")?(O=e(T,{children:"Created at"}),X[18]=O):O=X[18],X[19]===Symbol.for("react.memo_cache_sentinel")?(M=t(W,{children:[O,e(U,{children:t($,{children:[e(P,{children:e(p,{value:"2026-04-02T14:03:00Z",format:"datetime"})}),H()]})})]}),X[19]=M):M=X[19],X[20]===Symbol.for("react.memo_cache_sentinel")?(L=e(T,{children:"Documentation"}),X[20]=L):L=X[20],X[21]===Symbol.for("react.memo_cache_sentinel")?(j=t(W,{children:[L,e(U,{children:t($,{children:[e(P,{children:e(D,{href:"#",size:"md",children:"View full report"})}),H()]})})]}),X[21]=j):j=X[21],X[22]===Symbol.for("react.memo_cache_sentinel")?(F=e(T,{children:"Payload (inline)"}),X[22]=F):F=X[22],X[23]===Symbol.for("react.memo_cache_sentinel")?(V=t(W,{children:[F,e(U,{children:t($,{children:[e(P,{children:e(_,{code:'{ "action": "login", "user_id": 42 }',size:"sm"})}),H()]})})]}),X[23]=V):V=X[23],X[24]===Symbol.for("react.memo_cache_sentinel")?(q=e(T,{children:"Payload (code)"}),X[24]=q):q=X[24],X[25]===Symbol.for("react.memo_cache_sentinel")?(B=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]",children:[n,c,a,m,h,v,k,M,j,V,t(W,{children:[q,e(U,{children:t($,{children:[e(P,{children:e(y,{size:"s",children:'{ "action": "login", "user_id": 42 }'})}),H()]})})]})]}),X[25]=B):B=X[25],B},meta:F},{name:"Horizontal",story:()=>{let r,n,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{children:"Status"}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-[400px]",children:t(W,{orientation:"horizontal",children:[r,e(U,{children:e(u,{color:"red",variant:"dotted",children:"Blocked"})})]})}),l[1]=n):n=l[1],n},meta:F},{name:"HorizontalTruncation",story:()=>{let r,n,l,c,o,a,d=(0,i.c)(6);return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{width:256,children:"Short"}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{orientation:"horizontal",children:[r,e(U,{children:e(C,{size:"sm",children:"Fits in 256px label cell"})})]}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{width:256,children:"This label text is much longer than 256 pixels and must be truncated"}),d[2]=l):l=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{orientation:"horizontal",children:[l,e(U,{children:e(C,{size:"sm",children:"Value"})})]}),d[3]=c):c=d[3],d[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(T,{children:"Users"}),d[4]=o):o=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(a=t("div",{className:"w-[500px] flex flex-col gap-8",children:[n,c,t(W,{orientation:"horizontal",children:[o,e(U,{children:e(C,{size:"sm",truncate:!0,children:"artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com"})})]})]}),d[5]=a):a=d[5],a},meta:F},{name:"HorizontalComposition",story:()=>{let r,n,l,c,o,a,d,m,s,h,f,y,_,S,b,w,g=(0,i.c)(16);return g[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{children:"Status"}),g[0]=r):r=g[0],g[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{orientation:"horizontal",children:[r,e(U,{children:e(u,{color:"red",variant:"dotted",children:"Blocked"})})]}),g[1]=n):n=g[1],g[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{children:"First seen"}),g[2]=l):l=g[2],g[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{orientation:"horizontal",children:[l,e(U,{children:e(p,{value:"2026-04-03T10:15:00Z",format:"relative"})})]}),g[3]=c):c=g[3],g[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(T,{children:"Attack type"}),g[4]=o):o=g[4],g[5]===Symbol.for("react.memo_cache_sentinel")?(a=t(W,{orientation:"horizontal",children:[o,e(U,{children:e(I,{className:"gap-4",items:["XSS","BOLA","SQL Injection","Scanner","CSRF","XXE","RCE","LFI","IDOR"],itemRenderer:et})})]}),g[5]=a):a=g[5],g[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(T,{children:"Last seen"}),g[6]=d):d=g[6],g[7]===Symbol.for("react.memo_cache_sentinel")?(m=t(W,{orientation:"horizontal",children:[d,e(U,{children:e(p,{value:"2025-04-02T14:03:00Z",format:"date"})})]}),g[7]=m):m=g[7],g[8]===Symbol.for("react.memo_cache_sentinel")?(s=e(T,{children:"Sessions"}),g[8]=s):s=g[8],g[9]===Symbol.for("react.memo_cache_sentinel")?(h=t(W,{orientation:"horizontal",children:[s,e(U,{children:e(C,{size:"sm",children:"3 sessions"})})]}),g[9]=h):h=g[9],g[10]===Symbol.for("react.memo_cache_sentinel")?(f=e(T,{children:"Users"}),g[10]=f):f=g[10],g[11]===Symbol.for("react.memo_cache_sentinel")?(y=t(W,{orientation:"horizontal",children:[f,e(U,{children:e(I,{className:"gap-4",items:["artem@acme.com","uxd@acme.com","ops@acme.com","security@acme.com","admin@acme.com"],itemRenderer:er})})]}),g[11]=y):y=g[11],g[12]===Symbol.for("react.memo_cache_sentinel")?(_=e(T,{children:"IPs"}),g[12]=_):_=g[12],g[13]===Symbol.for("react.memo_cache_sentinel")?(S=t(z,{children:[e(E,{code:"US"}),e(N,{children:"142.198.167.52"}),e(x,{children:"Azure"})]}),g[13]=S):S=g[13],g[14]===Symbol.for("react.memo_cache_sentinel")?(b=t(z,{children:[e(E,{code:"US"}),e(N,{children:"34.74.73.20"}),e(x,{children:"AWS"})]}),g[14]=b):b=g[14],g[15]===Symbol.for("react.memo_cache_sentinel")?(w=t("div",{className:"grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]",children:[n,c,a,m,h,y,e("div",{className:"col-span-2",children:t(W,{orientation:"horizontal",children:[_,e(U,{children:t(R,{type:"horizontal",children:[S,b,t(z,{children:[e(E,{code:"DE"}),e(N,{children:"34.74.73.20"}),e(x,{children:"GCP"})]})]})})]})})]}),g[15]=w):w=g[15],w},meta:F},{name:"AgentValue",story:()=>{let r,n,l,c,o,a,u,y=(0,i.c)(7);return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{children:"Run by"}),y[0]=r):r=y[0],y[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(W,{"data-testid":"attr-run-by",children:[r,e(U,{children:e(d,{agent:"radar","data-testid":"attr-run-by-agent",children:e(s,{children:e(f,{children:"Radar"})})})})]}),y[1]=n):n=y[1],y[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{children:"Proposed by"}),y[2]=l):l=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{orientation:"horizontal","data-testid":"attr-proposed-by",children:[l,e(U,{children:e(d,{agent:"acquit","data-testid":"attr-proposed-by-agent",children:e(s,{children:e(f,{children:"Acquit"})})})})]}),y[3]=c):c=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(T,{children:"Approved by"}),y[4]=o):o=y[4],y[5]===Symbol.for("react.memo_cache_sentinel")?(a=e(h,{name:"Artem Miskevich"}),y[5]=a):a=y[5],y[6]===Symbol.for("react.memo_cache_sentinel")?(u=t("div",{className:"w-[400px] flex flex-col gap-16",children:[n,c,t(W,{orientation:"horizontal","data-testid":"attr-approved-by",children:[o,e(U,{children:t(m,{size:"sm","data-testid":"attr-approved-by-person",children:[a,e(s,{children:e(f,{children:"Artem Miskevich"})})]})})]})]}),y[6]=u):u=y[6],u},meta:F},{name:"HorizontalLoading",story:()=>{let r,n,l=(0,i.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(W,{orientation:"horizontal",loading:!0,children:[e(T,{children:"Created at"}),e(U,{})]}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"w-[400px] flex flex-col gap-8",children:[r,t(W,{orientation:"horizontal",loading:!0,children:[e(T,{children:"Status"}),e(U,{})]})]}),l[1]=n):n=l[1],n},meta:F},{name:"HorizontalEmpty",story:()=>{let r,n,l,c,o,a=(0,i.c)(5);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(W,{orientation:"horizontal",children:[t(T,{width:160,children:["Region",e(L,{children:"Manual composition"})]}),e(U,{})]}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{width:160,children:"Region"}),a[1]=n):n=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(W,{orientation:"horizontal",isEmpty:!0,children:[n,e(U,{children:e(C,{size:"sm",children:"This text is replaced by the em-dash placeholder"})})]}),a[2]=l):l=a[2],a[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(W,{orientation:"horizontal",isEmpty:!0,children:[t(T,{width:160,children:["Owner",e(M,{children:"Not yet assigned"})]}),e(U,{})]}),a[3]=c):c=a[3],a[4]===Symbol.for("react.memo_cache_sentinel")?(o=t("div",{className:"w-[400px] flex flex-col gap-8",children:[r,l,c,t(W,{orientation:"horizontal",isEmpty:!0,children:[t(T,{width:160,children:["SSO provider",t(M,{children:["Not connected —"," ",e(D,{href:"#",size:"md",children:"set up integration"})]})]}),e(U,{})]})]}),a[4]=o):o=a[4],o},meta:F},{name:"HorizontalWithActions",story:q,meta:F},{name:"HorizontalWithActionsMenuOnly",story:B,meta:F},{name:"WithInlineEdit",story:()=>{let t,r=(0,i.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(X,{}),r[0]=t):t=r[0],t},meta:F},{name:"HorizontalWithInlineEdit",story:()=>{let t,r=(0,i.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(X,{orientation:"horizontal"}),r[0]=t):t=r[0],t},meta:F},{name:"Mixed",story:G,meta:F},{name:"HorizontalMixed",story:J,meta:F}];function el({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,i=()=>c.default.createElement(l,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=i;i=()=>e(t,o)}return c.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},c.default.createElement("h2",{className:"text-sm mb-12"},e.name),c.default.createElement(i))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(c.default.createElement(window.WallarmDS.Root,null,en.map((e,t)=>c.default.createElement(el,{key:t,entry:e})))),t}}})();

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

@@ -1,4 +1,4 @@
-A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads.
+A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. An AI agent takes `AgentItem` instead of `Avatar`: its character, with no plate, before the same `AvatarContent`. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads.
 
 ## Props as canvas attributes
 
@@ -26,6 +26,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
 
 ## Sub-components
 
+- `WallarmDS.AgentItem` — `AgentItemProps` in the declaration bundle.
 - `WallarmDS.AvatarContent` — `AvatarContentProps` in the declaration bundle.
 - `WallarmDS.AvatarDescription` — `AvatarDescriptionProps` in the declaration bundle.
 - `WallarmDS.AvatarFallback` — `AvatarFallbackProps` in the declaration bundle.
@@ -62,6 +63,13 @@ Source: Avatar/Avatar.stories.tsx#WithName
 
 Source: Avatar/Avatar.stories.tsx#WithDescription
 
+### Agent
+
+An AI agent's user item: `AgentItem` puts the agent's glyph where the plate goes, with no plate and no circle, and
+takes the same `AvatarContent`. 20 px beside the text-sm name, 24 px for roomier rows, 16 px beside text-xs.
+
+Source: Avatar/Avatar.stories.tsx#Agent
+
 ### Fallback
 
 Initials are the first letters of the first and last word of `name`; without a name the person icon shows, whether the photo is missing or failed to load.
@@ -113,6 +121,7 @@ import { FileUpload, FileUploadError, FileUploadTrigger, useFilePreviewUrl } fro
 import { Loader } from '../Loader';
 import { HStack, VStack } from '../Stack';
 import {
+  AgentItem,
   Avatar,
   AvatarContent,
   AvatarDescription,
@@ -135,6 +144,7 @@ const DESCRIPTION = [
   "A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none.",
   'It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image.',
   'Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row.',
+  'An AI agent takes `AgentItem` instead of `Avatar`: its character, with no plate, before the same `AvatarContent`.',
   "To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads.",
 ].join(' ');
 
@@ -271,6 +281,41 @@ export const WithDescription: StoryFn<AvatarProps> = () => (
   </VStack>
 );
 
+/**
+ * An AI agent's user item: `AgentItem` puts the agent's glyph where the plate goes, with no plate and no circle, and
+ * takes the same `AvatarContent`. 20 px beside the text-sm name, 24 px for roomier rows, 16 px beside text-xs.
+ */
+export const Agent: StoryFn<AvatarProps> = () => (
+  <VStack gap={16} align='start' data-testid='avatar'>
+    <Avatar size='sm' data-testid='avatar-person'>
+      <AvatarFallback name='Artem Miskevich' />
+      <AvatarContent>
+        <AvatarName>Artem Miskevich</AvatarName>
+      </AvatarContent>
+    </Avatar>
+    {([20, 24, 16] as const).map(size => (
+      <AgentItem key={size} agent='radar' size={size} data-testid={`avatar-agent-${size}`}>
+        <AvatarContent>
+          <AvatarName>Radar</AvatarName>
+        </AvatarContent>
+      </AgentItem>
+    ))}
+    <AgentItem agent='sift' data-testid='avatar-agent-description'>
+      <AvatarContent>
+        <AvatarName>Sift</AvatarName>
+        <AvatarDescription>False Positives Analyzer</AvatarDescription>
+      </AvatarContent>
+    </AgentItem>
+    <div className='w-120'>
+      <AgentItem agent='acquit' data-testid='avatar-agent-truncated'>
+        <AvatarContent>
+          <AvatarName>Acquit, the false positive resolver</AvatarName>
+        </AvatarContent>
+      </AgentItem>
+    </div>
+  </VStack>
+);
+
 /** Initials are the first letters of the first and last word of `name`; without a name the person icon shows, whether the photo is missing or failed to load. */
 export const Fallback: StoryFn<AvatarProps> = () => (
   <HStack gap={12} align='center' data-testid='avatar'>