@toolr/ui-design 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/hooks/use-click-outside.ts +10 -3
- package/components/hooks/use-modal-behavior.ts +53 -0
- package/components/hooks/use-navigation-history.ts +7 -2
- package/components/hooks/use-resizable-sidebar.ts +38 -0
- package/components/lib/form-colors.ts +40 -0
- package/components/sections/captured-issues/captured-issues-panel.tsx +3 -3
- package/components/sections/captured-issues/use-captured-issues.ts +9 -3
- package/components/sections/golden-snapshots/file-diff-viewer.tsx +1 -1
- package/components/sections/golden-snapshots/status-overview.tsx +1 -1
- package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx +4 -40
- package/components/sections/prompt-editor/index.ts +0 -7
- package/components/sections/prompt-editor/simulator-prompt-editor.tsx +4 -40
- package/components/sections/prompt-editor/tabbed-prompt-editor.tsx +4 -36
- package/components/sections/snippets-editor/snippets-editor.tsx +6 -39
- package/components/settings/SettingsHeader.tsx +0 -1
- package/components/settings/SettingsTreeNav.tsx +9 -12
- package/components/ui/action-dialog.tsx +19 -55
- package/components/ui/ai-action-button.tsx +2 -4
- package/components/ui/badge.tsx +15 -23
- package/components/ui/breadcrumb.tsx +11 -71
- package/components/ui/checkbox.tsx +19 -27
- package/components/ui/collapsible-section.tsx +4 -41
- package/components/ui/confirm-badge.tsx +14 -23
- package/components/ui/cookie-consent.tsx +18 -2
- package/components/ui/debounce-border-overlay.tsx +31 -0
- package/components/ui/detail-section.tsx +2 -19
- package/components/ui/editor-placeholder-card.tsx +10 -9
- package/components/ui/execution-details-panel.tsx +2 -7
- package/components/ui/extension-list-card.tsx +1 -1
- package/components/ui/file-structure-section.tsx +3 -18
- package/components/ui/file-tree.tsx +6 -18
- package/components/ui/files-panel.tsx +3 -11
- package/components/ui/filter-dropdown.tsx +5 -2
- package/components/ui/form-actions.tsx +11 -8
- package/components/ui/icon-button.tsx +7 -6
- package/components/ui/input.tsx +18 -29
- package/components/ui/label.tsx +7 -17
- package/components/ui/layout-tab-bar.tsx +5 -5
- package/components/ui/modal.tsx +10 -18
- package/components/ui/nav-card.tsx +3 -18
- package/components/ui/navigation-bar.tsx +12 -73
- package/components/ui/number-input.tsx +6 -0
- package/components/ui/registry-browser.tsx +6 -20
- package/components/ui/registry-card.tsx +3 -7
- package/components/ui/resizable-textarea.tsx +13 -35
- package/components/ui/segmented-toggle.tsx +4 -1
- package/components/ui/select.tsx +8 -14
- package/components/ui/selection-grid.tsx +6 -50
- package/components/ui/setting-row.tsx +5 -5
- package/components/ui/settings-card.tsx +2 -2
- package/components/ui/settings-info-box.tsx +6 -24
- package/components/ui/sort-dropdown.tsx +8 -5
- package/components/ui/status-card.tsx +2 -13
- package/components/ui/tab-bar.tsx +17 -33
- package/components/ui/toggle.tsx +22 -30
- package/components/ui/tooltip.tsx +11 -23
- package/dist/index.d.ts +71 -142
- package/dist/index.js +1630 -2436
- package/index.ts +8 -7
- package/package.json +9 -1
- package/components/sections/prompt-editor/use-prompt-editor.ts +0 -131
package/dist/index.d.ts
CHANGED
|
@@ -6,6 +6,13 @@ import { LucideIcon } from 'lucide-react';
|
|
|
6
6
|
import { ClassValue } from 'clsx';
|
|
7
7
|
|
|
8
8
|
type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
|
|
9
|
+
type AccentColor = FormColor;
|
|
10
|
+
declare const ACCENT_TEXT: Record<AccentColor, string>;
|
|
11
|
+
declare const ACCENT_ICON: Record<FormColor, string>;
|
|
12
|
+
declare const ACCENT_NAV: Record<AccentColor, {
|
|
13
|
+
bg: string;
|
|
14
|
+
text: string;
|
|
15
|
+
}>;
|
|
9
16
|
|
|
10
17
|
declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
|
|
11
18
|
type ScaleKey = (typeof SCALE_KEYS)[number];
|
|
@@ -231,7 +238,7 @@ interface ActionItem {
|
|
|
231
238
|
testId?: string;
|
|
232
239
|
}
|
|
233
240
|
type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error';
|
|
234
|
-
type IconButtonColor =
|
|
241
|
+
type IconButtonColor = AccentColor;
|
|
235
242
|
type IconButtonVariant = 'filled' | 'outline';
|
|
236
243
|
interface IconButtonProps {
|
|
237
244
|
icon: IconName | ReactNode;
|
|
@@ -265,7 +272,7 @@ interface CollapseButtonProps {
|
|
|
265
272
|
}
|
|
266
273
|
declare function CollapseButton({ collapsed, onToggle, size, color, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
|
|
267
274
|
|
|
268
|
-
type LabelColor =
|
|
275
|
+
type LabelColor = AccentColor;
|
|
269
276
|
interface LabelProps {
|
|
270
277
|
text: string;
|
|
271
278
|
color: LabelColor;
|
|
@@ -287,23 +294,11 @@ interface LabelProps {
|
|
|
287
294
|
className?: string;
|
|
288
295
|
testId?: string;
|
|
289
296
|
}
|
|
297
|
+
/** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
|
|
298
|
+
declare function smartCapitalize(value: string): string;
|
|
290
299
|
declare function Label({ text, color, icon, IconComponent: CustomIcon, tooltip, size, textTransform, progress, onClick, className, testId, }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
291
300
|
|
|
292
|
-
|
|
293
|
-
* Badge - Outline-styled pill badge for displaying counts or short labels
|
|
294
|
-
*
|
|
295
|
-
* Used by:
|
|
296
|
-
* - TabBar, BottomPanelHeader - tab count badges
|
|
297
|
-
* - NavCard - card count badges
|
|
298
|
-
* - Any UI that needs a small inline indicator
|
|
299
|
-
*
|
|
300
|
-
* Features:
|
|
301
|
-
* - Outline variant matching IconButton outline style (border + text, no fill)
|
|
302
|
-
* - Accepts numbers (auto-caps at 99+) or short strings ("New")
|
|
303
|
-
* - 15 color variants
|
|
304
|
-
* - 5 size variants (xss, xs, sm, md, lg)
|
|
305
|
-
*/
|
|
306
|
-
type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
|
|
301
|
+
type BadgeColor = AccentColor;
|
|
307
302
|
interface BadgeProps {
|
|
308
303
|
value: number | string;
|
|
309
304
|
color?: BadgeColor;
|
|
@@ -311,39 +306,19 @@ interface BadgeProps {
|
|
|
311
306
|
className?: string;
|
|
312
307
|
testId?: string;
|
|
313
308
|
}
|
|
314
|
-
declare
|
|
309
|
+
declare const Badge: react.NamedExoticComponent<BadgeProps>;
|
|
315
310
|
|
|
316
|
-
|
|
317
|
-
* ConfirmBadge - Outline-styled check badge for indicating selection/confirmation
|
|
318
|
-
*
|
|
319
|
-
* Used by:
|
|
320
|
-
* - SelectionGrid - selected state indicator on cards
|
|
321
|
-
* - Any UI that needs a small check/confirmed indicator
|
|
322
|
-
*
|
|
323
|
-
* Features:
|
|
324
|
-
* - Outline variant matching IconButton outline style (border + text, no fill)
|
|
325
|
-
* - 15 color variants
|
|
326
|
-
* - 5 size variants (xss, xs, sm, md, lg)
|
|
327
|
-
*/
|
|
328
|
-
type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
|
|
311
|
+
type ConfirmBadgeColor = AccentColor;
|
|
329
312
|
interface ConfirmBadgeProps {
|
|
330
313
|
color?: ConfirmBadgeColor;
|
|
331
314
|
size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
|
|
332
315
|
className?: string;
|
|
333
316
|
testId?: string;
|
|
334
317
|
}
|
|
335
|
-
declare
|
|
318
|
+
declare const ConfirmBadge: react.NamedExoticComponent<ConfirmBadgeProps>;
|
|
336
319
|
|
|
337
|
-
/**
|
|
338
|
-
* Checkbox - Controlled checkbox input with check icon
|
|
339
|
-
*
|
|
340
|
-
* Used by:
|
|
341
|
-
* - Settings forms - boolean preference toggles
|
|
342
|
-
* - Filter panels - multi-select filters
|
|
343
|
-
* - List items - selection state
|
|
344
|
-
*/
|
|
345
320
|
type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
|
|
346
|
-
type CheckboxColor =
|
|
321
|
+
type CheckboxColor = AccentColor;
|
|
347
322
|
type CheckboxVariant = 'outline' | 'filled';
|
|
348
323
|
interface CheckboxProps {
|
|
349
324
|
checked: boolean;
|
|
@@ -353,22 +328,15 @@ interface CheckboxProps {
|
|
|
353
328
|
color?: CheckboxColor;
|
|
354
329
|
variant?: CheckboxVariant;
|
|
355
330
|
className?: string;
|
|
331
|
+
/** Accessible label — required for screen readers */
|
|
332
|
+
'aria-label'?: string;
|
|
356
333
|
/** Test ID for E2E testing */
|
|
357
334
|
testId?: string;
|
|
358
335
|
}
|
|
359
|
-
declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
336
|
+
declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, 'aria-label': ariaLabel, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
360
337
|
|
|
361
|
-
|
|
362
|
-
* Toggle - iOS-style switch toggle
|
|
363
|
-
*
|
|
364
|
-
* Used by:
|
|
365
|
-
* - Settings pages - boolean preferences
|
|
366
|
-
* - Feature flags - enable/disable features
|
|
367
|
-
* - List items - inline toggle controls
|
|
368
|
-
*/
|
|
369
|
-
type ToggleColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
|
|
338
|
+
type ToggleColor = AccentColor;
|
|
370
339
|
type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
|
|
371
|
-
type ToggleVariant = 'outline' | 'filled';
|
|
372
340
|
interface ToggleProps {
|
|
373
341
|
checked: boolean;
|
|
374
342
|
onChange: (checked: boolean) => void;
|
|
@@ -376,11 +344,12 @@ interface ToggleProps {
|
|
|
376
344
|
size?: ToggleSize;
|
|
377
345
|
className?: string;
|
|
378
346
|
color?: ToggleColor;
|
|
379
|
-
|
|
347
|
+
/** Accessible label — required for screen readers */
|
|
348
|
+
'aria-label'?: string;
|
|
380
349
|
/** Test ID for E2E testing */
|
|
381
350
|
testId?: string;
|
|
382
351
|
}
|
|
383
|
-
declare function Toggle({ checked, onChange, disabled, size, className, color, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
|
|
352
|
+
declare function Toggle({ checked, onChange, disabled, size, className, color, 'aria-label': ariaLabel, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
|
|
384
353
|
|
|
385
354
|
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
|
|
386
355
|
value: string;
|
|
@@ -410,8 +379,10 @@ interface NumberInputProps {
|
|
|
410
379
|
size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
|
|
411
380
|
disabled?: boolean;
|
|
412
381
|
className?: string;
|
|
382
|
+
/** Accessible label — required for screen readers */
|
|
383
|
+
'aria-label'?: string;
|
|
413
384
|
}
|
|
414
|
-
declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, }: NumberInputProps): react_jsx_runtime.JSX.Element;
|
|
385
|
+
declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, 'aria-label': ariaLabel, }: NumberInputProps): react_jsx_runtime.JSX.Element;
|
|
415
386
|
|
|
416
387
|
type ScopeType = 'user' | 'project' | 'local' | 'read-only';
|
|
417
388
|
interface ScopeBadgeProps {
|
|
@@ -430,7 +401,7 @@ interface SegmentedToggleProps<T extends string> {
|
|
|
430
401
|
options: SegmentedToggleOption<T>[];
|
|
431
402
|
value: T;
|
|
432
403
|
onChange: (value: T) => void;
|
|
433
|
-
accentColor?:
|
|
404
|
+
accentColor?: AccentColor;
|
|
434
405
|
/** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
|
|
435
406
|
variant?: 'filled' | 'outline';
|
|
436
407
|
size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
|
|
@@ -620,28 +591,21 @@ interface SelectionGridProps {
|
|
|
620
591
|
}
|
|
621
592
|
declare function SelectionGrid({ items: itemsProp, presets, selectedIds, onSelect, mode, layout, columns, className, }: SelectionGridProps): react_jsx_runtime.JSX.Element;
|
|
622
593
|
|
|
623
|
-
|
|
624
|
-
* ExecutionDetailsPanel - Shows AI execution configuration before running actions
|
|
625
|
-
*
|
|
626
|
-
* Displays tool, permissions, output format, CLI flags, and change handling.
|
|
627
|
-
* Optional "Allow direct edits" toggle with warning message.
|
|
628
|
-
* Used inside ActionDialog as the mandatory execution details section.
|
|
629
|
-
*/
|
|
630
|
-
interface ExecutionDetailRow {
|
|
594
|
+
interface DetailRow {
|
|
631
595
|
label: string;
|
|
632
596
|
value: string;
|
|
633
597
|
mono?: boolean;
|
|
634
598
|
}
|
|
635
|
-
interface
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
/**
|
|
641
|
-
|
|
599
|
+
interface DetailSectionProps {
|
|
600
|
+
/** Section title (e.g., "Execution Details") */
|
|
601
|
+
title: string;
|
|
602
|
+
/** Icon before the title */
|
|
603
|
+
icon?: IconName;
|
|
604
|
+
/** Detail rows to display */
|
|
605
|
+
rows: DetailRow[];
|
|
642
606
|
className?: string;
|
|
643
607
|
}
|
|
644
|
-
declare function
|
|
608
|
+
declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
|
|
645
609
|
|
|
646
610
|
interface ActionDialogProps {
|
|
647
611
|
/** Dialog title */
|
|
@@ -697,7 +661,7 @@ interface ActionDialogProps {
|
|
|
697
661
|
/** Scenario grid column count */
|
|
698
662
|
scenarioColumns?: number;
|
|
699
663
|
/** Execution detail rows (Tool, Permissions, Output, CLI Flags, Changes) */
|
|
700
|
-
executionDetails:
|
|
664
|
+
executionDetails: DetailRow[];
|
|
701
665
|
/** Whether direct file edits are allowed */
|
|
702
666
|
allowDirectEdits?: boolean;
|
|
703
667
|
/** Callback to toggle direct edits - shows the toggle when provided */
|
|
@@ -711,6 +675,17 @@ interface ActionDialogProps {
|
|
|
711
675
|
}
|
|
712
676
|
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;
|
|
713
677
|
|
|
678
|
+
interface ExecutionDetailsPanelProps {
|
|
679
|
+
details: DetailRow[];
|
|
680
|
+
/** Show the "Allow direct edits" toggle */
|
|
681
|
+
allowDirectEdits?: boolean;
|
|
682
|
+
onAllowDirectEditsChange?: (value: boolean) => void;
|
|
683
|
+
/** Warning message shown below the toggle */
|
|
684
|
+
warningMessage?: string;
|
|
685
|
+
className?: string;
|
|
686
|
+
}
|
|
687
|
+
declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
|
|
688
|
+
|
|
714
689
|
interface FileTreeNode {
|
|
715
690
|
name: string;
|
|
716
691
|
type: 'file' | 'directory';
|
|
@@ -874,7 +849,6 @@ declare function DetailViewWrapper({ editorContent, actions, bottomPanel, rightS
|
|
|
874
849
|
|
|
875
850
|
type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings';
|
|
876
851
|
type ExtensionSource = 'project' | 'plugin' | 'user' | 'local';
|
|
877
|
-
declare function formatCategory(category: string): string;
|
|
878
852
|
interface SeedrItemStatus {
|
|
879
853
|
updateAvailable: boolean;
|
|
880
854
|
modified: boolean;
|
|
@@ -972,7 +946,6 @@ type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVariant | S
|
|
|
972
946
|
declare function RegistryCard(props: RegistryCardProps): react_jsx_runtime.JSX.Element;
|
|
973
947
|
|
|
974
948
|
type PreviewMode = 'format' | 'language' | 'plain';
|
|
975
|
-
type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
|
|
976
949
|
interface FileStructureSectionProps {
|
|
977
950
|
files: FileTreeNode[] | null;
|
|
978
951
|
rootName: string;
|
|
@@ -2341,51 +2314,6 @@ interface ScenarioOption {
|
|
|
2341
2314
|
}>;
|
|
2342
2315
|
}
|
|
2343
2316
|
|
|
2344
|
-
/**
|
|
2345
|
-
* usePromptEditor — Hook managing prompt editor state
|
|
2346
|
-
*
|
|
2347
|
-
* Part of: Sections > Prompt Editor
|
|
2348
|
-
*
|
|
2349
|
-
* Handles:
|
|
2350
|
-
* - Local content state (separate from saved content for dirty detection)
|
|
2351
|
-
* - Dirty state detection
|
|
2352
|
-
* - Save with Ctrl/Cmd+S keyboard shortcut
|
|
2353
|
-
* - Variable search/filter
|
|
2354
|
-
* - Active tab state
|
|
2355
|
-
*/
|
|
2356
|
-
|
|
2357
|
-
interface UsePromptEditorOptions {
|
|
2358
|
-
/** Prompt content keyed by tool id */
|
|
2359
|
-
prompts: Record<string, string>;
|
|
2360
|
-
/** Called when saving (all modified prompts at once) */
|
|
2361
|
-
onPromptChange: (tool: string, value: string) => void;
|
|
2362
|
-
/** Available tool tabs */
|
|
2363
|
-
tools: ToolTab[];
|
|
2364
|
-
/** Available template variables */
|
|
2365
|
-
variables?: PromptPlaceholder[];
|
|
2366
|
-
}
|
|
2367
|
-
interface UsePromptEditorReturn {
|
|
2368
|
-
/** Currently active tool tab id */
|
|
2369
|
-
activeTab: string;
|
|
2370
|
-
setActiveTab: (tab: string) => void;
|
|
2371
|
-
/** Local editor content (may differ from saved prompts) */
|
|
2372
|
-
localContent: Record<string, string>;
|
|
2373
|
-
/** Current prompt for the active tab */
|
|
2374
|
-
currentPrompt: string;
|
|
2375
|
-
/** Whether any tab has unsaved changes */
|
|
2376
|
-
isDirty: boolean;
|
|
2377
|
-
/** Handle editor content change */
|
|
2378
|
-
handleEditorChange: (value: string | undefined) => void;
|
|
2379
|
-
/** Save all modified prompts */
|
|
2380
|
-
handleSave: () => void;
|
|
2381
|
-
/** Variable search state */
|
|
2382
|
-
variableSearch: string;
|
|
2383
|
-
setVariableSearch: (search: string) => void;
|
|
2384
|
-
/** Filtered variables based on search */
|
|
2385
|
-
filteredVariables: PromptPlaceholder[];
|
|
2386
|
-
}
|
|
2387
|
-
declare function usePromptEditor({ prompts, onPromptChange, tools, variables, }: UsePromptEditorOptions): UsePromptEditorReturn;
|
|
2388
|
-
|
|
2389
2317
|
interface TabbedPromptEditorProps {
|
|
2390
2318
|
/** Prompt content keyed by tool id */
|
|
2391
2319
|
prompts: Record<string, string>;
|
|
@@ -2674,22 +2602,6 @@ interface SnapshotCardProps {
|
|
|
2674
2602
|
}
|
|
2675
2603
|
declare function SnapshotCard({ title, timestamp, status, description, stats, onSync, onView, className, }: SnapshotCardProps): react_jsx_runtime.JSX.Element;
|
|
2676
2604
|
|
|
2677
|
-
interface DetailRow {
|
|
2678
|
-
label: string;
|
|
2679
|
-
value: string;
|
|
2680
|
-
mono?: boolean;
|
|
2681
|
-
}
|
|
2682
|
-
interface DetailSectionProps {
|
|
2683
|
-
/** Section title (e.g., "Execution Details") */
|
|
2684
|
-
title: string;
|
|
2685
|
-
/** Icon before the title */
|
|
2686
|
-
icon?: IconName;
|
|
2687
|
-
/** Detail rows to display */
|
|
2688
|
-
rows: DetailRow[];
|
|
2689
|
-
className?: string;
|
|
2690
|
-
}
|
|
2691
|
-
declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
|
|
2692
|
-
|
|
2693
2605
|
type ConsentChoice = 'accepted' | 'declined' | 'essential';
|
|
2694
2606
|
interface CookieConsentProps {
|
|
2695
2607
|
/** localStorage key used to persist the choice */
|
|
@@ -2706,10 +2618,12 @@ interface CookieConsentProps {
|
|
|
2706
2618
|
declare function CookieConsent({ storageKey, accentColor, heading, description, onConsent, }: CookieConsentProps): react_jsx_runtime.JSX.Element | null;
|
|
2707
2619
|
|
|
2708
2620
|
/**
|
|
2709
|
-
* Close a menu/dropdown when clicking outside its ref element.
|
|
2621
|
+
* Close a menu/dropdown when clicking outside its ref element(s).
|
|
2622
|
+
* Accepts a single ref, an array of refs, or null.
|
|
2623
|
+
* When given an array, closes only if the click is outside ALL refs.
|
|
2710
2624
|
* If ref is null, closes on any mousedown event.
|
|
2711
2625
|
*/
|
|
2712
|
-
declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOpen: boolean, onClose: () => void): void;
|
|
2626
|
+
declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[] | null, isOpen: boolean, onClose: () => void): void;
|
|
2713
2627
|
|
|
2714
2628
|
/**
|
|
2715
2629
|
* Constrains a dropdown menu's height to fit within the viewport.
|
|
@@ -2717,6 +2631,11 @@ declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOp
|
|
|
2717
2631
|
*/
|
|
2718
2632
|
declare function useDropdownMaxHeight<T extends HTMLElement>(isOpen: boolean, margin?: number): react.RefObject<T | null>;
|
|
2719
2633
|
|
|
2634
|
+
/**
|
|
2635
|
+
* Shared modal behavior: Escape key to close + body overflow lock + focus trap.
|
|
2636
|
+
*/
|
|
2637
|
+
declare function useModalBehavior(isOpen: boolean, onClose: () => void, containerRef?: RefObject<HTMLElement | null>): void;
|
|
2638
|
+
|
|
2720
2639
|
/** Hook for managing back/forward navigation history with a breadcrumb segment stack. */
|
|
2721
2640
|
|
|
2722
2641
|
interface UseNavigationHistoryReturn {
|
|
@@ -2731,6 +2650,18 @@ interface UseNavigationHistoryReturn {
|
|
|
2731
2650
|
}
|
|
2732
2651
|
declare function useNavigationHistory(initial?: BreadcrumbSegment[], maxEntries?: number): UseNavigationHistoryReturn;
|
|
2733
2652
|
|
|
2653
|
+
interface UseResizableSidebarOptions {
|
|
2654
|
+
min: number;
|
|
2655
|
+
max: number;
|
|
2656
|
+
defaultWidth: number;
|
|
2657
|
+
/** 'left' = drag right shrinks (sidebar on right), 'right' = drag right grows (sidebar on left) */
|
|
2658
|
+
direction?: 'left' | 'right';
|
|
2659
|
+
}
|
|
2660
|
+
declare function useResizableSidebar({ min, max, defaultWidth, direction }: UseResizableSidebarOptions): {
|
|
2661
|
+
width: number;
|
|
2662
|
+
onPointerDown: (e: React.PointerEvent) => void;
|
|
2663
|
+
};
|
|
2664
|
+
|
|
2734
2665
|
interface SettingRowBase {
|
|
2735
2666
|
label: string;
|
|
2736
2667
|
description?: string;
|
|
@@ -2743,7 +2674,6 @@ interface SettingRowToggle extends SettingRowBase {
|
|
|
2743
2674
|
onChange: (checked: boolean) => void;
|
|
2744
2675
|
color?: ToggleColor;
|
|
2745
2676
|
size?: ToggleSize;
|
|
2746
|
-
variant?: ToggleVariant;
|
|
2747
2677
|
}
|
|
2748
2678
|
interface SettingRowSelect extends SettingRowBase {
|
|
2749
2679
|
type: 'select';
|
|
@@ -2773,7 +2703,7 @@ interface SettingsCardProps {
|
|
|
2773
2703
|
}
|
|
2774
2704
|
declare function SettingsCard({ children, className, title, description, testId }: SettingsCardProps): react_jsx_runtime.JSX.Element;
|
|
2775
2705
|
|
|
2776
|
-
type SettingsInfoBoxColor =
|
|
2706
|
+
type SettingsInfoBoxColor = AccentColor;
|
|
2777
2707
|
interface SettingsInfoBoxProps {
|
|
2778
2708
|
children: React.ReactNode;
|
|
2779
2709
|
color?: SettingsInfoBoxColor;
|
|
@@ -2838,7 +2768,6 @@ interface SettingsHeaderProps {
|
|
|
2838
2768
|
title: string;
|
|
2839
2769
|
description: string;
|
|
2840
2770
|
};
|
|
2841
|
-
confirmReset?: boolean;
|
|
2842
2771
|
action?: ReactNode;
|
|
2843
2772
|
variant?: 'default' | 'info' | 'warning' | 'danger';
|
|
2844
2773
|
}
|
|
@@ -2846,4 +2775,4 @@ declare function SettingsHeader({ description, icon, onReset, resetTooltip, acti
|
|
|
2846
2775
|
|
|
2847
2776
|
declare function cn(...inputs: ClassValue[]): string;
|
|
2848
2777
|
|
|
2849
|
-
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,
|
|
2778
|
+
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 };
|