@cube-dev/ui-kit 0.0.0-canary-9fab1b3 → 0.0.0-canary-8a06567

package/docs/components/fields/ColorPicker.md

@@ -1,21 +1,26 @@
 # ColorPicker
 
-A swatch button that opens the color popover. It is the same popover
-[ColorInput](./ColorInput.md) uses — three perceptual axes backed
-by [Glaze](https://github.com/tenphi/glaze) — without the text field in front of
-it.
+An input for a single color. It reads and writes color **text** — hex, `rgb()`,
+`hsl()`, `okhsl()`, `okhst()` and `oklch()` — shows the current color as a
+swatch, and opens a popover where the color can be dialed in on three
+perceptual axes.
 
-Reach for it when a color is **chosen but never typed**. Reach for `ColorInput`
-when someone needs to paste `#7a4dbf` from a brand guide.
+Every conversion goes through [Glaze](https://github.com/tenphi/glaze), so the
+canonical value the picker holds is OKHSL: bounded on every channel, and always
+inside the sRGB gamut. That is what makes an out-of-gamut state impossible and
+lets the same value be re-serialized into any of the supported notations without
+drift.
 
 ## When to Use
 
-- A toolbar or inspector where space is tight
-- A chart legend, a tag color, a cell in a dense table
-- Anywhere the exact notation is an implementation detail the user never sees
+- Theme and branding forms — a seed color, an accent, a chart series color
+- Anywhere a color has to be typed *or* explored, rather than chosen from a
+  fixed palette
+- When the stored format matters (a design token file wants `oklch()`, a legacy
+  API wants hex) and the input has to guarantee it
 
-Use [ColorInput](./ColorInput.md) instead when the color has to be
-readable and pasteable as text.
+Reach for a `RadioGroup` or `Picker` of swatches instead when the choice is
+limited to a handful of approved colors.
 
 ## Component
 
@@ -25,26 +30,28 @@ readable and pasteable as text.
 
 - **`value`** `string | null` — The selected color (controlled)
 - **`defaultValue`** `string | null` — The selected color (uncontrolled)
-- **`onChange`** `(value: string | null) => void` — Fired with the color string
-- **`format`** `'hex' | 'rgb' | 'hsl' | 'okhsl' | 'okhst' | 'oklch'` (default: `hex`) — Notation the value is written in, and the one shown on the trigger
+- **`onChange`** `(value: string | null) => void` — Fired with the color string, or `null` when the field is cleared
+- **`format`** `'hex' | 'rgb' | 'hsl' | 'okhsl' | 'okhst' | 'oklch'` (default: `hex`) — Notation the value is written in, and the one `forced` mode displays
+- **`formatMode`** `'forced' | 'derive' | 'free'` (default: `forced`) — How strictly the input text is tied to `format`
 - **`defaultSpace`** `'hst' | 'lch' | 'rgb'` (default: `hst`) — Color concept the popover opens with
-- **`children`** `ReactNode` — Replaces the color shown on the trigger. Pass `null` for a swatch on its own
-- **`placeholder`** `ReactNode` (default: `Pick a color`) — Shown on the trigger while there is no color
-- **`type`** `CubeItemProps['type']` (default: `outline`) — Visual type of the trigger
-- **`theme`** `CubeItemProps['theme']` (default: `default`) — Theme of the trigger
-- **`size`** `CubeItemProps['size']` — Size of the trigger
-- **`triggerTooltip`** `CubeItemProps['tooltip']` — Tooltip for the trigger, separate from the field tooltip
-- **`swatches`** `Array<string | { color: string; label?: string }>` — Colors to offer under the editor, as a [ColorSwatchGroup](./ColorSwatchGroup.md)
-- **`swatchColumns`** `number` — How many swatches per row. Defaults to a single row
+- **`placeholder`** `string` (default: `Pick a color`) — Text shown while the field is empty
+- **`size`** `'small' | 'medium' | 'large' | (string & {})` (default: `medium`) — Input size
 - **`isOpen`** `boolean` — Whether the popover is open (controlled)
 - **`defaultOpen`** `boolean` (default: `false`) — Whether the popover is open initially
 - **`onOpenChange`** `(isOpen: boolean) => void` — Fired when the popover opens or closes
-- **`shouldFlip`** `boolean` (default: `true`) — Whether the popover may flip to the other side of the trigger
+- **`shouldFlip`** `boolean` (default: `true`) — Whether the popover may flip to the other side of the input
+- **`onFocus`** `(event: FocusEvent) => void` — Fired when the text input receives focus
+- **`onBlur`** `(event: FocusEvent) => void` — Fired when the text input loses focus
 
-There is no `formatMode`: with no text to reconcile, `format` alone decides how
-the value is written. Everything else about the color model — the notations it
-reads, the gamut handling, the three spaces — is identical to `ColorInput` and
-documented there.
+Named CSS colors (`red`, `rebeccapurple`) are **not** accepted — they are not a
+color space, and Glaze does not resolve them either. Alpha is parsed but
+dropped: the value is always opaque.
+
+Focusing the field selects the whole value, so a pasted color replaces it
+outright. The string is the unit of editing here: a single channel is tuned with
+the sliders rather than by hand-editing one number inside `oklch(…)`. Clicking a
+field that already has focus positions the caret as usual, so the text stays
+editable by hand.
 
 ### Base Properties
 
@@ -58,76 +65,108 @@ Supports all [Field properties](../../FieldProperties.md)
 
 #### styles
 
-Customizes the wrapper around the trigger.
+Customizes the input wrapper — the element that owns the border, fill and size.
+
+**Sub-elements:**
+
+- `Prefix` — the container holding the color swatch
+- `Suffix` — the container holding the validation state, then the popover trigger
+- `InputIcon` — the swatch slot
+- `State` — the validation / loading indicator
+
+#### inputStyles
+
+Customizes the `<input>` element itself.
 
 #### triggerStyles
 
-Customizes the trigger button itself.
+Customizes the popover trigger button.
 
 #### swatchStyles
 
-Customizes the color swatch.
+Customizes the color swatch shown inside the input.
 
 ### Style Properties
 
 These properties allow direct style application without using the `styles` prop:
 
+- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **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`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
+- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier      | Type      | Description                          |
-| ------------- | --------- | ------------------------------------ |
-| `placeholder` | `boolean` | No color is selected yet             |
+| Modifier   | Type      | Description                                       |
+| ---------- | --------- | ------------------------------------------------- |
+| `focused`  | `boolean` | The text input has focus                          |
+| `hovered`  | `boolean` | The pointer is over the input                     |
+| `disabled` | `boolean` | The picker is disabled                            |
+| `valid`    | `boolean` | The field is in the valid state                   |
+| `invalid`  | `boolean` | The field is in the invalid state                 |
+| `prefix`   | `boolean` | A prefix (the swatch) is rendered                 |
+| `suffix`   | `boolean` | A suffix (the trigger) is rendered                |
 
 The swatch carries its own `empty` modifier while there is no color to show.
 
-### A palette under the editor
+## Format modes
+
+The three modes differ in how much freedom the *text* gets. The value is always
+a real color in every one of them.
 
-Pass `swatches` and a [ColorSwatchGroup](./ColorSwatchGroup.md)
-appears below the channels, so a common color is one press away.
+| Mode     | Text                                | Value                                                |
+| -------- | ----------------------------------- | ---------------------------------------------------- |
+| `forced` | Rewritten in `format` on blur/Enter | Always written in `format`                           |
+| `derive` | Left exactly as typed               | Normalized in the notation the text is written in    |
+| `free`   | Left exactly as typed               | The text itself, verbatim                            |
+
+In every mode an entry that is not a color is rejected: the previous valid color
+stays the value while it is being typed, and the text snaps back to it on blur.
+Emptying the field is not an error — it commits `null`.
 
 ```jsx
-<ColorPicker label="Brand color" swatches={palette} swatchColumns={4} />
+// A design-token form that must store OKLCH
+<ColorPicker label="Accent" format="oklch" onChange={setAccent} />
+
+// A CSS editor: keep whatever the author wrote, but guarantee it parses
+<ColorPicker label="Color" formatMode="free" onChange={setCss} />
 ```
 
-That group never offers its own custom-color escape hatch, since the escape
-hatch is a `ColorPicker` and would nest popovers without end.
+## Color spaces
 
-## Examples
+The popover edits one canonical color through three sets of axes:
 
-### Basic usage
+| Space | Axes                          | Good for                                              |
+| ----- | ----------------------------- | ----------------------------------------------------- |
+| `hst` | Hue, Saturation, Tone (OKHST) | Building ramps — equal tone steps read as equal steps |
+| `lch` | Lightness, Chroma, Hue (OKLCH)| Matching a value from a design-token file             |
+| `rgb` | Red, Green, Blue              | Matching a value from a legacy palette or a screenshot|
 
-```jsx
-<ColorPicker label="Series color" defaultValue="#7a4dbf" />
-```
+Each of these opens on its own space; the switcher inside the popover moves
+between them at any time.
 
-### A swatch on its own
+`H` means the same angle in HST and LCH, so the hue strip is identical in both.
+The chroma slider is bounded by the sRGB gamut at the current lightness and hue,
+which is why its range changes as `L` moves.
 
-Drop the label for a compact button — a toolbar, or a cell in a table.
+## Examples
+
+### Basic usage
 
 ```jsx
-<ColorPicker aria-label="Series color" value={color} onChange={setColor}>
-  {null}
-</ColorPicker>
+<ColorPicker label="Brand color" defaultValue="#7a4dbf" />
 ```
 
-Give it an `aria-label` when you do: with no visible text, that is the only
-thing naming the control.
-
-### A label of your own
+### Controlled
 
 ```jsx
-<ColorPicker value={color} onChange={setColor}>
-  Accent
-</ColorPicker>
-```
+const [color, setColor] = useState('#7a4dbf');
 
-### Trigger types
+<ColorPicker label="Brand color" value={color} onChange={setColor} />;
+```
 
 ### Inside a form
 
@@ -142,64 +181,91 @@ thing naming the control.
 </Form>
 ```
 
+### Opening on a specific space
+
+```jsx
+<ColorPicker label="Series color" defaultSpace="rgb" defaultValue="#26fcb2" />
+```
+
+### Using the value as a style
+
+Because the emitted value is a plain color string, it can go straight into a
+tasty style — including the `okhsl()` and `okhst()` notations, which tasty
+parses natively.
+
+```jsx
+const [color, setColor] = useState('okhst(264 80% 60%)');
+
+<>
+  <ColorPicker label="Fill" format="okhst" value={color} onChange={setColor} />
+  <Block fill={color} height="10x" radius="1r" />
+</>;
+```
+
 ## Accessibility
 
 ### Keyboard Navigation
 
-- `Tab` — moves focus to the trigger
-- `Space` / `Enter` — opens the popover
-- `Escape` — closes it
+- `Tab` — moves focus to the text input, then to the popover trigger
+- `Enter` — commits and normalizes the typed color without leaving the field
+- `Space` / `Enter` on the trigger — opens the popover
+- `Escape` — closes the popover
 - `Left` / `Right`, `Home` / `End` on a channel slider — moves that channel
 - `Left` / `Right` on the space switcher — moves between HST, LCH and RGB
 
 ### Screen Reader Support
 
-- The trigger announces as a button, named by the field label, `aria-label`, or
-  its own text
+- The text input announces as a textbox with the field's label
+- The trigger announces as "Open the color picker"
 - The popover announces as a dialog named "Color picker"
-- Each channel slider sits in a group named after its axis
-- The swatch is decorative; the color is announced as the trigger's text unless
-  you replace it
+- Each channel slider sits in a group named after its axis (`Hue`,
+  `Saturation`, `Tone`, `Lightness`, `Chroma`, `Red`, `Green`, `Blue`)
+- The swatch is decorative and is not announced — the text carries the value
 
 ### ARIA Properties
 
-- `aria-label` — names the trigger when there is no visible label or text
-- `aria-expanded` — reflects the popover state
+- `aria-label` — names the field when there is no visible label
+- `aria-describedby` — wired to the field description by the form system
 
 ## Best Practices
 
-1. **Do**: name a swatch-only picker
+1. **Do**: name the field, so the text input is announced meaningfully
 
    ```jsx
-   <ColorPicker aria-label="Series color">{null}</ColorPicker>
+   <ColorPicker label="Brand color" />
    ```
 
-2. **Don't**: leave a swatch-only picker unnamed — the swatch says nothing to a
-   screen reader
+2. **Don't**: rely on the swatch alone to convey the value
 
    ```jsx
-   <ColorPicker>{null}</ColorPicker>
+   <ColorPicker aria-label="" />
    ```
 
-3. **Do**: reach for `ColorInput` the moment someone might want to paste a hex
-   value; a picker alone makes that impossible.
+3. **Do**: pick the `format` your backend stores, and leave `formatMode` at
+   `forced` so the two can never disagree.
+
+4. **Don't**: use `free` mode when the value is later parsed by something
+   stricter than a browser — the text is passed through as written.
 
 ## Integration with Forms
 
 This component supports all
 [Field properties](../../FieldProperties.md) when used
-within a Form. The field value is the color string.
+within a Form. The field value is the color string, and clearing the input
+stores `null`, which makes `required` rules behave as expected.
 
 ## Suggested Improvements
 
-- A row of recent or preset swatches inside the popover
 - An eyedropper that samples a pixel from the page, where
   [`EyeDropper`](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) is
   available
-- Clearing the color back to `null` from the trigger
+- Optional alpha support, which the canonical value currently drops
+- A row of recent or preset swatches inside the popover
+- Editable numeric inputs next to each channel slider, for exact entry without
+  going through the text field
 
 ## Related Components
 
-- [ColorInput](./ColorInput.md) — the same popover behind a text field
-- [Picker](./Picker.md) — the same trigger-plus-popover shape, for lists
-- [HueSlider](./HueSlider.md) — just the hue axis
+- [HueSlider](./HueSlider.md) — just the hue axis, when only a hue is needed
+- [Slider](./Slider.md) — the primitive each channel is built from
+- [TextInput](./TextInput.md) — the input chrome this component reuses

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-9fab1b3",
+  "version": "0.0.0-canary-8a06567",
   "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",