@toolr/ui-design 0.1.5 → 0.1.7

package/dist/content.js

@@ -1,11 +1,11 @@
 // components/content/info-panel-primitives.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function P({ children }) {
-  return /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-400 leading-relaxed mb-5", children });
+  return /* @__PURE__ */ jsx("p", { className: "text-md text-neutral-400 leading-relaxed mb-5", children });
 }
 function SectionHeader({ color, children }) {
   const textColor = color ? `text-${color}-500/70` : "text-neutral-500";
-  return /* @__PURE__ */ jsx("p", { className: `${textColor} text-xs uppercase font-semibold pb-0.5 border-b border-neutral-700/50 mb-2.5`, style: { letterSpacing: "0.8px" }, children });
+  return /* @__PURE__ */ jsx("p", { className: `${textColor} text-sm uppercase font-semibold pb-0.5 border-b border-neutral-700/50 mb-2.5`, style: { letterSpacing: "0.8px" }, children });
 }
 function DL({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "mb-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[auto_1fr] gap-x-4", children }) });
@@ -13,12 +13,12 @@ function DL({ children }) {
 function DLRow({ term, children, even }) {
   const bg = even ? "bg-white/[0.015]" : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} font-semibold text-sm whitespace-nowrap`, children: term }),
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`, children })
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} font-semibold text-md whitespace-nowrap`, children: term }),
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`, children })
   ] });
 }
 function UL({ children }) {
-  return /* @__PURE__ */ jsx("ul", { className: "text-sm text-neutral-400 space-y-2 mb-5", children });
+  return /* @__PURE__ */ jsx("ul", { className: "text-md text-neutral-400 space-y-2 mb-5", children });
 }
 function LI({ color, children }) {
   return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
@@ -30,7 +30,7 @@ function OL({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-5", children });
 }
 function OLI({ n, color, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 text-md", children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-400 shrink-0 w-4 text-right font-bold`, children: [
       n,
       "."
@@ -61,17 +61,17 @@ function getCalloutColors(color) {
 }
 function Callout({ color, children }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
-  return /* @__PURE__ */ jsx("div", { className: `border-l-4 ${c.borderL} border-y ${c.borderY} ${c.bg} px-3 py-2.5 rounded-r mb-5 text-sm text-neutral-400`, children });
+  return /* @__PURE__ */ jsx("div", { className: `border-l-4 ${c.borderL} border-y ${c.borderY} ${c.bg} px-3 py-2.5 rounded-r mb-5 text-md text-neutral-400`, children });
 }
 function CalloutCode({ color, children }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
-  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-sm ${c.codeText}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-md ${c.codeText}`, children });
 }
 function CalloutDim({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", children });
 }
 function CodeBlock({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-900/60 rounded-md p-3 font-mono text-xs text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-900/60 rounded-md p-3 font-mono text-sm text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
 }
 function CK({ color, children }) {
   const textColor = color ? `text-${color}-400` : "";
@@ -98,13 +98,13 @@ function LocationItem({
           className: `w-2 h-2 rounded-full bg-${color}-500/50 border border-${color}-500 shrink-0`
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: `text-${color}-400 text-sm font-semibold`, children: label })
+      /* @__PURE__ */ jsx("span", { className: `text-${color}-400 text-md font-semibold`, children: label })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`, children })
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`, children })
   ] });
 }
 function TitledLI({ color, title, children }) {
-  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-neutral-400", children: [
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-md text-neutral-400", children: [
     /* @__PURE__ */ jsx("span", { className: `text-${color}-400 shrink-0`, style: { marginTop: "3px", fontSize: "18px", lineHeight: "14px" }, children: "\u2022" }),
     /* @__PURE__ */ jsxs("span", { children: [
       /* @__PURE__ */ jsx("span", { className: `text-${color}-300 font-semibold`, children: title }),
@@ -115,7 +115,7 @@ function TitledLI({ color, title, children }) {
   ] });
 }
 function CalloutDialog({ color, lines }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-sm", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-md", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-300 font-semibold mr-1`, children: [
       line.speaker,
       ":"
@@ -131,7 +131,7 @@ function StatusBadge({ value, badgeColor, label, children, even }) {
     DLRow,
     {
       term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-xss font-bold shrink-0`, children: value }),
+        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-xs font-bold shrink-0`, children: value }),
         /* @__PURE__ */ jsx("span", { className: `text-${badgeColor}-400 font-semibold`, children: label })
       ] }),
       even,

package/dist/index.d.ts

@@ -6,6 +6,13 @@ import { LucideIcon } from 'lucide-react';
 import { ClassValue } from 'clsx';
 
 type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type AccentColor = FormColor;
+declare const ACCENT_TEXT: Record<AccentColor, string>;
+declare const ACCENT_ICON: Record<FormColor, string>;
+declare const ACCENT_NAV: Record<AccentColor, {
+    bg: string;
+    text: string;
+}>;
 
 declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
 type ScaleKey = (typeof SCALE_KEYS)[number];
@@ -231,7 +238,7 @@ interface ActionItem {
     testId?: string;
 }
 type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error';
-type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type IconButtonColor = AccentColor;
 type IconButtonVariant = 'filled' | 'outline';
 interface IconButtonProps {
     icon: IconName | ReactNode;
@@ -265,7 +272,7 @@ interface CollapseButtonProps {
 }
 declare function CollapseButton({ collapsed, onToggle, size, color, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
 
-type LabelColor = 'neutral' | 'green' | 'red' | 'blue' | 'yellow' | 'orange' | 'purple' | 'amber' | 'emerald' | 'cyan' | 'indigo' | 'teal' | 'violet' | 'pink' | 'sky';
+type LabelColor = AccentColor;
 interface LabelProps {
     text: string;
     color: LabelColor;
@@ -287,23 +294,11 @@ interface LabelProps {
     className?: string;
     testId?: string;
 }
+/** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
+declare function smartCapitalize(value: string): string;
 declare function Label({ text, color, icon, IconComponent: CustomIcon, tooltip, size, textTransform, progress, onClick, className, testId, }: LabelProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Badge - Outline-styled pill badge for displaying counts or short labels
- *
- * Used by:
- * - TabBar, BottomPanelHeader - tab count badges
- * - NavCard - card count badges
- * - Any UI that needs a small inline indicator
- *
- * Features:
- * - Outline variant matching IconButton outline style (border + text, no fill)
- * - Accepts numbers (auto-caps at 99+) or short strings ("New")
- * - 15 color variants
- * - 5 size variants (xss, xs, sm, md, lg)
- */
-type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type BadgeColor = AccentColor;
 interface BadgeProps {
     value: number | string;
     color?: BadgeColor;
@@ -313,19 +308,7 @@ interface BadgeProps {
 }
 declare function Badge({ value, color, size, className, testId, }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-/**
- * ConfirmBadge - Outline-styled check badge for indicating selection/confirmation
- *
- * Used by:
- * - SelectionGrid - selected state indicator on cards
- * - Any UI that needs a small check/confirmed indicator
- *
- * Features:
- * - Outline variant matching IconButton outline style (border + text, no fill)
- * - 15 color variants
- * - 5 size variants (xss, xs, sm, md, lg)
- */
-type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type ConfirmBadgeColor = AccentColor;
 interface ConfirmBadgeProps {
     color?: ConfirmBadgeColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -334,16 +317,8 @@ interface ConfirmBadgeProps {
 }
 declare function ConfirmBadge({ color, size, className, testId, }: ConfirmBadgeProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Checkbox - Controlled checkbox input with check icon
- *
- * Used by:
- * - Settings forms - boolean preference toggles
- * - Filter panels - multi-select filters
- * - List items - selection state
- */
 type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-type CheckboxColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type CheckboxColor = AccentColor;
 type CheckboxVariant = 'outline' | 'filled';
 interface CheckboxProps {
     checked: boolean;
@@ -358,17 +333,8 @@ interface CheckboxProps {
 }
 declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Toggle - iOS-style switch toggle
- *
- * Used by:
- * - Settings pages - boolean preferences
- * - Feature flags - enable/disable features
- * - List items - inline toggle controls
- */
-type ToggleColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type ToggleColor = AccentColor;
 type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-type ToggleVariant = 'outline' | 'filled';
 interface ToggleProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
@@ -376,7 +342,6 @@ interface ToggleProps {
     size?: ToggleSize;
     className?: string;
     color?: ToggleColor;
-    variant?: ToggleVariant;
     /** Test ID for E2E testing */
     testId?: string;
 }
@@ -430,7 +395,7 @@ interface SegmentedToggleProps<T extends string> {
     options: SegmentedToggleOption<T>[];
     value: T;
     onChange: (value: T) => void;
-    accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+    accentColor?: AccentColor;
     /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
     variant?: 'filled' | 'outline';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -620,28 +585,21 @@ interface SelectionGridProps {
 }
 declare function SelectionGrid({ items: itemsProp, presets, selectedIds, onSelect, mode, layout, columns, className, }: SelectionGridProps): react_jsx_runtime.JSX.Element;
 
-/**
- * ExecutionDetailsPanel - Shows AI execution configuration before running actions
- *
- * Displays tool, permissions, output format, CLI flags, and change handling.
- * Optional "Allow direct edits" toggle with warning message.
- * Used inside ActionDialog as the mandatory execution details section.
- */
-interface ExecutionDetailRow {
+interface DetailRow {
     label: string;
     value: string;
     mono?: boolean;
 }
-interface ExecutionDetailsPanelProps {
-    details: ExecutionDetailRow[];
-    /** Show the "Allow direct edits" toggle */
-    allowDirectEdits?: boolean;
-    onAllowDirectEditsChange?: (value: boolean) => void;
-    /** Warning message shown below the toggle */
-    warningMessage?: string;
+interface DetailSectionProps {
+    /** Section title (e.g., "Execution Details") */
+    title: string;
+    /** Icon before the title */
+    icon?: IconName;
+    /** Detail rows to display */
+    rows: DetailRow[];
     className?: string;
 }
-declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
+declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
 
 interface ActionDialogProps {
     /** Dialog title */
@@ -697,7 +655,7 @@ interface ActionDialogProps {
     /** Scenario grid column count */
     scenarioColumns?: number;
     /** Execution detail rows (Tool, Permissions, Output, CLI Flags, Changes) */
-    executionDetails: ExecutionDetailRow[];
+    executionDetails: DetailRow[];
     /** Whether direct file edits are allowed */
     allowDirectEdits?: boolean;
     /** Callback to toggle direct edits - shows the toggle when provided */
@@ -711,6 +669,17 @@ interface ActionDialogProps {
 }
 declare function ActionDialog({ title, subtitle, icon, iconColor, onSettings, onCancel, onSubmit, submitLabel, submitIcon, submitColor, submitDisabled, statusText, selectionLabel, items, presets, selectedIds, onSelect, selectionMode, selectionLayout, selectionColumns, scenarioLabel, scenarios, selectedScenarioIds, onSelectScenarios, scenarioLayout, scenarioColumns, executionDetails, allowDirectEdits, onAllowDirectEditsChange, executionWarning, children, className, }: ActionDialogProps): react.ReactPortal;
 
+interface ExecutionDetailsPanelProps {
+    details: DetailRow[];
+    /** Show the "Allow direct edits" toggle */
+    allowDirectEdits?: boolean;
+    onAllowDirectEditsChange?: (value: boolean) => void;
+    /** Warning message shown below the toggle */
+    warningMessage?: string;
+    className?: string;
+}
+declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
+
 interface FileTreeNode {
     name: string;
     type: 'file' | 'directory';
@@ -731,6 +700,10 @@ declare function collectDirPaths(nodes: FileTreeNode[], rootName?: string, prefi
 declare function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix, expandedPaths, onTogglePath, accentColor }: FileTreeProps): react_jsx_runtime.JSX.Element;
 
 interface EditorToolbarProps {
+    /** Optional title displayed in the toolbar */
+    title?: string;
+    /** Optional description displayed below the title */
+    description?: string;
     /** Whether content has unsaved changes */
     isDirty: boolean;
     /** Whether save operation is in progress */
@@ -755,7 +728,7 @@ interface EditorToolbarProps {
     /** Optional: Additional action buttons on the right side (before save) */
     rightActions?: ActionItem[];
 }
-declare function EditorToolbar({ isDirty, isSaving, onSave, canReset, onReset, resetTooltip, isReadOnly, hasError, leftActions, rightActions, }: EditorToolbarProps): react_jsx_runtime.JSX.Element | null;
+declare function EditorToolbar({ title, description, isDirty, isSaving, onSave, canReset, onReset, resetTooltip, isReadOnly, hasError, leftActions, rightActions, }: EditorToolbarProps): react_jsx_runtime.JSX.Element | null;
 
 /** Status banner configuration for outdated/info messages */
 interface StatusBanner {
@@ -870,7 +843,6 @@ declare function DetailViewWrapper({ editorContent, actions, bottomPanel, rightS
 
 type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings';
 type ExtensionSource = 'project' | 'plugin' | 'user' | 'local';
-declare function formatCategory(category: string): string;
 interface SeedrItemStatus {
     updateAvailable: boolean;
     modified: boolean;
@@ -968,7 +940,6 @@ type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVariant | S
 declare function RegistryCard(props: RegistryCardProps): react_jsx_runtime.JSX.Element;
 
 type PreviewMode = 'format' | 'language' | 'plain';
-type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 interface FileStructureSectionProps {
     files: FileTreeNode[] | null;
     rootName: string;
@@ -2216,8 +2187,9 @@ interface SnippetsEditorProps {
     /** Section description, e.g. "Define snippets to reuse in skills prompts..." */
     description?: string;
     className?: string;
+    accentColor?: string;
 }
-declare function SnippetsEditor({ api, snippets, title, description, className, }: SnippetsEditorProps): react_jsx_runtime.JSX.Element;
+declare function SnippetsEditor({ api, snippets, title, description, className, accentColor, }: SnippetsEditorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useSnippetsEditor — Form state and CRUD hook for the snippets editor
@@ -2336,51 +2308,6 @@ interface ScenarioOption {
     }>;
 }
 
-/**
- * usePromptEditor — Hook managing prompt editor state
- *
- * Part of: Sections > Prompt Editor
- *
- * Handles:
- * - Local content state (separate from saved content for dirty detection)
- * - Dirty state detection
- * - Save with Ctrl/Cmd+S keyboard shortcut
- * - Variable search/filter
- * - Active tab state
- */
-
-interface UsePromptEditorOptions {
-    /** Prompt content keyed by tool id */
-    prompts: Record<string, string>;
-    /** Called when saving (all modified prompts at once) */
-    onPromptChange: (tool: string, value: string) => void;
-    /** Available tool tabs */
-    tools: ToolTab[];
-    /** Available template variables */
-    variables?: PromptPlaceholder[];
-}
-interface UsePromptEditorReturn {
-    /** Currently active tool tab id */
-    activeTab: string;
-    setActiveTab: (tab: string) => void;
-    /** Local editor content (may differ from saved prompts) */
-    localContent: Record<string, string>;
-    /** Current prompt for the active tab */
-    currentPrompt: string;
-    /** Whether any tab has unsaved changes */
-    isDirty: boolean;
-    /** Handle editor content change */
-    handleEditorChange: (value: string | undefined) => void;
-    /** Save all modified prompts */
-    handleSave: () => void;
-    /** Variable search state */
-    variableSearch: string;
-    setVariableSearch: (search: string) => void;
-    /** Filtered variables based on search */
-    filteredVariables: PromptPlaceholder[];
-}
-declare function usePromptEditor({ prompts, onPromptChange, tools, variables, }: UsePromptEditorOptions): UsePromptEditorReturn;
-
 interface TabbedPromptEditorProps {
     /** Prompt content keyed by tool id */
     prompts: Record<string, string>;
@@ -2482,8 +2409,9 @@ interface FilesPanelProps {
     onAction?: (action: string, path: string) => void;
     showSearch?: boolean;
     className?: string;
+    accentColor?: string;
 }
-declare function FilesPanel({ files, selectedPath, onSelect, onAction, showSearch, className, }: FilesPanelProps): react_jsx_runtime.JSX.Element;
+declare function FilesPanel({ files, selectedPath, onSelect, onAction, showSearch, className, accentColor, }: FilesPanelProps): react_jsx_runtime.JSX.Element;
 
 /** Searchable panel for browsing, copying, and inserting code snippets. */
 interface Snippet {
@@ -2668,22 +2596,6 @@ interface SnapshotCardProps {
 }
 declare function SnapshotCard({ title, timestamp, status, description, stats, onSync, onView, className, }: SnapshotCardProps): react_jsx_runtime.JSX.Element;
 
-interface DetailRow {
-    label: string;
-    value: string;
-    mono?: boolean;
-}
-interface DetailSectionProps {
-    /** Section title (e.g., "Execution Details") */
-    title: string;
-    /** Icon before the title */
-    icon?: IconName;
-    /** Detail rows to display */
-    rows: DetailRow[];
-    className?: string;
-}
-declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
-
 type ConsentChoice = 'accepted' | 'declined' | 'essential';
 interface CookieConsentProps {
     /** localStorage key used to persist the choice */
@@ -2700,10 +2612,12 @@ interface CookieConsentProps {
 declare function CookieConsent({ storageKey, accentColor, heading, description, onConsent, }: CookieConsentProps): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Close a menu/dropdown when clicking outside its ref element.
+ * Close a menu/dropdown when clicking outside its ref element(s).
+ * Accepts a single ref, an array of refs, or null.
+ * When given an array, closes only if the click is outside ALL refs.
  * If ref is null, closes on any mousedown event.
  */
-declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOpen: boolean, onClose: () => void): void;
+declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[] | null, isOpen: boolean, onClose: () => void): void;
 
 /**
  * Constrains a dropdown menu's height to fit within the viewport.
@@ -2711,6 +2625,11 @@ declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOp
  */
 declare function useDropdownMaxHeight<T extends HTMLElement>(isOpen: boolean, margin?: number): react.RefObject<T | null>;
 
+/**
+ * Shared modal behavior: Escape key to close + body overflow lock.
+ */
+declare function useModalBehavior(isOpen: boolean, onClose: () => void): void;
+
 /** Hook for managing back/forward navigation history with a breadcrumb segment stack. */
 
 interface UseNavigationHistoryReturn {
@@ -2725,6 +2644,18 @@ interface UseNavigationHistoryReturn {
 }
 declare function useNavigationHistory(initial?: BreadcrumbSegment[], maxEntries?: number): UseNavigationHistoryReturn;
 
+interface UseResizableSidebarOptions {
+    min: number;
+    max: number;
+    defaultWidth: number;
+    /** 'left' = drag right shrinks (sidebar on right), 'right' = drag right grows (sidebar on left) */
+    direction?: 'left' | 'right';
+}
+declare function useResizableSidebar({ min, max, defaultWidth, direction }: UseResizableSidebarOptions): {
+    width: number;
+    onPointerDown: (e: React.PointerEvent) => void;
+};
+
 interface SettingRowBase {
     label: string;
     description?: string;
@@ -2737,7 +2668,6 @@ interface SettingRowToggle extends SettingRowBase {
     onChange: (checked: boolean) => void;
     color?: ToggleColor;
     size?: ToggleSize;
-    variant?: ToggleVariant;
 }
 interface SettingRowSelect extends SettingRowBase {
     type: 'select';
@@ -2767,7 +2697,7 @@ interface SettingsCardProps {
 }
 declare function SettingsCard({ children, className, title, description, testId }: SettingsCardProps): react_jsx_runtime.JSX.Element;
 
-type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal';
+type SettingsInfoBoxColor = AccentColor;
 interface SettingsInfoBoxProps {
     children: React.ReactNode;
     color?: SettingsInfoBoxColor;
@@ -2820,8 +2750,9 @@ interface SettingsTreeNavProps {
     tree: SettingsTreeNode[];
     selectedPath: string;
     onSelectPath: (path: string) => void;
+    accentColor?: string;
 }
-declare function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
+declare function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsHeaderProps {
     description: string;
@@ -2831,7 +2762,6 @@ interface SettingsHeaderProps {
         title: string;
         description: string;
     };
-    confirmReset?: boolean;
     action?: ReactNode;
     variant?: 'default' | 'info' | 'warning' | 'danger';
 }
@@ -2839,4 +2769,4 @@ declare function SettingsHeader({ description, icon, onReset, resetTooltip, acti
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ACCENT_DEFS, AI_TOOL_LOGOS, AI_TOOL_NAMES, type AccentColor, type AccentDef, ActionDialog, type ActionDialogProps, type ActionItem, AiActionButton, type AiActionButtonProps, type AiActionStatus, type AiCompletionResult, AiExecutionActionButtons, type AiExecutionActionButtonsProps, type AiToolConfig, AiToolIcon, type AiToolKey, AlertModal, type AlertModalProps, BASE_THEMES, Badge, type BadgeColor, type BadgeProps, BottomPanelHeader, type BottomPanelHeaderProps, Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment, type CapturedError, type CapturedIssuesApi, CapturedIssuesPanel, type CapturedIssuesPanelProps, type ChangedComponents, Checkbox, type CheckboxColor, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CodingToolId, type CodingToolPresetConfig, CollapseButton, type CollapseButtonProps, CollapsibleSection, type CollapsibleSectionProps, type ComponentVersion, ConfirmBadge, type ConfirmBadgeColor, type ConfirmBadgeProps, ConfirmModal, type ConfirmModalProps, type ConsentChoice, CookieConsent, type CookieConsentProps, type CreateSnapshotResult, DARK_THEMES, DEFAULT_DIMS, DEFAULT_OUTLINE, type DetailRow, DetailSection, type DetailSectionProps, DetailViewWrapper, type DetailViewWrapperProps, type DiffSummary, type DiffTreeNode, type DirectoryStatus, EditorPlaceholderCard, type EditorPlaceholderCardProps, EditorToolbar, type EditorToolbarProps, type ErrorLogger, type ExecutionDetailRow, ExecutionDetailsPanel, type ExecutionDetailsPanelProps, type ExecutionStatus, ExtensionListCard, type ExtensionListCardProps, type ExtensionSource, type FileDiffInfo, type FileDiffStatus, FileDiffViewer, type FileDiffViewerProps, type FileEntry, FileStructureSection, type FileStructureSectionProps, FileTree, type FileTreeNode, type FileTreeProps, type FileTypeOption, FileTypeTabbedPromptEditor, type FileTypeTabbedPromptEditorProps, FilesPanel, type FilesPanelProps, FilterDropdown, type FilterDropdownProps, FormActions, type FormActionsProps, type FormColor, FrontmatterFormHeader, type FrontmatterFormHeaderProps, type GoldenLiveDiff, type GoldenMeta, type GoldenSnapshotsApi, type GoldenStatus, GoldenSyncPanel, type GoldenSyncPanelProps, ISSUE_TYPES, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonStatus, type IconButtonVariant, type IconName, Input, type InputProps, type IssueReport, type IssueReportResult, type IssueType, LIGHT_THEMES, Label, type LabelColor, type LabelProps, type LayoutTab, LayoutTabBar, type LayoutTabBarProps, type ModalKind, type ModalSize, NavCard, type NavCardProps, NavigationBar, type NavigationBarProps, NumberInput, type NumberInputProps, type PanelTab, type PreviewMode, type PromptEditorApi, type PromptPlaceholder, type PromptSnapshot, RegistryBrowser, type RegistryBrowserProps, RegistryCard, type RegistryCardProps, RegistryDetail, type RegistryDetailProps, type RegistryItemType, ReportBugForm, type ReportBugFormProps, type ResetResult, ResizableTextarea, type ResizableTextareaProps, SCALE_KEYS, SNIPPET_NAME_REGEX, SURFACE_KEYS, type ScaleKey, type ScenarioOption, ScopeBadge, type ScopeType, type Screenshot, type ScreenshotAttachment, ScreenshotUploader, type ScreenshotUploaderProps, type SeedInfo, type SeedrItemStatus, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectOption, type SelectProps, type SelectionCardItem, SelectionGrid, type SelectionGridProps, SettingRow, type SettingRowProps, SettingsCard, type SettingsCardProps, SettingsHeader, type SettingsHeaderProps, SettingsInfoBox, type SettingsInfoBoxColor, type SettingsInfoBoxProps, SettingsPanel, type SettingsPanelProps, SettingsSectionTitle, type SettingsSectionTitleProps, SettingsTreeNav, type SettingsTreeNavProps, type SettingsTreeNode, SimulatorPromptEditor, type SimulatorPromptEditorProps, type SnapshotBrowserApi, SnapshotBrowserPanel, type SnapshotBrowserPanelProps, SnapshotCard, type SnapshotCardProps, type SnapshotCategory, type SnapshotEntry, type SnapshotInfo, type SnapshotItem, SnapshotManager, type SnapshotManagerProps, type SnapshotScope, SnapshotTree, type SnapshotTreeProps, type SnapshotsManifest, type Snippet, type SnippetData, SnippetsEditor, type SnippetsEditorApi, type SnippetsEditorProps, SnippetsPanel, type SnippetsPanelProps, SortDropdown, type SortDropdownProps, type SortField, type StatusBanner, StatusCard, type StatusCardProps, type StatusItem, StatusOverview, type StatusOverviewProps, type SubmittedError, type SurfaceKey, type SystemInfo, TOOLR_APPS, type Tab, TabBar, type TabBarProps, TabbedPromptEditor, type TabbedPromptEditorProps, type ThemeId, Toggle, type ToggleColor, type ToggleProps, type ToggleSize, type ToggleVariant, type ToolDetectionResult, type ToolTab, type ToolrAppId, ToolrAppLogo, type ToolsPathsApi, ToolsPathsPanel, type ToolsPathsPanelProps, Tooltip, type TooltipAlign, TooltipButton, type TooltipContent, type TooltipPosition, type TrackedError, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn, type UseGoldenSyncOptions, type UseGoldenSyncReturn, type UseNavigationHistoryReturn, type UsePromptEditorOptions, type UsePromptEditorReturn, type UseReportBugOptions, type UseReportBugReturn, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn, type UseSnippetsEditorOptions, type UseSnippetsEditorReturn, type UseToolsPathsOptions, type UseToolsPathsReturn, VersionManager, type VersionManagerProps, applyTheme, cn, collectDirPaths, collectExpandablePaths, createErrorLogger, filterTree, findNodeByPath, formatBytes, formatCategory, formatDate, generateScale, getAllLeafPaths, getBreadcrumbFromPath, getLanguage, getLanguageFromPath, getParentPaths, hslToHex, iconMap, isLeafNode, isLightTheme, satCurve, submitIssueReport, useCapturedIssues, useClickOutside, useDropdownMaxHeight, useGoldenSync, useNavigationHistory, usePromptEditor, useReportBug, useSnapshotBrowser, useSnippetsEditor, useToolsPaths };
+export { ACCENT_DEFS, ACCENT_ICON, ACCENT_NAV, ACCENT_TEXT, AI_TOOL_LOGOS, AI_TOOL_NAMES, type AccentColor, type AccentDef, ActionDialog, type ActionDialogProps, type ActionItem, AiActionButton, type AiActionButtonProps, type AiActionStatus, type AiCompletionResult, AiExecutionActionButtons, type AiExecutionActionButtonsProps, type AiToolConfig, AiToolIcon, type AiToolKey, AlertModal, type AlertModalProps, BASE_THEMES, Badge, type BadgeColor, type BadgeProps, BottomPanelHeader, type BottomPanelHeaderProps, Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment, type CapturedError, type CapturedIssuesApi, CapturedIssuesPanel, type CapturedIssuesPanelProps, type ChangedComponents, Checkbox, type CheckboxColor, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CodingToolId, type CodingToolPresetConfig, CollapseButton, type CollapseButtonProps, CollapsibleSection, type CollapsibleSectionProps, type ComponentVersion, ConfirmBadge, type ConfirmBadgeColor, type ConfirmBadgeProps, ConfirmModal, type ConfirmModalProps, type ConsentChoice, CookieConsent, type CookieConsentProps, type CreateSnapshotResult, DARK_THEMES, DEFAULT_DIMS, DEFAULT_OUTLINE, type DetailRow, DetailSection, type DetailSectionProps, DetailViewWrapper, type DetailViewWrapperProps, type DiffSummary, type DiffTreeNode, type DirectoryStatus, EditorPlaceholderCard, type EditorPlaceholderCardProps, EditorToolbar, type EditorToolbarProps, type ErrorLogger, ExecutionDetailsPanel, type ExecutionDetailsPanelProps, type ExecutionStatus, ExtensionListCard, type ExtensionListCardProps, type ExtensionSource, type FileDiffInfo, type FileDiffStatus, FileDiffViewer, type FileDiffViewerProps, type FileEntry, FileStructureSection, type FileStructureSectionProps, FileTree, type FileTreeNode, type FileTreeProps, type FileTypeOption, FileTypeTabbedPromptEditor, type FileTypeTabbedPromptEditorProps, FilesPanel, type FilesPanelProps, FilterDropdown, type FilterDropdownProps, FormActions, type FormActionsProps, type FormColor, FrontmatterFormHeader, type FrontmatterFormHeaderProps, type GoldenLiveDiff, type GoldenMeta, type GoldenSnapshotsApi, type GoldenStatus, GoldenSyncPanel, type GoldenSyncPanelProps, ISSUE_TYPES, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonStatus, type IconButtonVariant, type IconName, Input, type InputProps, type IssueReport, type IssueReportResult, type IssueType, LIGHT_THEMES, Label, type LabelColor, type LabelProps, type LayoutTab, LayoutTabBar, type LayoutTabBarProps, type ModalKind, type ModalSize, NavCard, type NavCardProps, NavigationBar, type NavigationBarProps, NumberInput, type NumberInputProps, type PanelTab, type PreviewMode, type PromptEditorApi, type PromptPlaceholder, type PromptSnapshot, RegistryBrowser, type RegistryBrowserProps, RegistryCard, type RegistryCardProps, RegistryDetail, type RegistryDetailProps, type RegistryItemType, ReportBugForm, type ReportBugFormProps, type ResetResult, ResizableTextarea, type ResizableTextareaProps, SCALE_KEYS, SNIPPET_NAME_REGEX, SURFACE_KEYS, type ScaleKey, type ScenarioOption, ScopeBadge, type ScopeType, type Screenshot, type ScreenshotAttachment, ScreenshotUploader, type ScreenshotUploaderProps, type SeedInfo, type SeedrItemStatus, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectOption, type SelectProps, type SelectionCardItem, SelectionGrid, type SelectionGridProps, SettingRow, type SettingRowProps, SettingsCard, type SettingsCardProps, SettingsHeader, type SettingsHeaderProps, SettingsInfoBox, type SettingsInfoBoxColor, type SettingsInfoBoxProps, SettingsPanel, type SettingsPanelProps, SettingsSectionTitle, type SettingsSectionTitleProps, SettingsTreeNav, type SettingsTreeNavProps, type SettingsTreeNode, SimulatorPromptEditor, type SimulatorPromptEditorProps, type SnapshotBrowserApi, SnapshotBrowserPanel, type SnapshotBrowserPanelProps, SnapshotCard, type SnapshotCardProps, type SnapshotCategory, type SnapshotEntry, type SnapshotInfo, type SnapshotItem, SnapshotManager, type SnapshotManagerProps, type SnapshotScope, SnapshotTree, type SnapshotTreeProps, type SnapshotsManifest, type Snippet, type SnippetData, SnippetsEditor, type SnippetsEditorApi, type SnippetsEditorProps, SnippetsPanel, type SnippetsPanelProps, SortDropdown, type SortDropdownProps, type SortField, type StatusBanner, StatusCard, type StatusCardProps, type StatusItem, StatusOverview, type StatusOverviewProps, type SubmittedError, type SurfaceKey, type SystemInfo, TOOLR_APPS, type Tab, TabBar, type TabBarProps, TabbedPromptEditor, type TabbedPromptEditorProps, type ThemeId, Toggle, type ToggleColor, type ToggleProps, type ToggleSize, type ToolDetectionResult, type ToolTab, type ToolrAppId, ToolrAppLogo, type ToolsPathsApi, ToolsPathsPanel, type ToolsPathsPanelProps, Tooltip, type TooltipAlign, TooltipButton, type TooltipContent, type TooltipPosition, type TrackedError, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn, type UseGoldenSyncOptions, type UseGoldenSyncReturn, type UseNavigationHistoryReturn, type UseReportBugOptions, type UseReportBugReturn, type UseResizableSidebarOptions, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn, type UseSnippetsEditorOptions, type UseSnippetsEditorReturn, type UseToolsPathsOptions, type UseToolsPathsReturn, VersionManager, type VersionManagerProps, applyTheme, cn, collectDirPaths, collectExpandablePaths, createErrorLogger, filterTree, findNodeByPath, formatBytes, formatDate, generateScale, getAllLeafPaths, getBreadcrumbFromPath, getLanguage, getLanguageFromPath, getParentPaths, hslToHex, iconMap, isLeafNode, isLightTheme, satCurve, smartCapitalize, submitIssueReport, useCapturedIssues, useClickOutside, useDropdownMaxHeight, useGoldenSync, useModalBehavior, useNavigationHistory, useReportBug, useResizableSidebar, useSnapshotBrowser, useSnippetsEditor, useToolsPaths };