@veevarts/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/tailwind/index.cjs

@@ -23,6 +23,9 @@ __export(index_exports, {
   adminSurfaceCss: () => adminSurfaceCss,
   adminSurfaceTailwindColors: () => adminSurfaceTailwindColors,
   adminSurfaceTokens: () => adminSurfaceTokens,
+  assistantSurfacePlugin: () => assistantSurfacePlugin,
+  assistantSurfaceTailwindColors: () => assistantSurfaceTailwindColors,
+  assistantSurfaceTokens: () => assistantSurfaceTokens,
   colors: () => colors,
   createHeroUIConfig: () => createHeroUIConfig,
   deepMerge: () => deepMerge,
@@ -258,12 +261,12 @@ function adminSurfaceCss({
   scope = ".acct",
   fontFamily = "'NeueMontreal', system-ui, sans-serif"
 } = {}) {
-  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const declarations2 = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
   const typography2 = fontFamily ? `
   font-family: ${fontFamily};
   color: var(--ink);` : "";
   return `${scope} {
-${declarations}${typography2}
+${declarations2}${typography2}
 }
 `;
 }
@@ -274,6 +277,17 @@ var posSurfaceTokens = {
   line: "#E7E7E9",
   /** `--line2`: the lighter hairline under list rows and above the role bar. */
   "line-2": "#F1F1F3",
+  hair: "#F0F0F1",
+  page: "#FBFBFB",
+  field: "#E5E5E5",
+  /** A hairline under the pointer (`default-300`). */
+  "line-strong": "#D4D4D8",
+  /** `--ink`: body text (`default-900`). */
+  ink: "#18181B",
+  /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+  muted: "#71717A",
+  /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+  faint: "#A1A1AA",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",
@@ -288,11 +302,79 @@ var posSurfaceTokens = {
   /** `--ib` / `--if` */
   "info-fill": "#EAF1FC",
   info: "#1D4FA8",
+  "violet-fill": "#F1ECFB",
+  violet: "#6D28D9",
+  "neutral-fill": "#F4F4F5",
+  neutral: "#52525B",
   /** `.btn-dstr` — the fill behind an irreversible confirmation. */
   destructive: "#A32D2D"
 };
 var posSurfaceTailwindColors = { ...posSurfaceTokens };
 
+// src/tokens/assistant-surface.ts
+var info = colors.palettes.info;
+var HEROUI_CONTENT = {
+  light: { content1: "#ffffff", content2: "#f4f4f5" },
+  dark: { content1: "#18181b", content2: "#27272a" }
+};
+var ASSISTANT_SURFACE_TOKEN_NAMES = [
+  /** Text and icon tone that marks something as the assistant's. */
+  "accent",
+  /** Tint behind small assistant marks (an avatar disc, an info notice). */
+  "fill",
+  /** Hairline around assistant regions. */
+  "border",
+  /** Fill of the person's own turn. */
+  "user-bubble",
+  /** Fill of the assistant's turn, where an app draws it as a bubble. */
+  "assistant-bubble",
+  /** Focus ring inside assistant surfaces. */
+  "focus"
+];
+var assistantSurfaceTokens = {
+  light: {
+    accent: info[600],
+    fill: info[100],
+    border: info[200],
+    "user-bubble": HEROUI_CONTENT.light.content2,
+    "assistant-bubble": HEROUI_CONTENT.light.content1,
+    focus: info[500]
+  },
+  dark: {
+    accent: info[300],
+    fill: info[900],
+    border: info[800],
+    "user-bubble": HEROUI_CONTENT.dark.content2,
+    "assistant-bubble": HEROUI_CONTENT.dark.content1,
+    focus: info[400]
+  }
+};
+function hexToChannels(hex) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error(`bad hex: ${hex}`);
+  return [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16)).join(" ");
+}
+var assistantSurfaceVar = (name) => `--ai-${name}`;
+var declarations = (theme) => Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    assistantSurfaceVar(name),
+    hexToChannels(assistantSurfaceTokens[theme][name])
+  ])
+);
+var ASSISTANT_SURFACE_SELECTORS = {
+  light: ':root, .light, [data-theme="light"]',
+  dark: ".dark"
+};
+var assistantSurfaceBase = {
+  [ASSISTANT_SURFACE_SELECTORS.light]: declarations("light"),
+  [ASSISTANT_SURFACE_SELECTORS.dark]: declarations("dark")
+};
+var assistantSurfaceTailwindColors = Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    name,
+    `rgb(var(${assistantSurfaceVar(name)}, ${hexToChannels(assistantSurfaceTokens.light[name])}) / <alpha-value>)`
+  ])
+);
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
@@ -308,13 +390,26 @@ var tailwindTheme = {
     // `danger`/`info`/`warn` do not shadow the semantic palettes, and fed
     // from the token object so utility and token cannot disagree.
     // See src/tokens/pos-surface.ts.
-    pos: posSurfaceTailwindColors
+    pos: posSurfaceTailwindColors,
+    // Assistant palette. Unlike `acct`/`pos` these resolve to CSS custom
+    // properties, because they have a dark value: the preset's plugin
+    // below writes the properties. See src/tokens/assistant-surface.ts.
+    ai: assistantSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
   fontSize: typography.fontSize,
   fontWeight: typography.fontWeight,
-  lineHeight: typography.lineHeight
+  lineHeight: typography.lineHeight,
+  keyframes: {
+    "record-shimmer": {
+      "0%": { backgroundPosition: "-25rem 0" },
+      "100%": { backgroundPosition: "25rem 0" }
+    }
+  },
+  animation: {
+    "record-shimmer": "record-shimmer 1.3s linear infinite"
+  }
 };
 function deepMerge(target, source) {
   if (!source || typeof source !== "object") {
@@ -378,11 +473,15 @@ var veevartContent = [
   "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   "./node_modules/@veevarts/design-system/dist/**/*.{js,mjs,jsx,tsx}"
 ];
+function assistantSurfacePlugin({ addBase }) {
+  addBase(assistantSurfaceBase);
+}
 var veevartPreset = {
   theme: {
     extend: tailwindTheme
   },
-  darkMode: "class"
+  darkMode: "class",
+  plugins: [assistantSurfacePlugin]
 };
 var tokens = {
   colors,
@@ -395,6 +494,9 @@ var tokens = {
   adminSurfaceCss,
   adminSurfaceTailwindColors,
   adminSurfaceTokens,
+  assistantSurfacePlugin,
+  assistantSurfaceTailwindColors,
+  assistantSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,

package/dist/tailwind/index.d.ts

@@ -3,6 +3,7 @@ import { typography } from '../tokens/typography';
 import { spacing } from '../tokens/spacing';
 export { colors, typography, spacing };
 export { adminSurfaceCss, adminSurfaceTokens, adminSurfaceTailwindColors } from '../tokens/admin-surface';
+export { assistantSurfaceTokens, assistantSurfaceTailwindColors } from '../tokens/assistant-surface';
 export interface ColorPalette {
     50: string;
     100: string;
@@ -48,6 +49,7 @@ export declare const tailwindTheme: {
     colors: {
         acct: Record<string, string>;
         pos: Record<string, string>;
+        ai: Record<"accent" | "fill" | "border" | "user-bubble" | "assistant-bubble" | "focus", string>;
         secondary: "#000000";
         success: "#057A54";
         warning: "#F5A524";
@@ -120,6 +122,19 @@ export declare const tailwindTheme: {
         readonly normal: "1.5";
         readonly relaxed: "1.75";
     };
+    keyframes: {
+        'record-shimmer': {
+            '0%': {
+                backgroundPosition: string;
+            };
+            '100%': {
+                backgroundPosition: string;
+            };
+        };
+    };
+    animation: {
+        'record-shimmer': string;
+    };
 };
 /**
  * Deep merge utility for objects
@@ -238,11 +253,28 @@ export declare function createHeroUIConfig(overrides?: HeroUIConfigOverrides): H
  * Includes HeroUI theme and Design System components
  */
 export declare const veevartContent: string[];
+/** The slice of Tailwind's plugin API the preset's plugins use. */
+export interface PresetPluginApi {
+    addBase: (base: Record<string, Record<string, string>>) => void;
+}
+/**
+ * Writes the `--ai-*` custom properties: light values on `:root`, dark values
+ * under `.dark`. The `ai-*` colours read them, so without this plugin they
+ * stay on their light fallbacks.
+ *
+ * A plain function, not `tailwindcss/plugin`, so this bundle does not pull
+ * Tailwind in. Add it to `plugins` yourself only if you extend
+ * `tokens.tailwindTheme` instead of using `veevartPreset`.
+ */
+export declare function assistantSurfacePlugin({ addBase }: PresetPluginApi): void;
 /**
  * Veevart Design System Tailwind preset
  *
  * Use this preset in your tailwind.config.js to get all Veevart tokens
  * and styling defaults. Use veevartContent in your content array.
+ *
+ * Tailwind runs a preset's plugins alongside the app's own (HeroUI's, for
+ * instance), so the app keeps declaring `plugins` as before.
  */
 export declare const veevartPreset: {
     theme: {
@@ -250,6 +282,7 @@ export declare const veevartPreset: {
             colors: {
                 acct: Record<string, string>;
                 pos: Record<string, string>;
+                ai: Record<"accent" | "fill" | "border" | "user-bubble" | "assistant-bubble" | "focus", string>;
                 secondary: "#000000";
                 success: "#057A54";
                 warning: "#F5A524";
@@ -322,9 +355,23 @@ export declare const veevartPreset: {
                 readonly normal: "1.5";
                 readonly relaxed: "1.75";
             };
+            keyframes: {
+                'record-shimmer': {
+                    '0%': {
+                        backgroundPosition: string;
+                    };
+                    '100%': {
+                        backgroundPosition: string;
+                    };
+                };
+            };
+            animation: {
+                'record-shimmer': string;
+            };
         };
     };
     darkMode: "class";
+    plugins: (typeof assistantSurfacePlugin)[];
 };
 /**
  * All tokens bundled together for convenience
@@ -482,6 +529,7 @@ export declare const tokens: {
         colors: {
             acct: Record<string, string>;
             pos: Record<string, string>;
+            ai: Record<"accent" | "fill" | "border" | "user-bubble" | "assistant-bubble" | "focus", string>;
             secondary: "#000000";
             success: "#057A54";
             warning: "#F5A524";
@@ -554,5 +602,18 @@ export declare const tokens: {
             readonly normal: "1.5";
             readonly relaxed: "1.75";
         };
+        keyframes: {
+            'record-shimmer': {
+                '0%': {
+                    backgroundPosition: string;
+                };
+                '100%': {
+                    backgroundPosition: string;
+                };
+            };
+        };
+        animation: {
+            'record-shimmer': string;
+        };
     };
 };

package/dist/tailwind/index.mjs

@@ -219,12 +219,12 @@ function adminSurfaceCss({
   scope = ".acct",
   fontFamily = "'NeueMontreal', system-ui, sans-serif"
 } = {}) {
-  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const declarations2 = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
   const typography2 = fontFamily ? `
   font-family: ${fontFamily};
   color: var(--ink);` : "";
   return `${scope} {
-${declarations}${typography2}
+${declarations2}${typography2}
 }
 `;
 }
@@ -235,6 +235,17 @@ var posSurfaceTokens = {
   line: "#E7E7E9",
   /** `--line2`: the lighter hairline under list rows and above the role bar. */
   "line-2": "#F1F1F3",
+  hair: "#F0F0F1",
+  page: "#FBFBFB",
+  field: "#E5E5E5",
+  /** A hairline under the pointer (`default-300`). */
+  "line-strong": "#D4D4D8",
+  /** `--ink`: body text (`default-900`). */
+  ink: "#18181B",
+  /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+  muted: "#71717A",
+  /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+  faint: "#A1A1AA",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",
@@ -249,11 +260,79 @@ var posSurfaceTokens = {
   /** `--ib` / `--if` */
   "info-fill": "#EAF1FC",
   info: "#1D4FA8",
+  "violet-fill": "#F1ECFB",
+  violet: "#6D28D9",
+  "neutral-fill": "#F4F4F5",
+  neutral: "#52525B",
   /** `.btn-dstr` — the fill behind an irreversible confirmation. */
   destructive: "#A32D2D"
 };
 var posSurfaceTailwindColors = { ...posSurfaceTokens };
 
+// src/tokens/assistant-surface.ts
+var info = colors.palettes.info;
+var HEROUI_CONTENT = {
+  light: { content1: "#ffffff", content2: "#f4f4f5" },
+  dark: { content1: "#18181b", content2: "#27272a" }
+};
+var ASSISTANT_SURFACE_TOKEN_NAMES = [
+  /** Text and icon tone that marks something as the assistant's. */
+  "accent",
+  /** Tint behind small assistant marks (an avatar disc, an info notice). */
+  "fill",
+  /** Hairline around assistant regions. */
+  "border",
+  /** Fill of the person's own turn. */
+  "user-bubble",
+  /** Fill of the assistant's turn, where an app draws it as a bubble. */
+  "assistant-bubble",
+  /** Focus ring inside assistant surfaces. */
+  "focus"
+];
+var assistantSurfaceTokens = {
+  light: {
+    accent: info[600],
+    fill: info[100],
+    border: info[200],
+    "user-bubble": HEROUI_CONTENT.light.content2,
+    "assistant-bubble": HEROUI_CONTENT.light.content1,
+    focus: info[500]
+  },
+  dark: {
+    accent: info[300],
+    fill: info[900],
+    border: info[800],
+    "user-bubble": HEROUI_CONTENT.dark.content2,
+    "assistant-bubble": HEROUI_CONTENT.dark.content1,
+    focus: info[400]
+  }
+};
+function hexToChannels(hex) {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error(`bad hex: ${hex}`);
+  return [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16)).join(" ");
+}
+var assistantSurfaceVar = (name) => `--ai-${name}`;
+var declarations = (theme) => Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    assistantSurfaceVar(name),
+    hexToChannels(assistantSurfaceTokens[theme][name])
+  ])
+);
+var ASSISTANT_SURFACE_SELECTORS = {
+  light: ':root, .light, [data-theme="light"]',
+  dark: ".dark"
+};
+var assistantSurfaceBase = {
+  [ASSISTANT_SURFACE_SELECTORS.light]: declarations("light"),
+  [ASSISTANT_SURFACE_SELECTORS.dark]: declarations("dark")
+};
+var assistantSurfaceTailwindColors = Object.fromEntries(
+  ASSISTANT_SURFACE_TOKEN_NAMES.map((name) => [
+    name,
+    `rgb(var(${assistantSurfaceVar(name)}, ${hexToChannels(assistantSurfaceTokens.light[name])}) / <alpha-value>)`
+  ])
+);
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
@@ -269,13 +348,26 @@ var tailwindTheme = {
     // `danger`/`info`/`warn` do not shadow the semantic palettes, and fed
     // from the token object so utility and token cannot disagree.
     // See src/tokens/pos-surface.ts.
-    pos: posSurfaceTailwindColors
+    pos: posSurfaceTailwindColors,
+    // Assistant palette. Unlike `acct`/`pos` these resolve to CSS custom
+    // properties, because they have a dark value: the preset's plugin
+    // below writes the properties. See src/tokens/assistant-surface.ts.
+    ai: assistantSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
   fontSize: typography.fontSize,
   fontWeight: typography.fontWeight,
-  lineHeight: typography.lineHeight
+  lineHeight: typography.lineHeight,
+  keyframes: {
+    "record-shimmer": {
+      "0%": { backgroundPosition: "-25rem 0" },
+      "100%": { backgroundPosition: "25rem 0" }
+    }
+  },
+  animation: {
+    "record-shimmer": "record-shimmer 1.3s linear infinite"
+  }
 };
 function deepMerge(target, source) {
   if (!source || typeof source !== "object") {
@@ -339,11 +431,15 @@ var veevartContent = [
   "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
   "./node_modules/@veevarts/design-system/dist/**/*.{js,mjs,jsx,tsx}"
 ];
+function assistantSurfacePlugin({ addBase }) {
+  addBase(assistantSurfaceBase);
+}
 var veevartPreset = {
   theme: {
     extend: tailwindTheme
   },
-  darkMode: "class"
+  darkMode: "class",
+  plugins: [assistantSurfacePlugin]
 };
 var tokens = {
   colors,
@@ -355,6 +451,9 @@ export {
   adminSurfaceCss,
   adminSurfaceTailwindColors,
   adminSurfaceTokens,
+  assistantSurfacePlugin,
+  assistantSurfaceTailwindColors,
+  assistantSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,

package/dist/test/ReducedMotion.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function ReducedMotion({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/test/RootFontSize.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function RootFontSize({ size, children }: {
+    size: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/test/backdrop.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The opaque colour actually painted behind `element`: its own background and
+ * every ancestor's, composited from the nearest opaque one down, over white.
+ *
+ * Contrast has to be measured against this, not against the element's own
+ * `backgroundColor`: HeroUI's flat fills are translucent in dark mode
+ * (`dark:bg-danger-50/50`), so the computed value alone reads as a colour
+ * nobody sees.
+ */
+export declare function backdropColor(element: Element): string;
+/** `#1d4ed8` → `rgb(29, 78, 216)`, the form `getComputedStyle` reports. */
+export declare function rgbOf(hex: string): string;

package/dist/test/container-width.d.ts

@@ -0,0 +1,14 @@
+export declare class FakeResizeObserver {
+    static width: number;
+    static instances: FakeResizeObserver[];
+    disconnected: boolean;
+    private readonly callback;
+    private readonly targets;
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element): void;
+    unobserve(): void;
+    disconnect(): void;
+    emit(width: number): void;
+}
+export declare function stubContainerWidth(width: number): void;
+export declare function resizeContainers(width: number): void;

package/dist/test/contrast.d.ts

@@ -0,0 +1 @@
+export declare function contrastRatio(a: string, b: string): number;

package/dist/test/px-class-names.d.ts

@@ -0,0 +1 @@
+export declare const pxClasses: (root: Element) => string[];

package/dist/test/px-classes.d.ts

@@ -0,0 +1,3 @@
+import { pxClasses } from './px-class-names';
+export { pxClasses };
+export declare const expectNoPxClasses: (root: Element) => void;

package/dist/test/reducedMotionCss.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Story helpers for checking a `motion-reduce:` utility in a real browser without changing the
+ * browser's media.
+ *
+ * A page cannot turn `prefers-reduced-motion` on for itself, and emulating it through the
+ * runner's CDP session changes the whole page, which Vitest shares between story files running
+ * in parallel: another story measuring its own animation in that window would read `none`. So
+ * the reduced-motion half is proved from the page's compiled CSS instead, which is what the
+ * browser applies anyway:
+ *
+ * 1. the element carries the still class;
+ * 2. that class sets `animation-name: none` inside `@media (prefers-reduced-motion: reduce)`;
+ * 3. it comes later in the stylesheet than the rule that starts the animation. Both are one class
+ *    (plus the same pseudo-element), so at equal specificity the later rule wins.
+ *
+ * The motion-allowed half is read straight off `getComputedStyle`.
+ */
+export interface ReducedMotionCascade {
+    /** The element carries both classes. */
+    carriesBoth: boolean;
+    /** `animation-name` of the rule that starts the motion (e.g. `shimmer`), or `undefined`. */
+    movingAnimation: string | undefined;
+    /** `animation-name` the still class sets under reduced motion (`none`), or `undefined`. */
+    stillAnimation: string | undefined;
+    /** The still rule is later in the cascade than the moving one, so it wins. */
+    stillComesLater: boolean;
+}
+/**
+ * What the stylesheets say happens to `movingClass`'s animation on `element` (or its `pseudo`)
+ * when the OS asks for reduced motion and `stillClass` is the utility meant to stop it.
+ */
+export declare function reducedMotionCascade(element: Element, { movingClass, stillClass, pseudo }: {
+    movingClass: string;
+    stillClass: string;
+    pseudo?: '' | '::before';
+}): ReducedMotionCascade;
+/** Whether the reader's OS currently asks for reduced motion (the Storybook UI is theirs). */
+export declare function osReducesMotion(): boolean;
+/** The `animation-name` running on an element's `::before`, where HeroUI draws the skeleton shimmer. */
+export declare function beforeAnimationName(element: Element): string;

package/dist/test/root-font-size.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+export declare const LARGE_TEXT_ROOT = "137.5%";
+export declare const LARGE_TEXT_SCALE = 1.375;
+export declare const withRootFontSize: (size: string) => (Story: ComponentType) => import('react').FunctionComponentElement<{
+    size: string;
+    children?: import('react').ReactNode;
+}>;
+export declare const fontSizePx: (element: Element) => number;

package/dist/tokens/assistant-surface.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The assistant ("AI") palette: the one place an assistant surface takes its
+ * accent, tints and focus ring from, in light AND dark (INI-0581).
+ *
+ * PLACEHOLDER HUE. Design has not picked the assistant colour yet. These
+ * values are the `info` blue scale, the only hue in the DS that no product
+ * already uses for something else, and they ship so the assistant pieces can
+ * be built and measured now. When Design signs a hue off, change the two maps
+ * below and nothing else: every `ai-*` utility, the CSS custom properties and
+ * the contrast tests all read from here. The two bubbles are neutrals on
+ * purpose (only the assistant carries the hue); Design may retune them too.
+ *
+ * WHY IT CARRIES ITS OWN DARK VALUES. The DS has no dark theme:
+ * `createHeroUIConfig` builds `themes.light` only. HeroUI's semantic colours
+ * (`content1`, `foreground`, `default-*`, `divider`) still flip under `.dark`,
+ * so the assistant pieces style with those plus this palette, and this
+ * palette flips with them. A full DS dark theme is a separate, larger piece
+ * of work.
+ *
+ * HOW IT REACHES THE PAGE. The preset adds a plugin that writes each token as
+ * a custom property and maps `ai-*` colours to those properties. **The class
+ * is the switch:** dark values under `.dark`, light values on `:root`,
+ * `.light` and `[data-theme="light"]`. Those are the selectors every HeroUI
+ * 2.x in the DS peer range writes its own variables under, so the palette and
+ * HeroUI's colours flip together; `src/tailwind/__test__/assistant-heroui-parity.test.ts`
+ * holds that against the installed HeroUI. `[data-theme="dark"]` is NOT a
+ * switch: HeroUI 2.8 no longer writes dark variables there (2.7 still did),
+ * so honouring it would turn `ai-*` dark on white HeroUI cards. An app that
+ * puts `.dark` on a subtree gets dark values on that subtree only.
+ *
+ * Kept apart from `adminSurfaceTokens` on purpose: consumers test that they
+ * override every admin token, and a new key there would break them.
+ */
+/** The token names, in the order the docs list them. */
+export declare const ASSISTANT_SURFACE_TOKEN_NAMES: readonly ["accent", "fill", "border", "user-bubble", "assistant-bubble", "focus"];
+export type AssistantSurfaceTokenName = (typeof ASSISTANT_SURFACE_TOKEN_NAMES)[number];
+export type AssistantSurfaceTheme = 'light' | 'dark';
+/** Token name → hex, per theme. Exported so tests and tooling can assert on it directly. */
+export declare const assistantSurfaceTokens: Record<AssistantSurfaceTheme, Record<AssistantSurfaceTokenName, string>>;
+/**
+ * `#1d4ed8` → `29 78 216`: the channel form Tailwind's `<alpha-value>` needs.
+ * Throws on anything but `#rrggbb`, so a typo in a hue change fails the tests
+ * instead of shipping a colour that resolves to nothing.
+ */
+export declare function hexToChannels(hex: string): string;
+/** The custom property behind a token: `accent` → `--ai-accent`. */
+export declare const assistantSurfaceVar: (name: AssistantSurfaceTokenName) => string;
+/**
+ * Where each theme's values are written: the selectors every HeroUI 2.x in
+ * the peer range writes its own light and dark variables under (see the module
+ * comment for why `[data-theme="dark"]` is left out). A `.light` island inside
+ * a `.dark` page flips back for both palettes at once.
+ */
+export declare const ASSISTANT_SURFACE_SELECTORS: Record<AssistantSurfaceTheme, string>;
+/** The custom properties as a CSS-in-JS rule set, ready for Tailwind's `addBase`. */
+export declare const assistantSurfaceBase: Record<string, Record<string, string>>;
+/**
+ * The palette as Tailwind colours, namespaced under `ai`: `text-ai-accent`,
+ * `bg-ai-user-bubble`, `ring-ai-focus`, with opacity modifiers working.
+ *
+ * Each colour falls back to its LIGHT value when the property is missing, so
+ * an app that extends `tokens.tailwindTheme` without the preset's plugin still
+ * gets a readable light palette instead of colours that resolve to nothing.
+ * Dark values need the plugin.
+ */
+export declare const assistantSurfaceTailwindColors: Record<AssistantSurfaceTokenName, string>;

package/dist/tokens/index.d.ts

@@ -3,5 +3,7 @@ export { spacing } from './spacing';
 export { typography } from './typography';
 export { adminSurfaceCss, adminSurfaceTokens } from './admin-surface';
 export { posSurfaceTokens, posSurfaceTailwindColors } from './pos-surface';
+export { assistantSurfaceTokens } from './assistant-surface';
 export type { ColorToken } from './colors';
 export type { AdminSurfaceCssOptions } from './admin-surface';
+export type { AssistantSurfaceTheme, AssistantSurfaceTokenName } from './assistant-surface';