@pillar-ai/sdk 0.1.0

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

@@ -0,0 +1,9 @@
+/**
+ * WorkflowChecklist Component
+ *
+ * Renders an active workflow as an interactive checklist.
+ * Shows progress, step status, and action buttons.
+ */
+import { h } from 'preact';
+export declare function WorkflowChecklist(): h.JSX.Element | null;
+export declare const WORKFLOW_STYLES = "\n/* Workflow Checklist Container */\n.pillar-workflow {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  margin: 12px 0;\n}\n\n/* Header */\n.pillar-workflow__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.pillar-workflow__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #6b7280;\n}\n\n.pillar-workflow__title {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.pillar-workflow__progress {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6b7280;\n  padding: 2px 8px;\n  background: #e5e7eb;\n  border-radius: 10px;\n}\n\n.pillar-workflow__description {\n  font-size: 13px;\n  color: #6b7280;\n}\n\n/* Steps List */\n.pillar-workflow__steps {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Individual Step */\n.pillar-workflow-step {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow-step__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: #9ca3af;\n}\n\n.pillar-workflow-step__icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-workflow-step__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.pillar-workflow-step__label {\n  font-size: 13px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.pillar-workflow-step__note {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.pillar-workflow-step__status-text {\n  font-size: 12px;\n  color: #2563eb;\n  font-style: italic;\n}\n\n.pillar-workflow-step__actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 4px;\n}\n\n/* Step States */\n.pillar-workflow-step--pending {\n  opacity: 0.6;\n}\n\n.pillar-workflow-step--awaiting_initiation {\n  background: #fef3c7;\n  border-color: #fcd34d;\n}\n\n.pillar-workflow-step--awaiting_initiation .pillar-workflow-step__icon {\n  color: #d97706;\n}\n\n.pillar-workflow-step--active {\n  background: #eff6ff;\n  border-color: #93c5fd;\n}\n\n.pillar-workflow-step--active .pillar-workflow-step__icon {\n  color: #2563eb;\n}\n\n.pillar-workflow-step--completed .pillar-workflow-step__icon {\n  color: #059669;\n}\n\n.pillar-workflow-step--completed .pillar-workflow-step__label {\n  text-decoration: line-through;\n  color: #6b7280;\n}\n\n.pillar-workflow-step--skipped {\n  opacity: 0.5;\n}\n\n.pillar-workflow-step--skipped .pillar-workflow-step__icon {\n  color: #9ca3af;\n}\n\n.pillar-workflow-step--skipped .pillar-workflow-step__label {\n  text-decoration: line-through;\n  color: #9ca3af;\n}\n\n.pillar-workflow-step--failed {\n  background: #fef2f2;\n  border-color: #fca5a5;\n}\n\n.pillar-workflow-step--failed .pillar-workflow-step__icon {\n  color: #dc2626;\n}\n\n/* Start Button */\n.pillar-workflow-step__start-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  background: #2563eb;\n  color: #ffffff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow-step__start-btn:hover {\n  background: #1d4ed8;\n}\n\n/* Skip Button */\n.pillar-workflow-step__skip-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  background: transparent;\n  color: #6b7280;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow-step__skip-btn:hover {\n  background: #f3f4f6;\n  color: #374151;\n}\n\n/* Spinner Animation for Active Step */\n@keyframes pillar-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.pillar-workflow-step__spinner {\n  animation: pillar-spin 1s linear infinite;\n}\n\n/* Footer */\n.pillar-workflow__footer {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 8px;\n  border-top: 1px solid #e5e7eb;\n}\n\n.pillar-workflow__cancel-btn {\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  background: transparent;\n  color: #9ca3af;\n  border: none;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-workflow__cancel-btn:hover {\n  color: #dc2626;\n}\n";

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

@@ -0,0 +1,13 @@
+/**
+ * Panel Components Index
+ */
+export { Panel } from './Panel';
+export { PanelContent } from './PanelContent';
+export { Header } from './Header';
+export { ChatInput } from './ChatInput';
+export { UnifiedChatInput } from './UnifiedChatInput';
+export { ContextTag, ContextTagList } from './ContextTag';
+export { PANEL_STYLES } from './styles';
+export { createTaskButton, createTaskButtonGroup, TASK_BUTTON_STYLES } from './TaskButton';
+export type { TaskButtonData } from './TaskButton';
+export { WorkflowChecklist, WORKFLOW_STYLES } from './WorkflowChecklist';

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

@@ -0,0 +1,20 @@
+/**
+ * Panel CSS Styles
+ * Complete styling for the help panel (injected into Shadow DOM)
+ *
+ * Class naming convention:
+ * - Internal classes (_pillar-*): Apply all default styles
+ * - Public classes (pillar-*): Empty by default, for user overrides
+ *
+ * Each element renders both classes, e.g.: class="_pillar-header pillar-header"
+ */
+import type { ResolvedThemeConfig, ThemeColors } from '../../core/config';
+/**
+ * Generate CSS variable overrides from theme colors
+ */
+export declare function generateThemeVariables(colors: ThemeColors, prefix?: string): string;
+/**
+ * Generate custom theme CSS from config
+ */
+export declare function generateThemeCSS(theme: ResolvedThemeConfig): string;
+export declare const PANEL_STYLES = "\n/* ============================================================================\n   CSS Custom Properties (Variables)\n   Users can override these to customize colors\n   ============================================================================ */\n\n:host {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-primary-light: #eff6ff;\n  --pillar-primary-light-hover: #dbeafe;\n  \n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-bg-tertiary: #f3f4f6;\n  \n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-text-muted: #6b7280;\n  --pillar-text-placeholder: #9ca3af;\n  \n  --pillar-border: #e5e7eb;\n  --pillar-border-light: #f3f4f6;\n  \n  /* Shadows */\n  --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  \n  /* Code blocks */\n  --pillar-code-bg: #1f2937;\n  --pillar-code-text: #e5e7eb;\n  \n  /* Scrollbar */\n  --pillar-scrollbar-track: transparent;\n  --pillar-scrollbar-thumb: #d1d5db;\n  --pillar-scrollbar-thumb-hover: #9ca3af;\n  \n  /* Spacing (can be customized) */\n  --pillar-panel-width: 380px;\n  --pillar-spacing-xs: 4px;\n  --pillar-spacing-sm: 8px;\n  --pillar-spacing-md: 12px;\n  --pillar-spacing-lg: 16px;\n  --pillar-spacing-xl: 20px;\n  --pillar-spacing-2xl: 24px;\n  \n  /* Border radius */\n  --pillar-radius-sm: 4px;\n  --pillar-radius-md: 6px;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-xl: 10px;\n  --pillar-radius-full: 9999px;\n  \n  /* Typography */\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-font-mono: 'SF Mono', Consolas, monospace;\n  --pillar-font-size-xs: 11px;\n  --pillar-font-size-sm: 12px;\n  --pillar-font-size-base: 14px;\n  --pillar-font-size-md: 15px;\n  --pillar-font-size-lg: 16px;\n  --pillar-font-size-xl: 18px;\n  --pillar-font-size-2xl: 20px;\n  \n  /* Animation */\n  --pillar-transition-fast: 0.15s ease;\n  --pillar-transition-normal: 0.3s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  :host:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-primary-light: #1e3a5f;\n    --pillar-primary-light-hover: #1e4976;\n    \n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-bg-tertiary: #333333;\n    \n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-text-muted: #a3a3a3;\n    --pillar-text-placeholder: #737373;\n    \n    --pillar-border: #404040;\n    --pillar-border-light: #333333;\n    \n    --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n    \n    --pillar-code-bg: #0d0d0d;\n    --pillar-code-text: #e5e7eb;\n    \n    --pillar-scrollbar-thumb: #525252;\n    --pillar-scrollbar-thumb-hover: #737373;\n  }\n}\n\n/* Dark mode - Manual override */\n:host([data-theme=\"dark\"]) {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-primary-light: #1e3a5f;\n  --pillar-primary-light-hover: #1e4976;\n  \n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-bg-tertiary: #333333;\n  \n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-text-muted: #a3a3a3;\n  --pillar-text-placeholder: #737373;\n  \n  --pillar-border: #404040;\n  --pillar-border-light: #333333;\n  \n  --pillar-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  \n  --pillar-code-bg: #0d0d0d;\n  --pillar-code-text: #e5e7eb;\n  \n  --pillar-scrollbar-thumb: #525252;\n  --pillar-scrollbar-thumb-hover: #737373;\n}\n\n/* ============================================================================\n   Base Styles\n   Note: No CSS reset - we rely on explicit styles for SDK components\n   and allow custom cards to inherit host app styling (Tailwind, etc.)\n   ============================================================================ */\n\n:host {\n  font-family: var(--pillar-font-family);\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* ============================================================================\n   Panel Container\n   Internal: _pillar-panel | Public: pillar-panel\n   ============================================================================ */\n\n._pillar-panel {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: var(--pillar-panel-width);\n  max-width: 100vw;\n  background: var(--pillar-bg);\n  border-left: 1px solid var(--pillar-border);\n  display: flex;\n  flex-direction: column;\n  z-index: 99999;\n  transform: translateX(100%);\n  transition: transform var(--pillar-transition-normal);\n}\n\n._pillar-panel--right {\n  right: 0;\n}\n\n._pillar-panel--left {\n  left: 0;\n  border-left: none;\n  border-right: 1px solid var(--pillar-border);\n  transform: translateX(-100%);\n}\n\n._pillar-panel--open {\n  transform: translateX(0);\n}\n\n._pillar-panel--manual {\n  position: static;\n  transform: none;\n  height: 100%;\n}\n\n._pillar-panel-root {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n._pillar-panel-ui {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* Public override classes - empty by default */\n.pillar-panel {}\n.pillar-panel-root {}\n.pillar-panel-ui {}\n\n/* ============================================================================\n   Backdrop\n   ============================================================================ */\n\n._pillar-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.3);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity var(--pillar-transition-normal), visibility var(--pillar-transition-normal);\n  z-index: 99998;\n}\n\n._pillar-backdrop--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.pillar-backdrop {}\n\n/* ============================================================================\n   Header\n   Internal: _pillar-header | Public: pillar-header\n   ============================================================================ */\n\n._pillar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n  border-bottom: 1px solid var(--pillar-border);\n  flex-shrink: 0;\n  background: var(--pillar-bg);\n}\n\n._pillar-header-left {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-sm);\n}\n\n._pillar-header-title {\n  font-size: var(--pillar-font-size-lg);\n  font-weight: 600;\n  color: var(--pillar-text);\n}\n\n/* Public override classes */\n.pillar-header {}\n.pillar-header-left {}\n.pillar-header-title {}\n\n/* ============================================================================\n   Icon Buttons (back, home, close)\n   Internal: _pillar-icon-btn | Public: pillar-icon-btn\n   ============================================================================ */\n\n._pillar-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: none;\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: color var(--pillar-transition-fast), background var(--pillar-transition-fast);\n}\n\n._pillar-icon-btn:hover {\n  color: var(--pillar-text);\n  background: var(--pillar-bg-tertiary);\n}\n\n._pillar-icon-btn svg {\n  width: 20px;\n  height: 20px;\n}\n\n.pillar-icon-btn {}\n.pillar-back-btn {}\n.pillar-home-btn {}\n.pillar-close-btn {}\n\n/* ============================================================================\n   Content Area\n   Internal: _pillar-content | Public: pillar-content\n   ============================================================================ */\n\n._pillar-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n.pillar-content {}\n\n/* ============================================================================\n   Search Input\n   Internal: _pillar-search | Public: pillar-search\n   ============================================================================ */\n\n._pillar-search {\n  position: relative;\n  padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-search-input {\n  width: 100%;\n  padding: 10px 12px 10px 40px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  color: var(--pillar-text);\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  outline: none;\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-search-input:focus {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-search-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-search-icon {\n  position: absolute;\n  left: 32px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  color: var(--pillar-text-placeholder);\n  pointer-events: none;\n}\n\n._pillar-search-icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-search {}\n.pillar-search-input {}\n.pillar-search-icon {}\n\n/* ============================================================================\n   Chat Input (Persistent Bottom)\n   Internal: _pillar-chat-input | Public: pillar-chat-input\n   ============================================================================ */\n\n._pillar-chat-input-container {\n  flex-shrink: 0;\n  border-top: 1px solid var(--pillar-border);\n  background: var(--pillar-bg);\n  display: flex;\n  flex-direction: column;\n  max-height: 50%;\n  transition: max-height var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded {\n  max-height: 60%;\n}\n\n._pillar-chat-input-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0;\n  max-height: 0;\n  transition: max-height var(--pillar-transition-normal), padding var(--pillar-transition-normal);\n}\n\n._pillar-chat-input-container--expanded ._pillar-chat-input-messages {\n  max-height: 300px;\n  padding: var(--pillar-spacing-lg) var(--pillar-spacing-xl);\n}\n\n._pillar-chat-input-message {\n  margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-chat-input-message--user {\n  text-align: right;\n}\n\n._pillar-chat-input-message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 10px 14px;\n  border-radius: var(--pillar-spacing-lg);\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.5;\n}\n\n._pillar-chat-input-message--user ._pillar-chat-input-message-content {\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-right-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-message--assistant ._pillar-chat-input-message-content {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n  border-bottom-left-radius: var(--pillar-radius-sm);\n}\n\n._pillar-chat-input-sources {\n  margin-top: var(--pillar-spacing-sm);\n  padding-top: var(--pillar-spacing-sm);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-input-sources-title {\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  margin-bottom: 6px;\n}\n\n._pillar-chat-input-source {\n  display: block;\n  padding: 6px 10px;\n  margin-bottom: var(--pillar-spacing-xs);\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-radius: var(--pillar-radius-md);\n  text-decoration: none;\n  cursor: pointer;\n}\n\n._pillar-chat-input-source:hover {\n  background: var(--pillar-primary-light-hover);\n}\n\n._pillar-chat-input-area {\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n}\n\n._pillar-chat-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-input-textarea {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-chat-input-textarea::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n.pillar-chat-input-container {}\n.pillar-chat-input-messages {}\n.pillar-chat-input-message {}\n.pillar-chat-input-message-content {}\n.pillar-chat-input-sources {}\n.pillar-chat-input-area {}\n.pillar-chat-input-wrapper {}\n.pillar-chat-input-textarea {}\n\n/* ============================================================================\n   Chat Input Footer (contains send button)\n   ============================================================================ */\n\n._pillar-chat-input-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n/* ============================================================================\n   Send Button - In footer row, right aligned\n   Internal: _pillar-send-btn | Public: pillar-send-btn\n   ============================================================================ */\n\n._pillar-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-tertiary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-send-btn:hover:not(:disabled) {\n  color: #ffffff;\n  background: var(--pillar-primary);\n}\n\n._pillar-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-send-btn {}\n.pillar-chat-input-footer {}\n\n/* ============================================================================\n   Loading States\n   Internal: _pillar-loading | Public: pillar-loading\n   ============================================================================ */\n\n._pillar-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px var(--pillar-spacing-xl);\n  color: var(--pillar-text-muted);\n}\n\n._pillar-loading-spinner {\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--pillar-border);\n  border-top-color: var(--pillar-primary);\n  border-radius: 50%;\n  animation: pillar-spin 0.8s linear infinite;\n}\n\n@keyframes pillar-spin {\n  to { transform: rotate(360deg); }\n}\n\n.pillar-loading {}\n.pillar-loading-spinner {}\n\n/* ============================================================================\n   Progress Indicator (AI activity status)\n   Internal: _pillar-progress | Public: pillar-progress\n   ============================================================================ */\n\n._pillar-progress-indicator {\n  display: flex;\n  align-items: center;\n  gap: var(--pillar-spacing-sm);\n  padding: var(--pillar-spacing-sm) 0;\n}\n\n._pillar-progress-indicator ._pillar-loading-spinner {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n._pillar-progress-message {\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-muted);\n  font-style: italic;\n}\n\n.pillar-progress-indicator {}\n.pillar-progress-message {}\n\n/* ============================================================================\n   Empty States\n   Internal: _pillar-empty | Public: pillar-empty\n   ============================================================================ */\n\n._pillar-empty {\n  padding: 40px var(--pillar-spacing-xl);\n  text-align: center;\n  color: var(--pillar-text-muted);\n}\n\n._pillar-empty-icon {\n  width: 48px;\n  height: 48px;\n  margin: 0 auto var(--pillar-spacing-lg);\n  color: var(--pillar-border);\n}\n\n._pillar-empty-title {\n  font-size: var(--pillar-font-size-lg);\n  font-weight: 500;\n  color: var(--pillar-text);\n  margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-empty-description {\n  font-size: var(--pillar-font-size-base);\n}\n\n.pillar-empty {}\n.pillar-empty-icon {}\n.pillar-empty-title {}\n.pillar-empty-description {}\n\n/* ============================================================================\n   Section Titles\n   Internal: _pillar-section-title | Public: pillar-section-title\n   ============================================================================ */\n\n._pillar-section-title {\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-xl) var(--pillar-spacing-sm);\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--pillar-text-muted);\n}\n\n.pillar-section-title {}\n\n/* ============================================================================\n   Related Articles\n   ============================================================================ */\n\n._pillar-related-articles {\n  border-top: 1px solid var(--pillar-border);\n  margin-top: var(--pillar-spacing-2xl);\n  padding-top: var(--pillar-spacing-sm);\n}\n\n.pillar-related-articles {}\n\n/* ============================================================================\n   Scrollbar Styling\n   ============================================================================ */\n\n._pillar-content::-webkit-scrollbar,\n._pillar-chat-input-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n._pillar-content::-webkit-scrollbar-track,\n._pillar-chat-input-messages::-webkit-scrollbar-track {\n  background: var(--pillar-scrollbar-track);\n}\n\n._pillar-content::-webkit-scrollbar-thumb,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb {\n  background: var(--pillar-scrollbar-thumb);\n  border-radius: 3px;\n}\n\n._pillar-content::-webkit-scrollbar-thumb:hover,\n._pillar-chat-input-messages::-webkit-scrollbar-thumb:hover {\n  background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n   Home View\n   ============================================================================ */\n\n._pillar-home-view {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-header {\n  text-align: center;\n  padding: var(--pillar-spacing-2xl) 0;\n}\n\n._pillar-home-view-icon {\n  font-size: 40px;\n  margin-bottom: var(--pillar-spacing-md);\n}\n\n._pillar-home-view-title {\n  font-size: var(--pillar-font-size-xl);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: 0;\n}\n\n._pillar-home-view-questions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-sm);\n  margin-bottom: var(--pillar-spacing-xl);\n}\n\n._pillar-home-view-input-wrapper {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-home-view-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-home-view-input {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-home-view-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-home-view-input-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n._pillar-home-view-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-tertiary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-home-view-send-btn:hover:not(:disabled) {\n  color: #ffffff;\n  background: var(--pillar-primary);\n}\n\n._pillar-home-view-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-home-view-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-home-view {}\n.pillar-home-view-header {}\n.pillar-home-view-title {}\n.pillar-home-view-questions {}\n.pillar-home-view-input-wrapper {}\n.pillar-home-view-input {}\n.pillar-home-view-send-btn {}\n\n/* ============================================================================\n   Question Chip\n   ============================================================================ */\n\n._pillar-question-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  text-align: left;\n  color: var(--pillar-text);\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  cursor: pointer;\n  transition: background var(--pillar-transition-fast), border-color var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover {\n  border-color: var(--pillar-primary);\n}\n\n._pillar-question-chip-text {\n  flex: 1;\n}\n\n._pillar-question-chip-arrow {\n  color: var(--pillar-text-muted);\n  margin-left: var(--pillar-spacing-sm);\n  transition: color var(--pillar-transition-fast), transform var(--pillar-transition-fast);\n}\n\n._pillar-question-chip:hover ._pillar-question-chip-arrow {\n  color: var(--pillar-primary);\n  transform: translateX(2px);\n}\n\n._pillar-question-chip-skeleton {\n  height: 44px;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  overflow: hidden;\n}\n\n._pillar-question-chip-skeleton-bar {\n  width: 60%;\n  height: 14px;\n  margin: 15px var(--pillar-spacing-lg);\n  background: linear-gradient(90deg, var(--pillar-border) 25%, var(--pillar-bg-tertiary) 50%, var(--pillar-border) 75%);\n  background-size: 200% 100%;\n  animation: pillar-shimmer 1.5s infinite;\n  border-radius: var(--pillar-radius-sm);\n}\n\n@keyframes pillar-shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.pillar-question-chip {}\n.pillar-question-chip-text {}\n.pillar-question-chip-arrow {}\n.pillar-question-chip-skeleton {}\n.pillar-question-chip-skeleton-bar {}\n\n/* ============================================================================\n   Standalone Chat View\n   Internal: _pillar-chat-view | Public: pillar-chat-view\n   ============================================================================ */\n\n._pillar-chat-view {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n._pillar-chat-view-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--pillar-spacing-xl);\n  display: flex;\n  flex-direction: column;\n}\n\n._pillar-chat-view-welcome {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px var(--pillar-spacing-xl);\n  text-align: center;\n  flex: 1;\n}\n\n._pillar-chat-view-welcome-icon {\n  font-size: 48px;\n  margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-welcome-title {\n  font-size: var(--pillar-font-size-xl);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-welcome-text {\n  font-size: var(--pillar-font-size-base);\n  color: var(--pillar-text-muted);\n  max-width: 280px;\n}\n\n._pillar-chat-view-message {\n  margin-bottom: var(--pillar-spacing-lg);\n}\n\n._pillar-chat-view-message--user {\n  text-align: right;\n}\n\n._pillar-chat-view-message--assistant {\n  text-align: left;\n}\n\n.pillar-chat-view {}\n.pillar-chat-view-messages {}\n.pillar-chat-view-welcome {}\n.pillar-chat-view-message {}\n\n/* ============================================================================\n   User Message Bubble\n   Internal: _pillar-message-user | Public: pillar-message-user\n   ============================================================================ */\n\n._pillar-message-user {\n  display: inline-block;\n  max-width: 85%;\n  padding: 10px 14px;\n  border-radius: var(--pillar-spacing-lg);\n  border-bottom-right-radius: var(--pillar-radius-sm);\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.5;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n._pillar-message-user-images {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-message-user-image {\n  max-width: 120px;\n  max-height: 120px;\n  border-radius: var(--pillar-radius-md);\n  object-fit: cover;\n}\n\n.pillar-message-user {}\n.pillar-message-user-images {}\n.pillar-message-user-image {}\n\n/* ============================================================================\n   AI Response\n   Internal: _pillar-message-assistant | Public: pillar-message-assistant\n   ============================================================================ */\n\n._pillar-message-assistant {\n  font-size: var(--pillar-font-size-base);\n  line-height: 1.6;\n  color: var(--pillar-text-secondary);\n}\n\n._pillar-message-assistant p {\n  margin: 0 0 var(--pillar-spacing-md);\n}\n\n._pillar-message-assistant p:last-child {\n  margin-bottom: 0;\n}\n\n._pillar-message-assistant h2 {\n  font-size: var(--pillar-font-size-lg);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: var(--pillar-spacing-lg) 0 var(--pillar-spacing-sm);\n}\n\n._pillar-message-assistant h3 {\n  font-size: var(--pillar-font-size-md);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: 14px 0 6px;\n}\n\n._pillar-message-assistant h4 {\n  font-size: var(--pillar-font-size-base);\n  font-weight: 600;\n  color: var(--pillar-text);\n  margin: var(--pillar-spacing-md) 0 6px;\n}\n\n._pillar-message-assistant ul,\n._pillar-message-assistant ol {\n  margin: 0 0 var(--pillar-spacing-md);\n  padding-left: var(--pillar-spacing-2xl);\n  list-style-position: outside;\n}\n\n._pillar-message-assistant ul {\n  list-style-type: disc;\n}\n\n._pillar-message-assistant ol {\n  list-style-type: decimal;\n}\n\n._pillar-message-assistant li {\n  margin-bottom: var(--pillar-spacing-xs);\n}\n\n._pillar-message-assistant code {\n  padding: 2px 6px;\n  font-size: var(--pillar-font-size-sm);\n  background: var(--pillar-bg-tertiary);\n  border-radius: var(--pillar-radius-sm);\n  font-family: var(--pillar-font-mono);\n  color: var(--pillar-text);\n}\n\n._pillar-message-assistant pre {\n  margin: var(--pillar-spacing-md) 0;\n  padding: var(--pillar-spacing-md) 14px;\n  background: var(--pillar-code-bg);\n  border-radius: var(--pillar-radius-lg);\n  overflow-x: auto;\n}\n\n._pillar-message-assistant pre code {\n  padding: 0;\n  background: none;\n  color: var(--pillar-code-text);\n  font-size: var(--pillar-font-size-sm);\n  line-height: 1.5;\n}\n\n._pillar-message-assistant a {\n  color: var(--pillar-primary);\n  text-decoration: none;\n}\n\n._pillar-message-assistant a:hover {\n  text-decoration: underline;\n}\n\n._pillar-message-assistant strong {\n  font-weight: 600;\n  color: var(--pillar-text);\n}\n\n._pillar-message-assistant em {\n  font-style: italic;\n}\n\n.pillar-message-assistant {}\n\n/* ============================================================================\n   Chat Sources\n   Internal: _pillar-chat-sources | Public: pillar-chat-sources\n   ============================================================================ */\n\n._pillar-chat-sources {\n  margin-top: var(--pillar-spacing-md);\n  padding-top: var(--pillar-spacing-md);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-sources-title {\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-source {\n  display: block;\n  padding: var(--pillar-spacing-sm) var(--pillar-spacing-md);\n  margin-bottom: 6px;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-radius: var(--pillar-radius-lg);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--pillar-transition-fast);\n}\n\n._pillar-chat-source:hover {\n  background: var(--pillar-primary-light-hover);\n}\n\n.pillar-chat-sources {}\n.pillar-chat-sources-title {}\n.pillar-chat-source {}\n\n/* ============================================================================\n   Chat Actions (Suggested action buttons)\n   Internal: _pillar-chat-actions | Public: pillar-chat-actions\n   ============================================================================ */\n\n._pillar-chat-actions {\n  margin-top: var(--pillar-spacing-md);\n  padding-top: var(--pillar-spacing-md);\n  border-top: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-actions-title {\n  font-size: var(--pillar-font-size-xs);\n  font-weight: 500;\n  color: var(--pillar-text-muted);\n  margin-bottom: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-actions-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pillar-spacing-sm);\n}\n\n/* Task buttons should wrap horizontally */\n._pillar-chat-actions-buttons > ._pillar-task-button-group {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pillar-spacing-sm);\n}\n\n/* Confirm cards take full width */\n._pillar-chat-actions-buttons > .pillar-confirm-card-wrapper {\n  width: 100%;\n}\n\n.pillar-chat-actions {}\n.pillar-chat-actions-title {}\n.pillar-chat-actions-buttons {}\n\n/* ============================================================================\n   Chat View Input Area - Cursor-style design\n   ============================================================================ */\n\n._pillar-chat-view-input-area {\n  flex-shrink: 0;\n  padding: var(--pillar-spacing-md) var(--pillar-spacing-lg);\n  border-top: 1px solid var(--pillar-border);\n  background: var(--pillar-bg);\n}\n\n._pillar-chat-view-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-chat-view-input {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-chat-view-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-chat-view-input-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n._pillar-chat-view-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-tertiary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-send-btn:hover:not(:disabled) {\n  color: #ffffff;\n  background: var(--pillar-primary);\n}\n\n._pillar-chat-view-send-btn:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n._pillar-chat-view-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-chat-view-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-chat-view-input-area {}\n.pillar-chat-view-input-wrapper {}\n.pillar-chat-view-input {}\n.pillar-chat-view-send-btn {}\n.pillar-chat-view-input-footer {}\n.pillar-chat-view-new-chat-btn {}\n\n/* New chat button styling */\n._pillar-chat-view-input-footer {\n  display: flex;\n  justify-content: center;\n  margin-top: var(--pillar-spacing-sm);\n}\n\n._pillar-chat-view-new-chat-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  font-family: var(--pillar-font-family);\n  color: var(--pillar-text-muted);\n  background: transparent;\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-lg);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-chat-view-new-chat-btn:hover {\n  color: var(--pillar-text);\n  background: var(--pillar-bg-secondary);\n  border-color: var(--pillar-text-muted);\n}\n\n._pillar-chat-view-new-chat-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-chat-view-new-chat-icon svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Scrollbar for chat view */\n._pillar-chat-view-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-track {\n  background: var(--pillar-scrollbar-track);\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb {\n  background: var(--pillar-scrollbar-thumb);\n  border-radius: 3px;\n}\n\n._pillar-chat-view-messages::-webkit-scrollbar-thumb:hover {\n  background: var(--pillar-scrollbar-thumb-hover);\n}\n\n/* ============================================================================\n   Chat Image Upload\n   ============================================================================ */\n\n._pillar-chat-view-input-area--dragging {\n  position: relative;\n  background: rgba(37, 99, 235, 0.05);\n}\n\n._pillar-chat-drop-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(37, 99, 235, 0.1);\n  border: 2px dashed var(--pillar-primary);\n  border-radius: var(--pillar-radius-lg);\n  color: var(--pillar-primary);\n  font-size: var(--pillar-font-size-sm);\n  font-weight: 500;\n  z-index: 10;\n  pointer-events: none;\n}\n\n._pillar-chat-drop-overlay svg {\n  width: 24px;\n  height: 24px;\n}\n\n._pillar-chat-images-preview {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 12px 12px 4px 12px;\n}\n\n._pillar-chat-image-thumb {\n  position: relative;\n  width: 56px;\n  height: 56px;\n  border-radius: var(--pillar-radius-md);\n  overflow: hidden;\n  border: 1px solid var(--pillar-border);\n}\n\n._pillar-chat-image-thumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n._pillar-chat-image-loading {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-chat-image-error {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(239, 68, 68, 0.3);\n  color: #dc2626;\n  font-weight: bold;\n  font-size: 14px;\n}\n\n._pillar-chat-image-remove {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n  border: none;\n  border-radius: 50%;\n  color: white;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-thumb:hover ._pillar-chat-image-remove {\n  opacity: 1;\n}\n\n._pillar-chat-image-remove svg {\n  width: 10px;\n  height: 10px;\n}\n\n._pillar-chat-image-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  color: var(--pillar-text-muted);\n  background: transparent;\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: color var(--pillar-transition-fast);\n}\n\n._pillar-chat-image-btn:hover:not(:disabled) {\n  color: var(--pillar-text);\n}\n\n._pillar-chat-image-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n._pillar-chat-image-btn svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-chat-images-preview {}\n.pillar-chat-image-thumb {}\n.pillar-chat-image-remove {}\n.pillar-chat-image-btn {}\n.pillar-chat-drop-overlay {}\n\n/* ============================================================================\n   Legacy Class Mappings (for backward compatibility)\n   Maps old BEM-style class names to new internal classes\n   ============================================================================ */\n\n.pillar-panel { }\n.pillar-panel--right { }\n.pillar-panel--left { }\n.pillar-panel--open { }\n.pillar-panel--manual { }\n.pillar-panel-root { }\n.pillar-panel-ui { }\n.pillar-panel__header { }\n.pillar-panel__header-left { }\n.pillar-panel__back-btn { }\n.pillar-panel__home-btn { }\n.pillar-panel__title { }\n.pillar-panel__close-btn { }\n.pillar-panel__content { }\n.pillar-search { }\n.pillar-search__input { }\n.pillar-search__icon { }\n.pillar-category-card { }\n.pillar-category-card__icon { }\n.pillar-category-card__content { }\n.pillar-category-card__title { }\n.pillar-category-card__description { }\n.pillar-category-card__count { }\n.pillar-article-card { }\n.pillar-article-card__title { }\n.pillar-article-card__excerpt { }\n.pillar-article-card__meta { }\n.pillar-article { }\n.pillar-article__title { }\n.pillar-article__content { }\n.pillar-category-header { }\n.pillar-category-header__title { }\n.pillar-category-header__description { }\n.pillar-chat-input-container { }\n.pillar-chat-input-container--expanded { }\n.pillar-chat-input__messages { }\n.pillar-chat-input__message { }\n.pillar-chat-input__message--user { }\n.pillar-chat-input__message--assistant { }\n.pillar-chat-input__message-content { }\n.pillar-chat-input__sources { }\n.pillar-chat-input__sources-title { }\n.pillar-chat-input__source { }\n.pillar-chat-input__area { }\n.pillar-chat-input__wrapper { }\n.pillar-chat-input__input { }\n.pillar-chat-input__send-btn { }\n.pillar-loading { }\n.pillar-loading__spinner { }\n.pillar-empty { }\n.pillar-empty__icon { }\n.pillar-empty__title { }\n.pillar-empty__description { }\n.pillar-section-title { }\n.pillar-related-articles { }\n.pillar-home-view { }\n.pillar-chat-view { }\n.pillar-chat-view__messages { }\n.pillar-chat-view__welcome { }\n.pillar-chat-view__welcome-icon { }\n.pillar-chat-view__welcome-title { }\n.pillar-chat-view__welcome-text { }\n.pillar-chat-view__message { }\n.pillar-chat-view__message--user { }\n.pillar-chat-view__message--assistant { }\n.pillar-chat-view__user-bubble { }\n.pillar-chat-view__ai-response { }\n.pillar-chat-view__sources { }\n.pillar-chat-view__sources-title { }\n.pillar-chat-view__source { }\n.pillar-chat-view__input-area { }\n.pillar-chat-view__input-wrapper { }\n.pillar-chat-view__input { }\n.pillar-chat-view__send-btn { }\n.pillar-backdrop { }\n.pillar-backdrop--visible { }\n\n/* ============================================================================\n   Task Button Component\n   ============================================================================ */\n\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\n/* ============================================================================\n   Feedback Icons\n   Internal: _pillar-feedback | Public: pillar-feedback\n   ============================================================================ */\n\n._pillar-message-assistant-wrapper {\n  position: relative;\n}\n\n._pillar-feedback-icons {\n  display: flex;\n  gap: 4px;\n  margin-top: var(--pillar-spacing-sm);\n  justify-content: flex-end;\n}\n\n._pillar-feedback-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  color: var(--pillar-text-placeholder);\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-feedback-btn:hover {\n  color: var(--pillar-text-muted);\n  background: var(--pillar-bg-secondary);\n  border-color: var(--pillar-border);\n}\n\n._pillar-feedback-btn--active {\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light);\n  border-color: var(--pillar-primary);\n}\n\n._pillar-feedback-btn--active:hover {\n  color: var(--pillar-primary);\n  background: var(--pillar-primary-light-hover);\n}\n\n._pillar-feedback-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-feedback-icons {}\n.pillar-feedback-btn {}\n.pillar-message-assistant-wrapper {}\n\n/* ============================================================================\n   Action Status Indicators\n   Internal: _pillar-action-status | Public: pillar-action-status\n   Shows completion status for auto-run actions (checkmark, X, or spinner)\n   ============================================================================ */\n\n._pillar-message-assistant-content {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n._pillar-action-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n._pillar-action-status-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n\n._pillar-action-status-indicator svg {\n  width: 16px;\n  height: 16px;\n}\n\n._pillar-action-status-indicator--success {\n  color: #22c55e;\n}\n\n._pillar-action-status-indicator--failed {\n  color: #ef4444;\n}\n\n._pillar-action-status-indicator--pending {\n  color: var(--pillar-text-muted);\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\n.pillar-action-status {}\n.pillar-action-status-indicator {}\n.pillar-message-assistant-content {}\n\n/* ============================================================================\n   Context Tags\n   Internal: _pillar-context-tag | Public: pillar-context-tag\n   Removable chips for user context items (highlighted text, etc.)\n   ============================================================================ */\n\n._pillar-context-tag-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 14px 0;\n}\n\n._pillar-context-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  max-width: 200px;\n  padding: 4px 6px 4px 8px;\n  font-size: var(--pillar-font-size-sm);\n  color: var(--pillar-text-secondary);\n  background: var(--pillar-bg-tertiary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-md);\n  cursor: default;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag:hover {\n  background: var(--pillar-bg-secondary);\n  border-color: var(--pillar-text-muted);\n}\n\n._pillar-context-tag-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  color: var(--pillar-primary);\n}\n\n._pillar-context-tag-icon svg {\n  width: 12px;\n  height: 12px;\n}\n\n._pillar-context-tag-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.3;\n}\n\n._pillar-context-tag-remove {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  margin-left: 2px;\n  color: var(--pillar-text-placeholder);\n  background: transparent;\n  border: none;\n  border-radius: var(--pillar-radius-sm);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-context-tag-remove:hover {\n  color: var(--pillar-text);\n  background: var(--pillar-border);\n}\n\n._pillar-context-tag-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.pillar-context-tag-list {}\n.pillar-context-tag {}\n.pillar-context-tag-icon {}\n.pillar-context-tag-label {}\n.pillar-context-tag-remove {}\n\n/* Context tags inside user message bubbles need inverted colors */\n._pillar-message-user ._pillar-context-tag-list {\n  padding: 0 0 8px 0;\n}\n\n._pillar-message-user ._pillar-context-tag {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag:hover {\n  background: rgba(255, 255, 255, 0.3);\n  border-color: rgba(255, 255, 255, 0.4);\n}\n\n._pillar-message-user ._pillar-context-tag-icon {\n  color: #ffffff;\n}\n\n._pillar-message-user ._pillar-context-tag-label {\n  color: #ffffff;\n}\n\n/* ============================================================================\n   Unified Chat Input\n   Internal: _pillar-unified-input | Public: pillar-unified-input\n   Reusable input component with context tag support\n   ============================================================================ */\n\n._pillar-unified-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  background: var(--pillar-bg-secondary);\n  border: 1px solid var(--pillar-border);\n  border-radius: var(--pillar-radius-xl);\n  transition: border-color var(--pillar-transition-fast), box-shadow var(--pillar-transition-fast);\n}\n\n._pillar-unified-input-wrapper:focus-within {\n  border-color: var(--pillar-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n._pillar-unified-input {\n  display: block;\n  width: 100%;\n  padding: 12px 14px 8px;\n  font-size: var(--pillar-font-size-base);\n  font-family: var(--pillar-font-family);\n  line-height: 1.5;\n  color: var(--pillar-text);\n  background: transparent;\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: hidden;\n  box-sizing: border-box;\n}\n\n._pillar-unified-input::placeholder {\n  color: var(--pillar-text-placeholder);\n}\n\n._pillar-unified-input:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n._pillar-unified-input-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 8px 10px;\n}\n\n._pillar-unified-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  color: #ffffff;\n  background: var(--pillar-primary);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-unified-send-btn:hover:not(:disabled) {\n  background: var(--pillar-primary-hover);\n}\n\n._pillar-unified-send-btn:disabled {\n  color: var(--pillar-text-placeholder);\n  background: var(--pillar-bg-tertiary);\n  cursor: not-allowed;\n}\n\n._pillar-unified-send-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.pillar-unified-input-wrapper {}\n.pillar-unified-input {}\n.pillar-unified-input-row {}\n.pillar-unified-send-btn {}\n";

package/dist/components/Plan/InlinePlanView.d.ts

@@ -0,0 +1,24 @@
+/**
+ * InlinePlanView Component
+ *
+ * A compact inline version of the plan display for embedding
+ * within chat bubbles when plans are short (≤3 steps).
+ *
+ * This provides a more integrated experience where the plan
+ * appears as part of the conversation flow rather than a
+ * separate overlay.
+ */
+import { h } from 'preact';
+import type { ExecutionPlan } from '../../core/plan';
+/** Maximum steps before using full PlanView instead of inline */
+export declare const INLINE_PLAN_MAX_STEPS = 3;
+interface InlinePlanViewProps {
+    plan: ExecutionPlan;
+}
+export declare function InlinePlanView({ plan }: InlinePlanViewProps): h.JSX.Element;
+/**
+ * Check if a plan should be displayed inline.
+ */
+export declare function shouldDisplayInline(plan: ExecutionPlan): boolean;
+export declare const INLINE_PLAN_STYLES = "\n/* Inline Plan Container */\n.pillar-inline-plan {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 8px 0;\n}\n\n/* Steps list */\n.pillar-inline-plan__steps {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Individual step */\n.pillar-inline-plan__step {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  font-size: 13px;\n  background: transparent;\n  transition: all 0.15s ease;\n}\n\n.pillar-inline-plan__step-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-inline-plan__step-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.pillar-inline-plan__step-text {\n  color: var(--pillar-text-primary, #374151);\n  line-height: 1.4;\n}\n\n.pillar-inline-plan__step-instruction {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.pillar-inline-plan__action-badge {\n  display: inline-block;\n  padding: 1px 5px;\n  font-size: 9px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: var(--pillar-warning, #f59e0b);\n  color: white;\n  border-radius: 3px;\n  flex-shrink: 0;\n}\n\n.pillar-inline-plan__instruction-text {\n  font-size: 11px;\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step-actions {\n  display: flex;\n  gap: 4px;\n}\n\n/* Step states */\n.pillar-inline-plan__step--pending {\n  opacity: 0.6;\n}\n\n.pillar-inline-plan__step--ready .pillar-inline-plan__step-icon {\n  color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--awaiting_confirmation {\n  background: var(--pillar-bg-warning-subtle, rgba(251, 191, 36, 0.1));\n}\n\n.pillar-inline-plan__step--awaiting_confirmation .pillar-inline-plan__step-icon {\n  color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-inline-plan__step--executing .pillar-inline-plan__step-icon,\n.pillar-inline-plan__step--awaiting_result .pillar-inline-plan__step-icon {\n  color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-icon {\n  color: var(--pillar-success, #059669);\n}\n\n.pillar-inline-plan__step--completed .pillar-inline-plan__step-text {\n  text-decoration: line-through;\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-inline-plan__step--skipped {\n  opacity: 0.5;\n}\n\n.pillar-inline-plan__step--skipped .pillar-inline-plan__step-text {\n  text-decoration: line-through;\n}\n\n.pillar-inline-plan__step--failed {\n  background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__step--failed .pillar-inline-plan__step-icon {\n  color: var(--pillar-danger, #dc2626);\n}\n\n/* Buttons */\n.pillar-inline-plan__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 3px 8px;\n  font-size: 11px;\n  font-weight: 500;\n  font-family: inherit;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n\n.pillar-inline-plan__btn--confirm {\n  background: var(--pillar-success, #059669);\n  color: #ffffff;\n  min-width: 24px;\n}\n\n.pillar-inline-plan__btn--confirm:hover {\n  background: var(--pillar-success-hover, #047857);\n}\n\n.pillar-inline-plan__btn--skip {\n  background: transparent;\n  color: var(--pillar-text-secondary, #6b7280);\n  border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--skip:hover {\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n.pillar-inline-plan__btn--retry {\n  background: var(--pillar-danger, #dc2626);\n  color: #ffffff;\n}\n\n.pillar-inline-plan__btn--retry:hover {\n  background: var(--pillar-danger-hover, #b91c1c);\n}\n\n.pillar-inline-plan__btn--done {\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n}\n\n.pillar-inline-plan__btn--done:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--start {\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n}\n\n.pillar-inline-plan__btn--start:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n.pillar-inline-plan__btn--cancel {\n  background: transparent;\n  color: var(--pillar-text-secondary, #6b7280);\n  border: 1px solid var(--pillar-border, #d1d5db);\n}\n\n.pillar-inline-plan__btn--cancel:hover {\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n  color: var(--pillar-danger, #dc2626);\n  border-color: var(--pillar-danger, #dc2626);\n}\n\n/* Footer */\n.pillar-inline-plan__footer {\n  display: flex;\n  gap: 8px;\n  padding-top: 6px;\n}\n\n/* Status messages */\n.pillar-inline-plan__status {\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n.pillar-inline-plan__status--success {\n  color: var(--pillar-success, #059669);\n  background: var(--pillar-bg-success-subtle, rgba(5, 150, 105, 0.1));\n}\n\n.pillar-inline-plan__status--error {\n  color: var(--pillar-danger, #dc2626);\n  background: var(--pillar-bg-danger-subtle, rgba(220, 38, 38, 0.1));\n}\n\n.pillar-inline-plan__status--cancelled {\n  color: var(--pillar-text-tertiary, #9ca3af);\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n}\n\n/* Spinner animation */\n@keyframes pillar-inline-plan-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.pillar-inline-plan__spinner {\n  animation: pillar-inline-plan-spin 1s linear infinite;\n}\n";
+export {};

package/dist/components/Plan/PlanStepItem.d.ts

@@ -0,0 +1,18 @@
+/**
+ * PlanStepItem Component
+ *
+ * Renders a single step in an execution plan.
+ * Shows status icon, description, and action buttons for confirmation/skip.
+ */
+import { h } from 'preact';
+import type { ExecutionStep } from '../../core/plan';
+interface PlanStepItemProps {
+    step: ExecutionStep;
+    onConfirm: (stepId: string, data?: Record<string, unknown>) => void;
+    onSkip: (stepId: string) => void;
+    onRetry?: (stepId: string) => void;
+    onDone?: (stepId: string) => void;
+}
+export declare function PlanStepItem({ step, onConfirm, onSkip, onRetry, onDone }: PlanStepItemProps): h.JSX.Element;
+export declare const PLAN_STEP_STYLES = "\n/* Individual Step */\n.pillar-plan-step {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  background: var(--pillar-bg-primary, #ffffff);\n  border: 1px solid var(--pillar-border, #e5e7eb);\n  border-radius: 8px;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan-step__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n.pillar-plan-step__content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.pillar-plan-step__description {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--pillar-text-primary, #374151);\n  line-height: 1.4;\n}\n\n.pillar-plan-step__status-text {\n  font-size: 12px;\n  color: var(--pillar-primary, #2563eb);\n  font-style: italic;\n}\n\n.pillar-plan-step__error {\n  font-size: 12px;\n  color: var(--pillar-danger, #dc2626);\n}\n\n.pillar-plan-step__actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 4px;\n}\n\n/* Step States */\n.pillar-plan-step--pending {\n  opacity: 0.6;\n}\n\n.pillar-plan-step--ready {\n  background: var(--pillar-bg-info-subtle, #eff6ff);\n  border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--ready .pillar-plan-step__icon {\n  color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--awaiting_confirmation {\n  background: var(--pillar-bg-warning-subtle, #fef3c7);\n  border-color: var(--pillar-warning, #fcd34d);\n}\n\n.pillar-plan-step--awaiting_confirmation .pillar-plan-step__icon {\n  color: var(--pillar-warning-dark, #d97706);\n}\n\n.pillar-plan-step--executing,\n.pillar-plan-step--awaiting_result {\n  background: var(--pillar-bg-info-subtle, #eff6ff);\n  border-color: var(--pillar-info, #93c5fd);\n}\n\n.pillar-plan-step--executing .pillar-plan-step__icon,\n.pillar-plan-step--awaiting_result .pillar-plan-step__icon {\n  color: var(--pillar-primary, #2563eb);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__icon {\n  color: var(--pillar-success, #059669);\n}\n\n.pillar-plan-step--completed .pillar-plan-step__description {\n  text-decoration: line-through;\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan-step--skipped {\n  opacity: 0.5;\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__icon {\n  color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--skipped .pillar-plan-step__description {\n  text-decoration: line-through;\n  color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step--failed {\n  background: var(--pillar-bg-danger-subtle, #fef2f2);\n  border-color: var(--pillar-danger-light, #fca5a5);\n}\n\n.pillar-plan-step--failed .pillar-plan-step__icon {\n  color: var(--pillar-danger, #dc2626);\n}\n\n/* Error Container */\n.pillar-plan-step__error-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.pillar-plan-step__retry-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-top: 2px;\n}\n\n.pillar-plan-step__retry-count {\n  font-size: 11px;\n  color: var(--pillar-text-tertiary, #9ca3af);\n}\n\n.pillar-plan-step__retry-exhausted {\n  font-size: 11px;\n  color: var(--pillar-text-tertiary, #9ca3af);\n  font-style: italic;\n  margin-top: 2px;\n}\n\n/* Retry Button */\n.pillar-plan-step__retry-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: inherit;\n  background: var(--pillar-danger, #dc2626);\n  color: #ffffff;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan-step__retry-btn:hover {\n  background: var(--pillar-danger-hover, #b91c1c);\n}\n\n/* Confirm Button */\n.pillar-plan-step__confirm-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan-step__confirm-btn:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Skip Button */\n.pillar-plan-step__skip-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  background: transparent;\n  color: var(--pillar-text-secondary, #6b7280);\n  border: 1px solid var(--pillar-border, #d1d5db);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan-step__skip-btn:hover {\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n  color: var(--pillar-text-primary, #374151);\n}\n\n/* Awaiting Result Container */\n.pillar-plan-step__awaiting-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.pillar-plan-step__instruction-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.pillar-plan-step__action-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  background: var(--pillar-warning, #f59e0b);\n  color: white;\n  border-radius: 3px;\n  flex-shrink: 0;\n}\n\n.pillar-plan-step__instruction {\n  font-size: 12px;\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n/* Done Button */\n.pillar-plan-step__done-btn {\n  display: inline-flex;\n  align-items: center;\n  align-self: flex-start;\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan-step__done-btn:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Spinner Animation for Executing Step */\n@keyframes pillar-plan-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.pillar-plan-step__spinner {\n  animation: pillar-plan-spin 1s linear infinite;\n}\n";
+export {};

package/dist/components/Plan/PlanView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * PlanView Component
+ *
+ * Renders an active execution plan as an interactive to-do list.
+ * Shows plan goal, progress, step list with status indicators,
+ * and action buttons (Start/Cancel).
+ */
+import { h } from 'preact';
+export declare function PlanView(): h.JSX.Element | null;
+export declare const PLAN_STYLES = "\n/* Plan Container */\n.pillar-plan {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  background: var(--pillar-bg-secondary, #f9fafb);\n  border: 1px solid var(--pillar-border, #e5e7eb);\n  border-radius: 12px;\n  margin: 12px 0;\n}\n\n/* Header */\n.pillar-plan__header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.pillar-plan__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--pillar-text-secondary, #6b7280);\n}\n\n.pillar-plan__title {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--pillar-text-primary, #1a1a1a);\n  line-height: 1.4;\n}\n\n.pillar-plan__progress {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--pillar-text-secondary, #6b7280);\n  padding: 2px 8px;\n  background: var(--pillar-bg-tertiary, #e5e7eb);\n  border-radius: 10px;\n}\n\n/* Progress Bar */\n.pillar-plan__progress-bar {\n  height: 4px;\n  background: var(--pillar-bg-tertiary, #e5e7eb);\n  border-radius: 2px;\n  overflow: hidden;\n}\n\n.pillar-plan__progress-fill {\n  height: 100%;\n  background: var(--pillar-primary, #2563eb);\n  border-radius: 2px;\n  transition: width 0.3s ease;\n}\n\n/* Steps List */\n.pillar-plan__steps {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Footer */\n.pillar-plan__footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--pillar-border, #e5e7eb);\n}\n\n/* Start Button */\n.pillar-plan__start-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  font-family: inherit;\n  background: var(--pillar-primary, #2563eb);\n  color: #ffffff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan__start-btn:hover {\n  background: var(--pillar-primary-hover, #1d4ed8);\n}\n\n/* Cancel Button */\n.pillar-plan__cancel-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  background: transparent;\n  color: var(--pillar-text-secondary, #6b7280);\n  border: 1px solid var(--pillar-border, #d1d5db);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.pillar-plan__cancel-btn:hover {\n  background: var(--pillar-bg-tertiary, #f3f4f6);\n  color: var(--pillar-danger, #dc2626);\n  border-color: var(--pillar-danger, #dc2626);\n}\n";

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

@@ -0,0 +1,8 @@
+/**
+ * Plan Components
+ *
+ * Components for rendering multi-step execution plans.
+ */
+export { PlanView, PLAN_STYLES } from './PlanView';
+export { PlanStepItem, PLAN_STEP_STYLES } from './PlanStepItem';
+export { InlinePlanView, INLINE_PLAN_STYLES, INLINE_PLAN_MAX_STEPS, shouldDisplayInline, } from './InlinePlanView';

package/dist/components/TextSelection/TextSelectionManager.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Text Selection Manager
+ * Detects text selection and shows "Ask AI" popover
+ */
+import type { EventEmitter } from '../../core/events';
+import type { ResolvedConfig } from '../../core/config';
+export declare class TextSelectionManager {
+    private config;
+    private events;
+    private openPanel;
+    private container;
+    private isVisible;
+    private currentSelection;
+    private stylesInjected;
+    constructor(config: ResolvedConfig, events: EventEmitter, openPanel: () => void);
+    /**
+     * Initialize the text selection manager
+     */
+    init(): void;
+    /**
+     * Destroy the text selection manager
+     */
+    destroy(): void;
+    private bindEvents;
+    private unbindEvents;
+    private handleMouseUp;
+    private handleMouseDown;
+    private handleKeyDown;
+    private handleScroll;
+    private checkSelection;
+    private showPopover;
+    private hidePopover;
+    private handlePopoverClick;
+}

package/dist/components/TextSelection/TextSelectionPopover.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Text Selection Popover Component
+ * Shows "Ask AI" button near selected text
+ */
+import { h } from 'preact';
+interface TextSelectionPopoverProps {
+    label: string;
+    x: number;
+    y: number;
+    isVisible: boolean;
+    onClick: () => void;
+}
+export declare function TextSelectionPopover({ label, x, y, isVisible, onClick, }: TextSelectionPopoverProps): h.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+/**
+ * Text Selection Components
+ */
+export { TextSelectionManager } from './TextSelectionManager';
+export { TextSelectionPopover } from './TextSelectionPopover';
+export { TEXT_SELECTION_STYLES } from './styles';

package/dist/components/TextSelection/styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Text Selection Popover CSS Styles
+ * Injected into the document head
+ */
+export declare const TEXT_SELECTION_STYLES = "\n/* Pillar Text Selection Popover Styles */\n.pillar-text-selection-popover {\n  position: absolute;\n  z-index: 99999;\n  padding: 6px 12px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  color: #ffffff;\n  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);\n  pointer-events: auto;\n  opacity: 0;\n  transform: translateY(4px) scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease;\n  cursor: pointer;\n  user-select: none;\n}\n\n.pillar-text-selection-popover.pillar-text-selection-popover--visible {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.pillar-text-selection-popover:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.pillar-text-selection-popover:active {\n  transform: translateY(0) scale(0.98);\n}\n\n.pillar-text-selection-popover__content {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.pillar-text-selection-popover__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n}\n\n.pillar-text-selection-popover__icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Arrow pointing down to selection */\n.pillar-text-selection-popover__arrow {\n  position: absolute;\n  bottom: -5px;\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n  width: 10px;\n  height: 10px;\n  background: linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%);\n}\n\n.pillar-text-selection-popover--below .pillar-text-selection-popover__arrow {\n  bottom: auto;\n  top: -5px;\n  background: linear-gradient(135deg, #6366f1 0%, #6366f1 100%);\n}\n";

package/dist/components/Tooltips/Tooltip.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Tooltip Component
+ * Individual tooltip rendered to document body
+ */
+import type { TooltipData } from '../../api/client';
+import type { TooltipTrigger, TooltipPosition } from '../../core/config';
+export interface TooltipOptions {
+    trigger: TooltipTrigger;
+    position: TooltipPosition;
+    onLearnMore?: (articleSlug: string) => void;
+    onShow?: () => void;
+    onHide?: () => void;
+}
+/**
+ * Tooltip class that manages a single tooltip instance
+ * Uses Preact for rendering but maintains imperative control
+ */
+export declare class Tooltip {
+    private id;
+    private data;
+    private anchor;
+    private options;
+    private container;
+    private iconElement;
+    private isVisible;
+    private hideTimeout;
+    constructor(data: TooltipData, anchor: HTMLElement, options: TooltipOptions);
+    init(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    destroy(): void;
+    private renderTooltip;
+    private createIcon;
+    private bindEvents;
+    private unbindEvents;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleTooltipMouseEnter;
+    private handleTooltipMouseLeave;
+    private handleClick;
+    private handleDocumentClick;
+    private handleFocus;
+    private handleBlur;
+    private handleKeyDown;
+}

package/dist/components/Tooltips/TooltipManager.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Tooltip Manager
+ * Scans DOM for tooltip elements and manages their lifecycle
+ */
+import type { EventEmitter } from '../../core/events';
+import type { ResolvedConfig } from '../../core/config';
+import type { APIClient } from '../../api/client';
+export declare class TooltipManager {
+    private config;
+    private api;
+    private events;
+    private tooltips;
+    private tooltipData;
+    private observer;
+    private stylesInjected;
+    constructor(config: ResolvedConfig, api: APIClient, events: EventEmitter);
+    /**
+     * Initialize the tooltip manager
+     */
+    init(): Promise<void>;
+    /**
+     * Scan DOM for tooltip elements and initialize them
+     */
+    scan(): Promise<void>;
+    /**
+     * Show a specific tooltip
+     */
+    show(tooltipId: string): void;
+    /**
+     * Hide a specific tooltip
+     */
+    hide(tooltipId: string): void;
+    /**
+     * Destroy the tooltip manager
+     */
+    destroy(): void;
+    private createTooltip;
+    private setupObserver;
+    private handleRemovedElement;
+    private getElementKey;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Tooltips Index
+ */
+export { Tooltip } from './Tooltip';
+export { TooltipManager } from './TooltipManager';
+export { TOOLTIP_STYLES } from './styles';

package/dist/components/Tooltips/styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Tooltip CSS Styles
+ * Injected into the document head
+ */
+export declare const TOOLTIP_STYLES = "\n/* Pillar Tooltip Styles */\n.pillar-tooltip {\n  position: absolute;\n  z-index: 99999;\n  max-width: 320px;\n  padding: 12px 16px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  background: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);\n  pointer-events: auto;\n  opacity: 0;\n  transform: scale(0.95);\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.pillar-tooltip.pillar-tooltip--visible {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.pillar-tooltip__content {\n  margin: 0;\n}\n\n.pillar-tooltip__content p {\n  margin: 0 0 8px;\n}\n\n.pillar-tooltip__content p:last-child {\n  margin-bottom: 0;\n}\n\n.pillar-tooltip__content a {\n  color: #2563eb;\n  text-decoration: none;\n}\n\n.pillar-tooltip__content a:hover {\n  text-decoration: underline;\n}\n\n.pillar-tooltip__learn-more {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 12px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #2563eb;\n  background: #eff6ff;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n\n.pillar-tooltip__learn-more:hover {\n  background: #dbeafe;\n}\n\n.pillar-tooltip__learn-more svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Arrow */\n.pillar-tooltip__arrow {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: #ffffff;\n  transform: rotate(45deg);\n  box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n.pillar-tooltip--top .pillar-tooltip__arrow {\n  bottom: -6px;\n  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n.pillar-tooltip--bottom .pillar-tooltip__arrow {\n  top: -6px;\n}\n\n.pillar-tooltip--left .pillar-tooltip__arrow {\n  right: -6px;\n  box-shadow: 1px -1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n.pillar-tooltip--right .pillar-tooltip__arrow {\n  left: -6px;\n  box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.05);\n}\n\n/* Tooltip Icon (for icon trigger) */\n.pillar-tooltip-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-left: 4px;\n  vertical-align: middle;\n  color: #6b7280;\n  cursor: help;\n  transition: color 0.15s ease;\n}\n\n.pillar-tooltip-icon:hover {\n  color: #2563eb;\n}\n\n.pillar-tooltip-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Close button */\n.pillar-tooltip__close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  color: #9ca3af;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n\n.pillar-tooltip__close:hover {\n  color: #1a1a1a;\n  background: #f3f4f6;\n}\n\n.pillar-tooltip__close svg {\n  width: 12px;\n  height: 12px;\n}\n";

package/dist/components/Views/ArticleChatView.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Article Chat View Component
+ * Combined view with full article content at top and chat messages below
+ */
+interface ArticleChatViewProps {
+    slug: string;
+}
+export declare function ArticleChatView({ slug }: ArticleChatViewProps): import("preact").JSX.Element;
+export {};

package/dist/components/Views/ArticleView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Article View Component
+ * Displays article content using TipTap for rendering
+ */
+import { h } from 'preact';
+interface ArticleViewProps {
+    slug: string;
+}
+export declare function ArticleView({ slug }: ArticleViewProps): h.JSX.Element;
+export {};

package/dist/components/Views/CategoryView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Category View Component
+ * Displays articles within a category
+ */
+import { h } from 'preact';
+import type { CategoryData } from '../../api/client';
+interface CategoryViewProps {
+    category: CategoryData;
+}
+export declare function CategoryView({ category }: CategoryViewProps): h.JSX.Element;
+export {};

package/dist/components/Views/ChatView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Chat View Component
+ * Standalone full-screen chat view (used when starting chat from home/categories)
+ */
+export declare function ChatView(): import("preact").JSX.Element;

package/dist/components/Views/DeveloperView.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Developer View Component
+ * Dev mode view for testing action handlers
+ */
+import { h } from 'preact';
+export declare function DeveloperView(): h.JSX.Element;

package/dist/components/Views/HomeView.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Home View Component
+ * Default panel view with suggested questions and chat input
+ */
+export declare function HomeView(): import("preact").JSX.Element;

package/dist/components/Views/SearchView.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Search View Component
+ * Displays search input and results
+ */
+import { h } from 'preact';
+interface SearchViewProps {
+    initialQuery?: string;
+}
+export declare function SearchView({ initialQuery }: SearchViewProps): h.JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+/**
+ * Views Index
+ */
+export { HomeView } from './HomeView';
+export { ChatView } from './ChatView';

package/dist/components/context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pillar Context
+ * Provides API client and event emitter to components
+ */
+import { h, type ComponentChildren } from 'preact';
+import type { APIClient } from '../api/client';
+import type { EventEmitter } from '../core/events';
+interface PillarContextValue {
+    api: APIClient;
+    events: EventEmitter;
+}
+interface PillarProviderProps {
+    api: APIClient;
+    events: EventEmitter;
+    children: ComponentChildren;
+}
+export declare function PillarProvider({ api, events, children }: PillarProviderProps): h.JSX.Element;
+export declare function usePillar(): PillarContextValue;
+export declare function useAPI(): APIClient;
+export declare function useEvents(): EventEmitter;
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Components Index
+ */
+export { Panel, PanelContent, Header, ChatInput, PANEL_STYLES } from './Panel';
+export { Tooltip, TooltipManager, TOOLTIP_STYLES } from './Tooltips';
+export { FloatingButton } from './Button';
+export { PillarProvider, usePillar, useAPI, useEvents } from './context';
+export * from './shared';
+export * from './Views';

package/dist/components/shared/ArticleCard.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Article Card Component
+ * Displays an article list item
+ */
+import { h } from 'preact';
+import type { ArticleSummary } from '../../api/client';
+interface ArticleCardProps {
+    article: ArticleSummary;
+    onClick: () => void;
+}
+export declare function ArticleCard({ article, onClick }: ArticleCardProps): h.JSX.Element;
+interface ArticleListProps {
+    articles: ArticleSummary[];
+    onArticleClick: (article: ArticleSummary) => void;
+}
+export declare function ArticleList({ articles, onArticleClick }: ArticleListProps): h.JSX.Element;
+export {};

package/dist/components/shared/CategoryCard.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Category Card Component
+ * Displays a category list item
+ */
+import { h } from 'preact';
+import type { CategoryData } from '../../api/client';
+interface CategoryCardProps {
+    category: CategoryData;
+    onClick: () => void;
+}
+export declare function CategoryCard({ category, onClick }: CategoryCardProps): h.JSX.Element;
+interface CategoryListProps {
+    categories: CategoryData[];
+    onCategoryClick: (category: CategoryData) => void;
+}
+export declare function CategoryList({ categories, onCategoryClick }: CategoryListProps): h.JSX.Element;
+export {};

package/dist/components/shared/Empty.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Empty State Component
+ * Displays an empty state message
+ */
+import { h } from 'preact';
+interface EmptyProps {
+    title?: string;
+    description: string;
+}
+export declare function Empty({ title, description }: EmptyProps): h.JSX.Element;
+export {};

package/dist/components/shared/Loading.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Loading Component
+ * Displays a loading spinner
+ */
+import { h } from 'preact';
+export declare function Loading(): h.JSX.Element;

package/dist/components/shared/MessageInputArea.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Message Input Area Component
+ * Shared input component with image upload support
+ * Used by HomeView, ChatInput, and ChatView
+ */
+import { h } from 'preact';
+export interface MessageInputAreaProps {
+    /** Called when user submits a message */
+    onSubmit: (message: string) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the input is disabled (e.g., while loading) */
+    disabled?: boolean;
+    /** Optional ref to the textarea for external focus control */
+    inputRef?: preact.RefObject<HTMLTextAreaElement>;
+    /** Whether to show the container border (for standalone use) */
+    showBorder?: boolean;
+}
+export declare function MessageInputArea({ onSubmit, placeholder, disabled, inputRef: externalInputRef, showBorder, }: MessageInputAreaProps): h.JSX.Element;