@moldable-ai/ui 0.2.19 → 0.2.21

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,117 @@
   --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-regular-fill: color-mix(
+    in oklch,
+    var(--background) 76%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 94%,
+    var(--foreground) 6%
+  );
+  --material-regular-border: color-mix(
+    in oklch,
+    var(--foreground) 10%,
+    transparent
+  );
+  --material-regular-highlight: oklch(1 0 0 / 42%);
+  --material-regular-blur: 20px;
+  --material-regular-saturation: 1.18;
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--background) 24%,
+    transparent
+  );
+  --material-clear-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-clear-border: color-mix(
+    in oklch,
+    var(--foreground) 14%,
+    transparent
+  );
+  --material-clear-highlight: oklch(1 0 0 / 28%);
+  --material-clear-blur: 12px;
+  --material-clear-saturation: 1.24;
+  --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 +906,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 +979,35 @@
   --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-regular-fill: color-mix(
+    in oklch,
+    var(--background) 68%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-regular-border: oklch(1 0 0 / 14%);
+  --material-regular-highlight: oklch(1 0 0 / 12%);
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--background) 20%,
+    transparent
+  );
+  --material-clear-fallback: color-mix(
+    in oklch,
+    var(--background) 78%,
+    var(--foreground) 22%
+  );
+  --material-clear-border: oklch(1 0 0 / 18%);
+  --material-clear-highlight: oklch(1 0 0 / 10%);
+  --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 +1017,142 @@
   --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);
+    --material-regular-fill: color-mix(
+      in oklch,
+      var(--material-regular-fallback) 92%,
+      transparent
+    );
+    --material-regular-border: var(--separator-strong);
+    --material-clear-fill: color-mix(
+      in oklch,
+      var(--material-clear-fallback) 84%,
+      transparent
+    );
+    --material-clear-border: var(--separator-strong);
+    --window-border: var(--separator-strong);
+  }
+}
+
+:where([data-contrast='increased']) {
+  --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);
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--material-regular-fallback) 92%,
+    transparent
+  );
+  --material-regular-border: var(--separator-strong);
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--material-clear-fallback) 84%,
+    transparent
+  );
+  --material-clear-border: var(--separator-strong);
+  --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-regular-fill: Canvas;
+    --material-regular-fallback: Canvas;
+    --material-regular-border: ButtonBorder;
+    --material-regular-highlight: transparent;
+    --material-regular-blur: 0px;
+    --material-regular-saturation: 1;
+    --material-clear-fill: Canvas;
+    --material-clear-fallback: Canvas;
+    --material-clear-border: ButtonBorder;
+    --material-clear-highlight: transparent;
+    --material-clear-blur: 0px;
+    --material-clear-saturation: 1;
+    --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-regular-fill: var(--material-regular-fallback);
+  --material-regular-blur: 0px;
+  --material-regular-saturation: 1;
+  --material-clear-fill: var(--material-clear-fallback);
+  --material-clear-blur: 0px;
+  --material-clear-saturation: 1;
+  --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-regular-fill: var(--material-regular-fallback);
+    --material-regular-blur: 0px;
+    --material-regular-saturation: 1;
+    --material-clear-fill: var(--material-clear-fallback);
+    --material-clear-blur: 0px;
+    --material-clear-saturation: 1;
+    --material-blur-toolbar: 0px;
+    --material-blur-overlay: 0px;
+    --material-saturation: 1;
+  }
 }
 
 @layer base {
@@ -576,6 +1168,84 @@
   }
 }
 
+@layer components {
+  /*
+   * Adaptive material is reserved for navigation and control chrome. The
+   * opaque background is the baseline; capable renderers opt into backdrop
+   * sampling below.
+   */
+  .moldable-material {
+    --material-active-fill: var(--material-regular-fill);
+    --material-active-fallback: var(--material-regular-fallback);
+    --material-active-border: var(--material-regular-border);
+    --material-active-highlight: var(--material-regular-highlight);
+    --material-active-blur: var(--material-regular-blur);
+    --material-active-saturation: var(--material-regular-saturation);
+    --material-active-shadow: none;
+
+    position: relative;
+    isolation: isolate;
+    background-color: var(--material-active-fallback);
+    border-color: var(--material-active-border);
+    box-shadow:
+      inset 0 1px 0 var(--material-active-highlight),
+      var(--material-active-shadow);
+  }
+
+  .moldable-material[data-material='clear'] {
+    --material-active-fill: var(--material-clear-fill);
+    --material-active-fallback: var(--material-clear-fallback);
+    --material-active-border: var(--material-clear-border);
+    --material-active-highlight: var(--material-clear-highlight);
+    --material-active-blur: var(--material-clear-blur);
+    --material-active-saturation: var(--material-clear-saturation);
+  }
+
+  .moldable-material[data-material-elevation='panel'] {
+    --material-active-shadow: var(--material-shadow-panel);
+  }
+
+  .moldable-material[data-material-elevation='overlay'] {
+    --material-active-shadow: var(--material-shadow-overlay);
+  }
+
+  .moldable-material[data-material-interactive='true'] {
+    transition:
+      transform var(--motion-duration-fast) var(--motion-ease-standard),
+      background-color var(--motion-duration-fast) var(--motion-ease-standard),
+      border-color var(--motion-duration-fast) var(--motion-ease-standard);
+  }
+
+  .moldable-material[data-material-interactive='true']:hover {
+    background-color: color-mix(
+      in oklch,
+      var(--material-active-fill),
+      var(--control-hover)
+    );
+  }
+
+  .moldable-material[data-material-interactive='true']:active {
+    background-color: color-mix(
+      in oklch,
+      var(--material-active-fill),
+      var(--control-pressed)
+    );
+    transform: scale(0.98);
+  }
+
+  @supports (
+    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+  ) {
+    .moldable-material {
+      background-color: var(--material-active-fill);
+      -webkit-backdrop-filter: blur(var(--material-active-blur))
+        saturate(var(--material-active-saturation));
+      backdrop-filter: blur(var(--material-active-blur))
+        saturate(var(--material-active-saturation));
+    }
+  }
+}
+
 @layer utilities {
   .scrollbar-hide {
     &::-webkit-scrollbar {
@@ -587,6 +1257,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,
@@ -598,6 +1279,26 @@
   .model-effort-max-burst {
     display: none;
   }
+
+  .moldable-material[data-material-interactive='true']:active {
+    transform: none;
+  }
+}
+
+: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;
+}
+
+:where([data-motion='reduced'])
+  .moldable-material[data-material-interactive='true']:active {
+  transform: none;
 }
 
 /* Shiki dual-theme support: override inline styles in dark mode */