@baguette-studios/kernl-ui-core 0.1.0

package/dist/tailwind.css

@@ -0,0 +1,40 @@
+@import "./theme.css";
+
+@theme inline {
+  --color-kernl-canvas: var(--kernl-canvas);
+  --color-kernl-surface: var(--kernl-surface);
+  --color-kernl-surface-raised: var(--kernl-surface-raised);
+  --color-kernl-control: var(--kernl-control);
+  --color-kernl-control-hover: var(--kernl-control-hover);
+  --color-kernl-ink: var(--kernl-ink);
+  --color-kernl-ink-soft: var(--kernl-ink-soft);
+  --color-kernl-ink-secondary: var(--kernl-ink-secondary);
+  --color-kernl-ink-tertiary: var(--kernl-ink-tertiary);
+  --color-kernl-ink-muted: var(--kernl-ink-muted);
+  --color-kernl-border: var(--kernl-border);
+  --color-kernl-border-soft: var(--kernl-border-soft);
+  --color-kernl-border-strong: var(--kernl-border-strong);
+  --color-kernl-accent: var(--kernl-accent);
+  --color-kernl-accent-ink: var(--kernl-accent-ink);
+  --color-kernl-accent-hover: var(--kernl-accent-hover);
+  --color-kernl-accent-soft: var(--kernl-accent-soft);
+  --color-kernl-active: var(--kernl-active);
+  --color-kernl-success: var(--kernl-success);
+  --color-kernl-success-soft: var(--kernl-success-soft);
+  --color-kernl-warning: var(--kernl-warning);
+  --color-kernl-warning-soft: var(--kernl-warning-soft);
+  --color-kernl-danger: var(--kernl-danger);
+  --color-kernl-danger-soft: var(--kernl-danger-soft);
+  --spacing-kernl-1: var(--kernl-space-1);
+  --spacing-kernl-2: var(--kernl-space-2);
+  --spacing-kernl-3: var(--kernl-space-3);
+  --spacing-kernl-4: var(--kernl-space-4);
+  --radius-kernl-sm: var(--kernl-radius-sm);
+  --radius-kernl-md: var(--kernl-radius-md);
+  --radius-kernl-lg: var(--kernl-radius-lg);
+  --radius-kernl-pill: var(--kernl-radius-pill);
+  --font-kernl: var(--kernl-font);
+  --font-kernl-mono: var(--kernl-mono);
+  --shadow-kernl-message-pending: var(--kernl-message-pending-shadow);
+  --shadow-kernl-submit-menu: var(--kernl-submit-menu-shadow);
+}

package/dist/theme.css

@@ -0,0 +1,171 @@
+@layer kernl.theme {
+  :root,
+  .kernl-theme-root,
+  [data-kernl-theme] {
+    --kernl-canvas: #f6f8f7;
+    --kernl-surface: #ffffff;
+    --kernl-surface-raised: #fbfcfb;
+    --kernl-control: #f0f3f2;
+    --kernl-control-hover: #e9eeee;
+    --kernl-ink: #1f2528;
+    --kernl-ink-soft: #4b555a;
+    --kernl-ink-secondary: #4b555a;
+    --kernl-ink-tertiary: #758086;
+    --kernl-ink-muted: #9aa4a8;
+    --kernl-border: rgba(39, 48, 52, 0.13);
+    --kernl-border-soft: rgba(39, 48, 52, 0.08);
+    --kernl-border-strong: rgba(39, 48, 52, 0.22);
+    --kernl-accent: #236c5c;
+    --kernl-accent-ink: #ffffff;
+    --kernl-accent-hover: #1d5f50;
+    --kernl-accent-soft: #eef7f5;
+    --kernl-accent-border: rgba(35, 108, 92, 0.24);
+    --kernl-active: #2d6f9f;
+    --kernl-success: #24724f;
+    --kernl-success-soft: rgba(36, 114, 79, 0.13);
+    --kernl-warning: #9a6a19;
+    --kernl-warning-soft: rgba(154, 106, 25, 0.14);
+    --kernl-danger: #aa3d37;
+    --kernl-danger-soft: rgba(170, 61, 55, 0.13);
+    --kernl-focus: rgba(35, 108, 92, 0.34);
+    --kernl-on-dark: #ffffff;
+    --kernl-radius-sm: 5px;
+    --kernl-radius-md: 8px;
+    --kernl-radius-lg: 8px;
+    --kernl-radius-pill: 999px;
+    --kernl-radius-button: 5px;
+    --kernl-radius-panel: 8px;
+    --kernl-radius-message: 8px;
+    --kernl-radius-quick-action: 999px;
+    --kernl-radius-composer-input: 5px;
+    --kernl-space-1: 4px;
+    --kernl-space-2: 8px;
+    --kernl-space-3: 12px;
+    --kernl-space-4: 16px;
+    --kernl-button-height: 34px;
+    --kernl-button-padding-x: 12px;
+    --kernl-icon-button-size: 30px;
+    --kernl-conversation-background: linear-gradient(rgba(39, 48, 52, 0.04) 1px, transparent 1px), var(--kernl-surface-raised);
+    --kernl-conversation-background-size: 100% 32px;
+    --kernl-conversation-background-position: top left;
+    --kernl-conversation-background-repeat: repeat;
+    --kernl-conversation-gap: 8px;
+    --kernl-conversation-padding: 12px;
+    --kernl-quick-actions-padding: 0 12px 12px;
+    --kernl-quick-action-bg: var(--kernl-surface);
+    --kernl-quick-action-hover-bg: #eef7f5;
+    --kernl-quick-action-hover-border: rgba(45, 111, 159, 0.28);
+    --kernl-quick-action-padding-x: 12px;
+    --kernl-message-bg: var(--kernl-surface);
+    --kernl-message-border: var(--kernl-border);
+    --kernl-message-gap: 5px;
+    --kernl-message-padding: 9px 10px;
+    --kernl-message-max-width: min(82%, 520px);
+    --kernl-message-user-bg: #e7f4ef;
+    --kernl-message-user-border: rgba(35, 108, 92, 0.24);
+    --kernl-message-system-bg: #f5f1e5;
+    --kernl-message-pending-bg: var(--kernl-surface);
+    --kernl-message-pending-border: rgba(35, 108, 92, 0.2);
+    --kernl-message-pending-shadow: 0 8px 20px rgba(40, 55, 49, 0.08);
+    --kernl-message-pending-padding: 12px 14px;
+    --kernl-composer-bg: var(--kernl-surface);
+    --kernl-composer-border: var(--kernl-border);
+    --kernl-composer-gap: 8px;
+    --kernl-composer-padding: 8px;
+    --kernl-composer-input-bg: var(--kernl-control);
+    --kernl-composer-input-padding: 9px 10px;
+    --kernl-submit-mode-bg: var(--kernl-accent);
+    --kernl-submit-mode-hover-bg: #1d5f50;
+    --kernl-submit-mode-border: rgba(255, 255, 255, 0.34);
+    --kernl-submit-menu-bg: var(--kernl-surface);
+    --kernl-submit-menu-shadow: 0 14px 34px rgba(40, 55, 49, 0.16);
+    --kernl-submit-menu-item-hover-bg: #eef7f5;
+    --kernl-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --kernl-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  }
+
+  [data-kernl-theme="compact"] {
+    --kernl-space-1: 3px;
+    --kernl-space-2: 6px;
+    --kernl-space-3: 10px;
+    --kernl-space-4: 14px;
+    --kernl-button-height: 30px;
+    --kernl-conversation-gap: 6px;
+    --kernl-conversation-padding: 10px;
+    --kernl-quick-actions-padding: 0 10px 10px;
+    --kernl-message-padding: 7px 9px;
+    --kernl-composer-padding: 6px;
+    --kernl-composer-input-padding: 7px 9px;
+  }
+
+  [data-kernl-theme="comfortable"] {
+    --kernl-space-1: 5px;
+    --kernl-space-2: 10px;
+    --kernl-space-3: 14px;
+    --kernl-space-4: 18px;
+    --kernl-button-height: 38px;
+    --kernl-conversation-gap: 10px;
+    --kernl-conversation-padding: 16px;
+    --kernl-quick-actions-padding: 0 16px 16px;
+    --kernl-message-padding: 11px 12px;
+    --kernl-composer-padding: 10px;
+    --kernl-composer-input-padding: 11px 12px;
+  }
+
+  [data-kernl-theme="soft"] {
+    --kernl-canvas: #f5f7f5;
+    --kernl-surface-raised: #f9fbfa;
+    --kernl-control: #eef3f1;
+    --kernl-control-hover: #e3ebe8;
+    --kernl-accent: #2f7568;
+    --kernl-accent-hover: #276357;
+    --kernl-accent-soft: #e9f5f1;
+    --kernl-message-user-bg: #e4f2ed;
+    --kernl-message-system-bg: #f3efe2;
+  }
+
+  [data-kernl-theme="highContrast"] {
+    --kernl-canvas: #f7f7f7;
+    --kernl-surface: #ffffff;
+    --kernl-surface-raised: #ffffff;
+    --kernl-control: #ececec;
+    --kernl-control-hover: #e0e0e0;
+    --kernl-ink: #0f1112;
+    --kernl-ink-soft: #2b3033;
+    --kernl-ink-secondary: #2b3033;
+    --kernl-ink-tertiary: #4f595e;
+    --kernl-ink-muted: #626d73;
+    --kernl-border: rgba(15, 17, 18, 0.32);
+    --kernl-border-soft: rgba(15, 17, 18, 0.18);
+    --kernl-border-strong: rgba(15, 17, 18, 0.48);
+    --kernl-accent: #064f43;
+    --kernl-accent-hover: #033f35;
+    --kernl-accent-soft: #dff2ed;
+    --kernl-active: #064f79;
+    --kernl-focus: rgba(6, 79, 67, 0.52);
+    --kernl-message-user-bg: #dff2ed;
+    --kernl-message-user-border: rgba(6, 79, 67, 0.42);
+    --kernl-message-system-bg: #f1ead4;
+  }
+
+  [data-kernl-conversation-background="plain"] {
+    --kernl-conversation-background: var(--kernl-surface-raised);
+    --kernl-conversation-background-size: auto;
+    --kernl-conversation-background-position: top left;
+    --kernl-conversation-background-repeat: repeat;
+  }
+
+  [data-kernl-conversation-background="grid"] {
+    --kernl-conversation-background: linear-gradient(rgba(39, 48, 52, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 48, 52, 0.05) 1px, transparent 1px), var(--kernl-surface-raised);
+    --kernl-conversation-background-size: 28px 28px;
+    --kernl-conversation-background-position: top left;
+    --kernl-conversation-background-repeat: repeat;
+  }
+
+  [data-kernl-conversation-background="softGradient"] {
+    --kernl-conversation-background: radial-gradient(circle at 18% 12%, rgba(35, 108, 92, 0.12), transparent 32%), linear-gradient(180deg, var(--kernl-surface-raised), var(--kernl-control));
+    --kernl-conversation-background-size: auto;
+    --kernl-conversation-background-position: top left;
+    --kernl-conversation-background-repeat: no-repeat;
+  }
+}

package/dist/theme.d.ts

@@ -0,0 +1,108 @@
+export type AgentThemePresetId = "default" | "compact" | "comfortable" | "soft" | "highContrast";
+export type AgentConversationBackgroundPreset = "ruled" | "plain" | "grid" | "softGradient";
+export type AgentThemeInput = AgentThemePresetId | AgentTheme | undefined;
+export type AgentThemeVariable = `--kernl-${string}`;
+export type AgentThemeVars = Partial<Record<AgentThemeVariable, string>>;
+export interface AgentTheme {
+    preset?: AgentThemePresetId | undefined;
+    colors?: Partial<AgentThemeColors> | undefined;
+    spacing?: Partial<AgentThemeSpacing> | undefined;
+    radius?: Partial<AgentThemeRadius> | undefined;
+    conversation?: AgentConversationTheme | undefined;
+    variables?: AgentThemeVars | undefined;
+}
+export interface AgentThemeColors {
+    canvas: string;
+    surface: string;
+    surfaceRaised: string;
+    control: string;
+    controlHover: string;
+    ink: string;
+    inkSoft: string;
+    inkSecondary: string;
+    inkTertiary: string;
+    inkMuted: string;
+    border: string;
+    borderSoft: string;
+    borderStrong: string;
+    accent: string;
+    accentInk: string;
+    accentHover: string;
+    accentSoft: string;
+    accentBorder: string;
+    active: string;
+    success: string;
+    successSoft: string;
+    warning: string;
+    warningSoft: string;
+    danger: string;
+    dangerSoft: string;
+    focus: string;
+    messageUser: string;
+    messageUserBorder: string;
+    messageSystem: string;
+    quickActionHover: string;
+    quickActionHoverBorder: string;
+    onDark: string;
+}
+export interface AgentThemeSpacing {
+    space1: string;
+    space2: string;
+    space3: string;
+    space4: string;
+    buttonHeight: string;
+    buttonPaddingX: string;
+    iconButtonSize: string;
+    conversationGap: string;
+    conversationPadding: string;
+    quickActionsPadding: string;
+    quickActionPaddingX: string;
+    messageGap: string;
+    messagePadding: string;
+    composerGap: string;
+    composerPadding: string;
+    composerInputPadding: string;
+}
+export interface AgentThemeRadius {
+    small: string;
+    medium: string;
+    large: string;
+    pill: string;
+    button: string;
+    panel: string;
+    message: string;
+    quickAction: string;
+    composerInput: string;
+}
+export interface AgentConversationTheme {
+    background?: AgentConversationBackgroundPreset | AgentConversationBackgroundOverride | undefined;
+    quickActionsBackground?: string | undefined;
+}
+export interface AgentConversationBackgroundOverride {
+    color?: string | undefined;
+    image?: string | undefined;
+    size?: string | undefined;
+    position?: string | undefined;
+    repeat?: string | undefined;
+}
+export interface AgentThemeAttributes {
+    "data-kernl-theme": AgentThemePresetId;
+    "data-kernl-conversation-background": AgentConversationBackgroundPreset | "custom";
+}
+export declare const agentThemePresets: Readonly<{
+    default: "default";
+    compact: "compact";
+    comfortable: "comfortable";
+    soft: "soft";
+    highContrast: "highContrast";
+}>;
+export declare const agentConversationBackgroundPresets: Readonly<{
+    ruled: "ruled";
+    plain: "plain";
+    grid: "grid";
+    softGradient: "softGradient";
+}>;
+export declare function createAgentThemeVars(input?: AgentThemeInput): AgentThemeVars;
+export declare function createAgentThemeAttributes(input?: AgentThemeInput): AgentThemeAttributes;
+export declare function isAgentThemeVariable(value: string): value is AgentThemeVariable;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/theme.js

@@ -0,0 +1,322 @@
+const DEFAULT_THEME_VARS = {
+    "--kernl-canvas": "#f6f8f7",
+    "--kernl-surface": "#ffffff",
+    "--kernl-surface-raised": "#fbfcfb",
+    "--kernl-control": "#f0f3f2",
+    "--kernl-control-hover": "#e9eeee",
+    "--kernl-ink": "#1f2528",
+    "--kernl-ink-soft": "#4b555a",
+    "--kernl-ink-secondary": "#4b555a",
+    "--kernl-ink-tertiary": "#758086",
+    "--kernl-ink-muted": "#9aa4a8",
+    "--kernl-border": "rgba(39, 48, 52, 0.13)",
+    "--kernl-border-soft": "rgba(39, 48, 52, 0.08)",
+    "--kernl-border-strong": "rgba(39, 48, 52, 0.22)",
+    "--kernl-accent": "#236c5c",
+    "--kernl-accent-ink": "#ffffff",
+    "--kernl-accent-hover": "#1d5f50",
+    "--kernl-accent-soft": "#eef7f5",
+    "--kernl-accent-border": "rgba(35, 108, 92, 0.24)",
+    "--kernl-active": "#2d6f9f",
+    "--kernl-success": "#24724f",
+    "--kernl-success-soft": "rgba(36, 114, 79, 0.13)",
+    "--kernl-warning": "#9a6a19",
+    "--kernl-warning-soft": "rgba(154, 106, 25, 0.14)",
+    "--kernl-danger": "#aa3d37",
+    "--kernl-danger-soft": "rgba(170, 61, 55, 0.13)",
+    "--kernl-focus": "rgba(35, 108, 92, 0.34)",
+    "--kernl-on-dark": "#ffffff",
+    "--kernl-radius-sm": "5px",
+    "--kernl-radius-md": "8px",
+    "--kernl-radius-lg": "8px",
+    "--kernl-radius-pill": "999px",
+    "--kernl-radius-button": "5px",
+    "--kernl-radius-panel": "8px",
+    "--kernl-radius-message": "8px",
+    "--kernl-radius-quick-action": "999px",
+    "--kernl-radius-composer-input": "5px",
+    "--kernl-space-1": "4px",
+    "--kernl-space-2": "8px",
+    "--kernl-space-3": "12px",
+    "--kernl-space-4": "16px",
+    "--kernl-button-height": "34px",
+    "--kernl-button-padding-x": "12px",
+    "--kernl-icon-button-size": "30px",
+    "--kernl-conversation-gap": "8px",
+    "--kernl-conversation-padding": "12px",
+    "--kernl-quick-actions-padding": "0 12px 12px",
+    "--kernl-quick-action-bg": "var(--kernl-surface)",
+    "--kernl-quick-action-hover-bg": "#eef7f5",
+    "--kernl-quick-action-hover-border": "rgba(45, 111, 159, 0.28)",
+    "--kernl-quick-action-padding-x": "12px",
+    "--kernl-message-bg": "var(--kernl-surface)",
+    "--kernl-message-border": "var(--kernl-border)",
+    "--kernl-message-gap": "5px",
+    "--kernl-message-padding": "9px 10px",
+    "--kernl-message-max-width": "min(82%, 520px)",
+    "--kernl-message-user-bg": "#e7f4ef",
+    "--kernl-message-user-border": "rgba(35, 108, 92, 0.24)",
+    "--kernl-message-system-bg": "#f5f1e5",
+    "--kernl-message-pending-bg": "var(--kernl-surface)",
+    "--kernl-message-pending-border": "rgba(35, 108, 92, 0.2)",
+    "--kernl-message-pending-shadow": "0 8px 20px rgba(40, 55, 49, 0.08)",
+    "--kernl-message-pending-padding": "12px 14px",
+    "--kernl-composer-bg": "var(--kernl-surface)",
+    "--kernl-composer-border": "var(--kernl-border)",
+    "--kernl-composer-gap": "8px",
+    "--kernl-composer-padding": "8px",
+    "--kernl-composer-input-bg": "var(--kernl-control)",
+    "--kernl-composer-input-padding": "9px 10px",
+    "--kernl-submit-mode-bg": "var(--kernl-accent)",
+    "--kernl-submit-mode-hover-bg": "#1d5f50",
+    "--kernl-submit-mode-border": "rgba(255, 255, 255, 0.34)",
+    "--kernl-submit-menu-bg": "var(--kernl-surface)",
+    "--kernl-submit-menu-shadow": "0 14px 34px rgba(40, 55, 49, 0.16)",
+    "--kernl-submit-menu-item-hover-bg": "#eef7f5",
+    "--kernl-font": 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--kernl-mono": '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace'
+};
+const CONVERSATION_BACKGROUND_PRESET_VARS = {
+    ruled: {
+        "--kernl-conversation-background": "linear-gradient(rgba(39, 48, 52, 0.04) 1px, transparent 1px), var(--kernl-surface-raised)",
+        "--kernl-conversation-background-size": "100% 32px",
+        "--kernl-conversation-background-position": "top left",
+        "--kernl-conversation-background-repeat": "repeat"
+    },
+    plain: {
+        "--kernl-conversation-background": "var(--kernl-surface-raised)",
+        "--kernl-conversation-background-size": "auto",
+        "--kernl-conversation-background-position": "top left",
+        "--kernl-conversation-background-repeat": "repeat"
+    },
+    grid: {
+        "--kernl-conversation-background": "linear-gradient(rgba(39, 48, 52, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 48, 52, 0.05) 1px, transparent 1px), var(--kernl-surface-raised)",
+        "--kernl-conversation-background-size": "28px 28px",
+        "--kernl-conversation-background-position": "top left",
+        "--kernl-conversation-background-repeat": "repeat"
+    },
+    softGradient: {
+        "--kernl-conversation-background": "radial-gradient(circle at 18% 12%, rgba(35, 108, 92, 0.12), transparent 32%), linear-gradient(180deg, var(--kernl-surface-raised), var(--kernl-control))",
+        "--kernl-conversation-background-size": "auto",
+        "--kernl-conversation-background-position": "top left",
+        "--kernl-conversation-background-repeat": "no-repeat"
+    }
+};
+const PRESET_VAR_OVERRIDES = {
+    default: {},
+    compact: {
+        "--kernl-space-1": "3px",
+        "--kernl-space-2": "6px",
+        "--kernl-space-3": "10px",
+        "--kernl-space-4": "14px",
+        "--kernl-button-height": "30px",
+        "--kernl-conversation-gap": "6px",
+        "--kernl-conversation-padding": "10px",
+        "--kernl-quick-actions-padding": "0 10px 10px",
+        "--kernl-message-padding": "7px 9px",
+        "--kernl-composer-padding": "6px",
+        "--kernl-composer-input-padding": "7px 9px"
+    },
+    comfortable: {
+        "--kernl-space-1": "5px",
+        "--kernl-space-2": "10px",
+        "--kernl-space-3": "14px",
+        "--kernl-space-4": "18px",
+        "--kernl-button-height": "38px",
+        "--kernl-conversation-gap": "10px",
+        "--kernl-conversation-padding": "16px",
+        "--kernl-quick-actions-padding": "0 16px 16px",
+        "--kernl-message-padding": "11px 12px",
+        "--kernl-composer-padding": "10px",
+        "--kernl-composer-input-padding": "11px 12px"
+    },
+    soft: {
+        "--kernl-canvas": "#f5f7f5",
+        "--kernl-surface-raised": "#f9fbfa",
+        "--kernl-control": "#eef3f1",
+        "--kernl-control-hover": "#e3ebe8",
+        "--kernl-accent": "#2f7568",
+        "--kernl-accent-hover": "#276357",
+        "--kernl-accent-soft": "#e9f5f1",
+        "--kernl-message-user-bg": "#e4f2ed",
+        "--kernl-message-system-bg": "#f3efe2"
+    },
+    highContrast: {
+        "--kernl-canvas": "#f7f7f7",
+        "--kernl-surface": "#ffffff",
+        "--kernl-surface-raised": "#ffffff",
+        "--kernl-control": "#ececec",
+        "--kernl-control-hover": "#e0e0e0",
+        "--kernl-ink": "#0f1112",
+        "--kernl-ink-soft": "#2b3033",
+        "--kernl-ink-secondary": "#2b3033",
+        "--kernl-ink-tertiary": "#4f595e",
+        "--kernl-ink-muted": "#626d73",
+        "--kernl-border": "rgba(15, 17, 18, 0.32)",
+        "--kernl-border-soft": "rgba(15, 17, 18, 0.18)",
+        "--kernl-border-strong": "rgba(15, 17, 18, 0.48)",
+        "--kernl-accent": "#064f43",
+        "--kernl-accent-hover": "#033f35",
+        "--kernl-accent-soft": "#dff2ed",
+        "--kernl-active": "#064f79",
+        "--kernl-focus": "rgba(6, 79, 67, 0.52)",
+        "--kernl-message-user-bg": "#dff2ed",
+        "--kernl-message-user-border": "rgba(6, 79, 67, 0.42)",
+        "--kernl-message-system-bg": "#f1ead4"
+    }
+};
+const COLOR_VAR_MAP = {
+    canvas: "--kernl-canvas",
+    surface: "--kernl-surface",
+    surfaceRaised: "--kernl-surface-raised",
+    control: "--kernl-control",
+    controlHover: "--kernl-control-hover",
+    ink: "--kernl-ink",
+    inkSoft: "--kernl-ink-soft",
+    inkSecondary: "--kernl-ink-secondary",
+    inkTertiary: "--kernl-ink-tertiary",
+    inkMuted: "--kernl-ink-muted",
+    border: "--kernl-border",
+    borderSoft: "--kernl-border-soft",
+    borderStrong: "--kernl-border-strong",
+    accent: "--kernl-accent",
+    accentInk: "--kernl-accent-ink",
+    accentHover: "--kernl-accent-hover",
+    accentSoft: "--kernl-accent-soft",
+    accentBorder: "--kernl-accent-border",
+    active: "--kernl-active",
+    success: "--kernl-success",
+    successSoft: "--kernl-success-soft",
+    warning: "--kernl-warning",
+    warningSoft: "--kernl-warning-soft",
+    danger: "--kernl-danger",
+    dangerSoft: "--kernl-danger-soft",
+    focus: "--kernl-focus",
+    messageUser: "--kernl-message-user-bg",
+    messageUserBorder: "--kernl-message-user-border",
+    messageSystem: "--kernl-message-system-bg",
+    quickActionHover: "--kernl-quick-action-hover-bg",
+    quickActionHoverBorder: "--kernl-quick-action-hover-border",
+    onDark: "--kernl-on-dark"
+};
+const SPACING_VAR_MAP = {
+    space1: "--kernl-space-1",
+    space2: "--kernl-space-2",
+    space3: "--kernl-space-3",
+    space4: "--kernl-space-4",
+    buttonHeight: "--kernl-button-height",
+    buttonPaddingX: "--kernl-button-padding-x",
+    iconButtonSize: "--kernl-icon-button-size",
+    conversationGap: "--kernl-conversation-gap",
+    conversationPadding: "--kernl-conversation-padding",
+    quickActionsPadding: "--kernl-quick-actions-padding",
+    quickActionPaddingX: "--kernl-quick-action-padding-x",
+    messageGap: "--kernl-message-gap",
+    messagePadding: "--kernl-message-padding",
+    composerGap: "--kernl-composer-gap",
+    composerPadding: "--kernl-composer-padding",
+    composerInputPadding: "--kernl-composer-input-padding"
+};
+const RADIUS_VAR_MAP = {
+    small: "--kernl-radius-sm",
+    medium: "--kernl-radius-md",
+    large: "--kernl-radius-lg",
+    pill: "--kernl-radius-pill",
+    button: "--kernl-radius-button",
+    panel: "--kernl-radius-panel",
+    message: "--kernl-radius-message",
+    quickAction: "--kernl-radius-quick-action",
+    composerInput: "--kernl-radius-composer-input"
+};
+export const agentThemePresets = Object.freeze({
+    default: "default",
+    compact: "compact",
+    comfortable: "comfortable",
+    soft: "soft",
+    highContrast: "highContrast"
+});
+export const agentConversationBackgroundPresets = Object.freeze({
+    ruled: "ruled",
+    plain: "plain",
+    grid: "grid",
+    softGradient: "softGradient"
+});
+export function createAgentThemeVars(input) {
+    const theme = normalizeTheme(input);
+    const preset = theme.preset ?? "default";
+    const vars = {
+        ...DEFAULT_THEME_VARS,
+        ...CONVERSATION_BACKGROUND_PRESET_VARS.ruled,
+        ...PRESET_VAR_OVERRIDES[preset]
+    };
+    applyMappedVars(vars, COLOR_VAR_MAP, theme.colors);
+    applyMappedVars(vars, SPACING_VAR_MAP, theme.spacing);
+    applyMappedVars(vars, RADIUS_VAR_MAP, theme.radius);
+    applyConversationVars(vars, theme.conversation);
+    if (theme.variables) {
+        for (const [name, value] of Object.entries(theme.variables)) {
+            if (isAgentThemeVariable(name) && value !== undefined) {
+                vars[name] = String(value);
+            }
+        }
+    }
+    return vars;
+}
+export function createAgentThemeAttributes(input) {
+    const theme = normalizeTheme(input);
+    return {
+        "data-kernl-theme": theme.preset ?? "default",
+        "data-kernl-conversation-background": getConversationBackgroundId(theme.conversation?.background)
+    };
+}
+export function isAgentThemeVariable(value) {
+    return value.startsWith("--kernl-");
+}
+function normalizeTheme(input) {
+    if (!input) {
+        return { preset: "default" };
+    }
+    if (typeof input === "string") {
+        return { preset: input };
+    }
+    return input;
+}
+function applyMappedVars(vars, map, values) {
+    if (!values) {
+        return;
+    }
+    for (const [key, name] of Object.entries(map)) {
+        const value = values[key];
+        if (value !== undefined) {
+            vars[name] = String(value);
+        }
+    }
+}
+function applyConversationVars(vars, conversation) {
+    const background = conversation?.background;
+    if (typeof background === "string") {
+        Object.assign(vars, CONVERSATION_BACKGROUND_PRESET_VARS[background]);
+    }
+    else if (background) {
+        const color = background.color ?? "var(--kernl-surface-raised)";
+        vars["--kernl-conversation-background"] = background.image ? `${background.image}, ${color}` : color;
+        if (background.size) {
+            vars["--kernl-conversation-background-size"] = background.size;
+        }
+        if (background.position) {
+            vars["--kernl-conversation-background-position"] = background.position;
+        }
+        if (background.repeat) {
+            vars["--kernl-conversation-background-repeat"] = background.repeat;
+        }
+    }
+    if (conversation?.quickActionsBackground) {
+        vars["--kernl-quick-actions-bg"] = conversation.quickActionsBackground;
+    }
+}
+function getConversationBackgroundId(background) {
+    if (!background) {
+        return "ruled";
+    }
+    return typeof background === "string" ? background : "custom";
+}