@calliopelabs/ui 0.13.0 → 0.16.0

package/dist/primitives/Toast.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusDot } from "../status/StatusDot.js";
+const ToastContext = React.createContext(null);
+/**
+ * Transient notices, bottom right, on Radix Toast: they pause on hover and
+ * focus, F8 jumps to them, and swiping or Escape closes one. Wrap the app
+ * once and call `useToast().toast(...)` anywhere under it.
+ */
+export function ToastProvider({ children, duration = 5000, className }) {
+    const { messages } = useUI();
+    const [toasts, setToasts] = React.useState([]);
+    const counter = React.useRef(0);
+    const api = React.useMemo(() => ({
+        toast: (options) => {
+            const id = options.id ?? `toast-${++counter.current}`;
+            setToasts((list) => {
+                const entry = { ...options, id };
+                return list.some((t) => t.id === id)
+                    ? list.map((t) => (t.id === id ? entry : t))
+                    : [...list, entry];
+            });
+            return id;
+        },
+        dismiss: (id) => setToasts((list) => list.filter((t) => t.id !== id)),
+    }), []);
+    return (_jsx(ToastContext.Provider, { value: api, children: _jsxs(ToastPrimitive.Provider, { duration: duration, label: messages.toast.region, children: [children, toasts.map((t) => (_jsxs(ToastPrimitive.Root, { "data-slot": "toast", "data-tone": t.tone, open: true, duration: t.duration, type: t.tone === "error" ? "foreground" : "background", onOpenChange: (open) => {
+                        if (!open)
+                            api.dismiss(t.id);
+                    }, className: "pointer-events-auto relative flex w-full items-start gap-2.5 rounded-lg bg-popover p-3 pr-9 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=open]:animate-cui-fade-in data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)", children: [t.tone && _jsx(StatusDot, { tone: t.tone, className: "mt-1.5" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(ToastPrimitive.Title, { className: "font-medium [overflow-wrap:anywhere]", children: t.title }), t.description && (_jsx(ToastPrimitive.Description, { className: "[overflow-wrap:anywhere] text-muted-foreground", children: t.description })), t.action && (_jsx(ToastPrimitive.Action, { altText: t.action.altText, onClick: t.action.onClick, className: "mt-1 w-fit rounded-lg text-sm font-medium text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring/50", children: t.action.label }))] }), _jsx(ToastPrimitive.Close, { "aria-label": messages.toast.close, className: "absolute top-2 right-2 inline-flex size-6 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: _jsx(XIcon, { className: "size-3.5", "aria-hidden": true }) })] }, t.id))), _jsx(ToastPrimitive.Viewport, { "data-slot": "toast-viewport", className: cn("fixed right-0 bottom-0 z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none", className) })] }) }));
+}
+/** The toast API of the nearest ToastProvider. Throws outside one, so a missing provider is loud. */
+export function useToast() {
+    const api = React.useContext(ToastContext);
+    if (!api)
+        throw new Error("useToast needs a ToastProvider above it");
+    return api;
+}

package/dist/primitives/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * Shares one open delay across the tooltips under it. A Tooltip outside a
+ * provider makes its own, so the provider is optional; an app with many
+ * icon buttons wraps its shell once.
+ */
+export declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+/**
+ * A short hint on hover and keyboard focus. It names nothing: an icon-only
+ * control still needs its own `aria-label`; the tooltip repeats it for
+ * sighted pointer users.
+ */
+export declare function Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+export declare function TooltipTrigger(props: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+export declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;

package/dist/primitives/Tooltip.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * Shares one open delay across the tooltips under it. A Tooltip outside a
+ * provider makes its own, so the provider is optional; an app with many
+ * icon buttons wraps its shell once.
+ */
+export function TooltipProvider({ delayDuration = 300, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+/**
+ * A short hint on hover and keyboard focus. It names nothing: an icon-only
+ * control still needs its own `aria-label`; the tooltip repeats it for
+ * sighted pointer users.
+ */
+export function Tooltip(props) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+export function TooltipTrigger(props) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+export function TooltipContent({ className, sideOffset = 4, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-lg bg-foreground px-2 py-1 text-xs text-balance text-background data-[state=delayed-open]:animate-cui-fade-in", className), ...props, children: children }) }));
+}

package/dist/provider/messages.d.ts

@@ -1,4 +1,6 @@
 import type { ProductTheme } from "../appearance/product.js";
+import type { ChatRole, ChatRunStatus, ChatToolCallStatus } from "../chat/model.js";
+import type { UploadState } from "../workbench/model.js";
 import type { WorkflowQuestionState } from "../workflow/question.js";
 import type { WorkflowAction, WorkflowAvailability, WorkflowScope, WorkflowStatus } from "../workflow/model.js";
 import type { ArtifactStatus, GateStatus, ReviewDecision, ReviewVerdict, RunStageStatus } from "../workflow/run.js";
@@ -102,6 +104,66 @@ export interface Messages {
     dialog: {
         close: string;
     };
+    workbench: {
+        /** The file browser's name. */
+        files: string;
+        /** The folder tree's name. */
+        folders: string;
+        /** The root directory in the breadcrumb. */
+        root: string;
+        /** The breadcrumb's landmark name. */
+        location: string;
+        /** A listing's accessible name: "Files in reports". */
+        filesIn: (folder: string) => string;
+        view: string;
+        listView: string;
+        gridView: string;
+        name: string;
+        size: string;
+        modified: string;
+        /** Read for a folder's or an unknown size's dash. */
+        noSize: string;
+        loading: string;
+        loadFailed: string;
+        retry: string;
+        /** A tree folder whose children failed to load; activating it retries. */
+        retryFolder: string;
+        empty: string;
+        emptyDescription: string;
+        noFolders: string;
+        itemCount: (count: number) => string;
+        selected: (count: number) => string;
+        /** The overlay while files from the desktop hover over the browser. */
+        dropToUpload: string;
+        dropHere: string;
+        browse: string;
+        maxSize: (size: string) => string;
+        /** The upload list's name. */
+        uploads: string;
+        uploading: (count: number) => string;
+        uploadsDone: string;
+        uploadState: (state: UploadState) => string;
+        cancelUpload: (name: string) => string;
+        dismissUpload: (name: string) => string;
+        previewOf: (name: string) => string;
+        previewLoading: string;
+        previewFailed: string;
+        noPreview: string;
+        closePreview: string;
+        /** A text preview's scrolling region. */
+        contentsOf: (name: string) => string;
+        /** A truncated preview: "Showing 100 of 4,210 rows". */
+        showing: (shown: number, total: number | null) => string;
+        partial: string;
+        /** A CSV column with no header. */
+        column: (index: number) => string;
+        noRows: string;
+    };
+    toast: {
+        /** The notifications region; Radix fills `{hotkey}` with the shortcut that focuses it. */
+        region: string;
+        close: string;
+    };
     confirm: {
         confirm: string;
         cancel: string;
@@ -550,6 +612,79 @@ export interface Messages {
         /** A field extraction found nothing in. */
         empty: string;
     };
+    chat: {
+        /** The message list's name. */
+        conversation: string;
+        empty: string;
+        emptyDescription: string;
+        /** Who said it: "You", "Assistant", "System", "Developer", "Tool". */
+        role: (role: ChatRole) => string;
+        /** A message's accessible name. */
+        messageFrom: (speaker: string) => string;
+        /** An answer that has started but has no text yet. */
+        thinking: string;
+        /** Read after a message still being written. */
+        writing: string;
+        jumpToLatest: string;
+        runFailed: string;
+        retry: string;
+        /** The composer's field. */
+        composer: string;
+        placeholder: string;
+        composerHint: string;
+        send: string;
+        stop: string;
+        attachments: string;
+        /** A tool call's accessible name. */
+        toolCall: (name: string) => string;
+        toolStatus: (status: ChatToolCallStatus | "approval") => string;
+        details: string;
+        arguments: string;
+        noArguments: string;
+        result: string;
+        toolError: string;
+        approvalNeeded: string;
+        approve: string;
+        deny: string;
+        approveTitle: (name: string) => string;
+        approveDescription: string;
+        denyTitle: (name: string) => string;
+        denyDescription: string;
+        denyReason: string;
+        /** The agent progress section's name. */
+        progress: string;
+        steps: string;
+        runStatus: (status: ChatRunStatus) => string;
+        model: string;
+    };
+    agent: {
+        /** The assistant's name: the panel's title and the launcher's. Takes the product's name when there is one. */
+        title: (product?: string) => string;
+        /** The launcher's name when closed and open. */
+        open: (title: string) => string;
+        close: string;
+        /** Read with the launcher's name: "2 unread". */
+        unread: (count: number) => string;
+        newConversation: string;
+        expand: string;
+        restore: string;
+        /** The suggestion chips' group. */
+        suggestions: string;
+        emptyTitle: string;
+        emptyDescription: string;
+        /** Under the composer while a tool waits on the person. */
+        waitingOnYou: string;
+        /** The shortcut as people read it, from the key list ("⌘/", "Ctrl+/"). */
+        shortcut: (keys: string) => string;
+        /** A question from the agent that is not a tool call. */
+        interrupt: string;
+        decline: string;
+        back: string;
+        /** Answers an artifact's form review. */
+        sendReview: string;
+        /** The shared state's section. */
+        sharedState: string;
+    };
 }
 export declare const defaultMessages: Messages;
 /** Any subset of the messages, one level deep. */

package/dist/provider/messages.js

@@ -236,6 +236,61 @@ export const defaultMessages = {
     dialog: {
         close: "Close",
     },
+    workbench: {
+        files: "Files",
+        folders: "Folders",
+        root: "Home",
+        location: "Location",
+        filesIn: (folder) => `Files in ${folder}`,
+        view: "View",
+        listView: "List",
+        gridView: "Grid",
+        name: "Name",
+        size: "Size",
+        modified: "Modified",
+        noSize: "No size",
+        loading: "Loading files",
+        loadFailed: "Could not load this folder",
+        retry: "Retry",
+        retryFolder: "Could not load. Retry",
+        empty: "This folder is empty",
+        emptyDescription: "Drop files here to upload them.",
+        noFolders: "No folders",
+        itemCount: (count) => `${count.toLocaleString()} ${count === 1 ? "item" : "items"}`,
+        selected: (count) => `${count.toLocaleString()} selected`,
+        dropToUpload: "Drop files to upload",
+        dropHere: "Drop files here",
+        browse: "Choose files",
+        maxSize: (size) => `Up to ${size} each`,
+        uploads: "Uploads",
+        uploading: (count) => `Uploading ${count.toLocaleString()} ${count === 1 ? "file" : "files"}`,
+        uploadsDone: "Uploads finished",
+        uploadState: (state) => ({
+            queued: "Waiting",
+            uploading: "Uploading",
+            done: "Done",
+            error: "Failed",
+            canceled: "Cancelled",
+        })[state],
+        cancelUpload: (name) => `Cancel upload of ${name}`,
+        dismissUpload: (name) => `Clear ${name}`,
+        previewOf: (name) => `Preview of ${name}`,
+        previewLoading: "Loading preview",
+        previewFailed: "Could not preview this file",
+        noPreview: "No preview for this file",
+        closePreview: "Close preview",
+        contentsOf: (name) => `Contents of ${name}`,
+        showing: (shown, total) => total === null
+            ? `Showing the first ${shown.toLocaleString()}`
+            : `Showing ${shown.toLocaleString()} of ${total.toLocaleString()}`,
+        partial: "Showing the start of the file",
+        column: (index) => `Column ${index}`,
+        noRows: "No rows",
+    },
+    toast: {
+        region: "Notifications ({hotkey})",
+        close: "Dismiss notification",
+    },
     confirm: {
         confirm: "Confirm",
         cancel: "Cancel",
@@ -781,6 +836,82 @@ export const defaultMessages = {
         cancel: "Cancel",
         empty: "Nothing found",
     },
+    chat: {
+        conversation: "Conversation",
+        empty: "No messages yet",
+        emptyDescription: "Ask a question to start.",
+        role: (role) => ({
+            user: "You",
+            assistant: "Assistant",
+            system: "System",
+            developer: "Developer",
+            tool: "Tool",
+        })[role],
+        messageFrom: (speaker) => `Message from ${speaker}`,
+        thinking: "Thinking",
+        writing: "Still writing",
+        jumpToLatest: "Jump to latest",
+        runFailed: "The run failed",
+        retry: "Retry",
+        composer: "Message",
+        placeholder: "Ask anything",
+        composerHint: "Enter to send, Shift+Enter for a new line.",
+        send: "Send",
+        stop: "Stop",
+        attachments: "Attachments",
+        toolCall: (name) => `Tool call ${name}`,
+        toolStatus: (status) => ({
+            streaming: "preparing",
+            running: "running",
+            complete: "done",
+            failed: "failed",
+            cancelled: "cancelled",
+            approval: "needs approval",
+        })[status],
+        details: "Details",
+        arguments: "Arguments",
+        noArguments: "No arguments",
+        result: "Result",
+        toolError: "Error",
+        approvalNeeded: "The agent is waiting for your approval to run this.",
+        approve: "Approve",
+        deny: "Deny",
+        approveTitle: (name) => `Run ${name}?`,
+        approveDescription: "The agent runs it with the arguments shown and continues.",
+        denyTitle: (name) => `Deny ${name}?`,
+        denyDescription: "The agent does not run it and is told why.",
+        denyReason: "Reason",
+        progress: "Agent progress",
+        steps: "Steps",
+        runStatus: (status) => ({
+            idle: "idle",
+            running: "running",
+            finished: "finished",
+            interrupted: "waiting for you",
+            cancelled: "stopped",
+            error: "failed",
+        })[status],
+        model: "Model",
+    },
+    agent: {
+        title: (product) => (product ? `${product} assistant` : "Assistant"),
+        open: (title) => `Open ${title}`,
+        close: "Close",
+        unread: (count) => `${count.toLocaleString("en")} unread`,
+        newConversation: "New conversation",
+        expand: "Expand",
+        restore: "Restore",
+        suggestions: "Suggestions",
+        emptyTitle: "How can I help?",
+        emptyDescription: "Ask about what is on this page, or pick a starting point.",
+        waitingOnYou: "Answer the card above to continue.",
+        shortcut: (keys) => `Shortcut ${keys}`,
+        interrupt: "The agent is waiting for you",
+        decline: "Decline",
+        back: "Back",
+        sendReview: "Send review",
+        sharedState: "Shared state",
+    },
 };
 export function mergeMessages(overrides) {
     if (!overrides)

package/dist/theme/css-layer.js

@@ -1,5 +1,5 @@
 import { BOOT_SOURCE, bootConfig } from "../appearance/boot.js";
-import { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "../appearance/brands.js";
+import { astroliftBrand, chatStudioBrand, cykickBrand, deepDataAgentBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "../appearance/brands.js";
 import { CORNERS, defineProduct } from "../appearance/product.js";
 import { accentDeclarations, block, renderThemeCss } from "./css.js";
 /**
@@ -16,6 +16,7 @@ export const CSS_LAYER_PRODUCTS = [
     chatStudioBrand,
     loadrBrand,
     cykickBrand,
+    deepDataAgentBrand,
 ].map((config) => defineProduct(config));
 const TOKENS_HEADER = `/*
  * @calliopelabs/ui CSS layer: tokens.

package/dist/theme/mappings/palette.d.ts

@@ -0,0 +1,52 @@
+import { ACCENT_KEYS, DEFAULT_ACCENT, GROUNDS, GROUND_KEYS, type FamilyAccent, type Ground, type StatusName } from "../tokens.js";
+export declare const COLOR_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "border", "input", "ring", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring", "sidebar-muted-foreground", "surface-0", "surface-1", "surface-2", ...(StatusName | "success-fg" | "warning-fg" | "info-fg" | "danger-fg" | "success-bg" | "warning-bg" | "info-bg" | "danger-bg" | "success-border" | "warning-border" | "info-border" | "danger-border")[]];
+export type ColorToken = (typeof COLOR_TOKENS)[number];
+export type Palette = Record<ColorToken, string>;
+export { ACCENT_KEYS, DEFAULT_ACCENT, GROUNDS, GROUND_KEYS };
+export type { FamilyAccent, Ground };
+/** The ground `:root` paints when nothing chooses one (the preset's default). */
+export declare const DEFAULT_GROUND: Ground;
+/**
+ * The type stacks of the preset (`--font-sans`, `--font-mono`, `--font-head`
+ * in preset.css; a test holds them equal). Each names the app's loaded font
+ * variable first, then the family, then system fallbacks.
+ */
+export declare const FONTS: {
+    readonly sans: "var(--font-plex-sans, \"IBM Plex Sans\"), system-ui, sans-serif";
+    readonly mono: "var(--font-plex-mono, \"IBM Plex Mono\"), ui-monospace, SFMono-Regular, Menlo, monospace";
+    readonly head: "var(--font-dm-sans, \"DM Sans\"), system-ui, sans-serif";
+};
+/** The family a stack names, for targets that take one font name (React Native). */
+export declare function fontFamily(stack: string): string;
+/** `--radius` in px, and the motion durations in ms, as numbers. */
+export declare function staticNumbers(): {
+    radius: number;
+    motion: Record<"fast" | "base" | "slow", number>;
+};
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Parses `#rrggbb` or `rgba(r, g, b, a)`; anything else is a token this module does not know. */
+export declare function parseColor(value: string): Rgba;
+/**
+ * A translucent token laid on its surface, for targets with no alpha
+ * (a terminal, Tk): `sidebar-*` tokens on the sidebar, the rest on the
+ * background. Opaque tokens come back as they are.
+ */
+export declare function flatten(palette: Palette, token: ColorToken): Rgba;
+/** The concrete palette of one ground with one family accent, with no product brand. */
+export declare function resolvePalette(ground: Ground, accent?: FamilyAccent): Palette;
+/** Every ground with every family accent. */
+export declare function allPalettes(): Record<Ground, Record<FamilyAccent, Palette>>;
+/**
+ * A target's values split for compact output: per ground, the entries every
+ * accent agrees on, and per ground and accent, the entries that move with
+ * the accent.
+ */
+export declare function splitByAccent<K extends string, V>(values: (ground: Ground, accent: FamilyAccent) => Record<K, V>): {
+    ground: Record<Ground, Partial<Record<K, V>>>;
+    accent: Record<Ground, Record<FamilyAccent, Partial<Record<K, V>>>>;
+};

package/dist/theme/mappings/palette.js

@@ -0,0 +1,208 @@
+import { ACCENTS, ACCENT_KEYS, DEFAULT_ACCENT, GROUNDS, GROUND_KEYS, MODE_TOKENS, STATIC_TOKENS, SURFACES, } from "../tokens.js";
+/**
+ * The palette a page paints on one ground with one family accent, as
+ * concrete colours: what the preset's custom properties compute to on that
+ * page with no product brand set. Every token mapping (JupyterLab, VS Code,
+ * Python, React Native, plain CSS) is generated from this, and a test holds
+ * it to the preset's own cascade.
+ *
+ * Values are `#rrggbb` or `rgba(r, g, b, a)`. The preset's one colour
+ * function, `color-mix(in oklab, var(--primary) N%, transparent)`, is the
+ * primary at alpha N% (mixing with transparent only scales alpha), so it is
+ * written that way here.
+ */
+const STATUS_NAMES = ["success", "warning", "info", "danger"];
+export const COLOR_TOKENS = [
+    "background",
+    "foreground",
+    "card",
+    "card-foreground",
+    "popover",
+    "popover-foreground",
+    "primary",
+    "primary-foreground",
+    "secondary",
+    "secondary-foreground",
+    "muted",
+    "muted-foreground",
+    "accent",
+    "accent-foreground",
+    "destructive",
+    "border",
+    "input",
+    "ring",
+    "chart-1",
+    "chart-2",
+    "chart-3",
+    "chart-4",
+    "chart-5",
+    "sidebar",
+    "sidebar-foreground",
+    "sidebar-primary",
+    "sidebar-primary-foreground",
+    "sidebar-accent",
+    "sidebar-accent-foreground",
+    "sidebar-border",
+    "sidebar-ring",
+    "sidebar-muted-foreground",
+    "surface-0",
+    "surface-1",
+    "surface-2",
+    ...STATUS_NAMES.flatMap((name) => [name, `${name}-fg`, `${name}-bg`, `${name}-border`]),
+];
+export { ACCENT_KEYS, DEFAULT_ACCENT, GROUNDS, GROUND_KEYS };
+/** The ground `:root` paints when nothing chooses one (the preset's default). */
+export const DEFAULT_GROUND = "black";
+/**
+ * The type stacks of the preset (`--font-sans`, `--font-mono`, `--font-head`
+ * in preset.css; a test holds them equal). Each names the app's loaded font
+ * variable first, then the family, then system fallbacks.
+ */
+export const FONTS = {
+    sans: 'var(--font-plex-sans, "IBM Plex Sans"), system-ui, sans-serif',
+    mono: 'var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace',
+    head: 'var(--font-dm-sans, "DM Sans"), system-ui, sans-serif',
+};
+/** The family a stack names, for targets that take one font name (React Native). */
+export function fontFamily(stack) {
+    const name = /"([^"]+)"/.exec(stack)?.[1];
+    if (!name)
+        throw new Error(`no family in ${stack}`);
+    return name;
+}
+/** `--radius` in px, and the motion durations in ms, as numbers. */
+export function staticNumbers() {
+    const n = (value, unit) => {
+        if (!value?.endsWith(unit))
+            throw new Error(`expected ${unit}: ${value}`);
+        return Number(value.slice(0, -unit.length));
+    };
+    return {
+        radius: n(STATIC_TOKENS.radius, "px"),
+        motion: {
+            fast: n(STATIC_TOKENS["motion-fast"], "ms"),
+            base: n(STATIC_TOKENS["motion-base"], "ms"),
+            slow: n(STATIC_TOKENS["motion-slow"], "ms"),
+        },
+    };
+}
+/** Parses `#rrggbb` or `rgba(r, g, b, a)`; anything else is a token this module does not know. */
+export function parseColor(value) {
+    const hex = /^#([0-9a-f]{6})$/i.exec(value);
+    if (hex) {
+        const n = parseInt(hex[1] ?? "", 16);
+        return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255, a: 1 };
+    }
+    const fn = /^rgba\((\d+), (\d+), (\d+), ([0-9.]+)\)$/.exec(value);
+    if (fn)
+        return { r: Number(fn[1]), g: Number(fn[2]), b: Number(fn[3]), a: Number(fn[4]) };
+    throw new Error(`unsupported colour ${value}`);
+}
+const rgbaString = ({ r, g, b, a }) => `rgba(${r}, ${g}, ${b}, ${a})`;
+/**
+ * A translucent token laid on its surface, for targets with no alpha
+ * (a terminal, Tk): `sidebar-*` tokens on the sidebar, the rest on the
+ * background. Opaque tokens come back as they are.
+ */
+export function flatten(palette, token) {
+    const top = parseColor(palette[token]);
+    if (top.a === 1)
+        return top;
+    const base = parseColor(palette[token.startsWith("sidebar-") ? "sidebar" : "background"]);
+    if (base.a !== 1)
+        throw new Error(`${token} sits on a translucent surface`);
+    const mix = (t, b) => Math.round(t * top.a + b * (1 - top.a));
+    return { r: mix(top.r, base.r), g: mix(top.g, base.g), b: mix(top.b, base.b), a: 1 };
+}
+const PRIMARY_TINT = /^color-mix\(in oklab, var\(--primary\) (\d+)%, transparent\)$/;
+/** A surface value: a colour as it is, or the preset's primary tint at its alpha. */
+function surface(value, primary) {
+    const tint = PRIMARY_TINT.exec(value);
+    if (tint)
+        return rgbaString({ ...parseColor(primary), a: Number(tint[1]) / 100 });
+    parseColor(value);
+    return value;
+}
+/** The concrete palette of one ground with one family accent, with no product brand. */
+export function resolvePalette(ground, accent = DEFAULT_ACCENT) {
+    const { mode } = GROUNDS[ground];
+    const s = SURFACES[ground];
+    const m = MODE_TOKENS[mode];
+    const spec = ACCENTS[accent];
+    const primary = mode === "dark" ? spec.dark : spec.light;
+    const onPrimary = mode === "dark" ? spec.onDark : spec.onLight;
+    const chart = { ...m.chart, ...spec.chart?.[mode] };
+    const status = Object.fromEntries(STATUS_NAMES.flatMap((name) => {
+        const t = m.status[name];
+        return [
+            [name, t.base],
+            [`${name}-fg`, t.fg],
+            [`${name}-bg`, t.bg],
+            [`${name}-border`, t.border],
+        ];
+    }));
+    const palette = {
+        background: s.background,
+        foreground: m.foreground,
+        card: s.card,
+        "card-foreground": m.foreground,
+        popover: s.popover,
+        "popover-foreground": m.foreground,
+        primary,
+        "primary-foreground": onPrimary,
+        secondary: s.secondary,
+        "secondary-foreground": m.foreground,
+        muted: s.muted,
+        "muted-foreground": s.mutedForeground,
+        accent: s.accent,
+        "accent-foreground": m.foreground,
+        destructive: m.destructive,
+        border: s.border,
+        input: s.input,
+        ring: primary,
+        "chart-1": primary,
+        ...chart,
+        // With no product brand, a brand sidebar falls back to the ground's card.
+        sidebar: s.sidebar === "brand" ? s.card : s.sidebar,
+        "sidebar-foreground": m.sidebarForeground,
+        "sidebar-primary": primary,
+        "sidebar-primary-foreground": onPrimary,
+        "sidebar-accent": s.sidebarAccent,
+        "sidebar-accent-foreground": m.foreground,
+        "sidebar-border": s.sidebarBorder,
+        "sidebar-ring": primary,
+        "sidebar-muted-foreground": s.mutedForeground,
+        "surface-0": s.background,
+        "surface-1": s.card,
+        "surface-2": s.popover,
+        ...status,
+    };
+    for (const token of COLOR_TOKENS)
+        palette[token] = surface(palette[token], primary);
+    return palette;
+}
+/** Every ground with every family accent. */
+export function allPalettes() {
+    return Object.fromEntries(GROUND_KEYS.map((ground) => [
+        ground,
+        Object.fromEntries(ACCENT_KEYS.map((accent) => [accent, resolvePalette(ground, accent)])),
+    ]));
+}
+/**
+ * A target's values split for compact output: per ground, the entries every
+ * accent agrees on, and per ground and accent, the entries that move with
+ * the accent.
+ */
+export function splitByAccent(values) {
+    const ground = {};
+    const accent = {};
+    for (const g of GROUND_KEYS) {
+        const each = ACCENT_KEYS.map((a) => [a, values(g, a)]);
+        const first = each[0][1];
+        const keys = Object.keys(first);
+        const moves = new Set(keys.filter((k) => each.some(([, v]) => JSON.stringify(v[k]) !== JSON.stringify(first[k]))));
+        ground[g] = Object.fromEntries(keys.filter((k) => !moves.has(k)).map((k) => [k, first[k]]));
+        accent[g] = Object.fromEntries(each.map(([a, v]) => [a, Object.fromEntries([...moves].map((k) => [k, v[k]]))]));
+    }
+    return { ground, accent };
+}

package/dist/theme/mappings/render.d.ts

@@ -0,0 +1,9 @@
+export declare function renderJupyterLabCss(): string;
+export declare function renderVsCodeCss(): string;
+export declare function renderPlainCss(): string;
+export declare function renderPython(): string;
+export declare function renderNativeJs(): string;
+export declare function renderNativeDts(): string;
+export declare function renderReadmes(): Record<string, string>;
+/** Every generated file under src/tokens/, by file name. */
+export declare function renderTokenFiles(): Record<string, string>;