@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/platform/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @no-story Context provider — renders no UI; sets data-platform on document.documentElement.
+ */
+import { type ReactNode } from 'react';
+type Platform = 'web' | 'mobile';
+interface PlatformContextValue {
+    platform: Platform;
+}
+interface PlatformProviderProps {
+    /** Explicit override — native shell sets this; omit to fall back to ?mode=mobile. */
+    platform?: Platform;
+    children: ReactNode;
+}
+/**
+ * Resolves the active platform (`'web'` | `'mobile'`) and writes
+ * `data-platform` to `document.documentElement` so the
+ * `:root:where([data-platform='mobile'])` token scope activates.
+ *
+ * Priority: explicit prop → `?mode=mobile` query param → `'web'`.
+ */
+declare function PlatformProvider({ platform: platformProp, children }: PlatformProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<PlatformContextValue | null>>;
+/**
+ * Returns the active `platform` value set by the nearest `PlatformProvider`.
+ *
+ * @throws if called outside a `PlatformProvider`.
+ */
+declare function usePlatform(): PlatformContextValue;
+export type { Platform, PlatformProviderProps };
+export { PlatformProvider, usePlatform };

package/dist/platform/index.js

@@ -0,0 +1,63 @@
+/**
+ * @no-story Context provider — renders no UI; sets data-platform on document.documentElement.
+ */
+import { createContext, createElement, useContext, useInsertionEffect, useMemo, } from 'react';
+const PlatformContext = createContext(null);
+function resolveQueryParam() {
+    // SSR / no-document guard
+    if (typeof document === 'undefined')
+        return 'web';
+    try {
+        const params = new URLSearchParams(window.location.search);
+        return params.get('mode') === 'mobile' ? 'mobile' : 'web';
+    }
+    catch {
+        return 'web';
+    }
+}
+/**
+ * Resolves the active platform (`'web'` | `'mobile'`) and writes
+ * `data-platform` to `document.documentElement` so the
+ * `:root:where([data-platform='mobile'])` token scope activates.
+ *
+ * Priority: explicit prop → `?mode=mobile` query param → `'web'`.
+ */
+function PlatformProvider({ platform: platformProp, children }) {
+    const platform = useMemo(() => platformProp ?? resolveQueryParam(), [platformProp]);
+    // Not a passive effect: row virtualizers measure in ref callbacks, which run before it.
+    useInsertionEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const previous = root.dataset['platform'];
+        if (platform === 'mobile') {
+            root.dataset['platform'] = 'mobile';
+        }
+        else {
+            delete root.dataset['platform'];
+        }
+        // A provider that unmounts (mweb shell → desktop shell on resize) hands the attribute back.
+        return () => {
+            if (previous === undefined)
+                delete root.dataset['platform'];
+            else
+                root.dataset['platform'] = previous;
+        };
+    }, [platform]);
+    const value = useMemo(() => ({ platform }), [platform]);
+    return createElement(PlatformContext.Provider, { value }, children);
+}
+/**
+ * Returns the active `platform` value set by the nearest `PlatformProvider`.
+ *
+ * @throws if called outside a `PlatformProvider`.
+ */
+function usePlatform() {
+    const ctx = useContext(PlatformContext);
+    if (ctx === null) {
+        throw new Error('usePlatform() must be called inside a <PlatformProvider>. ' +
+            'Wrap your app (or the relevant subtree) with <PlatformProvider>.');
+    }
+    return ctx;
+}
+export { PlatformProvider, usePlatform };

package/dist/styles/base.css

@@ -0,0 +1,319 @@
+/*
+ * Tokens, the Tailwind bridge and base styles, with no fonts and no
+ * `@source` list. `globals.css` is the app entry (this plus those); an MCP Apps view imports this and
+ * declares only the sources it renders, so the bundle stays small and needs no font files.
+ */
+@import 'tailwindcss';
+@import './tokens.css';
+
+/*
+ * `:where()` keeps this at (0,1,0) so it ties with the token scopes in tokens.css.
+ * Matching `.dark` itself as well as its descendants is what lets `:root.dark` win.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/*
+ * `inline` is required, not stylistic. Plain `@theme` emits a var() that freezes to
+ * the :root value, so `.dark` and `[data-platform]` overrides would never apply and
+ * opacity modifiers (bg-primary/50) would break.
+ */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-surface-1: var(--surface-1);
+
+  --color-selected: var(--selected);
+  --color-selected-foreground: var(--selected-foreground);
+  --color-highlight: var(--highlight);
+  --color-icon: var(--icon);
+  --color-disabled: var(--disabled);
+  --color-disabled-foreground: var(--disabled-foreground);
+  --color-placeholder: var(--placeholder);
+  --color-inverted: var(--inverted);
+  --color-inverted-foreground: var(--inverted-foreground);
+  --color-surface-primary: var(--surface-primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-status-idle: var(--status-idle);
+  --color-status-working: var(--status-working);
+  --color-status-done: var(--status-done);
+  --color-status-stuck: var(--status-stuck);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-positive: var(--positive);
+  --color-positive-foreground: var(--positive-foreground);
+  --color-subtle-foreground: var(--subtle-foreground);
+  --color-accent-teal: var(--accent-teal);
+  --color-accent-yellow: var(--accent-yellow);
+  --color-aquamarine: var(--aquamarine);
+  --color-accent-purple: var(--accent-purple);
+  --color-negative: var(--negative);
+  --color-run-stopped: var(--run-stopped);
+  --color-avatar-person: var(--avatar-person);
+  --color-avatar-agent: var(--avatar-agent);
+  --color-home-canvas: var(--home-canvas);
+  --color-home-card: var(--home-card);
+  --color-home-chip: var(--home-chip);
+  --color-home-chip-selected: var(--home-chip-selected);
+  --color-home-chip-selected-foreground: var(--home-chip-selected-foreground);
+  --color-home-skeleton: var(--home-skeleton);
+  --color-home-offline-banner: var(--home-offline-banner);
+  --color-home-running: var(--home-running);
+  --color-home-running-halo: var(--home-running-halo);
+  --color-home-tile-1: var(--home-tile-1);
+  --color-home-tile-2: var(--home-tile-2);
+  --color-home-tile-3: var(--home-tile-3);
+  --color-home-tile-4: var(--home-tile-4);
+
+  --spacing-nav: var(--nav-w);
+  --spacing-nav-icon: var(--nav-w-icon);
+
+  --font-heading: var(--font-heading);
+
+  --text-body-1: var(--type-body-1);
+  --text-body-1--line-height: var(--type-body-1-lh);
+  --text-body-2: var(--type-body-2);
+  --text-body-2--line-height: var(--type-body-2-lh);
+  --text-body-3: var(--type-body-3);
+  --text-body-3--line-height: var(--type-body-3-lh);
+  /* 13px between body-3 (12) and body-2 (14): dialog hints, segmented controls and tabs from the Agents design. */
+  --text-compact: 0.8125rem;
+  --text-compact--line-height: 1.25rem;
+  /* 15px between body-2 (14) and body-1 (16): the Figma "Body 15 Regular" of the mweb menu. */
+  --text-body-15: 0.9375rem;
+  --text-body-15--line-height: 1.25rem;
+  --text-h3: var(--type-h3);
+  --text-h3--line-height: var(--type-h3-lh);
+  --text-h3--letter-spacing: var(--type-h3-tracking);
+
+  /* Charts: `bg-chart-1` … `bg-chart-5`, `stroke-chart-1`, `fill-chart-1`. */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Layout: `max-w-content`, `h-bar`, `w-panel`, `w-panel-lg`, `min-w-chat`, `text-message`. */
+  --container-content: var(--content-max);
+
+  /*
+   * Chat-width container breakpoints (the chat pane's own width, not the viewport; Material 3
+   * window-size boundaries). `tight` < 600px (phones, narrow panes) · `compact` 600-839px
+   * (laptop with panels open) · `wide` >= 840px. Only `tight` is used so far, as the
+   * `@max-chat-compact:` variant. Change a number here and every user follows. Container
+   * queries cannot read `var()`, so these stay literals.
+   */
+  --container-chat-compact: 37.5rem; /* tight below this, compact from it */
+  /* --container-chat-wide: 52.5rem;  wide from here; uncomment when something needs it */
+  --spacing-bar: var(--bar-h);
+  --spacing-panel: var(--panel-w);
+  --spacing-panel-lg: var(--panel-w-lg);
+  --spacing-chat: var(--chat-min);
+  --text-message: var(--message-size);
+  --text-message--line-height: 1.375rem; /* 16/22 */
+  --text-message-jumbo: calc(var(--message-size) + 0.25rem); /* a message of only emoji: +4px */
+  --text-message-jumbo--line-height: 1.625rem; /* 20/26 */
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: 1rem; /* 16px. The white page card (PageSurface), one step past radius-xl. */
+
+  --spacing-tap: var(--tap-target);
+  --spacing-safe-bottom: var(--safe-area-bottom);
+
+  /* Type: drives `font-sans` / `font-mono`. Sourced from `--font-ui`/`--font-code`
+   * rather than same-named tokens, which would make these entries circular. */
+  --font-sans: var(--font-ui);
+  --font-mono: var(--font-code);
+  --font-emoji: var(--font-emoji-stack);
+
+  /* Elevation: drives `shadow-xs` … `shadow-lg`, overriding Tailwind's defaults so
+   * shadows pick up the active theme's neutral instead of a fixed black. */
+  --shadow-xs: var(--elevation-xs);
+  --shadow-sm: var(--elevation-sm);
+  --shadow-md: var(--elevation-md);
+  --shadow-lg: var(--elevation-lg);
+  --shadow-card: var(--elevation-card);
+  --shadow-pill: var(--elevation-pill);
+}
+
+/* The only CSS motion left is hover/focus/press feedback (`transition-colors`, `-opacity`,
+ * `-shadow`); everything else is motion.dev (src/motion/config.ts). Those transitions carry no
+ * duration or easing class, so they all run on `duration.fast` / `ease.standard` from here. */
+@theme {
+  --default-transition-duration: var(--motion-fast);
+  --default-transition-timing-function: var(--motion-ease);
+}
+
+/*
+ * Padding for a surface pinned to the whole viewport (`fixed inset-0`: a maximized card, a full
+ * screen preview, a lightbox). Such a surface ignores the layout, so on a phone its edges land under
+ * the notch and the home indicator. Put `safe-overlay` on the fixed element and its content stays
+ * clear of them; `--overlay-gutter` (default 0) is the breathing room wanted on top of that. Do not
+ * add the iOS host's nav bar height by hand: the host's top inset already includes it.
+ */
+@utility safe-overlay {
+  padding-top: calc(env(safe-area-inset-top, 0px) + var(--overlay-gutter, 0px));
+  padding-right: max(var(--overlay-gutter, 0px), env(safe-area-inset-right, 0px));
+  padding-bottom: max(var(--overlay-gutter, 0px), env(safe-area-inset-bottom, 0px));
+  padding-left: max(var(--overlay-gutter, 0px), env(safe-area-inset-left, 0px));
+}
+
+/*
+ * The same insets as a transparent border, for an edge-pinned surface that has its own padding
+ * (a sheet). A border is painted over by the surface's background, so it looks like padding, but a
+ * caller's `p-*` / `pb-*` cannot override it, so the inset survives however the content is padded.
+ * `safe-overlay` is the padding form for a surface that fills the viewport.
+ */
+@utility safe-border-t {
+  border-top: env(safe-area-inset-top, 0px) solid transparent;
+}
+@utility safe-border-r {
+  border-right: env(safe-area-inset-right, 0px) solid transparent;
+}
+@utility safe-border-b {
+  border-bottom: env(safe-area-inset-bottom, 0px) solid transparent;
+}
+@utility safe-border-l {
+  border-left: env(safe-area-inset-left, 0px) solid transparent;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground text-body-2 font-sans antialiased;
+  }
+
+  /* The thumb stays. The track behind it has no fill and no stroke. */
+  * {
+    scrollbar-color: color-mix(in srgb, var(--icon) 55%, transparent) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-track,
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+    border: none;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--icon) 55%, transparent);
+    border: none;
+    border-radius: 999px;
+  }
+
+  /* Touch: no grey tap flash, and no double-tap-zoom delay on controls. */
+  html {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(button, [role='button'], a[href], summary, select, label[for], [role='menuitem']) {
+    touch-action: manipulation;
+  }
+
+  h1,
+  h2,
+  h3 {
+    @apply font-heading;
+  }
+
+  /* Tailwind's preflight leaves buttons on the arrow cursor. Anything clickable shows the
+   * pointer instead, and disabled controls show not-allowed. Utilities still override both. */
+  :where(
+    button,
+    [role='button'],
+    a[href],
+    summary,
+    select,
+    label[for],
+    [role='menuitem'],
+    [role='menuitemcheckbox'],
+    [role='menuitemradio'],
+    [role='option'],
+    [role='tab'],
+    [role='switch'],
+    [role='checkbox'],
+    [role='radio'],
+    input[type='checkbox'],
+    input[type='radio'],
+    input[type='file']
+  ) {
+    cursor: pointer;
+  }
+
+  :where(
+    button:disabled,
+    select:disabled,
+    input:disabled,
+    [role='button'][aria-disabled='true'],
+    [role='menuitem'][aria-disabled='true'],
+    [role='option'][aria-disabled='true'],
+    [role='tab'][aria-disabled='true'],
+    [role='switch'][aria-disabled='true'],
+    [role='checkbox'][aria-disabled='true'],
+    [role='radio'][aria-disabled='true']
+  ) {
+    cursor: not-allowed;
+  }
+}
+
+/* Reduced motion for the little CSS still animates (the JS side is `MotionProvider`): hover
+ * feedback, third-party widgets and the mobile View Transitions collapse to an instant change.
+ * Transitions keep 1ms rather than 0 so Base UI's transitionend waits still resolve. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+@source '../**/*.js';

package/dist/styles/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/styles/fonts.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url('./fonts/Figtree-Variable.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/Poppins-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/Poppins-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/Poppins-SemiBold.woff2') format('woff2');
+}

package/dist/styles/globals.css

@@ -0,0 +1,8 @@
+/*
+ * The published `styles/globals.css` (copied over `globals.css` by scripts/build-package.mjs).
+ * Same entry as the app's, but built on the published `base.css`, which scans the compiled `.js`
+ * for utility classes instead of the TypeScript sources, and without the monorepo-only `@source`
+ * for @streams/mcp-apps.
+ */
+@import './base.css';
+@import './fonts.css';

package/dist/styles/mcp-host.css

@@ -0,0 +1,76 @@
+/*
+ * MCP Apps host theming. The MCP Apps spec lets a host hand a view a set of standard CSS variables
+ * (`McpUiStyleVariableKey`: `--color-background-primary`, `--font-sans`, `--border-radius-md` ...).
+ * The view applies them on <html> (`applyHostStyleVariables`); this sheet points our semantic
+ * tokens at them, each with the Streams value as the fallback, so:
+ *
+ *   - a host that sends none of them (or sends a subset) renders exactly like the app, and
+ *   - a host that sends them (Claude Desktop, ChatGPT, VS Code ...) gets a form in its own colours.
+ *
+ * Imported only by MCP Apps views, never by the app shell. The brand `--primary` is deliberately
+ * not mapped: the spec has no brand colour, and a primary button should stay recognisable.
+ * Keep the host names in sync with the spec; mcp-host.test.ts in packages/mcp-apps checks them.
+ */
+:root {
+  --background: var(--color-background-primary, var(--vibe-primary-background-color));
+  --card: var(--color-background-primary, var(--vibe-primary-background-color));
+  --popover: var(--color-background-primary, var(--vibe-primary-background-color));
+  --muted: var(--color-background-secondary, var(--vibe-grey-background-color));
+  --surface-1: var(--color-background-secondary, var(--vibe-grey-background-color));
+  --secondary: var(--color-background-tertiary, var(--vibe-ui-background-color));
+  --disabled: var(--color-background-disabled, var(--vibe-disabled-background-color));
+  --inverted: var(--color-background-inverse, var(--vibe-inverted-color-background));
+
+  --foreground: var(--color-text-primary, var(--vibe-primary-text-color));
+  --card-foreground: var(--color-text-primary, var(--vibe-primary-text-color));
+  --popover-foreground: var(--color-text-primary, var(--vibe-primary-text-color));
+  --secondary-foreground: var(--color-text-primary, var(--vibe-primary-text-color));
+  --accent-foreground: var(--color-text-primary, var(--vibe-primary-text-color));
+  --selected-foreground: var(--color-text-primary, var(--vibe-primary-text-color));
+  --muted-foreground: var(--color-text-secondary, var(--vibe-secondary-text-color));
+  --placeholder: var(--color-text-tertiary, var(--vibe-placeholder-color));
+  --disabled-foreground: var(--color-text-disabled, var(--vibe-disabled-text-color));
+  --inverted-foreground: var(--color-text-inverse, var(--vibe-text-color-on-inverted));
+  --destructive: var(--color-text-danger, var(--vibe-color-stuck-red));
+
+  --border: var(--color-border-primary, var(--vibe-layout-border-color));
+  --input: var(--color-border-primary, var(--vibe-ui-border-color));
+  --ring: var(--color-ring-primary, var(--vibe-primary-color));
+
+  /* Fonts need no mapping: base.css bridges `font-sans` / `font-mono` to `--font-sans` /
+   * `--font-mono`, which are the spec's own names, so a host value set on <html> wins and our
+   * stack is the default. (Mapping them through --font-ui would be a var() cycle.) */
+  --font-heading: var(--font-sans, var(--font-ui));
+
+  --type-body-1: var(--font-text-md-size, 1rem);
+  --type-body-1-lh: var(--font-text-md-line-height, 1.375rem);
+  --type-body-2: var(--font-text-sm-size, 0.875rem);
+  --type-body-2-lh: var(--font-text-sm-line-height, 1.25rem);
+  --type-body-3: var(--font-text-xs-size, 0.75rem);
+  --type-body-3-lh: var(--font-text-xs-line-height, 1rem);
+  --type-h3: var(--font-heading-xs-size, 1.125rem);
+  --type-h3-lh: var(--font-heading-xs-line-height, 1.5rem);
+
+  --radius: var(--border-radius-md, 0.5rem);
+}
+
+/*
+ * Fonts. base.css compiles `font-sans` and the body rule to the Streams stack directly
+ * (`@theme inline`), so a host's `--font-sans` / `--font-mono` would never reach the text. Unlayered
+ * rules beat every layer, so they set the family from the host variable, with our stack as fallback.
+ * (Reading the host variable inside --font-ui instead would be a var() cycle.)
+ */
+body,
+button,
+input,
+select,
+textarea {
+  font-family: var(--font-sans, var(--font-ui));
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--font-mono, var(--font-code));
+}