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

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

@@ -0,0 +1,215 @@
+The frame a microfrontend page renders into — a header carrying the title and its actions, then the content below. It tells the host shell how it wants to be laid out (`fullSize`, `fixedHeight`) through context and falls back to sensible behaviour when there is no host, so the same page works inside the console and on its own.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `name` | `string \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `full-size` | `boolean \| undefined` | no | — |  |
+| `fixed-height` | `boolean \| undefined` | no | — |  |
+| `contained` | `boolean \| 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 | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.PageActions` — `PageActionsProps` in the declaration bundle.
+- `WallarmDS.PageContent` — `PageContentProps` in the declaration bundle.
+- `WallarmDS.PageDescription` — `PageDescriptionProps` in the declaration bundle.
+- `WallarmDS.PageHeader` — `PageHeaderProps` in the declaration bundle.
+- `WallarmDS.PageHeaderGroup` — `PageHeaderGroupProps` in the declaration bundle.
+- `WallarmDS.PageTitle` — `PageTitleProps` in the declaration bundle.
+- `WallarmDS.PageToolbar` — `PageToolbarProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The whole frame: `PageTitle` with a count beside it, `PageActions` on the right, `PageContent` below, asking the shell for the full width and a fixed height.
+
+Source: Page/Page.stories.tsx#Basic
+
+### StickyHeader
+
+`contained` gives the page its own scroll container, which is what lets `PageHeader sticky` stick. Without it the shell does the scrolling and the header leaves with the content.
+
+Source: Page/Page.stories.tsx#StickyHeader
+
+### WithDescriptionAndToolbar
+
+`PageHeaderGroup` stacks the title over a `PageDescription`; `PageToolbar` adds a filter row between the header and the content.
+
+Source: Page/Page.stories.tsx#WithDescriptionAndToolbar
+
+## Story sources
+
+### Page/Page.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { NumericBadge } from '../NumericBadge';
+import { SearchInput } from '../SearchInput';
+import { SegmentedTabs, SegmentedTabsList, SegmentedTabsTrigger } from '../SegmentedTabs';
+import { Page, type PageProps } from './Page';
+import { PageActions } from './PageActions';
+import { PageContent } from './PageContent';
+import { PageDescription } from './PageDescription';
+import { PageHeader } from './PageHeader';
+import { PageHeaderGroup } from './PageHeaderGroup';
+import { PageTitle } from './PageTitle';
+import { PageToolbar } from './PageToolbar';
+
+const DESCRIPTION = [
+  'The frame a microfrontend page renders into — a header carrying the title and its actions, then the content below.',
+  'It tells the host shell how it wants to be laid out (`fullSize`, `fixedHeight`) through context and falls back to sensible behaviour when there is no host, so the same page works inside the console and on its own.',
+].join(' ');
+
+const meta = {
+  title: 'Layout/Page',
+  component: Page,
+  subcomponents: {
+    PageActions,
+    PageContent,
+    PageDescription,
+    PageHeader,
+    PageHeaderGroup,
+    PageTitle,
+    PageToolbar,
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    name: {
+      control: { type: 'text' },
+      description: 'Unique page identifier communicated to the host shell',
+    },
+    fullSize: {
+      control: { type: 'boolean' },
+      description: 'Whether the page should occupy full available width',
+    },
+    fixedHeight: {
+      control: { type: 'boolean' },
+      description: 'Whether the page should have a fixed height',
+    },
+  },
+} satisfies Meta<typeof Page>;
+
+export default meta;
+
+/** The whole frame: `PageTitle` with a count beside it, `PageActions` on the right, `PageContent` below, asking the shell for the full width and a fixed height. */
+export const Basic: StoryFn<PageProps> = () => {
+  return (
+    <Page name='full-featured' fullSize fixedHeight>
+      <PageHeader>
+        <PageTitle>Page title</PageTitle>
+
+        <Badge>1000</Badge>
+
+        <PageActions>
+          <Button variant='secondary' color='neutral' size='small'>
+            Export
+          </Button>
+          <Button size='small'>Settings</Button>
+        </PageActions>
+      </PageHeader>
+
+      <PageContent>
+        <p>Full-featured page with header actions, tabs (including disabled), and content area.</p>
+      </PageContent>
+    </Page>
+  );
+};
+
+/** `contained` gives the page its own scroll container, which is what lets `PageHeader sticky` stick. Without it the shell does the scrolling and the header leaves with the content. */
+export const StickyHeader: StoryFn<PageProps> = () => {
+  return (
+    <Page name='sticky-header' contained>
+      <PageHeader sticky>
+        <PageTitle>Sticky header</PageTitle>
+
+        <PageActions>
+          <Button variant='secondary' color='neutral' size='small'>
+            Export
+          </Button>
+          <Button size='small'>Settings</Button>
+        </PageActions>
+      </PageHeader>
+
+      <PageContent>
+        {Array.from({ length: 40 }, (_, i) => (
+          <p key={`row-${i + 1}`} className='py-8'>
+            Content row {i + 1}
+          </p>
+        ))}
+      </PageContent>
+    </Page>
+  );
+};
+
+/** `PageHeaderGroup` stacks the title over a `PageDescription`; `PageToolbar` adds a filter row between the header and the content. */
+export const WithDescriptionAndToolbar: StoryFn<PageProps> = () => {
+  const [search, setSearch] = useState('');
+
+  return (
+    <Page name='with-description-and-toolbar' fixedHeight>
+      <PageHeader>
+        <PageHeaderGroup>
+          <PageTitle>Service accounts</PageTitle>
+          <PageDescription>
+            Identities for automation and API access — they sign in with keys or tokens instead of a
+            password.
+          </PageDescription>
+        </PageHeaderGroup>
+
+        <PageActions>
+          <Button size='medium'>Create service account</Button>
+        </PageActions>
+      </PageHeader>
+
+      <PageToolbar>
+        <SearchInput
+          value={search}
+          onChange={setSearch}
+          placeholder='Search name'
+          className='w-[320px]'
+        />
+        <SegmentedTabs defaultValue='all'>
+          <SegmentedTabsList>
+            <SegmentedTabsTrigger value='all'>
+              All <NumericBadge>2</NumericBadge>
+            </SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='active'>
+              Active <NumericBadge>1</NumericBadge>
+            </SegmentedTabsTrigger>
+            <SegmentedTabsTrigger value='deactivated'>
+              Deactivated <NumericBadge>1</NumericBadge>
+            </SegmentedTabsTrigger>
+          </SegmentedTabsList>
+        </SegmentedTabs>
+      </PageToolbar>
+
+      <PageContent>
+        <p>Table goes here.</p>
+      </PageContent>
+    </Page>
+  );
+};
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,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 l,o,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 a of u(t))f.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>D,$makeReadOnly:()=>O,$reset:()=>k,$structuralCheck:()=>W,c:()=>E,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>M,useRenderCounter:()=>T};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var w=(a=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:S,isValidElement:b}=w,_=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=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 N(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function D(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.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.");N(R)}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&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function k(e){for(let t=0;t<e.length;t++)e[t]=v}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function x(){for(let e of M.values())e.forEach(e=>{e.count=0})}function T(e){let t=g(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var P=new Set;function W(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;P.has(c)||(P.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.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:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,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:w,forwardRef:g,isValidElement:S,lazy:b,memo:_,startTransition:v,unstable_act:E,useCallback:R,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:D,useId:k,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:x,useMemo:T,useReducer:P,useRef:W,useState:j,useSyncExternalStore:A,useTransition:I,version:z,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,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:w,default:n,forwardRef:g,isValidElement:S,lazy:b,memo:_,startTransition:v,unstable_act:E,use:L,useCallback:R,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:D,useId:k,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:x,useMemo:T,useReducer:P,useRef:W,useState:j,useSyncExternalStore:A,useTransition:I,version:z})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(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:a}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let i=window.WallarmDS.Badge,c=window.WallarmDS.Button,s=window.WallarmDS.NumericBadge,u=window.WallarmDS.SearchInput,d=window.WallarmDS.SegmentedTabs,f=window.WallarmDS.SegmentedTabsList,p=window.WallarmDS.SegmentedTabsTrigger,m=window.WallarmDS.Page,h=window.WallarmDS.PageActions,y=window.WallarmDS.PageContent,w=window.WallarmDS.PageDescription,g=window.WallarmDS.PageHeader,S=window.WallarmDS.PageHeaderGroup,b=window.WallarmDS.PageTitle,_=window.WallarmDS.PageToolbar,v={title:"Layout/Page",component:m,subcomponents:{PageActions:h,PageContent:y,PageDescription:w,PageHeader:g,PageHeaderGroup:S,PageTitle:b,PageToolbar:_},parameters:{layout:"fullscreen",docs:{description:{component:"The frame a microfrontend page renders into — a header carrying the title and its actions, then the content below. It tells the host shell how it wants to be laid out (`fullSize`, `fixedHeight`) through context and falls back to sensible behaviour when there is no host, so the same page works inside the console and on its own."}}},argTypes:{name:{control:{type:"text"},description:"Unique page identifier communicated to the host shell"},fullSize:{control:{type:"boolean"},description:"Whether the page should occupy full available width"},fixedHeight:{control:{type:"boolean"},description:"Whether the page should have a fixed height"}}};function E(e,r){return t("p",{className:"py-8",children:["Content row ",r+1]},`row-${r+1}`)}let R=[{name:"Basic",story:()=>{let r,n,a,o,s=(0,l.c)(4);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:"Page title"}),n=e(i,{children:"1000"}),s[0]=r,s[1]=n):(r=s[0],n=s[1]),s[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(g,{children:[r,n,t(h,{children:[e(c,{variant:"secondary",color:"neutral",size:"small",children:"Export"}),e(c,{size:"small",children:"Settings"})]})]}),s[2]=a):a=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(m,{name:"full-featured",fullSize:!0,fixedHeight:!0,children:[a,e(y,{children:e("p",{children:"Full-featured page with header actions, tabs (including disabled), and content area."})})]}),s[3]=o):o=s[3],o},meta:v},{name:"StickyHeader",story:()=>{let r,n,a,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(b,{children:"Sticky header"}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{sticky:!0,children:[r,t(h,{children:[e(c,{variant:"secondary",color:"neutral",size:"small",children:"Export"}),e(c,{size:"small",children:"Settings"})]})]}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(m,{name:"sticky-header",contained:!0,children:[n,e(y,{children:Array.from({length:40},E)})]}),o[2]=a):a=o[2],a},meta:v},{name:"WithDescriptionAndToolbar",story:()=>{let r,n,a,i,v,E,R,$,N,C=(0,l.c)(12),[D,k]=(0,o.useState)("");return C[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(S,{children:[e(b,{children:"Service accounts"}),e(w,{children:"Identities for automation and API access — they sign in with keys or tokens instead of a password."})]}),C[0]=r):r=C[0],C[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{children:[r,e(h,{children:e(c,{size:"medium",children:"Create service account"})})]}),C[1]=n):n=C[1],C[2]!==D?(a=e(u,{value:D,onChange:k,placeholder:"Search name",className:"w-[320px]"}),C[2]=D,C[3]=a):a=C[3],C[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(p,{value:"all",children:["All ",e(s,{children:"2"})]}),C[4]=i):i=C[4],C[5]===Symbol.for("react.memo_cache_sentinel")?(v=t(p,{value:"active",children:["Active ",e(s,{children:"1"})]}),C[5]=v):v=C[5],C[6]===Symbol.for("react.memo_cache_sentinel")?(E=e(d,{defaultValue:"all",children:t(f,{children:[i,v,t(p,{value:"deactivated",children:["Deactivated ",e(s,{children:"1"})]})]})}),C[6]=E):E=C[6],C[7]!==a?(R=t(_,{children:[a,E]}),C[7]=a,C[8]=R):R=C[8],C[9]===Symbol.for("react.memo_cache_sentinel")?($=e(y,{children:e("p",{children:"Table goes here."})}),C[9]=$):$=C[9],C[10]!==R?(N=t(m,{name:"with-description-and-toolbar",fixedHeight:!0,children:[n,R,$]}),C[10]=R,C[11]=N):N=C[11],N},meta:v}];function $({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(a,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,R.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,302 @@
+Page-through navigation for a bounded set — previous and next, numbered pages with automatic ellipsis, and an optional rows-per-page selector. Infinite scroll is the house default for long data, so this is the deliberate alternative: reach for it when knowing and controlling your position genuinely helps — jumping to a page, coming back to page two, choosing a page size. “Lots of rows” on its own is not the cue. It is compound, so render only the parts you want, in the order you want.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `count` | `number \| undefined` | no | — | Total number of data items (Ark `count`). |
+| `page` | `number \| undefined` | no | — | Controlled current page (1-based). |
+| `default-page` | `number \| undefined` | no | — | Uncontrolled initial page. |
+| `page-size` | `number \| undefined` | no | — | Controlled items-per-page. |
+| `default-page-size` | `number \| undefined` | no | — | Uncontrolled initial items-per-page. |
+| `sibling-count` | `number \| undefined` | no | — | Pages shown beside the active page. |
+| `boundary-count` | `number \| undefined` | no | — | Pages shown at the start/end. |
+| `on-page-change` | `((details: PaginationPageChangeDetails) => void) \| undefined` | no | — |  |
+| `on-page-size-change` | `((details: PaginationPageSizeChangeDetails) => void) \| undefined` | no | — |  |
+| `type` | `"button" \| "link" \| undefined` | no | — | Trigger element type. |
+| `get-page-url` | `((details: PaginationPageChangeDetails) => string) \| undefined` | no | — |  |
+| `size` | `"medium" \| "small"` | no | `medium` | Visual size. |
+| `align` | `"left" \| "center" \| "right"` | no | `left` | Horizontal alignment of the row. |
+| `aria-label` | `string \| undefined` | no | `PAGINATION_ROOT_LABEL` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.PaginationEllipsis` — `PaginationEllipsisProps` in the declaration bundle.
+- `WallarmDS.PaginationItem` — `PaginationItemProps` in the declaration bundle.
+- `WallarmDS.PaginationList` — `PaginationListProps` in the declaration bundle.
+- `WallarmDS.PaginationNext` — `PaginationNextProps` in the declaration bundle.
+- `WallarmDS.PaginationPageSize` — `PaginationPageSizeProps` in the declaration bundle.
+- `WallarmDS.PaginationPrevious` — `PaginationPreviousProps` in the declaration bundle.
+
+## Stories
+
+### Full
+
+The complete set — previous, the numbered list, next — which is what most collections want.
+
+Source: Pagination/Pagination.stories.tsx#Full
+
+### Simple
+
+Numbers only. Fine where the reader is scanning to a known page rather than stepping through.
+
+Source: Pagination/Pagination.stories.tsx#Simple
+
+### LinksOnly
+
+Previous and next with no numbers, for a set whose page count means nothing to the reader.
+
+Source: Pagination/Pagination.stories.tsx#LinksOnly
+
+### WithPageSize
+
+`PaginationPageSize` puts rows-per-page in the same row. Offering it is the strongest reason to choose pagination over infinite scroll.
+
+Source: Pagination/Pagination.stories.tsx#WithPageSize
+
+### Sizes
+
+`medium` and `small`. Small is the one to use in a `Table` footer, where the pager should not outweigh the data.
+
+Source: Pagination/Pagination.stories.tsx#Sizes
+
+### Alignment
+
+`align` places the row left, centre or right — right for a table footer, centre for a standalone list.
+
+Source: Pagination/Pagination.stories.tsx#Alignment
+
+### ManyPages
+
+`siblingCount` and `boundaryCount` decide how much of a 50-page set stays visible; the ellipsis is inserted for you.
+
+Source: Pagination/Pagination.stories.tsx#ManyPages
+
+### Playground
+
+Controlled mode with both `page` and `pageSize` held outside, which is how it behaves against a real query.
+
+Source: Pagination/Pagination.stories.tsx#Playground
+
+### InTable
+
+The pager below a `Table`, sharing its state through `useClientPagination` — the composition to copy for a paged grid.
+
+Source: Pagination/Pagination.stories.tsx#InTable
+
+## Story sources
+
+### Pagination/Pagination.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { VStack } from '../Stack';
+import { createTableColumnHelper, Table, type TableColumnDef } from '../Table';
+import { Text } from '../Text';
+import { useClientPagination } from './lib';
+import { Pagination } from './Pagination';
+import { PaginationEllipsis } from './PaginationEllipsis';
+import { PaginationItem } from './PaginationItem';
+import { PaginationList } from './PaginationList';
+import { PaginationNext } from './PaginationNext';
+import { PaginationPageSize } from './PaginationPageSize';
+import { PaginationPrevious } from './PaginationPrevious';
+
+const DESCRIPTION = [
+  'Page-through navigation for a bounded set — previous and next, numbered pages with automatic ellipsis, and an optional rows-per-page selector.',
+  'Infinite scroll is the house default for long data, so this is the deliberate alternative: reach for it when knowing and controlling your position genuinely helps — jumping to a page, coming back to page two, choosing a page size. “Lots of rows” on its own is not the cue.',
+  'It is compound, so render only the parts you want, in the order you want.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/Pagination',
+  component: Pagination,
+  subcomponents: {
+    PaginationPageSize,
+    PaginationPrevious,
+    PaginationList,
+    PaginationItem,
+    PaginationEllipsis,
+    PaginationNext,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+/** The complete set — previous, the numbered list, next — which is what most collections want. */
+export const Full: StoryFn<typeof Pagination> = () => (
+  <Pagination count={120} pageSize={10} defaultPage={2} align='center' aria-label='Search results'>
+    <PaginationPrevious />
+    <PaginationList />
+    <PaginationNext />
+  </Pagination>
+);
+
+// Simple = page numbers only (no prev/next links)
+/** Numbers only. Fine where the reader is scanning to a known page rather than stepping through. */
+export const Simple: StoryFn<typeof Pagination> = () => (
+  <Pagination count={120} pageSize={10} defaultPage={2} align='center'>
+    <PaginationList />
+  </Pagination>
+);
+
+// Links only = Previous/Next links only (no page numbers)
+/** Previous and next with no numbers, for a set whose page count means nothing to the reader. */
+export const LinksOnly: StoryFn<typeof Pagination> = () => (
+  <Pagination count={120} pageSize={10} defaultPage={2} align='center'>
+    <PaginationPrevious />
+    <PaginationNext />
+  </Pagination>
+);
+
+/** `PaginationPageSize` puts rows-per-page in the same row. Offering it is the strongest reason to choose pagination over infinite scroll. */
+export const WithPageSize: StoryFn<typeof Pagination> = () => (
+  <Pagination count={120} defaultPageSize={25} defaultPage={2} align='right'>
+    <PaginationPageSize options={[10, 25, 50]} />
+    <PaginationPrevious />
+    <PaginationList />
+    <PaginationNext />
+  </Pagination>
+);
+
+/** `medium` and `small`. Small is the one to use in a `Table` footer, where the pager should not outweigh the data. */
+export const Sizes: StoryFn<typeof Pagination> = () => (
+  <VStack gap={24}>
+    <Pagination count={120} pageSize={10} defaultPage={2} size='medium' align='center'>
+      <PaginationPrevious />
+      <PaginationList />
+      <PaginationNext />
+    </Pagination>
+    <Pagination count={120} pageSize={10} defaultPage={2} size='small' align='center'>
+      <PaginationPrevious />
+      <PaginationList />
+      <PaginationNext />
+    </Pagination>
+  </VStack>
+);
+
+/** `align` places the row left, centre or right — right for a table footer, centre for a standalone list. */
+export const Alignment: StoryFn<typeof Pagination> = () => (
+  <VStack gap={24} className='w-600'>
+    {(['left', 'center', 'right'] as const).map(align => (
+      <Pagination key={align} count={120} pageSize={10} defaultPage={2} align={align}>
+        <PaginationList />
+      </Pagination>
+    ))}
+  </VStack>
+);
+
+/** `siblingCount` and `boundaryCount` decide how much of a 50-page set stays visible; the ellipsis is inserted for you. */
+export const ManyPages: StoryFn<typeof Pagination> = () => (
+  <Pagination
+    count={500}
+    pageSize={10}
+    defaultPage={6}
+    siblingCount={1}
+    boundaryCount={1}
+    align='center'
+  >
+    <PaginationPrevious />
+    <PaginationList />
+    <PaginationNext />
+  </Pagination>
+);
+
+/** Controlled mode with both `page` and `pageSize` held outside, which is how it behaves against a real query. */
+export const Playground: StoryFn<typeof Pagination> = () => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  return (
+    <Pagination
+      count={120}
+      page={page}
+      pageSize={pageSize}
+      align='left'
+      onPageChange={({ page }) => setPage(page)}
+      onPageSizeChange={({ pageSize }) => setPageSize(pageSize)}
+    >
+      <PaginationPageSize options={[10, 25, 50]} />
+      <PaginationPrevious />
+      <PaginationList />
+      <PaginationNext />
+    </Pagination>
+  );
+};
+
+// --- Table + Pagination footer -------------------------------------------------
+
+interface ApiEndpoint {
+  id: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  path: string;
+  requests: number;
+  status: 'Active' | 'Deprecated';
+}
+
+const METHODS = ['GET', 'POST', 'PUT', 'DELETE'] as const;
+
+const apiEndpoints: ApiEndpoint[] = Array.from({ length: 47 }, (_, i) => ({
+  id: `ep-${i + 1}`,
+  method: METHODS[i % METHODS.length] as ApiEndpoint['method'],
+  path: `/api/v2/resource/${i + 1}`,
+  requests: (i + 1) * 137,
+  status: i % 3 === 0 ? 'Deprecated' : 'Active',
+}));
+
+const endpointColumnHelper = createTableColumnHelper<ApiEndpoint>();
+
+const endpointColumns: TableColumnDef<ApiEndpoint>[] = [
+  endpointColumnHelper.accessor('method', {
+    header: 'Method',
+    size: 120,
+    cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,
+  }),
+  endpointColumnHelper.accessor('path', {
+    header: 'Endpoint',
+    size: 320,
+    cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,
+  }),
+  endpointColumnHelper.accessor('requests', {
+    header: 'Requests',
+    size: 160,
+    cell: ({ getValue }) => <Text size='sm'>{getValue().toLocaleString()}</Text>,
+  }),
+  endpointColumnHelper.accessor('status', {
+    header: 'Status',
+    size: 160,
+    cell: ({ getValue }) => <Text size='sm'>{getValue()}</Text>,
+  }),
+];
+
+// "Rows per page" + page navigation share a right-aligned footer below the table.
+/** The pager below a `Table`, sharing its state through `useClientPagination` — the composition to copy for a paged grid. */
+export const InTable: StoryFn<typeof Pagination> = () => {
+  const { pageData, ...pagination } = useClientPagination(apiEndpoints, 10);
+
+  return (
+    <div className='w-800'>
+      <VStack gap={12}>
+        <Table data={pageData} columns={endpointColumns} getRowId={row => row.id} />
+        <Pagination {...pagination} align='right' aria-label='API endpoints'>
+          <PaginationPageSize options={[5, 10, 25]} />
+          <PaginationPrevious />
+          <PaginationList />
+          <PaginationNext />
+        </Pagination>
+      </VStack>
+    </div>
+  );
+};
+```

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

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

package/dist/project/components/Pagination/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,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=s(t,a))||r.enumerable});return e},d={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>O,$reset:()=>z,$structuralCheck:()=>j,c:()=>R,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>M,useRenderCounter:()=>k};for(var h in y)c(d,h,{get:y[h],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),d);var g=(a=null!=(r=n("C"))?i(f(r)):{},m(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:S,useEffect:w,isValidElement:_}=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,E=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=E;return t[E]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 N(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var P=[];function C(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(P.push(t),1===P.length&&($=t),t===v)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.");N(v)}else if(1===e){let e=P.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===P.length&&($=null),N(e)}else if(2===e)P.push(t),N($);else if(3===e){let e=P.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function z(e){for(let t=0;t<e.length;t++)e[t]=E}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function D(){for(let e of M.values())e.forEach(e=>{e.count=0})}function k(e){let t=S(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let n,r={count:0};null==(n=M.get(e))&&(n=new Set,M.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=M.get(e))&&r.delete(n))}})}var T=new Set;function j(e,t,n,r,a,o){function l(e,t,l,i){let c=`${r}:${o} [${a}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,r,a);else if(null===n)l(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${r}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,a);else l("Map instance","other value",r,a);else if(n instanceof Map)l("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else l("Set instance","other value",r,a);else if(n instanceof Set)l("other value","Set instance",r,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,a);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${r}[${o}]`,a+1);else if(_(t)||_(n))_(t)!==_(n)?l(`type ${_(t)?"React element":"object"}`,`type ${_(n)?"React element":"object"}`,r,a):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,r,a):e(t.props,n.props,`[props of ${r}]`,a+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,r,a);for(let o in t)o in n?e(t[o],n[o],`${r}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&l(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function o(e,t,n){let o=t,l=n;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let a=n.get(t);a||((a=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let o=e.forwardRef((n,r)=>{let a=e.useRef(null);if(!a.current||a.current.original!==r){let e;a.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:a.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,r)=>{let a=o(e,t,n??{});return e.createElement(a.type,void 0===r?a.props:{...a.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let a=o(e,t,n??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let a=o(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,forwardRef:S,isValidElement:w,lazy:_,memo:b,startTransition:E,unstable_act:R,useCallback:v,useContext:$,useDebugValue:N,useDeferredValue:P,useEffect:C,useId:z,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:D,useMemo:k,useReducer:T,useRef:j,useState:I,useSyncExternalStore:x,useTransition:A,version:W,use:L}=r;n.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,default:r,forwardRef:S,isValidElement:w,lazy:_,memo:b,startTransition:E,unstable_act:R,use:L,useCallback:v,useContext:$,useDebugValue:N,useDeferredValue:P,useEffect:C,useId:z,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:D,useMemo:k,useReducer:T,useRef:j,useState:I,useSyncExternalStore:x,useTransition:A,version:W})}},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.VStack,c=window.WallarmDS.createTableColumnHelper,s=window.WallarmDS.Table,u=window.WallarmDS.Text,f=window.WallarmDS.useClientPagination,p=window.WallarmDS.Pagination,m=window.WallarmDS.PaginationEllipsis,d=window.WallarmDS.PaginationItem,y=window.WallarmDS.PaginationList,h=window.WallarmDS.PaginationNext,g=window.WallarmDS.PaginationPageSize,S=window.WallarmDS.PaginationPrevious,w={title:"Navigation/Pagination",component:p,subcomponents:{PaginationPageSize:g,PaginationPrevious:S,PaginationList:y,PaginationItem:d,PaginationEllipsis:m,PaginationNext:h},parameters:{layout:"centered",docs:{description:{component:"Page-through navigation for a bounded set — previous and next, numbered pages with automatic ellipsis, and an optional rows-per-page selector. Infinite scroll is the house default for long data, so this is the deliberate alternative: reach for it when knowing and controlling your position genuinely helps — jumping to a page, coming back to page two, choosing a page size. “Lots of rows” on its own is not the cue. It is compound, so render only the parts you want, in the order you want."}}}},_=["GET","POST","PUT","DELETE"],b=Array.from({length:47},(e,t)=>({id:`ep-${t+1}`,method:_[t%_.length],path:`/api/v2/resource/${t+1}`,requests:(t+1)*137,status:t%3==0?"Deprecated":"Active"})),E=c(),R=[E.accessor("method",{header:"Method",size:120,cell:({getValue:t})=>e(u,{size:"sm",children:t()})}),E.accessor("path",{header:"Endpoint",size:320,cell:({getValue:t})=>e(u,{size:"sm",children:t()})}),E.accessor("requests",{header:"Requests",size:160,cell:({getValue:t})=>e(u,{size:"sm",children:t().toLocaleString()})}),E.accessor("status",{header:"Status",size:160,cell:({getValue:t})=>e(u,{size:"sm",children:t()})})];function v(t){return e(p,{count:120,pageSize:10,defaultPage:2,align:t,children:e(y,{})},t)}function $(e){return e.id}let N=[{name:"Full",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{count:120,pageSize:10,defaultPage:2,align:"center","aria-label":"Search results",children:[e(S,{}),e(y,{}),e(h,{})]}),r[0]=n):n=r[0],n},meta:w},{name:"Simple",story:()=>{let t,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(p,{count:120,pageSize:10,defaultPage:2,align:"center",children:e(y,{})}),n[0]=t):t=n[0],t},meta:w},{name:"LinksOnly",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{count:120,pageSize:10,defaultPage:2,align:"center",children:[e(S,{}),e(h,{})]}),r[0]=n):n=r[0],n},meta:w},{name:"WithPageSize",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{count:120,defaultPageSize:25,defaultPage:2,align:"right",children:[e(g,{options:[10,25,50]}),e(S,{}),e(y,{}),e(h,{})]}),r[0]=n):n=r[0],n},meta:w},{name:"Sizes",story:()=>{let n,r,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{count:120,pageSize:10,defaultPage:2,size:"medium",align:"center",children:[e(S,{}),e(y,{}),e(h,{})]}),a[0]=n):n=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{gap:24,children:[n,t(p,{count:120,pageSize:10,defaultPage:2,size:"small",align:"center",children:[e(S,{}),e(y,{}),e(h,{})]})]}),a[1]=r):r=a[1],r},meta:w},{name:"Alignment",story:()=>{let t,n,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=["left","center","right"],r[0]=t):t=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(i,{gap:24,className:"w-600",children:t.map(v)}),r[1]=n):n=r[1],n},meta:w},{name:"ManyPages",story:()=>{let n,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(p,{count:500,pageSize:10,defaultPage:6,siblingCount:1,boundaryCount:1,align:"center",children:[e(S,{}),e(y,{}),e(h,{})]}),r[0]=n):n=r[0],n},meta:w},{name:"Playground",story:()=>{let n,r,a,i,c,s,u,f=(0,o.c)(9),[m,d]=(0,l.useState)(1),[w,_]=(0,l.useState)(10);return f[0]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{let{page:t}=e;return d(t)},r=e=>{let{pageSize:t}=e;return _(t)},f[0]=n,f[1]=r):(n=f[0],r=f[1]),f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(g,{options:[10,25,50]}),i=e(S,{}),c=e(y,{}),s=e(h,{}),f[2]=a,f[3]=i,f[4]=c,f[5]=s):(a=f[2],i=f[3],c=f[4],s=f[5]),f[6]!==m||f[7]!==w?(u=t(p,{count:120,page:m,pageSize:w,align:"left",onPageChange:n,onPageSizeChange:r,children:[a,i,c,s]}),f[6]=m,f[7]=w,f[8]=u):u=f[8],u},meta:w},{name:"InTable",story:()=>{let n,r,a,l,c,u,m,d,w,_=(0,o.c)(14),E=f(b,10);return _[0]!==E?({pageData:n,...r}=E,_[0]=E,_[1]=n,_[2]=r):(n=_[1],r=_[2]),_[3]!==n?(a=e(s,{data:n,columns:R,getRowId:$}),_[3]=n,_[4]=a):a=_[4],_[5]===Symbol.for("react.memo_cache_sentinel")?(l=e(g,{options:[5,10,25]}),c=e(S,{}),u=e(y,{}),m=e(h,{}),_[5]=l,_[6]=c,_[7]=u,_[8]=m):(l=_[5],c=_[6],u=_[7],m=_[8]),_[9]!==r?(d=t(p,{...r,align:"right","aria-label":"API endpoints",children:[l,c,u,m]}),_[9]=r,_[10]=d):d=_[10],_[11]!==a||_[12]!==d?(w=e("div",{className:"w-800",children:t(i,{gap:12,children:[a,d]})}),_[11]=a,_[12]=d,_[13]=w):w=_[13],w},meta:w}];function P({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,N.map((e,t)=>l.default.createElement(P,{key:t,entry:e})))),t}}})();