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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,a,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))m.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(r=s(t,l))||r.enumerable});return e},f={},p={$dispatcherGuard:()=>N,$makeReadOnly:()=>x,$reset:()=>D,$structuralCheck:()=>j,c:()=>R,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>O,useRenderCounter:()=>A};for(var y in p)i(f,y,{get:p[y],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),f);var _=(l=null!=(r=n("C"))?c(u(r)):{},h(r&&r.__esModule?l:i(l,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:S,isValidElement:v}=_,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"),R="function"==typeof(null==(a=_.__COMPILER_RUNTIME)?void 0:a.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},[])},k={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{k[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 $(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}k.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function N(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(E=t),t===k)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.");$(k)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(E=null),$(e)}else if(2===e)C.push(t),$(E);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let t=0;t<e.length;t++)e[t]=g}function x(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function M(){for(let e of O.values())e.forEach(e=>{e.count=0})}function A(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,r={count:0};null==(n=O.get(e))&&(n=new Set,O.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=O.get(e))&&r.delete(n))}})}var T=new Set;function j(e,t,n,r,l,o){function a(e,t,a,c){let i=`${r}:${o} [${l}] ${n}${a} changed from ${e} to ${t} at depth ${c}`;T.has(i)||(T.add(i),console.error(i))}!function e(t,n,r,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)a(`type ${typeof t}`,`type ${typeof n}`,r,l);else if("object"==typeof t){let o=Array.isArray(t),c=Array.isArray(n);if(null===t&&null!==n)a("null",`type ${typeof n}`,r,l);else if(null===n)a(`type ${typeof t}`,"null",r,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)a(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,l);else for(let[o,c]of t)n.has(o)?e(c,n.get(o),`${r}.get(${o})`,l+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,r,l);else a("Map instance","other value",r,l);else if(n instanceof Map)a("other value","Map instance",r,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)a(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,l);else for(let e of n)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,r,l);else a("Set instance","other value",r,l);else if(n instanceof Set)a("other value","Set instance",r,l);else if(o||c)if(o!==c)a(`type ${o?"array":"object"}`,`type ${c?"array":"object"}`,r,l);else if(t.length!==n.length)a(`array with length ${t.length}`,`array with length ${n.length}`,r,l);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${r}[${o}]`,l+1);else if(v(t)||v(n))v(t)!==v(n)?a(`type ${v(t)?"React element":"object"}`,`type ${v(n)?"React element":"object"}`,r,l):t.type!==n.type?a(`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||a(`object without key ${e}`,`object with key ${e}`,r,l);for(let o in t)o in n?e(t[o],n[o],`${r}.${o}`,l+1):a(`object with key ${o}`,`object without key ${o}`,r,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,l):t!==n&&a(t,n,r,l)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,l=new WeakMap;function o(e,t,n){let o=t,a=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!=a.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=l}if("string"==typeof o&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof o&&null!=a.ref&&(o=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 o=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 o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:a}}function a(e){let t=(t,n,r)=>{let l=o(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=o(e,t,n??{}),{children:a,...c}=l.props;return e.createElement(l.type,void 0===r?c:{...c,key:r},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,n,...r)=>{let l=o(e,t,n??{});return e.createElement(l.type,l.props,...r)},cloneElement:(t,n,...r)=>{let l=e.cloneElement(t,n??void 0,...r),a=l.ref,c=o(e,l.type,{...l.props,ref:a});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}n.d(t,{MA:()=>a,YJ:()=>c})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:l,Component:o,Fragment:a,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:_,forwardRef:b,isValidElement:S,lazy:v,memo:w,startTransition:g,unstable_act:R,useCallback:k,useContext:E,useDebugValue:$,useDeferredValue:C,useEffect:N,useId:D,useImperativeHandle:x,useInsertionEffect:O,useLayoutEffect:M,useMemo:A,useReducer:T,useRef:j,useState:I,useSyncExternalStore:W,useTransition:P,version:L,use:V}=r;n.d(t,{},{Children:l,Component:o,Fragment:a,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:_,default:r,forwardRef:b,isValidElement:S,lazy:v,memo:w,startTransition:g,unstable_act:R,use:V,useCallback:k,useContext:E,useDebugValue:$,useDeferredValue:C,useEffect:N,useId:D,useImperativeHandle:x,useInsertionEffect:O,useLayoutEffect:M,useMemo:A,useReducer:T,useRef:j,useState:I,useSyncExternalStore:W,useTransition:P,version:L})}},t={};function n(r){var l=t[r];if(void 0!==l)return l.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.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 o=n("vD");let a=window.WallarmDS.Icons.Info,c=window.WallarmDS.Field,i=window.WallarmDS.FieldDescription,s=window.WallarmDS.FieldLabel,d=window.WallarmDS.HStack,u=window.WallarmDS.VStack,m=window.WallarmDS.Tooltip,h=window.WallarmDS.TooltipContent,f=window.WallarmDS.TooltipTrigger,p=window.WallarmDS.Checkbox,y=window.WallarmDS.CheckboxDescription,_=window.WallarmDS.CheckboxGroup,b=window.WallarmDS.CheckboxIndicator,S=window.WallarmDS.CheckboxLabel,v={title:"Inputs/Checkbox",component:p,subcomponents:{CheckboxGroup:_,CheckboxIndicator:b,CheckboxLabel:S,CheckboxDescription:y},parameters:{layout:"centered",docs:{description:{component:"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."}}}};var w=n("C");let g=[{name:"Basic",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{"data-testid":"checkbox",children:[e(b,{}),e(S,{children:"Accept terms and conditions"})]}),r[0]=n):n=r[0],n},meta:v},{name:"Checked",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{checked:!0,children:[e(b,{}),e(S,{children:"Accept terms and conditions"})]}),r[0]=n):n=r[0],n},meta:v},{name:"Indeterminate",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{checked:"indeterminate",children:[e(b,{}),e(S,{children:"Accept terms and conditions"})]}),r[0]=n):n=r[0],n},meta:v},{name:"Disabled",story:()=>{let n,r,l,a=(0,o.c)(3);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{disabled:!0,children:[e(b,{}),e(S,{children:"Accept terms and conditions"})]}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(p,{checked:!0,disabled:!0,children:[e(b,{}),e(S,{children:"Accept terms and conditions"})]}),a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(u,{children:[n,r,t(p,{checked:"indeterminate",disabled:!0,children:[e(b,{}),e(S,{children:"Accept terms and conditions"})]})]}),a[2]=l):l=a[2],l},meta:v},{name:"WithDescription",story:()=>{let n,r,l=(0,o.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(b,{}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(p,{children:[n,t(S,{children:["Accept terms and conditions",t(m,{children:[e(f,{children:e(a,{})}),e(h,{children:"Additional information"})]})]}),e(y,{children:"By clicking this checkbox, you agree to the terms and conditions."})]}),l[1]=r):r=l[1],r},meta:v},{name:"Group",story:()=>{let n,r,l,a,c,i=(0,o.c)(5);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=["vue"],i[0]=n):n=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(p,{value:"react",children:[e(b,{}),e(S,{children:"React"})]}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(p,{value:"solid",children:[e(b,{}),e(S,{children:"Solid"})]}),i[2]=l):l=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(p,{value:"vue",children:[e(b,{}),e(S,{children:"Vue"})]}),i[3]=a):a=i[3],i[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(_,{name:"framework",defaultValue:n,children:[r,l,a,t(p,{value:"svelte",children:[e(b,{}),e(S,{children:"Svelte"})]})]}),i[4]=c):c=i[4],c},meta:v},{name:"Card",story:()=>{let n,r,l,c,i,s,d,u=(0,o.c)(7);return u[0]===Symbol.for("react.memo_cache_sentinel")?(n=["vue","angular"],u[0]=n):n=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(p,{value:"react",children:[e(b,{}),e(S,{children:"React"}),e(y,{children:"By clicking this checkbox, you agree to the terms and conditions."})]}),u[1]=r):r=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(b,{}),u[2]=l):l=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(p,{value:"solid",children:[l,t(S,{children:["Solid",t(m,{children:[e(f,{children:e(a,{})}),e(h,{children:"Additional information"})]})]}),e(y,{children:"By clicking this checkbox, you agree to the terms and conditions."})]}),u[3]=c):c=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(p,{value:"vue",children:[e(b,{}),e(S,{children:"Vue"}),e(y,{children:"By clicking this checkbox, you agree to the terms and conditions."})]}),u[4]=i):i=u[4],u[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(p,{value:"svelte",disabled:!0,children:[e(b,{}),e(S,{children:"Svelte"}),e(y,{children:"By clicking this checkbox, you agree to the terms and conditions."})]}),u[5]=s):s=u[5],u[6]===Symbol.for("react.memo_cache_sentinel")?(d=t(_,{variant:"card",name:"framework",defaultValue:n,children:[r,c,i,s,t(p,{value:"angular",disabled:!0,children:[e(b,{}),e(S,{children:"Angular"}),e(y,{children:"By clicking this checkbox, you agree to the terms and conditions."})]})]}),u[6]=d):d=u[6],d},meta:v},{name:"FormField",story:()=>{let n,r,l,u,y,v,w,g,R,k,E,$,C,N,D=(0,o.c)(14);return D[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{children:["Label"," ",t(m,{children:[e(f,{children:e(a,{})}),e(h,{children:"Additional information"})]})]}),r=e(i,{children:"This is an input description."}),D[0]=n,D[1]=r):(n=D[0],r=D[1]),D[2]===Symbol.for("react.memo_cache_sentinel")?(l=["vue"],D[2]=l):l=D[2],D[3]===Symbol.for("react.memo_cache_sentinel")?(u=t(p,{value:"react",children:[e(b,{}),e(S,{children:"React"})]}),D[3]=u):u=D[3],D[4]===Symbol.for("react.memo_cache_sentinel")?(y=t(p,{value:"solid",children:[e(b,{}),e(S,{children:"Solid"})]}),D[4]=y):y=D[4],D[5]===Symbol.for("react.memo_cache_sentinel")?(v=t(p,{value:"vue",children:[e(b,{}),e(S,{children:"Vue"})]}),D[5]=v):v=D[5],D[6]===Symbol.for("react.memo_cache_sentinel")?(w=t(c,{children:[n,r,t(_,{name:"framework",defaultValue:l,children:[u,y,v,t(p,{value:"svelte",children:[e(b,{}),e(S,{children:"Svelte"})]})]})]}),D[6]=w):w=D[6],D[7]===Symbol.for("react.memo_cache_sentinel")?(g=t(s,{children:["Label",t(m,{children:[e(f,{children:e(a,{})}),e(h,{children:"Additional information"})]})]}),R=e(i,{children:"This is an input description."}),D[7]=g,D[8]=R):(g=D[7],R=D[8]),D[9]===Symbol.for("react.memo_cache_sentinel")?(k=["vue"],D[9]=k):k=D[9],D[10]===Symbol.for("react.memo_cache_sentinel")?(E=t(p,{value:"react",children:[e(b,{}),e(S,{children:"React"})]}),D[10]=E):E=D[10],D[11]===Symbol.for("react.memo_cache_sentinel")?($=t(p,{value:"solid",children:[e(b,{}),e(S,{children:"Solid"})]}),D[11]=$):$=D[11],D[12]===Symbol.for("react.memo_cache_sentinel")?(C=t(p,{value:"vue",children:[e(b,{}),e(S,{children:"Vue"})]}),D[12]=C):C=D[12],D[13]===Symbol.for("react.memo_cache_sentinel")?(N=t(d,{align:"start",gap:40,children:[w,t(c,{children:[g,R,t(_,{variant:"card",name:"framework",defaultValue:k,children:[E,$,C,t(p,{value:"svelte",children:[e(b,{}),e(S,{children:"Svelte"})]})]})]})]}),D[13]=N):N=D[13],N},meta:v}];function R({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,o=()=>w.default.createElement(l,r),a={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,a)}return w.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},w.default.createElement("h2",{className:"text-sm mb-12"},e.name),w.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(w.default.createElement(window.WallarmDS.Root,null,g.map((e,t)=>w.default.createElement(R,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,243 @@
+Geist Mono for code, identifiers and machine-readable values — anything read as literal rather than as prose. This ramp is for inline fragments; multi-line blocks are `CodeSnippet`, drawn with looser leading so stacked lines breathe.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `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 | — |  |
+| `color` | `"primary" \| "primary-alt" \| "secondary" \| "destructive"` | no | `primary` |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `size` | `"xs" \| "s" \| "m" \| "l"` | no | `l` |  |
+| `weight` | `"light" \| "regular" \| "medium" \| "bold"` | no | `regular` |  |
+| `truncate` | `boolean` | no | `false` |  |
+| `italic` | `boolean` | no | `false` |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `line-clamp` | `number \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+An inline fragment in running text. It keeps the surrounding line height, so a paragraph
+containing code does not open up.
+
+Source: Code/Code.stories.tsx#Basic
+
+### Sizes
+
+The ramp. Never add letter-spacing to it — monospace depends on a fixed character cell, and
+tracking breaks alignment in diffs, terminal output and anything measured in `ch`.
+
+Source: Code/Code.stories.tsx#Sizes
+
+### Weights
+
+Weight for emphasis within code, which buys less here than elsewhere: in a monospace run,
+bold is harder to spot than colour.
+
+Source: Code/Code.stories.tsx#Weights
+
+### Colors
+
+The same de-emphasis ladder as `Text`, for dimming part of an identifier rather than all of
+it.
+
+Source: Code/Code.stories.tsx#Colors
+
+### Multiline
+
+What happens when code wraps in this ramp — tight leading, because it is drawn for one line.
+Past a couple of lines, reach for `CodeSnippet`.
+
+Source: Code/Code.stories.tsx#Multiline
+
+### Italic
+
+`italic` is a modifier rather than a step, pairing with any size and weight. Conventionally
+it marks a placeholder the reader is meant to replace.
+
+Source: Code/Code.stories.tsx#Italic
+
+### AsChild
+
+`asChild` puts the monospace styling on your own element, for when the tag carries meaning
+the styling should not override.
+
+Source: Code/Code.stories.tsx#AsChild
+
+## Story sources
+
+### Code/Code.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { VStack } from '../Stack';
+import { Text } from '../Text';
+import { Code } from './Code';
+
+const DESCRIPTION = [
+  'Geist Mono for code, identifiers and machine-readable values — anything read as literal rather than as prose.',
+  'This ramp is for inline fragments; multi-line blocks are `CodeSnippet`, drawn with looser leading so stacked lines breathe.',
+].join(' ');
+
+const meta = {
+  title: 'Typography/Code',
+  component: Code,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  args: {},
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 's', 'm', 'l'],
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'regular', 'medium', 'bold'],
+    },
+    asChild: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Code>;
+
+export default meta;
+
+/**
+ * An inline fragment in running text. It keeps the surrounding line height, so a paragraph
+ * containing code does not open up.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => (
+  <Code {...args}>const example = 'code'</Code>
+);
+
+/** Size / leading in px, measured from the rendered component. */
+const SIZES = [
+  { size: 'xs', metrics: '10 / 12' },
+  { size: 's', metrics: '12 / 16' },
+  { size: 'm', metrics: '14 / 20' },
+  { size: 'l', metrics: '16 / 20' },
+] as const;
+
+/**
+ * The ramp. Never add letter-spacing to it — monospace depends on a fixed character cell, and
+ * tracking breaks alignment in diffs, terminal output and anything measured in `ch`.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack gap={24} align='start'>
+    {SIZES.map(({ size, metrics }) => (
+      <VStack key={size} gap={4} align='start'>
+        <Text size='xs' color='secondary'>
+          size=&apos;{size}&apos; · {metrics}
+        </Text>
+        <Code {...args} size={size}>
+          console.log('hello world');
+        </Code>
+      </VStack>
+    ))}
+  </VStack>
+);
+
+/**
+ * Weight for emphasis within code, which buys less here than elsewhere: in a monospace run,
+ * bold is harder to spot than colour.
+ */
+export const Weights: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Code {...args} size='m' weight='light'>
+      const light = 'Light weight code';
+    </Code>
+    <Code {...args} size='m' weight='regular'>
+      const regular = 'Regular weight code';
+    </Code>
+    <Code {...args} size='m' weight='medium'>
+      const medium = 'Medium weight code';
+    </Code>
+    <Code {...args} size='m' weight='bold'>
+      const bold = 'Bold weight code';
+    </Code>
+  </VStack>
+);
+
+/**
+ * The same de-emphasis ladder as `Text`, for dimming part of an identifier rather than all of
+ * it.
+ */
+export const Colors: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Code {...args} color='primary'>
+      const light = 'Primary color code';
+    </Code>
+    <Code {...args} color='secondary'>
+      const regular = 'Secondary color code';
+    </Code>
+  </VStack>
+);
+
+/**
+ * What happens when code wraps in this ramp — tight leading, because it is drawn for one line.
+ * Past a couple of lines, reach for `CodeSnippet`.
+ */
+export const Multiline: StoryFn<typeof meta> = ({ ...args }) => (
+  <Code {...args} size='m'>
+    {`function example() {
+  const message = 'Hello, World!';
+  console.log(message);
+  return message;
+}`}
+  </Code>
+);
+
+/**
+ * `italic` is a modifier rather than a step, pairing with any size and weight. Conventionally
+ * it marks a placeholder the reader is meant to replace.
+ */
+export const Italic: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Code {...args} size='s' italic>
+      {'// Italic small code comment'}
+    </Code>
+    <Code {...args} size='m' italic>
+      {'// Italic medium code comment'}
+    </Code>
+    <Code {...args} size='l' italic>
+      {'// Italic large code comment'}
+    </Code>
+    <Code {...args} size='s' weight='bold' italic>
+      {'// Bold italic small'}
+    </Code>
+    <Code {...args} size='m' weight='bold' italic>
+      {'// Bold italic medium'}
+    </Code>
+    <Code {...args} size='l' weight='bold' italic>
+      {'// Bold italic large'}
+    </Code>
+  </VStack>
+);
+
+/**
+ * `asChild` puts the monospace styling on your own element, for when the tag carries meaning
+ * the styling should not override.
+ */
+export const AsChild: StoryFn<typeof meta> = ({ ...args }) => (
+  <Code {...args} size='m' weight='medium' asChild>
+    <code>{'<CustomCodeElement />'}</code>
+  </Code>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var o,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))f.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>M,$makeReadOnly:()=>O,$reset:()=>z,$structuralCheck:()=>D,c:()=>v,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>k,useRenderCounter:()=>T};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(l=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:R,isValidElement:E}=g,b=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,$=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=$;return t[$]=!0,t},[])},_={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{_[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 S=null;function C(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function M(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(S=t),t===_)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(_)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(S=null),C(e)}else if(2===e)N.push(t),C(S);else if(3===e){let e=N.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 z(e){for(let t=0;t<e.length;t++)e[t]=$}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function x(){for(let e of k.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),R(()=>{if(null==t.current){let r,n={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=k.get(e))&&n.delete(r))}})}var j=new Set;function D(e,t,r,n,l,o){function a(e,t,a,i){let c=`${n}:${o} [${l}] ${r}${a} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,l);else if(null===r)a(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,l+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,n,l);else a("Map instance","other value",n,l);else if(r instanceof Map)a("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else a("Set instance","other value",n,l);else if(r instanceof Set)a("other value","Set instance",n,l);else if(o||i)if(o!==i)a(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,l+1);else if(E(t)||E(r))E(t)!==E(r)?a(`type ${E(t)?"React element":"object"}`,`type ${E(r)?"React element":"object"}`,n,l):t.type!==r.type?a(`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||a(`object without key ${e}`,`object with key ${e}`,n,l);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,l+1):a(`object with key ${o}`,`object without key ${o}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&a(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function o(e,t,r){let o=t,a=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!=a.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=l}if("string"==typeof o&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof o&&null!=a.ref&&(o=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 o=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 o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:a}}function a(e){let t=(t,r,n)=>{let l=o(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=o(e,t,r??{}),{children:a,...i}=l.props;return e.createElement(l.type,void 0===n?i:{...i,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let l=o(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),a=l.ref,i=o(e,l.type,{...l.props,ref:a});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:R,lazy:E,memo:b,startTransition:$,unstable_act:v,useCallback:_,useContext:S,useDebugValue:C,useDeferredValue:N,useEffect:M,useId:z,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:x,useMemo:T,useReducer:j,useRef:D,useState:I,useSyncExternalStore:A,useTransition:P,version:L,use:W}=n;r.d(t,{},{Children:l,Component:o,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:R,lazy:E,memo:b,startTransition:$,unstable_act:v,use:W,useCallback:_,useContext:S,useDebugValue:C,useDeferredValue:N,useEffect:M,useId:z,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:x,useMemo:T,useReducer:j,useRef:D,useState:I,useSyncExternalStore:A,useTransition:P,version:L})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.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 o=r("vD");let a=window.WallarmDS.VStack,i=window.WallarmDS.Text,c=window.WallarmDS.Code,s={title:"Typography/Code",component:c,parameters:{layout:"centered",docs:{description:{component:"Geist Mono for code, identifiers and machine-readable values — anything read as literal rather than as prose. This ramp is for inline fragments; multi-line blocks are `CodeSnippet`, drawn with looser leading so stacked lines breathe."}}},args:{},argTypes:{size:{control:"select",options:["xs","s","m","l"]},weight:{control:"select",options:["light","regular","medium","bold"]},asChild:{control:"boolean"}}},u=[{size:"xs",metrics:"10 / 12"},{size:"s",metrics:"12 / 16"},{size:"m",metrics:"14 / 20"},{size:"l",metrics:"16 / 20"}];var d=r("C");let f=[{name:"Basic",story:t=>{let r,n,l=(0,o.c)(4);return l[0]!==t?({...r}=t,l[0]=t,l[1]=r):r=l[1],l[2]!==r?(n=e(c,{...r,children:"const example = 'code'"}),l[2]=r,l[3]=n):n=l[3],n},meta:s},{name:"Sizes",story:r=>{let n,l,s,d=(0,o.c)(6);return d[0]!==r?({...n}=r,d[0]=r,d[1]=n):n=d[1],d[2]!==n?(l=u.map(r=>{let{size:l,metrics:o}=r;return t(a,{gap:4,align:"start",children:[t(i,{size:"xs",color:"secondary",children:["size='",l,"' · ",o]}),e(c,{...n,size:l,children:"console.log('hello world');"})]},l)}),d[2]=n,d[3]=l):l=d[3],d[4]!==l?(s=e(a,{gap:24,align:"start",children:l}),d[4]=l,d[5]=s):s=d[5],s},meta:s},{name:"Weights",story:r=>{let n,l,i=(0,o.c)(4);return i[0]!==r?({...n}=r,i[0]=r,i[1]=n):n=i[1],i[2]!==n?(l=t(a,{align:"start",children:[e(c,{...n,size:"m",weight:"light",children:"const light = 'Light weight code';"}),e(c,{...n,size:"m",weight:"regular",children:"const regular = 'Regular weight code';"}),e(c,{...n,size:"m",weight:"medium",children:"const medium = 'Medium weight code';"}),e(c,{...n,size:"m",weight:"bold",children:"const bold = 'Bold weight code';"})]}),i[2]=n,i[3]=l):l=i[3],l},meta:s},{name:"Colors",story:r=>{let n,l,i=(0,o.c)(4);return i[0]!==r?({...n}=r,i[0]=r,i[1]=n):n=i[1],i[2]!==n?(l=t(a,{align:"start",children:[e(c,{...n,color:"primary",children:"const light = 'Primary color code';"}),e(c,{...n,color:"secondary",children:"const regular = 'Secondary color code';"})]}),i[2]=n,i[3]=l):l=i[3],l},meta:s},{name:"Multiline",story:t=>{let r,n,l=(0,o.c)(4);return l[0]!==t?({...r}=t,l[0]=t,l[1]=r):r=l[1],l[2]!==r?(n=e(c,{...r,size:"m",children:"function example() {\n  const message = 'Hello, World!';\n  console.log(message);\n  return message;\n}"}),l[2]=r,l[3]=n):n=l[3],n},meta:s},{name:"Italic",story:r=>{let n,l,i=(0,o.c)(4);return i[0]!==r?({...n}=r,i[0]=r,i[1]=n):n=i[1],i[2]!==n?(l=t(a,{align:"start",children:[e(c,{...n,size:"s",italic:!0,children:"// Italic small code comment"}),e(c,{...n,size:"m",italic:!0,children:"// Italic medium code comment"}),e(c,{...n,size:"l",italic:!0,children:"// Italic large code comment"}),e(c,{...n,size:"s",weight:"bold",italic:!0,children:"// Bold italic small"}),e(c,{...n,size:"m",weight:"bold",italic:!0,children:"// Bold italic medium"}),e(c,{...n,size:"l",weight:"bold",italic:!0,children:"// Bold italic large"})]}),i[2]=n,i[3]=l):l=i[3],l},meta:s},{name:"AsChild",story:t=>{let r,n,l,a=(0,o.c)(5);return a[0]!==t?({...r}=t,a[0]=t,a[1]=r):r=a[1],a[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("code",{children:"<CustomCodeElement />"}),a[2]=n):n=a[2],a[3]!==r?(l=e(c,{...r,size:"m",weight:"medium",asChild:!0,children:n}),a[3]=r,a[4]=l):l=a[4],l},meta:s}];function p({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,o=()=>d.default.createElement(l,n),a={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,a)}return d.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},d.default.createElement("h2",{className:"text-sm mb-12"},e.name),d.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(d.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>d.default.createElement(p,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,280 @@
+An editable code surface that is visually the same component as `CodeSnippet` and reuses its header, tabs, actions and show-more — reach for `CodeSnippet` whenever the code is only read, since a page that never renders `CodeEditorContent` never loads the editor engine. Colours come from the same `CodeSnippetAdapterProvider` (plain text without one), so a read-only editor matches the snippet except for a native thin scrollbar, a caret and selection drawn by the editor, and an HTTP JSON body that stays coloured when `Content-Type` has parameters or the body has blank lines. The adapter re-tokenizes the whole document after each pause in typing, which stays within a frame up to about 2 000 lines with Prism; longer documents still edit smoothly, their colours just settle a moment later. Like the snippet, the editor sits inside a `display: contents` wrapper that keeps it mounted across fullscreen, so space editors with their own `className` (for example `mt-16`) or a `gap` on the parent — not `space-*`, `divide-*` or child selectors on the parent. `lines`, `folds`, `completions` and `schema` are compared by identity, so memoise them or hoist them to module constants — a new value on every render reconfigures the editor. Autocomplete suggests language keywords and words already in the document for every language; HTTP methods and headers and JSON Schema values have their own contextual suggestions. Pass `completions` to add application-specific results. Syntax errors are best-effort: JSON reports the `JSON.parse` message, JavaScript and TypeScript use Babel, Lua uses luaparse (first error only), YAML and Python use their Lezer parsers, which still flag a few valid Python forms such as `lambda a, /, b` and parenthesised `with` items. `lines` and `folds` stay on their line numbers while typing; to keep a decoration on a piece of text, recompute it from `value` (for example `useMemo(() => linesFor(value), [value])`, or a `folds` function such as `getHttpFolds`). The editor injects `<style>` tags, so under a strict Content Security Policy pass `cspNonce`. Tab indents, so keyboard users leave with Escape, then Tab, or press Ctrl+M (Alt+Shift+M on macOS) to switch Tab between indenting and moving focus — point `aria-describedby` at text holding `CODE_EDITOR_KEYBOARD_HINT` to tell screen-reader users.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `value` | `string \| undefined` | no | — | Controlled document |
+| `default-value` | `string \| undefined` | no | — | Uncontrolled initial document (controlled vs uncontrolled is locked on first render) |
+| `on-change` | `((value: string) => void) \| undefined` | no | — | Fired for user edits only, never for external `value` syncs |
+| `language` | `CodeEditorLanguage \| undefined` | no | — | Passed verbatim to the syntax adapter; selects the structural parser |
+| `document-id` | `string \| undefined` | no | — | Document identity: changing it swaps to that document's cached state (undo history, selection, folds). Requires a controlled `value`: when the id changes, `value` must already hold that document's text (an uncached id starts from `value`). In uncontrolled mode the new document would be seeded with the previous document's text. |
+| `read-only` | `boolean \| undefined` | no | — | Non-editable and unfocusable content; text remains selectable, searchable and copyable |
+| `starting-line-number` | `number \| undefined` | no | — | Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers |
+| `lines` | `Record<number, LineConfig> \| undefined` | no | — | Per-line configuration keyed by absolute line number (static, see spec D6). Compared by identity: memoise it (or hoist it to a constant) — a new object every render reconfigures the lines and gutters on every render. |
+| `folds` | `CodeEditorFolds \| undefined` | no | — | Fold regions, or a function re-run after edits; collapsed state is kept by `id`. Compared by identity: memoise the array or pass a stable function (e.g. `getHttpFolds`) — an inline array/arrow reconfigures folds on every render and bypasses the re-run debounce. |
+| `wrap-lines` | `boolean` | no | `false` | Controlled line wrapping |
+| `default-wrap-lines` | `boolean \| undefined` | no | — | Uncontrolled initial line wrapping |
+| `on-wrap-lines-change` | `((wrap: boolean) => void) \| undefined` | no | — | Fired when the wrap button toggles wrapping |
+| `max-lines` | `number \| undefined` | no | — | Height clamp in rows; auto-renders `CodeSnippetShowMoreButton` unless one is a direct child |
+| `original` | `string \| undefined` | no | — | Enables diff mode against this text |
+| `schema` | `JsonSchema \| undefined` | no | — | JSON Schema for the document (`json`) or the JSON body (`http`) |
+| `completions` | `CodeEditorCompletionSource[] \| undefined` | no | — | Consumer completion sources, added after the built-in ones. Compared by identity: a new array reconfigures autocomplete and closes an open list, so keep it stable (module constant or `useMemo`). |
+| `diagnostics` | `CodeEditorDiagnostic[] \| undefined` | no | — | External diagnostics, merged with syntax and schema ones |
+| `on-diagnostics-change` | `((diagnostics: CodeEditorDiagnostic[]) => void) \| undefined` | no | — | Fired when the merged diagnostics change |
+| `api-ref` | `Ref<CodeEditorApi> \| undefined` | no | — | Imperative handle |
+| `csp-nonce` | `string \| undefined` | no | — | Nonce for the style tags the editor injects |
+| `on-copy` | `((value: string) => void) \| undefined` | no | — | Fired by `CodeSnippetCopyButton` after a copy, with the current document |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `size` | `"sm" \| "md" \| "lg"` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.CodeEditorContent` — `CodeEditorContentProps` in the declaration bundle.
+- `WallarmDS.CodeEditorRoot` — `CodeEditorRootProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+A controlled editor: `value` plus `onChange`, like any input. With no adapter in scope the
+text is plain, exactly as `CodeSnippet` renders it without a provider.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Default
+
+### WithHeader
+
+The `CodeSnippet` header works unchanged: a title and the copy, wrap and fullscreen buttons.
+Copy puts the edited value on the clipboard, and fullscreen keeps the undo history.
+
+Source: CodeEditor/CodeEditor.stories.tsx#WithHeader
+
+### FloatingActions
+
+Without a header, `CodeSnippetActions` as a direct child floats over the top-right of the
+editor, as it does over a snippet.
+
+Source: CodeEditor/CodeEditor.stories.tsx#FloatingActions
+
+### LineNumbersAndStartingLine
+
+`lineNumbers` on `CodeEditorContent` is the equivalent of `CodeSnippetLineNumbers`, and
+`startingLineNumber` renumbers the gutter for a fragment taken from a longer file.
+
+Source: CodeEditor/CodeEditor.stories.tsx#LineNumbersAndStartingLine
+
+### LineColorsAndPrefixes
+
+`lines` uses the same `LineConfig` as CodeSnippet: seven semantic colours, text prefixes for a
+hand-made diff, and ReactNode prefixes such as a tooltipped icon. Lines are static and tied
+to line numbers, so they stay on their number while you type.
+
+Source: CodeEditor/CodeEditor.stories.tsx#LineColorsAndPrefixes
+
+### Ranges
+
+`ranges` colours character offsets inside a line (start inclusive, end exclusive). The line
+keeps its background, and only the range gets the colour.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Ranges
+
+### HttpRequestWithPrism
+
+`language='http'` under Prism. The colours come from the adapter and the structure (start
+line, headers, JSON body) comes from the editor's own HTTP grammar.
+
+Source: CodeEditor/CodeEditor.stories.tsx#HttpRequestWithPrism
+
+### HttpResponseWithShiki
+
+The response side under Shiki. After an edit, highlighting is repainted in the background,
+so for a moment you may see the previous colours mapped through your change.
+
+Source: CodeEditor/CodeEditor.stories.tsx#HttpResponseWithShiki
+
+### HttpFolds
+
+`folds` as a function of the value: `getHttpFolds` runs again after edits, so adding a header
+grows the headers fold. Collapsed state is kept by fold `id`. The second editor starts at
+line 100, and the fold function gets the same offset.
+
+Source: CodeEditor/CodeEditor.stories.tsx#HttpFolds
+
+### ShowMore
+
+`maxLines` limits the height, and the editor scrolls inside it (no rows are removed). The
+button appears on its own when at least three lines are hidden. Render
+`CodeSnippetShowMoreButton` yourself only to pass props to the real button.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ShowMore
+
+### Wrap
+
+Wrapping can be uncontrolled (`defaultWrapLines`, driven by the wrap button) or controlled
+(`wrapLines` plus `onWrapLinesChange`). Colour sticks and prefixes stay on the first visual row.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Wrap
+
+### Sizes
+
+The same three sizes as CodeSnippet: `sm` (12px, default), `md` (14px) and `lg` (16px), each
+on 20px rows.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Sizes
+
+### ReadOnly
+
+`readOnly` lets you select, search and copy without focusing the code or showing a caret. Use it when the value
+can change elsewhere but not here. If it never changes, use `CodeSnippet`.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ReadOnly
+
+### Tabs
+
+Tabs swap `value`, and `documentId` swaps the editor's whole state with it, so each tab keeps
+its own undo history, selection and collapsed folds.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Tabs
+
+### ParityDefault
+
+Parity check: the same code and props in CodeSnippet and in a read-only CodeEditor should look
+identical. Accepted differences: a native thin scrollbar, and CodeMirror's caret and selection
+layer (shown only while focused).
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityDefault
+
+### ParityLineColors
+
+Parity check with line colours, text prefixes and a tooltipped icon prefix: same stick, same
+tint, same prefix column.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityLineColors
+
+### ParityFoldsCollapsed
+
+Parity check with the headers fold collapsed: same chevrons and the same summary row in place
+of the hidden lines.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityFoldsCollapsed
+
+### ParityHttpPrism
+
+Parity check for an HTTP request with a JSON body, both under the same Prism provider: token
+colours come from the same adapter.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityHttpPrism
+
+### ParityRanges
+
+Parity check for `ranges`: the same bold, coloured spans inside the same tinted lines.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityRanges
+
+### ParityWrap
+
+Parity check for wrapped lines: long lines break at the same points and line numbers stay on
+the first row of each wrapped line.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityWrap
+
+### ParitySizes
+
+Parity check for the three sizes: the same font size, line height and gutter padding per size.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParitySizes
+
+### ParityFrame
+
+Parity check for the shared frame: a header with tabs and actions, and floating actions
+without a header, sit in the same place with the same spacing.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityFrame
+
+### ParityShowMore
+
+Parity check for `maxLines`: the same clamped height and the same "Show N more lines" button.
+
+Source: CodeEditor/CodeEditor.stories.tsx#ParityShowMore
+
+### Languages
+
+Colours come from the adapter (Shiki here); JavaScript, TypeScript, Python and Lua parsers load
+on first use.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Languages
+
+### SyntaxErrors
+
+Syntax errors for every language with a structure parser: JSON and an HTTP JSON body use the
+precise `JSON.parse` message, JavaScript and TypeScript use Babel, Lua uses luaparse (first error only), YAML and Python report
+Lezer error nodes. Hover an underline to read the message; the count below each editor comes from
+`onDiagnosticsChange`. Bash and plain text have no syntax diagnostics.
+
+Source: CodeEditor/CodeEditor.stories.tsx#SyntaxErrors
+
+### Diff
+
+`original` turns on diff mode: added and changed lines read as `success` lines with a `+`,
+removed lines as `danger` rows with a `-` and no line number. The rows stay editable, and the
+diff updates as you type.
+
+Source: CodeEditor/CodeEditor.stories.tsx#Diff
+
+### DiffWrapLines
+
+With wrapping on, a removed line longer than the frame wraps inside its `danger` row and its
+`-` marker stays on the first visual row, beside where the line starts.
+
+Source: CodeEditor/CodeEditor.stories.tsx#DiffWrapLines
+
+### AnalyticsAttributes
+
+Where analytics attributes land. `data-*` / `aria-*` / `id` on `CodeEditorContent`
+reach the typing surface (`role="textbox"`), chrome buttons take them directly, and
+fold buttons take them through `toggleProps` / `summaryProps`. Popups drawn by the
+editor (autocomplete, tooltips, search panel) are not attributable — see
+`CodeEditor/ANALYTICS_GAPS.md`.
+
+Source: CodeEditor/CodeEditor.stories.tsx#AnalyticsAttributes
+
+### EditingWorkflow
+
+A controlled HTTP request with header and body folds and a JSON Schema on the body —
+`retries` breaks the schema's maximum on purpose, so the underline and its hover message
+are part of the example. The editor's description points at `CODE_EDITOR_KEYBOARD_HINT`.
+
+Source: CodeEditor/CodeEditor.stories.tsx#EditingWorkflow
+
+### TabsKeepHistory
+
+Each tab passes its own `documentId`, so switching swaps in that document's undo history,
+selection and collapsed folds instead of replacing the text of one shared document.
+
+Source: CodeEditor/CodeEditor.stories.tsx#TabsKeepHistory
+
+### LongDocument
+
+2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is
+built for, where `readOnly` still lets the text be selected, searched and copied.
+
+Source: CodeEditor/CodeEditor.stories.tsx#LongDocument
+
+### FullscreenInsideDrawer
+
+Fullscreen opened from a modal `Drawer` stacks above it: the editor and its buttons take
+pointer and keyboard input, and Escape leaves fullscreen while the drawer stays open.
+
+Source: CodeEditor/CodeEditor.stories.tsx#FullscreenInsideDrawer
+
+## Story sources
+
+The story files and their local imports are in [stories.md](./stories.md), verbatim.

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

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