@toolr/ui-design 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -7,9 +7,9 @@ import { ClassValue } from 'clsx';
 
 type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky';
 
-declare const SCALE_KEYS: readonly ["black", "950", "900", "800", "700", "600", "500", "400", "300", "200"];
+declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
 type ScaleKey = (typeof SCALE_KEYS)[number];
-type ThemeId = 'oled' | 'dark' | 'night' | 'soft' | 'bright' | 'paper' | 'muted';
+type ThemeId = 'dark' | 'light';
 declare const DARK_THEMES: ThemeId[];
 declare const LIGHT_THEMES: ThemeId[];
 declare const BASE_THEMES: Record<ThemeId, {
@@ -25,9 +25,13 @@ interface AccentDef {
 declare const ACCENT_DEFS: AccentDef[];
 declare function satCurve(l: number): number;
 declare function hslToHex(h: number, s: number, l: number): string;
-declare function generateScale(theme: ThemeId, hue: number | null, maxSat: number): Record<ScaleKey, string>;
+declare const SURFACE_KEYS: readonly ["950", "900", "850", "800", "750"];
+type SurfaceKey = (typeof SURFACE_KEYS)[number];
+declare const DEFAULT_DIMS: Record<SurfaceKey, number>;
+declare const DEFAULT_OUTLINE = 30;
+declare function generateScale(theme: ThemeId, hue: number | null, maxSat: number, dims?: Record<SurfaceKey, number>, outline?: number): Record<ScaleKey, string>;
 declare function isLightTheme(themeId: ThemeId): boolean;
-declare function applyTheme(themeId: ThemeId, accentHue: number | null, root?: HTMLElement): void;
+declare function applyTheme(themeId: ThemeId, accentHue: number | null, dims?: Record<SurfaceKey, number>, outline?: number, root?: HTMLElement): void;
 
 type ToolrAppId = 'toolr' | 'configr' | 'reviewr' | 'vibr' | 'learnr' | 'planr' | 'seedr';
 declare const TOOLR_APPS: Record<ToolrAppId, {
@@ -266,11 +270,13 @@ interface LabelProps {
     };
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     textTransform?: 'capitalize' | 'lowercase' | 'uppercase';
+    /** Progress fill (0–100). Shows a colored background bar behind the label content. */
+    progress?: number;
     onClick?: () => void;
     className?: string;
     testId?: string;
 }
-declare function Label({ text, color, icon, IconComponent: CustomIcon, tooltip, size, textTransform, onClick, className, testId, }: LabelProps): react_jsx_runtime.JSX.Element;
+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
@@ -405,7 +411,8 @@ declare function ScopeBadge({ scope, size }: ScopeBadgeProps): react_jsx_runtime
 
 interface SegmentedToggleOption<T extends string> {
     value: T;
-    icon: ReactNode;
+    icon?: ReactNode;
+    label?: string;
     tooltip: TooltipContent;
 }
 interface SegmentedToggleProps<T extends string> {
@@ -2525,9 +2532,11 @@ interface BreadcrumbProps {
     segments: BreadcrumbSegment[];
     separator?: 'chevron' | 'slash' | 'dot';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    /** 'box' (default) wraps in a bordered container; 'plain' renders inline with no background */
+    variant?: 'box' | 'plain';
     className?: string;
 }
-declare function Breadcrumb({ segments, separator, size, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function Breadcrumb({ segments, separator, size, variant, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
 interface NavigationBarProps {
     segments: BreadcrumbSegment[];
@@ -2683,6 +2692,21 @@ interface DetailSectionProps {
 }
 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 */
+    storageKey: string;
+    /** Accent color for the "Accept All" button (default: 'cyan') */
+    accentColor?: string;
+    /** Heading text (default: 'We value your privacy') */
+    heading?: string;
+    /** Description text */
+    description?: string;
+    /** Called after the user makes a choice */
+    onConsent?: (choice: ConsentChoice) => void;
+}
+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.
  * If ref is null, closes on any mousedown event.
@@ -2709,6 +2733,53 @@ interface UseNavigationHistoryReturn {
 }
 declare function useNavigationHistory(initial?: BreadcrumbSegment[], maxEntries?: number): UseNavigationHistoryReturn;
 
+type SettingsTreeNode = {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    children?: SettingsTreeNode[];
+};
+declare function findNodeByPath(tree: SettingsTreeNode[], path: string): SettingsTreeNode | null;
+declare function getBreadcrumbFromPath(tree: SettingsTreeNode[], path: string): Array<{
+    label: string;
+    icon: ReactNode;
+    path: string;
+}>;
+declare function isLeafNode(node: SettingsTreeNode): boolean;
+declare function getAllLeafPaths(tree: SettingsTreeNode[], parentPath?: string): string[];
+declare function collectExpandablePaths(nodes: SettingsTreeNode[], parentPath?: string): string[];
+declare function getParentPaths(path: string): string[];
+declare function filterTree(nodes: SettingsTreeNode[], query: string, parentPath?: string): SettingsTreeNode[];
+
+interface SettingsPanelProps {
+    tree: SettingsTreeNode[];
+    selectedPath: string;
+    onSelectPath: (path: string) => void;
+    children: ReactNode;
+}
+declare function SettingsPanel({ tree, selectedPath, onSelectPath, children }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsTreeNavProps {
+    tree: SettingsTreeNode[];
+    selectedPath: string;
+    onSelectPath: (path: string) => void;
+}
+declare function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
+
+interface SettingsHeaderProps {
+    description: string;
+    icon?: ReactNode;
+    onReset?: () => void;
+    resetTooltip?: {
+        title: string;
+        description: string;
+    };
+    confirmReset?: boolean;
+    action?: ReactNode;
+    variant?: 'default' | 'info' | 'warning' | 'danger';
+}
+declare function SettingsHeader({ description, icon, onReset, resetTooltip, action, variant, }: SettingsHeaderProps): react_jsx_runtime.JSX.Element;
+
 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 CreateSnapshotResult, DARK_THEMES, 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, 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, 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 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, createErrorLogger, formatBytes, formatCategory, formatDate, generateScale, getLanguage, getLanguageFromPath, hslToHex, iconMap, 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, 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 };