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

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

@@ -0,0 +1,226 @@
+Shows one country from its ISO 3166-1 alpha-2 code — `CountryFlag`, `CountryName`, or both — and only ever a country: a flag names a place, not a language. Compose the name next to the flag wherever the reader could be in any doubt, and expect an unrecognised code to drop the flag and print the code itself.
+
+## 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-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 | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `size` | `"small" \| "medium"` | no | `small` |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `code` | `"AF" \| "AX" \| "AL" \| "DZ" \| "AS" \| "AD" \| "AO" \| "AI" \| "AG" \| "AR" \| "AM" \| "AW" \| "AU" \| "AT" \| "AZ" \| "BS" \| "BH" \| "BD" \| "BB" \| "BY" \| "BE" \| "BZ" \| "BJ" \| "BM" \| "BT" \| "BO" \| "BQ" \| "BA" \| "BW" \| "BV" \| "BR" \| "IO" \| "BN" \| "BG" \| "BF" \| "BI" \| "CV" \| "KH" \| "CM" \| "CA" \| "KY" \| "CF" \| "TD" \| "CL" \| "CN" \| "CX" \| "CC" \| "CO" \| "KM" \| "CG" \| "CD" \| "CK" \| "CR" \| "CI" \| "HR" \| "CU" \| "CW" \| "CY" \| "CZ" \| "DK" \| "DJ" \| "DM" \| "DO" \| "DNO" \| "EC" \| "EG" \| "SV" \| "GQ" \| "ER" \| "EE" \| "ET" \| "FK" \| "FO" \| "FJ" \| "FI" \| "FR" \| "GF" \| "PF" \| "TF" \| "GA" \| "GM" \| "GE" \| "DE" \| "GH" \| "GI" \| "GR" \| "GL" \| "GD" \| "GP" \| "GU" \| "GT" \| "GG" \| "GN" \| "GW" \| "GY" \| "HT" \| "HM" \| "VA" \| "HN" \| "HK" \| "HU" \| "IS" \| "IN" \| "ID" \| "IR" \| "IQ" \| "IE" \| "IM" \| "IL" \| "IT" \| "JM" \| "JP" \| "JE" \| "JO" \| "KZ" \| "KE" \| "KI" \| "KP" \| "KR" \| "KW" \| "KG" \| "LA" \| "LV" \| "LB" \| "LS" \| "LR" \| "LY" \| "LI" \| "LT" \| "LHO" \| "LU" \| "MO" \| "MK" \| "MG" \| "MW" \| "MY" \| "MV" \| "ML" \| "MT" \| "MH" \| "MQ" \| "MR" \| "MU" \| "YT" \| "MX" \| "FM" \| "MD" \| "MC" \| "MN" \| "ME" \| "MS" \| "MA" \| "MZ" \| "MM" \| "NA" \| "NR" \| "NP" \| "NL" \| "NC" \| "NZ" \| "NI" \| "NE" \| "NG" \| "NU" \| "NF" \| "MP" \| "NO" \| "OM" \| "PK" \| "PW" \| "PS" \| "PA" \| "PG" \| "PY" \| "PE" \| "PH" \| "PN" \| "PL" \| "PT" \| "PR" \| "QA" \| "ROC" \| "RE" \| "RO" \| "RU" \| "RW" \| "BL" \| "SH" \| "KN" \| "LC" \| "MF" \| "PM" \| "VC" \| "WS" \| "SM" \| "ST" \| "SA" \| "SN" \| "RS" \| "SC" \| "SL" \| "SG" \| "SX" \| "SK" \| "SI" \| "SB" \| "SO" \| "ZA" \| "GS" \| "SS" \| "ES" \| "LK" \| "SD" \| "SR" \| "SJ" \| "SZ" \| "SE" \| "CH" \| "SY" \| "TW" \| "TJ" \| "TZ" \| "TH" \| "TL" \| "TG" \| "TK" \| "TO" \| "TT" \| "TN" \| "TR" \| "TM" \| "TC" \| "TV" \| "UG" \| "UA" \| "AE" \| "GB" \| "US" \| "UY" \| "UZ" \| "VU" \| "VE" \| "VN" \| "VG" \| "VI" \| "WF" \| "EH" \| "YE" \| "ZM" \| "ZW"` | yes | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.CountryFlag` — `CountryFlagProps` in the declaration bundle.
+- `WallarmDS.CountryName` — `CountryNameProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Flag then name — the composition to reach for by default. `code` sits on the root and
+reaches both children through context.
+
+Source: Country/Country.stories.tsx#Basic
+
+### Sizes
+
+`small` is the default: a 16px flag against `xs` type, where `medium` takes both a
+step up to 20px and `sm`.
+
+Source: Country/Country.stories.tsx#Sizes
+
+### FlagOnly
+
+The flag on its own, for a cell whose column heading already says these are countries —
+anywhere else, the reader is guessing.
+
+Source: Country/Country.stories.tsx#FlagOnly
+
+### NameOnly
+
+The name on its own, for a list being read rather than scanned, where a column of flags
+would only add colour.
+
+Source: Country/Country.stories.tsx#NameOnly
+
+### Examples
+
+Ten countries together, which is really a check on consistency: every flag is cropped to
+the same circle, so wide and tall designs still line up down the column.
+
+Source: Country/Country.stories.tsx#Examples
+
+## Story sources
+
+### Country/Country.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { Country } from './Country';
+import { CountryFlag } from './CountryFlag';
+import { CountryName } from './CountryName';
+
+const DESCRIPTION = [
+  'Shows one country from its ISO 3166-1 alpha-2 code — `CountryFlag`, `CountryName`, or both — and only ever a country: a flag names a place, not a language.',
+  'Compose the name next to the flag wherever the reader could be in any doubt, and expect an unrecognised code to drop the flag and print the code itself.',
+].join(' ');
+
+const meta: Meta<typeof Country> = {
+  title: 'Data Display/Country',
+  component: Country,
+  subcomponents: {
+    CountryFlag,
+    CountryName,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  args: {
+    code: 'US',
+    size: 'medium',
+  },
+  argTypes: {
+    code: {
+      control: 'text',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * Flag then name — the composition to reach for by default. `code` sits on the root and
+ * reaches both children through context.
+ */
+export const Basic: StoryFn<typeof Country> = args => (
+  <Country code={args.code} size={args.size}>
+    <CountryFlag />
+    <CountryName />
+  </Country>
+);
+
+/**
+ * `small` is the default: a 16px flag against `xs` type, where `medium` takes both a
+ * step up to 20px and `sm`.
+ */
+export const Sizes: StoryFn<typeof Country> = () => (
+  <HStack align='center' gap={16}>
+    <Country code='US' size='small'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='US' size='medium'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+  </HStack>
+);
+
+/**
+ * The flag on its own, for a cell whose column heading already says these are countries —
+ * anywhere else, the reader is guessing.
+ */
+export const FlagOnly: StoryFn<typeof Country> = () => (
+  <HStack gap={8}>
+    <Country code='US'>
+      <CountryFlag />
+    </Country>
+    <Country code='GB'>
+      <CountryFlag />
+    </Country>
+    <Country code='DE'>
+      <CountryFlag />
+    </Country>
+    <Country code='FR'>
+      <CountryFlag />
+    </Country>
+    <Country code='JP'>
+      <CountryFlag />
+    </Country>
+  </HStack>
+);
+
+/**
+ * The name on its own, for a list being read rather than scanned, where a column of flags
+ * would only add colour.
+ */
+export const NameOnly: StoryFn<typeof Country> = () => (
+  <VStack gap={4}>
+    <Country code='US'>
+      <CountryName />
+    </Country>
+    <Country code='GB'>
+      <CountryName />
+    </Country>
+    <Country code='DE'>
+      <CountryName />
+    </Country>
+  </VStack>
+);
+
+/**
+ * Ten countries together, which is really a check on consistency: every flag is cropped to
+ * the same circle, so wide and tall designs still line up down the column.
+ */
+export const Examples: StoryFn<typeof Country> = () => (
+  <VStack gap={8}>
+    <Country code='US'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='GB'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='DE'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='FR'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='JP'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='RU'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='CN'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='BR'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='AU'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+    <Country code='CA'>
+      <CountryFlag />
+      <CountryName />
+    </Country>
+  </VStack>
+);
+```

package/dist/project/components/Country/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>

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,o;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,l,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))m.call(e,o)||o===r||i(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},p={},y={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>M,$structuralCheck:()=>T,c:()=>E,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var h in y)i(p,h,{get:y[h],enumerable:!0});e.exports=d(i({},"__esModule",{value:!0}),p);var _=(o=null!=(n=r("C"))?c(f(n)):{},d(n&&n.__esModule?o:i(o,"default",{value:n,enumerable:!0}),n)),{useRef:S,useEffect:b,isValidElement:g}=_,R=null!=(a=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=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 r=0;r<e;r++)t[r]=w;return t[w]=!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 v=null;function C(e){return R.ReactCurrentDispatcher.current=e,R.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=v)return v.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function O(e){let t=R.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(v=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&&(v=null),C(e)}else if(2===e)N.push(t),C(v);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 M(e){for(let t=0;t<e.length;t++)e[t]=w}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function x(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=S(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var z=new Set;function T(e,t,r,n,o,a){function l(e,t,l,c){let i=`${n}:${a} [${o}] ${r}${l} changed from ${e} to ${t} at depth ${c}`;z.has(i)||(z.add(i),console.error(i))}!function e(t,r,n,o){if(!(o>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,o);else if("object"==typeof t){let a=Array.isArray(t),c=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,o);else if(null===r)l(`type ${typeof t}`,"null",n,o);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,o);else for(let[a,c]of t)r.has(a)?e(c,r.get(a),`${n}.get(${a})`,o+1):l(`Map instance with key ${a}`,`Map instance without key ${a}`,n,o);else l("Map instance","other value",n,o);else if(r instanceof Map)l("other value","Map instance",n,o);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,o);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,o);else l("Set instance","other value",n,o);else if(r instanceof Set)l("other value","Set instance",n,o);else if(a||c)if(a!==c)l(`type ${a?"array":"object"}`,`type ${c?"array":"object"}`,n,o);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,o);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,o+1);else if(g(t)||g(r))g(t)!==g(r)?l(`type ${g(t)?"React element":"object"}`,`type ${g(r)?"React element":"object"}`,n,o):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,o):e(t.props,r.props,`[props of ${n}]`,o+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,o);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,o+1):l(`object with key ${a}`,`object without key ${a}`,n,o)}}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,o):t!==r&&l(t,r,n,o)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,o=new WeakMap;function a(e,t,r){let a=t,l=r;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=l.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let o=r.get(t);o||((o=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,o)),a=o}if("string"==typeof a&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof a)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 a&&null!=l.ref&&(a=function(e,t){let r=o.get(e);r||(r=new Map,o.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let o=e.useRef(null);if(!o.current||o.current.original!==n){let e;o.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:o.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:l}}function l(e){let t=(t,r,n)=>{let o=a(e,t,r??{});return e.createElement(o.type,void 0===n?o.props:{...o.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let o=a(e,t,r??{}),{children:l,...c}=o.props;return e.createElement(o.type,void 0===n?c:{...c,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,r,...n)=>{let o=a(e,t,r??{});return e.createElement(o.type,o.props,...n)},cloneElement:(t,r,...n)=>{let o=e.cloneElement(t,r??void 0,...n),l=o.ref,c=a(e,o.type,{...o.props,ref:l});return c.type===o.type&&"string"!=typeof o.type?o:e.createElement(c.type,{...c.props,key:o.key})}}}r.d(t,{MA:()=>l,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:m,cloneElement:d,createContext:p,createElement:y,createFactory:h,createRef:_,forwardRef:S,isValidElement:b,lazy:g,memo:R,startTransition:w,unstable_act:E,useCallback:$,useContext:v,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:x,useMemo:j,useReducer:z,useRef:T,useState:A,useSyncExternalStore:I,useTransition:P,version:U,use:W}=n;r.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:m,cloneElement:d,createContext:p,createElement:y,createFactory:h,createRef:_,default:n,forwardRef:S,isValidElement:b,lazy:g,memo:R,startTransition:w,unstable_act:E,use:W,useCallback:$,useContext:v,useDebugValue:C,useDeferredValue:N,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:x,useMemo:j,useReducer:z,useRef:T,useState:A,useSyncExternalStore:I,useTransition:P,version:U})}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var o=(t,n)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[n]:t[o]})};o(t,"get"),o(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:o}=(0,r("p").MA)(window.React);var a=r("vD");let l=window.WallarmDS.HStack,c=window.WallarmDS.VStack,i=window.WallarmDS.Country,s=window.WallarmDS.CountryFlag,u=window.WallarmDS.CountryName,f={title:"Data Display/Country",component:i,subcomponents:{CountryFlag:s,CountryName:u},parameters:{layout:"centered",docs:{description:{component:"Shows one country from its ISO 3166-1 alpha-2 code — `CountryFlag`, `CountryName`, or both — and only ever a country: a flag names a place, not a language. Compose the name next to the flag wherever the reader could be in any doubt, and expect an unrecognised code to drop the flag and print the code itself."}}},args:{code:"US",size:"medium"},argTypes:{code:{control:"text"},size:{control:"select",options:["small","medium"]}}};var m=r("C");let d=[{name:"Basic",story:r=>{let n,o,l,c=(0,a.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(s,{}),o=e(u,{}),c[0]=n,c[1]=o):(n=c[0],o=c[1]),c[2]!==r.code||c[3]!==r.size?(l=t(i,{code:r.code,size:r.size,children:[n,o]}),c[2]=r.code,c[3]=r.size,c[4]=l):l=c[4],l},meta:f},{name:"Sizes",story:()=>{let r,n,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{code:"US",size:"small",children:[e(s,{}),e(u,{})]}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(l,{align:"center",gap:16,children:[r,t(i,{code:"US",size:"medium",children:[e(s,{}),e(u,{})]})]}),o[1]=n):n=o[1],n},meta:f},{name:"FlagOnly",story:()=>{let r,n,o,c,u,f=(0,a.c)(5);return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{code:"US",children:e(s,{})}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{code:"GB",children:e(s,{})}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(i,{code:"DE",children:e(s,{})}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(i,{code:"FR",children:e(s,{})}),f[3]=c):c=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(u=t(l,{gap:8,children:[r,n,o,c,e(i,{code:"JP",children:e(s,{})})]}),f[4]=u):u=f[4],u},meta:f},{name:"NameOnly",story:()=>{let r,n,o,l=(0,a.c)(3);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(i,{code:"US",children:e(u,{})}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{code:"GB",children:e(u,{})}),l[1]=n):n=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(c,{gap:4,children:[r,n,e(i,{code:"DE",children:e(u,{})})]}),l[2]=o):o=l[2],o},meta:f},{name:"Examples",story:()=>{let r,n,o,l,f,m,d,p,y,h,_=(0,a.c)(10);return _[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{code:"US",children:[e(s,{}),e(u,{})]}),_[0]=r):r=_[0],_[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(i,{code:"GB",children:[e(s,{}),e(u,{})]}),_[1]=n):n=_[1],_[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(i,{code:"DE",children:[e(s,{}),e(u,{})]}),_[2]=o):o=_[2],_[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(i,{code:"FR",children:[e(s,{}),e(u,{})]}),_[3]=l):l=_[3],_[4]===Symbol.for("react.memo_cache_sentinel")?(f=t(i,{code:"JP",children:[e(s,{}),e(u,{})]}),_[4]=f):f=_[4],_[5]===Symbol.for("react.memo_cache_sentinel")?(m=t(i,{code:"RU",children:[e(s,{}),e(u,{})]}),_[5]=m):m=_[5],_[6]===Symbol.for("react.memo_cache_sentinel")?(d=t(i,{code:"CN",children:[e(s,{}),e(u,{})]}),_[6]=d):d=_[6],_[7]===Symbol.for("react.memo_cache_sentinel")?(p=t(i,{code:"BR",children:[e(s,{}),e(u,{})]}),_[7]=p):p=_[7],_[8]===Symbol.for("react.memo_cache_sentinel")?(y=t(i,{code:"AU",children:[e(s,{}),e(u,{})]}),_[8]=y):y=_[8],_[9]===Symbol.for("react.memo_cache_sentinel")?(h=t(c,{gap:8,children:[r,n,o,l,f,m,d,p,y,t(i,{code:"CA",children:[e(s,{}),e(u,{})]})]}),_[9]=h):h=_[9],h},meta:f}];function p({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>m.default.createElement(o,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=a;a=()=>e(t,l)}return m.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},m.default.createElement("h2",{className:"text-sm mb-12"},e.name),m.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(m.default.createElement(window.WallarmDS.Root,null,d.map((e,t)=>m.default.createElement(p,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,43 @@
+<!-- @dsCard group="Brand" height=288 -->
+<!doctype html>
+<html><head><meta charset="utf-8">
+</head><body>
+<style>
+  html, body { margin: 0; background: var(--color-bg-page-bg); }
+  .cover { position: relative; width: 960px; height: 288px; overflow: hidden; background: var(--color-bg-page-bg); }
+  .band { position: absolute; left: 0; top: 0; }
+  .brand { fill: var(--color-w-orange-600); }
+  .ink { fill: var(--color-text-primary); }
+  .relief { fill: var(--color-w-orange-300); }
+  .dot { fill: var(--color-slate-400); }
+  .tile { rx: var(--radius-2); }
+  .text { position: absolute; left: 40px; top: 152px; max-width: 880px; }
+  .name { margin: 0; font-family: var(--font-sans-display); font-size: 64px; line-height: 0.95; font-weight: 600; letter-spacing: var(--tracking-6xl); color: var(--color-text-primary); }
+  .tagline { margin: 8px 0 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
+</style>
+<div class="cover">
+  <svg class="band" width="960" height="120" viewBox="0 0 960 120" aria-hidden="true">
+    <!--
+      blocks: color-w-orange-600 384×56 and 128×120 (bleeds right), color-text-primary 256×80, color-w-orange-300 192×104; widths are multiples of spacing-128 / spacing-64.
+      arrangement: a staircase rising left to right in 24px steps, echoing the Wallarm mark's stepped bands; top-band skeleton because the name is too wide for its zone.
+      pattern: dot grid at a 24px pitch (spacing-24) — the AppShell frame paints a dot raster (app-shell-ambient-dots), the system's own texture for a precise, technical UI.
+      scales: spacing-24 pitch and steps, spacing-128 / spacing-64 widths, radius-2 corners (the mark is sharp-edged).
+    -->
+    <g>
+      <rect class="brand tile" x="0" y="64" width="384" height="56"/>
+      <rect class="ink tile" x="384" y="40" width="256" height="80"/>
+      <rect class="relief tile" x="640" y="16" width="192" height="104"/>
+      <rect class="brand tile" x="832" y="0" width="128" height="120"/>
+    </g>
+    <g>
+      <circle class="dot" cx="24" cy="16" r="2"/><circle class="dot" cx="48" cy="16" r="2"/><circle class="dot" cx="72" cy="16" r="2"/><circle class="dot" cx="96" cy="16" r="2"/><circle class="dot" cx="120" cy="16" r="2"/><circle class="dot" cx="144" cy="16" r="2"/><circle class="dot" cx="168" cy="16" r="2"/><circle class="dot" cx="192" cy="16" r="2"/><circle class="dot" cx="216" cy="16" r="2"/><circle class="dot" cx="240" cy="16" r="2"/><circle class="dot" cx="264" cy="16" r="2"/><circle class="dot" cx="288" cy="16" r="2"/><circle class="dot" cx="312" cy="16" r="2"/><circle class="dot" cx="336" cy="16" r="2"/><circle class="dot" cx="360" cy="16" r="2"/>
+      <circle class="dot" cx="24" cy="40" r="2"/><circle class="dot" cx="48" cy="40" r="2"/><circle class="dot" cx="72" cy="40" r="2"/><circle class="dot" cx="96" cy="40" r="2"/><circle class="dot" cx="120" cy="40" r="2"/><circle class="dot" cx="144" cy="40" r="2"/><circle class="dot" cx="168" cy="40" r="2"/><circle class="dot" cx="192" cy="40" r="2"/><circle class="dot" cx="216" cy="40" r="2"/><circle class="dot" cx="240" cy="40" r="2"/><circle class="dot" cx="264" cy="40" r="2"/><circle class="dot" cx="288" cy="40" r="2"/><circle class="dot" cx="312" cy="40" r="2"/><circle class="dot" cx="336" cy="40" r="2"/><circle class="dot" cx="360" cy="40" r="2"/>
+      <circle class="dot" cx="408" cy="16" r="2"/><circle class="dot" cx="432" cy="16" r="2"/><circle class="dot" cx="456" cy="16" r="2"/><circle class="dot" cx="480" cy="16" r="2"/><circle class="dot" cx="504" cy="16" r="2"/><circle class="dot" cx="528" cy="16" r="2"/><circle class="dot" cx="552" cy="16" r="2"/><circle class="dot" cx="576" cy="16" r="2"/><circle class="dot" cx="600" cy="16" r="2"/><circle class="dot" cx="624" cy="16" r="2"/>
+    </g>
+  </svg>
+  <div class="text">
+    <h1 class="name">Wallarm Design System</h1>
+    <p class="tagline">A comprehensive design system and component library for Wallarm.</p>
+  </div>
+</div>
+</body></html>