prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/responsive.md

@@ -0,0 +1,274 @@
+# Responsive — every screen from 320px to 2560px
+
+A screen built on the kit works at any width from 320 to 2560px and at 400% zoom without losing a
+single function. Most of it is built into the components; this file says what the kit already does
+(do not rebuild it) and what is left to you.
+
+## Principles
+
+1. **Narrow first.** Design from 320px and add layout as room appears; never cut a desktop down.
+2. **Break by content, not by device.** A breakpoint goes where the layout starts to look wrong: a line
+   longer than ~80 characters, buttons that no longer fit, empty space.
+3. **Rearrange, never hide.** Every function available on desktop is available on a phone — in another
+   place or in a menu.
+4. **Fluid by default.** `%`, `fr`, `minmax`, `flex-wrap`, `auto-fill` instead of fixed widths. A fixed
+   width is an exception you can explain.
+5. **A component answers for itself.** Kit components adapt to the width of their own container
+   (container queries), not the window — a card behaves the same in a sidebar, a modal and a grid.
+6. **Nothing jumps.** Room for loading data, hover controls and counters is reserved in advance
+   (`Skeleton` + `Crossfade`, [motion.md](motion.md)).
+7. **Input is not screen size.** A wide screen can be touch, a narrow one can have a mouse. Hover and
+   target size follow `(hover)` / `(pointer)`, never the width.
+
+## Breakpoints
+
+The kit has one set: **640 · 768 · 1024 · 1280**. Use them only in media queries of the app frame;
+everything inside a page breaks by its container.
+
+| Width | Typical | What changes |
+|---|---|---|
+| < 640 | phone | one column; floating layers become bottom sheets; Modal is a bottom sheet; Drawer full width; `BottomNav` in `AppShell.Footer` |
+| 640–767 | small tablet | gutters 24; two-column grids by `auto-fill`; the Sidebar is still off-canvas, so BottomNav stays |
+| 768–1023 | tablet | Sidebar on-canvas (`offCanvas="auto"`) |
+| 1024–1279 | laptop | gutters 32; list + details side by side when the content asks for it |
+| ≥ 1280 | desktop | extra columns or a side panel; tables and dashboards use every pixel |
+
+- Write "below 640" as `@media (max-width: 639px)`, "from 640" as `@media (min-width: 640px)`.
+- CSS custom properties cannot be used inside media / container conditions: write the number.
+- Inside your own blocks prefer container queries: `container-type: inline-size` on the block,
+  `@container (min-width: 30rem)` inside it.
+- The app takes the full width; cap only text (`PageContent.Root maxWidth="readable"`).
+- Required minimum: `<meta name="viewport" content="width=device-width, initial-scale=1">`, no
+  `user-scalable=no`, no horizontal page scroll at 320px.
+
+## What the kit already does
+
+Use these as they are; never wrap them in your own breakpoints.
+
+| Need | Built in |
+|---|---|
+| app frame | AppShell gutters 16 → 24 → 32; `AppHeader` un-sticks on screens lower than 480px, respects safe areas and, below 36rem of its width, drops the description and folds the search into an icon |
+| app navigation | Sidebar: on-canvas from 768px, an off-canvas panel below (`offCanvas="auto"`) opened by `AppHeader.MenuButton`, which shows itself below 768px; `BottomNav` in `AppShell.Footer` for 2–6 app sections on phones — flat or a floating glass capsule (`floating`) with an optional round `BottomNav.Action`, icons with or without labels (`iconOnly`); the shell hides it by itself while the Sidebar rail is on screen (from 768px with `offCanvas="auto"`) |
+| page panel | `PageToolbar` — search and filter first, one row when wide, stacked rows when narrow (below) |
+| page header | `PageContent.Header`: actions wrap under the title |
+| switchers | SegmentedControl and Tabs never wrap: they scroll inside themselves (hidden scrollbar, faded edges, a vertical wheel scrolls them sideways), the active item is scrolled into view, stretched items tend to equal width, the indicator moves only after a person's choice; Tabs collapse icons and descriptions first |
+| tables | DataTable scrolls inside itself, edge shadows show hidden columns, `stickyFirstColumn`, `DataTable.ColumnsMenu` for a column chooser, the toolbar stacks below a 30rem table, sticky head off on short screens |
+| floating layers | Popover (opened from a Trigger), Dropdown, Select (and Datepicker, ColorPresets) never wider than the viewport − 16, 8 from the edges, flip when out of room; below 640 they open as a bottom sheet — scrim, grab handle, swipe down to close, page scroll locked; Tooltip and TagSelect stay anchored |
+| dialogs | Modal is a bottom sheet with a handle below 640 (swipe down closes it while `closeOnOutsideClick` allows); footer actions stack on phones and in a dialog narrower than 360px; `Sheet` is a bottom sheet for a short task at every width (centred at 560 on a tablet or desktop) and closes with a swipe down from its handle or header; a Drawer has no swipe — buttons, Escape and the scrim close it |
+| date picking | Datepicker shows two months and side presets only when they fit; otherwise one month and presets above |
+| system messages | Banner actions move under the text in a narrow container; Notification stays within the viewport with safe-area insets |
+| chat | `Message` bubbles fit their content in CSS and cap at 30rem and 85% of the chat column, file / contact / location cards at 16rem and 75%, a round video at its size token × 1.15 and the row width (the Composer's recording preview at 70%), so a chat works from 320px; the message menu is a bottom sheet below 640, the reaction bar opens on a long press; `Composer` takes its container's width, keeps 16px text and 44px hit areas on touch, and the recording bar covers the field without changing the row height; `VoicePlayer` shrinks its waveform to fit; `Chat` fills its pane, a chat beside its dialogs is `PageContent.Split` (one pane at a time when narrow); `Chat.Header` keeps the avatar, a title that truncates and icon-only actions, `Chat.Search` puts its counter and arrows after a shrinking field, `Chat.Pinned` truncates its line, the «к последним» button floats inside the thread at its bottom-end, and the Composer stays one row (paperclip · field · button) from 320px with its bars above it |
+| schedules and boards | `Gantt` scrolls inside itself with the header and the first column pinned; the first column narrows (12 → 10 → 6rem by the chart's width, or only the avatar); a long press on touch creates a one-unit bar; rows and days are virtualized. `Kanban` columns are 18rem from 40rem of board width, below that 85% of it with snapping so the next column peeks; the strip scrolls sideways inside the board |
+| cards and properties | Card templates stack and wrap in a narrow container; `DescriptionList` stacks label over value below 24rem of its width; FileUpload `layout="grid"` shows 5 · 4 · 3 · 2 tiles across by its own width |
+| fields | text ≥ 16px under a coarse pointer (no iOS zoom on focus); labels above fields; affixes in the field row |
+| codes | DigitInput cells 36–64px, `fullWidth` cells share a phone column |
+| touch | hover effects only under `(hover: hover)`; under `(pointer: coarse)` small controls get a 44px hit area; nothing is hover-only |
+
+## Page panel — `PageToolbar`
+
+One strip at the top of the page holds up to five slots, each in a fixed place. The order is a rule:
+search and filter first, then the sections, the view and the primary action last; the active filters
+always sit right under the search and filter. Every row is 12 from the next; a slot alone in its row
+stretches to the full width. Write the slots in JSX in that order — it is the Tab order.
+
+| Slot | Holds | Place |
+|---|---|---|
+| `PageToolbar.Tools` | search + filter button: `SmartFilter.Toolbar` | first, the stretchy item of the top row |
+| `PageToolbar.Sections` | sections of the page: a `fullWidth` SegmentedControl with counts | after the Tools when wide; its own row under the chips when narrow |
+| `PageToolbar.View` | period, table / cards, columns | by content when wide; its own row when narrow |
+| `PageToolbar.Actions` | the primary action («Создать», «Сохранить 3 изменения») | top row, at the end, always |
+| `PageToolbar.Chips` | active filters: `SmartFilter.Chips` | right under the search and filter, only while there are chips |
+
+```text
+Wide (toolbar ≥ 56rem) — one row, chips under the search:
+[ Search ————————— ][ Filter ][ Sections ][ Period ][ + Create ]
+[ Город: Москва × ][ + Добавить фильтр ]
+
+Narrow — rows, every one 12 from the next:
+[ Search ———————————— ][ Filter ]   [ + ]
+[ Город: Москва × ][ + Добавить фильтр ]
+[ Section 1 ][ Section 2 ][ Section 3 ] —— stretch ——
+[ ⏱ 7 дней ———————————————————————————— ⌄ ]
+
+Narrow, no search — the sections take the first row:
+[ Overview ][ Activity ][ Resources ]
+[ ⏱ 24 часа ———————————————————————————————— ⌄ ]
+```
+
+```tsx
+import {
+  Button,
+  Icon,
+  PageToolbar,
+  SegmentedControl,
+  Select,
+  SmartFilter,
+  type SmartFilterField,
+  type SmartFilterValue,
+} from "prime-ui-kit";
+import { useState } from "react";
+
+const FIELDS: SmartFilterField[] = [
+  { key: "city", label: "Город", options: [{ value: "msk", label: "Москва" }] },
+];
+
+export function OrdersPanel() {
+  const [section, setSection] = useState("all");
+  const [period, setPeriod] = useState("30d");
+  const [filter, setFilter] = useState<SmartFilterValue>({});
+  const [search, setSearch] = useState("");
+
+  return (
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={setFilter}
+      search={search}
+      onSearchChange={setSearch}
+    >
+      <PageToolbar.Root aria-label="Заказы">
+        <PageToolbar.Tools>
+          <SmartFilter.Toolbar />
+        </PageToolbar.Tools>
+        <PageToolbar.Sections>
+          <SegmentedControl.Root fullWidth value={section} onValueChange={setSection} aria-label="Раздел">
+            <SegmentedControl.Item value="all">
+              Все<SegmentedControl.Count>128</SegmentedControl.Count>
+            </SegmentedControl.Item>
+            <SegmentedControl.Item value="active">
+              В работе<SegmentedControl.Count>12</SegmentedControl.Count>
+            </SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </PageToolbar.Sections>
+        <PageToolbar.View>
+          <Select.Root value={period} onValueChange={setPeriod}>
+            <Select.Trigger aria-label="Период">
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="7d">7 дней</Select.Item>
+              <Select.Item value="30d">30 дней</Select.Item>
+            </Select.Content>
+          </Select.Root>
+        </PageToolbar.View>
+        <PageToolbar.Actions>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.add" />
+            </Button.Icon>
+            Новый заказ
+          </Button.Root>
+        </PageToolbar.Actions>
+        <PageToolbar.Chips>
+          <SmartFilter.Chips />
+        </PageToolbar.Chips>
+      </PageToolbar.Root>
+    </SmartFilter.Root>
+  );
+}
+```
+
+- Write the slots in the reading order of the wide layout; the toolbar reorders them visually.
+- One tier for the whole panel (default `m`): never `size` on one control inside — wrapped rows must
+  stay level. A denser page wraps the toolbar in `<ControlSizeProvider value="s">` and gives
+  `SmartFilter.Root` and `Select.Root` `size="s"` too — they do not read the host tier.
+- The primary action never leaves the top row. On a phone it may become icon-only with `aria-label`;
+  it never disappears.
+- Section totals go into `SegmentedControl.Count`, not into stat cards above the table.
+- A long form saves through the panel's action with a count («Сохранить 3 изменения»), never a sticky
+  bar at the bottom of a phone screen.
+- The search first, the filter button after it at its own width (`SmartFilter.Toolbar` lays them out);
+  chips under the panel, one tier smaller, wrapping, with «Сбросить все».
+- Do not duplicate search: if the panel has one, the list below filters by it.
+
+## Switchers
+
+- **Three width modes:** by content (`fullWidth` off), full width (`fullWidth`), full width only when
+  narrow (a `fullWidth` SegmentedControl inside `PageToolbar.Sections` — the toolbar decides).
+- Sections of a page → SegmentedControl in `PageToolbar.Sections`; panels inside a card or a section →
+  Tabs (the folder look belongs to its panel).
+- Items that do not fit scroll inside the switcher — never wrap to a second line, never truncate. The
+  switcher is a sideways `ScrollContainer`: its hidden edges fade, a vertical mouse wheel scrolls it
+  sideways, touch pans it.
+- A long page split into sections (settings, dashboard): the switcher scrolls to the section and marks
+  the current one.
+
+## List + details, side panels
+
+- A list people work through record by record (mail, a messenger, tickets) is `PageContent.Split`:
+  the list in a 16–20rem column with the details beside it from 48rem of the split's own width, one
+  pane at a time with `PageContent.BackButton` below it. Details opened now and then from a table
+  open in a Drawer.
+- A side panel of details becomes full-screen on a phone (`Drawer.Content` is full width below 640).
+- Its period / view controls stay visible on every tab of the panel.
+
+## Components on narrow widths — what you still decide
+
+**Tables.** Let DataTable scroll inside itself; offer a column chooser (`DataTable.ColumnsMenu` in
+`toolbar`; the key column `hideable: false`); `stickyFirstColumn` for the name. On phones a table / cards switch in `PageToolbar.View` is fine — silently dropping columns
+by breakpoint is not. Never ask to rotate the phone.
+
+**Card grids.** Columns come from the card's minimum width, not from a list of breakpoints:
+`grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--prime-space-16) * 4)), 1fr))`.
+Cards align to the top; a card with a list shows 6–8 rows and scrolls inside (`ScrollContainer`).
+
+**Forms.** One column on phones. Pairs («от / до», two buttons) wrap with
+`flex: 1 1 calc(var(--prime-space-24) * 2)` instead of shrinking. Labels above fields (the kit's
+`label` prop), never inside next to the value. Right `type`, `inputMode` and `autoComplete` on every
+`Input.Field`.
+
+**Charts.** A trend is `Sparkline` — it takes its container's width and is scrubbed by touch. A chart of
+your own does the same: container width, the legend wraps under it, axis labels thin out.
+
+**Media.** `width` + `height` or `aspect-ratio` on every image and video, `max-width: 100%`; raster
+images with `srcset` + `sizes` (Thumbnail and Avatar already reserve their box).
+
+## Interaction and accessibility
+
+| Rule | Number |
+|---|---|
+| minimum touch target (WCAG 2.5.8 AA) | 24 × 24px or a free 24px circle |
+| recommended target for primary actions and `(pointer: coarse)` | 44 × 44px |
+| reflow without horizontal scroll (WCAG 1.4.10) | 320px wide = 1280px at 400% zoom |
+| text contrast | 4.5:1; large (≥ 24px) 3:1 |
+
+- Nothing important only on hover: whatever hover shows is reachable by focus and visible (or a tap
+  away) under `(hover: none)`. Your own hover styles go inside `@media (hover: hover)`.
+- Bigger under a coarse pointer: `@media (pointer: coarse)` raises your own row and button heights;
+  the dense layout stays for the mouse.
+- Real elements: `<button>`, `<a href>`, `<input>` with a label; an icon-only button has `aria-label`.
+- Zoom stays allowed and the font size is never locked: the kit's tokens follow the browser text-size
+  setting.
+- Selected is never colour alone (the kit's selected states add fill, weight or a check).
+- No theme flash: `applyTheme` before the first paint.
+
+## Layout stability and speed
+
+Target CLS ≤ 0.1: nothing moves while loading or when a filter changes.
+
+- Loading holds the shape of the content: `Skeleton` in the data's geometry inside `Crossfade` (a table:
+  DataTable `loading`). A spinner instead of a skeleton jumps when the data arrives.
+- A refetch keeps the previous data on screen (`aria-busy`) — a new filter or period does not flash
+  the page.
+- Room for dynamic parts is reserved: banners, the chips row, hover controls never push neighbours.
+- Fonts: `font-display: swap` with a matched fallback (the kit's `fonts.css` does it).
+
+## Checklist before handing a screen over
+
+Drag the window through 320, 390, 768, 1024, 1280 and 1920px — continuously, not only at these points.
+
+- [ ] No horizontal page scroll at any width (tables and switchers scroll inside themselves).
+- [ ] The primary action is in the top row of the panel at every width.
+- [ ] Every item alone in its row stretches; items of stretched switchers are equal.
+- [ ] All controls in a row share one height; no «staircase» after a wrap.
+- [ ] Text never overlaps and is cut only at its own block's edge; cut text has a tooltip or `title`.
+- [ ] Popovers and pickers fit at 320px; below 640 they open as sheets.
+- [ ] A filter, period or tab change does not shake the page; loading shows a skeleton of the same shape.
+- [ ] 200% and 400% zoom at 1280px: everything reachable without two-dimensional scrolling.
+- [ ] Keyboard: focus visible, Tab order follows the reading order.
+- [ ] Touch: no hover-only functions, targets ≥ 24 × 24px (44 for primary actions).
+- [ ] Phone landscape (height < 480px): sticky parts do not eat the screen.
+- [ ] Both themes and reduced motion.
+
+Automate the cheap part: a screenshot test of key pages at three widths and a check that
+`document.documentElement.scrollWidth <= innerWidth`.

package/dist/theme/chartColors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The chart palette as CSS values, for a chart library that takes colors as strings (SVG `fill`,
+ * `stroke`, a series `color`). Each is a `var(--prime-color-chart-*)`: it follows the theme with no
+ * re-render. Assign `series` in order and never cycle; fold a ninth series into `other`.
+ */
+export declare const chartColors: {
+    /** Categorical series 1…8: blue, orange, teal, yellow, pink, green, purple, red. */
+    readonly series: readonly ["var(--prime-color-chart-1)", "var(--prime-color-chart-2)", "var(--prime-color-chart-3)", "var(--prime-color-chart-4)", "var(--prime-color-chart-5)", "var(--prime-color-chart-6)", "var(--prime-color-chart-7)", "var(--prime-color-chart-8)"];
+    /** The «Прочее» series or share. */
+    readonly other: "var(--prime-color-chart-other)";
+    /** Gridlines. */
+    readonly grid: "var(--prime-color-chart-grid)";
+    /** The axis line and ticks; axis labels take `--prime-color-text-muted`. */
+    readonly axis: "var(--prime-color-chart-axis)";
+    /** Sequential magnitude 1…5 (heatmap cells), from near the ground to full. */
+    readonly scale: readonly ["var(--prime-color-chart-scale-1)", "var(--prime-color-chart-scale-2)", "var(--prime-color-chart-scale-3)", "var(--prime-color-chart-scale-4)", "var(--prime-color-chart-scale-5)"];
+    /** Text on scale steps 4–5; steps 1–3 take `--prime-color-text-primary`. */
+    readonly scaleFg: "var(--prime-color-chart-scale-fg)";
+};
+export type ChartColors = typeof chartColors;

package/dist/tokens/primitives.d.ts

@@ -36,6 +36,8 @@ export declare const primitiveTokens: {
             readonly 600: "#3f59f0";
             readonly 700: "#2f4ae0";
             readonly 800: "#2540c8";
+            /** Dark-theme sequential chart scale (`color.chart.scale.2`). */
+            readonly 900: "#283a9a";
             readonly 950: "#1b2249";
         };
         readonly red: {
@@ -68,6 +70,7 @@ export declare const primitiveTokens: {
             readonly 400: "#4ade80";
             readonly 500: "#22c55e";
             readonly 700: "#15803d";
+            readonly 800: "#166534";
         };
         readonly teal: {
             readonly 100: "#ccfbf1";
@@ -91,6 +94,32 @@ export declare const primitiveTokens: {
             readonly 500: "#a855f7";
             readonly 700: "#7e22ce";
         };
+        /**
+         * Categorical chart hues: not ramps but one set, validated together (dataviz checks — OKLCH
+         * lightness band, chroma floor, CVD and normal-vision separation of neighbours in the
+         * `color.chart` order, ≥ 3:1 on the layer grounds). Light steps for gray.0–50 grounds, dark steps
+         * for gray.950–850. Blue is cobalt (600 light, 500 dark). Change one only by re-running the checks.
+         */
+        readonly chart: {
+            readonly light: {
+                readonly orange: "#d95926";
+                readonly teal: "#13946a";
+                readonly yellow: "#b07800";
+                readonly pink: "#d1487c";
+                readonly green: "#008300";
+                readonly purple: "#4a3aa7";
+                readonly red: "#e34948";
+            };
+            readonly dark: {
+                readonly orange: "#d95926";
+                readonly teal: "#199e70";
+                readonly yellow: "#c98500";
+                readonly pink: "#d55181";
+                readonly green: "#008300";
+                readonly purple: "#9085e9";
+                readonly red: "#e66767";
+            };
+        };
         readonly pink: {
             readonly 100: "#fce7f3";
             readonly 300: "#f9a8d4";
@@ -124,6 +153,7 @@ export declare const primitiveTokens: {
         readonly 8: "8px";
         readonly 10: "10px";
         readonly 12: "12px";
+        readonly 14: "14px";
         readonly 16: "16px";
         readonly full: "9999px";
     };
@@ -185,6 +215,7 @@ export declare const primitiveTokens: {
         readonly 80: "80ms";
         readonly 150: "150ms";
         readonly 230: "230ms";
+        readonly 300: "300ms";
         readonly 380: "380ms";
         readonly 570: "570ms";
     };

package/dist/tokens/semantic.d.ts

@@ -13,13 +13,35 @@ export declare const semanticTokens: {
             /** Soft shade over an edge that hides scrolled content (DataTable columns). */
             readonly edgeShadow: "rgba(17, 19, 24, 0.14)";
             /**
-             * Translucent glass over content (floating BottomNav), always with a light backdrop blur:
-             * clear enough that the content reads through it, as Liquid Glass.
+             * Translucent glass over content (floating BottomNav), always with a strong backdrop blur:
+             * dense, as the iOS tab bar — the content shows through as soft shapes.
              */
-            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-0) 58%, transparent)";
-            /** The specular top edge of a glass surface: the line that makes it read as glass. */
+            readonly glass: "color-mix(in srgb, var(--prime-ref-color-gray-0) 72%, transparent)";
+            /** The light that catches on the rim of a glass surface: the line that makes it read as glass. */
             readonly glassEdge: "rgba(255, 255, 255, 0.85)";
         };
+        /**
+         * Over a photo the picture is the ground, not the theme: one look in both themes. `shade` sits
+         * under small text and controls (an index, a delete button).
+         * `pill` sits under a caption over a video (a duration, a message's time and ticks): denser
+         * than `shade`, so `pillFg` — the muted tone of a caption, not bold white — keeps AA over a
+         * white frame.
+         */
+        readonly media: {
+            readonly shade: "rgba(17, 19, 24, 0.56)";
+            readonly shadeFg: "{color.gray.0}";
+            /**
+             * A round disk over media (play, cancel, retry, download — Button `shade`, the play mark):
+             * lighter than `shade` under a softer blur, so the frame shows through; its white glyph
+             * keeps 3:1 (a graphical object) even over a white frame. Pills keep `shade` / `pill`:
+             * they carry text, which needs the denser ground.
+             */
+            readonly disk: "rgba(17, 19, 24, 0.48)";
+            readonly pill: "rgba(17, 19, 24, 0.72)";
+            readonly pillFg: "rgba(255, 255, 255, 0.8)";
+            /** The ground of a full-screen media viewer: near black, so any picture reads at its truest. */
+            readonly stage: "{color.gray.950}";
+        };
         /**
          * Translucent state washes: they sit on any background, including ones off the ladder (an
          * image, a tinted banner). Resting fills of controls come from the ladder instead
@@ -72,6 +94,7 @@ export declare const semanticTokens: {
         };
         readonly success: {
             readonly default: "{color.green.700}";
+            readonly hover: "{color.green.800}";
             readonly fg: "{color.white}";
             readonly soft: "{color.green.100}";
             readonly text: "{color.green.700}";
@@ -119,6 +142,68 @@ export declare const semanticTokens: {
             solid: string;
             solidFg: string;
         }>;
+        /**
+         * Chat bubbles (`Message`). An incoming bubble is a surface on the ladder (one step off its
+         * host); an outgoing one is a tinted host off the ladder in the accent hue, and everything inside
+         * it (meta, links, reply bar, waveform, reactions, players) reads these roles through the
+         * variables the bubble sets. `muted` keeps AA on `bg`; `accent` draws links, the reply bar and
+         * the played waveform, `accentFg` the glyph on an accent disk; `fill` / `fillHover` are inner
+         * tiles (reply, link preview), `track` the unplayed waveform, `chip` / `chipHover` a reaction
+         * chip that is not the reader's (neutral, not tinted).
+         */
+        readonly message: {
+            readonly outgoing: {
+                readonly bg: "{color.cobalt.100}";
+                readonly text: "{color.gray.925}";
+                readonly muted: "{color.gray.600}";
+                readonly accent: "{color.cobalt.700}";
+                readonly accentFg: "{color.white}";
+                /** A failed send, a failed upload: AA on `bg`. */
+                readonly danger: "{color.red.700}";
+                readonly fill: "color-mix(in srgb, var(--prime-ref-color-cobalt-700) 10%, transparent)";
+                readonly fillHover: "color-mix(in srgb, var(--prime-ref-color-cobalt-700) 16%, transparent)";
+                readonly track: "color-mix(in srgb, var(--prime-ref-color-cobalt-700) 28%, transparent)";
+                /**
+                 * A reaction chip that is not the reader's: a neutral dark wash over `bg`, precomposed
+                 * (opaque), so the ring of its avatars matches it.
+                 */
+                readonly chip: "color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, var(--prime-ref-color-cobalt-100))";
+                readonly chipHover: "color-mix(in srgb, var(--prime-ref-color-gray-925) 12%, var(--prime-ref-color-cobalt-100))";
+            };
+        };
+        /**
+         * Data visualisation (foundation §3, SKILL/foundations.md «Charts»). Categories wear these,
+         * statuses wear the tones.
+         * - `1`…`8`: categorical series in one fixed order — blue, orange, teal, yellow, pink, green,
+         *   purple, red. Assign in order, never cycle; a ninth series folds into `other`. Palette hues
+         *   (`color` props) map onto the same steps (`--hue-chart`), so a category keeps its color in a
+         *   chart and in a ProgressBar share.
+         * - `other`: the «Прочее» share. `grid`: gridlines. `axis`: the axis line and ticks (axis
+         *   labels wear text tokens).
+         * - `scale.1`…`scale.5`: sequential magnitude (heatmap cells), one hue from near the ground to
+         *   full; `scaleFg` is the text on steps 4–5 (steps 1–3 take `text.primary`).
+         */
+        readonly chart: {
+            readonly 1: "{color.cobalt.600}";
+            readonly 2: "{color.chart.light.orange}";
+            readonly 3: "{color.chart.light.teal}";
+            readonly 4: "{color.chart.light.yellow}";
+            readonly 5: "{color.chart.light.pink}";
+            readonly 6: "{color.chart.light.green}";
+            readonly 7: "{color.chart.light.purple}";
+            readonly 8: "{color.chart.light.red}";
+            readonly other: "{color.gray.400}";
+            readonly grid: "{color.gray.100}";
+            readonly axis: "{color.gray.300}";
+            readonly scale: {
+                readonly 1: "{color.cobalt.100}";
+                readonly 2: "{color.cobalt.200}";
+                readonly 3: "{color.cobalt.300}";
+                readonly 4: "{color.cobalt.600}";
+                readonly 5: "{color.cobalt.800}";
+            };
+            readonly scaleFg: "{color.white}";
+        };
     };
     readonly font: {
         readonly family: {
@@ -300,6 +385,11 @@ export declare const semanticTokens: {
         };
         /** Step between items of a staggered first render. */
         readonly stagger: "{duration.80}";
+        /**
+         * Period unit of a loading loop (Spinner turns once in 3 units, 6 under reduced motion). A
+         * loading cue is information, like a gesture clock: globals.css does not zero it.
+         */
+        readonly loop: "{duration.570}";
         /** Blur that hides a change of shape while two states swap in place (icon → check, letters). */
         readonly blur: "2px";
         /** `:active` scale of pressable controls; `compact` for icon-only and small targets. */
@@ -524,6 +614,69 @@ export declare const semanticTokens: {
             readonly radius: "{radius.12}";
         };
     };
+    /**
+     * A media album (`Gallery`): the size cap of its box — an album is at most this wide, a lone
+     * portrait this tall — the narrowest it stands over a caption, and the gap between its tiles.
+     */
+    readonly gallery: {
+        readonly maxSize: "22.5rem";
+        /** The narrowest a gallery stands above a caption: a lone portrait widens to it (cover). */
+        readonly minSize: "16rem";
+        readonly gap: "2px";
+    };
+    /**
+     * The full-screen media viewer (`MediaViewer`): the gap between two pages while one slides into
+     * the other, and the inset of its bars from the screen edges (the safe areas are added on top).
+     */
+    /**
+     * A round disk over media (`--prime-color-media-disk`): the backdrop blur behind it — gentle,
+     * so the frame under the disk stays recognisable.
+     */
+    readonly mediaDisk: {
+        readonly blur: "{space.1}";
+    };
+    readonly mediaViewer: {
+        readonly pageGap: "{space.6}";
+        readonly inset: "{space.4}";
+    };
+    /**
+     * Chat bubble geometry (`Message`): the corner radius (one on every corner of every bubble), the
+     * padding, the gap inside a group of one author and between groups,
+     * the width cap of a bubble, and the diameter of a video message.
+     */
+    readonly message: {
+        readonly radius: "{radius.14}";
+        readonly paddingX: "{space.3}";
+        readonly paddingY: "{space.2}";
+        readonly groupGap: "{space.2}";
+        readonly gap: "{space.4}";
+        readonly maxWidth: "30rem";
+        /** The content width of a card in a bubble (file, contact, location): one width for all. */
+        readonly cardWidth: "16rem";
+        readonly mediaMaxHeight: "22.5rem";
+        readonly videoNote: "14.5rem";
+        /**
+         * A message changing size (a reaction row, a transcript that opens): the bubble's box, its
+         * parts and the messages around glide in one calm stroke, between `fast` and `base`; zeroed
+         * under reduced motion with the other durations.
+         */
+        readonly morphDuration: "{duration.300}";
+        /**
+         * Messages that step back: the unselected ones in selection mode, the others while the chat
+         * points at one (a jump blinks them, the current search match keeps them back). Opacity and a
+         * slight desaturation; the message pointed at or selected stays at full strength.
+         */
+        readonly dimOpacity: "0.42";
+        readonly dimSaturation: "0.6";
+        /**
+         * The tail of the last bubble of a run: a curl out of its square bottom corner on the author's
+         * side, drawn with the bubble's own fill through `tailMask` (the incoming shape, pointing to
+         * the start; outgoing mirrors it). Rows reserve `tailWidth` on the author's side.
+         */
+        readonly tailWidth: "{space.2}";
+        readonly tailHeight: "{space.4}";
+        readonly tailMask: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E\")";
+    };
     /** Floating panel shared by Select, Dropdown, Combobox, Datepicker, Popover. Item radius = radius − padding. */
     readonly panel: {
         readonly radius: "{radius.12}";
@@ -547,6 +700,8 @@ export declare const semanticTokens: {
         readonly radius: "{radius.16}";
         readonly padding: "{space.6}";
         readonly viewportPadding: "{space.4}";
+        /** A dialog of one or two fields. */
+        readonly widthXs: "22.5rem";
         readonly widthS: "27.5rem";
         readonly widthM: "35rem";
         readonly widthL: "45rem";
@@ -559,8 +714,10 @@ export declare const semanticTokens: {
         readonly widthL: "40rem";
         readonly widthXl: "50rem";
     };
-    /** Bottom sheets: Drawer `side="bottom"`, Modal and floating layers on a narrow viewport. */
+    /** Bottom sheets: Sheet, and Modal and floating layers on a narrow viewport. */
     readonly sheet: {
+        /** Side padding of the Sheet zones. */
+        readonly padding: "{space.6}";
         readonly radius: "{radius.16}";
         /** The grab bar at the top edge and the strip that holds it. */
         readonly handleWidth: "2.25rem";
@@ -568,36 +725,44 @@ export declare const semanticTokens: {
         readonly handleArea: "{space.5}";
         /** Room kept above a sheet so the page behind stays visible. */
         readonly topGap: "{space.10}";
-        /** A bottom sheet on a tablet or desktop is never narrower than this (= Modal m). */
-        readonly minWidth: "35rem";
+        /** A Sheet on a tablet or desktop: centred at this width (= Modal m); full width on a phone. */
+        readonly width: "35rem";
     };
     readonly bottomNav: {
         /** Bar height without the safe-area inset: icon 20 + gap 4 + label 12 and air around them. */
         readonly height: "3.25rem";
         /** An icon-only flat bar: no label row, so it is lower. */
         readonly iconOnlyHeight: "{space.12}";
-        /**
-         * Floating capsule (iOS 26 tab bar): items 44 high — icon-only items are 44 squares, the touch
-         * size — inset 4 inside the capsule, so the selection capsule sits clear of its edge (52 in all).
-         */
-        readonly floatingItemSize: "2.75rem";
-        readonly floatingPadding: "{space.1}";
         readonly paddingX: "{space.2}";
         /** Between the icon and the label. */
         readonly itemGap: "{space.1}";
         /** The box that holds the icon and anchors the count. */
-        readonly indicatorWidth: "{space.7}";
-        readonly indicatorHeight: "{space.5}";
+        readonly glyphWidth: "{space.7}";
+        readonly glyphHeight: "{space.5}";
         /** A light icon (20) over a small label (10, as the iOS tab bar): the bar stays quiet. */
         readonly iconSize: "{icon.20}";
         readonly labelSize: "{font.size.10}";
         readonly labelLineHeight: "{font.lineHeight.12}";
         /**
-         * Floating: the capsule's gap from the screen edges and the blur behind it — light, as Liquid
-         * Glass: the content stays recognisable under the glass, only softened.
+         * Floating capsule, the iOS 26 tab bar three quarters its size: 46 high (40 icons only), items
+         * inset 4, so the selection capsule sits clear of the rim; an 18 glyph over a 9 label, 2
+         * apart, with air above and below.
+         */
+        readonly floatingHeight: "2.875rem";
+        readonly floatingIconOnlyHeight: "2.5rem";
+        readonly floatingIconSize: "1.125rem";
+        readonly floatingLabelSize: "0.5625rem";
+        readonly floatingLabelLineHeight: "0.6875rem";
+        readonly floatingItemGap: "0.125rem";
+        readonly floatingPadding: "{space.1}";
+        /** Between the capsule and a round `BottomNav.Action` beside it. */
+        readonly floatingGap: "{space.2}";
+        /**
+         * Floating: the capsule's gap from the screen edges and the blur behind it — strong, as the
+         * iOS tab bar: the page under the glass shows only as soft shapes.
          */
         readonly floatingInset: "{space.3}";
-        readonly blur: "0.5rem";
+        readonly blur: "0.875rem";
     };
     /**
      * Tooltip tiers: a chip of tier T is as tall as a menu item of tier T (24 · 28 · 32 · 36 · 40),
@@ -646,10 +811,16 @@ export declare const semanticTokens: {
         /** Gap from the trigger to the chip body (the arrow sits inside it). */
         readonly offset: "{space.2}";
     };
+    /**
+     * DataTable rows: the minimum row height per table `size` (public, so a skeleton or a matrix
+     * outside the table can stand in its geometry) and the cell padding.
+     */
     readonly table: {
+        readonly rowHeightXs: "{space.9}";
         readonly rowHeightS: "{space.9}";
         readonly rowHeightM: "2.75rem";
         readonly rowHeightL: "3.25rem";
+        readonly rowHeightXl: "3.25rem";
         readonly cellPaddingX: "{space.3}";
     };
     readonly layout: {