@cube-dev/ui-kit 0.0.0-canary-85abc8a → 0.0.0-canary-306afc2

package/docs/components/navigation/Pagination.md

@@ -0,0 +1,245 @@
+# Pagination
+
+Pagination is the control for moving through a paged collection. It renders a
+bounded run of page buttons, optional first/last jumps, an optional page-size
+selector, and an optional item-range summary.
+
+It is a pure control: it owns no data. Client-side slicing lives in the
+companion `usePagination` hook, and `ItemTable` composes the two.
+
+## When to Use
+
+- Paging through a list, table, or grid where the user needs to jump around
+  rather than scroll.
+- Cursor pagination with an unknown total — supply `hasNextPage` and omit
+  `total`/`totalPages`, and the control degrades to prev/next.
+- Anywhere you need a page-size selector wired to the same state.
+
+Prefer infinite scroll when the collection is a feed the user skims, and
+pagination when they need stable, addressable positions.
+
+## Component
+
+### Properties
+
+- **`page`** `number` — Controlled current page, 1-based. Pair with
+  `onPageChange`.
+- **`defaultPage`** `number` (default: `1`) — Initial page for uncontrolled
+  usage.
+- **`onPageChange`** `(page: number) => void` — Never fires with a page outside
+  `1…totalPages` when the total is known.
+- **`total`** `number` — Total items across all pages. Preferred over
+  `totalPages`; it also powers the range summary and the `select` type's range
+  labels.
+- **`totalPages`** `number` — Total pages. Only needed when the item count is
+  genuinely unavailable. Wins over the value derived from `total` + `pageSize`.
+- **`pageSize`** `number` — Controlled page size.
+- **`defaultPageSize`** `number` (default: `50`) — Initial page size for
+  uncontrolled usage.
+- **`onPageSizeChange`** `(pageSize: number) => void` — Changing the size also
+  resets to page 1, because the old page index no longer refers to the same
+  items.
+- **`pageSizeOptions`** `number[]` — Supplying this **and** `onPageSizeChange`
+  renders the size selector.
+- **`type`** `'numbers' | 'select' | 'compact'` (default: `'numbers'`) — How the
+  page control is rendered. `numbers` is the default because it is the only mode
+  whose rendered element count is independent of the page count; `select`
+  materializes one entry per page, so above a safety cap the component falls
+  back to `compact` on its own.
+- **`siblingCount`** `number` (default: `1`) — Page buttons either side of the
+  current page.
+- **`boundaryCount`** `number` (default: `1`) — Page buttons pinned at each end.
+  Together with `siblingCount` this bounds the rendered count at
+  `boundaryCount * 2 + siblingCount * 2 + 3`.
+- **`size`** `'small' | 'medium'` (default: `'small'`) — Control size.
+- **`isDisabled`** `boolean` — Disable every control.
+- **`hasNextPage`** `boolean` — Keeps "next" enabled when the total is unknown.
+  Ignored once `total` or `totalPages` is supplied — a known total is always
+  authoritative.
+- **`isCompact`** `boolean` (default: `false`) — Hide the first/last jump
+  buttons.
+- **`summary`** `boolean | ((info: CubeTablePageInfo) => ReactNode)` (default:
+  `false`) — `true` renders the localized `1–50 of 1,204`, with numbers
+  formatted for the active locale. Pass a function for full control.
+- **`labelFormatter`** `(info: CubeTablePageInfo) => ReactNode` — Labels the
+  entries of `type="select"`. Receives the page info with `page` set to the
+  entry being labelled.
+- **`ariaLabel`** `string` — Labels the `<nav>` landmark. Defaults to the
+  localized "Pagination".
+
+#### `CubeTablePageInfo`
+
+Handed to `summary` and `labelFormatter`:
+
+```ts
+interface CubeTablePageInfo {
+  page: number;       // 1-based
+  pageSize: number;
+  totalPages: number;
+  total: number;      // 0 when unknown
+  from: number;       // 1-based index of the first item on this page
+  to: number;         // 1-based index of the last item on this page
+}
+```
+
+### Base Properties
+
+Supports Base Properties.
+
+### Styling Properties
+
+#### styles
+
+Customizes the root element.
+
+**Sub-elements:**
+
+- `Summary` — the range summary and the `compact` page label
+- `Controls` — the row of nav and page buttons
+- `Gap` — the `…` between two runs of page numbers
+
+#### pageSizeSelectStyles
+
+Customizes the page-size `Select`.
+
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`
+
+### Modifiers
+
+| Modifier | Type | Description |
+| -------- | ---- | ----------- |
+| `size` | `'small' \| 'medium'` | Control size |
+
+## Examples
+
+### Basic Usage
+
+```jsx
+const [page, setPage] = useState(1);
+
+<Pagination page={page} pageSize={50} total={1204} onPageChange={setPage} />;
+```
+
+### With a Summary
+
+```jsx
+<Pagination page={3} pageSize={50} total={1204} summary onPageChange={setPage} />
+```
+
+### Many Pages
+
+A million rows at 50 per page is 20 000 pages — and still ~7 buttons.
+
+```jsx
+<Pagination page={9421} pageSize={50} total={1000000} summary onPageChange={setPage} />
+```
+
+### Page Size Selector
+
+```jsx
+const [page, setPage] = useState(1);
+const [pageSize, setPageSize] = useState(50);
+
+<Pagination
+  page={page}
+  pageSize={pageSize}
+  total={1204}
+  pageSizeOptions={[10, 20, 50, 100, 500]}
+  summary
+  onPageChange={setPage}
+  onPageSizeChange={setPageSize}
+/>;
+```
+
+### Unknown Total (Cursor Pagination)
+
+```jsx
+<Pagination page={page} hasNextPage={hasNextPage} onPageChange={setPage} />
+```
+
+### Compact
+
+```jsx
+<Pagination type="compact" page={3} pageSize={50} total={1204} summary />
+```
+
+### Client-side Slicing with `usePagination`
+
+```jsx
+const { pageItems, page, pageSize, total, setPage, setPageSize } =
+  usePagination(items, { defaultPageSize: 10 });
+
+return (
+  <>
+    {pageItems.map((item) => (
+      <Text key={item}>{item}</Text>
+    ))}
+    <Pagination
+      page={page}
+      pageSize={pageSize}
+      total={total}
+      pageSizeOptions={[5, 10, 25]}
+      summary
+      onPageChange={setPage}
+      onPageSizeChange={setPageSize}
+    />
+  </>
+);
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+- `Tab` — moves through the controls in visual order.
+- `Enter` / `Space` — activates the focused button.
+
+Every control is a real `<button>`, so there is nothing bespoke to learn.
+
+### Screen Reader Support
+
+- The root is a `<nav>` landmark labelled "Pagination" (override with
+  `ariaLabel`).
+- The current page button carries `aria-current="page"`.
+- Every button has an explicit `aria-label` — "Page 3", "Next page", and so on
+  — so an icon-only button is never announced as unlabelled.
+- The `…` gap is `aria-hidden`; it conveys nothing a screen reader user needs.
+
+### ARIA Properties
+
+| Property | Applied to |
+| -------- | ---------- |
+| `aria-label` | The `<nav>` and every button |
+| `aria-current="page"` | The current page button |
+| `aria-hidden="true"` | The `…` gap |
+
+## Best Practices
+
+- Do: pass `total` rather than `totalPages` when you know the item count — the
+  summary and range labels both need it.
+- Do: use `type="numbers"` (the default) for anything that can grow. It is the
+  only mode whose cost does not scale with the page count.
+- Do: reset to page 1 whenever the underlying query changes (a new search term,
+  a new filter). A stale page index against a smaller result set shows an empty
+  page.
+- Don't: render `type="select"` over a large page count. It builds one
+  collection item per page.
+- Don't: pass both `hasNextPage` and a known total and expect the former to win
+  — it doesn't.
+
+## Suggested Improvements
+
+- A "jump to page" input for very large page counts.
+- Optional URL synchronization, so a page is linkable.
+
+## Related Components
+
+- ItemTable — composes `Pagination` in its footer
+- [Select](../fields/Select.md) — used for the page-size selector
+- [Button](../actions/Button.md) — used for every nav and page control

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-85abc8a",
+  "version": "0.0.0-canary-306afc2",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -37,6 +37,7 @@
     "build": "tsdown",
     "watch": "tsdown --watch",
     "test": "vitest run",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
     "test-cover": "vitest run --coverage",
     "test-watch": "vitest",
     "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
@@ -79,6 +80,7 @@
     "@react-aria/ssr": "^3.9.10",
     "@react-aria/utils": "^3.32.0",
     "@react-spectrum/utils": "^3.12.10",
+    "@react-stately/selection": "^3.20.7",
     "@react-stately/utils": "^3.11.0",
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
@@ -135,7 +137,9 @@
     "@types/react-test-renderer": "^18.0.7",
     "@uiw/react-codemirror": "^4.25.4",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "best-effort-json-parser": "^1.2.1",
     "bytes": "^3.1.2",
     "chromatic": "^13.1.4",
@@ -148,6 +152,7 @@
     "markdown-table": "^3.0.3",
     "npm-run-all": "^4.1.5",
     "oxlint": "^1.72.0",
+    "playwright": "^1.62.1",
     "prettier": "^3.2.5",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -162,7 +167,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.6.3",
     "vite": "^8.0.0",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.10"
   },
   "browserslist": [
     "last 2 Chrome versions",

package/dist/utils/react/useBufferedValue.d.ts

@@ -1,56 +0,0 @@
-
-//#region src/utils/react/useBufferedValue.d.ts
-interface UseBufferedValueOptions<T> {
-  /**
-   * Identity of a value, for values `Object.is` doesn't compare usefully — an array of colour
-   * stops, a settings object. Defaults to the value itself, which is what strings want.
-   */
-  getKey?: (value: T) => unknown;
-  /** Nothing can be typed into a disabled control, so there is nothing to protect. */
-  isDisabled?: boolean;
-  /** Same for a read-only one. */
-  isReadOnly?: boolean;
-  /** Escape hatch: `false` makes the hook inert and passes `value`/`onChange` straight through. */
-  isBuffered?: boolean;
-}
-interface UseBufferedValueResult<T> {
-  /** Render this instead of `value`. `undefined` passes through, meaning uncontrolled. */
-  value: T | undefined;
-  /** Call this instead of `onChange`. Still emits once per call, in the same tick. */
-  onChange: (next: T) => void;
-  /** Drop the buffer and let `value` win again. The text fields call it on blur. */
-  reset: () => void;
-}
-/**
- * Holds a controlled value locally so a parent that echoes the new value back *late* cannot
- * overwrite what the user is doing.
- *
- * **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands
- * it. If the parent hands back the pre-keystroke string — because its state reaches the component
- * through a store that publishes a render late, or through a debounce, or a deferred update —
- * React writes that stale string into the DOM node, and a native `value` assignment collapses the
- * selection to the end. Typing in the middle of a field throws the caret to the end. The value
- * eventually lands, so it looks like a caret bug rather than a data-flow one.
- *
- * The buffer keeps the typed text on screen until the parent catches up, while still emitting
- * `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,
- * no swallowed calls.
- *
- * Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array
- * of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature
- * function they already have.
- *
- * ```tsx
- * const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });
- *
- * <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />
- * ```
- *
- * One case it cannot resolve: an external change that lands *between* an emit and its echo, and
- * happens to equal a value still in flight, is read as our own echo. Telling those apart needs a
- * sequence number from the store rather than value matching.
- */
-declare function useBufferedValue<T>(value: T | undefined, onChange?: (next: T) => void, options?: UseBufferedValueOptions<T>): UseBufferedValueResult<T>;
-//#endregion
-export { UseBufferedValueOptions, UseBufferedValueResult, useBufferedValue };
-//# sourceMappingURL=useBufferedValue.d.ts.map

package/dist/utils/react/useBufferedValue.js

@@ -1,86 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-85abc8a | Cube Dev Team */
-import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
-import { useCallback, useRef, useState } from "react";
-
-//#region src/utils/react/useBufferedValue.ts
-const NOTHING_PENDING = [];
-/**
-* Holds a controlled value locally so a parent that echoes the new value back *late* cannot
-* overwrite what the user is doing.
-*
-* **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands
-* it. If the parent hands back the pre-keystroke string — because its state reaches the component
-* through a store that publishes a render late, or through a debounce, or a deferred update —
-* React writes that stale string into the DOM node, and a native `value` assignment collapses the
-* selection to the end. Typing in the middle of a field throws the caret to the end. The value
-* eventually lands, so it looks like a caret bug rather than a data-flow one.
-*
-* The buffer keeps the typed text on screen until the parent catches up, while still emitting
-* `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,
-* no swallowed calls.
-*
-* Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array
-* of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature
-* function they already have.
-*
-* ```tsx
-* const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });
-*
-* <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />
-* ```
-*
-* One case it cannot resolve: an external change that lands *between* an emit and its echo, and
-* happens to equal a value still in flight, is read as our own echo. Telling those apart needs a
-* sequence number from the store rather than value matching.
-*/
-function useBufferedValue(value, onChange, options = {}) {
-	const { getKey, isDisabled, isReadOnly, isBuffered = true } = options;
-	const isActive = isBuffered && value !== void 0 && !isDisabled && !isReadOnly;
-	const keyOf = (next) => getKey && next != null ? getKey(next) : next;
-	const valueKey = keyOf(value);
-	const [draft, setDraft] = useState(value);
-	const pendingRef = useRef(NOTHING_PENDING);
-	const seenKeyRef = useRef(valueKey);
-	const latestRef = useRef({
-		value,
-		onChange,
-		keyOf,
-		isActive
-	});
-	const pending = pendingRef.current;
-	const propMoved = valueKey !== seenKeyRef.current;
-	const echoAt = propMoved ? pending.indexOf(valueKey) : -1;
-	const isExternal = propMoved && echoAt < 0;
-	const rendered = isActive && !isExternal && pending.length > 0 ? draft : value;
-	useLayoutEffect$1(() => {
-		latestRef.current = {
-			value,
-			onChange,
-			keyOf,
-			isActive
-		};
-		seenKeyRef.current = valueKey;
-		if (!isActive || isExternal) pendingRef.current = NOTHING_PENDING;
-		else if (echoAt >= 0) pendingRef.current = pending.slice(echoAt + 1);
-	});
-	return {
-		value: rendered,
-		onChange: useCallback((next) => {
-			const { onChange: latestOnChange, keyOf: latestKeyOf, isActive: latestIsActive } = latestRef.current;
-			if (latestIsActive) {
-				pendingRef.current = [...pendingRef.current, latestKeyOf(next)];
-				setDraft(next);
-			}
-			latestOnChange?.(next);
-		}, []),
-		reset: useCallback(() => {
-			const { value: latestValue } = latestRef.current;
-			pendingRef.current = NOTHING_PENDING;
-			setDraft(latestValue);
-		}, [])
-	};
-}
-
-//#endregion
-export { useBufferedValue };
-//# sourceMappingURL=useBufferedValue.js.map

package/dist/utils/react/useBufferedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBufferedValue.js","names":[],"sources":["../../../src/utils/react/useBufferedValue.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nconst NOTHING_PENDING: unknown[] = [];\n\nexport interface UseBufferedValueOptions<T> {\n  /**\n   * Identity of a value, for values `Object.is` doesn't compare usefully — an array of colour\n   * stops, a settings object. Defaults to the value itself, which is what strings want.\n   */\n  getKey?: (value: T) => unknown;\n  /** Nothing can be typed into a disabled control, so there is nothing to protect. */\n  isDisabled?: boolean;\n  /** Same for a read-only one. */\n  isReadOnly?: boolean;\n  /** Escape hatch: `false` makes the hook inert and passes `value`/`onChange` straight through. */\n  isBuffered?: boolean;\n}\n\nexport interface UseBufferedValueResult<T> {\n  /** Render this instead of `value`. `undefined` passes through, meaning uncontrolled. */\n  value: T | undefined;\n  /** Call this instead of `onChange`. Still emits once per call, in the same tick. */\n  onChange: (next: T) => void;\n  /** Drop the buffer and let `value` win again. The text fields call it on blur. */\n  reset: () => void;\n}\n\n/**\n * Holds a controlled value locally so a parent that echoes the new value back *late* cannot\n * overwrite what the user is doing.\n *\n * **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands\n * it. If the parent hands back the pre-keystroke string — because its state reaches the component\n * through a store that publishes a render late, or through a debounce, or a deferred update —\n * React writes that stale string into the DOM node, and a native `value` assignment collapses the\n * selection to the end. Typing in the middle of a field throws the caret to the end. The value\n * eventually lands, so it looks like a caret bug rather than a data-flow one.\n *\n * The buffer keeps the typed text on screen until the parent catches up, while still emitting\n * `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,\n * no swallowed calls.\n *\n * Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array\n * of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature\n * function they already have.\n *\n * ```tsx\n * const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });\n *\n * <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />\n * ```\n *\n * One case it cannot resolve: an external change that lands *between* an emit and its echo, and\n * happens to equal a value still in flight, is read as our own echo. Telling those apart needs a\n * sequence number from the store rather than value matching.\n */\nexport function useBufferedValue<T>(\n  value: T | undefined,\n  onChange?: (next: T) => void,\n  options: UseBufferedValueOptions<T> = {},\n): UseBufferedValueResult<T> {\n  const { getKey, isDisabled, isReadOnly, isBuffered = true } = options;\n\n  // An `undefined` value means the control is uncontrolled — it already owns its text.\n  const isActive =\n    isBuffered && value !== undefined && !isDisabled && !isReadOnly;\n\n  const keyOf = (next: T | undefined): unknown =>\n    getKey && next != null ? getKey(next) : next;\n  const valueKey = keyOf(value);\n\n  // The only state, and the only thing that can force a render: what the user typed. It is rendered\n  // *while we are ahead of the parent* and ignored otherwise — which is what makes adopting an\n  // external value free, since there is nothing to write.\n  const [draft, setDraft] = useState(value);\n  // Keys we have emitted that the parent hasn't echoed back yet. A queue rather than one slot: the\n  // user can type again before the first echo returns, and each echo has to be recognised as ours\n  // or applying it would swallow everything typed after it.\n  const pendingRef = useRef<unknown[]>(NOTHING_PENDING);\n  // The last value we accepted as the parent's opinion — not the last one we rendered.\n  const seenKeyRef = useRef<unknown>(valueKey);\n  const latestRef = useRef({ value, onChange, keyOf, isActive });\n\n  // These three refs are read during render but written *only* in an event handler or after commit,\n  // never during a render. That is what keeps them honest under concurrent rendering: React may\n  // discard a render (an interrupted pass, a StrictMode double-invoke), and a discarded render runs\n  // no effects, so it cannot leave the bookkeeping describing a pass that never committed.\n  const pending = pendingRef.current;\n  const propMoved = valueKey !== seenKeyRef.current;\n  // Our own echo, a render or more late — possibly an earlier emit a later one superseded.\n  const echoAt = propMoved ? pending.indexOf(valueKey) : -1;\n  // A real change from the parent: undo/redo, a reset, a transformed value, another record.\n  const isExternal = propMoved && echoAt < 0;\n  const isAhead = isActive && !isExternal && pending.length > 0;\n  // Not being ahead is the whole of \"the parent wins\", so an external change needs no state write\n  // and costs no extra render. Being ahead — including when the value is the stale one the parent\n  // held *before* the keystroke — is what stops React writing that string back and collapsing the\n  // selection.\n  const rendered = isAhead ? draft : value;\n\n  useLayoutEffect(() => {\n    latestRef.current = { value, onChange, keyOf, isActive };\n    seenKeyRef.current = valueKey;\n\n    if (!isActive || isExternal) {\n      pendingRef.current = NOTHING_PENDING;\n    } else if (echoAt >= 0) {\n      pendingRef.current = pending.slice(echoAt + 1);\n    }\n  });\n\n  const handleChange = useCallback((next: T) => {\n    const {\n      onChange: latestOnChange,\n      keyOf: latestKeyOf,\n      isActive: latestIsActive,\n    } = latestRef.current;\n\n    if (latestIsActive) {\n      // A ref write in an event handler, which runs after a commit — never mid-render.\n      pendingRef.current = [...pendingRef.current, latestKeyOf(next)];\n      setDraft(next);\n    }\n\n    latestOnChange?.(next);\n  }, []);\n\n  const reset = useCallback(() => {\n    const { value: latestValue } = latestRef.current;\n\n    // Emptying the queue is what hands control back: with nothing in flight we are no longer ahead,\n    // so the parent's value is rendered again. `setDraft` is only here to schedule that render.\n    pendingRef.current = NOTHING_PENDING;\n    setDraft(latestValue);\n  }, []);\n\n  return { value: rendered, onChange: handleChange, reset };\n}\n"],"mappings":";;;;;AAIA,MAAM,kBAA6B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDrC,SAAgB,iBACd,OACA,UACA,UAAsC,EAAE,EACb;CAC3B,MAAM,EAAE,QAAQ,YAAY,YAAY,aAAa,SAAS;CAG9D,MAAM,WACJ,cAAc,UAAU,UAAa,CAAC,cAAc,CAAC;CAEvD,MAAM,SAAS,SACb,UAAU,QAAQ,OAAO,OAAO,KAAK,GAAG;CAC1C,MAAM,WAAW,MAAM,MAAM;CAK7B,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CAIzC,MAAM,aAAa,OAAkB,gBAAgB;CAErD,MAAM,aAAa,OAAgB,SAAS;CAC5C,MAAM,YAAY,OAAO;EAAE;EAAO;EAAU;EAAO;EAAU,CAAC;CAM9D,MAAM,UAAU,WAAW;CAC3B,MAAM,YAAY,aAAa,WAAW;CAE1C,MAAM,SAAS,YAAY,QAAQ,QAAQ,SAAS,GAAG;CAEvD,MAAM,aAAa,aAAa,SAAS;CAMzC,MAAM,WALU,YAAY,CAAC,cAAc,QAAQ,SAAS,IAKjC,QAAQ;AAEnC,yBAAsB;AACpB,YAAU,UAAU;GAAE;GAAO;GAAU;GAAO;GAAU;AACxD,aAAW,UAAU;AAErB,MAAI,CAAC,YAAY,WACf,YAAW,UAAU;WACZ,UAAU,EACnB,YAAW,UAAU,QAAQ,MAAM,SAAS,EAAE;GAEhD;AA2BF,QAAO;EAAE,OAAO;EAAU,UAzBL,aAAa,SAAY;GAC5C,MAAM,EACJ,UAAU,gBACV,OAAO,aACP,UAAU,mBACR,UAAU;AAEd,OAAI,gBAAgB;AAElB,eAAW,UAAU,CAAC,GAAG,WAAW,SAAS,YAAY,KAAK,CAAC;AAC/D,aAAS,KAAK;;AAGhB,oBAAiB,KAAK;KACrB,EAAE,CAAC;EAW4C,OATpC,kBAAkB;GAC9B,MAAM,EAAE,OAAO,gBAAgB,UAAU;AAIzC,cAAW,UAAU;AACrB,YAAS,YAAY;KACpB,EAAE,CAAC;EAEmD"}