@moldable-ai/ui 0.2.19 → 0.2.20

package/src/components/ui/toggle.md

@@ -0,0 +1,73 @@
+# Toggle
+
+## Purpose
+
+`Toggle` represents a persistent binary view or formatting state, such as showing a sidebar, pinning an inspector, enabling word wrap, or applying bold text.
+
+Use `Button` for a one-shot command and `Switch` for a settings-style boolean that is clearer as on/off.
+
+## Usage patterns
+
+```tsx
+import { WrapText } from 'lucide-react'
+import { Toggle } from '@moldable-ai/ui'
+
+;<Toggle
+  pressed={wrap}
+  onPressedChange={setWrap}
+  size="sm"
+  className="cursor-pointer"
+  aria-label="Wrap lines"
+>
+  <WrapText />
+  <span className="hidden sm:inline">Wrap</span>
+</Toggle>
+```
+
+For an icon-only toolbar control:
+
+```tsx
+<Toggle
+  defaultPressed
+  variant="outline"
+  size="sm"
+  className="cursor-pointer px-0"
+  aria-label="Pin inspector"
+>
+  <Pin />
+</Toggle>
+```
+
+Pair icon-only use with a tooltip.
+
+## API summary
+
+- Built on Radix Toggle and accepts its root props.
+- `pressed` and `onPressedChange`: controlled state.
+- `defaultPressed`: uncontrolled initial state.
+- `variant`: `default` or `outline`.
+- `size`: `default`, `sm`, or `lg`.
+- Supports native button accessibility props such as `aria-label` and `disabled`.
+- `toggleVariants` is exported and shared by `ToggleGroup`.
+
+## Do
+
+- Use controlled state when the preference affects another pane or persisted setting.
+- Make the pressed state legible through shape or icon treatment as well as color.
+- Add `cursor-pointer`, an accessible name, and a tooltip for icon-only toggles.
+- Keep toolbar toggles compact and aligned with adjacent controls.
+- Use a specific icon tied to the state.
+
+## Don't
+
+- Do not use a toggle for an action that immediately completes.
+- Do not label state ambiguously; prefer “Wrap lines” over “Mode”.
+- Do not use a disabled-looking style without the real `disabled` prop.
+- Do not put critical destructive or submit actions in a toggle.
+- Do not hide a primary workflow state solely in an unlabeled icon.
+
+## Moldable considerations
+
+Toggles are most useful in dense pane toolbars and editor chrome. Hide a secondary text label at narrow widths before hiding the control itself. If the state changes how the agent should interpret the current surface, update desktop chat instructions rather than adding explanatory UI.
+
+Avoid redundant controls: a sidebar controlled by `SidebarTrigger` does not need a second toggle, and app-level commands should mirror important view toggles when keyboard access matters.

package/src/components/ui/toolbar.md

@@ -0,0 +1,21 @@
+# Toolbar
+
+Compact pane chrome for context and actions.
+
+```tsx
+<Toolbar position="top">
+  <ToolbarContent>
+    <ToolbarTitle>Notes</ToolbarTitle>
+    <ToolbarDescription>Local workspace</ToolbarDescription>
+  </ToolbarContent>
+  <ToolbarActions>
+    <Button size="icon-sm" aria-label="New note">
+      <Plus />
+    </Button>
+  </ToolbarActions>
+</Toolbar>
+```
+
+Use one toolbar per pane. Put the current context before actions and keep one
+clear primary action. Toolbars are not marketing headers. Icon-only actions
+need labels and tooltips.

package/src/styles/index.css

@@ -5,20 +5,260 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* Keep Sonner notifications visually aligned with Moldable's local-update notice. */
+[data-sonner-toaster].toaster [data-sonner-toast][data-styled='true'] {
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  box-shadow: var(--material-shadow-overlay);
+  font-size: 0.875rem;
+  -webkit-backdrop-filter: blur(var(--material-blur-overlay));
+  backdrop-filter: blur(var(--material-blur-overlay));
+}
+
+[data-sonner-toaster].toaster
+  [data-sonner-toast][data-styled='true']
+  [data-button] {
+  height: 1.75rem;
+  padding-inline: 0.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-size: 0.75rem;
+  transition: background-color var(--motion-duration-fast)
+    var(--motion-ease-standard);
+}
+
+[data-sonner-toaster].toaster
+  [data-sonner-toast][data-styled='true']
+  [data-button]:hover {
+  background: color-mix(in oklch, var(--primary) 90%, transparent);
+}
+
+.message-scroller-viewport {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+.message-scroller-viewport[data-scrollable='end'] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+}
+
+.message-scroller-viewport[data-scrollable='start'] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black 100%
+  );
+}
+
+.message-scroller-viewport[data-scrollable='start end'] {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4rem,
+    black calc(100% - 4rem),
+    transparent 100%
+  );
+}
+
+/* ChatGPT-style user-message rail: compact at rest, expanding around hover. */
+[data-message-navigation-marker] {
+  --message-navigation-progress: 0;
+  transform: scaleX(calc(0.2308 + 0.7692 * var(--message-navigation-progress)));
+  transition:
+    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    background-color 150ms ease,
+    opacity 150ms ease;
+}
+
+:is(
+    [data-message-navigation-row]:hover,
+    [data-message-navigation-row]:focus-visible
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 1;
+  background-color: var(--foreground);
+  opacity: 1;
+}
+
+:is(
+    [data-message-navigation-row]:has(
+      + [data-message-navigation-row]:is(:hover, :focus-visible)
+    ),
+    [data-message-navigation-row]:is(:hover, :focus-visible)
+      + [data-message-navigation-row]
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 0.7;
+}
+
+:is(
+    [data-message-navigation-row]:has(
+      + [data-message-navigation-row]
+        + [data-message-navigation-row]:is(:hover, :focus-visible)
+    ),
+    [data-message-navigation-row]:is(:hover, :focus-visible)
+      + [data-message-navigation-row]
+      + [data-message-navigation-row]
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 0.4;
+}
+
+:is(
+    [data-message-navigation-row]:has(
+      + [data-message-navigation-row]
+        + [data-message-navigation-row]
+        + [data-message-navigation-row]:is(:hover, :focus-visible)
+    ),
+    [data-message-navigation-row]:is(:hover, :focus-visible)
+      + [data-message-navigation-row]
+      + [data-message-navigation-row]
+      + [data-message-navigation-row]
+  )
+  [data-message-navigation-marker] {
+  --message-navigation-progress: 0.2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-message-navigation-marker] {
+    transition-duration: 0s;
+  }
+}
+
+@keyframes moldable-chat-fullscreen-enter {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[data-moldable-chat-fullscreen][data-state='open'] {
+  animation: moldable-chat-fullscreen-enter 280ms cubic-bezier(0.22, 1, 0.36, 1);
+  transform-origin: bottom center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-moldable-chat-fullscreen][data-state='open'] {
+    animation-duration: 0s;
+  }
+}
+
 /* Ensure Tailwind scans UI component class strings */
 @source "../../dist/**/*.{js,jsx,ts,tsx}";
+@source "../catalog/**/*.{js,jsx,ts,tsx}";
 @source "../components/**/*.{js,jsx,ts,tsx}";
 @source "../lib/**/*.{js,jsx,ts,tsx}";
 @source "../hooks/**/*.{js,jsx,ts,tsx}";
 @source "../index.{js,jsx,ts,tsx}";
 
 @theme inline {
+  --font-sans: var(--font-family-ui);
+  --font-mono: var(--font-family-mono);
+
+  --text-ui-display: var(--type-display-size);
+  --text-ui-display--line-height: var(--type-display-line-height);
+  --text-ui-display--font-weight: var(--type-display-weight);
+  --text-ui-display--letter-spacing: var(--type-display-tracking);
+  --text-ui-heading: var(--type-heading-size);
+  --text-ui-heading--line-height: var(--type-heading-line-height);
+  --text-ui-heading--font-weight: var(--type-heading-weight);
+  --text-ui-heading--letter-spacing: var(--type-heading-tracking);
+  --text-ui-title: var(--type-title-size);
+  --text-ui-title--line-height: var(--type-title-line-height);
+  --text-ui-title--font-weight: var(--type-title-weight);
+  --text-ui-title--letter-spacing: var(--type-title-tracking);
+  --text-ui-body: var(--type-body-size);
+  --text-ui-body--line-height: var(--type-body-line-height);
+  --text-ui-label: var(--type-label-size);
+  --text-ui-label--line-height: var(--type-label-line-height);
+  --text-ui-caption: var(--type-caption-size);
+  --text-ui-caption--line-height: var(--type-caption-line-height);
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --radius-control: var(--shape-control);
+  --radius-container: var(--shape-container);
+  --radius-overlay: var(--shape-overlay);
+  --radius-window: var(--window-corner-radius);
+
+  --spacing-control-gap: var(--density-control-gap);
+  --spacing-control-inline: var(--density-control-padding-inline);
+  --spacing-control-xs: var(--density-control-height-xs);
+  --spacing-control-sm: var(--density-control-height-sm);
+  --spacing-control-md: var(--density-control-height-md);
+  --spacing-control-lg: var(--density-control-height-lg);
+  --spacing-row: var(--density-row-height);
+  --spacing-toolbar: var(--density-toolbar-height);
+  --spacing-pane: var(--density-pane-padding);
+  --spacing-section: var(--density-section-gap);
+
+  --ease-standard: var(--motion-ease-standard);
+  --ease-enter: var(--motion-ease-enter);
+  --ease-exit: var(--motion-ease-exit);
+  --ease-spring: var(--motion-ease-spring);
+  --shadow-panel: var(--material-shadow-panel);
+  --shadow-overlay: var(--material-shadow-overlay);
+  --shadow-window: var(--material-shadow-window);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-disabled: var(--text-disabled);
+  --color-surface-canvas: var(--surface-canvas);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-recessed: var(--surface-recessed);
+  --color-surface-sidebar: var(--surface-sidebar);
+  --color-surface-toolbar: var(--surface-toolbar);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-selected: var(--surface-selected);
+  --color-separator: var(--separator);
+  --color-separator-strong: var(--separator-strong);
+  --color-control-hover: var(--control-hover);
+  --color-control-pressed: var(--control-pressed);
+  --color-control-selected: var(--control-selected);
+  --color-control-selected-foreground: var(--control-selected-foreground);
+  --color-control-disabled: var(--control-disabled);
+  --color-control-focus: var(--control-focus);
+  --color-control-invalid: var(--control-invalid);
+  --color-window-chrome: var(--window-chrome-background);
+  --color-window-chrome-foreground: var(--window-chrome-foreground);
+  --color-window-chrome-muted: var(--window-chrome-muted-foreground);
+  --color-window-border: var(--window-border);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
@@ -67,7 +307,7 @@
   --color-terminal-stdout: var(--terminal-stdout);
   --color-terminal-stderr: var(--terminal-stderr);
   --color-terminal-error: var(--terminal-error);
-  --chat-safe-padding: var(--chat-safe-padding);
+  --spacing-chat-safe: var(--chat-safe-padding);
 }
 
 @keyframes moldable-chat-shimmer {
@@ -451,6 +691,57 @@
 }
 
 :root {
+  /*
+   * Stable design decisions. Components and applications should consume these
+   * semantic roles instead of deriving their own grays, sizes, or timings.
+   */
+  --font-family-ui:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-mono: ui-monospace, Menlo, Consolas, monospace;
+
+  --type-display-size: 2rem;
+  --type-display-line-height: 2.25rem;
+  --type-display-weight: 650;
+  --type-display-tracking: -0.035em;
+  --type-heading-size: 1.5rem;
+  --type-heading-line-height: 1.75rem;
+  --type-heading-weight: 650;
+  --type-heading-tracking: -0.025em;
+  --type-title-size: 1.125rem;
+  --type-title-line-height: 1.5rem;
+  --type-title-weight: 600;
+  --type-title-tracking: -0.015em;
+  --type-body-size: 0.8125rem;
+  --type-body-line-height: 1.25rem;
+  --type-label-size: 0.75rem;
+  --type-label-line-height: 1rem;
+  --type-caption-size: 0.625rem;
+  --type-caption-line-height: 0.75rem;
+
+  --density-control-height-xs: 1.5rem;
+  --density-control-height-sm: 2rem;
+  --density-control-height-md: 2.25rem;
+  --density-control-height-lg: 2.5rem;
+  --density-control-gap: 0.375rem;
+  --density-control-padding-inline: 0.75rem;
+  --density-row-height: 2.25rem;
+  --density-toolbar-height: 2.5rem;
+  --density-pane-padding: 0.75rem;
+  --density-section-gap: 1rem;
+
+  --shape-control: 0.5rem;
+  --shape-container: 0.65rem;
+  --shape-overlay: 0.75rem;
+
+  --motion-duration-instant: 80ms;
+  --motion-duration-fast: 120ms;
+  --motion-duration-normal: 180ms;
+  --motion-duration-slow: 280ms;
+  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --motion-ease-spring: cubic-bezier(0.22, 1.15, 0.36, 1);
+
   --radius: 0.65rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
@@ -495,6 +786,81 @@
   --status-stopped: oklch(0.552 0.016 285.938);
   --status-pending: oklch(0.75 0.15 75);
   --status-error: oklch(0.5866 0.1994 31.76);
+
+  --text-primary: var(--foreground);
+  --text-secondary: var(--muted-foreground);
+  --text-tertiary: color-mix(
+    in oklch,
+    var(--muted-foreground) 72%,
+    transparent
+  );
+  --text-disabled: color-mix(
+    in oklch,
+    var(--muted-foreground) 50%,
+    transparent
+  );
+  --surface-canvas: var(--background);
+  --surface-raised: var(--card);
+  --surface-recessed: color-mix(in oklch, var(--muted) 52%, var(--background));
+  --surface-sidebar: var(--sidebar);
+  --surface-toolbar: color-mix(in oklch, var(--background) 82%, transparent);
+  --surface-overlay: color-mix(in oklch, var(--popover) 92%, transparent);
+  --surface-selected: var(--accent);
+  --separator: color-mix(in oklch, var(--border) 78%, transparent);
+  --separator-strong: var(--border);
+  --control-hover: color-mix(in oklch, var(--foreground) 6%, transparent);
+  --control-pressed: color-mix(in oklch, var(--foreground) 10%, transparent);
+  --control-selected: var(--accent);
+  --control-selected-foreground: var(--accent-foreground);
+  --control-disabled: color-mix(
+    in oklch,
+    var(--muted-foreground) 10%,
+    transparent
+  );
+  --control-focus: var(--ring);
+  --control-invalid: var(--destructive);
+
+  --material-blur-toolbar: 16px;
+  --material-blur-overlay: 20px;
+  --material-saturation: 1.12;
+  --material-shadow-panel:
+    0 1px 2px oklch(0.15 0.005 285 / 6%), 0 4px 12px oklch(0.15 0.005 285 / 4%);
+  --material-shadow-overlay:
+    0 8px 24px oklch(0.15 0.005 285 / 12%), 0 2px 6px oklch(0.15 0.005 285 / 8%);
+  --material-shadow-window: 0 24px 80px oklch(0.1 0.005 285 / 22%);
+
+  /*
+   * Renderer boundary for embedded and standalone windows. The host may set
+   * these properties on the document root; zero-value defaults are safe in a
+   * normal browser or embedded webview.
+   */
+  --window-safe-area-top: env(safe-area-inset-top, 0px);
+  --window-safe-area-inline-end: env(safe-area-inset-right, 0px);
+  --window-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --window-safe-area-inline-start: env(safe-area-inset-left, 0px);
+  --window-titlebar-height: env(titlebar-area-height, 0px);
+  --window-drag-region-height: var(--window-titlebar-height);
+  --window-control-inset-inline-start: 0px;
+  --window-control-inset-inline-end: 0px;
+  --window-content-inset-top: max(
+    var(--window-safe-area-top),
+    var(--window-titlebar-height)
+  );
+  --window-content-inset-inline-end: max(
+    var(--window-safe-area-inline-end),
+    var(--window-control-inset-inline-end)
+  );
+  --window-content-inset-bottom: var(--window-safe-area-bottom);
+  --window-content-inset-inline-start: max(
+    var(--window-safe-area-inline-start),
+    var(--window-control-inset-inline-start)
+  );
+  --window-corner-radius: 0px;
+  --window-chrome-background: var(--surface-toolbar);
+  --window-chrome-foreground: var(--text-primary);
+  --window-chrome-muted-foreground: var(--text-secondary);
+  --window-border: var(--separator);
+
   /* Terminal - stays dark in both modes */
   --terminal: oklch(0.16 0 0);
   --terminal-header: oklch(0.22 0 0);
@@ -504,7 +870,33 @@
   --terminal-stdout: oklch(0.75 0 0);
   --terminal-stderr: oklch(0.78 0.12 75);
   --terminal-error: oklch(0.7 0.16 25);
-  --chat-safe-padding: 104px;
+  --chat-safe-padding: 0px;
+}
+
+:where([data-density='compact']) {
+  --density-control-height-xs: 1.375rem;
+  --density-control-height-sm: 1.75rem;
+  --density-control-height-md: 2rem;
+  --density-control-height-lg: 2.25rem;
+  --density-control-gap: 0.25rem;
+  --density-control-padding-inline: 0.625rem;
+  --density-row-height: 1.875rem;
+  --density-toolbar-height: 2rem;
+  --density-pane-padding: 0.625rem;
+  --density-section-gap: 0.75rem;
+}
+
+:where([data-density='comfortable']) {
+  --density-control-height-xs: 1.75rem;
+  --density-control-height-sm: 2.25rem;
+  --density-control-height-md: 2.5rem;
+  --density-control-height-lg: 2.75rem;
+  --density-control-gap: 0.5rem;
+  --density-control-padding-inline: 1rem;
+  --density-row-height: 2.75rem;
+  --density-toolbar-height: 3rem;
+  --density-pane-padding: 1rem;
+  --density-section-gap: 1.5rem;
 }
 
 .dark {
@@ -551,6 +943,11 @@
   --status-stopped: oklch(0.705 0.015 286.067);
   --status-pending: oklch(0.8 0.12 75);
   --status-error: oklch(0.704 0.191 22.216);
+  --material-shadow-panel:
+    0 1px 2px oklch(0 0 0 / 24%), 0 6px 16px oklch(0 0 0 / 16%);
+  --material-shadow-overlay:
+    0 12px 32px oklch(0 0 0 / 34%), 0 2px 8px oklch(0 0 0 / 24%);
+  --material-shadow-window: 0 28px 96px oklch(0 0 0 / 48%);
   /* Terminal - same dark look in dark mode */
   --terminal: oklch(0.16 0 0);
   --terminal-header: oklch(0.22 0 0);
@@ -560,7 +957,76 @@
   --terminal-stdout: oklch(0.75 0 0);
   --terminal-stderr: oklch(0.78 0.12 75);
   --terminal-error: oklch(0.7 0.16 25);
-  --chat-safe-padding: 104px;
+  --chat-safe-padding: 0px;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --text-tertiary: color-mix(
+      in oklch,
+      var(--muted-foreground) 92%,
+      var(--foreground)
+    );
+    --text-disabled: color-mix(
+      in oklch,
+      var(--muted-foreground) 72%,
+      transparent
+    );
+    --separator: color-mix(in oklch, var(--foreground) 32%, transparent);
+    --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
+    --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
+    --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+    --window-border: var(--separator-strong);
+  }
+}
+
+@media (forced-colors: active) {
+  :root {
+    --text-primary: CanvasText;
+    --text-secondary: CanvasText;
+    --text-tertiary: CanvasText;
+    --text-disabled: GrayText;
+    --surface-canvas: Canvas;
+    --surface-raised: Canvas;
+    --surface-recessed: Canvas;
+    --surface-sidebar: Canvas;
+    --surface-toolbar: Canvas;
+    --surface-overlay: Canvas;
+    --surface-selected: Highlight;
+    --separator: ButtonBorder;
+    --separator-strong: CanvasText;
+    --control-hover: transparent;
+    --control-pressed: transparent;
+    --control-selected: Highlight;
+    --control-selected-foreground: HighlightText;
+    --control-disabled: transparent;
+    --control-focus: Highlight;
+    --control-invalid: Mark;
+    --material-blur-toolbar: 0px;
+    --material-blur-overlay: 0px;
+    --material-saturation: 1;
+    --material-shadow-panel: none;
+    --material-shadow-overlay: none;
+    --material-shadow-window: none;
+  }
+}
+
+:where([data-transparency='reduced']) {
+  --surface-toolbar: var(--background);
+  --surface-overlay: var(--popover);
+  --material-blur-toolbar: 0px;
+  --material-blur-overlay: 0px;
+  --material-saturation: 1;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --surface-toolbar: var(--background);
+    --surface-overlay: var(--popover);
+    --material-blur-toolbar: 0px;
+    --material-blur-overlay: 0px;
+    --material-saturation: 1;
+  }
 }
 
 @layer base {
@@ -587,6 +1053,17 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-instant: 1ms;
+    --motion-duration-fast: 1ms;
+    --motion-duration-normal: 1ms;
+    --motion-duration-slow: 1ms;
+    --motion-ease-standard: linear;
+    --motion-ease-enter: linear;
+    --motion-ease-exit: linear;
+    --motion-ease-spring: linear;
+  }
+
   .model-effort-power-fill,
   .model-effort-power-field,
   .model-effort-power-particle,
@@ -600,6 +1077,17 @@
   }
 }
 
+:where([data-motion='reduced']) {
+  --motion-duration-instant: 1ms;
+  --motion-duration-fast: 1ms;
+  --motion-duration-normal: 1ms;
+  --motion-duration-slow: 1ms;
+  --motion-ease-standard: linear;
+  --motion-ease-enter: linear;
+  --motion-ease-exit: linear;
+  --motion-ease-spring: linear;
+}
+
 /* Shiki dual-theme support: override inline styles in dark mode */
 .dark .shiki,
 .dark .shiki span {