@toolr/ui-design 0.1.2 → 0.1.3

package/components/ui/settings-info-box.tsx

@@ -0,0 +1,80 @@
+import { Info, AlertTriangle, CheckCircle, AlertCircle } from 'lucide-react'
+import { cn } from '../lib/cn.ts'
+
+export type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal'
+
+export interface SettingsInfoBoxProps {
+  children: React.ReactNode
+  color?: SettingsInfoBoxColor
+  className?: string
+  testId?: string
+}
+
+const iconMap: Record<SettingsInfoBoxColor, typeof Info> = {
+  neutral: Info,
+  blue: Info,
+  amber: AlertTriangle,
+  green: CheckCircle,
+  red: AlertCircle,
+  orange: Info,
+  cyan: Info,
+  yellow: Info,
+  purple: Info,
+  indigo: Info,
+  emerald: Info,
+  violet: Info,
+  sky: Info,
+  pink: Info,
+  teal: Info,
+}
+
+const iconColorMap: Record<SettingsInfoBoxColor, string> = {
+  neutral: 'text-neutral-500',
+  blue: 'text-blue-400',
+  amber: 'text-amber-400',
+  green: 'text-green-400',
+  red: 'text-red-400',
+  orange: 'text-orange-400',
+  cyan: 'text-cyan-400',
+  yellow: 'text-yellow-400',
+  purple: 'text-purple-400',
+  indigo: 'text-indigo-400',
+  emerald: 'text-emerald-400',
+  violet: 'text-violet-400',
+  sky: 'text-sky-400',
+  pink: 'text-pink-400',
+  teal: 'text-teal-400',
+}
+
+const borderColorMap: Record<SettingsInfoBoxColor, string> = {
+  neutral: 'border-l-neutral-600',
+  blue: 'border-l-blue-500',
+  amber: 'border-l-amber-500',
+  green: 'border-l-green-500',
+  red: 'border-l-red-500',
+  orange: 'border-l-orange-500',
+  cyan: 'border-l-cyan-500',
+  yellow: 'border-l-yellow-500',
+  purple: 'border-l-purple-500',
+  indigo: 'border-l-indigo-500',
+  emerald: 'border-l-emerald-500',
+  violet: 'border-l-violet-500',
+  sky: 'border-l-sky-500',
+  pink: 'border-l-pink-500',
+  teal: 'border-l-teal-500',
+}
+
+export function SettingsInfoBox({ children, color = 'neutral', className, testId }: SettingsInfoBoxProps) {
+  const Icon = iconMap[color]
+
+  return (
+    <div
+      className={cn('flex items-start gap-3 border-l-2', borderColorMap[color], className)}
+      style={{ paddingLeft: 10 }}
+      data-testid={testId}
+    >
+      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', iconColorMap[color])} />
+      <div className="text-sm text-neutral-500">{children}</div>
+    </div>
+  )
+}

package/components/ui/settings-section-title.tsx

@@ -0,0 +1,24 @@
+/**
+ * SettingsSectionTitle - Section header for settings pages
+ *
+ * Used by:
+ * - Settings pages - grouping related settings under a heading
+ * - Configuration panels - section dividers
+ */
+
+export interface SettingsSectionTitleProps {
+  children: React.ReactNode
+  className?: string
+  testId?: string
+}
+
+export function SettingsSectionTitle({ children, className = '', testId }: SettingsSectionTitleProps) {
+  return (
+    <h3
+      className={`text-xs font-medium text-neutral-400 uppercase tracking-wider ${className}`}
+      data-testid={testId}
+    >
+      {children}
+    </h3>
+  )
+}

package/components/ui/sort-dropdown.tsx

@@ -88,7 +88,7 @@ export function SortDropdown({
       </button>
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
           {fields.map((f, idx) => (
             <button
               key={f.value}

package/components/ui/tooltip.tsx

@@ -258,7 +258,7 @@ export function Tooltip({
   const tooltipContent = (
     <div
       ref={tooltipRef}
-      className={`fixed px-3 py-1.5 bg-[var(--popover)] backdrop-blur border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
       style={{
         top: coords.top,
         left: coords.left,

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as lucide_react from 'lucide-react';
 import { LucideIcon } from 'lucide-react';
 import { ClassValue } from 'clsx';
 
-type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky';
+type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 
 declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
 type ScaleKey = (typeof SCALE_KEYS)[number];
@@ -221,7 +221,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';
+type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 type IconButtonVariant = 'filled' | 'outline';
 interface IconButtonProps {
     icon: IconName | ReactNode;
@@ -250,11 +250,12 @@ interface CollapseButtonProps {
     collapsed: boolean;
     onToggle: () => void;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    color?: IconButtonColor;
     tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right';
 }
-declare function CollapseButton({ collapsed, onToggle, size, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
+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';
+type LabelColor = 'neutral' | 'green' | 'red' | 'blue' | 'yellow' | 'orange' | 'purple' | 'amber' | 'emerald' | 'cyan' | 'indigo' | 'teal' | 'violet' | 'pink' | 'sky';
 interface LabelProps {
     text: string;
     color: LabelColor;
@@ -289,10 +290,10 @@ declare function Label({ text, color, icon, IconComponent: CustomIcon, tooltip,
  * Features:
  * - Outline variant matching IconButton outline style (border + text, no fill)
  * - Accepts numbers (auto-caps at 99+) or short strings ("New")
- * - 13 color variants
+ * - 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';
+type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 interface BadgeProps {
     value: number | string;
     color?: BadgeColor;
@@ -311,10 +312,10 @@ declare function Badge({ value, color, size, className, testId, }: BadgeProps):
  *
  * Features:
  * - Outline variant matching IconButton outline style (border + text, no fill)
- * - 13 color variants
+ * - 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';
+type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 interface ConfirmBadgeProps {
     color?: ConfirmBadgeColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -419,7 +420,7 @@ interface SegmentedToggleProps<T extends string> {
     options: SegmentedToggleOption<T>[];
     value: T;
     onChange: (value: T) => void;
-    accentColor?: 'blue' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky';
+    accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
     /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
     variant?: 'filled' | 'outline';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -700,39 +701,6 @@ 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 SettingRowBase {
-    label: string;
-    description?: string;
-    disabled?: boolean;
-    className?: string;
-}
-interface SettingRowToggle extends SettingRowBase {
-    type: 'toggle';
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-    color?: ToggleColor;
-    size?: ToggleSize;
-    variant?: ToggleVariant;
-}
-interface SettingRowSelect extends SettingRowBase {
-    type: 'select';
-    value: string;
-    options: SelectOption[];
-    onChange: (value: string) => void;
-    selectSize?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-    selectVariant?: 'filled' | 'outline';
-}
-interface SettingRowInput extends SettingRowBase {
-    type: 'input';
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    inputSize?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-    inputVariant?: 'filled' | 'outline';
-}
-type SettingRowProps = SettingRowToggle | SettingRowSelect | SettingRowInput;
-declare function SettingRow(props: SettingRowProps): react_jsx_runtime.JSX.Element;
-
 interface FileTreeNode {
     name: string;
     type: 'file' | 'directory';
@@ -990,10 +958,11 @@ type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVariant | S
 declare function RegistryCard(props: RegistryCardProps): react_jsx_runtime.JSX.Element;
 
 type PreviewMode = 'format' | 'language' | 'plain';
-type AccentColor = 'blue' | 'purple' | 'orange' | 'green' | 'pink' | 'amber' | 'emerald' | 'teal' | 'sky';
+type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 interface FileStructureSectionProps {
     files: FileTreeNode[] | null;
     rootName: string;
+    variant?: 'split' | 'list';
     isLoading?: boolean;
     error?: string | null;
     onFetchContent: (relativePath: string) => Promise<string>;
@@ -1011,9 +980,11 @@ interface FileStructureSectionProps {
     accentColor?: AccentColor;
     /** Custom renderer called when mode is 'language'. Receives the resolved language as third arg. */
     renderPreview?: (content: string, filePath: string, language: string) => ReactNode;
+    /** Initial height in pixels. Defaults to 400 for 'list', 250 for 'split'. */
+    initialHeight?: number;
 }
 declare function getLanguageFromPath(filePath: string): string;
-declare function FileStructureSection({ files, rootName, isLoading, error, onFetchContent, format, language, default: defaultMode, accentColor, renderPreview, }: FileStructureSectionProps): react_jsx_runtime.JSX.Element | null;
+declare function FileStructureSection({ files, rootName, variant, isLoading, error, onFetchContent, format, language, default: defaultMode, accentColor, renderPreview, initialHeight, }: FileStructureSectionProps): react_jsx_runtime.JSX.Element | null;
 
 interface RegistryDetailProps {
     icon: LucideIcon;
@@ -1029,12 +1000,13 @@ interface RegistryDetailProps {
     compatibleTools?: string[];
     files?: FileStructureSectionProps['files'];
     rootName?: string;
+    fileStructureVariant?: FileStructureSectionProps['variant'];
     onFetchContent?: FileStructureSectionProps['onFetchContent'];
     aboveHeader?: ReactNode;
     maxWidth?: string;
     children?: ReactNode;
 }
-declare function RegistryDetail({ icon: Icon, iconColor, title, titleExtra, subtitle, actionButton, labels, description, longDescription, integration, compatibleTools, files, rootName, onFetchContent, aboveHeader, maxWidth, children, }: RegistryDetailProps): react_jsx_runtime.JSX.Element;
+declare function RegistryDetail({ icon: Icon, iconColor, title, titleExtra, subtitle, actionButton, labels, description, longDescription, integration, compatibleTools, files, rootName, fileStructureVariant, onFetchContent, aboveHeader, maxWidth, children, }: RegistryDetailProps): react_jsx_runtime.JSX.Element;
 
 interface RegistryBrowserProps {
     isLoading: boolean;
@@ -2733,6 +2705,71 @@ interface UseNavigationHistoryReturn {
 }
 declare function useNavigationHistory(initial?: BreadcrumbSegment[], maxEntries?: number): UseNavigationHistoryReturn;
 
+interface SettingRowBase {
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    className?: string;
+}
+interface SettingRowToggle extends SettingRowBase {
+    type: 'toggle';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    color?: ToggleColor;
+    size?: ToggleSize;
+    variant?: ToggleVariant;
+}
+interface SettingRowSelect extends SettingRowBase {
+    type: 'select';
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+    selectSize?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    selectVariant?: 'filled' | 'outline';
+}
+interface SettingRowInput extends SettingRowBase {
+    type: 'input';
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    inputSize?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    inputVariant?: 'filled' | 'outline';
+}
+type SettingRowProps = SettingRowToggle | SettingRowSelect | SettingRowInput;
+declare function SettingRow(props: SettingRowProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsCardProps {
+    children: React.ReactNode;
+    className?: string;
+    title?: string;
+    description?: string;
+    testId?: string;
+}
+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';
+interface SettingsInfoBoxProps {
+    children: React.ReactNode;
+    color?: SettingsInfoBoxColor;
+    className?: string;
+    testId?: string;
+}
+declare function SettingsInfoBox({ children, color, className, testId }: SettingsInfoBoxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SettingsSectionTitle - Section header for settings pages
+ *
+ * Used by:
+ * - Settings pages - grouping related settings under a heading
+ * - Configuration panels - section dividers
+ */
+interface SettingsSectionTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    testId?: string;
+}
+declare function SettingsSectionTitle({ children, className, testId }: SettingsSectionTitleProps): react_jsx_runtime.JSX.Element;
+
 type SettingsTreeNode = {
     id: string;
     label: string;
@@ -2782,4 +2819,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, SettingsHeader, type SettingsHeaderProps, SettingsPanel, type SettingsPanelProps, 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, 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 };