@particle-academy/react-fancy 3.0.0 → 3.1.0
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/README.md +15 -0
- package/dist/index.cjs +790 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +234 -1
- package/dist/index.d.ts +234 -1
- package/dist/index.js +787 -3
- package/dist/index.js.map +1 -1
- package/docs/MagicWand.md +65 -0
- package/docs/MoodMeter.md +63 -0
- package/docs/PromptInput.md +69 -0
- package/docs/ReasonTag.md +63 -0
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -2385,4 +2385,237 @@ interface UseNodeRegistryReturn {
|
|
|
2385
2385
|
}
|
|
2386
2386
|
declare function useNodeRegistry(): UseNodeRegistryReturn;
|
|
2387
2387
|
|
|
2388
|
-
|
|
2388
|
+
/**
|
|
2389
|
+
* ReasonTag — wraps any value with a small affordance that reveals the
|
|
2390
|
+
* agent's reasoning, sources, and confidence on hover or click.
|
|
2391
|
+
*
|
|
2392
|
+
* <ReasonTag
|
|
2393
|
+
* value="$1.4M"
|
|
2394
|
+
* reason="Projected Q3 ARR after stacking renewals."
|
|
2395
|
+
* confidence={0.91}
|
|
2396
|
+
* sources={[{ label: "Q2 actuals · CRM export" }]}
|
|
2397
|
+
* by="Forecaster"
|
|
2398
|
+
* />
|
|
2399
|
+
*
|
|
2400
|
+
* Three visual styles:
|
|
2401
|
+
* • "dot" — value with a tiny coloured dot (default, subtle)
|
|
2402
|
+
* • "underline" — dotted underline + trailing "?"
|
|
2403
|
+
* • "chip" — full coloured pill (loud)
|
|
2404
|
+
*
|
|
2405
|
+
* Confidence drives the colour via three tiers (high / medium / low),
|
|
2406
|
+
* so a quick visual scan tells the human which suggestions deserve a
|
|
2407
|
+
* second look without opening any tooltips.
|
|
2408
|
+
*
|
|
2409
|
+
* `pinned` swaps the popover for an inline annotation slot — useful
|
|
2410
|
+
* when explainability should always be visible, not buried in a hover.
|
|
2411
|
+
*/
|
|
2412
|
+
type ReasonTagSource = {
|
|
2413
|
+
label: string;
|
|
2414
|
+
href?: string;
|
|
2415
|
+
};
|
|
2416
|
+
type ReasonTagTheme = "dot" | "underline" | "chip";
|
|
2417
|
+
interface ReasonTagProps {
|
|
2418
|
+
/** The value the tag wraps — usually a number, label, or short phrase. */
|
|
2419
|
+
value: React.ReactNode;
|
|
2420
|
+
/** Free-text rationale shown in the popover / inline annotation. */
|
|
2421
|
+
reason: string;
|
|
2422
|
+
/** 0..1 confidence. Drives the tier colour. Defaults to 1. */
|
|
2423
|
+
confidence?: number;
|
|
2424
|
+
/** Optional list of sources (label + optional href). */
|
|
2425
|
+
sources?: ReasonTagSource[];
|
|
2426
|
+
/** Optional author / agent name shown in the popover header. */
|
|
2427
|
+
by?: string;
|
|
2428
|
+
/** Visual treatment for the trigger. */
|
|
2429
|
+
theme?: ReasonTagTheme;
|
|
2430
|
+
/**
|
|
2431
|
+
* When true, the popover is replaced with an always-visible inline
|
|
2432
|
+
* annotation below the value.
|
|
2433
|
+
*/
|
|
2434
|
+
pinned?: boolean;
|
|
2435
|
+
/** Called when the user hits the "ask follow-up" action. */
|
|
2436
|
+
onFollowUp?: () => void;
|
|
2437
|
+
/** Optional className applied to the trigger element. */
|
|
2438
|
+
className?: string;
|
|
2439
|
+
}
|
|
2440
|
+
declare function ReasonTag({ value, reason, confidence, sources, by, theme, pinned, onFollowUp, className, }: ReasonTagProps): react_jsx_runtime.JSX.Element;
|
|
2441
|
+
|
|
2442
|
+
/**
|
|
2443
|
+
* MoodMeter — a 2D draggable pad that captures a value AND the
|
|
2444
|
+
* confidence in that value on the same handle.
|
|
2445
|
+
*
|
|
2446
|
+
* <MoodMeter
|
|
2447
|
+
* min={0} max={1}
|
|
2448
|
+
* value={value} confidence={confidence}
|
|
2449
|
+
* onChange={(v, c) => { setValue(v); setConfidence(c); }}
|
|
2450
|
+
* />
|
|
2451
|
+
*
|
|
2452
|
+
* • x-axis maps to [min..max]
|
|
2453
|
+
* • y-axis maps to [0..1] confidence (top = sure)
|
|
2454
|
+
* • the halo around the handle scales inversely with confidence —
|
|
2455
|
+
* uncertain readings literally look fuzzier
|
|
2456
|
+
*
|
|
2457
|
+
* Why pair them in one control? When AIs post a number, humans
|
|
2458
|
+
* immediately ask "how sure are you?". Making confidence an explicit
|
|
2459
|
+
* sibling of value — and letting the user drag either independently —
|
|
2460
|
+
* turns vague "AI suggestion" UX into something you can argue with
|
|
2461
|
+
* precisely.
|
|
2462
|
+
*
|
|
2463
|
+
* The agent's posted value/confidence renders as a dashed ghost
|
|
2464
|
+
* handle alongside the live user handle, so the human can see where
|
|
2465
|
+
* the agent landed and how far they've drifted.
|
|
2466
|
+
*/
|
|
2467
|
+
interface MoodMeterProps {
|
|
2468
|
+
/** Range minimum. */
|
|
2469
|
+
min: number;
|
|
2470
|
+
/** Range maximum. */
|
|
2471
|
+
max: number;
|
|
2472
|
+
/** Step for value snapping. Defaults to (max-min)/100. */
|
|
2473
|
+
step?: number;
|
|
2474
|
+
/** Current value (controlled). */
|
|
2475
|
+
value: number;
|
|
2476
|
+
/** Current confidence 0..1 (controlled). */
|
|
2477
|
+
confidence: number;
|
|
2478
|
+
/** Called with (value, confidence) on drag / pointer events. */
|
|
2479
|
+
onChange: (value: number, confidence: number) => void;
|
|
2480
|
+
/** Optional agent post — renders as a dashed ghost handle. */
|
|
2481
|
+
posted?: {
|
|
2482
|
+
value: number;
|
|
2483
|
+
confidence: number;
|
|
2484
|
+
};
|
|
2485
|
+
/** Pixel width of the pad. Defaults to 320. */
|
|
2486
|
+
width?: number;
|
|
2487
|
+
/** Pixel height of the pad. Defaults to 220. */
|
|
2488
|
+
height?: number;
|
|
2489
|
+
/** Show the grid + axis labels. Defaults to true. */
|
|
2490
|
+
showGrid?: boolean;
|
|
2491
|
+
/** Color of the user handle. Defaults to sky blue. */
|
|
2492
|
+
color?: string;
|
|
2493
|
+
/** Color of the posted-ghost handle. Defaults to violet. */
|
|
2494
|
+
postedColor?: string;
|
|
2495
|
+
/** Optional prefix for the value label (e.g. "$"). */
|
|
2496
|
+
prefix?: string;
|
|
2497
|
+
/** Optional suffix for the value label (e.g. "k", "%"). */
|
|
2498
|
+
suffix?: string;
|
|
2499
|
+
/** Optional label text override. Falls back to formatted value. */
|
|
2500
|
+
formatValue?: (v: number) => string;
|
|
2501
|
+
/** Optional className applied to the outer pad. */
|
|
2502
|
+
className?: string;
|
|
2503
|
+
}
|
|
2504
|
+
declare function MoodMeter({ min, max, step, value, confidence, onChange, posted, width, height, showGrid, color, postedColor, prefix, suffix, formatValue, className, }: MoodMeterProps): react_jsx_runtime.JSX.Element;
|
|
2505
|
+
|
|
2506
|
+
/**
|
|
2507
|
+
* PromptInput — the chat composer every AI app rebuilds. Auto-growing
|
|
2508
|
+
* multi-line input with:
|
|
2509
|
+
*
|
|
2510
|
+
* • slash-command picker (`/` triggers a filtered command palette,
|
|
2511
|
+
* ↑/↓ navigate, Enter inserts)
|
|
2512
|
+
* • mention picker (`@` triggers, filtered against `mentions`)
|
|
2513
|
+
* • drop-to-attach (drag files anywhere on the surface) + chip bar
|
|
2514
|
+
* • submit on ⌘/Ctrl+Enter (plain Enter inserts a newline)
|
|
2515
|
+
* • live token-budget meter (green → amber → red as headroom drops)
|
|
2516
|
+
*
|
|
2517
|
+
* Wire it up:
|
|
2518
|
+
*
|
|
2519
|
+
* <PromptInput
|
|
2520
|
+
* budgetTokens={32000}
|
|
2521
|
+
* commands={[{ name: "/rewrite", hint: "rewrite the selection" }]}
|
|
2522
|
+
* mentions={[{ id: "ada", name: "Ada", kind: "person" }]}
|
|
2523
|
+
* onSubmit={(text, attachments) => sendToAgent(text, attachments)}
|
|
2524
|
+
* />
|
|
2525
|
+
*/
|
|
2526
|
+
type PromptCmd = {
|
|
2527
|
+
name: string;
|
|
2528
|
+
hint: string;
|
|
2529
|
+
};
|
|
2530
|
+
type PromptMention = {
|
|
2531
|
+
id: string;
|
|
2532
|
+
name: string;
|
|
2533
|
+
kind: "agent" | "file" | "person" | string;
|
|
2534
|
+
};
|
|
2535
|
+
type PromptAttachment = {
|
|
2536
|
+
id: string;
|
|
2537
|
+
name: string;
|
|
2538
|
+
bytes: number;
|
|
2539
|
+
};
|
|
2540
|
+
interface PromptInputProps {
|
|
2541
|
+
/** Token budget for the meter. */
|
|
2542
|
+
budgetTokens: number;
|
|
2543
|
+
/** Slash-commands. Names must start with `/`. */
|
|
2544
|
+
commands?: PromptCmd[];
|
|
2545
|
+
/** @-mentions. */
|
|
2546
|
+
mentions?: PromptMention[];
|
|
2547
|
+
/** Show the keyboard hint ("⌘ + Enter to send"). */
|
|
2548
|
+
showHint?: boolean;
|
|
2549
|
+
/** Called on ⌘/Ctrl+Enter or send button. */
|
|
2550
|
+
onSubmit: (text: string, attachments: PromptAttachment[]) => void;
|
|
2551
|
+
/** Placeholder text. */
|
|
2552
|
+
placeholder?: string;
|
|
2553
|
+
/** Rough estimator: chars-per-token. Defaults to 4. */
|
|
2554
|
+
charsPerToken?: number;
|
|
2555
|
+
/** Color → CSS chip mapping for mention kinds. */
|
|
2556
|
+
mentionColor?: Record<string, string>;
|
|
2557
|
+
/** Optional max textarea height in px. Defaults to 280. */
|
|
2558
|
+
maxHeight?: number;
|
|
2559
|
+
}
|
|
2560
|
+
declare function PromptInput({ budgetTokens, commands, mentions, showHint, onSubmit, placeholder, charsPerToken, mentionColor, maxHeight, }: PromptInputProps): react_jsx_runtime.JSX.Element;
|
|
2561
|
+
|
|
2562
|
+
/**
|
|
2563
|
+
* MagicWand — selection-anchored floating toolbar for text inputs.
|
|
2564
|
+
*
|
|
2565
|
+
* When the user highlights text inside the wrapped <Textarea>, a small
|
|
2566
|
+
* pill of AI quick-actions floats above the selection. Clicking an
|
|
2567
|
+
* action invokes the host callback with the selected substring + range;
|
|
2568
|
+
* the host returns a replacement string and MagicWand swaps it in-place.
|
|
2569
|
+
*
|
|
2570
|
+
* <MagicWand
|
|
2571
|
+
* value={body}
|
|
2572
|
+
* onValueChange={setBody}
|
|
2573
|
+
* actions={[
|
|
2574
|
+
* { id: "rephrase", label: "Rephrase", hint: "same meaning, different words",
|
|
2575
|
+
* run: async (s) => await ai.rephrase(s) },
|
|
2576
|
+
* …
|
|
2577
|
+
* ]}
|
|
2578
|
+
* />
|
|
2579
|
+
*
|
|
2580
|
+
* Two appearances: `"floating"` (default — full labels) and `"pill"`
|
|
2581
|
+
* (icon-only, compact). Auto-hides on click-away or scroll by default.
|
|
2582
|
+
*/
|
|
2583
|
+
type MagicWandSelection = {
|
|
2584
|
+
start: number;
|
|
2585
|
+
end: number;
|
|
2586
|
+
text: string;
|
|
2587
|
+
};
|
|
2588
|
+
type MagicWandAction = {
|
|
2589
|
+
/** Stable id, also shown as the busy-state key. */
|
|
2590
|
+
id: string;
|
|
2591
|
+
/** Display label (first character used in `pill` mode). */
|
|
2592
|
+
label: string;
|
|
2593
|
+
/** Tooltip body. */
|
|
2594
|
+
hint?: string;
|
|
2595
|
+
/** Optional kind chip rendered next to the label. */
|
|
2596
|
+
tag?: string;
|
|
2597
|
+
/** Returns the replacement text for the selection. */
|
|
2598
|
+
run: (selection: string, range: MagicWandSelection) => Promise<string> | string;
|
|
2599
|
+
};
|
|
2600
|
+
type MagicWandAppearance = "pill" | "floating";
|
|
2601
|
+
interface MagicWandProps {
|
|
2602
|
+
/** Controlled textarea value. */
|
|
2603
|
+
value: string;
|
|
2604
|
+
/** Called on every edit. */
|
|
2605
|
+
onValueChange: (v: string) => void;
|
|
2606
|
+
/** Action list. */
|
|
2607
|
+
actions: MagicWandAction[];
|
|
2608
|
+
/** Visual treatment. Defaults to "floating". */
|
|
2609
|
+
appearance?: MagicWandAppearance;
|
|
2610
|
+
/** Auto-hide the wand on click-away or scroll. Defaults to true. */
|
|
2611
|
+
autoHide?: boolean;
|
|
2612
|
+
/** Textarea rows. */
|
|
2613
|
+
rows?: number;
|
|
2614
|
+
/** Placeholder. */
|
|
2615
|
+
placeholder?: string;
|
|
2616
|
+
/** Called after an action runs successfully. */
|
|
2617
|
+
onAction?: (action: MagicWandAction, selection: MagicWandSelection, replacement: string) => void;
|
|
2618
|
+
}
|
|
2619
|
+
declare function MagicWand({ value, onValueChange, actions, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react_jsx_runtime.JSX.Element;
|
|
2620
|
+
|
|
2621
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
package/dist/index.d.ts
CHANGED
|
@@ -2385,4 +2385,237 @@ interface UseNodeRegistryReturn {
|
|
|
2385
2385
|
}
|
|
2386
2386
|
declare function useNodeRegistry(): UseNodeRegistryReturn;
|
|
2387
2387
|
|
|
2388
|
-
|
|
2388
|
+
/**
|
|
2389
|
+
* ReasonTag — wraps any value with a small affordance that reveals the
|
|
2390
|
+
* agent's reasoning, sources, and confidence on hover or click.
|
|
2391
|
+
*
|
|
2392
|
+
* <ReasonTag
|
|
2393
|
+
* value="$1.4M"
|
|
2394
|
+
* reason="Projected Q3 ARR after stacking renewals."
|
|
2395
|
+
* confidence={0.91}
|
|
2396
|
+
* sources={[{ label: "Q2 actuals · CRM export" }]}
|
|
2397
|
+
* by="Forecaster"
|
|
2398
|
+
* />
|
|
2399
|
+
*
|
|
2400
|
+
* Three visual styles:
|
|
2401
|
+
* • "dot" — value with a tiny coloured dot (default, subtle)
|
|
2402
|
+
* • "underline" — dotted underline + trailing "?"
|
|
2403
|
+
* • "chip" — full coloured pill (loud)
|
|
2404
|
+
*
|
|
2405
|
+
* Confidence drives the colour via three tiers (high / medium / low),
|
|
2406
|
+
* so a quick visual scan tells the human which suggestions deserve a
|
|
2407
|
+
* second look without opening any tooltips.
|
|
2408
|
+
*
|
|
2409
|
+
* `pinned` swaps the popover for an inline annotation slot — useful
|
|
2410
|
+
* when explainability should always be visible, not buried in a hover.
|
|
2411
|
+
*/
|
|
2412
|
+
type ReasonTagSource = {
|
|
2413
|
+
label: string;
|
|
2414
|
+
href?: string;
|
|
2415
|
+
};
|
|
2416
|
+
type ReasonTagTheme = "dot" | "underline" | "chip";
|
|
2417
|
+
interface ReasonTagProps {
|
|
2418
|
+
/** The value the tag wraps — usually a number, label, or short phrase. */
|
|
2419
|
+
value: React.ReactNode;
|
|
2420
|
+
/** Free-text rationale shown in the popover / inline annotation. */
|
|
2421
|
+
reason: string;
|
|
2422
|
+
/** 0..1 confidence. Drives the tier colour. Defaults to 1. */
|
|
2423
|
+
confidence?: number;
|
|
2424
|
+
/** Optional list of sources (label + optional href). */
|
|
2425
|
+
sources?: ReasonTagSource[];
|
|
2426
|
+
/** Optional author / agent name shown in the popover header. */
|
|
2427
|
+
by?: string;
|
|
2428
|
+
/** Visual treatment for the trigger. */
|
|
2429
|
+
theme?: ReasonTagTheme;
|
|
2430
|
+
/**
|
|
2431
|
+
* When true, the popover is replaced with an always-visible inline
|
|
2432
|
+
* annotation below the value.
|
|
2433
|
+
*/
|
|
2434
|
+
pinned?: boolean;
|
|
2435
|
+
/** Called when the user hits the "ask follow-up" action. */
|
|
2436
|
+
onFollowUp?: () => void;
|
|
2437
|
+
/** Optional className applied to the trigger element. */
|
|
2438
|
+
className?: string;
|
|
2439
|
+
}
|
|
2440
|
+
declare function ReasonTag({ value, reason, confidence, sources, by, theme, pinned, onFollowUp, className, }: ReasonTagProps): react_jsx_runtime.JSX.Element;
|
|
2441
|
+
|
|
2442
|
+
/**
|
|
2443
|
+
* MoodMeter — a 2D draggable pad that captures a value AND the
|
|
2444
|
+
* confidence in that value on the same handle.
|
|
2445
|
+
*
|
|
2446
|
+
* <MoodMeter
|
|
2447
|
+
* min={0} max={1}
|
|
2448
|
+
* value={value} confidence={confidence}
|
|
2449
|
+
* onChange={(v, c) => { setValue(v); setConfidence(c); }}
|
|
2450
|
+
* />
|
|
2451
|
+
*
|
|
2452
|
+
* • x-axis maps to [min..max]
|
|
2453
|
+
* • y-axis maps to [0..1] confidence (top = sure)
|
|
2454
|
+
* • the halo around the handle scales inversely with confidence —
|
|
2455
|
+
* uncertain readings literally look fuzzier
|
|
2456
|
+
*
|
|
2457
|
+
* Why pair them in one control? When AIs post a number, humans
|
|
2458
|
+
* immediately ask "how sure are you?". Making confidence an explicit
|
|
2459
|
+
* sibling of value — and letting the user drag either independently —
|
|
2460
|
+
* turns vague "AI suggestion" UX into something you can argue with
|
|
2461
|
+
* precisely.
|
|
2462
|
+
*
|
|
2463
|
+
* The agent's posted value/confidence renders as a dashed ghost
|
|
2464
|
+
* handle alongside the live user handle, so the human can see where
|
|
2465
|
+
* the agent landed and how far they've drifted.
|
|
2466
|
+
*/
|
|
2467
|
+
interface MoodMeterProps {
|
|
2468
|
+
/** Range minimum. */
|
|
2469
|
+
min: number;
|
|
2470
|
+
/** Range maximum. */
|
|
2471
|
+
max: number;
|
|
2472
|
+
/** Step for value snapping. Defaults to (max-min)/100. */
|
|
2473
|
+
step?: number;
|
|
2474
|
+
/** Current value (controlled). */
|
|
2475
|
+
value: number;
|
|
2476
|
+
/** Current confidence 0..1 (controlled). */
|
|
2477
|
+
confidence: number;
|
|
2478
|
+
/** Called with (value, confidence) on drag / pointer events. */
|
|
2479
|
+
onChange: (value: number, confidence: number) => void;
|
|
2480
|
+
/** Optional agent post — renders as a dashed ghost handle. */
|
|
2481
|
+
posted?: {
|
|
2482
|
+
value: number;
|
|
2483
|
+
confidence: number;
|
|
2484
|
+
};
|
|
2485
|
+
/** Pixel width of the pad. Defaults to 320. */
|
|
2486
|
+
width?: number;
|
|
2487
|
+
/** Pixel height of the pad. Defaults to 220. */
|
|
2488
|
+
height?: number;
|
|
2489
|
+
/** Show the grid + axis labels. Defaults to true. */
|
|
2490
|
+
showGrid?: boolean;
|
|
2491
|
+
/** Color of the user handle. Defaults to sky blue. */
|
|
2492
|
+
color?: string;
|
|
2493
|
+
/** Color of the posted-ghost handle. Defaults to violet. */
|
|
2494
|
+
postedColor?: string;
|
|
2495
|
+
/** Optional prefix for the value label (e.g. "$"). */
|
|
2496
|
+
prefix?: string;
|
|
2497
|
+
/** Optional suffix for the value label (e.g. "k", "%"). */
|
|
2498
|
+
suffix?: string;
|
|
2499
|
+
/** Optional label text override. Falls back to formatted value. */
|
|
2500
|
+
formatValue?: (v: number) => string;
|
|
2501
|
+
/** Optional className applied to the outer pad. */
|
|
2502
|
+
className?: string;
|
|
2503
|
+
}
|
|
2504
|
+
declare function MoodMeter({ min, max, step, value, confidence, onChange, posted, width, height, showGrid, color, postedColor, prefix, suffix, formatValue, className, }: MoodMeterProps): react_jsx_runtime.JSX.Element;
|
|
2505
|
+
|
|
2506
|
+
/**
|
|
2507
|
+
* PromptInput — the chat composer every AI app rebuilds. Auto-growing
|
|
2508
|
+
* multi-line input with:
|
|
2509
|
+
*
|
|
2510
|
+
* • slash-command picker (`/` triggers a filtered command palette,
|
|
2511
|
+
* ↑/↓ navigate, Enter inserts)
|
|
2512
|
+
* • mention picker (`@` triggers, filtered against `mentions`)
|
|
2513
|
+
* • drop-to-attach (drag files anywhere on the surface) + chip bar
|
|
2514
|
+
* • submit on ⌘/Ctrl+Enter (plain Enter inserts a newline)
|
|
2515
|
+
* • live token-budget meter (green → amber → red as headroom drops)
|
|
2516
|
+
*
|
|
2517
|
+
* Wire it up:
|
|
2518
|
+
*
|
|
2519
|
+
* <PromptInput
|
|
2520
|
+
* budgetTokens={32000}
|
|
2521
|
+
* commands={[{ name: "/rewrite", hint: "rewrite the selection" }]}
|
|
2522
|
+
* mentions={[{ id: "ada", name: "Ada", kind: "person" }]}
|
|
2523
|
+
* onSubmit={(text, attachments) => sendToAgent(text, attachments)}
|
|
2524
|
+
* />
|
|
2525
|
+
*/
|
|
2526
|
+
type PromptCmd = {
|
|
2527
|
+
name: string;
|
|
2528
|
+
hint: string;
|
|
2529
|
+
};
|
|
2530
|
+
type PromptMention = {
|
|
2531
|
+
id: string;
|
|
2532
|
+
name: string;
|
|
2533
|
+
kind: "agent" | "file" | "person" | string;
|
|
2534
|
+
};
|
|
2535
|
+
type PromptAttachment = {
|
|
2536
|
+
id: string;
|
|
2537
|
+
name: string;
|
|
2538
|
+
bytes: number;
|
|
2539
|
+
};
|
|
2540
|
+
interface PromptInputProps {
|
|
2541
|
+
/** Token budget for the meter. */
|
|
2542
|
+
budgetTokens: number;
|
|
2543
|
+
/** Slash-commands. Names must start with `/`. */
|
|
2544
|
+
commands?: PromptCmd[];
|
|
2545
|
+
/** @-mentions. */
|
|
2546
|
+
mentions?: PromptMention[];
|
|
2547
|
+
/** Show the keyboard hint ("⌘ + Enter to send"). */
|
|
2548
|
+
showHint?: boolean;
|
|
2549
|
+
/** Called on ⌘/Ctrl+Enter or send button. */
|
|
2550
|
+
onSubmit: (text: string, attachments: PromptAttachment[]) => void;
|
|
2551
|
+
/** Placeholder text. */
|
|
2552
|
+
placeholder?: string;
|
|
2553
|
+
/** Rough estimator: chars-per-token. Defaults to 4. */
|
|
2554
|
+
charsPerToken?: number;
|
|
2555
|
+
/** Color → CSS chip mapping for mention kinds. */
|
|
2556
|
+
mentionColor?: Record<string, string>;
|
|
2557
|
+
/** Optional max textarea height in px. Defaults to 280. */
|
|
2558
|
+
maxHeight?: number;
|
|
2559
|
+
}
|
|
2560
|
+
declare function PromptInput({ budgetTokens, commands, mentions, showHint, onSubmit, placeholder, charsPerToken, mentionColor, maxHeight, }: PromptInputProps): react_jsx_runtime.JSX.Element;
|
|
2561
|
+
|
|
2562
|
+
/**
|
|
2563
|
+
* MagicWand — selection-anchored floating toolbar for text inputs.
|
|
2564
|
+
*
|
|
2565
|
+
* When the user highlights text inside the wrapped <Textarea>, a small
|
|
2566
|
+
* pill of AI quick-actions floats above the selection. Clicking an
|
|
2567
|
+
* action invokes the host callback with the selected substring + range;
|
|
2568
|
+
* the host returns a replacement string and MagicWand swaps it in-place.
|
|
2569
|
+
*
|
|
2570
|
+
* <MagicWand
|
|
2571
|
+
* value={body}
|
|
2572
|
+
* onValueChange={setBody}
|
|
2573
|
+
* actions={[
|
|
2574
|
+
* { id: "rephrase", label: "Rephrase", hint: "same meaning, different words",
|
|
2575
|
+
* run: async (s) => await ai.rephrase(s) },
|
|
2576
|
+
* …
|
|
2577
|
+
* ]}
|
|
2578
|
+
* />
|
|
2579
|
+
*
|
|
2580
|
+
* Two appearances: `"floating"` (default — full labels) and `"pill"`
|
|
2581
|
+
* (icon-only, compact). Auto-hides on click-away or scroll by default.
|
|
2582
|
+
*/
|
|
2583
|
+
type MagicWandSelection = {
|
|
2584
|
+
start: number;
|
|
2585
|
+
end: number;
|
|
2586
|
+
text: string;
|
|
2587
|
+
};
|
|
2588
|
+
type MagicWandAction = {
|
|
2589
|
+
/** Stable id, also shown as the busy-state key. */
|
|
2590
|
+
id: string;
|
|
2591
|
+
/** Display label (first character used in `pill` mode). */
|
|
2592
|
+
label: string;
|
|
2593
|
+
/** Tooltip body. */
|
|
2594
|
+
hint?: string;
|
|
2595
|
+
/** Optional kind chip rendered next to the label. */
|
|
2596
|
+
tag?: string;
|
|
2597
|
+
/** Returns the replacement text for the selection. */
|
|
2598
|
+
run: (selection: string, range: MagicWandSelection) => Promise<string> | string;
|
|
2599
|
+
};
|
|
2600
|
+
type MagicWandAppearance = "pill" | "floating";
|
|
2601
|
+
interface MagicWandProps {
|
|
2602
|
+
/** Controlled textarea value. */
|
|
2603
|
+
value: string;
|
|
2604
|
+
/** Called on every edit. */
|
|
2605
|
+
onValueChange: (v: string) => void;
|
|
2606
|
+
/** Action list. */
|
|
2607
|
+
actions: MagicWandAction[];
|
|
2608
|
+
/** Visual treatment. Defaults to "floating". */
|
|
2609
|
+
appearance?: MagicWandAppearance;
|
|
2610
|
+
/** Auto-hide the wand on click-away or scroll. Defaults to true. */
|
|
2611
|
+
autoHide?: boolean;
|
|
2612
|
+
/** Textarea rows. */
|
|
2613
|
+
rows?: number;
|
|
2614
|
+
/** Placeholder. */
|
|
2615
|
+
placeholder?: string;
|
|
2616
|
+
/** Called after an action runs successfully. */
|
|
2617
|
+
onAction?: (action: MagicWandAction, selection: MagicWandSelection, replacement: string) => void;
|
|
2618
|
+
}
|
|
2619
|
+
declare function MagicWand({ value, onValueChange, actions, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react_jsx_runtime.JSX.Element;
|
|
2620
|
+
|
|
2621
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|