@keboola/design 11.9.0 → 13.0.0

package/dist/vega.d.ts

@@ -2,43 +2,21 @@ import { ResolvedColorScheme } from "./types-BPcAjMG0.js";
 import { Config } from "vega-lite";
 //#region src/vega/useVegaTheme.d.ts
 /**
- * {@link vegaTheme} for the scheme and brand currently painted on `<html>`,
- * rebuilt whenever either changes.
+ * {@link vegaTheme} for the current scheme and brand, rebuilt when either changes.
  *
- * - The config holds resolved colour strings, not `var()` references, so a
- *   mounted chart would otherwise keep the palette it was first built with.
- * - The `useThemeAttributes` snapshot is the memo key: its reference moves on a
- *   scheme or brand switch and stands still otherwise, and `scheme` comes out of
- *   the same read, so the colours can never be resolved under one scheme and
- *   memoized under the other.
- * - Re-rendering is not enough on its own — a consumer that compiles a spec in
- *   an effect must depend on this config (or on `useThemeAttributes().cacheKey`)
- *   and re-render the chart.
+ * - A consumer compiling a spec in an effect must depend on this config (or
+ *   `useThemeAttributes().cacheKey`) and re-render the chart.
  */
 declare const useVegaTheme: () => Config;
 //#endregion
 //#region src/vega/vegaTheme.d.ts
 /**
- * Scheme-following Vega-Lite config — the design system's chart look as a plain
- * `Config`, for any consumer that compiles or renders a Vega-Lite spec.
+ * The design system's Vega-Lite chart look, following scheme and brand.
  *
- * - `background: 'transparent'` drops vega's opaque white backdrop, so the page
- *   surface shows through in both schemes.
- * - Axis/legend/header/title text and lines read the live semantic tokens, so a
- *   dark scheme (and a customer brand) recolour the chart chrome for free.
- * - `range.category` is `--chart-1..5` in series order — the same decorative
- *   palette the recharts wrappers in `@keboola/design/charts` use — so a
- *   categorical encoding matches the rest of the platform's data-viz instead of
- *   falling back to vega's `tableau10`.
- * - `range.ramp` puts the low end of a quantitative scale on `--accent` rather
- *   than vega's blue-only default, which keeps the pale end legible on a dark
- *   surface.
- * - A range set on the spec's own scale still wins, which is how a Flint chart
- *   keeps the series colours it resolves during assembly.
- * - Colours are resolved to concrete `rgb(R, G, B)` strings, not `var()`
- *   references: vega does its colour maths in JS and never consults the
- *   stylesheet. Rebuild the config when the scheme or brand changes —
- *   `useVegaTheme` does that for you.
+ * - `range.category` is `--chart-1..5`, the same palette as `@keboola/design/charts`.
+ * - A range set on the spec's own scale still wins (Flint charts rely on it).
+ * - Colours are concrete `rgb()` strings — vega never reads the stylesheet — so rebuild on a
+ *   scheme or brand change; `useVegaTheme` does.
  */
 declare const vegaTheme: (scheme: ResolvedColorScheme, from?: Element | null) => Config;
 //#endregion

package/dist/vega.js

@@ -1,20 +1,12 @@
-import { useThemeAttributes } from "./themeTokens-qP1-55O7.js";
-import { vegaTheme } from "./vegaTheme-CSvFEMBl.js";
+import { useThemeAttributes } from "./useThemeAttributes-B199Regy.js";
+import { vegaTheme } from "./vegaTheme-VQMWTlBw.js";
 import { useMemo } from "react";
 //#region src/vega/useVegaTheme.ts
 /**
-* {@link vegaTheme} for the scheme and brand currently painted on `<html>`,
-* rebuilt whenever either changes.
+* {@link vegaTheme} for the current scheme and brand, rebuilt when either changes.
 *
-* - The config holds resolved colour strings, not `var()` references, so a
-*   mounted chart would otherwise keep the palette it was first built with.
-* - The `useThemeAttributes` snapshot is the memo key: its reference moves on a
-*   scheme or brand switch and stands still otherwise, and `scheme` comes out of
-*   the same read, so the colours can never be resolved under one scheme and
-*   memoized under the other.
-* - Re-rendering is not enough on its own — a consumer that compiles a spec in
-*   an effect must depend on this config (or on `useThemeAttributes().cacheKey`)
-*   and re-render the chart.
+* - A consumer compiling a spec in an effect must depend on this config (or
+*   `useThemeAttributes().cacheKey`) and re-render the chart.
 */
 const useVegaTheme = () => {
 	const theme = useThemeAttributes();

package/dist/vega.js.map

@@ -1 +1 @@
-{"version":3,"file":"vega.js","names":[],"sources":["../src/vega/useVegaTheme.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Config } from 'vega-lite';\n\nimport { useThemeAttributes } from '../components/ThemeProvider/useThemeAttributes';\n\nimport { vegaTheme } from './vegaTheme';\n\n/**\n * {@link vegaTheme} for the scheme and brand currently painted on `<html>`,\n * rebuilt whenever either changes.\n *\n * - The config holds resolved colour strings, not `var()` references, so a\n *   mounted chart would otherwise keep the palette it was first built with.\n * - The `useThemeAttributes` snapshot is the memo key: its reference moves on a\n *   scheme or brand switch and stands still otherwise, and `scheme` comes out of\n *   the same read, so the colours can never be resolved under one scheme and\n *   memoized under the other.\n * - Re-rendering is not enough on its own — a consumer that compiles a spec in\n *   an effect must depend on this config (or on `useThemeAttributes().cacheKey`)\n *   and re-render the chart.\n */\nexport const useVegaTheme = (): Config => {\n  const theme = useThemeAttributes();\n\n  // The whole snapshot is the memo key, not `theme.scheme`: its reference moves\n  // when the scheme *or* the brand does, and a brand switch repaints every\n  // `--*` value while leaving the scheme alone.\n  return useMemo(() => vegaTheme(theme.scheme, theme.scope), [theme]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,MAAa,qBAA6B;CACxC,MAAM,QAAQ,mBAAmB;CAKjC,OAAO,cAAc,UAAU,MAAM,QAAQ,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC;AACpE"}
+{"version":3,"file":"vega.js","names":[],"sources":["../src/vega/useVegaTheme.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { Config } from 'vega-lite';\n\nimport { useThemeAttributes } from '../components/ThemeProvider/useThemeAttributes';\n\nimport { vegaTheme } from './vegaTheme';\n\n/**\n * {@link vegaTheme} for the current scheme and brand, rebuilt when either changes.\n *\n * - A consumer compiling a spec in an effect must depend on this config (or\n *   `useThemeAttributes().cacheKey`) and re-render the chart.\n */\nexport const useVegaTheme = (): Config => {\n  const theme = useThemeAttributes();\n\n  // Keyed on the whole snapshot, not `theme.scheme` — a brand switch repaints tokens too.\n  return useMemo(() => vegaTheme(theme.scheme, theme.scope), [theme]);\n};\n"],"mappings":";;;;;;;;;;AAaA,MAAa,qBAA6B;CACxC,MAAM,QAAQ,mBAAmB;CAGjC,OAAO,cAAc,UAAU,MAAM,QAAQ,MAAM,KAAK,GAAG,CAAC,KAAK,CAAC;AACpE"}

package/dist/{vegaTheme-CSvFEMBl.js → vegaTheme-VQMWTlBw.js}

@@ -1,4 +1,4 @@
-import { createChannelResolver } from "./themeTokens-qP1-55O7.js";
+import { createChannelResolver } from "./themeTokens-7DEab0kp.js";
 //#region src/vega/vegaTokens.ts
 /**
 * Serializes `"R G B"` channels comma-separated, the only form vega parses.
@@ -85,26 +85,12 @@ const createVegaColorResolver = (scheme, from) => {
 //#region src/vega/vegaTheme.ts
 const CHART_FONT = "Inter, system-ui, sans-serif";
 /**
-* Scheme-following Vega-Lite config — the design system's chart look as a plain
-* `Config`, for any consumer that compiles or renders a Vega-Lite spec.
+* The design system's Vega-Lite chart look, following scheme and brand.
 *
-* - `background: 'transparent'` drops vega's opaque white backdrop, so the page
-*   surface shows through in both schemes.
-* - Axis/legend/header/title text and lines read the live semantic tokens, so a
-*   dark scheme (and a customer brand) recolour the chart chrome for free.
-* - `range.category` is `--chart-1..5` in series order — the same decorative
-*   palette the recharts wrappers in `@keboola/design/charts` use — so a
-*   categorical encoding matches the rest of the platform's data-viz instead of
-*   falling back to vega's `tableau10`.
-* - `range.ramp` puts the low end of a quantitative scale on `--accent` rather
-*   than vega's blue-only default, which keeps the pale end legible on a dark
-*   surface.
-* - A range set on the spec's own scale still wins, which is how a Flint chart
-*   keeps the series colours it resolves during assembly.
-* - Colours are resolved to concrete `rgb(R, G, B)` strings, not `var()`
-*   references: vega does its colour maths in JS and never consults the
-*   stylesheet. Rebuild the config when the scheme or brand changes —
-*   `useVegaTheme` does that for you.
+* - `range.category` is `--chart-1..5`, the same palette as `@keboola/design/charts`.
+* - A range set on the spec's own scale still wins (Flint charts rely on it).
+* - Colours are concrete `rgb()` strings — vega never reads the stylesheet — so rebuild on a
+*   scheme or brand change; `useVegaTheme` does.
 */
 const vegaTheme = (scheme, from) => {
 	const token = createVegaColorResolver(scheme, from);
@@ -143,4 +129,4 @@ const vegaTheme = (scheme, from) => {
 //#endregion
 export { SERIES_TOKENS, createVegaColorResolver, vegaRgb, vegaTheme };
 
-//# sourceMappingURL=vegaTheme-CSvFEMBl.js.map
+//# sourceMappingURL=vegaTheme-VQMWTlBw.js.map

package/dist/vegaTheme-VQMWTlBw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vegaTheme-VQMWTlBw.js","names":[],"sources":["../src/vega/vegaTokens.ts","../src/vega/vegaTheme.ts"],"sourcesContent":["import type { ResolvedColorScheme } from '../components/ThemeProvider/types';\nimport { createChannelResolver } from '../utils/themeTokens';\n\n/**\n * Serializes `\"R G B\"` channels comma-separated, the only form vega parses.\n *\n * - vega reads colours through d3-color 3.1, which answers `null` for the\n *   space-separated CSS Color 4 form the rest of the package emits.\n * - A flat fill survives that anyway — the string reaches the SVG attribute and\n *   the browser parses it. An interpolated one does not: both endpoints of a\n *   sequential ramp collapse, and a quantitative scale paints solid black.\n */\nexport const vegaRgb = (channels: string, alpha?: number): string => {\n  const c = channels.split(/\\s+/).join(', ');\n  return alpha === undefined ? `rgb(${c})` : `rgba(${c}, ${alpha})`;\n};\n\n/** The `--chart-*` slots, in series order. */\nexport const SERIES_TOKENS = ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5'] as const;\n\n/**\n * Fallback channels for the tokens a vega chart reads, mirroring the `:root` /\n * `[data-theme='dark']` blocks of `styles.css`. The resolver reaches these only\n * when the live custom property is missing — SSR, or a unit test that loads no\n * CSS.\n */\nconst FALLBACK_CHANNELS = {\n  foreground: { light: '30 41 59', dark: '229 230 236' },\n  'muted-foreground': { light: '100 116 139', dark: '141 144 153' },\n  border: { light: '229 231 235', dark: '52 53 62' },\n  'chart-1': { light: '31 143 255', dark: '92 173 255' },\n  'chart-2': { light: '0 194 135', dark: '0 230 161' },\n  'chart-3': { light: '146 92 255', dark: '173 133 255' },\n  'chart-4': { light: '245 147 0', dark: '255 190 92' },\n  'chart-5': { light: '237 94 223', dark: '242 140 232' },\n  // The sequential ramp's low end and the surface it must stay legible against.\n  accent: { light: '224 242 254', dark: '30 58 95' },\n  card: { light: '255 255 255', dark: '34 34 40' },\n} as const;\n\nexport type VegaTokenName = keyof typeof FALLBACK_CHANNELS;\n\n/**\n * A vega-serializing token resolver bound to one `getComputedStyle` snapshot.\n *\n * - Answers `rgb(R, G, B)` / `rgba(R, G, B, a)` — see {@link vegaRgb}.\n * - Falls back per scheme when the custom property is not painted.\n * - Build one per palette, never at module level: the values change whenever\n *   the scheme or the brand does.\n */\nexport const createVegaColorResolver = (scheme: ResolvedColorScheme, from?: Element | null) => {\n  const resolve = createChannelResolver(from);\n\n  return (token: VegaTokenName, alpha?: number): string =>\n    vegaRgb(resolve(token, FALLBACK_CHANNELS[token][scheme]), alpha);\n};\n","import type { Config } from 'vega-lite';\n\nimport type { ResolvedColorScheme } from '../components/ThemeProvider/types';\n\nimport { createVegaColorResolver, SERIES_TOKENS } from './vegaTokens';\n\nconst CHART_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * The design system's Vega-Lite chart look, following scheme and brand.\n *\n * - `range.category` is `--chart-1..5`, the same palette as `@keboola/design/charts`.\n * - A range set on the spec's own scale still wins (Flint charts rely on it).\n * - Colours are concrete `rgb()` strings — vega never reads the stylesheet — so rebuild on a\n *   scheme or brand change; `useVegaTheme` does.\n */\nexport const vegaTheme = (scheme: ResolvedColorScheme, from?: Element | null): Config => {\n  const token = createVegaColorResolver(scheme, from);\n\n  const label = token('muted-foreground');\n  const heading = token('foreground');\n  const line = token('border');\n\n  return {\n    background: 'transparent',\n    font: CHART_FONT,\n    axis: {\n      labelColor: label,\n      titleColor: heading,\n      gridColor: token('border', 0.6),\n      domainColor: line,\n      tickColor: line,\n    },\n    legend: { labelColor: label, titleColor: heading },\n    header: { labelColor: label, titleColor: heading },\n    title: { color: heading, subtitleColor: label },\n    text: { color: heading },\n    range: {\n      category: SERIES_TOKENS.map((name) => token(name)),\n      ramp: [token('accent'), token('chart-1')],\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,WAAW,UAAkB,UAA2B;CACnE,MAAM,IAAI,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,IAAI;CACzC,OAAO,UAAU,KAAA,IAAY,OAAO,EAAE,KAAK,QAAQ,EAAE,IAAI,MAAM;AACjE;;AAGA,MAAa,gBAAgB;CAAC;CAAW;CAAW;CAAW;CAAW;AAAS;;;;;;;AAQnF,MAAM,oBAAoB;CACxB,YAAY;EAAE,OAAO;EAAY,MAAM;CAAc;CACrD,oBAAoB;EAAE,OAAO;EAAe,MAAM;CAAc;CAChE,QAAQ;EAAE,OAAO;EAAe,MAAM;CAAW;CACjD,WAAW;EAAE,OAAO;EAAc,MAAM;CAAa;CACrD,WAAW;EAAE,OAAO;EAAa,MAAM;CAAY;CACnD,WAAW;EAAE,OAAO;EAAc,MAAM;CAAc;CACtD,WAAW;EAAE,OAAO;EAAa,MAAM;CAAa;CACpD,WAAW;EAAE,OAAO;EAAc,MAAM;CAAc;CAEtD,QAAQ;EAAE,OAAO;EAAe,MAAM;CAAW;CACjD,MAAM;EAAE,OAAO;EAAe,MAAM;CAAW;AACjD;;;;;;;;;AAYA,MAAa,2BAA2B,QAA6B,SAA0B;CAC7F,MAAM,UAAU,sBAAsB,IAAI;CAE1C,QAAQ,OAAsB,UAC5B,QAAQ,QAAQ,OAAO,kBAAkB,MAAM,CAAC,OAAO,GAAG,KAAK;AACnE;;;ACjDA,MAAM,aAAa;;;;;;;;;AAUnB,MAAa,aAAa,QAA6B,SAAkC;CACvF,MAAM,QAAQ,wBAAwB,QAAQ,IAAI;CAElD,MAAM,QAAQ,MAAM,kBAAkB;CACtC,MAAM,UAAU,MAAM,YAAY;CAClC,MAAM,OAAO,MAAM,QAAQ;CAE3B,OAAO;EACL,YAAY;EACZ,MAAM;EACN,MAAM;GACJ,YAAY;GACZ,YAAY;GACZ,WAAW,MAAM,UAAU,EAAG;GAC9B,aAAa;GACb,WAAW;EACb;EACA,QAAQ;GAAE,YAAY;GAAO,YAAY;EAAQ;EACjD,QAAQ;GAAE,YAAY;GAAO,YAAY;EAAQ;EACjD,OAAO;GAAE,OAAO;GAAS,eAAe;EAAM;EAC9C,MAAM,EAAE,OAAO,QAAQ;EACvB,OAAO;GACL,UAAU,cAAc,KAAK,SAAS,MAAM,IAAI,CAAC;GACjD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,SAAS,CAAC;EAC1C;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "11.9.0",
+  "version": "13.0.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -121,14 +121,19 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
+    "@keboola/agent-vocabulary": "^0.1.1",
+    "@keboola/eslint-plugin-design": "^0.5.0",
+    "@keboola/oxlint-config": "^10.2.0",
+    "@keboola/tsconfig": "^0.2.1",
+    "@keboola/vitest-config": "^1.0.0",
     "@playwright/test": "1.63.0",
     "@size-limit/esbuild": "12.1.0",
     "@size-limit/file": "12.1.0",
-    "@storybook/addon-a11y": "10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/addon-links": "^10.2.19",
-    "@storybook/addon-vitest": "10.2.19",
-    "@storybook/react-vite": "^10.2.19",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "^10.6.1",
+    "@storybook/addon-links": "^10.6.1",
+    "@storybook/addon-vitest": "10.6.1",
+    "@storybook/react-vite": "^10.6.1",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.3.3",
@@ -137,24 +142,24 @@
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
     "@types/d3-color": "^3.1.3",
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "4.1.11",
-    "@vitest/browser-playwright": "4.1.11",
-    "@vitest/coverage-istanbul": "4.1.11",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/browser": "5.0.1",
+    "@vitest/browser-playwright": "5.0.1",
+    "@vitest/coverage-istanbul": "5.0.1",
+    "@vitest/coverage-v8": "^5.0.1",
     "d3-color": "^3.1.0",
     "eslint-plugin-storybook": "^10.3.5",
     "oxfmt": "^0.66.0",
     "oxlint": "^1.81.0",
     "playwright": "1.63.0",
-    "react": "^19.2.7",
+    "react": "^19.3.0",
     "react-docgen-typescript": "^2.4.0",
-    "react-dom": "^19.2.7",
+    "react-dom": "^19.3.0",
     "size-limit": "12.1.0",
-    "storybook": "^10.2.19",
+    "storybook": "^10.6.1",
     "tailwindcss": "^4.3.3",
     "tailwindcss-scoped-preflight": "^4.0.6",
     "tsdown": "^0.22.14",
@@ -162,11 +167,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.0",
-    "vitest": "^4.1.11",
-    "@keboola/agent-vocabulary": "^0.1.1",
-    "@keboola/oxlint-config": "^10.1.0",
-    "@keboola/tsconfig": "^0.2.1",
-    "@keboola/vitest-config": "^1.0.0"
+    "vitest": "^5.0.1"
   },
   "peerDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -193,6 +194,9 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.9",
     "@iconify-json/lucide": "^1.2.118",
+    "@keboola/brand-registry": "^2.0.0",
+    "@keboola/codemirror-lang-sql": "^0.7.3",
+    "@keboola/tailwind-config": "^1.2.0",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
     "@lexical/list": "^0.42.0",
@@ -237,7 +241,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.16",
     "flint-chart": "0.5.1",
     "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
@@ -254,10 +258,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "vega": "^6.4.0",
-    "vega-lite": "^6.4.3",
-    "@keboola/brand-registry": "^1.9.4",
-    "@keboola/codemirror-lang-sql": "^0.7.3",
-    "@keboola/tailwind-config": "^1.1.2"
+    "vega-lite": "^6.4.3"
   },
   "scripts": {
     "dev": "storybook dev -p \"${PORT:-6006}\"",
@@ -267,8 +268,8 @@
     "build:js": "tsdown",
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css --minify",
     "build:check": "node ../../tooling/check-dist-exports.mjs && attw --pack . --profile esm-only --exclude-entrypoints ./styles ./styles/compiled ./theme",
-    "test": "vitest run --config vite.config.ts --passWithNoTests --reporter=dot",
-    "test:stories": "vitest run --config vitest.config.ts",
+    "test": "vitest run --config vite.config.ts --reporter=dot",
+    "test:stories": "vitest run --config vitest.config.ts --reporter=default --reporter=github-actions --reporter=junit --outputFile.junit=./junit-report.stories.xml",
     "test:stories:coverage": "vitest run --config vitest.config.ts --coverage",
     "test:visual": "playwright test -c playwright.visual.config.ts",
     "test:visual:update": "playwright test -c playwright.visual.config.ts --update-snapshots",

package/src/styles.css

@@ -310,6 +310,12 @@
     color-scheme: normal;
   }
 
+  /* Dark selection — a translucent primary wash, so the selected run keeps its own ink
+     instead of flipping to a solid fill. Light keeps the UA default. */
+  [data-theme='dark'] ::selection {
+    background-color: rgb(var(--primary) / 0.35);
+  }
+
   @font-face {
     font-family: 'Inter';
     font-style: normal;
@@ -379,6 +385,7 @@
   h1 {
     font-size: 28px;
     line-height: 32px;
+    @apply tw:text-foreground;
     font-weight: 500;
   }
 
@@ -483,23 +490,122 @@
   }
 }
 
-@layer utilities {
-  /* Tailwind Typography pins its own palette (`--tw-prose-bold`, `--tw-prose-headings`,
-     …) to light-mode values, so those elements stay near-black when the semantic tokens
-     flip — bold text in a Markdown answer renders dark-on-dark. `prose` has no awareness
-     of `[data-theme]`, so invert it here.
-     
-     In `utilities`, not `components`: `.tw:prose` is itself a utility, and a v4 cascade
-     layer beats specificity outright — a more specific rule in `components` still loses
-     to the plain utility. Same layer, higher specificity, so this wins. */
-  [data-theme='dark'] .tw\:prose {
-    @apply tw:prose-invert;
-  }
-}
-
 @layer utilities {
   [data-header-span='full']
     > [data-app-shell-slot]:has(> [data-collapsible='off-canvas'][data-state='collapsed']) {
     overflow-x: clip;
   }
 }
+
+/**
+ * `tw:prose-answer` — how an assistant answer reads.
+ *
+ * - An answer is long-form prose read once, top to bottom, and wants different typography from the
+ *   dense table-and-form UI it sits beside. Bare `tw:prose` stays the chrome rhythm that config
+ *   descriptions and the markdown editor are written in.
+ * - Plain CSS rather than a `typography.ts` modifier: the typography plugin runs every key of a
+ *   `css` object through `inWhere()`, so an at-rule key compiles to `:where(@container …)` — a
+ *   selector, and a dead one. The width-responsive half of this rhythm cannot be written there.
+ * - `@utility` cannot be nested in a layer, so these rules keep real specificity (`0,1,1`) against
+ *   prose's `:where()`-wrapped `0,1,0`. They win on specificity, not on source order.
+ * - Every length is `em`, so the whole scale follows the base size rather than being pinned.
+ */
+@utility prose-answer {
+  /* Capped in `ch`, not pixels: an 828px column at 14px carries ~114 characters, well past the
+   * 45–75 a reader tracks comfortably, and a pixel cap drifts with the type size. */
+  max-width: 78ch;
+
+  /* Headings inside a reply are document structure, not page titles. The chrome scale starts where
+   * a page heading has a whole screen under it; a message is a column inside a panel, so the same
+   * ratios make an `h1` shout. These step clearly and stay relative. */
+  h1 {
+    font-size: 1.5em;
+  }
+  h2 {
+    font-size: 1.25em;
+  }
+  h3 {
+    font-size: 1.1em;
+  }
+  :is(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: 1.375;
+    /* Far more space above than below. That asymmetry is what makes an answer scannable — it reads
+     * as "new section, and this belongs to it". */
+    margin-bottom: 0.6em;
+  }
+  /* `:not(:first-child)` keeps the rhythm off the top edge of a message: prose zeroes the outer
+   * margins with a rule of its own, and a top margin that survives it lands inside the bubble as
+   * padding. */
+  :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+    margin-top: 1.4em;
+  }
+  /* An icon leading a heading belongs to it, so it takes the heading's ink. Muted grey beside bold
+   * near-black text reads as washed out rather than secondary; in body copy the icon keeps its
+   * muted default. */
+  :is(h1, h2, h3, h4, h5, h6) svg {
+    color: currentColor;
+  }
+
+  /* Bottom margin only. With a top margin too, a paragraph following a heading wins the margin
+   * collapse and reopens the gap the heading's tight bottom margin closes — the asymmetry only
+   * holds if one side owns it. */
+  :is(p, ul, ol) {
+    margin-top: 0;
+  }
+  :is(p, ul, ol):not(:last-child) {
+    margin-bottom: 0.8em;
+  }
+  /* Prose pins a line-height per element, so the root's is not inherited and has to be restated
+   * where it matters. */
+  :is(p, li) {
+    line-height: 1.55;
+  }
+  li:not(:first-child) {
+    margin-top: 0.35em;
+  }
+  li {
+    margin-bottom: 0;
+  }
+
+  /* Long lines need more leading, not less. A container query, not a viewport one: the panel
+   * narrows this column without the viewport changing at all. The `messages` container is the
+   * contract a transcript declares (`tw:@container/messages`); where none exists, the narrow
+   * values stand. */
+  @container messages (min-width: 640px) {
+    :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+      margin-top: 1.6em;
+    }
+    :is(p, ul, ol):not(:last-child) {
+      margin-bottom: 0.9em;
+    }
+    :is(p, li) {
+      line-height: 1.6;
+    }
+  }
+}
+
+/**
+ * `tw:prose-code-chip` — inline code as a chip rather than a bare accent word.
+ *
+ * - Every markdown surface this package draws is full of identifiers, and a chip separates them
+ *   from the sentence. The fill is the `--muted` / `--foreground` pair every inset surface takes.
+ * - Its own utility, not part of `tw:prose-answer`: this is palette, and the palette does not
+ *   depend on which rhythm the surface wears. Inside `prose-answer` it left every `rhythm="chrome"`
+ *   surface on `--tw-prose-code`, which is `#c7254e` in both schemes — 3.36:1 on the dark page,
+ *   under AA.
+ * - An `@utility` for the same reason `prose-answer` is one: it has to out-specify prose's
+ *   `:where()`-wrapped `code` colour from the same layer. A rule in `components` loses on layer
+ *   order and leaves the accent ink on the chip's fill.
+ * - The dark tooltip keeps its own chip: `[data-tooltip-content='true'] .tw\:prose :not(pre) > code`
+ *   is `(0,2,2)` against this rule's `(0,1,2)`, both in `utilities`.
+ */
+@utility prose-code-chip {
+  :not(pre) > code {
+    background-color: rgb(var(--muted));
+    color: rgb(var(--foreground));
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+    font-weight: inherit;
+  }
+}

package/src/theme.css

@@ -61,6 +61,7 @@
   --animate-progress-bar: progress-bar var(--progress-bar-duration, 3s) linear forwards;
   --animate-spinner-dots: spinner-dots 1s ease-in-out infinite;
   --animate-marching-ants: marching-ants 1s linear infinite;
+  --animate-kai-drift: kai-drift 12s ease-in-out infinite;
 
   /* Collapsible disclosure — keyframes below. `tw-animate-css` owns `collapsible-down`/`-up`
    * and every app imports it unlayered, so those two names are unusable here.
@@ -69,6 +70,130 @@
   --animate-collapsible-close: collapsible-close 300ms ease;
 }
 
+/* Kai's fill: bright pools drift over its blue, a darker one circles on its own slower path. */
+@utility bg-kai {
+  isolation: isolate;
+  overflow: hidden;
+  background-color: #1f8fff;
+  background-image:
+    radial-gradient(circle, #61e4ff 0, transparent 50%),
+    radial-gradient(circle, #8b5cff 0, transparent 50%),
+    radial-gradient(circle, #2dd4ff 0, transparent 45%);
+  background-size:
+    160% 300%,
+    180% 320%,
+    140% 280%;
+  background-position:
+    0% 20%,
+    100% 80%,
+    50% 0%;
+  background-repeat: no-repeat;
+  /* The glow sits under the focus ring's own shadows, so keyboard focus still shows. */
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    0 6px 18px -8px rgb(56 132 255 / 0.55);
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    inset: -60% -20%;
+    background: radial-gradient(closest-side, rgb(37 20 140 / 0.45), transparent 70%);
+    background-size: 45% 90%;
+    background-repeat: no-repeat;
+    animation: kai-shade 20s linear infinite;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      animation: none;
+    }
+  }
+}
+
+@keyframes kai-drift {
+  0%,
+  100% {
+    background-position:
+      0% 20%,
+      100% 80%,
+      50% 0%;
+  }
+  10% {
+    background-position:
+      30% 0%,
+      80% 100%,
+      90% 30%;
+  }
+  20% {
+    background-position:
+      70% 10%,
+      40% 90%,
+      100% 70%;
+  }
+  30% {
+    background-position:
+      100% 40%,
+      10% 60%,
+      60% 100%;
+  }
+  40% {
+    background-position:
+      80% 90%,
+      0% 20%,
+      20% 80%;
+  }
+  50% {
+    background-position:
+      40% 100%,
+      30% 0%,
+      0% 40%;
+  }
+  60% {
+    background-position:
+      10% 70%,
+      70% 10%,
+      30% 0%;
+  }
+  70% {
+    background-position:
+      0% 30%,
+      100% 40%,
+      80% 20%;
+  }
+  80% {
+    background-position:
+      50% 0%,
+      90% 90%,
+      100% 90%;
+  }
+  90% {
+    background-position:
+      20% 50%,
+      60% 70%,
+      40% 60%;
+  }
+}
+
+/* The darker pool's orbit: a slow loop across the button, out of step with the bright ones. */
+@keyframes kai-shade {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  25% {
+    background-position: 50% 0%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  75% {
+    background-position: 50% 100%;
+  }
+}
+
 @keyframes progress-bar {
   from {
     width: 0%;
@@ -158,11 +283,11 @@
  * still highlighted a `[data-disabled="true"]` control on hover and focus. */
 @custom-variant not-disabled (&:not([data-disabled="true"]):not(:disabled));
 
-/* `overflow-wrap: anywhere` — no v4 core utility covers it (`break-words` is `break-word`,
- * which keeps long unbroken tokens overflowing). Authored in 16 app files. */
-@utility break-anywhere {
-  overflow-wrap: anywhere;
-}
+/* Interactive-surface variant — `interactive:hover:…`. Matches:
+ * - an `<a href>`, unless it opts out with `data-interactive="false"`;
+ * - any element that opts in with `data-interactive="true"`.
+ * Lives here, not in a JS plugin, for the same reason as `not-disabled`: apps compile design's classes. */
+@custom-variant interactive (&:is([data-interactive="true"], a[href]:not([data-interactive="false"])));
 
 @theme inline {
   --color-inherit: inherit;