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

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

@@ -0,0 +1,450 @@
+Draws structure: a vertical rail and depth indentation around nested content, with optional per-item collapse. It shows a hierarchy rather than letting you work in one — reach for `TreeView` when rows need selecting, keyboard navigation or disabled states, and for `Accordion` when the levels are sections rather than a tree.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `indent` | `number \| undefined` | no | — |  |
+| `gap` | `number \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TreeItem` — `TreeItemProps` in the declaration bundle.
+- `WallarmDS.TreeItemContent` — `TreeItemContentProps` in the declaration bundle.
+- `WallarmDS.TreeItemHeader` — `TreeItemHeaderProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+One level: the rail and the indentation, with the items composed from `TreeItemHeader` and `TreeItemContent`.
+
+Source: Tree/Tree.stories.tsx#Basic
+
+### Nested
+
+Nesting a `Tree` inside an item adds a depth, and each depth draws its own rail so the ancestry stays readable.
+
+Source: Tree/Tree.stories.tsx#Nested
+
+### WithIcons
+
+`TreeItemHeader`’s `icon` prop sits before the label at every depth, which is how a status or a type reads down a branch.
+
+Source: Tree/Tree.stories.tsx#WithIcons
+
+### WithIconsNested
+
+The same icons four levels deep — the case that shows whether the indentation is still legible at depth.
+
+Source: Tree/Tree.stories.tsx#WithIconsNested
+
+### Collapsible
+
+`collapsible` on an item turns its header into a toggle, open by default. It is per item, not a tree-wide setting.
+
+Source: Tree/Tree.stories.tsx#Collapsible
+
+### CollapsibleWithActions
+
+`TreeItemHeader`’s `action` slot holds a control on the right of the row, which is where a per-branch action belongs.
+
+Source: Tree/Tree.stories.tsx#CollapsibleWithActions
+
+## Story sources
+
+### Tree/Tree.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Circle, CircleCheck, LoaderCircle, Search, Settings } from '../../icons';
+import { Code } from '../Code';
+import { Text } from '../Text';
+import { Tree, type TreeProps } from './Tree';
+import { TreeItem } from './TreeItem';
+import { TreeItemContent } from './TreeItemContent';
+import { TreeItemHeader } from './TreeItemHeader';
+
+const DESCRIPTION = [
+  'Draws structure: a vertical rail and depth indentation around nested content, with optional per-item collapse.',
+  'It shows a hierarchy rather than letting you work in one — reach for `TreeView` when rows need selecting, keyboard navigation or disabled states, and for `Accordion` when the levels are sections rather than a tree.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/Tree',
+  component: Tree,
+  args: {
+    'data-testid': 'tree',
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    indent: { control: 'number' },
+  },
+} satisfies Meta<typeof Tree>;
+
+export default meta;
+
+/** One level: the rail and the indentation, with the items composed from `TreeItemHeader` and `TreeItemContent`. */
+export const Basic: StoryFn<TreeProps> = args => (
+  <div className='w-240'>
+    <Tree {...args}>
+      <TreeItem>
+        <TreeItemHeader>Item 1</TreeItemHeader>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader>Item 2</TreeItemHeader>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader>Item 3</TreeItemHeader>
+      </TreeItem>
+    </Tree>
+  </div>
+);
+
+/** Nesting a `Tree` inside an item adds a depth, and each depth draws its own rail so the ancestry stays readable. */
+export const Nested: StoryFn<TreeProps> = args => (
+  <div className='w-320'>
+    <Tree {...args}>
+      <TreeItem>
+        <TreeItemHeader>Level 1 - Item 1</TreeItemHeader>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader>Level 1 - Item 2</TreeItemHeader>
+        <Tree>
+          <TreeItem>
+            <TreeItemHeader>Level 2 - Item 1</TreeItemHeader>
+          </TreeItem>
+          <TreeItem>
+            <TreeItemHeader>Level 2 - Item 2</TreeItemHeader>
+            <Tree>
+              <TreeItem>
+                <TreeItemHeader>Level 3 - Item 1</TreeItemHeader>
+              </TreeItem>
+              <TreeItem>
+                <TreeItemHeader>Level 3 - Item 2</TreeItemHeader>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </Tree>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader>Level 1 - Item 3</TreeItemHeader>
+      </TreeItem>
+    </Tree>
+  </div>
+);
+
+/** `TreeItemHeader`’s `icon` prop sits before the label at every depth, which is how a status or a type reads down a branch. */
+export const WithIcons: StoryFn<TreeProps> = args => (
+  <div className='w-320'>
+    <Tree gap={12} {...args}>
+      <TreeItem>
+        <TreeItemHeader icon={<CircleCheck size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Thought for 5s
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader icon={<Search size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Searched for ABC
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader icon={<Settings size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Created ABC
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader icon={<LoaderCircle size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Working...
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+    </Tree>
+  </div>
+);
+
+/** The same icons four levels deep — the case that shows whether the indentation is still legible at depth. */
+export const WithIconsNested: StoryFn<TreeProps> = args => (
+  <div className='w-320'>
+    <Tree gap={12} {...args}>
+      <TreeItem>
+        <TreeItemHeader icon={<Circle size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Chain item
+          </Text>
+        </TreeItemHeader>
+        <Tree>
+          <TreeItem>
+            <TreeItemHeader icon={<Circle size='md' className='text-text-secondary' />}>
+              <Text size='xs' color='secondary'>
+                Chain item
+              </Text>
+            </TreeItemHeader>
+          </TreeItem>
+          <TreeItem>
+            <TreeItemHeader
+              icon={<Circle size='md' className='text-text-secondary' />}
+              action={
+                <Code size='xs' color='secondary'>
+                  Metric
+                </Code>
+              }
+            >
+              <Text size='xs' color='secondary'>
+                Chain item
+              </Text>
+            </TreeItemHeader>
+            <Tree>
+              <TreeItem>
+                <TreeItemHeader icon={<Circle size='md' className='text-text-secondary' />}>
+                  <Text size='xs' color='secondary'>
+                    Chain item
+                  </Text>
+                </TreeItemHeader>
+              </TreeItem>
+              <TreeItem>
+                <TreeItemHeader
+                  icon={<CircleCheck size='md' className='text-text-secondary' />}
+                  action={
+                    <Code size='xs' color='secondary'>
+                      Metric
+                    </Code>
+                  }
+                >
+                  <Text size='xs' color='secondary'>
+                    Chain item
+                  </Text>
+                </TreeItemHeader>
+              </TreeItem>
+              <TreeItem>
+                <TreeItemHeader icon={<Circle size='md' className='text-text-secondary' />}>
+                  <Text size='xs' color='secondary'>
+                    Chain item
+                  </Text>
+                </TreeItemHeader>
+              </TreeItem>
+              <TreeItem>
+                <TreeItemHeader
+                  icon={<Circle size='md' className='text-text-secondary' />}
+                  action={
+                    <Code size='xs' color='secondary'>
+                      Metric
+                    </Code>
+                  }
+                >
+                  <Text size='xs' color='secondary'>
+                    Chain item
+                  </Text>
+                </TreeItemHeader>
+              </TreeItem>
+            </Tree>
+          </TreeItem>
+        </Tree>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader icon={<CircleCheck size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Worked for 3m 45s
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+    </Tree>
+  </div>
+);
+
+/** `collapsible` on an item turns its header into a toggle, open by default. It is per item, not a tree-wide setting. */
+export const Collapsible: StoryFn<TreeProps> = args => (
+  <div className='w-320'>
+    <Tree gap={8} {...args}>
+      <TreeItem collapsible defaultOpen>
+        <TreeItemHeader>
+          <Text size='xs' color='secondary'>
+            Thought for 5s
+          </Text>
+        </TreeItemHeader>
+        <TreeItemContent>
+          <div className='flex flex-col gap-8'>
+            <Text size='xs' color='secondary'>
+              I'll fetch your custom rules so I can pick one and explain it to you.
+            </Text>
+            <Text size='xs' color='secondary'>
+              Great! I found several custom rules. Let me pick one and explain it in detail. I'll go
+              with rule ID 59133856 — it's a good example of a scoped rule with clear intent.
+            </Text>
+          </div>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem collapsible defaultOpen={false}>
+        <TreeItemHeader icon={<Search size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Searched for ABC
+          </Text>
+        </TreeItemHeader>
+        <TreeItemContent>
+          <Text size='xs' color='secondary'>
+            Search results...
+          </Text>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem collapsible defaultOpen={false}>
+        <TreeItemHeader icon={<Settings size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Created ABC
+          </Text>
+        </TreeItemHeader>
+        <TreeItemContent>
+          <Text size='xs' color='secondary'>
+            Details about the created resource...
+          </Text>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader icon={<CircleCheck size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Worked for 3m 45s
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+    </Tree>
+  </div>
+);
+
+/** `TreeItemHeader`’s `action` slot holds a control on the right of the row, which is where a per-branch action belongs. */
+export const CollapsibleWithActions: StoryFn<TreeProps> = args => (
+  <div className='w-320'>
+    <Tree gap={8} {...args}>
+      <TreeItem collapsible>
+        <TreeItemHeader
+          icon={<CircleCheck size='md' className='text-text-secondary' />}
+          action={
+            <Code size='xs' color='secondary'>
+              3.2s
+            </Code>
+          }
+        >
+          <Text size='xs' color='secondary'>
+            Thought for 5s
+          </Text>
+        </TreeItemHeader>
+        <TreeItemContent>
+          <Tree>
+            <TreeItem collapsible defaultOpen={false}>
+              <TreeItemHeader
+                icon={<Search size='md' className='text-text-secondary' />}
+                action={
+                  <Code size='xs' color='secondary'>
+                    0.8s
+                  </Code>
+                }
+              >
+                <Text size='xs' color='secondary'>
+                  Searched for API docs
+                </Text>
+              </TreeItemHeader>
+              <TreeItemContent>
+                <Text size='xs' color='secondary'>
+                  Found 3 relevant endpoints in the documentation.
+                </Text>
+              </TreeItemContent>
+            </TreeItem>
+            <TreeItem collapsible>
+              <TreeItemHeader icon={<Settings size='md' className='text-text-secondary' />}>
+                <Text size='xs' color='secondary'>
+                  Tool execution
+                </Text>
+              </TreeItemHeader>
+              <TreeItemContent>
+                <Tree>
+                  <TreeItem>
+                    <TreeItemHeader icon={<Circle size='md' className='text-text-secondary' />}>
+                      <Text size='xs' color='secondary'>
+                        Processing batch
+                      </Text>
+                    </TreeItemHeader>
+                    <Tree>
+                      <TreeItem>
+                        <TreeItemHeader
+                          icon={<CircleCheck size='md' className='text-text-secondary' />}
+                        >
+                          <Text size='xs' color='secondary'>
+                            Validated input
+                          </Text>
+                        </TreeItemHeader>
+                      </TreeItem>
+                      <TreeItem>
+                        <TreeItemHeader
+                          icon={<CircleCheck size='md' className='text-text-secondary' />}
+                          action={
+                            <Code size='xs' color='secondary'>
+                              0.3s
+                            </Code>
+                          }
+                        >
+                          <Text size='xs' color='secondary'>
+                            Transformed data
+                          </Text>
+                        </TreeItemHeader>
+                      </TreeItem>
+                    </Tree>
+                  </TreeItem>
+                  <TreeItem collapsible>
+                    <TreeItemHeader
+                      icon={<Circle size='md' className='text-text-secondary' />}
+                      action={
+                        <Code size='xs' color='secondary'>
+                          1.5s
+                        </Code>
+                      }
+                    >
+                      <Text size='xs' color='secondary'>
+                        Applied changes
+                      </Text>
+                    </TreeItemHeader>
+                    <TreeItemContent>
+                      <Text size='xs' color='secondary'>
+                        Updated 12 records in the database with the new configuration.
+                      </Text>
+                    </TreeItemContent>
+                  </TreeItem>
+                </Tree>
+              </TreeItemContent>
+            </TreeItem>
+          </Tree>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem>
+        <TreeItemHeader icon={<CircleCheck size='md' className='text-text-secondary' />}>
+          <Text size='xs' color='secondary'>
+            Completed analysis
+          </Text>
+        </TreeItemHeader>
+      </TreeItem>
+    </Tree>
+  </div>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Navigation" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,c;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,a=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let c of d(t))h.call(e,c)||c===r||i(e,c,{get:()=>t[c],enumerable:!(n=s(t,c))||n.enumerable});return e},f={},y={$dispatcherGuard:()=>E,$makeReadOnly:()=>I,$reset:()=>$,$structuralCheck:()=>T,c:()=>N,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>O,useRenderCounter:()=>M};for(var p in y)i(f,p,{get:y[p],enumerable:!0});e.exports=u(i({},"__esModule",{value:!0}),f);var _=(c=null!=(n=r("C"))?a(m(n)):{},u(n&&n.__esModule?c:i(c,"default",{value:n,enumerable:!0}),n)),{useRef:x,useEffect:b,isValidElement:S}=_,w=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"),N="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},z={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{z[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 v=null;function C(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}z.useMemoCache=e=>{if(null!=v)return v.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function E(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(v=t),t===z)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.");C(z)}else if(1===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===R.length&&(v=null),C(e)}else if(2===e)R.push(t),C(v);else if(3===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");C(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function $(e){for(let t=0;t<e.length;t++)e[t]=g}function I(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function k(){for(let e of O.values())e.forEach(e=>{e.count=0})}function M(e){let t=x(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var D=new Set;function T(e,t,r,n,c,o){function l(e,t,l,a){let i=`${n}:${o} [${c}] ${r}${l} changed from ${e} to ${t} at depth ${a}`;D.has(i)||(D.add(i),console.error(i))}!function e(t,r,n,c){if(!(c>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,c);else if("object"==typeof t){let o=Array.isArray(t),a=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,c);else if(null===r)l(`type ${typeof t}`,"null",n,c);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,c);else for(let[o,a]of t)r.has(o)?e(a,r.get(o),`${n}.get(${o})`,c+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,c);else l("Map instance","other value",n,c);else if(r instanceof Map)l("other value","Map instance",n,c);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,c);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,c);else l("Set instance","other value",n,c);else if(r instanceof Set)l("other value","Set instance",n,c);else if(o||a)if(o!==a)l(`type ${o?"array":"object"}`,`type ${a?"array":"object"}`,n,c);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,c);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,c+1);else if(S(t)||S(r))S(t)!==S(r)?l(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,n,c):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,c):e(t.props,r.props,`[props of ${n}]`,c+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,c);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,c+1):l(`object with key ${o}`,`object without key ${o}`,n,c)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,c):t!==r&&l(t,r,n,c)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,c=new WeakMap;function o(e,t,r){let o=t,l=r;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,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let c=r.get(t);c||((c=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,c)),o=c}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 r=c.get(e);r||(r=new Map,c.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let c=e.useRef(null);if(!c.current||c.current.original!==n){let e;c.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:c.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let c=o(e,t,r??{});return e.createElement(c.type,void 0===n?c.props:{...c.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let c=o(e,t,r??{}),{children:l,...a}=c.props;return e.createElement(c.type,void 0===n?a:{...a,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function a(e){return{...e,createElement:(t,r,...n)=>{let c=o(e,t,r??{});return e.createElement(c.type,c.props,...n)},cloneElement:(t,r,...n)=>{let c=e.cloneElement(t,r??void 0,...n),l=c.ref,a=o(e,c.type,{...c.props,ref:l});return a.type===c.type&&"string"!=typeof c.type?c:e.createElement(a.type,{...a.props,key:c.key})}}}r.d(t,{MA:()=>l,YJ:()=>a})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:c,Component:o,Fragment:l,Profiler:a,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:u,createContext:f,createElement:y,createFactory:p,createRef:_,forwardRef:x,isValidElement:b,lazy:S,memo:w,startTransition:g,unstable_act:N,useCallback:z,useContext:v,useDebugValue:C,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:I,useInsertionEffect:O,useLayoutEffect:k,useMemo:M,useReducer:D,useRef:T,useState:A,useSyncExternalStore:W,useTransition:j,version:L,use:P}=n;r.d(t,{},{Children:c,Component:o,Fragment:l,Profiler:a,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:h,cloneElement:u,createContext:f,createElement:y,createFactory:p,createRef:_,default:n,forwardRef:x,isValidElement:b,lazy:S,memo:w,startTransition:g,unstable_act:N,use:P,useCallback:z,useContext:v,useDebugValue:C,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:I,useInsertionEffect:O,useLayoutEffect:k,useMemo:M,useReducer:D,useRef:T,useState:A,useSyncExternalStore:W,useTransition:j,version:L})}},t={};function r(n){var c=t[n];if(void 0!==c)return c.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var c=(t,n)=>{for(var c in t)r.o(t,c)&&!r.o(e,c)&&Object.defineProperty(e,c,{enumerable:!0,[n]:t[c]})};c(t,"get"),c(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:c}=(0,r("p").MA)(window.React);var o=r("vD");let l=window.WallarmDS.Icons.Circle,a=window.WallarmDS.Icons.CircleCheck,i=window.WallarmDS.Icons.LoaderCircle,s=window.WallarmDS.Icons.Search,d=window.WallarmDS.Icons.Settings,m=window.WallarmDS.Code,h=window.WallarmDS.Text,u=window.WallarmDS.Tree,f=window.WallarmDS.TreeItem,y=window.WallarmDS.TreeItemContent,p=window.WallarmDS.TreeItemHeader,_={title:"Navigation/Tree",component:u,args:{"data-testid":"tree"},parameters:{layout:"centered",docs:{description:{component:"Draws structure: a vertical rail and depth indentation around nested content, with optional per-item collapse. It shows a hierarchy rather than letting you work in one — reach for `TreeView` when rows need selecting, keyboard navigation or disabled states, and for `Accordion` when the levels are sections rather than a tree."}}},argTypes:{indent:{control:"number"}}};var x=r("C");let b=[{name:"Basic",story:r=>{let n,c,l,a,i=(0,o.c)(5);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{children:e(p,{children:"Item 1"})}),i[0]=n):n=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{children:e(p,{children:"Item 2"})}),i[1]=c):c=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(f,{children:e(p,{children:"Item 3"})}),i[2]=l):l=i[2],i[3]!==r?(a=e("div",{className:"w-240",children:t(u,{...r,children:[n,c,l]})}),i[3]=r,i[4]=a):a=i[4],a},meta:_},{name:"Nested",story:r=>{let n,c,l,a,i,s,d,m,h=(0,o.c)(9);return h[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{children:e(p,{children:"Level 1 - Item 1"})}),h[0]=n):n=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(c=e(p,{children:"Level 1 - Item 2"}),h[1]=c):c=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(f,{children:e(p,{children:"Level 2 - Item 1"})}),h[2]=l):l=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(p,{children:"Level 2 - Item 2"}),h[3]=a):a=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(f,{children:e(p,{children:"Level 3 - Item 1"})}),h[4]=i):i=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(f,{children:[c,t(u,{children:[l,t(f,{children:[a,t(u,{children:[i,e(f,{children:e(p,{children:"Level 3 - Item 2"})})]})]})]})]}),h[5]=s):s=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{children:e(p,{children:"Level 1 - Item 3"})}),h[6]=d):d=h[6],h[7]!==r?(m=e("div",{className:"w-320",children:t(u,{...r,children:[n,s,d]})}),h[7]=r,h[8]=m):m=h[8],m},meta:_},{name:"WithIcons",story:r=>{let n,c,l,m,y,_=(0,o.c)(6);return _[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Thought for 5s"})})}),_[0]=n):n=_[0],_[1]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{children:e(p,{icon:e(s,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Searched for ABC"})})}),_[1]=c):c=_[1],_[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(f,{children:e(p,{icon:e(d,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Created ABC"})})}),_[2]=l):l=_[2],_[3]===Symbol.for("react.memo_cache_sentinel")?(m=e(f,{children:e(p,{icon:e(i,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Working..."})})}),_[3]=m):m=_[3],_[4]!==r?(y=e("div",{className:"w-320",children:t(u,{gap:12,...r,children:[n,c,l,m]})}),_[4]=r,_[5]=y):y=_[5],y},meta:_},{name:"WithIconsNested",story:r=>{let n,c,i,s,d,y,_,x,b,S=(0,o.c)(10);return S[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})}),S[0]=n):n=S[0],S[1]===Symbol.for("react.memo_cache_sentinel")?(c=e(f,{children:e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})})}),S[1]=c):c=S[1],S[2]===Symbol.for("react.memo_cache_sentinel")?(i=e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"Metric"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})}),S[2]=i):i=S[2],S[3]===Symbol.for("react.memo_cache_sentinel")?(s=e(f,{children:e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})})}),S[3]=s):s=S[3],S[4]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"Metric"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})})}),S[4]=d):d=S[4],S[5]===Symbol.for("react.memo_cache_sentinel")?(y=e(f,{children:e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})})}),S[5]=y):y=S[5],S[6]===Symbol.for("react.memo_cache_sentinel")?(_=t(f,{children:[n,t(u,{children:[c,t(f,{children:[i,t(u,{children:[s,d,y,e(f,{children:e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"Metric"}),children:e(h,{size:"xs",color:"secondary",children:"Chain item"})})})]})]})]})]}),S[6]=_):_=S[6],S[7]===Symbol.for("react.memo_cache_sentinel")?(x=e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Worked for 3m 45s"})})}),S[7]=x):x=S[7],S[8]!==r?(b=e("div",{className:"w-320",children:t(u,{gap:12,...r,children:[_,x]})}),S[8]=r,S[9]=b):b=S[9],b},meta:_},{name:"Collapsible",story:r=>{let n,c,l,i,m,_,x,b,S=(0,o.c)(9);return S[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{children:e(h,{size:"xs",color:"secondary",children:"Thought for 5s"})}),S[0]=n):n=S[0],S[1]===Symbol.for("react.memo_cache_sentinel")?(c=t(f,{collapsible:!0,defaultOpen:!0,children:[n,e(y,{children:t("div",{className:"flex flex-col gap-8",children:[e(h,{size:"xs",color:"secondary",children:"I'll fetch your custom rules so I can pick one and explain it to you."}),e(h,{size:"xs",color:"secondary",children:"Great! I found several custom rules. Let me pick one and explain it in detail. I'll go with rule ID 59133856 — it's a good example of a scoped rule with clear intent."})]})})]}),S[1]=c):c=S[1],S[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(p,{icon:e(s,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Searched for ABC"})}),S[2]=l):l=S[2],S[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(f,{collapsible:!0,defaultOpen:!1,children:[l,e(y,{children:e(h,{size:"xs",color:"secondary",children:"Search results..."})})]}),S[3]=i):i=S[3],S[4]===Symbol.for("react.memo_cache_sentinel")?(m=e(p,{icon:e(d,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Created ABC"})}),S[4]=m):m=S[4],S[5]===Symbol.for("react.memo_cache_sentinel")?(_=t(f,{collapsible:!0,defaultOpen:!1,children:[m,e(y,{children:e(h,{size:"xs",color:"secondary",children:"Details about the created resource..."})})]}),S[5]=_):_=S[5],S[6]===Symbol.for("react.memo_cache_sentinel")?(x=e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Worked for 3m 45s"})})}),S[6]=x):x=S[6],S[7]!==r?(b=e("div",{className:"w-320",children:t(u,{gap:8,...r,children:[c,i,_,x]})}),S[7]=r,S[8]=b):b=S[8],b},meta:_},{name:"CollapsibleWithActions",story:r=>{let n,c,i,_,x,b,S,w,g,N,z,v=(0,o.c)(12);return v[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"3.2s"}),children:e(h,{size:"xs",color:"secondary",children:"Thought for 5s"})}),v[0]=n):n=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(c=e(p,{icon:e(s,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"0.8s"}),children:e(h,{size:"xs",color:"secondary",children:"Searched for API docs"})}),v[1]=c):c=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(i=t(f,{collapsible:!0,defaultOpen:!1,children:[c,e(y,{children:e(h,{size:"xs",color:"secondary",children:"Found 3 relevant endpoints in the documentation."})})]}),v[2]=i):i=v[2],v[3]===Symbol.for("react.memo_cache_sentinel")?(_=e(p,{icon:e(d,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Tool execution"})}),v[3]=_):_=v[3],v[4]===Symbol.for("react.memo_cache_sentinel")?(x=e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Processing batch"})}),v[4]=x):x=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(b=e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Validated input"})})}),v[5]=b):b=v[5],v[6]===Symbol.for("react.memo_cache_sentinel")?(S=t(f,{children:[x,t(u,{children:[b,e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"0.3s"}),children:e(h,{size:"xs",color:"secondary",children:"Transformed data"})})})]})]}),v[6]=S):S=v[6],v[7]===Symbol.for("react.memo_cache_sentinel")?(w=e(p,{icon:e(l,{size:"md",className:"text-text-secondary"}),action:e(m,{size:"xs",color:"secondary",children:"1.5s"}),children:e(h,{size:"xs",color:"secondary",children:"Applied changes"})}),v[7]=w):w=v[7],v[8]===Symbol.for("react.memo_cache_sentinel")?(g=t(f,{collapsible:!0,children:[n,e(y,{children:t(u,{children:[i,t(f,{collapsible:!0,children:[_,e(y,{children:t(u,{children:[S,t(f,{collapsible:!0,children:[w,e(y,{children:e(h,{size:"xs",color:"secondary",children:"Updated 12 records in the database with the new configuration."})})]})]})})]})]})})]}),v[8]=g):g=v[8],v[9]===Symbol.for("react.memo_cache_sentinel")?(N=e(f,{children:e(p,{icon:e(a,{size:"md",className:"text-text-secondary"}),children:e(h,{size:"xs",color:"secondary",children:"Completed analysis"})})}),v[9]=N):N=v[9],v[10]!==r?(z=e("div",{className:"w-320",children:t(u,{gap:8,...r,children:[g,N]})}),v[10]=r,v[11]=z):z=v[11],z},meta:_}];function S({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},c="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>x.default.createElement(c,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return x.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},x.default.createElement("h2",{className:"text-sm mb-12"},e.name),x.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(x.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>x.default.createElement(S,{key:t,entry:e})))),t}}})();