@pillar-ai/sdk 0.1.0

package/dist/api/mcp-client.d.ts

@@ -0,0 +1,226 @@
+/**
+ * MCP Client for Pillar SDK
+ *
+ * Implements JSON-RPC 2.0 over HTTP with SSE streaming support
+ * for communication with the MCP server.
+ */
+import type { TaskButtonData } from '../components/Panel/TaskButton';
+import type { ResolvedConfig } from '../core/config';
+import type { ExecutionPlan } from '../core/plan';
+import type { UserContextItem } from '../types/user-context';
+import type { ArticleSummary } from './client';
+/** MCP Tool result content */
+interface ToolResultContent {
+    type: 'text' | 'image' | 'resource';
+    text?: string;
+    data?: string;
+    mimeType?: string;
+}
+/** MCP Tool result */
+export interface ToolResult {
+    content: ToolResultContent[];
+    isError?: boolean;
+    structuredContent?: {
+        sources?: ArticleSummary[];
+        actions?: ActionData[];
+        plan?: ExecutionPlan;
+    };
+    _meta?: {
+        conversation_id?: string;
+        query_log_id?: string;
+    };
+}
+/** Action data from MCP server */
+export interface ActionData {
+    id: string;
+    name: string;
+    description: string;
+    action_type: string;
+    /** If true, action executes immediately without user clicking */
+    auto_run: boolean;
+    /** If true, action completes without waiting for host confirmation */
+    auto_complete: boolean;
+    /** If true, action returns data for agent reasoning */
+    returns_data: boolean;
+    score: number;
+    data: Record<string, unknown>;
+}
+/** Streaming callbacks for tool calls */
+export interface StreamCallbacks {
+    /** Called for each text token */
+    onToken?: (token: string) => void;
+    /** Called when sources are available */
+    onSources?: (sources: ArticleSummary[]) => void;
+    /** Called when actions are available */
+    onActions?: (actions: ActionData[]) => void;
+    /** Called when a plan is created (from plan.created event) */
+    onPlan?: (plan: ExecutionPlan) => void;
+    /** Called on error */
+    onError?: (error: string) => void;
+    /** Called when stream is complete */
+    onComplete?: (conversationId?: string, queryLogId?: string) => void;
+    /** Called for progress updates */
+    onProgress?: (progress: {
+        kind: string;
+        message?: string;
+    }) => void;
+}
+/** Image for chat requests (from upload-image endpoint) */
+export interface ChatImage {
+    /** Signed GCS URL from upload-image endpoint */
+    url: string;
+    /** Detail level for image analysis. 'low' is faster and cheaper. */
+    detail?: 'low' | 'high';
+}
+/** Response from image upload endpoint */
+export interface ImageUploadResponse {
+    url: string;
+    expires_at: string;
+}
+export declare class MCPClient {
+    private config;
+    private requestId;
+    constructor(config: ResolvedConfig);
+    private get baseUrl();
+    private get headers();
+    private nextId;
+    /**
+     * Call an MCP tool (non-streaming).
+     */
+    callTool(name: string, args: Record<string, unknown>): Promise<ToolResult>;
+    /**
+     * Call an MCP tool with streaming support.
+     *
+     * @param name - Tool name (e.g., 'ask')
+     * @param args - Tool arguments
+     * @param callbacks - Streaming event callbacks
+     * @param signal - Optional AbortSignal for cancellation
+     */
+    callToolStream(name: string, args: Record<string, unknown>, callbacks: StreamCallbacks, signal?: AbortSignal): Promise<ToolResult>;
+    /**
+     * Upload an image for use in chat.
+     *
+     * Returns a signed URL that can be passed to the ask tool.
+     * The URL expires after 24 hours.
+     *
+     * @param file - The image file to upload
+     * @returns Promise with signed URL and expiration
+     */
+    uploadImage(file: File): Promise<ImageUploadResponse>;
+    /**
+     * Ask a question using the MCP 'ask' tool with streaming.
+     *
+     * This is a convenience method for the common use case of asking questions.
+     *
+     * @param query - The question to ask
+     * @param callbacks - Streaming callbacks
+     * @param options - Optional configuration including images
+     */
+    ask(query: string, callbacks: StreamCallbacks, options?: {
+        articleSlug?: string;
+        userContext?: UserContextItem[];
+        images?: ChatImage[];
+        signal?: AbortSignal;
+    }): Promise<ToolResult>;
+    /**
+     * Continue plan execution after receiving step result.
+     *
+     * Called by the SDK after executing a step that has
+     * requires_result_feedback=true. The server analyzes the result
+     * and updates subsequent steps if needed.
+     *
+     * @param planId - UUID of the plan
+     * @param stepId - UUID of the completed step
+     * @param result - Step execution result
+     * @returns Updated plan with all steps
+     */
+    continuePlan(planId: string, stepId: string, result: unknown): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Cancel an in-progress plan.
+     *
+     * Marks the plan as cancelled and skips any pending steps.
+     *
+     * @param planId - UUID of the plan to cancel
+     * @returns Updated plan with cancelled status
+     */
+    cancelPlan(planId: string): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Get current state of a plan.
+     *
+     * Returns the plan and all its steps with current statuses.
+     *
+     * @param planId - UUID of the plan
+     * @returns Plan with all steps
+     */
+    getPlan(planId: string): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Start a plan that was waiting for user confirmation.
+     *
+     * For plans with auto_execute=false, the user must explicitly
+     * start execution by calling this method.
+     *
+     * @param planId - UUID of the plan to start
+     * @returns Updated plan with executing status
+     */
+    startPlan(planId: string): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Retry a failed step.
+     *
+     * Increments the retry count and resets the step to ready status.
+     * Only works if the step is retriable and hasn't exceeded max_retries.
+     *
+     * @param planId - UUID of the plan
+     * @param stepId - UUID of the step to retry
+     * @returns Updated plan with step reset to ready
+     */
+    retryStep(planId: string, stepId: string): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Mark a step as failed.
+     *
+     * Records the error and determines if the plan should also fail
+     * (if step is not retriable or out of retries).
+     *
+     * @param planId - UUID of the plan
+     * @param stepId - UUID of the failed step
+     * @param errorMessage - Optional error message
+     * @returns Updated plan with failed step
+     */
+    failStep(planId: string, stepId: string, errorMessage?: string): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Skip a step and advance to the next one.
+     *
+     * @param planId - UUID of the plan
+     * @param stepId - UUID of the step to skip
+     * @returns Updated plan with skipped step and next step ready
+     */
+    skipStep(planId: string, stepId: string): Promise<{
+        plan: ExecutionPlan;
+    }>;
+    /**
+     * Send action result back to the agent.
+     *
+     * Called after executing a query action (returns_data=true).
+     * The result is sent to the agent for further reasoning in the ReAct loop.
+     *
+     * @param actionName - The name of the action that was executed
+     * @param result - The result data to send back to the agent
+     */
+    sendActionResult(actionName: string, result: unknown): void;
+}
+/**
+ * Convert ActionData from MCP response to TaskButtonData for UI rendering.
+ */
+export declare function actionToTaskButton(action: ActionData): TaskButtonData;
+export {};

package/dist/button/FloatingButton.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Floating Help Button
+ * A floating action button that opens the help panel
+ */
+import type { ResolvedConfig, FloatingButtonPosition } from '../core/config';
+export declare class FloatingButton {
+    private config;
+    private onClick;
+    private element;
+    private stylesInjected;
+    private _isOpen;
+    constructor(config: ResolvedConfig, onClick: () => void);
+    /**
+     * Initialize the floating button
+     */
+    init(): void;
+    /**
+     * Set the open state (to show/hide when panel opens)
+     */
+    setOpen(isOpen: boolean): void;
+    /**
+     * Show the button
+     */
+    show(): void;
+    /**
+     * Hide the button
+     */
+    hide(): void;
+    /**
+     * Update button position
+     */
+    setPosition(position: FloatingButtonPosition): void;
+    /**
+     * Update button label
+     */
+    setLabel(label: string): void;
+    /**
+     * Destroy the button
+     */
+    destroy(): void;
+    private createElement;
+    private updateIcon;
+    private handleClick;
+}

package/dist/cli/sync.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env npx tsx
+export {};

package/dist/components/Button/EdgeTrigger.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Edge Trigger Component
+ * A sidebar-style trigger that reserves space in the layout and slides out with the panel.
+ * The trigger stays visible when panel opens, positioned at the panel's outer edge.
+ */
+import type { FloatingButtonPosition, ResolvedConfig } from '../../core/config';
+/**
+ * EdgeTrigger class that manages the edge trigger lifecycle
+ * The trigger stays visible when panel opens, sliding out with it
+ */
+export declare class EdgeTrigger {
+    private config;
+    private onClick;
+    private rootContainer;
+    private container;
+    private stylesInjected;
+    private themeStylesInjected;
+    private _isHidden;
+    private unsubscribeOpen;
+    private unsubscribeWidth;
+    private unsubscribeHoverMode;
+    private unsubscribeActiveTab;
+    private themeObserver;
+    private currentTheme;
+    constructor(config: ResolvedConfig, onClick: () => void, rootContainer?: HTMLElement | null);
+    /**
+     * Handle tab click - sets active tab and opens panel
+     */
+    private handleTabClick;
+    /**
+     * Get position as 'left' or 'right' from the floating button position config
+     */
+    private getEdgePosition;
+    /**
+     * Detect the current theme from the document
+     * Checks for .dark class (next-themes) or data-theme attribute
+     * Returns explicit 'light' or 'dark' to match app theme (not system preference)
+     */
+    private detectTheme;
+    /**
+     * Initialize the edge trigger
+     */
+    init(): void;
+    /**
+     * Apply padding to reserve space for trigger + panel (when open in push mode)
+     * In hover mode, only reserve trigger width even when panel is open
+     */
+    private applyLayoutPadding;
+    /**
+     * Remove layout padding
+     */
+    private removeLayoutPadding;
+    /**
+     * Set the open state (to update visibility when panel opens)
+     */
+    setOpen(_isOpen: boolean): void;
+    /**
+     * Show the trigger
+     */
+    show(): void;
+    /**
+     * Hide the trigger
+     */
+    hide(): void;
+    /**
+     * Update trigger position
+     */
+    setPosition(position: FloatingButtonPosition): void;
+    /**
+     * Update trigger label
+     */
+    setLabel(label: string): void;
+    /**
+     * Destroy the trigger
+     */
+    destroy(): void;
+    private render;
+}

package/dist/components/Button/FloatingButton.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Floating Help Button Component
+ * A floating action button that opens the help panel
+ */
+import type { ResolvedConfig, FloatingButtonPosition } from '../../core/config';
+/**
+ * FloatingButton class that manages the button lifecycle
+ * Uses Preact for rendering but maintains imperative control
+ */
+export declare class FloatingButton {
+    private config;
+    private onClick;
+    private container;
+    private stylesInjected;
+    private _isHidden;
+    constructor(config: ResolvedConfig, onClick: () => void);
+    /**
+     * Initialize the floating button
+     */
+    init(): void;
+    /**
+     * Set the open state (to update icon when panel opens)
+     */
+    setOpen(_isOpen: boolean): void;
+    /**
+     * Show the button
+     */
+    show(): void;
+    /**
+     * Hide the button
+     */
+    hide(): void;
+    /**
+     * Update button position
+     */
+    setPosition(position: FloatingButtonPosition): void;
+    /**
+     * Update button label
+     */
+    setLabel(label: string): void;
+    /**
+     * Destroy the button
+     */
+    destroy(): void;
+    private render;
+}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Button Components Index
+ */
+export { FloatingButton } from './FloatingButton';
+export { EdgeTrigger } from './EdgeTrigger';

package/dist/components/Cards/ConfirmActionCard.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ConfirmActionCard Component
+ *
+ * Renders inline_ui type actions as inline cards in the chat.
+ * If a custom card renderer is registered for the card_type, it's used.
+ * Otherwise, a default confirmation card is rendered.
+ */
+import type { CardCallbacks } from '../../core/events';
+import type { TaskButtonData } from '../Panel/TaskButton';
+/**
+ * Create the default confirmation card for inline_ui actions.
+ * Used when no custom card renderer is registered.
+ */
+export declare function createDefaultConfirmCard(action: TaskButtonData, callbacks: CardCallbacks): HTMLDivElement;
+/**
+ * Create a confirmation card for a confirm_action type action.
+ * Uses custom renderer if registered, otherwise uses default.
+ */
+export declare function createConfirmActionCard(action: TaskButtonData, onConfirm: (data?: Record<string, unknown>) => void, onCancel: () => void): HTMLDivElement;
+/**
+ * CSS styles for ConfirmActionCard.
+ */
+export declare const CONFIRM_CARD_STYLES = "\n/* Confirm Action Card */\n.pillar-confirm-card-wrapper {\n  margin-top: 12px;\n}\n\n.pillar-confirm-card {\n  background: var(--pillar-bg-secondary, #f9fafb);\n  border: 1px solid var(--pillar-border, #e5e7eb);\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.pillar-confirm-card__content {\n  padding: 16px;\n}\n\n.pillar-confirm-card__header {\n  margin-bottom: 12px;\n}\n\n.pillar-confirm-card__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--pillar-text-primary, #111827);\n}\n\n.pillar-confirm-card__data {\n  background: var(--pillar-bg-primary, #ffffff);\n  border: 1px solid var(--pillar-border, #e5e7eb);\n  border-radius: 8px;\n  padding: 12px;\n  margin-bottom: 12px;\n}\n\n.pillar-confirm-card__data-row {\n  display: flex;\n  gap: 8px;\n  font-size: 13px;\n  margin-bottom: 4px;\n}\n\n.pillar-confirm-card__data-row:last-child {\n  margin-bottom: 0;\n}\n\n.pillar-confirm-card__data-key {\n  color: var(--pillar-text-secondary, #6b7280);\n  flex-shrink: 0;\n}\n\n.pillar-confirm-card__data-value {\n  color: var(--pillar-text-primary, #111827);\n  word-break: break-word;\n}\n\n.pillar-confirm-card__actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.pillar-confirm-card__btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n}\n\n.pillar-confirm-card__btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.pillar-confirm-card__btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-confirm-card__btn--primary {\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n  border-color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-confirm-card__btn--primary:hover:not(:disabled) {\n  background: var(--pillar-primary-hover, #1d4ed8);\n  border-color: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-confirm-card__btn--secondary {\n  background: var(--pillar-bg-primary, #ffffff);\n  color: var(--pillar-text-secondary, #6b7280);\n  border-color: var(--pillar-border, #e5e7eb);\n}\n\n.pillar-confirm-card__btn--secondary:hover:not(:disabled) {\n  background: var(--pillar-bg-secondary, #f9fafb);\n}\n\n.pillar-confirm-card__success {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 16px;\n  color: #059669;\n  font-weight: 500;\n}\n\n.pillar-confirm-card__success-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-confirm-card__error {\n  background: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 8px;\n  padding: 12px;\n  margin-bottom: 12px;\n  color: #dc2626;\n  font-size: 13px;\n}\n\n.pillar-confirm-card__spinner {\n  display: inline-flex;\n  animation: pillar-spin 1s linear infinite;\n}\n\n@keyframes pillar-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n";

package/dist/components/Cards/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Card Components
+ *
+ * Components for rendering interactive cards in chat responses.
+ */
+export { createConfirmActionCard, createDefaultConfirmCard, CONFIRM_CARD_STYLES, } from './ConfirmActionCard';

package/dist/components/Panel/ChatInput.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Chat Input Component
+ * Input for starting a chat - navigates to chat view on send
+ */
+export declare function ChatInput(): import("preact").JSX.Element;

package/dist/components/Panel/ContextTag.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Context Tag Component
+ * Displays a removable context item (highlighted text, etc.) as a chip/tag
+ */
+import type { UserContextItem } from '../../types/user-context';
+interface ContextTagProps {
+    context: UserContextItem;
+    onRemove?: (id: string) => void;
+    readOnly?: boolean;
+}
+export declare function ContextTag({ context, onRemove, readOnly }: ContextTagProps): import("preact").JSX.Element;
+interface ContextTagListProps {
+    contexts: UserContextItem[];
+    onRemove?: (id: string) => void;
+    readOnly?: boolean;
+}
+export declare function ContextTagList({ contexts, onRemove, readOnly }: ContextTagListProps): import("preact").JSX.Element | null;
+export {};

package/dist/components/Panel/Header.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Panel Header Component
+ * Navigation header with back, home, and close buttons
+ */
+import { h } from 'preact';
+import { type ViewType } from '../../store/router';
+interface HeaderProps {
+    currentView: ViewType;
+    customTitle?: string;
+    /** Hide back and home navigation buttons */
+    hideNavigation?: boolean;
+}
+export declare function Header({ currentView, customTitle, hideNavigation }: HeaderProps): h.JSX.Element;
+export {};

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Panel Container Component
+ * Shadow DOM container for the help panel with Preact rendering
+ */
+import type { APIClient } from '../../api/client';
+import type { ResolvedConfig } from '../../core/config';
+import type { EventEmitter } from '../../core/events';
+export declare class Panel {
+    private config;
+    private api;
+    private events;
+    private rootContainer;
+    private host;
+    private shadow;
+    private backdrop;
+    private panelElement;
+    private renderRoot;
+    private unsubscribe;
+    private isManualMount;
+    private themeObserver;
+    constructor(config: ResolvedConfig, api: APIClient, events: EventEmitter, rootContainer?: HTMLElement | null);
+    /**
+     * Detect the current theme from the document
+     * Checks for .dark class (next-themes) or data-theme attribute
+     * Returns explicit 'light' or 'dark' to match app theme (not system preference)
+     */
+    private detectThemeFromDOM;
+    /**
+     * Whether the panel is currently open
+     */
+    get isOpen(): boolean;
+    /**
+     * Initialize the panel
+     */
+    init(): Promise<void>;
+    /**
+     * Open the panel
+     */
+    open(options?: {
+        view?: string;
+        focusInput?: boolean;
+    }): void;
+    /**
+     * Close the panel
+     */
+    close(): void;
+    /**
+     * Navigate to a specific view
+     */
+    navigate(view: string, params?: Record<string, string>): void;
+    /**
+     * Destroy the panel
+     */
+    destroy(): void;
+    private subscribeToState;
+    private applyPushModeStyles;
+    private removePushModeStyles;
+    /**
+     * Get the container for rendering content (shadow root or host element)
+     */
+    private get renderContainer();
+    /**
+     * Transform Shadow DOM :host selectors to work in regular DOM.
+     * Replaces :host with [data-pillar-panel] attribute selector.
+     */
+    private transformStylesForRegularDOM;
+    /**
+     * Inject styles into document.head for non-Shadow DOM mode.
+     * Uses IDs to prevent duplicate injection.
+     */
+    private injectStylesIntoHead;
+    /**
+     * Inject styles into Shadow DOM for isolated mode.
+     */
+    private injectStylesIntoShadow;
+    private createHost;
+    /**
+     * Mount the panel to a specific container element.
+     * Used for manual mounting mode (e.g., from React component).
+     */
+    mountTo(container: HTMLElement): void;
+    /**
+     * Get the host element for external mounting
+     */
+    getHostElement(): HTMLElement | null;
+    private createBackdrop;
+    private createPanel;
+    private renderPreact;
+    private bindEvents;
+    private handleKeyDown;
+    private setupFocusTrap;
+    /**
+     * Apply theme mode attribute to host element for CSS targeting
+     */
+    private applyThemeMode;
+    /**
+     * Set up observer to watch for theme changes on documentElement
+     */
+    private setupThemeObserver;
+    /**
+     * Update the theme at runtime
+     */
+    setTheme(themeConfig: Partial<ResolvedConfig['theme']>): void;
+}

package/dist/components/Panel/PanelContent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Panel Content Component
+ * Main panel layout with header, content, and chat input
+ */
+import { h } from 'preact';
+export declare function PanelContent(): h.JSX.Element;

package/dist/components/Panel/TaskButton.d.ts

@@ -0,0 +1,59 @@
+/**
+ * TaskButton Component
+ *
+ * Renders a task action button in chat responses.
+ * When clicked, triggers the task execution via the Pillar SDK.
+ *
+ * Presentation (label, icon) is derived from task name and type.
+ * The server only sends: name, task_type, data.
+ */
+import type { TaskExecutePayload } from '../../core/events';
+/**
+ * Task data as received from the AI.
+ * Simplified: server sends minimal data, SDK derives presentation.
+ */
+export interface TaskButtonData {
+    /** Database UUID for the task (used for confirmation) */
+    id?: string;
+    /** Task unique identifier (e.g., 'invite_team_member') */
+    name: string;
+    /** Task type (navigate, trigger_action, etc.) */
+    taskType?: TaskExecutePayload['taskType'];
+    /** Data payload containing type-specific values */
+    data?: Record<string, unknown>;
+    /** If true, action executes immediately without user clicking */
+    autoRun?: boolean;
+    /** If true, action completes without waiting for host confirmation */
+    autoComplete?: boolean;
+    /** @deprecated SDK now derives label from name */
+    label?: string;
+    /** @deprecated SDK now derives icon from taskType */
+    icon?: string;
+    /** @deprecated Use default variant */
+    buttonVariant?: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost';
+    /** @deprecated Included in data.path */
+    path?: string;
+    /** @deprecated Included in data.url */
+    externalUrl?: string;
+}
+interface TaskButtonProps {
+    task: TaskButtonData;
+    onExecute?: () => void;
+}
+/**
+ * Create a TaskButton element.
+ *
+ * Presentation is derived:
+ * - Label: from task.label (legacy) or derived from task.name
+ * - Icon: from task.icon (legacy) or derived from task.taskType
+ */
+export declare function createTaskButton(props: TaskButtonProps): HTMLButtonElement;
+/**
+ * Create a container with multiple task buttons.
+ */
+export declare function createTaskButtonGroup(tasks: TaskButtonData[]): HTMLDivElement;
+/**
+ * CSS styles for TaskButton (to be added to PANEL_STYLES).
+ */
+export declare const TASK_BUTTON_STYLES = "\n/* Task Button Component */\n.pillar-task-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  text-decoration: none;\n}\n\n.pillar-task-btn__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.pillar-task-btn__icon svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-task-btn__label {\n  white-space: nowrap;\n}\n\n/* Primary variant (default) */\n.pillar-task-btn--primary {\n  background: #2563eb;\n  color: #ffffff;\n  border-color: #2563eb;\n}\n\n.pillar-task-btn--primary:hover {\n  background: #1d4ed8;\n  border-color: #1d4ed8;\n}\n\n/* Default variant */\n.pillar-task-btn--default {\n  background: #f3f4f6;\n  color: #1a1a1a;\n  border-color: #e5e7eb;\n}\n\n.pillar-task-btn--default:hover {\n  background: #e5e7eb;\n}\n\n/* Secondary variant */\n.pillar-task-btn--secondary {\n  background: #eff6ff;\n  color: #2563eb;\n  border-color: #dbeafe;\n}\n\n.pillar-task-btn--secondary:hover {\n  background: #dbeafe;\n}\n\n/* Outline variant */\n.pillar-task-btn--outline {\n  background: transparent;\n  color: #2563eb;\n  border-color: #2563eb;\n}\n\n.pillar-task-btn--outline:hover {\n  background: #eff6ff;\n}\n\n/* Ghost variant */\n.pillar-task-btn--ghost {\n  background: transparent;\n  color: #6b7280;\n  border-color: transparent;\n}\n\n.pillar-task-btn--ghost:hover {\n  background: #f3f4f6;\n  color: #1a1a1a;\n}\n\n/* Task button group */\n.pillar-task-btn-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n}\n\n/* Task suggestion card in chat */\n.pillar-task-suggestion {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  margin-top: 12px;\n}\n\n.pillar-task-suggestion__header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #6b7280;\n}\n\n.pillar-task-suggestion__header svg {\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-task-suggestion__description {\n  font-size: 13px;\n  color: #374151;\n}\n";
+export {};

package/dist/components/Panel/UnifiedChatInput.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Unified Chat Input Component
+ * Reusable input with context tags and image upload support
+ * Used across all views in the SDK
+ */
+import { type ChatImage } from '../../store/chat';
+import type { UserContextItem } from '../../types';
+interface UnifiedChatInputProps {
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Custom submit handler - if provided, will be called instead of default navigation */
+    onSubmit?: (message: string, context: UserContextItem[], images: ChatImage[]) => void;
+    /** Whether to show context tags (default: true) */
+    showContextTags?: boolean;
+    /** Whether to show image upload button (default: true) */
+    showImageUpload?: boolean;
+    /** Additional CSS class for the wrapper */
+    className?: string;
+}
+export declare function UnifiedChatInput({ placeholder, disabled, onSubmit, showContextTags, showImageUpload, className, }: UnifiedChatInputProps): import("preact").JSX.Element;
+export {};