@signalflare-ai/ui 1.1.0 → 1.3.0

package/scripts/convert-demos-to-stories.ts

@@ -113,13 +113,13 @@ function collectEntries(): Entry[] {
 function extractExportedDemoFunctions(source: string): string[] {
   // Strip template literal contents so we don't match `export function`
   // inside code strings.
-  const cleaned = source.replace(/`(?:\\.|[^`\\])*`/g, "``");
+  const cleaned = source.replace(/`(?:\\.|[^`\\])*`/gu, "``");
 
   const names = new Set<string>();
 
   // Only match at start of a line (after optional whitespace) to avoid
   // matching inside expressions/strings.
-  const fnRegex = /^\s*export\s+function\s+([A-Z][A-Za-z0-9_]*)\s*\(/gm;
+  const fnRegex = /^\s*export\s+function\s+([A-Z][A-Za-z0-9_]*)\s*\(/gmu;
   let m: RegExpExecArray | null = fnRegex.exec(cleaned);
   while (m) {
     names.add(m[1]);
@@ -127,7 +127,7 @@ function extractExportedDemoFunctions(source: string): string[] {
   }
 
   const constRegex =
-    /^\s*export\s+const\s+([A-Z][A-Za-z0-9_]*)\s*(?::\s*[^=]+)?=\s*(?:\([^)]*\)\s*=>|function)/gm;
+    /^\s*export\s+const\s+([A-Z][A-Za-z0-9_]*)\s*(?::\s*[^=]+)?=\s*(?:\([^)]*\)\s*=>|function)/gmu;
   m = constRegex.exec(cleaned);
   while (m) {
     names.add(m[1]);
@@ -161,7 +161,7 @@ function demoImportPath(entry: Entry): string {
   const up = "../".repeat(depth);
   const relFromRegistry = path.relative(
     REGISTRY_ROOT,
-    entry.demoFile.replace(/\.tsx$/, "")
+    entry.demoFile.replace(/\.tsx$/u, "")
   );
   return `${up}docs/${relFromRegistry.replace("../", "")}`;
 }
@@ -170,7 +170,7 @@ function buildDemoImportPath(entry: Entry): string {
   // Story lives at packages/registry/src/{components|blocks}/{name}/{name}.stories.tsx
   // Demo lives at packages/docs/src/components/demos/{Name}Demo.tsx
   // Relative path: ../../../../docs/src/components/demos/{Name}Demo
-  const demoBase = path.basename(entry.demoFile).replace(/\.tsx$/, "");
+  const demoBase = path.basename(entry.demoFile).replace(/\.tsx$/u, "");
   return `../../../../docs/src/components/demos/${demoBase}`;
 }
 

package/scripts/css-build.ts

@@ -29,7 +29,7 @@ const cssFiles: string[] = [
   "theme-sf.css",
   "theme-fedramp.css",
   "theme-minimal.css",
-  "theme-blue-tint.css",
+  "theme-vesper.css",
   "shadcn.css",
 ];
 

package/scripts/theme-generator/config.ts

@@ -6,7 +6,6 @@
  * - theme-sf.css (base theme — neutral, WCAG-tuned)
  * - theme-fedramp.css (fedramp overrides)
  * - theme-minimal.css (minimal overrides)
- * - theme-blue-tint.css (prior sf look — blue-tinted dark surfaces)
  *
  * Token naming:
  * - Key = current token name used in codebase
@@ -32,10 +31,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.145 0 0)",
           dark: "oklch(0.985 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.145 0 0)",
-          dark: "oklch(0.985 0 0)",
-        },
       },
     },
     "sf-inverse": {
@@ -58,10 +53,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.50 0 0)",
           dark: "oklch(0.55 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.556 0 0)",
-          dark: "oklch(0.65 0 0)",
-        },
       },
     },
     "sf-subtle": {
@@ -75,10 +66,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0 0)",
           dark: "oklch(0.45 0 0)",
         },
-        blueTint: {
-          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
-          dark: "var(--color-neutral-50, oklch(98.5% 0 0))",
-        },
       },
     },
     "sf-inactive": {
@@ -92,10 +79,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.65 0 0)",
           dark: "oklch(0.35 0 0)",
         },
-        blueTint: {
-          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
-        },
       },
     },
     "sf-brand": {
@@ -120,8 +103,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         sf: {
-          light: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
-          dark: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
+          light: "#99ffe4",
+          dark: "#99ffe4",
         },
       },
     },
@@ -136,10 +119,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.12 25)",
           dark: "oklch(0.55 0.10 25)",
         },
-        blueTint: {
-          light: "oklch(0.577 0.245 27.325)",
-          dark: "oklch(0.55 0.18 25)",
-        },
       },
     },
     "sf-warning": {
@@ -153,10 +132,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.08 66)",
           dark: "oklch(0.65 0.08 66)",
         },
-        blueTint: {
-          light: "var(--color-yellow-800, oklch(47.6% 0.114 61.907))",
-          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
-        },
       },
     },
   },
@@ -172,7 +147,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.10 0 0)",
+          dark: "oklch(0.173 0 0)",
         },
         fedramp: {
           light: "#5b697c",
@@ -180,11 +155,7 @@ export const THEME_CONFIG: ThemeConfig = {
         },
         minimal: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.10 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-50, oklch(0.985 0 0))",
-          dark: "var(--color-neutral-950, oklch(0.14 0 0))",
+          dark: "oklch(0.173 0 0)",
         },
       },
     },
@@ -193,7 +164,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.97 0 0)",
-          dark: "oklch(0.14 0 0)",
+          dark: "oklch(0.1913 0 0)",
         },
         fedramp: {
           light: "#5b697c",
@@ -201,11 +172,7 @@ export const THEME_CONFIG: ThemeConfig = {
         },
         minimal: {
           light: "oklch(0.97 0 0)",
-          dark: "oklch(0.14 0 0)",
-        },
-        blueTint: {
-          light: "oklch(1 0 0)",
-          dark: "oklch(0.21 0.005 252)",
+          dark: "oklch(0.1913 0 0)",
         },
       },
     },
@@ -214,15 +181,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(1 0 0)",
-          dark: "oklch(0.22 0 0)",
+          dark: "oklch(0.2002 0 0)",
         },
         minimal: {
           light: "oklch(1 0 0)",
-          dark: "oklch(0.22 0 0)",
-        },
-        blueTint: {
-          light: "oklch(0.99 0 0)",
-          dark: "oklch(0.24 0.005 252)",
+          dark: "oklch(0.2002 0 0)",
         },
       },
     },
@@ -231,15 +194,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.92 0 0)",
-          dark: "oklch(0.10 0 0)",
+          dark: "oklch(0.173 0 0)",
         },
         minimal: {
           light: "oklch(0.92 0 0)",
-          dark: "oklch(0.10 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-250, oklch(0.9 0 0))",
-          dark: "var(--color-neutral-750, oklch(0.31 0 0))",
+          dark: "oklch(0.173 0 0)",
         },
       },
     },
@@ -248,15 +207,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.93 0 0)",
-          dark: "oklch(0.10 0 0)",
+          dark: "oklch(0.173 0 0)",
         },
         minimal: {
           light: "oklch(0.93 0 0)",
-          dark: "oklch(0.10 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-50, oklch(98.5% 0 0))",
-          dark: "var(--color-neutral-950, oklch(0.10 0 0))",
+          dark: "oklch(0.173 0 0)",
         },
       },
     },
@@ -271,10 +226,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.35 0 0)",
           dark: "oklch(0.75 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.205 0 0)",
-          dark: "oklch(0.55 0.01 40)",
-        },
       },
     },
     "sf-control": {
@@ -282,15 +233,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.17 0 0)",
+          dark: "oklch(0.2264 0 0)",
         },
         minimal: {
           light: "oklch(0.95 0 0)",
-          dark: "oklch(0.17 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-white, #fff)",
-          dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+          dark: "oklch(0.2264 0 0)",
         },
       },
     },
@@ -299,15 +246,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.94 0 0)",
-          dark: "oklch(0.19 0 0)",
+          dark: "oklch(0.2562 0 0)",
         },
         minimal: {
           light: "oklch(0.94 0 0)",
-          dark: "oklch(0.19 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-150, oklch(0.96 0 0))",
-          dark: "var(--color-neutral-850, oklch(0.23 0 0))",
+          dark: "oklch(0.2562 0 0)",
         },
       },
     },
@@ -318,7 +261,7 @@ export const THEME_CONFIG: ThemeConfig = {
           /* Interactive boundary (form controls, checkbox/radio idle).
              More visible than sf-line so controls read as actionable. */
           light: "oklch(0.80 0 0)",
-          dark: "oklch(0.38 0 0)",
+          dark: "oklch(0.2768 0 0)",
         },
       },
     },
@@ -327,15 +270,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.91 0 0)",
-          dark: "oklch(0.27 0 0)",
+          dark: "oklch(0.2562 0 0)",
         },
         minimal: {
           light: "oklch(0.91 0 0)",
-          dark: "oklch(0.27 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+          dark: "oklch(0.2562 0 0)",
         },
       },
     },
@@ -344,15 +283,11 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "oklch(0.88 0 0)",
-          dark: "oklch(0.31 0 0)",
+          dark: "oklch(0.2768 0 0)",
         },
         minimal: {
           light: "oklch(0.88 0 0)",
-          dark: "oklch(0.31 0 0)",
-        },
-        blueTint: {
-          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
-          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+          dark: "oklch(0.2768 0 0)",
         },
       },
     },
@@ -367,10 +302,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.06 260)",
           dark: "oklch(0.55 0.06 260)",
         },
-        blueTint: {
-          light: "oklch(0.5772 0.2324 260)",
-          dark: "oklch(0.5772 0.2324 260)",
-        },
       },
     },
     "sf-brand-hover": {
@@ -384,29 +315,21 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.48 0.05 264)",
           dark: "oklch(0.48 0.05 264)",
         },
-        blueTint: {
-          light: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-        },
       },
     },
     "sf-line": {
       newName: "",
       theme: {
         sf: {
-          /* Flat/minimal aesthetic: near-invisible by design. Decorative only —
-             contrast carried by text + sf-ring (focus) + surface elevation. */
+          /* Vesper-inspired dark boundary; subtle but visible against the default
+             dark surface ramp. */
           light: "oklch(0.85 0 0 / 0.5)",
-          dark: "oklch(0.25 0 0 / 0.5)",
+          dark: "#282828",
         },
         minimal: {
           light: "oklch(0.85 0 0 / 0.5)",
           dark: "oklch(0.25 0 0 / 0.5)",
         },
-        blueTint: {
-          light: "oklch(0.922 0 0)",
-          dark: "oklch(0.3 0.015 250)",
-        },
       },
     },
     "sf-ring": {
@@ -424,10 +347,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.65 0 0)",
           dark: "oklch(0.45 0 0)",
         },
-        blueTint: {
-          light: "oklch(0.708 0 0)",
-          dark: "oklch(0.465 0.015 250)",
-        },
       },
     },
     "sf-tip-shadow": {
@@ -441,10 +360,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "transparent",
           dark: "transparent",
         },
-        blueTint: {
-          light: "var(--color-gray-200, oklch(92.8% 0.006 264.531))",
-          dark: "transparent",
-        },
       },
     },
     "sf-tip-stroke": {
@@ -452,16 +367,12 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         sf: {
           light: "transparent",
-          dark: "transparent",
+          dark: "#282828",
         },
         minimal: {
           light: "transparent",
           dark: "transparent",
         },
-        blueTint: {
-          light: "transparent",
-          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
-        },
       },
     },
     "sf-info": {
@@ -475,10 +386,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.06 260)",
           dark: "oklch(0.55 0.06 260)",
         },
-        blueTint: {
-          light: "var(--color-blue-500, oklch(62.3% 0.214 259.815))",
-          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
-        },
       },
     },
     "sf-info-tint": {
@@ -492,10 +399,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.94 0.01 260)",
           dark: "oklch(0.20 0.02 260)",
         },
-        blueTint: {
-          light: "var(--color-blue-300, oklch(80.9% 0.105 251.813))",
-          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
-        },
       },
     },
     "sf-warning": {
@@ -509,10 +412,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.08 66)",
           dark: "oklch(0.65 0.08 66)",
         },
-        blueTint: {
-          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
-          dark: "var(--color-yellow-700, oklch(55.4% 0.135 66.442))",
-        },
       },
     },
     "sf-warning-tint": {
@@ -526,10 +425,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.94 0.02 60)",
           dark: "oklch(0.22 0.03 60)",
         },
-        blueTint: {
-          light: "var(--color-yellow-300, oklch(90.5% 0.182 98.111))",
-          dark: "var(--color-yellow-900, oklch(42.1% 0.095 57.708))",
-        },
       },
     },
     "sf-danger": {
@@ -543,10 +438,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.55 0.12 25)",
           dark: "oklch(0.55 0.10 25)",
         },
-        blueTint: {
-          light: "oklch(0.577 0.245 27.325)",
-          dark: "oklch(0.55 0.18 25)",
-        },
       },
     },
     "sf-danger-tint": {
@@ -560,10 +451,6 @@ export const THEME_CONFIG: ThemeConfig = {
           light: "oklch(0.94 0.02 25)",
           dark: "oklch(0.20 0.04 25)",
         },
-        blueTint: {
-          light: "var(--color-red-300, oklch(80.8% 0.114 19.571))",
-          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
-        },
       },
     },
     "sf-success": {
@@ -572,8 +459,8 @@ export const THEME_CONFIG: ThemeConfig = {
         "Success signal color (previously hardcoded in the shadcn bridge)",
       theme: {
         sf: {
-          light: "oklch(0.723 0.219 149.579)",
-          dark: "oklch(0.723 0.219 149.579)",
+          light: "#99ffe4",
+          dark: "#99ffe4",
         },
       },
     },
@@ -769,12 +656,7 @@ export const THEME_CONFIG: ThemeConfig = {
 };
 
 /** List of all available themes */
-export const AVAILABLE_THEMES = [
-  "sf",
-  "fedramp",
-  "minimal",
-  "blueTint",
-] as const;
+export const AVAILABLE_THEMES = ["sf", "fedramp", "minimal"] as const;
 export type AvailableTheme = (typeof AVAILABLE_THEMES)[number];
 
 /**

package/scripts/theme-generator/generate-css.ts

@@ -5,7 +5,6 @@
  * Outputs:
  * - theme-sf.css: Base theme with all tokens
  * - theme-fedramp.css: Override layer for fedramp theme
- * - theme-blue-tint.css: Override layer for blue-tint theme
  * - (future themes as needed)
  */
 
@@ -33,7 +32,7 @@ function lightDark(light: string, dark: string): string {
 }
 
 function toThemeFileName(themeName: string): string {
-  return themeName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  return themeName.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
 }
 
 /**

package/scripts/theme-generator/index.ts

@@ -52,7 +52,6 @@ Output:
   Generates theme CSS files in src/styles/:
   - theme-sf.css       Base theme with all tokens
   - theme-fedramp.css   FedRAMP theme overrides
-  - theme-blue-tint.css Blue-tint theme overrides
 `);
 }
 

package/scripts/theme-generator/migrate.ts

@@ -116,7 +116,7 @@ function buildPatterns(renameMap: TokenRenameMap): Array<{
       patterns.push({
         pattern: new RegExp(
           `(${variants})(${prefix}-${escapeRegex(oldName)})(${opacity})(?=\\s|"|'|\`|$|\\))`,
-          "g"
+          "gu"
         ),
         replacement: `$1${prefix}-${newName}$3`,
       });
@@ -129,7 +129,7 @@ function buildPatterns(renameMap: TokenRenameMap): Array<{
       patterns.push({
         pattern: new RegExp(
           `(${variants})(${prefix}-${escapeRegex(oldName)})(${opacity})(?=\\s|"|'|\`|$|\\))`,
-          "g"
+          "gu"
         ),
         replacement: `$1${prefix}-${newName}$3`,
       });
@@ -140,7 +140,7 @@ function buildPatterns(renameMap: TokenRenameMap): Array<{
 }
 
 function escapeRegex(str: string): string {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return str.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
 }
 
 /**

package/dist/ai-agent-card-BXHwhWAU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ai-agent-card-BXHwhWAU.js","names":[],"sources":["../src/components/ai-agent-card/ai-agent-card.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  BrainIcon,\n  CheckCircleIcon,\n  CircleIcon,\n  CodeIcon,\n  MagnifyingGlassIcon,\n  RobotIcon,\n  SpinnerGapIcon,\n  WrenchIcon,\n  XCircleIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_AGENT_CARD_VARIANTS = {\n  status: {\n    idle: { classes: \"\", description: \"Agent is idle, not yet started\" },\n    running: { classes: \"\", description: \"Agent is actively working\" },\n    completed: { classes: \"\", description: \"Agent finished successfully\" },\n    error: { classes: \"\", description: \"Agent encountered an error\" },\n  },\n  size: {\n    sm: { classes: \"\", description: \"Compact card for dense grids\" },\n    md: { classes: \"\", description: \"Default card size\" },\n  },\n} as const;\n\nexport const SF_AI_AGENT_CARD_DEFAULT_VARIANTS = {\n  status: \"idle\",\n  size: \"md\",\n} as const;\n\nexport type SFAiAgentCardStatus = keyof typeof SF_AI_AGENT_CARD_VARIANTS.status;\nexport type SFAiAgentCardSize = keyof typeof SF_AI_AGENT_CARD_VARIANTS.size;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiAgentCardProps = Omit<ComponentProps<\"button\">, \"children\"> & {\n  /** Human-readable agent name (e.g. \"Explore\", \"Execute\"). */\n  name: string;\n  /** Agent type ID — used for icon mapping. */\n  agentType?: string;\n  /** Current status. @default \"idle\" */\n  status?: SFAiAgentCardStatus;\n  /** Model ID being used (e.g. \"claude-haiku-3.5\"). */\n  modelId?: string;\n  /** What the agent is currently doing. */\n  currentTask?: string;\n  /** Total elapsed duration in ms. */\n  duration?: number;\n  /** Number of tool calls made. */\n  toolCallCount?: number;\n  /** Whether this card is currently selected/active. */\n  selected?: boolean;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Card size. @default \"md\" */\n  size?: SFAiAgentCardSize;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst AGENT_TYPE_ICONS: Record<string, ElementType> = {\n  explore: MagnifyingGlassIcon,\n  search: MagnifyingGlassIcon,\n  execute: CodeIcon,\n  code: CodeIcon,\n  plan: BrainIcon,\n  think: BrainIcon,\n  tool: WrenchIcon,\n  build: WrenchIcon,\n};\n\nfunction getAgentIcon(\n  agentType?: string,\n  customIcon?: ElementType\n): ElementType {\n  if (customIcon) return customIcon;\n  if (agentType) {\n    const lower = agentType.toLowerCase();\n    for (const [key, icon] of Object.entries(AGENT_TYPE_ICONS)) {\n      if (lower.includes(key)) return icon;\n    }\n  }\n  return RobotIcon;\n}\n\nfunction formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`;\n  const s = Math.round(ms / 100) / 10;\n  if (s < 60) return `${s}s`;\n  const m = Math.floor(s / 60);\n  const rem = Math.round(s % 60);\n  return `${m}m ${rem}s`;\n}\n\nfunction getModelShortName(modelId?: string): string {\n  if (!modelId) return \"\";\n  return (\n    modelId\n      .split(\"/\")\n      .pop()\n      ?.replace(/^claude-/, \"\")\n      .replace(/-\\d+$/, \"\") ?? modelId\n  );\n}\n\n// ─── Status decorations ───────────────────────────────────────────────────────\n\nconst STATUS_DOT: Record<SFAiAgentCardStatus, string> = {\n  idle: \"bg-sf-fill\",\n  running: \"bg-sf-brand animate-pulse\",\n  completed: \"bg-sf-success\",\n  error: \"bg-sf-danger\",\n};\n\nfunction StatusIcon({\n  status,\n  size = 14,\n}: {\n  status: SFAiAgentCardStatus;\n  size?: number;\n}) {\n  switch (status) {\n    case \"running\":\n      return (\n        <SpinnerGapIcon size={size} className=\"animate-spin text-sf-brand\" />\n      );\n    case \"completed\":\n      return <CheckCircleIcon size={size} className=\"text-sf-success\" />;\n    case \"error\":\n      return <XCircleIcon size={size} className=\"text-sf-danger\" />;\n    default:\n      return <CircleIcon size={size} className=\"text-sf-inactive\" />;\n  }\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * `AiAgentCard` — compact card showing one agent's status in a commander dashboard.\n *\n * Displays: agent icon, name, status indicator, current task, model, duration,\n * and tool call count. Clickable for selection.\n *\n * @example\n * ```tsx\n * <AiAgentCard\n *   name=\"Explore\"\n *   agentType=\"explore\"\n *   status=\"running\"\n *   modelId=\"claude-haiku-3.5\"\n *   currentTask=\"Scanning auth files...\"\n *   duration={4200}\n *   toolCallCount={3}\n *   selected\n *   onClick={handleSelect}\n * />\n * ```\n */\nexport const AiAgentCard = forwardRef<HTMLButtonElement, AiAgentCardProps>(\n  (\n    {\n      name,\n      agentType,\n      status = SF_AI_AGENT_CARD_DEFAULT_VARIANTS.status,\n      modelId,\n      currentTask,\n      duration,\n      toolCallCount,\n      selected,\n      icon,\n      size = SF_AI_AGENT_CARD_DEFAULT_VARIANTS.size,\n      className,\n      onClick,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = getAgentIcon(agentType, icon);\n    const modelShort = getModelShortName(modelId);\n    const isSm = size === \"sm\";\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-pressed={selected}\n        onClick={onClick}\n        className={cn(\n          \"group flex flex-col gap-2 rounded-xl border text-left transition-all\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring focus-visible:ring-offset-1\",\n          isSm ? \"p-2.5\" : \"p-3.5\",\n          selected\n            ? \"border-sf-line bg-sf-recessed shadow-sm\"\n            : \"border-sf-line bg-sf-elevated hover:border-sf-line hover:bg-sf-tint\",\n          !onClick && \"cursor-default\",\n          className\n        )}\n        {...props}\n      >\n        {/* Header row */}\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex items-center gap-2 min-w-0\">\n            {/* Agent icon */}\n            <div\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-lg\",\n                isSm ? \"size-6\" : \"size-8\",\n                status === \"running\"\n                  ? \"bg-sf-brand/10 text-sf-brand\"\n                  : status === \"completed\"\n                    ? \"bg-sf-tint text-sf-success\"\n                    : status === \"error\"\n                      ? \"bg-sf-tint text-sf-danger\"\n                      : \"bg-sf-fill text-sf-subtle\"\n              )}\n            >\n              <Icon size={isSm ? 12 : 16} />\n            </div>\n\n            {/* Name */}\n            <span\n              className={cn(\n                \"truncate font-medium text-sf-default\",\n                isSm ? \"text-xs\" : \"text-sm\"\n              )}\n            >\n              {name}\n            </span>\n          </div>\n\n          {/* Status icon */}\n          <StatusIcon status={status} size={isSm ? 12 : 14} />\n        </div>\n\n        {/* Current task */}\n        {currentTask && (\n          <p\n            className={cn(\n              \"truncate text-sf-subtle leading-snug\",\n              isSm ? \"text-[10px]\" : \"text-xs\"\n            )}\n          >\n            {currentTask}\n          </p>\n        )}\n\n        {/* Footer row: model + stats */}\n        {!isSm && (\n          <div className=\"flex items-center justify-between gap-2\">\n            <div className=\"flex items-center gap-1.5\">\n              {/* Status dot + model */}\n              <span\n                className={cn(\n                  \"size-1.5 shrink-0 rounded-full\",\n                  STATUS_DOT[status]\n                )}\n              />\n              {modelShort && (\n                <span className=\"font-mono text-[10px] text-sf-inactive\">\n                  {modelShort}\n                </span>\n              )}\n            </div>\n\n            <div className=\"flex items-center gap-2 text-[10px] text-sf-subtle\">\n              {typeof toolCallCount === \"number\" && toolCallCount > 0 && (\n                <span className=\"flex items-center gap-0.5\">\n                  <WrenchIcon size={9} />\n                  {toolCallCount}\n                </span>\n              )}\n              {typeof duration === \"number\" && (\n                <span>{formatDuration(duration)}</span>\n              )}\n            </div>\n          </div>\n        )}\n      </button>\n    );\n  }\n);\n\nAiAgentCard.displayName = \"AiAgentCard\";\n"],"mappings":"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"}

package/dist/ai-code-block-BgtIxtZZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ai-code-block-BgtIxtZZ.js","names":[],"sources":["../src/components/ai-code-block/ai-code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, memo, useContext, useState } from \"react\";\nimport { highlight } from \"sugar-high\";\n\nimport { cn } from \"../../utils/cn\";\nimport { highlightToLines } from \"../../utils/highlight-to-react\";\nimport { Button } from \"../button\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_CODE_BLOCK_VARIANTS = {} as const;\nexport const SF_AI_CODE_BLOCK_DEFAULT_VARIANTS = {} as const;\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface AiCodeBlockContextValue {\n  code: string;\n}\n\nconst AiCodeBlockContext = createContext<AiCodeBlockContextValue>({ code: \"\" });\n\n// ─── AiCodeBlock ─────────────────────────────────────────────────────────────\n\nexport type AiCodeBlockProps = HTMLAttributes<HTMLDivElement> & {\n  /** The raw code string to display and make copyable. */\n  code: string;\n  /** Language identifier for syntax highlighting (display only, no highlighting applied). */\n  language?: string;\n  /** Show line numbers. @default false */\n  showLineNumbers?: boolean;\n  /** Extra content rendered in the top-right overlay (e.g. copy button). */\n  children?: ReactNode;\n};\n\n/**\n * Displays a code block with monospace formatting and an optional copy button.\n * Does not include a syntax highlighter — avoids the heavy `react-syntax-highlighter`\n * dependency. Wrap with `AiCodeBlockCopyButton` for clipboard support.\n *\n * @example\n * ```tsx\n * <AiCodeBlock code={`const x = 1;`} language=\"ts\">\n *   <AiCodeBlockCopyButton />\n * </AiCodeBlock>\n * ```\n */\nexport const AiCodeBlock = memo(\n  ({\n    code,\n    language,\n    showLineNumbers = false,\n    className,\n    children,\n    ...props\n  }: AiCodeBlockProps) => {\n    const highlightedLines = highlightToLines(highlight(code));\n\n    return (\n      <AiCodeBlockContext.Provider value={{ code }}>\n        <div\n          className={cn(\n            \"relative w-full overflow-hidden rounded-lg border border-sf-line bg-sf-recessed font-mono text-sm text-sf-default\",\n            className\n          )}\n          {...props}\n        >\n          {language && (\n            <div className=\"flex items-center justify-between border-b border-sf-line px-4 py-2\">\n              <span className=\"text-sf-subtle text-xs\">{language}</span>\n              {children && (\n                <div className=\"flex items-center gap-2\">{children}</div>\n              )}\n            </div>\n          )}\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full border-collapse\">\n              <tbody>\n                {highlightedLines.map((line, i) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: line index is stable\n                  <tr key={i} className=\"leading-6\">\n                    {showLineNumbers && (\n                      <td className=\"select-none pr-4 pl-4 text-right text-sf-inactive\">\n                        {i + 1}\n                      </td>\n                    )}\n                    <td className={cn(\"pr-4\", !showLineNumbers && \"px-4\")}>\n                      <pre className=\"whitespace-pre\">{line}</pre>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          {!language && children && (\n            <div className=\"absolute top-2 right-2 flex items-center gap-2\">\n              {children}\n            </div>\n          )}\n        </div>\n      </AiCodeBlockContext.Provider>\n    );\n  },\n  (prev, next) =>\n    prev.code === next.code &&\n    prev.language === next.language &&\n    prev.showLineNumbers === next.showLineNumbers\n);\n\nAiCodeBlock.displayName = \"AiCodeBlock\";\n\n// ─── AiCodeBlockCopyButton ───────────────────────────────────────────────────\n\nexport type AiCodeBlockCopyButtonProps = ComponentProps<typeof Button> & {\n  /** Called after a successful copy. */\n  onCopy?: () => void;\n  /** Called if the clipboard API is unavailable or errors. */\n  onError?: (error: Error) => void;\n  /** How long (ms) to show the \"copied\" state. @default 2000 */\n  timeout?: number;\n};\n\n/**\n * Copy-to-clipboard button for use inside `AiCodeBlock`.\n * Must be a descendant of `AiCodeBlock` to access the code via context.\n *\n * @example\n * ```tsx\n * <AiCodeBlock code=\"const x = 1;\" language=\"ts\">\n *   <AiCodeBlockCopyButton />\n * </AiCodeBlock>\n * ```\n */\nexport function AiCodeBlockCopyButton({\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  className,\n  size = \"sm\",\n  variant = \"ghost\",\n  ...props\n}: AiCodeBlockCopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const { code } = useContext(AiCodeBlockContext);\n\n  const handleCopy = async () => {\n    if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n      onError?.(new Error(\"Clipboard API not available\"));\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), timeout);\n    } catch (err) {\n      onError?.(err as Error);\n    }\n  };\n\n  return (\n    <Button\n      className={cn(\"shrink-0\", className)}\n      onClick={handleCopy}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      {children ?? (copied ? \"Copied\" : \"Copy\")}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,IAAa,4BAA4B,EAAE;AAC3C,IAAa,oCAAoC,EAAE;AAQnD,IAAM,qBAAqB,cAAuC,EAAE,MAAM,IAAI,CAAC;;;;;;;;;;;;;AA2B/E,IAAa,cAAc,MACxB,EACC,MACA,UACA,kBAAkB,OAClB,WACA,UACA,GAAG,YACmB;CACtB,MAAM,mBAAmB,iBAAiB,UAAU,KAAK,CAAC;AAE1D,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO,EAAE,MAAM;YAC1C,qBAAC,OAAD;GACE,WAAW,GACT,qHACA,UACD;GACD,GAAI;aALN;IAOG,YACC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,QAAD;MAAM,WAAU;gBAA0B;MAAgB,CAAA,EACzD,YACC,oBAAC,OAAD;MAAK,WAAU;MAA2B;MAAe,CAAA,CAEvD;;IAER,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MAAO,WAAU;gBACf,oBAAC,SAAD,EAAA,UACG,iBAAiB,KAAK,MAAM,MAE3B,qBAAC,MAAD;OAAY,WAAU;iBAAtB,CACG,mBACC,oBAAC,MAAD;QAAI,WAAU;kBACX,IAAI;QACF,CAAA,EAEP,oBAAC,MAAD;QAAI,WAAW,GAAG,QAAQ,CAAC,mBAAmB,OAAO;kBACnD,oBAAC,OAAD;SAAK,WAAU;mBAAkB;SAAW,CAAA;QACzC,CAAA,CACF;SATI,EASJ,CACL,EACI,CAAA;MACF,CAAA;KACJ,CAAA;IACL,CAAC,YAAY,YACZ,oBAAC,OAAD;KAAK,WAAU;KACZ;KACG,CAAA;IAEJ;;EACsB,CAAA;IAGjC,MAAM,SACL,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,oBAAoB,KAAK,gBACjC;AAED,YAAY,cAAc;;;;;;;;;;;;AAwB1B,SAAgB,sBAAsB,EACpC,QACA,SACA,UAAU,KACV,UACA,WACA,OAAO,MACP,UAAU,SACV,GAAG,SAC0B;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EAAE,SAAS,WAAW,mBAAmB;CAE/C,MAAM,aAAa,YAAY;AAC7B,MAAI,OAAO,cAAc,eAAe,CAAC,UAAU,WAAW,WAAW;AACvE,6BAAU,IAAI,MAAM,8BAA8B,CAAC;AACnD;;AAEF,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,aAAU,KAAK;AACf,aAAU;AACV,oBAAiB,UAAU,MAAM,EAAE,QAAQ;WACpC,KAAK;AACZ,aAAU,IAAa;;;AAI3B,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,YAAY,UAAU;EACpC,SAAS;EACH;EACG;EACT,GAAI;YAEH,aAAa,SAAS,WAAW;EAC3B,CAAA"}