@pillar-ai/sdk 0.1.19 → 0.1.22

package/dist/cli/sync.js

@@ -4,7 +4,6 @@
 import * as fs from "fs";
 import * as path from "path";
 import { execSync } from "child_process";
-import { pathToFileURL } from "url";
 var DEFAULT_API_URL = "https://help-api.trypillar.com";
 var LOCAL_API_URL = "http://localhost:8003";
 function parseArgs(args) {
@@ -26,14 +25,16 @@ function parseArgs(args) {
 }
 function printUsage() {
   console.log(`
-Pillar Action Sync CLI
+Pillar Tool Sync CLI
+
+Scans for usePillarTool/defineTool calls and syncs to the Pillar backend.
+Also supports legacy usePillarAction/defineAction calls.
 
 Usage:
-  npx pillar-sync --actions <path> [--local]
+  npx pillar-sync --scan <dir> [--local]
 
 Arguments:
-  --actions <path>   Path to your actions definition file (required)
-                     Supports .ts, .js, .mjs files
+  --scan <dir>       Directory to scan for usePillarTool/defineTool calls
   --local            Use localhost:8003 as the API URL (for local development)
   --help             Show this help message
 
@@ -46,157 +47,13 @@ Environment Variables:
   GIT_SHA            Git commit SHA for traceability
 
 Examples:
-  # Production
-  PILLAR_SLUG=my-app PILLAR_SECRET=xxx npx pillar-sync --actions ./lib/actions.ts
+  # Scan and sync tools
+  PILLAR_SLUG=my-app PILLAR_SECRET=xxx npx pillar-sync --scan ./src
 
   # Local development
-  PILLAR_SLUG=my-app PILLAR_SECRET=xxx npx pillar-sync --actions ./lib/actions.ts --local
+  PILLAR_SLUG=my-app PILLAR_SECRET=xxx npx pillar-sync --scan ./src --local
 `);
 }
-async function loadActions(actionsPath) {
-  const absolutePath = path.resolve(process.cwd(), actionsPath);
-  if (!fs.existsSync(absolutePath)) {
-    throw new Error(`Actions file not found: ${absolutePath}`);
-  }
-  const isTypeScript = absolutePath.endsWith(".ts") || absolutePath.endsWith(".tsx");
-  if (isTypeScript) {
-    try {
-      const tempDir = path.dirname(absolutePath);
-      const tempFile = path.join(tempDir, `.pillar-sync-temp-${Date.now()}.mjs`);
-      const importPath = absolutePath.replace(/\\/g, "/");
-      const extractScript = `import * as module from '${importPath}';
-
-// Resolve actions - tsx may wrap all exports in module.default
-function resolveActions(mod) {
-  // Direct named export
-  if (mod.actions && typeof mod.actions === 'object' && !mod.actions.default) {
-    return mod.actions;
-  }
-  // Default export is the actions object directly
-  if (mod.default && typeof mod.default === 'object') {
-    // Check if default is a module namespace (has nested default or actions)
-    if (mod.default.default && typeof mod.default.default === 'object') {
-      return mod.default.default;
-    }
-    if (mod.default.actions && typeof mod.default.actions === 'object') {
-      return mod.default.actions;
-    }
-    // default is the actions object itself
-    return mod.default;
-  }
-  return null;
-}
-
-const actions = resolveActions(module);
-const agentGuidance = module.agentGuidance || module.default?.agentGuidance;
-console.log(JSON.stringify({ actions, agentGuidance }));`;
-      fs.writeFileSync(tempFile, extractScript, "utf-8");
-      try {
-        const result = execSync(`npx tsx "${tempFile}"`, {
-          encoding: "utf-8",
-          cwd: process.cwd(),
-          stdio: ["pipe", "pipe", "pipe"]
-        });
-        const parsed = JSON.parse(result.trim());
-        const actions = parsed.actions;
-        const agentGuidance = parsed.agentGuidance;
-        if (!actions || typeof actions !== "object") {
-          throw new Error(
-            'Actions file must export an actions object as default or named export "actions"'
-          );
-        }
-        return { actions, agentGuidance };
-      } finally {
-        if (fs.existsSync(tempFile)) {
-          fs.unlinkSync(tempFile);
-        }
-      }
-    } catch (error) {
-      if (error instanceof Error && error.message.includes("tsx")) {
-        console.error("[pillar-sync] TypeScript files require tsx.");
-        console.error("[pillar-sync] Make sure tsx is installed: npm install -D tsx");
-        console.error("[pillar-sync] Then run: npx pillar-sync --actions ./actions.ts");
-      }
-      throw error;
-    }
-  }
-  const fileUrl = pathToFileURL(absolutePath).href;
-  try {
-    let resolveActions2 = function(mod) {
-      if (mod.actions && typeof mod.actions === "object" && !mod.actions.default) {
-        return mod.actions;
-      }
-      if (mod.default && typeof mod.default === "object") {
-        const defaultExport = mod.default;
-        if (defaultExport.default && typeof defaultExport.default === "object") {
-          return defaultExport.default;
-        }
-        if (defaultExport.actions && typeof defaultExport.actions === "object") {
-          return defaultExport.actions;
-        }
-        return defaultExport;
-      }
-      return null;
-    };
-    var resolveActions = resolveActions2;
-    const module = await import(fileUrl);
-    const actions = resolveActions2(module);
-    const agentGuidance = module.agentGuidance || module.default?.agentGuidance;
-    if (!actions || typeof actions !== "object") {
-      throw new Error(
-        'Actions file must export an actions object as default or named export "actions"'
-      );
-    }
-    return { actions, agentGuidance };
-  } catch (error) {
-    throw error;
-  }
-}
-function buildManifest(actions, platform, version, gitSha, agentGuidance) {
-  const entries = [];
-  for (const [name, definition] of Object.entries(actions)) {
-    const entry = {
-      name,
-      description: definition.description,
-      type: definition.type
-    };
-    if (definition.examples?.length)
-      entry.examples = definition.examples;
-    if (definition.path)
-      entry.path = definition.path;
-    if (definition.externalUrl)
-      entry.external_url = definition.externalUrl;
-    if (definition.autoRun)
-      entry.auto_run = definition.autoRun;
-    if (definition.autoComplete)
-      entry.auto_complete = definition.autoComplete;
-    if (definition.returns !== void 0) {
-      entry.returns_data = definition.returns;
-    } else if (definition.type === "query") {
-      entry.returns_data = true;
-    }
-    if (definition.dataSchema)
-      entry.data_schema = definition.dataSchema;
-    if (definition.defaultData)
-      entry.default_data = definition.defaultData;
-    if (definition.requiredContext)
-      entry.required_context = definition.requiredContext;
-    if (definition.parameterExamples?.length)
-      entry.parameter_examples = definition.parameterExamples;
-    entries.push(entry);
-  }
-  const manifest = {
-    platform,
-    version,
-    gitSha,
-    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    actions: entries
-  };
-  if (agentGuidance) {
-    manifest.agentGuidance = agentGuidance;
-  }
-  return manifest;
-}
 async function pollStatus(statusUrl, secret, maxWaitSeconds = 300) {
   const startTime = Date.now();
   let lastProgress = { processed: 0, total: 0 };
@@ -262,15 +119,244 @@ function getGitSha() {
     return void 0;
   }
 }
+function globFiles(dir, extensions) {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.name.startsWith(".") || entry.name === "node_modules" || entry.name === "dist" || entry.name === "build" || entry.name === ".next") {
+      continue;
+    }
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...globFiles(fullPath, extensions));
+    } else if (extensions.some((ext) => entry.name.endsWith(ext))) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+function evaluateNode(node, ts) {
+  const n = node;
+  if (ts.isStringLiteral(n)) {
+    return n.text;
+  }
+  if (ts.isNoSubstitutionTemplateLiteral(n)) {
+    return n.text;
+  }
+  if (ts.isNumericLiteral(n)) {
+    return Number(n.text);
+  }
+  if (n.kind === ts.SyntaxKind.TrueKeyword)
+    return true;
+  if (n.kind === ts.SyntaxKind.FalseKeyword)
+    return false;
+  if (n.kind === ts.SyntaxKind.NullKeyword)
+    return null;
+  if (ts.isPrefixUnaryExpression(n)) {
+    const expr = n;
+    if (expr.operator === ts.SyntaxKind.MinusToken) {
+      const operand = evaluateNode(expr.operand, ts);
+      if (typeof operand === "number")
+        return -operand;
+    }
+  }
+  if (ts.isArrayLiteralExpression(n)) {
+    const arr = n;
+    const result = [];
+    for (const elem of arr.elements) {
+      const val = evaluateNode(elem, ts);
+      if (val === void 0)
+        return void 0;
+      result.push(val);
+    }
+    return result;
+  }
+  if (ts.isObjectLiteralExpression(n)) {
+    const obj = n;
+    const result = {};
+    for (const prop of obj.properties) {
+      if (ts.isPropertyAssignment(prop)) {
+        const key = prop.name ? ts.isIdentifier(prop.name) ? prop.name.text : ts.isStringLiteral(prop.name) ? prop.name.text : void 0 : void 0;
+        if (!key)
+          continue;
+        const val = evaluateNode(prop.initializer, ts);
+        if (val !== void 0) {
+          result[key] = val;
+        }
+      }
+      if (ts.isShorthandPropertyAssignment(prop)) {
+        continue;
+      }
+    }
+    return result;
+  }
+  if (ts.isAsExpression(n)) {
+    return evaluateNode(n.expression, ts);
+  }
+  if (ts.isParenthesizedExpression(n)) {
+    return evaluateNode(n.expression, ts);
+  }
+  if (ts.isBinaryExpression(n)) {
+    const bin = n;
+    if (bin.operatorToken.kind === ts.SyntaxKind.PlusToken) {
+      const left = evaluateNode(bin.left, ts);
+      const right = evaluateNode(bin.right, ts);
+      if (typeof left === "string" && typeof right === "string") {
+        return left + right;
+      }
+    }
+  }
+  return void 0;
+}
+async function scanTools(scanDir) {
+  const absoluteDir = path.resolve(process.cwd(), scanDir);
+  if (!fs.existsSync(absoluteDir)) {
+    throw new Error(`Scan directory not found: ${absoluteDir}`);
+  }
+  let ts;
+  try {
+    ts = await import("typescript");
+  } catch {
+    try {
+      const { createRequire } = await import("module");
+      const require2 = createRequire(path.join(process.cwd(), "node_modules", "_placeholder.js"));
+      ts = require2("typescript");
+    } catch {
+      console.error("[pillar-sync] TypeScript is required for --scan mode.");
+      console.error("[pillar-sync] Install it: npm install -D typescript");
+      process.exit(1);
+    }
+  }
+  const files = globFiles(absoluteDir, [".ts", ".tsx", ".js", ".jsx", ".mjs"]);
+  console.log(`[pillar-sync] Scanning ${files.length} files in ${scanDir}`);
+  const PATTERNS = ["defineTool", "usePillarTool", "defineAction", "usePillarAction"];
+  const candidateFiles = files.filter((file) => {
+    const content = fs.readFileSync(file, "utf-8");
+    return PATTERNS.some((p) => content.includes(p));
+  });
+  console.log(`[pillar-sync] Found ${candidateFiles.length} files with tool definitions`);
+  const tools = [];
+  for (const filePath of candidateFiles) {
+    let visit2 = function(node) {
+      if (ts.isCallExpression(node)) {
+        const callee = node.expression;
+        let isTargetCall = false;
+        if (ts.isIdentifier(callee)) {
+          isTargetCall = PATTERNS.includes(callee.text);
+        } else if (ts.isPropertyAccessExpression(callee)) {
+          isTargetCall = callee.name.text === "defineTool" || callee.name.text === "defineAction";
+        }
+        if (isTargetCall && node.arguments.length > 0) {
+          const arg = node.arguments[0];
+          const lineNumber = sourceFile.getLineAndCharacterOfPosition(node.getStart()).line + 1;
+          const relativePath = path.relative(process.cwd(), filePath);
+          const processToolObject = (obj, line) => {
+            if (obj && typeof obj.name === "string" && typeof obj.description === "string") {
+              let toolType = obj.type;
+              if (toolType === "trigger_action") {
+                toolType = "trigger_tool";
+              }
+              tools.push({
+                name: obj.name,
+                description: obj.description,
+                type: toolType,
+                inputSchema: obj.inputSchema,
+                examples: obj.examples,
+                autoRun: obj.autoRun,
+                autoComplete: obj.autoComplete,
+                sourceFile: relativePath,
+                line
+              });
+              console.log(`[pillar-sync]   ${obj.name} (${relativePath}:${line})`);
+            } else if (obj) {
+              console.warn(
+                `[pillar-sync] \u26A0 Skipping tool at ${relativePath}:${line} \u2014 missing name or description`
+              );
+            }
+          };
+          if (ts.isObjectLiteralExpression(arg)) {
+            const obj = evaluateNode(arg, ts);
+            processToolObject(obj, lineNumber);
+          } else if (ts.isArrayLiteralExpression(arg)) {
+            for (const element of arg.elements) {
+              if (ts.isObjectLiteralExpression(element)) {
+                const elementLine = sourceFile.getLineAndCharacterOfPosition(element.getStart()).line + 1;
+                const obj = evaluateNode(element, ts);
+                processToolObject(obj, elementLine);
+              } else {
+                const elementLine = sourceFile.getLineAndCharacterOfPosition(element.getStart()).line + 1;
+                console.warn(
+                  `[pillar-sync] \u26A0 Skipping tool at ${relativePath}:${elementLine} \u2014 array element is not an inline object literal`
+                );
+              }
+            }
+          } else {
+            console.warn(
+              `[pillar-sync] \u26A0 Skipping tool at ${relativePath}:${lineNumber} \u2014 argument is not an inline object literal or array (variable reference can't be resolved statically)`
+            );
+          }
+        }
+      }
+      ts.forEachChild(node, visit2);
+    };
+    var visit = visit2;
+    const content = fs.readFileSync(filePath, "utf-8");
+    const sourceFile = ts.createSourceFile(
+      filePath,
+      content,
+      ts.ScriptTarget.Latest,
+      true,
+      // setParentNodes
+      filePath.endsWith(".tsx") ? ts.ScriptKind.TSX : filePath.endsWith(".jsx") ? ts.ScriptKind.JSX : /\.m?js$/.test(filePath) ? ts.ScriptKind.JS : ts.ScriptKind.TS
+    );
+    visit2(sourceFile);
+  }
+  return tools;
+}
+function normalizeTypeForBackend(type) {
+  if (type === "trigger_tool") {
+    return "trigger_action";
+  }
+  return type || "trigger_action";
+}
+function buildManifestFromScan(tools, platform, version, gitSha) {
+  const entries = [];
+  for (const tool of tools) {
+    const entry = {
+      name: tool.name,
+      description: tool.description,
+      // Normalize trigger_tool → trigger_action for backend API compatibility
+      type: normalizeTypeForBackend(tool.type)
+    };
+    if (tool.examples?.length)
+      entry.examples = tool.examples;
+    if (tool.autoRun)
+      entry.auto_run = tool.autoRun;
+    if (tool.autoComplete !== void 0)
+      entry.auto_complete = tool.autoComplete;
+    entry.returns_data = true;
+    if (tool.inputSchema)
+      entry.data_schema = tool.inputSchema;
+    entries.push(entry);
+  }
+  return {
+    platform,
+    version,
+    gitSha,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    actions: entries
+    // Keep 'actions' key for backend API compatibility
+  };
+}
 async function main() {
   const args = parseArgs(process.argv.slice(2));
   if (args.help) {
     printUsage();
     process.exit(0);
   }
-  const actionsPath = args.actions;
-  if (!actionsPath) {
-    console.error("[pillar-sync] Missing required --actions argument");
+  const scanDir = args.scan;
+  if (!scanDir) {
+    console.error("[pillar-sync] Missing required argument: --scan <dir>");
     console.error("");
     printUsage();
     process.exit(1);
@@ -292,31 +378,27 @@ async function main() {
     console.error("Get these from the Pillar admin: Actions \u2192 Configure Sync");
     process.exit(1);
   }
-  console.log(`[pillar-sync] Loading actions from: ${actionsPath}`);
-  let loadedModule;
+  const platform = process.env.PILLAR_PLATFORM || "web";
+  const version = process.env.PILLAR_VERSION || getPackageVersion();
+  const gitSha = process.env.GIT_SHA || getGitSha();
+  console.log(`[pillar-sync] Scanning for tools in: ${scanDir}`);
+  let scannedTools;
   try {
-    loadedModule = await loadActions(actionsPath);
+    scannedTools = await scanTools(scanDir);
   } catch (error) {
-    console.error(`[pillar-sync] Failed to load actions:`, error);
+    console.error(`[pillar-sync] Failed to scan tools:`, error);
     process.exit(1);
   }
-  const { actions, agentGuidance } = loadedModule;
-  const actionCount = Object.keys(actions).length;
-  console.log(`[pillar-sync] Found ${actionCount} actions`);
-  if (agentGuidance) {
-    console.log(`[pillar-sync] Found agent guidance (${agentGuidance.length} chars)`);
-  }
-  if (actionCount === 0) {
-    console.warn("[pillar-sync] No actions found. Nothing to sync.");
+  const toolCount = scannedTools.length;
+  console.log(`[pillar-sync] Found ${toolCount} tools`);
+  if (toolCount === 0) {
+    console.warn("[pillar-sync] No tools found. Nothing to sync.");
     process.exit(0);
   }
-  const platform = process.env.PILLAR_PLATFORM || "web";
-  const version = process.env.PILLAR_VERSION || getPackageVersion();
-  const gitSha = process.env.GIT_SHA || getGitSha();
+  const manifest = buildManifestFromScan(scannedTools, platform, version, gitSha);
   console.log(`[pillar-sync] Platform: ${platform}`);
   console.log(`[pillar-sync] Version: ${version}`);
   console.log(`[pillar-sync] Git SHA: ${gitSha || "not available"}`);
-  const manifest = buildManifest(actions, platform, version, gitSha, agentGuidance);
   if (process.env.PILLAR_DEBUG) {
     const manifestPath = path.join(process.cwd(), "actions-manifest.json");
     fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
@@ -329,9 +411,6 @@ async function main() {
     git_sha: gitSha,
     actions: manifest.actions
   };
-  if (agentGuidance) {
-    requestBody.agent_guidance = agentGuidance;
-  }
   const syncUrl = `${apiUrl}/api/admin/configs/${slug}/actions/sync/?async=true`;
   console.log(`[pillar-sync] POST ${syncUrl}`);
   try {

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/PagePilot/styles.d.ts

@@ -3,4 +3,4 @@
  * Injected into the document head (outside Shadow DOM)
  * Uses the same CSS variables as the Pillar panel for consistent theming
  */
-export declare const PAGE_PILOT_STYLES = "\n/* Pillar Page Pilot Banner Styles */\n\n/* Define CSS variables at the container level (same as panel) */\n#pillar-page-pilot-container {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-border: #e5e7eb;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-md: 6px;\n  --pillar-transition-fast: 0.15s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  #pillar-page-pilot-container:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-border: #404040;\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Dark mode - Manual override via html class or data attribute */\nhtml.dark #pillar-page-pilot-container,\n[data-theme=\"dark\"] #pillar-page-pilot-container,\n#pillar-page-pilot-container[data-theme=\"dark\"] {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-border: #404040;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n}\n\n@keyframes pillar-pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes pillar-banner-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n._pillar-page-pilot-banner {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 99999;\n  font-family: var(--pillar-font-family);\n  display: flex;\n  justify-content: center;\n  pointer-events: none;\n  animation: pillar-banner-fade-in 0.2s ease-out;\n}\n\n/* Viewport outline \u2014 3px border on left, right, bottom; top handled by tab shape */\n._pillar-page-pilot-banner::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  border: 3px solid var(--pillar-primary);\n  border-top: none;\n  pointer-events: none;\n  z-index: 99998;\n}\n\n/* Top border segments on either side of the tab */\n._pillar-page-pilot-banner::after {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--pillar-primary);\n  pointer-events: none;\n  z-index: 99997;\n}\n\n._pillar-page-pilot-banner__content {\n  position: relative;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 20px;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-left-radius: var(--pillar-radius-lg);\n  border-bottom-right-radius: var(--pillar-radius-lg);\n  pointer-events: auto;\n}\n\n._pillar-page-pilot-banner__indicator {\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  border-radius: 50%;\n  animation: pillar-pulse 1.5s ease-in-out infinite;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__text {\n  font-size: 13px;\n  font-weight: 500;\n  color: #ffffff;\n  white-space: nowrap;\n}\n\n._pillar-page-pilot-banner__stop {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__stop:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__stop:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__stop-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n}\n\n._pillar-page-pilot-banner__stop-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Confirmation variant \u2014 amber/warning theme */\n._pillar-page-pilot-banner--confirm ._pillar-page-pilot-banner__content {\n  background: #d97706;\n}\n\n._pillar-page-pilot-banner--confirm::before {\n  border-color: #d97706;\n}\n\n._pillar-page-pilot-banner--confirm::after {\n  background: #d97706;\n}\n\n._pillar-page-pilot-banner__warning-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__warning-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-page-pilot-banner__deny {\n  display: flex;\n  align-items: center;\n  padding: 5px 12px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__deny:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__deny:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__allow {\n  display: flex;\n  align-items: center;\n  padding: 5px 12px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: #d97706;\n  background: #ffffff;\n  border: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__allow:hover {\n  background: #fef3c7;\n}\n\n._pillar-page-pilot-banner__allow:active {\n  transform: scale(0.97);\n}\n";
+export declare const PAGE_PILOT_STYLES = "\n/* Pillar Page Pilot Banner Styles */\n\n/* Define CSS variables at the container level (same as panel) */\n#pillar-page-pilot-container {\n  /* Core colors - Light mode (default) */\n  --pillar-primary: #2563eb;\n  --pillar-primary-hover: #1d4ed8;\n  --pillar-bg: #ffffff;\n  --pillar-bg-secondary: #f9fafb;\n  --pillar-text: #1a1a1a;\n  --pillar-text-secondary: #374151;\n  --pillar-border: #e5e7eb;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --pillar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --pillar-radius-lg: 8px;\n  --pillar-radius-md: 6px;\n  --pillar-transition-fast: 0.15s ease;\n}\n\n/* Dark mode - Auto-detect from system preference */\n@media (prefers-color-scheme: dark) {\n  #pillar-page-pilot-container:not([data-theme=\"light\"]) {\n    --pillar-primary: #3b82f6;\n    --pillar-primary-hover: #60a5fa;\n    --pillar-bg: #1a1a1a;\n    --pillar-bg-secondary: #262626;\n    --pillar-text: #f5f5f5;\n    --pillar-text-secondary: #e5e5e5;\n    --pillar-border: #404040;\n    --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Dark mode - Manual override via html class or data attribute */\nhtml.dark #pillar-page-pilot-container,\n[data-theme=\"dark\"] #pillar-page-pilot-container,\n#pillar-page-pilot-container[data-theme=\"dark\"] {\n  --pillar-primary: #3b82f6;\n  --pillar-primary-hover: #60a5fa;\n  --pillar-bg: #1a1a1a;\n  --pillar-bg-secondary: #262626;\n  --pillar-text: #f5f5f5;\n  --pillar-text-secondary: #e5e5e5;\n  --pillar-border: #404040;\n  --pillar-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n}\n\n@keyframes pillar-pulse {\n  0%, 100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.6;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes pillar-banner-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n._pillar-page-pilot-banner {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 99999;\n  font-family: var(--pillar-font-family);\n  display: flex;\n  justify-content: center;\n  pointer-events: none;\n  animation: pillar-banner-fade-in 0.2s ease-out;\n}\n\n/* Viewport outline \u2014 3px border on left, right, bottom; top handled by tab shape */\n._pillar-page-pilot-banner::before {\n  content: '';\n  position: fixed;\n  inset: 0;\n  border: 3px solid var(--pillar-primary);\n  border-top: none;\n  pointer-events: none;\n  z-index: 99998;\n}\n\n/* Top border segments on either side of the tab */\n._pillar-page-pilot-banner::after {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--pillar-primary);\n  pointer-events: none;\n  z-index: 99997;\n}\n\n._pillar-page-pilot-banner__content {\n  position: relative;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 6px 20px;\n  background: var(--pillar-primary);\n  color: #ffffff;\n  border-bottom-left-radius: var(--pillar-radius-lg);\n  border-bottom-right-radius: var(--pillar-radius-lg);\n  pointer-events: auto;\n}\n\n._pillar-page-pilot-banner__indicator {\n  width: 8px;\n  height: 8px;\n  background: #ffffff;\n  border-radius: 50%;\n  animation: pillar-pulse 1.5s ease-in-out infinite;\n  flex-shrink: 0;\n}\n\n._pillar-page-pilot-banner__text {\n  font-size: 13px;\n  font-weight: 500;\n  color: #ffffff;\n  white-space: nowrap;\n}\n\n._pillar-page-pilot-banner__stop {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  margin-left: 4px;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 500;\n  color: #ffffff;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: var(--pillar-radius-md);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n}\n\n._pillar-page-pilot-banner__stop:hover {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n._pillar-page-pilot-banner__stop:active {\n  transform: scale(0.97);\n}\n\n._pillar-page-pilot-banner__stop-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n}\n\n._pillar-page-pilot-banner__stop-icon svg {\n  width: 100%;\n  height: 100%;\n}\n";

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

@@ -0,0 +1,16 @@
+/**
+ * Tab Navigation Component
+ * Vertical tabs on the right edge of the panel for switching between Assistant and Support
+ */
+import { h } from 'preact';
+import type { ResolvedSupportConfig } from '../../core/config';
+interface TabNavigationProps {
+    supportConfig: ResolvedSupportConfig;
+}
+export declare function TabNavigation({ supportConfig }: TabNavigationProps): h.JSX.Element;
+/**
+ * CSS Styles for Tab Navigation
+ * Should be appended to PANEL_STYLES
+ */
+export declare const TAB_NAVIGATION_STYLES = "\n/* ============================================================================\n   Panel Wrapper (for tab layout)\n   Horizontal flex container with main content + tab nav\n   ============================================================================ */\n\n._pillar-panel-wrapper {\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: hidden;\n}\n\n._pillar-panel-wrapper > ._pillar-panel-ui {\n  flex: 1;\n  min-width: 0;\n}\n\n.pillar-panel-wrapper {}\n\n/* ============================================================================\n   Tab Navigation\n   Vertical tabs on the right edge of the panel\n   ============================================================================ */\n\n._pillar-tab-nav {\n  display: flex;\n  flex-direction: column;\n  width: 48px;\n  min-width: 48px;\n  background: var(--pillar-bg-secondary);\n  border-left: 1px solid var(--pillar-border);\n  padding: var(--pillar-spacing-sm) 0;\n  gap: var(--pillar-spacing-xs);\n}\n\n._pillar-tab {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  padding: var(--pillar-spacing-sm) var(--pillar-spacing-xs);\n  margin: 0 var(--pillar-spacing-xs);\n  border: none;\n  border-radius: var(--pillar-radius-md);\n  background: transparent;\n  color: var(--pillar-text-muted);\n  cursor: pointer;\n  transition: all var(--pillar-transition-fast);\n  position: relative;\n}\n\n._pillar-tab:hover {\n  background: var(--pillar-bg-tertiary);\n  color: var(--pillar-text);\n}\n\n._pillar-tab--active {\n  background: var(--pillar-primary-light);\n  color: var(--pillar-primary);\n}\n\n._pillar-tab--active:hover {\n  background: var(--pillar-primary-light-hover);\n  color: var(--pillar-primary);\n}\n\n._pillar-tab-icon {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._pillar-tab-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n._pillar-tab-label {\n  font-size: 9px;\n  font-weight: 500;\n  text-align: center;\n  line-height: 1.2;\n  max-width: 40px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Public override classes */\n.pillar-tab-nav {}\n.pillar-tab {}\n.pillar-tab-icon {}\n.pillar-tab-label {}\n";
+export {};