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

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

@@ -0,0 +1,218 @@
+The settings button in the chat composer that lists which Wally tools may run without asking first in this conversation. Each row is a switch and takes effect the moment it is flipped — there is no Save, and the popover stays open so several tools can be changed in one go. The app owns the list and its order: enabled tools first, then a `Separator` and the disabled ones.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `boolean \| undefined` | no | — |  |
+| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ChatPermissionsContent` — `ChatPermissionsContentProps` in the declaration bundle.
+- `WallarmDS.ChatPermissionsItem` — `ChatPermissionsItemProps` in the declaration bundle.
+- `WallarmDS.ChatPermissionsTrigger` — `ChatPermissionsTriggerProps` in the declaration bundle.
+
+## Stories
+
+### AllOn
+
+Every tool is allowed. Open the popover with the settings button; the tooltip names it until then.
+
+Source: ChatPermissions/ChatPermissions.stories.tsx#AllOn
+
+### SomeOff
+
+Two tools switched off sit below a separator. The order is decided by the app, not the component.
+
+Source: ChatPermissions/ChatPermissions.stories.tsx#SomeOff
+
+### Analytics
+
+`data-analytics-id` lands on the real trigger `<button>` and on each switch row's `<label>`, so
+a click anywhere on the row resolves to the row's id.
+
+Source: ChatPermissions/ChatPermissions.stories.tsx#Analytics
+
+## Story sources
+
+### ChatPermissions/ChatPermissions.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Separator } from '../Separator';
+import {
+  ChatPermissions,
+  ChatPermissionsContent,
+  ChatPermissionsItem,
+  type ChatPermissionsItemCheckedChangeDetails,
+  ChatPermissionsTrigger,
+} from './index';
+
+const DESCRIPTION = [
+  'The settings button in the chat composer that lists which Wally tools may run without asking first in this conversation.',
+  'Each row is a switch and takes effect the moment it is flipped — there is no Save, and the popover stays open so several tools can be changed in one go.',
+  'The app owns the list and its order: enabled tools first, then a `Separator` and the disabled ones.',
+].join(' ');
+
+interface Tool {
+  name: string;
+  description: string;
+}
+
+const TOOLS: Tool[] = [
+  { name: 'propose_add_to_denylist', description: 'Suggest IPs to add to the denylist' },
+  { name: 'search_attacks', description: 'Search detected attacks and incidents' },
+  {
+    name: 'get_api_inventory',
+    description: 'Read the discovered API endpoints, their parameters, owners and risk scores',
+  },
+  { name: 'create_rule', description: 'Draft a mitigation rule for review' },
+];
+
+const meta = {
+  title: 'AI/ChatPermissions',
+  component: ChatPermissions,
+  subcomponents: { ChatPermissionsTrigger, ChatPermissionsContent, ChatPermissionsItem },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof ChatPermissions>;
+
+export default meta;
+
+/** Every tool is allowed. Open the popover with the settings button; the tooltip names it until then. */
+export const AllOn: StoryFn<typeof meta> = () => {
+  const [allowed, setAllowed] = useState<Record<string, boolean>>({
+    propose_add_to_denylist: true,
+    search_attacks: true,
+    get_api_inventory: true,
+    create_rule: true,
+  });
+  const enabled = TOOLS.filter(tool => allowed[tool.name]);
+  const disabled = TOOLS.filter(tool => !allowed[tool.name]);
+
+  const handleCheckedChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {
+    setAllowed(prev => ({ ...prev, [name]: checked }));
+  };
+
+  return (
+    <div className='flex h-[360px] w-[400px] items-end'>
+      <ChatPermissions data-testid='permissions'>
+        <ChatPermissionsTrigger />
+        <ChatPermissionsContent>
+          {enabled.map(tool => (
+            <ChatPermissionsItem
+              key={tool.name}
+              name={tool.name}
+              data-testid={`permission-${tool.name}`}
+              title={tool.name}
+              description={tool.description}
+              checked
+              onCheckedChange={handleCheckedChange}
+            />
+          ))}
+          {enabled.length > 0 && disabled.length > 0 && <Separator spacing={4} />}
+          {disabled.map(tool => (
+            <ChatPermissionsItem
+              key={tool.name}
+              name={tool.name}
+              data-testid={`permission-${tool.name}`}
+              title={tool.name}
+              description={tool.description}
+              checked={false}
+              onCheckedChange={handleCheckedChange}
+            />
+          ))}
+        </ChatPermissionsContent>
+      </ChatPermissions>
+    </div>
+  );
+};
+
+/** Two tools switched off sit below a separator. The order is decided by the app, not the component. */
+export const SomeOff: StoryFn<typeof meta> = () => {
+  const [allowed, setAllowed] = useState<Record<string, boolean>>({
+    propose_add_to_denylist: true,
+    search_attacks: true,
+    get_api_inventory: false,
+    create_rule: false,
+  });
+  const enabled = TOOLS.filter(tool => allowed[tool.name]);
+  const disabled = TOOLS.filter(tool => !allowed[tool.name]);
+
+  const handleCheckedChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {
+    setAllowed(prev => ({ ...prev, [name]: checked }));
+  };
+
+  return (
+    <div className='flex h-[360px] w-[400px] items-end'>
+      <ChatPermissions data-testid='permissions'>
+        <ChatPermissionsTrigger />
+        <ChatPermissionsContent>
+          {enabled.map(tool => (
+            <ChatPermissionsItem
+              key={tool.name}
+              name={tool.name}
+              data-testid={`permission-${tool.name}`}
+              title={tool.name}
+              description={tool.description}
+              checked
+              onCheckedChange={handleCheckedChange}
+            />
+          ))}
+          {enabled.length > 0 && disabled.length > 0 && <Separator spacing={4} />}
+          {disabled.map(tool => (
+            <ChatPermissionsItem
+              key={tool.name}
+              name={tool.name}
+              data-testid={`permission-${tool.name}`}
+              title={tool.name}
+              description={tool.description}
+              checked={false}
+              onCheckedChange={handleCheckedChange}
+            />
+          ))}
+        </ChatPermissionsContent>
+      </ChatPermissions>
+    </div>
+  );
+};
+
+/**
+ * `data-analytics-id` lands on the real trigger `<button>` and on each switch row's `<label>`, so
+ * a click anywhere on the row resolves to the row's id.
+ */
+export const Analytics: StoryFn<typeof meta> = () => {
+  const [checked, setChecked] = useState(true);
+
+  const handleCheckedChange = (details: ChatPermissionsItemCheckedChangeDetails) => {
+    setChecked(details.checked);
+  };
+
+  return (
+    <div className='flex h-[360px] w-[400px] items-end'>
+      <ChatPermissions data-testid='permissions'>
+        <ChatPermissionsTrigger data-analytics-id='CHAT_PERMISSIONS_OPEN' />
+        <ChatPermissionsContent>
+          <ChatPermissionsItem
+            name='search_attacks'
+            data-testid='permission-search_attacks'
+            data-analytics-id='CHAT_PERMISSION_TOGGLE'
+            data-analytics-props='{"tool":"search_attacks"}'
+            title='search_attacks'
+            description='Search detected attacks and incidents'
+            checked={checked}
+            onCheckedChange={handleCheckedChange}
+          />
+        </ChatPermissionsContent>
+      </ChatPermissions>
+    </div>
+  );
+};
+```

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

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,l,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,m=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))d.call(e,a)||a===n||s(e,a,{get:()=>t[a],enumerable:!(r=c(t,a))||r.enumerable});return e},f={},h={$dispatcherGuard:()=>N,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>E,clearRenderCounterRegistry:()=>P,renderCounterRegistry:()=>x,useRenderCounter:()=>D};for(var y in h)s(f,y,{get:h[y],enumerable:!0});e.exports=m(s({},"__esModule",{value:!0}),f);var _=(a=null!=(r=n("C"))?i(p(r)):{},m(r&&r.__esModule?a:s(a,"default",{value:r,enumerable:!0}),r)),{useRef:g,useEffect:S,isValidElement:w}=_,b=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="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]=v;return t[v]=!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 $=null;function C(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function N(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&($=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.");C(R)}else if(1===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&($=null),C(e)}else if(2===e)k.push(t),C($);else if(3===e){let e=k.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 O(e){for(let t=0;t<e.length;t++)e[t]=v}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function P(){for(let e of x.values())e.forEach(e=>{e.count=0})}function D(e){let t=g(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,r={count:0};null==(n=x.get(e))&&(n=new Set,x.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=x.get(e))&&r.delete(n))}})}var I=new Set;function T(e,t,n,r,a,o){function l(e,t,l,i){let s=`${r}:${o} [${a}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;I.has(s)||(I.add(s),console.error(s))}!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(w(t)||w(n))w(t)!==w(n)?l(`type ${w(t)?"React element":"object"}`,`type ${w(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:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:d,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:_,forwardRef:g,isValidElement:S,lazy:w,memo:b,startTransition:v,unstable_act:E,useCallback:R,useContext:$,useDebugValue:C,useDeferredValue:k,useEffect:N,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:P,useMemo:D,useReducer:I,useRef:T,useState:j,useSyncExternalStore:A,useTransition:W,version:z,use:L}=r;n.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:d,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:_,default:r,forwardRef:g,isValidElement:S,lazy:w,memo:b,startTransition:v,unstable_act:E,use:L,useCallback:R,useContext:$,useDebugValue:C,useDeferredValue:k,useEffect:N,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:P,useMemo:D,useReducer:I,useRef:T,useState:j,useSyncExternalStore:A,useTransition:W,version:z})}},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"),l=n("C");let i=window.WallarmDS.Separator,s=window.WallarmDS.ChatPermissions,c=window.WallarmDS.ChatPermissionsContent,u=window.WallarmDS.ChatPermissionsItem,p=window.WallarmDS.ChatPermissionsTrigger,d=[{name:"propose_add_to_denylist",description:"Suggest IPs to add to the denylist"},{name:"search_attacks",description:"Search detected attacks and incidents"},{name:"get_api_inventory",description:"Read the discovered API endpoints, their parameters, owners and risk scores"},{name:"create_rule",description:"Draft a mitigation rule for review"}],m={title:"AI/ChatPermissions",component:s,subcomponents:{ChatPermissionsTrigger:p,ChatPermissionsContent:c,ChatPermissionsItem:u},parameters:{layout:"centered",docs:{description:{component:"The settings button in the chat composer that lists which Wally tools may run without asking first in this conversation. Each row is a switch and takes effect the moment it is flipped — there is no Save, and the popover stays open so several tools can be changed in one go. The app owns the list and its order: enabled tools first, then a `Separator` and the disabled ones."}}}},f=[{name:"AllOn",story:()=>{let n,r,a,m,f,h,y,_,g,S,w,b,v=(0,o.c)(27);v[0]===Symbol.for("react.memo_cache_sentinel")?(n={propose_add_to_denylist:!0,search_attacks:!0,get_api_inventory:!0,create_rule:!0},v[0]=n):n=v[0];let[E,R]=(0,l.useState)(n);if(v[1]!==E){let t,n,o,l=d.filter(e=>E[e.name]),S=d.filter(e=>!E[e.name]);v[10]===Symbol.for("react.memo_cache_sentinel")?(t=e=>{let{checked:t,name:n}=e;R(e=>({...e,[n]:t}))},v[10]=t):t=v[10];let w=t;g="flex h-[360px] w-[400px] items-end",a=s,y="permissions",v[11]===Symbol.for("react.memo_cache_sentinel")?(_=e(p,{}),v[11]=_):_=v[11],r=c,v[12]===Symbol.for("react.memo_cache_sentinel")?(n=t=>e(u,{name:t.name,"data-testid":`permission-${t.name}`,title:t.name,description:t.description,checked:!0,onCheckedChange:w},t.name),v[12]=n):n=v[12],m=l.map(n),f=l.length>0&&S.length>0&&e(i,{spacing:4}),v[13]===Symbol.for("react.memo_cache_sentinel")?(o=t=>e(u,{name:t.name,"data-testid":`permission-${t.name}`,title:t.name,description:t.description,checked:!1,onCheckedChange:w},t.name),v[13]=o):o=v[13],h=S.map(o),v[1]=E,v[2]=r,v[3]=a,v[4]=m,v[5]=f,v[6]=h,v[7]=y,v[8]=_,v[9]=g}else r=v[2],a=v[3],m=v[4],f=v[5],h=v[6],y=v[7],_=v[8],g=v[9];return v[14]!==r||v[15]!==m||v[16]!==f||v[17]!==h?(S=t(r,{children:[m,f,h]}),v[14]=r,v[15]=m,v[16]=f,v[17]=h,v[18]=S):S=v[18],v[19]!==a||v[20]!==y||v[21]!==_||v[22]!==S?(w=t(a,{"data-testid":y,children:[_,S]}),v[19]=a,v[20]=y,v[21]=_,v[22]=S,v[23]=w):w=v[23],v[24]!==g||v[25]!==w?(b=e("div",{className:g,children:w}),v[24]=g,v[25]=w,v[26]=b):b=v[26],b},meta:m},{name:"SomeOff",story:()=>{let n,r,a,m,f,h,y,_,g,S,w,b,v=(0,o.c)(27);v[0]===Symbol.for("react.memo_cache_sentinel")?(n={propose_add_to_denylist:!0,search_attacks:!0,get_api_inventory:!1,create_rule:!1},v[0]=n):n=v[0];let[E,R]=(0,l.useState)(n);if(v[1]!==E){let t,n,o,l=d.filter(e=>E[e.name]),S=d.filter(e=>!E[e.name]);v[10]===Symbol.for("react.memo_cache_sentinel")?(t=e=>{let{checked:t,name:n}=e;R(e=>({...e,[n]:t}))},v[10]=t):t=v[10];let w=t;g="flex h-[360px] w-[400px] items-end",a=s,y="permissions",v[11]===Symbol.for("react.memo_cache_sentinel")?(_=e(p,{}),v[11]=_):_=v[11],r=c,v[12]===Symbol.for("react.memo_cache_sentinel")?(n=t=>e(u,{name:t.name,"data-testid":`permission-${t.name}`,title:t.name,description:t.description,checked:!0,onCheckedChange:w},t.name),v[12]=n):n=v[12],m=l.map(n),f=l.length>0&&S.length>0&&e(i,{spacing:4}),v[13]===Symbol.for("react.memo_cache_sentinel")?(o=t=>e(u,{name:t.name,"data-testid":`permission-${t.name}`,title:t.name,description:t.description,checked:!1,onCheckedChange:w},t.name),v[13]=o):o=v[13],h=S.map(o),v[1]=E,v[2]=r,v[3]=a,v[4]=m,v[5]=f,v[6]=h,v[7]=y,v[8]=_,v[9]=g}else r=v[2],a=v[3],m=v[4],f=v[5],h=v[6],y=v[7],_=v[8],g=v[9];return v[14]!==r||v[15]!==m||v[16]!==f||v[17]!==h?(S=t(r,{children:[m,f,h]}),v[14]=r,v[15]=m,v[16]=f,v[17]=h,v[18]=S):S=v[18],v[19]!==a||v[20]!==y||v[21]!==_||v[22]!==S?(w=t(a,{"data-testid":y,children:[_,S]}),v[19]=a,v[20]=y,v[21]=_,v[22]=S,v[23]=w):w=v[23],v[24]!==g||v[25]!==w?(b=e("div",{className:g,children:w}),v[24]=g,v[25]=w,v[26]=b):b=v[26],b},meta:m},{name:"Analytics",story:()=>{let n,r,a,i=(0,o.c)(4),[d,m]=(0,l.useState)(!0);i[0]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{m(e.checked)},i[0]=n):n=i[0];let f=n;return i[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(p,{"data-analytics-id":"CHAT_PERMISSIONS_OPEN"}),i[1]=r):r=i[1],i[2]!==d?(a=e("div",{className:"flex h-[360px] w-[400px] items-end",children:t(s,{"data-testid":"permissions",children:[r,e(c,{children:e(u,{name:"search_attacks","data-testid":"permission-search_attacks","data-analytics-id":"CHAT_PERMISSION_TOGGLE","data-analytics-props":'{"tool":"search_attacks"}',title:"search_attacks",description:"Search detected attacks and incidents",checked:d,onCheckedChange:f})})]})}),i[2]=d,i[3]=a):a=i[3],a},meta:m}];function h({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=()=>l.default.createElement(a,r),i={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,i)}return l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>l.default.createElement(h,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,367 @@
+Collects any number of choices from a limited set, or turns a single option on or off — reach for `Radio` when only one choice is allowed, and `Switch` when the change takes effect immediately instead of on submit. Past roughly ten options, a `Select` reads better than a long column of boxes.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `html-for` | `string \| undefined` | no | — |  |
+| `id` | `string` | no | — | The unique identifier of the machine. |
+| `form` | `string \| undefined` | no | — | The id of the form that the checkbox belongs to. |
+| `default-checked` | `CheckedState \| undefined` | no | — | The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox. |
+| `disabled` | `boolean \| undefined` | no | — | Whether the checkbox is disabled |
+| `name` | `string \| undefined` | no | — | The name of the input field in a checkbox. Useful for form submission. |
+| `value` | `string \| undefined` | no | — | The value of checkbox input. Useful for form submission. |
+| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the checkbox. Useful for composition. |
+| `read-only` | `boolean \| undefined` | no | — | Whether the checkbox is read-only |
+| `required` | `boolean \| undefined` | no | — | Whether the checkbox is required |
+| `on-checked-change` | `complex` | no | — | The callback invoked when the checked state changes. |
+| `invalid` | `boolean \| undefined` | no | — | Whether the checkbox is invalid |
+| `checked` | `CheckedState \| undefined` | no | — | The controlled checked state of the checkbox |
+| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.CheckboxDescription` — `CheckboxDescriptionProps` in the declaration bundle.
+- `WallarmDS.CheckboxGroup` — `CheckboxGroupProps` in the declaration bundle.
+- `WallarmDS.CheckboxLabel` — `CheckboxLabelProps` in the declaration bundle.
+- `WallarmDS.CheckboxIndicator` — `CheckboxIndicatorProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The smallest useful composition — `CheckboxIndicator` plus `CheckboxLabel`. Keep labels to a few
+words in sentence case, and reword rather than truncate.
+
+Source: Checkbox/Checkbox.stories.tsx#Basic
+
+### Checked
+
+The checked state. Pass `checked` to drive it from your own state, or `defaultChecked` to let the checkbox keep track of it.
+
+Source: Checkbox/Checkbox.stories.tsx#Checked
+
+### Indeterminate
+
+`checked='indeterminate'` is for a parent whose children are only partly selected. Set it
+deliberately — a click never produces it — and clear it once every child is checked or unchecked.
+
+Source: Checkbox/Checkbox.stories.tsx#Indeterminate
+
+### Disabled
+
+All three states while disabled, so you can see that the indicator stays readable when the option cannot be changed.
+
+Source: Checkbox/Checkbox.stories.tsx#Disabled
+
+### WithDescription
+
+`CheckboxDescription` adds a second line under the label, and switches the row to a grid so that text lines up with the label rather than the box.
+
+Source: Checkbox/Checkbox.stories.tsx#WithDescription
+
+### Group
+
+`CheckboxGroup` ties several checkboxes to one `name` and one array of values, and owns the spacing
+between them. Every box stays independent: ticking one must never move another, unless it is a
+parent selecting all of its children.
+
+Source: Checkbox/Checkbox.stories.tsx#Group
+
+### Card
+
+`variant='card'` gives every option its own bordered surface. Cards exist to carry a description —
+that is what the extra room is for, and a card holding a bare label wastes it. Plain rows read
+better for short lists of short labels.
+
+Source: Checkbox/Checkbox.stories.tsx#Card
+
+### FormField
+
+Wrapped in `Field`, so the label and description above the options come from `FieldLabel` and `FieldDescription`. Shown as plain rows and as cards.
+
+Source: Checkbox/Checkbox.stories.tsx#FormField
+
+## Story sources
+
+### Checkbox/Checkbox.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Info } from '../../icons';
+import { Field, FieldDescription, FieldLabel } from '../Field';
+import { HStack, VStack } from '../Stack';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import { Checkbox } from './Checkbox';
+import { CheckboxDescription } from './CheckboxDescription';
+import { CheckboxGroup } from './CheckboxGroup';
+import { CheckboxIndicator } from './CheckboxIndicator';
+import { CheckboxLabel } from './CheckboxLabel';
+
+const DESCRIPTION = [
+  'Collects any number of choices from a limited set, or turns a single option on or off — reach for `Radio` when only one choice is allowed, and `Switch` when the change takes effect immediately instead of on submit.',
+  'Past roughly ten options, a `Select` reads better than a long column of boxes.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/Checkbox',
+  component: Checkbox,
+  subcomponents: {
+    CheckboxGroup,
+    CheckboxIndicator,
+    CheckboxLabel,
+    CheckboxDescription,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+/**
+ * The smallest useful composition — `CheckboxIndicator` plus `CheckboxLabel`. Keep labels to a few
+ * words in sentence case, and reword rather than truncate.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <Checkbox data-testid='checkbox'>
+    <CheckboxIndicator />
+    <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+  </Checkbox>
+);
+
+/** The checked state. Pass `checked` to drive it from your own state, or `defaultChecked` to let the checkbox keep track of it. */
+export const Checked: StoryFn<typeof meta> = () => (
+  <Checkbox checked>
+    <CheckboxIndicator />
+    <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+  </Checkbox>
+);
+
+/**
+ * `checked='indeterminate'` is for a parent whose children are only partly selected. Set it
+ * deliberately — a click never produces it — and clear it once every child is checked or unchecked.
+ */
+export const Indeterminate: StoryFn<typeof meta> = () => (
+  <Checkbox checked='indeterminate'>
+    <CheckboxIndicator />
+    <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+  </Checkbox>
+);
+
+/** All three states while disabled, so you can see that the indicator stays readable when the option cannot be changed. */
+export const Disabled: StoryFn<typeof meta> = () => (
+  <VStack>
+    <Checkbox disabled>
+      <CheckboxIndicator />
+      <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+    </Checkbox>
+
+    <Checkbox checked disabled>
+      <CheckboxIndicator />
+      <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+    </Checkbox>
+
+    <Checkbox checked='indeterminate' disabled>
+      <CheckboxIndicator />
+      <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
+    </Checkbox>
+  </VStack>
+);
+
+/** `CheckboxDescription` adds a second line under the label, and switches the row to a grid so that text lines up with the label rather than the box. */
+export const WithDescription: StoryFn<typeof meta> = () => (
+  <Checkbox>
+    <CheckboxIndicator />
+    <CheckboxLabel>
+      Accept terms and conditions
+      <Tooltip>
+        <TooltipTrigger>
+          <Info />
+        </TooltipTrigger>
+        <TooltipContent>Additional information</TooltipContent>
+      </Tooltip>
+    </CheckboxLabel>
+    <CheckboxDescription>
+      By clicking this checkbox, you agree to the terms and conditions.
+    </CheckboxDescription>
+  </Checkbox>
+);
+
+/**
+ * `CheckboxGroup` ties several checkboxes to one `name` and one array of values, and owns the spacing
+ * between them. Every box stays independent: ticking one must never move another, unless it is a
+ * parent selecting all of its children.
+ */
+export const Group: StoryFn<typeof meta> = () => (
+  <CheckboxGroup name='framework' defaultValue={['vue']}>
+    <Checkbox value='react'>
+      <CheckboxIndicator />
+      <CheckboxLabel>React</CheckboxLabel>
+    </Checkbox>
+
+    <Checkbox value='solid'>
+      <CheckboxIndicator />
+      <CheckboxLabel>Solid</CheckboxLabel>
+    </Checkbox>
+
+    <Checkbox value='vue'>
+      <CheckboxIndicator />
+      <CheckboxLabel>Vue</CheckboxLabel>
+    </Checkbox>
+
+    <Checkbox value='svelte'>
+      <CheckboxIndicator />
+      <CheckboxLabel>Svelte</CheckboxLabel>
+    </Checkbox>
+  </CheckboxGroup>
+);
+
+/**
+ * `variant='card'` gives every option its own bordered surface. Cards exist to carry a description —
+ * that is what the extra room is for, and a card holding a bare label wastes it. Plain rows read
+ * better for short lists of short labels.
+ */
+export const Card: StoryFn<typeof meta> = () => (
+  <CheckboxGroup variant='card' name='framework' defaultValue={['vue', 'angular']}>
+    <Checkbox value='react'>
+      <CheckboxIndicator />
+      <CheckboxLabel>React</CheckboxLabel>
+      <CheckboxDescription>
+        By clicking this checkbox, you agree to the terms and conditions.
+      </CheckboxDescription>
+    </Checkbox>
+
+    <Checkbox value='solid'>
+      <CheckboxIndicator />
+      <CheckboxLabel>
+        Solid
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </CheckboxLabel>
+      <CheckboxDescription>
+        By clicking this checkbox, you agree to the terms and conditions.
+      </CheckboxDescription>
+    </Checkbox>
+
+    <Checkbox value='vue'>
+      <CheckboxIndicator />
+      <CheckboxLabel>Vue</CheckboxLabel>
+      <CheckboxDescription>
+        By clicking this checkbox, you agree to the terms and conditions.
+      </CheckboxDescription>
+    </Checkbox>
+
+    <Checkbox value='svelte' disabled>
+      <CheckboxIndicator />
+      <CheckboxLabel>Svelte</CheckboxLabel>
+      <CheckboxDescription>
+        By clicking this checkbox, you agree to the terms and conditions.
+      </CheckboxDescription>
+    </Checkbox>
+
+    <Checkbox value='angular' disabled>
+      <CheckboxIndicator />
+      <CheckboxLabel>Angular</CheckboxLabel>
+      <CheckboxDescription>
+        By clicking this checkbox, you agree to the terms and conditions.
+      </CheckboxDescription>
+    </Checkbox>
+  </CheckboxGroup>
+);
+
+/** Wrapped in `Field`, so the label and description above the options come from `FieldLabel` and `FieldDescription`. Shown as plain rows and as cards. */
+export const FormField: StoryFn<typeof meta> = () => (
+  <HStack align='start' gap={40}>
+    <Field>
+      <FieldLabel>
+        Label{' '}
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </FieldLabel>
+
+      <FieldDescription>This is an input description.</FieldDescription>
+
+      <CheckboxGroup name='framework' defaultValue={['vue']}>
+        <Checkbox value='react'>
+          <CheckboxIndicator />
+          <CheckboxLabel>React</CheckboxLabel>
+        </Checkbox>
+
+        <Checkbox value='solid'>
+          <CheckboxIndicator />
+          <CheckboxLabel>Solid</CheckboxLabel>
+        </Checkbox>
+
+        <Checkbox value='vue'>
+          <CheckboxIndicator />
+          <CheckboxLabel>Vue</CheckboxLabel>
+        </Checkbox>
+
+        <Checkbox value='svelte'>
+          <CheckboxIndicator />
+          <CheckboxLabel>Svelte</CheckboxLabel>
+        </Checkbox>
+      </CheckboxGroup>
+    </Field>
+
+    <Field>
+      <FieldLabel>
+        Label
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </FieldLabel>
+
+      <FieldDescription>This is an input description.</FieldDescription>
+
+      <CheckboxGroup variant='card' name='framework' defaultValue={['vue']}>
+        <Checkbox value='react'>
+          <CheckboxIndicator />
+          <CheckboxLabel>React</CheckboxLabel>
+        </Checkbox>
+
+        <Checkbox value='solid'>
+          <CheckboxIndicator />
+          <CheckboxLabel>Solid</CheckboxLabel>
+        </Checkbox>
+
+        <Checkbox value='vue'>
+          <CheckboxIndicator />
+          <CheckboxLabel>Vue</CheckboxLabel>
+        </Checkbox>
+
+        <Checkbox value='svelte'>
+          <CheckboxIndicator />
+          <CheckboxLabel>Svelte</CheckboxLabel>
+        </Checkbox>
+      </CheckboxGroup>
+    </Field>
+  </HStack>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs" 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>