pika-shared 1.4.12 → 1.5.0

package/dist/util/wc-utils.d.mts

@@ -1,4 +1,5 @@
 import { PikaWCContext } from '../types/chatbot/webcomp-types.mjs';
+import { SemanticColorVariable } from '../types/chatbot/theme-types.mjs';
 import '../types/upload-types.mjs';
 import '../types/chatbot/chatbot-types.mjs';
 import '@aws-sdk/client-bedrock-agent-runtime';
@@ -18,5 +19,44 @@ import '@aws-sdk/client-bedrock-agentcore';
  * ```
  */
 declare function getPikaContext(el: HTMLElement): Promise<PikaWCContext>;
+/**
+ * Get a single CSS variable value from the document.
+ * Useful for web components that need to read theme values.
+ *
+ * @param name - Variable name without the -- prefix (e.g., 'primary', 'background')
+ * @returns The computed value of the CSS variable, or empty string if not found
+ *
+ * @example
+ * ```ts
+ * const primaryColor = getThemeVariable('primary');
+ * console.log(primaryColor); // 'oklch(0.514 0.146 255.748)'
+ *
+ * // Use in dynamic styles - value already includes oklch()
+ * element.style.backgroundColor = getThemeVariable('primary');
+ * ```
+ *
+ * @since 0.16.0
+ */
+declare function getThemeVariable(name: string): string;
+/**
+ * Get all Pika semantic theme tokens as an object.
+ * Useful for web components that need access to multiple theme values.
+ *
+ * Returns only the semantic color variables (primary, secondary, success, etc.),
+ * not the full palette variables (gold-500, blueish-300, etc.).
+ *
+ * @returns Object mapping variable names to their computed values
+ *
+ * @example
+ * ```ts
+ * const tokens = getPikaThemeTokens();
+ * console.log(tokens.primary);           // 'oklch(0.514 0.146 255.748)'
+ * console.log(tokens.success);           // 'oklch(0.55 0.16 142)'
+ * console.log(tokens['muted-foreground']); // 'oklch(0.551 0.027 264.364)'
+ * ```
+ *
+ * @since 0.16.0
+ */
+declare function getPikaThemeTokens(): Partial<Record<SemanticColorVariable, string>>;
 
-export { getPikaContext };
+export { getPikaContext, getPikaThemeTokens, getThemeVariable };

package/dist/util/wc-utils.d.ts

@@ -1,4 +1,5 @@
 import { PikaWCContext } from '../types/chatbot/webcomp-types.js';
+import { SemanticColorVariable } from '../types/chatbot/theme-types.js';
 import '../types/upload-types.js';
 import '../types/chatbot/chatbot-types.js';
 import '@aws-sdk/client-bedrock-agent-runtime';
@@ -18,5 +19,44 @@ import '@aws-sdk/client-bedrock-agentcore';
  * ```
  */
 declare function getPikaContext(el: HTMLElement): Promise<PikaWCContext>;
+/**
+ * Get a single CSS variable value from the document.
+ * Useful for web components that need to read theme values.
+ *
+ * @param name - Variable name without the -- prefix (e.g., 'primary', 'background')
+ * @returns The computed value of the CSS variable, or empty string if not found
+ *
+ * @example
+ * ```ts
+ * const primaryColor = getThemeVariable('primary');
+ * console.log(primaryColor); // 'oklch(0.514 0.146 255.748)'
+ *
+ * // Use in dynamic styles - value already includes oklch()
+ * element.style.backgroundColor = getThemeVariable('primary');
+ * ```
+ *
+ * @since 0.16.0
+ */
+declare function getThemeVariable(name: string): string;
+/**
+ * Get all Pika semantic theme tokens as an object.
+ * Useful for web components that need access to multiple theme values.
+ *
+ * Returns only the semantic color variables (primary, secondary, success, etc.),
+ * not the full palette variables (gold-500, blueish-300, etc.).
+ *
+ * @returns Object mapping variable names to their computed values
+ *
+ * @example
+ * ```ts
+ * const tokens = getPikaThemeTokens();
+ * console.log(tokens.primary);           // 'oklch(0.514 0.146 255.748)'
+ * console.log(tokens.success);           // 'oklch(0.55 0.16 142)'
+ * console.log(tokens['muted-foreground']); // 'oklch(0.551 0.027 264.364)'
+ * ```
+ *
+ * @since 0.16.0
+ */
+declare function getPikaThemeTokens(): Partial<Record<SemanticColorVariable, string>>;
 
-export { getPikaContext };
+export { getPikaContext, getPikaThemeTokens, getThemeVariable };

package/dist/util/wc-utils.js

@@ -1,5 +1,62 @@
 'use strict';
 
+// src/types/chatbot/theme-types.ts
+var SEMANTIC_COLOR_VARIABLES = [
+  // Core
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  // Charts
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  // Sidebar
+  "sidebar-background",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  // Extended
+  "success",
+  "success-foreground",
+  "success-bg",
+  "warning",
+  "warning-foreground",
+  "warning-bg",
+  "info",
+  "info-foreground",
+  "info-bg",
+  "ai",
+  "ai-foreground",
+  "ai-bg",
+  "danger-bg",
+  // Header/branding
+  "chat-app-icon",
+  "chat-app-header-icon-height",
+  "chat-app-header-icon-gap"
+];
+
 // src/util/wc-utils.ts
 function getPikaContext(el) {
   return new Promise((resolve, reject) => {
@@ -20,7 +77,25 @@ function getPikaContext(el) {
     );
   });
 }
+function getThemeVariable(name) {
+  if (typeof document === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+}
+function getPikaThemeTokens() {
+  if (typeof document === "undefined") return {};
+  const style = getComputedStyle(document.documentElement);
+  const tokens = {};
+  for (const name of SEMANTIC_COLOR_VARIABLES) {
+    const value = style.getPropertyValue(`--${name}`).trim();
+    if (value) {
+      tokens[name] = value;
+    }
+  }
+  return tokens;
+}
 
 exports.getPikaContext = getPikaContext;
+exports.getPikaThemeTokens = getPikaThemeTokens;
+exports.getThemeVariable = getThemeVariable;
 //# sourceMappingURL=wc-utils.js.map
 //# sourceMappingURL=wc-utils.js.map

package/dist/util/wc-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/util/wc-utils.ts"],"names":[],"mappings":";;;AAeO,SAAS,eAAe,EAAA,EAAyC;AACpE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACpC,IAAA,MAAM,OAAA,GAAU,WAAW,MAAM;AAC7B,MAAA,MAAA,CAAO,IAAI,KAAA,CAAM,+EAA+E,CAAC,CAAA;AAAA,IACrG,GAAG,GAAI,CAAA;AAEP,IAAA,EAAA,CAAG,aAAA;AAAA,MACC,IAAI,YAAwC,yBAAA,EAA2B;AAAA,QACnE,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,MAAA,EAAQ;AAAA,UACJ,QAAA,EAAU,CAAC,GAAA,KAAuB;AAC9B,YAAA,YAAA,CAAa,OAAO,CAAA;AACpB,YAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,UACf;AAAA;AACJ,OACH;AAAA,KACL;AAAA,EACJ,CAAC,CAAA;AACL","file":"wc-utils.js","sourcesContent":["import { PikaWCContext, PikaWCContextRequestDetail } from '../types/chatbot/webcomp-types';\n\n/**\n * Web component authors can use this function to get the Pika context when their web component is rendered.\n *\n * The type of the context object is defined in the PikaWCContext interface.\n *\n * @see PikaWCContext\n *\n * @example\n * ```ts\n * const ctx: PikaWCContext = await getPikaContext(el);\n * console.log(ctx.appState.identity.user.fullName);\n * ```\n */\nexport function getPikaContext(el: HTMLElement): Promise<PikaWCContext> {\n    return new Promise((resolve, reject) => {\n        const timeout = setTimeout(() => {\n            reject(new Error('Pika context not provided - component must be rendered within a Pika chat app'));\n        }, 1000);\n\n        el.dispatchEvent(\n            new CustomEvent<PikaWCContextRequestDetail>('pika-wc-context-request', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (ctx: PikaWCContext) => {\n                        clearTimeout(timeout);\n                        resolve(ctx);\n                    }\n                }\n            })\n        );\n    });\n}\n"]}
+{"version":3,"sources":["../../src/types/chatbot/theme-types.ts","../../src/util/wc-utils.ts"],"names":[],"mappings":";;;AA+NO,IAAM,wBAAA,GAA6D;AAAA;AAAA,EAEtE,YAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAA;AAAA,EACA,sBAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA;AAAA,EAEA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA;AAAA,EAEA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,4BAAA;AAAA,EACA,gBAAA;AAAA,EACA,2BAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA;AAAA,EAEA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA;AAAA,EAEA,eAAA;AAAA,EACA,6BAAA;AAAA,EACA;AACJ,CAAA;;;ACrQO,SAAS,eAAe,EAAA,EAAyC;AACpE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACpC,IAAA,MAAM,OAAA,GAAU,WAAW,MAAM;AAC7B,MAAA,MAAA,CAAO,IAAI,KAAA,CAAM,+EAA+E,CAAC,CAAA;AAAA,IACrG,GAAG,GAAI,CAAA;AAEP,IAAA,EAAA,CAAG,aAAA;AAAA,MACC,IAAI,YAAwC,yBAAA,EAA2B;AAAA,QACnE,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,MAAA,EAAQ;AAAA,UACJ,QAAA,EAAU,CAAC,GAAA,KAAuB;AAC9B,YAAA,YAAA,CAAa,OAAO,CAAA;AACpB,YAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,UACf;AAAA;AACJ,OACH;AAAA,KACL;AAAA,EACJ,CAAC,CAAA;AACL;AAoBO,SAAS,iBAAiB,IAAA,EAAsB;AACnD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,EAAA;AAC5C,EAAA,OAAO,gBAAA,CAAiB,SAAS,eAAe,CAAA,CAAE,iBAAiB,CAAA,EAAA,EAAK,IAAI,CAAA,CAAE,CAAA,CAAE,IAAA,EAAK;AACzF;AAqBO,SAAS,kBAAA,GAAqE;AACjF,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,EAAC;AAE7C,EAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,QAAA,CAAS,eAAe,CAAA;AACvD,EAAA,MAAM,SAAyD,EAAC;AAEhE,EAAA,KAAA,MAAW,QAAQ,wBAAA,EAA0B;AACzC,IAAA,MAAM,QAAQ,KAAA,CAAM,gBAAA,CAAiB,KAAK,IAAI,CAAA,CAAE,EAAE,IAAA,EAAK;AACvD,IAAA,IAAI,KAAA,EAAO;AACP,MAAA,MAAA,CAAO,IAAI,CAAA,GAAI,KAAA;AAAA,IACnB;AAAA,EACJ;AAEA,EAAA,OAAO,MAAA;AACX","file":"wc-utils.js","sourcesContent":["/**\n * Theme Types for Pika UI Customization\n *\n * These types define the structure of theme configuration for clone projects.\n * Import via: import type { ThemeConfig } from 'pika-shared/types/chatbot/theme-types';\n *\n * @since 0.16.0\n */\n\n/**\n * Theme configuration for Pika Chat\n *\n * Clone projects copy sample-purple-theme.ts, customize it, and update themeConfigPath\n * in pika-config.ts to point to their theme file.\n *\n * @example\n * ```typescript\n * import type { ThemeConfig } from 'pika-shared/types/chatbot/theme-types';\n *\n * export const themeConfig: ThemeConfig = {\n *     name: 'Acme Corp Theme',\n *     fontFamily: '\"Inter\", sans-serif',\n *     cssVariables: {\n *         light: {\n *             'primary': 'oklch(0.47 0.2 290)',\n *             'primary-foreground': 'oklch(1 0 0)',\n *         },\n *         dark: {\n *             'primary': 'oklch(0.70 0.18 290)',\n *         }\n *     }\n * };\n * ```\n *\n * @since 0.16.0\n */\nexport interface ThemeConfig {\n    /**\n     * Schema version of this theme configuration.\n     * Used by `pika theme check` to notify you of new theme variables.\n     * See theme-schema.ts for the changelog of schema versions.\n     *\n     * @default 1 (if not specified)\n     * @example schemaVersion: 1\n     */\n    schemaVersion?: number;\n\n    /**\n     * Display name for this theme (for documentation/debugging)\n     * @example 'Acme Corp Brand Theme'\n     */\n    name?: string;\n\n    /**\n     * Font family override. Applied to --font-sans CSS variable.\n     * @example '\"Figtree\", Arial, Helvetica, sans-serif'\n     */\n    fontFamily?: string;\n\n    /**\n     * CSS custom properties to override.\n     * Keys are CSS variable names WITHOUT the -- prefix.\n     * Values should be valid CSS color values (oklch preferred for modern color handling).\n     *\n     * @example\n     * ```typescript\n     * cssVariables: {\n     *     light: {\n     *         'primary': 'oklch(0.47 0.2 290)',\n     *         'border': 'oklch(0.88 0.01 260)',\n     *     },\n     *     dark: {\n     *         'primary': 'oklch(0.70 0.18 290)',\n     *     }\n     * }\n     * ```\n     */\n    cssVariables?: {\n        /** Light mode variable overrides */\n        light?: Record<string, string>;\n        /** Dark mode variable overrides */\n        dark?: Record<string, string>;\n    };\n\n    /**\n     * Custom color palettes for your brand.\n     * Creates CSS variables like --{paletteName}-{shade}\n     *\n     * @example\n     * ```typescript\n     * customPalettes: {\n     *     brand: {\n     *         '50': 'oklch(0.97 0.01 290)',\n     *         '500': 'oklch(0.47 0.2 290)',\n     *         '900': 'oklch(0.20 0.08 290)',\n     *     }\n     * }\n     * ```\n     */\n    customPalettes?: Record<string, Record<string, string>>;\n\n    /**\n     * Custom header icon for chat apps. Replaces the default AI sparkle icon.\n     * The icon will be constrained to roughly 44x44px.\n     *\n     * Can be specified as:\n     * - A single string URL (used for both light and dark modes)\n     * - An object with separate light/dark URLs for mode-specific icons\n     *\n     * For sync-safe storage, place your icons in:\n     * `apps/pika-chat/static/custom/assets/`\n     *\n     * @example Single icon for both modes:\n     * ```typescript\n     * chatAppHeaderIcon: '/custom/assets/my-logo.svg'\n     * ```\n     *\n     * @example Separate icons for light/dark modes:\n     * ```typescript\n     * chatAppHeaderIcon: {\n     *     light: '/custom/assets/logo-dark.svg',   // Dark logo on light background\n     *     dark: '/custom/assets/logo-light.svg'    // Light logo on dark background\n     * }\n     * ```\n     *\n     * @since 0.16.4\n     */\n    chatAppHeaderIcon?: string | {\n        /** Icon URL for light mode */\n        light: string;\n        /** Icon URL for dark mode (falls back to light if not provided) */\n        dark?: string;\n    };\n}\n\n/**\n * Configuration for the custom theme feature in pika-config.ts\n *\n * @since 0.16.0\n */\nexport interface CustomThemeConfig {\n    /**\n     * Whether custom theming is enabled.\n     * If false, the default Pika theme is used and the theme config is not loaded.\n     */\n    enabled: boolean;\n\n    /**\n     * Path to theme config file relative to apps/pika-chat/\n     * The file must export a `themeConfig` object of type ThemeConfig.\n     *\n     * @default 'src/lib/custom/sample-purple-theme'\n     * @example 'src/lib/custom/my-theme' imports from 'apps/pika-chat/src/lib/custom/my-theme.ts'\n     */\n    themeConfigPath?: string;\n}\n\n/**\n * Standard semantic variable names that can be overridden in a theme.\n * These are the shadcn-svelte standard variables plus Pika extensions.\n *\n * @since 0.16.0\n */\nexport type SemanticColorVariable =\n    // Core shadcn variables\n    | 'background'\n    | 'foreground'\n    | 'card'\n    | 'card-foreground'\n    | 'popover'\n    | 'popover-foreground'\n    | 'primary'\n    | 'primary-foreground'\n    | 'secondary'\n    | 'secondary-foreground'\n    | 'muted'\n    | 'muted-foreground'\n    | 'accent'\n    | 'accent-foreground'\n    | 'destructive'\n    | 'destructive-foreground'\n    | 'border'\n    | 'input'\n    | 'ring'\n    // Chart colors\n    | 'chart-1'\n    | 'chart-2'\n    | 'chart-3'\n    | 'chart-4'\n    | 'chart-5'\n    // Sidebar variants\n    | 'sidebar-background'\n    | 'sidebar-foreground'\n    | 'sidebar-primary'\n    | 'sidebar-primary-foreground'\n    | 'sidebar-accent'\n    | 'sidebar-accent-foreground'\n    | 'sidebar-border'\n    | 'sidebar-ring'\n    // Pika extended semantic colors\n    | 'success'\n    | 'success-foreground'\n    | 'success-bg'\n    | 'warning'\n    | 'warning-foreground'\n    | 'warning-bg'\n    | 'info'\n    | 'info-foreground'\n    | 'info-bg'\n    | 'ai'\n    | 'ai-foreground'\n    | 'ai-bg'\n    | 'danger-bg'\n    // Header/branding\n    | 'chat-app-icon'\n    | 'chat-app-header-icon-height'\n    | 'chat-app-header-icon-gap';\n\n/**\n * All semantic variables as a readonly array for iteration\n *\n * @since 0.16.0\n */\nexport const SEMANTIC_COLOR_VARIABLES: readonly SemanticColorVariable[] = [\n    // Core\n    'background',\n    'foreground',\n    'card',\n    'card-foreground',\n    'popover',\n    'popover-foreground',\n    'primary',\n    'primary-foreground',\n    'secondary',\n    'secondary-foreground',\n    'muted',\n    'muted-foreground',\n    'accent',\n    'accent-foreground',\n    'destructive',\n    'destructive-foreground',\n    'border',\n    'input',\n    'ring',\n    // Charts\n    'chart-1',\n    'chart-2',\n    'chart-3',\n    'chart-4',\n    'chart-5',\n    // Sidebar\n    'sidebar-background',\n    'sidebar-foreground',\n    'sidebar-primary',\n    'sidebar-primary-foreground',\n    'sidebar-accent',\n    'sidebar-accent-foreground',\n    'sidebar-border',\n    'sidebar-ring',\n    // Extended\n    'success',\n    'success-foreground',\n    'success-bg',\n    'warning',\n    'warning-foreground',\n    'warning-bg',\n    'info',\n    'info-foreground',\n    'info-bg',\n    'ai',\n    'ai-foreground',\n    'ai-bg',\n    'danger-bg',\n    // Header/branding\n    'chat-app-icon',\n    'chat-app-header-icon-height',\n    'chat-app-header-icon-gap'\n] as const;\n","import { PikaWCContext, PikaWCContextRequestDetail } from '../types/chatbot/webcomp-types';\nimport { SEMANTIC_COLOR_VARIABLES, type SemanticColorVariable } from '../types/chatbot/theme-types';\n\n/**\n * Web component authors can use this function to get the Pika context when their web component is rendered.\n *\n * The type of the context object is defined in the PikaWCContext interface.\n *\n * @see PikaWCContext\n *\n * @example\n * ```ts\n * const ctx: PikaWCContext = await getPikaContext(el);\n * console.log(ctx.appState.identity.user.fullName);\n * ```\n */\nexport function getPikaContext(el: HTMLElement): Promise<PikaWCContext> {\n    return new Promise((resolve, reject) => {\n        const timeout = setTimeout(() => {\n            reject(new Error('Pika context not provided - component must be rendered within a Pika chat app'));\n        }, 1000);\n\n        el.dispatchEvent(\n            new CustomEvent<PikaWCContextRequestDetail>('pika-wc-context-request', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (ctx: PikaWCContext) => {\n                        clearTimeout(timeout);\n                        resolve(ctx);\n                    }\n                }\n            })\n        );\n    });\n}\n\n/**\n * Get a single CSS variable value from the document.\n * Useful for web components that need to read theme values.\n *\n * @param name - Variable name without the -- prefix (e.g., 'primary', 'background')\n * @returns The computed value of the CSS variable, or empty string if not found\n *\n * @example\n * ```ts\n * const primaryColor = getThemeVariable('primary');\n * console.log(primaryColor); // 'oklch(0.514 0.146 255.748)'\n *\n * // Use in dynamic styles - value already includes oklch()\n * element.style.backgroundColor = getThemeVariable('primary');\n * ```\n *\n * @since 0.16.0\n */\nexport function getThemeVariable(name: string): string {\n    if (typeof document === 'undefined') return '';\n    return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();\n}\n\n/**\n * Get all Pika semantic theme tokens as an object.\n * Useful for web components that need access to multiple theme values.\n *\n * Returns only the semantic color variables (primary, secondary, success, etc.),\n * not the full palette variables (gold-500, blueish-300, etc.).\n *\n * @returns Object mapping variable names to their computed values\n *\n * @example\n * ```ts\n * const tokens = getPikaThemeTokens();\n * console.log(tokens.primary);           // 'oklch(0.514 0.146 255.748)'\n * console.log(tokens.success);           // 'oklch(0.55 0.16 142)'\n * console.log(tokens['muted-foreground']); // 'oklch(0.551 0.027 264.364)'\n * ```\n *\n * @since 0.16.0\n */\nexport function getPikaThemeTokens(): Partial<Record<SemanticColorVariable, string>> {\n    if (typeof document === 'undefined') return {};\n\n    const style = getComputedStyle(document.documentElement);\n    const tokens: Partial<Record<SemanticColorVariable, string>> = {};\n\n    for (const name of SEMANTIC_COLOR_VARIABLES) {\n        const value = style.getPropertyValue(`--${name}`).trim();\n        if (value) {\n            tokens[name] = value;\n        }\n    }\n\n    return tokens;\n}\n"]}

package/dist/util/wc-utils.mjs

@@ -1,3 +1,60 @@
+// src/types/chatbot/theme-types.ts
+var SEMANTIC_COLOR_VARIABLES = [
+  // Core
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  // Charts
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  // Sidebar
+  "sidebar-background",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  // Extended
+  "success",
+  "success-foreground",
+  "success-bg",
+  "warning",
+  "warning-foreground",
+  "warning-bg",
+  "info",
+  "info-foreground",
+  "info-bg",
+  "ai",
+  "ai-foreground",
+  "ai-bg",
+  "danger-bg",
+  // Header/branding
+  "chat-app-icon",
+  "chat-app-header-icon-height",
+  "chat-app-header-icon-gap"
+];
+
 // src/util/wc-utils.ts
 function getPikaContext(el) {
   return new Promise((resolve, reject) => {
@@ -18,7 +75,23 @@ function getPikaContext(el) {
     );
   });
 }
+function getThemeVariable(name) {
+  if (typeof document === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+}
+function getPikaThemeTokens() {
+  if (typeof document === "undefined") return {};
+  const style = getComputedStyle(document.documentElement);
+  const tokens = {};
+  for (const name of SEMANTIC_COLOR_VARIABLES) {
+    const value = style.getPropertyValue(`--${name}`).trim();
+    if (value) {
+      tokens[name] = value;
+    }
+  }
+  return tokens;
+}
 
-export { getPikaContext };
+export { getPikaContext, getPikaThemeTokens, getThemeVariable };
 //# sourceMappingURL=wc-utils.mjs.map
 //# sourceMappingURL=wc-utils.mjs.map

package/dist/util/wc-utils.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/util/wc-utils.ts"],"names":[],"mappings":";AAeO,SAAS,eAAe,EAAA,EAAyC;AACpE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACpC,IAAA,MAAM,OAAA,GAAU,WAAW,MAAM;AAC7B,MAAA,MAAA,CAAO,IAAI,KAAA,CAAM,+EAA+E,CAAC,CAAA;AAAA,IACrG,GAAG,GAAI,CAAA;AAEP,IAAA,EAAA,CAAG,aAAA;AAAA,MACC,IAAI,YAAwC,yBAAA,EAA2B;AAAA,QACnE,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,MAAA,EAAQ;AAAA,UACJ,QAAA,EAAU,CAAC,GAAA,KAAuB;AAC9B,YAAA,YAAA,CAAa,OAAO,CAAA;AACpB,YAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,UACf;AAAA;AACJ,OACH;AAAA,KACL;AAAA,EACJ,CAAC,CAAA;AACL","file":"wc-utils.mjs","sourcesContent":["import { PikaWCContext, PikaWCContextRequestDetail } from '../types/chatbot/webcomp-types';\n\n/**\n * Web component authors can use this function to get the Pika context when their web component is rendered.\n *\n * The type of the context object is defined in the PikaWCContext interface.\n *\n * @see PikaWCContext\n *\n * @example\n * ```ts\n * const ctx: PikaWCContext = await getPikaContext(el);\n * console.log(ctx.appState.identity.user.fullName);\n * ```\n */\nexport function getPikaContext(el: HTMLElement): Promise<PikaWCContext> {\n    return new Promise((resolve, reject) => {\n        const timeout = setTimeout(() => {\n            reject(new Error('Pika context not provided - component must be rendered within a Pika chat app'));\n        }, 1000);\n\n        el.dispatchEvent(\n            new CustomEvent<PikaWCContextRequestDetail>('pika-wc-context-request', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (ctx: PikaWCContext) => {\n                        clearTimeout(timeout);\n                        resolve(ctx);\n                    }\n                }\n            })\n        );\n    });\n}\n"]}
+{"version":3,"sources":["../../src/types/chatbot/theme-types.ts","../../src/util/wc-utils.ts"],"names":[],"mappings":";AA+NO,IAAM,wBAAA,GAA6D;AAAA;AAAA,EAEtE,YAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,WAAA;AAAA,EACA,sBAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,wBAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA;AAAA,EAEA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA;AAAA,EAEA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,4BAAA;AAAA,EACA,gBAAA;AAAA,EACA,2BAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA;AAAA,EAEA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA;AAAA,EAEA,eAAA;AAAA,EACA,6BAAA;AAAA,EACA;AACJ,CAAA;;;ACrQO,SAAS,eAAe,EAAA,EAAyC;AACpE,EAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAA,KAAW;AACpC,IAAA,MAAM,OAAA,GAAU,WAAW,MAAM;AAC7B,MAAA,MAAA,CAAO,IAAI,KAAA,CAAM,+EAA+E,CAAC,CAAA;AAAA,IACrG,GAAG,GAAI,CAAA;AAEP,IAAA,EAAA,CAAG,aAAA;AAAA,MACC,IAAI,YAAwC,yBAAA,EAA2B;AAAA,QACnE,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,MAAA,EAAQ;AAAA,UACJ,QAAA,EAAU,CAAC,GAAA,KAAuB;AAC9B,YAAA,YAAA,CAAa,OAAO,CAAA;AACpB,YAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,UACf;AAAA;AACJ,OACH;AAAA,KACL;AAAA,EACJ,CAAC,CAAA;AACL;AAoBO,SAAS,iBAAiB,IAAA,EAAsB;AACnD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,EAAA;AAC5C,EAAA,OAAO,gBAAA,CAAiB,SAAS,eAAe,CAAA,CAAE,iBAAiB,CAAA,EAAA,EAAK,IAAI,CAAA,CAAE,CAAA,CAAE,IAAA,EAAK;AACzF;AAqBO,SAAS,kBAAA,GAAqE;AACjF,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,EAAC;AAE7C,EAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,QAAA,CAAS,eAAe,CAAA;AACvD,EAAA,MAAM,SAAyD,EAAC;AAEhE,EAAA,KAAA,MAAW,QAAQ,wBAAA,EAA0B;AACzC,IAAA,MAAM,QAAQ,KAAA,CAAM,gBAAA,CAAiB,KAAK,IAAI,CAAA,CAAE,EAAE,IAAA,EAAK;AACvD,IAAA,IAAI,KAAA,EAAO;AACP,MAAA,MAAA,CAAO,IAAI,CAAA,GAAI,KAAA;AAAA,IACnB;AAAA,EACJ;AAEA,EAAA,OAAO,MAAA;AACX","file":"wc-utils.mjs","sourcesContent":["/**\n * Theme Types for Pika UI Customization\n *\n * These types define the structure of theme configuration for clone projects.\n * Import via: import type { ThemeConfig } from 'pika-shared/types/chatbot/theme-types';\n *\n * @since 0.16.0\n */\n\n/**\n * Theme configuration for Pika Chat\n *\n * Clone projects copy sample-purple-theme.ts, customize it, and update themeConfigPath\n * in pika-config.ts to point to their theme file.\n *\n * @example\n * ```typescript\n * import type { ThemeConfig } from 'pika-shared/types/chatbot/theme-types';\n *\n * export const themeConfig: ThemeConfig = {\n *     name: 'Acme Corp Theme',\n *     fontFamily: '\"Inter\", sans-serif',\n *     cssVariables: {\n *         light: {\n *             'primary': 'oklch(0.47 0.2 290)',\n *             'primary-foreground': 'oklch(1 0 0)',\n *         },\n *         dark: {\n *             'primary': 'oklch(0.70 0.18 290)',\n *         }\n *     }\n * };\n * ```\n *\n * @since 0.16.0\n */\nexport interface ThemeConfig {\n    /**\n     * Schema version of this theme configuration.\n     * Used by `pika theme check` to notify you of new theme variables.\n     * See theme-schema.ts for the changelog of schema versions.\n     *\n     * @default 1 (if not specified)\n     * @example schemaVersion: 1\n     */\n    schemaVersion?: number;\n\n    /**\n     * Display name for this theme (for documentation/debugging)\n     * @example 'Acme Corp Brand Theme'\n     */\n    name?: string;\n\n    /**\n     * Font family override. Applied to --font-sans CSS variable.\n     * @example '\"Figtree\", Arial, Helvetica, sans-serif'\n     */\n    fontFamily?: string;\n\n    /**\n     * CSS custom properties to override.\n     * Keys are CSS variable names WITHOUT the -- prefix.\n     * Values should be valid CSS color values (oklch preferred for modern color handling).\n     *\n     * @example\n     * ```typescript\n     * cssVariables: {\n     *     light: {\n     *         'primary': 'oklch(0.47 0.2 290)',\n     *         'border': 'oklch(0.88 0.01 260)',\n     *     },\n     *     dark: {\n     *         'primary': 'oklch(0.70 0.18 290)',\n     *     }\n     * }\n     * ```\n     */\n    cssVariables?: {\n        /** Light mode variable overrides */\n        light?: Record<string, string>;\n        /** Dark mode variable overrides */\n        dark?: Record<string, string>;\n    };\n\n    /**\n     * Custom color palettes for your brand.\n     * Creates CSS variables like --{paletteName}-{shade}\n     *\n     * @example\n     * ```typescript\n     * customPalettes: {\n     *     brand: {\n     *         '50': 'oklch(0.97 0.01 290)',\n     *         '500': 'oklch(0.47 0.2 290)',\n     *         '900': 'oklch(0.20 0.08 290)',\n     *     }\n     * }\n     * ```\n     */\n    customPalettes?: Record<string, Record<string, string>>;\n\n    /**\n     * Custom header icon for chat apps. Replaces the default AI sparkle icon.\n     * The icon will be constrained to roughly 44x44px.\n     *\n     * Can be specified as:\n     * - A single string URL (used for both light and dark modes)\n     * - An object with separate light/dark URLs for mode-specific icons\n     *\n     * For sync-safe storage, place your icons in:\n     * `apps/pika-chat/static/custom/assets/`\n     *\n     * @example Single icon for both modes:\n     * ```typescript\n     * chatAppHeaderIcon: '/custom/assets/my-logo.svg'\n     * ```\n     *\n     * @example Separate icons for light/dark modes:\n     * ```typescript\n     * chatAppHeaderIcon: {\n     *     light: '/custom/assets/logo-dark.svg',   // Dark logo on light background\n     *     dark: '/custom/assets/logo-light.svg'    // Light logo on dark background\n     * }\n     * ```\n     *\n     * @since 0.16.4\n     */\n    chatAppHeaderIcon?: string | {\n        /** Icon URL for light mode */\n        light: string;\n        /** Icon URL for dark mode (falls back to light if not provided) */\n        dark?: string;\n    };\n}\n\n/**\n * Configuration for the custom theme feature in pika-config.ts\n *\n * @since 0.16.0\n */\nexport interface CustomThemeConfig {\n    /**\n     * Whether custom theming is enabled.\n     * If false, the default Pika theme is used and the theme config is not loaded.\n     */\n    enabled: boolean;\n\n    /**\n     * Path to theme config file relative to apps/pika-chat/\n     * The file must export a `themeConfig` object of type ThemeConfig.\n     *\n     * @default 'src/lib/custom/sample-purple-theme'\n     * @example 'src/lib/custom/my-theme' imports from 'apps/pika-chat/src/lib/custom/my-theme.ts'\n     */\n    themeConfigPath?: string;\n}\n\n/**\n * Standard semantic variable names that can be overridden in a theme.\n * These are the shadcn-svelte standard variables plus Pika extensions.\n *\n * @since 0.16.0\n */\nexport type SemanticColorVariable =\n    // Core shadcn variables\n    | 'background'\n    | 'foreground'\n    | 'card'\n    | 'card-foreground'\n    | 'popover'\n    | 'popover-foreground'\n    | 'primary'\n    | 'primary-foreground'\n    | 'secondary'\n    | 'secondary-foreground'\n    | 'muted'\n    | 'muted-foreground'\n    | 'accent'\n    | 'accent-foreground'\n    | 'destructive'\n    | 'destructive-foreground'\n    | 'border'\n    | 'input'\n    | 'ring'\n    // Chart colors\n    | 'chart-1'\n    | 'chart-2'\n    | 'chart-3'\n    | 'chart-4'\n    | 'chart-5'\n    // Sidebar variants\n    | 'sidebar-background'\n    | 'sidebar-foreground'\n    | 'sidebar-primary'\n    | 'sidebar-primary-foreground'\n    | 'sidebar-accent'\n    | 'sidebar-accent-foreground'\n    | 'sidebar-border'\n    | 'sidebar-ring'\n    // Pika extended semantic colors\n    | 'success'\n    | 'success-foreground'\n    | 'success-bg'\n    | 'warning'\n    | 'warning-foreground'\n    | 'warning-bg'\n    | 'info'\n    | 'info-foreground'\n    | 'info-bg'\n    | 'ai'\n    | 'ai-foreground'\n    | 'ai-bg'\n    | 'danger-bg'\n    // Header/branding\n    | 'chat-app-icon'\n    | 'chat-app-header-icon-height'\n    | 'chat-app-header-icon-gap';\n\n/**\n * All semantic variables as a readonly array for iteration\n *\n * @since 0.16.0\n */\nexport const SEMANTIC_COLOR_VARIABLES: readonly SemanticColorVariable[] = [\n    // Core\n    'background',\n    'foreground',\n    'card',\n    'card-foreground',\n    'popover',\n    'popover-foreground',\n    'primary',\n    'primary-foreground',\n    'secondary',\n    'secondary-foreground',\n    'muted',\n    'muted-foreground',\n    'accent',\n    'accent-foreground',\n    'destructive',\n    'destructive-foreground',\n    'border',\n    'input',\n    'ring',\n    // Charts\n    'chart-1',\n    'chart-2',\n    'chart-3',\n    'chart-4',\n    'chart-5',\n    // Sidebar\n    'sidebar-background',\n    'sidebar-foreground',\n    'sidebar-primary',\n    'sidebar-primary-foreground',\n    'sidebar-accent',\n    'sidebar-accent-foreground',\n    'sidebar-border',\n    'sidebar-ring',\n    // Extended\n    'success',\n    'success-foreground',\n    'success-bg',\n    'warning',\n    'warning-foreground',\n    'warning-bg',\n    'info',\n    'info-foreground',\n    'info-bg',\n    'ai',\n    'ai-foreground',\n    'ai-bg',\n    'danger-bg',\n    // Header/branding\n    'chat-app-icon',\n    'chat-app-header-icon-height',\n    'chat-app-header-icon-gap'\n] as const;\n","import { PikaWCContext, PikaWCContextRequestDetail } from '../types/chatbot/webcomp-types';\nimport { SEMANTIC_COLOR_VARIABLES, type SemanticColorVariable } from '../types/chatbot/theme-types';\n\n/**\n * Web component authors can use this function to get the Pika context when their web component is rendered.\n *\n * The type of the context object is defined in the PikaWCContext interface.\n *\n * @see PikaWCContext\n *\n * @example\n * ```ts\n * const ctx: PikaWCContext = await getPikaContext(el);\n * console.log(ctx.appState.identity.user.fullName);\n * ```\n */\nexport function getPikaContext(el: HTMLElement): Promise<PikaWCContext> {\n    return new Promise((resolve, reject) => {\n        const timeout = setTimeout(() => {\n            reject(new Error('Pika context not provided - component must be rendered within a Pika chat app'));\n        }, 1000);\n\n        el.dispatchEvent(\n            new CustomEvent<PikaWCContextRequestDetail>('pika-wc-context-request', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    callback: (ctx: PikaWCContext) => {\n                        clearTimeout(timeout);\n                        resolve(ctx);\n                    }\n                }\n            })\n        );\n    });\n}\n\n/**\n * Get a single CSS variable value from the document.\n * Useful for web components that need to read theme values.\n *\n * @param name - Variable name without the -- prefix (e.g., 'primary', 'background')\n * @returns The computed value of the CSS variable, or empty string if not found\n *\n * @example\n * ```ts\n * const primaryColor = getThemeVariable('primary');\n * console.log(primaryColor); // 'oklch(0.514 0.146 255.748)'\n *\n * // Use in dynamic styles - value already includes oklch()\n * element.style.backgroundColor = getThemeVariable('primary');\n * ```\n *\n * @since 0.16.0\n */\nexport function getThemeVariable(name: string): string {\n    if (typeof document === 'undefined') return '';\n    return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();\n}\n\n/**\n * Get all Pika semantic theme tokens as an object.\n * Useful for web components that need access to multiple theme values.\n *\n * Returns only the semantic color variables (primary, secondary, success, etc.),\n * not the full palette variables (gold-500, blueish-300, etc.).\n *\n * @returns Object mapping variable names to their computed values\n *\n * @example\n * ```ts\n * const tokens = getPikaThemeTokens();\n * console.log(tokens.primary);           // 'oklch(0.514 0.146 255.748)'\n * console.log(tokens.success);           // 'oklch(0.55 0.16 142)'\n * console.log(tokens['muted-foreground']); // 'oklch(0.551 0.027 264.364)'\n * ```\n *\n * @since 0.16.0\n */\nexport function getPikaThemeTokens(): Partial<Record<SemanticColorVariable, string>> {\n    if (typeof document === 'undefined') return {};\n\n    const style = getComputedStyle(document.documentElement);\n    const tokens: Partial<Record<SemanticColorVariable, string>> = {};\n\n    for (const name of SEMANTIC_COLOR_VARIABLES) {\n        const value = style.getPropertyValue(`--${name}`).trim();\n        if (value) {\n            tokens[name] = value;\n        }\n    }\n\n    return tokens;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-shared",
-  "version": "1.4.12",
+  "version": "1.5.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",