@zyncat/ui 0.11.0 → 0.12.0

package/src/tokens/component-styles.generated.ts

@@ -0,0 +1,270 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Inline styles for Confetti, including its `--confetti-*` knobs.
+ *
+ * One interface per component that publishes scoped properties: the design tokens plus
+ * that component's own knobs, and nothing from any other component.
+ *
+ * Generated from the token and component CSS by `scripts/gen-theme.mjs` - `pnpm sync` rebuilds it.
+ */
+export interface ConfettiStyle extends CSSProperties {
+  /** `--confetti-paper-1`. Default: `oklch(0.53 0.2 288)`. */
+  '--confetti-paper-1'?: string | number;
+  /** `--confetti-paper-2`. Default: `var(--accent)`. */
+  '--confetti-paper-2'?: string | number;
+  /** `--confetti-paper-3`. Default: `oklch(0.78 0.115 62)`. */
+  '--confetti-paper-3'?: string | number;
+  /** `--confetti-paper-4`. Default: `oklch(0.67 0.18 12)`. */
+  '--confetti-paper-4'?: string | number;
+  /** `--confetti-paper-5`. Default: `var(--text-strong)`. */
+  '--confetti-paper-5'?: string | number;
+  /** `--confetti-weights`. Default: `1 1 1 1 0.45`. */
+  '--confetti-weights'?: string | number;
+  /** `--confetti-ink`. Default: `var(--text-strong)`. */
+  '--confetti-ink'?: string | number;
+  /** `--confetti-light`. Default: `var(--bg-surface)`. */
+  '--confetti-light'?: string | number;
+  /** `--confetti-shade`. Default: `42%`. */
+  '--confetti-shade'?: string | number;
+  /** `--confetti-gloss`. Default: `66%`. */
+  '--confetti-gloss'?: string | number;
+  /** `--confetti-layer`. Default: `var(--layer-toast)`. */
+  '--confetti-layer'?: string | number;
+  /** `--confetti-reverse-1`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-1))`. */
+  '--confetti-reverse-1'?: string | number;
+  /** `--confetti-reverse-2`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-2))`. */
+  '--confetti-reverse-2'?: string | number;
+  /** `--confetti-reverse-3`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-3))`. */
+  '--confetti-reverse-3'?: string | number;
+  /** `--confetti-reverse-4`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-4))`. */
+  '--confetti-reverse-4'?: string | number;
+  /** `--confetti-reverse-5`. Default: `color-mix(in oklab, var(--confetti-ink) var(--confetti-shade), var(--confetti-paper-5))`. */
+  '--confetti-reverse-5'?: string | number;
+  /** `--confetti-sheen-1`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-1))`. */
+  '--confetti-sheen-1'?: string | number;
+  /** `--confetti-sheen-2`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-2))`. */
+  '--confetti-sheen-2'?: string | number;
+  /** `--confetti-sheen-3`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-3))`. */
+  '--confetti-sheen-3'?: string | number;
+  /** `--confetti-sheen-4`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-4))`. */
+  '--confetti-sheen-4'?: string | number;
+  /** `--confetti-sheen-5`. Default: `color-mix(in oklab, var(--confetti-light) var(--confetti-gloss), var(--confetti-paper-5))`. */
+  '--confetti-sheen-5'?: string | number;
+}
+
+/** Inline styles for FlowField, including its `--flow-field-*` knobs. */
+export interface FlowFieldStyle extends CSSProperties {
+  /** `--flow-field-ink`. Default: `var(--text-subtle)`. */
+  '--flow-field-ink'?: string | number;
+  /** `--flow-field-accent`. Default: `var(--accent)`. */
+  '--flow-field-accent'?: string | number;
+  /** `--flow-field-min-height`. Default: `var(--space-10)`. */
+  '--flow-field-min-height'?: string | number;
+  /** `--flow-field-ramp-0`. Default: `var(--flow-field-ink)`. */
+  '--flow-field-ramp-0'?: string | number;
+  /** `--flow-field-ramp-1`. Default: `color-mix(in oklab, var(--flow-field-accent) 9%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-1'?: string | number;
+  /** `--flow-field-ramp-2`. Default: `color-mix(in oklab, var(--flow-field-accent) 18%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-2'?: string | number;
+  /** `--flow-field-ramp-3`. Default: `color-mix(in oklab, var(--flow-field-accent) 27%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-3'?: string | number;
+  /** `--flow-field-ramp-4`. Default: `color-mix(in oklab, var(--flow-field-accent) 36%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-4'?: string | number;
+  /** `--flow-field-ramp-5`. Default: `color-mix(in oklab, var(--flow-field-accent) 45%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-5'?: string | number;
+  /** `--flow-field-ramp-6`. Default: `color-mix(in oklab, var(--flow-field-accent) 55%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-6'?: string | number;
+  /** `--flow-field-ramp-7`. Default: `color-mix(in oklab, var(--flow-field-accent) 64%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-7'?: string | number;
+  /** `--flow-field-ramp-8`. Default: `color-mix(in oklab, var(--flow-field-accent) 73%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-8'?: string | number;
+  /** `--flow-field-ramp-9`. Default: `color-mix(in oklab, var(--flow-field-accent) 82%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-9'?: string | number;
+  /** `--flow-field-ramp-10`. Default: `color-mix(in oklab, var(--flow-field-accent) 91%, var(--flow-field-ink))`. */
+  '--flow-field-ramp-10'?: string | number;
+  /** `--flow-field-ramp-11`. Default: `var(--flow-field-accent)`. */
+  '--flow-field-ramp-11'?: string | number;
+}
+
+/** Inline styles for Lens, including its `--lens-*` knobs. */
+export interface LensStyle extends CSSProperties {
+  /** `--lens-ink`. Default: `var(--text-strong)`. */
+  '--lens-ink'?: string | number;
+  /** `--lens-surface`. Default: `var(--bg-surface)`. */
+  '--lens-surface'?: string | number;
+  /** `--lens-edge`. Default: `color-mix(in oklab, var(--lens-ink) 16%, transparent)`. */
+  '--lens-edge'?: string | number;
+  /** `--lens-highlight`. Default: `color-mix(in oklab, var(--bg-surface) 90%, transparent)`. */
+  '--lens-highlight'?: string | number;
+  /** `--lens-vignette-mid`. Default: `5%`. */
+  '--lens-vignette-mid'?: string | number;
+  /** `--lens-vignette-edge`. Default: `15%`. */
+  '--lens-vignette-edge'?: string | number;
+  /** `--lens-fringe-warm`. Default: `oklch(0.72 0.16 12 / 0.3)`. */
+  '--lens-fringe-warm'?: string | number;
+  /** `--lens-fringe-cool`. Default: `oklch(0.7 0.15 265 / 0.34)`. */
+  '--lens-fringe-cool'?: string | number;
+  /** `--lens-rim-start`. Default: `79%`. */
+  '--lens-rim-start'?: string | number;
+  /** `--lens-rim-end`. Default: `87%`. */
+  '--lens-rim-end'?: string | number;
+}
+
+/** Inline styles for MorphingText, including its `--morphing-text-*` knobs. */
+export interface MorphingTextStyle extends CSSProperties {
+  /** `--morphing-text-ink`. Default: `var(--text-strong)`. */
+  '--morphing-text-ink'?: string | number;
+  /** `--morphing-text-size`. Default: `var(--size-display-lg)`. */
+  '--morphing-text-size'?: string | number;
+  /** `--morphing-text-weight`. Default: `var(--weight-medium)`. */
+  '--morphing-text-weight'?: string | number;
+  /** `--morphing-text-leading`. Default: `1.2`. */
+  '--morphing-text-leading'?: string | number;
+  /** `--morphing-text-tracking`. Default: `var(--tracking-display)`. */
+  '--morphing-text-tracking'?: string | number;
+  /** `--morphing-text-smear`. Default: `1`. */
+  '--morphing-text-smear'?: string | number;
+  /** `--morphing-text-rule-ink`. Default: `var(--text-strong)`. */
+  '--morphing-text-rule-ink'?: string | number;
+  /** `--morphing-text-rule-accent`. Default: `var(--accent)`. */
+  '--morphing-text-rule-accent'?: string | number;
+  /** `--morphing-text-rule-height`. Default: `1px`. */
+  '--morphing-text-rule-height'?: string | number;
+  /** `--morphing-text-rule-gap`. Default: `var(--space-3)`. */
+  '--morphing-text-rule-gap'?: string | number;
+  /** `--morphing-text-rule-rest`. Default: `0.1`. */
+  '--morphing-text-rule-rest'?: string | number;
+  /** `--morphing-text-rule-lift`. Default: `0.3`. */
+  '--morphing-text-rule-lift'?: string | number;
+}
+
+/** Inline styles for Odometer, including its `--odometer-*` knobs. */
+export interface OdometerStyle extends CSSProperties {
+  /** `--odometer-cell`. Default: `1em`. */
+  '--odometer-cell'?: string | number;
+  /** `--odometer-digit`. Default: `1ch`. */
+  '--odometer-digit'?: string | number;
+  /** `--odometer-gap`. Default: `0.02em`. */
+  '--odometer-gap'?: string | number;
+  /** `--odometer-ink`. Default: `var(--text-strong)`. */
+  '--odometer-ink'?: string | number;
+  /** `--odometer-accent`. Default: `var(--accent)`. */
+  '--odometer-accent'?: string | number;
+  /** `--odometer-separator-ink`. Default: `var(--text-muted)`. */
+  '--odometer-separator-ink'?: string | number;
+  /** `--odometer-size`. Default: `var(--size-display)`. */
+  '--odometer-size'?: string | number;
+  /** `--odometer-weight`. Default: `var(--weight-medium)`. */
+  '--odometer-weight'?: string | number;
+}
+
+/** Inline styles for TypingLines, including its `--typing-lines-*` knobs. */
+export interface TypingLinesStyle extends CSSProperties {
+  /** `--typing-lines-ink`. Default: `var(--text-strong)`. */
+  '--typing-lines-ink'?: string | number;
+  /** `--typing-lines-caret-ink`. Default: `var(--accent)`. */
+  '--typing-lines-caret-ink'?: string | number;
+  /** `--typing-lines-size`. Default: `var(--size-title)`. */
+  '--typing-lines-size'?: string | number;
+  /** `--typing-lines-weight`. Default: `var(--weight-regular)`. */
+  '--typing-lines-weight'?: string | number;
+  /** `--typing-lines-leading`. Default: `1.4`. */
+  '--typing-lines-leading'?: string | number;
+  /** `--typing-lines-blink`. Default: `1080ms`. */
+  '--typing-lines-blink'?: string | number;
+  /** `--typing-lines-caret-gap`. Default: `0.12em`. */
+  '--typing-lines-caret-gap'?: string | number;
+}
+
+/** Inline styles for WeightField, including its `--weight-field-*` knobs. */
+export interface WeightFieldStyle extends CSSProperties {
+  /** `--weight-field-ink`. Default: `var(--text-strong)`. */
+  '--weight-field-ink'?: string | number;
+  /** `--weight-field-size`. Default: `6rem`. */
+  '--weight-field-size'?: string | number;
+  /** `--weight-field-leading`. Default: `1`. */
+  '--weight-field-leading'?: string | number;
+  /** `--weight-field-align`. Default: `center`. */
+  '--weight-field-align'?: string | number;
+  /** `--weight-field-pad`. Default: `var(--space-6) var(--space-4)`. */
+  '--weight-field-pad'?: string | number;
+  /** `--weight-field-tracking`. Default: `-0.05em`. */
+  '--weight-field-tracking'?: string | number;
+  /** `--weight-field-rest-weight`. Default: `300`. */
+  '--weight-field-rest-weight'?: string | number;
+  /** `--weight-field-far-weight`. Default: `400`. */
+  '--weight-field-far-weight'?: string | number;
+  /** `--weight-field-near-weight`. Default: `600`. */
+  '--weight-field-near-weight'?: string | number;
+  /** `--weight-field-peak-weight`. Default: `900`. */
+  '--weight-field-peak-weight'?: string | number;
+  /** `--weight-field-hover-padding`. Default: `calc(1em / 12)`. */
+  '--weight-field-hover-padding'?: string | number;
+  /** `--weight-field-stroke`. Default: `calc(1em * 125 / 6000)`. */
+  '--weight-field-stroke'?: string | number;
+  /** `--weight-field-stroke-peak`. Default: `calc(var(--weight-field-stroke) * 2)`. */
+  '--weight-field-stroke-peak'?: string | number;
+  /** `--weight-field-duration`. Default: `400ms`. */
+  '--weight-field-duration'?: string | number;
+  /** `--weight-field-ease`. Default: `ease`. */
+  '--weight-field-ease'?: string | number;
+  /** `--weight-field-ramp`. Default: `calc(var(--weight-field-duration) / var(--weight-field-speed))`. */
+  '--weight-field-ramp'?: string | number;
+}
+
+/** Inline styles for SupportRail, including its `--support-rail-*` knobs. */
+export interface SupportRailStyle extends CSSProperties {
+  /** `--support-rail-width`. Default: `318px`. */
+  '--support-rail-width'?: string | number;
+  /** `--support-rail-needle-width`. Default: `42px`. */
+  '--support-rail-needle-width'?: string | number;
+  /** `--support-rail-needle-height`. Default: `150px`. */
+  '--support-rail-needle-height'?: string | number;
+  /** `--support-rail-needle-duck`. Default: `0.55`. */
+  '--support-rail-needle-duck'?: string | number;
+  /** `--support-rail-needle-tracking`. Default: `0.22em`. */
+  '--support-rail-needle-tracking'?: string | number;
+  /** `--support-rail-caps-tracking`. Default: `0.13em`. */
+  '--support-rail-caps-tracking'?: string | number;
+  /** `--support-rail-grabber-width`. Default: `13px`. */
+  '--support-rail-grabber-width'?: string | number;
+  /** `--support-rail-grabber-pill`. Default: `34px`. */
+  '--support-rail-grabber-pill'?: string | number;
+  /** `--support-rail-live-size`. Default: `6px`. */
+  '--support-rail-live-size'?: string | number;
+  /** `--support-rail-live-reach`. Default: `2.6`. */
+  '--support-rail-live-reach'?: string | number;
+  /** `--support-rail-rule-width`. Default: `1.5px`. */
+  '--support-rail-rule-width'?: string | number;
+  /** `--support-rail-rule-height`. Default: `20px`. */
+  '--support-rail-rule-height'?: string | number;
+  /** `--support-rail-row-pad-block`. Default: `var(--space-4)`. */
+  '--support-rail-row-pad-block'?: string | number;
+  /** `--support-rail-row-pad-inline`. Default: `var(--space-4)`. */
+  '--support-rail-row-pad-inline'?: string | number;
+  /** `--support-rail-row-nudge`. Default: `5px`. */
+  '--support-rail-row-nudge'?: string | number;
+  /** `--support-rail-surface`. Default: `var(--bg-subtle)`. */
+  '--support-rail-surface'?: string | number;
+  /** `--support-rail-surface-raised`. Default: `var(--bg-surface)`. */
+  '--support-rail-surface-raised'?: string | number;
+  /** `--support-rail-line`. Default: `var(--border-default)`. */
+  '--support-rail-line'?: string | number;
+  /** `--support-rail-line-soft`. Default: `var(--border-subtle)`. */
+  '--support-rail-line-soft'?: string | number;
+  /** `--support-rail-accent`. Default: `var(--accent)`. */
+  '--support-rail-accent'?: string | number;
+  /** `--support-rail-live-color`. Default: `var(--success)`. */
+  '--support-rail-live-color'?: string | number;
+  /** `--support-rail-radius`. Default: `var(--radius-2xl)`. */
+  '--support-rail-radius'?: string | number;
+  /** `--support-rail-open-duration`. Default: `calc(var(--duration-slower) * 1.4)`. */
+  '--support-rail-open-duration'?: string | number;
+  /** `--support-rail-close-duration`. Default: `var(--duration-slower)`. */
+  '--support-rail-close-duration'?: string | number;
+  /** `--support-rail-needle-delay`. Default: `calc(var(--duration-slow) * 0.5)`. */
+  '--support-rail-needle-delay'?: string | number;
+  /** `--support-rail-stagger`. Default: `calc(var(--duration-fast) * 0.3)`. */
+  '--support-rail-stagger'?: string | number;
+}

package/src/tokens/elevation.css

@@ -1,22 +1,33 @@
-/* Elevation - two-layer shadows, focus/selection rings, border widths. */
+/* Elevation - layered shadows, focus/selection rings, border widths.
+   The floating steps (lg, xl) are three layers: a tight contact shadow that pins the panel to
+   what it sits on, a mid layer for form, and a wide ambient one. Drop the contact layer and the
+   panel reads soft and unanchored no matter how large the ambient blur is. */
 
-:root {
-  --shadow-xs: 0 1px 1px rgb(var(--shadow-rgb) / 0.04);
-  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 1px 1px rgb(var(--shadow-rgb) / 0.04);
-  --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / 0.04), 0 6px 12px rgb(var(--shadow-rgb) / 0.07);
-  --shadow-lg: 0 4px 8px rgb(var(--shadow-rgb) / 0.04), 0 12px 28px rgb(var(--shadow-rgb) / 0.1);
-  --shadow-xl: 0 8px 16px rgb(var(--shadow-rgb) / 0.06), 0 24px 48px rgb(var(--shadow-rgb) / 0.14);
+@layer zyncat.tokens, zyncat.components;
 
-  /* Borders - one hairline (1px); weight comes from the border color, not thickness; 2px for focus/selected. */
-  --border-hairline: 1px;
-  --border-emphasis: 1.5px;
+@layer zyncat.tokens {
+  :root {
+    --shadow-xs: 0 1px 1px rgb(var(--shadow-rgb) / 0.04);
+    --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 1px 1px rgb(var(--shadow-rgb) / 0.04);
+    --shadow-md: 0 2px 4px rgb(var(--shadow-rgb) / 0.04), 0 6px 12px rgb(var(--shadow-rgb) / 0.07);
+    --shadow-lg:
+      0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 4px 8px rgb(var(--shadow-rgb) / 0.04),
+      0 12px 28px rgb(var(--shadow-rgb) / 0.1);
+    --shadow-xl:
+      0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 8px 16px rgb(var(--shadow-rgb) / 0.06),
+      0 24px 48px rgb(var(--shadow-rgb) / 0.14);
 
-  /* Focus & selection rings - box-shadows (not outlines) so they follow border-radius. */
+    /* Borders - one hairline (1px); weight comes from the border color, not thickness; 2px for focus/selected. */
+    --border-hairline: 1px;
+    --border-emphasis: 1.5px;
 
-  /* Derive from --accent so the ring tracks the active accent and theme, never a fixed hue. */
-  --ring-accent: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent);
-  --ring-danger: 0 0 0 3px oklch(0.602 0.196 27 / 0.3);
-  --ring-warning: 0 0 0 3px color-mix(in oklab, var(--warning) 30%, transparent);
-  --ring-success: 0 0 0 3px color-mix(in oklab, var(--success) 30%, transparent);
-  --ring-offset: 0 0 0 2px var(--bg-surface), 0 0 0 4px color-mix(in oklab, var(--accent) 40%, transparent);
+    /* Focus & selection rings - box-shadows (not outlines) so they follow border-radius. */
+
+    /* Derive from --accent so the ring tracks the active accent and theme, never a fixed hue. */
+    --ring-accent: 0 0 0 3px color-mix(in oklab, var(--accent) 32%, transparent);
+    --ring-danger: 0 0 0 3px oklch(0.602 0.196 27 / 0.3);
+    --ring-warning: 0 0 0 3px color-mix(in oklab, var(--warning) 30%, transparent);
+    --ring-success: 0 0 0 3px color-mix(in oklab, var(--success) 30%, transparent);
+    --ring-offset: 0 0 0 2px var(--bg-surface), 0 0 0 4px color-mix(in oklab, var(--accent) 40%, transparent);
+  }
 }

package/src/tokens/fonts.css

@@ -1,3 +1,3 @@
 /* Webfonts - Geist (UI) + Geist Mono (numerals, data, code) from Google Fonts; self-host woff2 for prod. */
 
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

package/src/tokens/glass.css

@@ -1,20 +1,24 @@
 /* Glass tokens - structural frosted-surface pieces; per-tone tints live in semantic.css. */
 
-:root {
-  --glass-blur: 9px;
-  --glass-blur-strong: 16px;
-  --glass-saturate: 1.5;
+@layer zyncat.tokens, zyncat.components;
 
-  --glass-sheen: linear-gradient(
-    145deg,
-    rgb(255 255 255 / 0.55) 0%,
-    rgb(255 255 255 / 0.1) 24%,
-    rgb(255 255 255 / 0) 46%
-  );
-  --glass-sheen-rest: 0.8;
-  --glass-sheen-hover: 1;
+@layer zyncat.tokens {
+  :root {
+    --glass-blur: 9px;
+    --glass-blur-strong: 16px;
+    --glass-saturate: 1.5;
 
-  --glass-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
-  --glass-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 2px 5px rgb(var(--shadow-rgb) / 0.05);
-  --glass-shadow-hover: 0 2px 4px rgb(var(--shadow-rgb) / 0.06), 0 8px 18px rgb(var(--shadow-rgb) / 0.1);
+    --glass-sheen: linear-gradient(
+      145deg,
+      rgb(255 255 255 / 0.55) 0%,
+      rgb(255 255 255 / 0.1) 24%,
+      rgb(255 255 255 / 0) 46%
+    );
+    --glass-sheen-rest: 0.8;
+    --glass-sheen-hover: 1;
+
+    --glass-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
+    --glass-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 2px 5px rgb(var(--shadow-rgb) / 0.05);
+    --glass-shadow-hover: 0 2px 4px rgb(var(--shadow-rgb) / 0.06), 0 8px 18px rgb(var(--shadow-rgb) / 0.1);
+  }
 }

package/src/tokens/icons.css

@@ -1,7 +1,11 @@
 /* Icon sizing - sm 16 (inline) - md 20 (default) - lg 24 (emphasis). */
 
-:root {
-  --icon-sm: 17px;
-  --icon-md: 20px;
-  --icon-lg: 26px;
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.tokens {
+  :root {
+    --icon-sm: 17px;
+    --icon-md: 20px;
+    --icon-lg: 26px;
+  }
 }

package/src/tokens/layers.css

@@ -1,6 +1,11 @@
 /* Z-index bands - one stacking contract; --layer-overlay is a BAND (base + stack depth) so a later overlay paints above an earlier one. */
-:root {
-  --layer-overlay: 1000;
-  --layer-toast: 1050;
-  --layer-tooltip: 1100;
+
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.tokens {
+  :root {
+    --layer-overlay: 1000;
+    --layer-toast: 1050;
+    --layer-tooltip: 1100;
+  }
 }

package/src/tokens/motion-scale.ts

@@ -15,3 +15,7 @@ export type DurationToken = 'fast' | 'base' | 'slow' | 'slower' | 'slowest';
  *  - `glide` cubic-bezier(0.55, 0, 0.15, 1) - symmetric in-out travel; a persistent element moving
  *    between positions, never enter/exit. */
 export type EaseToken = 'standard' | 'entrance' | 'exit' | 'spring' | 'glide';
+
+export type DistanceToken = 'sm' | 'md' | 'lg';
+
+export type ScaleToken = 'panel' | 'floating' | 'chip';

package/src/tokens/motion-tokens.ts

@@ -1,3 +1,5 @@
+import type { DistanceToken, DurationToken, EaseToken, ScaleToken } from './motion-scale';
+
 export interface MotionTransition {
   type?: 'spring' | 'tween' | 'inertia' | 'keyframes';
   duration?: number;
@@ -21,32 +23,37 @@ export interface MotionTransition {
 
 export type Bezier = [number, number, number, number];
 
-import type { DurationToken, EaseToken } from './motion-scale';
-export type { DurationToken, EaseToken } from './motion-scale';
+export type { DistanceToken, DurationToken, EaseToken, ScaleToken } from './motion-scale';
 
 export interface MotionTokens {
   /** seconds - fast 0.14 - base 0.2 - slow 0.3 - slower 0.45 - slowest 0.9 */
   dur: Record<DurationToken, number>;
   ease: Record<EaseToken, Bezier>;
+  dist: Record<DistanceToken, number>;
+  scale: Record<ScaleToken, number>;
   /** ready-made Motion transitions */
   t: { enter: MotionTransition; exit: MotionTransition; layout: MotionTransition; settle: MotionTransition };
   reduced: boolean;
 }
 
-const DEFAULT_DUR: MotionTokens['dur'] = { fast: 0.14, base: 0.2, slow: 0.3, slower: 0.45, slowest: 0.9 };
+type MotionScales = Pick<MotionTokens, 'dur' | 'ease' | 'dist' | 'scale'>;
+
+const DEFAULT_DUR: MotionTokens['dur'] = { fast: 0.14, base: 0.25, slow: 0.33, slower: 0.45, slowest: 0.9 };
 const DEFAULT_EASE: MotionTokens['ease'] = {
   standard: [0.2, 0, 0, 1],
-  entrance: [0.16, 1, 0.3, 1],
+  entrance: [0.25, 1, 0.4, 1],
   exit: [0.4, 0, 1, 1],
   spring: [0.34, 1.4, 0.5, 1],
   glide: [0.55, 0, 0.15, 1],
 };
+const DEFAULT_DIST: MotionTokens['dist'] = { sm: 8, md: 16, lg: 24 };
+const DEFAULT_SCALE: MotionTokens['scale'] = { panel: 0.98, floating: 0.95, chip: 0.9 };
 
-function build(dur: MotionTokens['dur'], ease: MotionTokens['ease']): MotionTokens {
+function build(scales: MotionScales): MotionTokens {
+  const { dur, ease } = scales;
   const reduced = dur.base <= 0.005;
   return {
-    dur,
-    ease,
+    ...scales,
     reduced,
     t: {
       enter: { duration: dur.base, ease: ease.entrance },
@@ -59,34 +66,57 @@ function build(dur: MotionTokens['dur'], ease: MotionTokens['ease']): MotionToke
 
 function readFromDom(): MotionTokens {
   const cs = getComputedStyle(document.documentElement);
+  const rootFontSize = parseFloat(cs.fontSize) || 16;
   const seconds = (name: string, fallback: number): number => {
     const v = cs.getPropertyValue(name).trim();
     const n = v.slice(-2) === 'ms' ? parseFloat(v) / 1000 : parseFloat(v);
     return isNaN(n) ? fallback : n;
   };
+  const pixels = (name: string, fallback: number): number => {
+    const v = cs.getPropertyValue(name).trim();
+    const n = parseFloat(v);
+    if (isNaN(n)) return fallback;
+    return v.endsWith('rem') ? n * rootFontSize : n;
+  };
+  const ratio = (name: string, fallback: number): number => {
+    const n = parseFloat(cs.getPropertyValue(name));
+    return isNaN(n) ? fallback : n;
+  };
   const bezier = (name: string, fallback: Bezier): Bezier => {
     const m = cs.getPropertyValue(name).match(/-?[\d.]+/g);
     return m && m.length === 4 ? (m.map(Number) as Bezier) : fallback;
   };
-  return build(
-    {
+  return build({
+    dur: {
       fast: seconds('--duration-fast', DEFAULT_DUR.fast),
       base: seconds('--duration-base', DEFAULT_DUR.base),
       slow: seconds('--duration-slow', DEFAULT_DUR.slow),
       slower: seconds('--duration-slower', DEFAULT_DUR.slower),
       slowest: seconds('--duration-slowest', DEFAULT_DUR.slowest),
     },
-    {
+    ease: {
       standard: bezier('--ease-standard', DEFAULT_EASE.standard),
       entrance: bezier('--ease-entrance', DEFAULT_EASE.entrance),
       exit: bezier('--ease-exit', DEFAULT_EASE.exit),
       spring: bezier('--ease-spring', DEFAULT_EASE.spring),
       glide: bezier('--ease-glide', DEFAULT_EASE.glide),
     },
-  );
+    dist: {
+      sm: pixels('--distance-sm', DEFAULT_DIST.sm),
+      md: pixels('--distance-md', DEFAULT_DIST.md),
+      lg: pixels('--distance-lg', DEFAULT_DIST.lg),
+    },
+    scale: {
+      panel: ratio('--scale-panel', DEFAULT_SCALE.panel),
+      floating: ratio('--scale-floating', DEFAULT_SCALE.floating),
+      chip: ratio('--scale-chip', DEFAULT_SCALE.chip),
+    },
+  });
 }
 
 export const UIMotion: MotionTokens =
-  typeof document !== 'undefined' ? readFromDom() : build(DEFAULT_DUR, DEFAULT_EASE);
+  typeof document !== 'undefined'
+    ? readFromDom()
+    : build({ dur: DEFAULT_DUR, ease: DEFAULT_EASE, dist: DEFAULT_DIST, scale: DEFAULT_SCALE });
 
 export default UIMotion;

package/src/tokens/motion-tokens.usage.md

@@ -0,0 +1,16 @@
+# motion-tokens - @zyncat/ui/motion-tokens
+
+Group: dev
+
+TypeScript readers for the motion token vocabulary - duration/ease/distance/scale token names resolved to the live CSS values.
+
+Use it to time your own animation code off the same tokens the components read, so your motion
+retimes with the theme and collapses under reduced motion exactly like the library's. UIMotion
+carries dur/ease/dist/scale maps, ready-made enter/exit/layout/settle transitions on `t`, and
+`reduced`, which reflects prefers-reduced-motion.
+
+```tsx
+import { UIMotion } from '@zyncat/ui/motion-tokens';
+
+const settle = { duration: UIMotion.dur.base, ease: UIMotion.ease.standard };
+```

package/src/tokens/motion.css

@@ -1,49 +1,67 @@
-/* Motion system - durations, brand curves, and pre-composed transitions; smooths every layout shift by default. */
-
-:root {
-  --duration-fast: 140ms;
-  --duration-base: 200ms;
-  --duration-slow: 300ms;
-  --duration-slower: 450ms; /* large-surface movement - dialog, sheet, page-scale reveals */
-  --duration-slowest: 900ms; /* hero-scale movement - card expansion, container transforms; the scale's ceiling */
-  --duration-spin: 600ms; /* continuous loaders only; deliberately outside the UI-transition scale */
-  --duration-pulse: 1600ms; /* ambient live/processing breathing; not collapsed under reduced motion */
-
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
-  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
-  --ease-glide: cubic-bezier(
-    0.55,
-    0,
-    0.15,
-    1
-  ); /* in-out travel - persistent element gliding between siblings; not for enter/exit */
-
-  --transition-control:
-    color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
-    border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
-  --transition-colors:
-    color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
-    border-color var(--duration-fast) var(--ease-standard);
-  --transition-opacity: opacity var(--duration-base) var(--ease-standard);
-  --transition-transform: transform var(--duration-base) var(--ease-standard);
-
-  /* Layout transition - animatable stand-ins for width/height; apply wherever size may change. */
-  --transition-layout:
-    grid-template-rows var(--duration-slow) var(--ease-entrance),
-    grid-template-columns var(--duration-slow) var(--ease-entrance),
-    max-height var(--duration-slow) var(--ease-entrance), max-width var(--duration-slow) var(--ease-entrance);
-}
+/* Motion system - durations, brand curves, travel distances, rest scales, and pre-composed transitions;
+   smooths every layout shift by default. */
+
+@layer zyncat.tokens, zyncat.components;
 
-/* Accessibility: honor reduced-motion globally - every consumer gets it free. */
-@media (prefers-reduced-motion: reduce) {
+@layer zyncat.tokens {
   :root {
-    --duration-fast: 1ms;
-    --duration-base: 1ms;
-    --duration-slow: 1ms;
-    --duration-slower: 1ms;
-    --duration-slowest: 1ms;
-    --duration-spin: 1200ms; /* slow the loader, never freeze it (1ms = blur) */
+    --duration-fast: 140ms;
+    --duration-base: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 450ms; /* large-surface movement - dialog, sheet, page-scale reveals */
+    --duration-slowest: 900ms; /* hero-scale movement - card expansion, container transforms; the scale's ceiling */
+    --duration-spin: 600ms; /* continuous loaders only; deliberately outside the UI-transition scale */
+    --duration-pulse: 1600ms; /* ambient live/processing breathing; not collapsed under reduced motion */
+
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --ease-entrance: cubic-bezier(0.25, 1, 0.4, 1);
+    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
+    --ease-glide: cubic-bezier(
+      0.55,
+      0,
+      0.15,
+      1
+    ); /* in-out travel - persistent element gliding between siblings; not for enter/exit */
+
+    /* Travel - how far a surface moves on the way in or out. A magnitude scale, snapped to the 4px
+     spacing spine; pick by how far the surface has conceptually come, not by how big it is. */
+    --distance-sm: 0.5rem; /* 8px - settling into place; the surface is already where it belongs */
+    --distance-md: 1rem; /* 16px - arriving from an adjacent position - page turns, tab panels, paged ranges */
+    --distance-lg: 1.5rem; /* 24px - arriving from outside the surface - a toast joining its stack */
+
+    /* Rest scale - what a surface scales from on the way in, and to on the way out. Picked by surface
+     size, not by taste: the same ratio reads as more movement the wider the surface, so a dialog
+     needs a smaller one than a tag to land at the same perceived distance. */
+    --scale-panel: 0.98; /* full-width surfaces - dialog, modal, sheet */
+    --scale-floating: 0.96; /* floating surfaces - popover, tooltip, menu, toast, alert */
+    --scale-chip: 0.9; /* small inline elements - tag, badge, count */
+
+    --transition-control:
+      color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+    --transition-colors:
+      color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard);
+    --transition-opacity: opacity var(--duration-base) var(--ease-standard);
+    --transition-transform: transform var(--duration-base) var(--ease-standard);
+
+    /* Layout transition - animatable stand-ins for width/height; apply wherever size may change. */
+    --transition-layout:
+      grid-template-rows var(--duration-slow) var(--ease-entrance),
+      grid-template-columns var(--duration-slow) var(--ease-entrance),
+      max-height var(--duration-slow) var(--ease-entrance), max-width var(--duration-slow) var(--ease-entrance);
+  }
+
+  /* Accessibility: honor reduced-motion globally - every consumer gets it free. */
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --duration-fast: 1ms;
+      --duration-base: 1ms;
+      --duration-slow: 1ms;
+      --duration-slower: 1ms;
+      --duration-slowest: 1ms;
+      --duration-spin: 1200ms; /* slow the loader, never freeze it (1ms = blur) */
+    }
   }
 }