@signalflare-ai/ui 0.5.0 → 1.1.0

package/ai/schemas.ts

@@ -100,8 +100,12 @@ export const ActionSchema = z.object({
   name: z.string(),
   params: z.record(z.string(), DynamicValueSchema).optional(),
   confirm: ActionConfirmSchema.optional(),
-  onSuccess: z.object({ set: z.record(z.string(), DynamicValueSchema) }).optional(),
-  onError: z.object({ set: z.record(z.string(), DynamicValueSchema) }).optional(),
+  onSuccess: z
+    .object({ set: z.record(z.string(), DynamicValueSchema) })
+    .optional(),
+  onError: z
+    .object({ set: z.record(z.string(), DynamicValueSchema) })
+    .optional(),
 });
 
 export type Action = z.infer<typeof ActionSchema>;
@@ -111,7 +115,9 @@ export type Action = z.infer<typeof ActionSchema>;
 // =============================================================================
 
 export const AiActionsPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -148,7 +154,9 @@ export const AiApprovalPropsSchema = z.object({
   approveLabel: z.string().optional(), // Label for the approve button. Default: `"Approve"`.
   rejectLabel: z.string().optional(), // Label for the reject button. Default: `"Reject"`.
   showFeedback: z.boolean().optional(), // Show a text input for rejection feedback. Default: `false`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -158,7 +166,9 @@ export const AiCodeBlockPropsSchema = z.object({
   code: z.string(), // The raw code string to display and make copyable.
   language: z.string().optional(), // Language identifier for syntax highlighting (display only, no highlighting applied).
   showLineNumbers: z.boolean().optional(), // Show line numbers.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -166,7 +176,9 @@ export const AiCodeBlockPropsSchema = z.object({
 });
 
 export const AiConversationPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -176,25 +188,20 @@ export const AiConversationPropsSchema = z.object({
 export const AiInfoBannerPropsSchema = z.object({
   level: z.enum(["info", "error", "change"]).optional(), // Banner level controls icon and color treatment.
   icon: z.unknown().optional(), // Custom icon override.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
 });
 
-export const AiLoaderPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
-  className: z.string().optional(),
-  id: z.string().optional(),
-  lang: z.string().optional(),
-  title: z.string().optional(),
-  size: z.enum(["sm", "base", "lg"]).optional(), // Icon size. - `"sm"` — 12px - `"base"` — 16px (default) - `"lg"` — 20px
-});
-
 export const AiMessagePropsSchema = z.object({
   from: z.enum(["user", "assistant", "system"]), // Message sender role — controls layout and group class.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -214,7 +221,21 @@ export const AiMissionHeaderPropsSchema = z.object({
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
+});
+
+export const AiPartGroupPropsSchema = z.object({
+  groupKey: z.string(), // Stable identifier — usually the parent message id. Required so the group can persist its frozen snapshot across re-mounts (scroll-back into a virtualized list re-renders without restarting animations).
+  complete: z.boolean().optional(), // Set to `true` once the parent stream has finished. Triggers the group to snapshot its current children and from then on render only the static collapsed summary — ephemeral children never re-mount.
+  title: z.string().optional(), // Title shown in the collapsed summary line. Falls back to the first reasoning text snippet, then to a step count.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
+  className: z.string().optional(),
+  id: z.string().optional(),
+  lang: z.string().optional(),
 });
 
 export const AiQuestionPropsSchema = z.object({
@@ -226,14 +247,16 @@ export const AiQuestionPropsSchema = z.object({
   allowCustom: z.boolean().optional(), // Allow freeform text input (custom answer). Default: `true`. When options are provided, this adds a text field below them.
   icon: z.unknown().optional(), // Custom icon for the question header.
   answeredWith: z.string().optional(), // The answer that was submitted (shown when `status="answered"`).
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
 });
 
 export const AiReasoningPropsSchema = z.object({
-  variant: z.enum(["default", "inline", "minimal"]).optional(), // Display variant.
+  variant: z.enum(["default", "inline", "minimal", "ephemeral"]).optional(), // Display variant.
   isStreaming: z.boolean().optional(), // Whether reasoning is currently streaming.
   duration: z.number().optional(), // Duration in seconds (passed in or self-tracked when streaming).
   defaultExpanded: z.boolean().optional(), // Default expanded state.
@@ -242,16 +265,22 @@ export const AiReasoningPropsSchema = z.object({
   icon: z.unknown().optional(), // Custom icon override. Defaults to `SparkleIcon` (streaming) or `BrainIcon` (done). Use to distinguish observation/reflection blocks from standard reasoning.
   label: z.string().optional(), // Custom label override. Defaults to `"Thinking..."` (streaming) or `"Reasoning"` (done). Use to label observational memory blocks: `"Observing..."`, `"Reflecting..."`, etc.
   streamingLabel: z.string().optional(), // Custom streaming label. When provided, used instead of `label` while `isStreaming` is true. Falls back to `label`, then to the default `"Thinking..."`.
+  dismissDelay: z.number().optional(), // For `variant="ephemeral"`: ms to keep the completed row visible before fading out. Set to `0` to disable auto-dismiss.
+  persist: z.boolean().optional(), // For `variant="ephemeral"`: when `true`, the row never auto-dismisses. User-expanded rows are pinned automatically.
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
 });
 
 export const AiResponsePropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
 });
 
 export const AiShimmerPropsSchema = z.object({
@@ -267,7 +296,9 @@ export const AiStatusBadgePropsSchema = z.object({
   label: z.string(), // Label text displayed in the badge.
   status: z.enum(["idle", "running", "success", "error"]).optional(), // Current status — determines the status icon on the right.
   info: z.string().optional(), // Additional info text (e.g. "2/3") shown after the label.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -276,7 +307,9 @@ export const AiStatusBadgePropsSchema = z.object({
 
 export const AiStreamingTextPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
 });
 
 export const AiSubagentPropsSchema = z.object({
@@ -288,7 +321,9 @@ export const AiSubagentPropsSchema = z.object({
   icon: z.unknown().optional(), // Custom icon. Defaults to `RobotIcon`.
   defaultExpanded: z.boolean().optional(), // Whether the subagent content is expanded by default.
   open: z.boolean().optional(), // Controlled open state.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -296,7 +331,9 @@ export const AiSubagentPropsSchema = z.object({
 });
 
 export const AiSuggestionsPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -308,7 +345,9 @@ export const AiTaskListPropsSchema = z.object({
   title: z.string().optional(), // Optional title above the task list.
   icon: z.unknown().optional(), // Custom icon for the title area.
   showProgress: z.boolean().optional(), // Show a progress summary (e.g. "3 / 7 done"). Default: `true`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -320,7 +359,9 @@ export const AiTimelinePropsSchema = z.object({
   showNowMarker: z.boolean().optional(), // Whether to show a pulsing "now" marker at the live edge.
   nowMs: z.number().optional(), // Current timestamp in ms. Used to render the "now" marker and open-ended block widths. Pass a stable `useState` value to prevent hydration shifts. When omitted, `Date.now()` is called at render time (fine for live views driven by a ticking parent, not suitable for SSR).
   density: z.enum(["comfortable", "compact"]).optional(), // Lane density variant.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Children should be `AiTimelineLane` components.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Children should be `AiTimelineLane` components.
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -328,17 +369,21 @@ export const AiTimelinePropsSchema = z.object({
 });
 
 export const AiToolCallPropsSchema = z.object({
-  variant: z.enum(["default", "inline", "minimal"]).optional(), // Display variant.
+  variant: z.enum(["default", "inline", "minimal", "ephemeral"]).optional(), // Display variant.
   duration: z.number().optional(), // Duration in milliseconds.
   summary: z.string().optional(), // Summary text shown alongside the tool name.
   icon: z.unknown().optional(), // Custom icon override.
   approvalState: z.enum(["awaiting", "approved", "declined"]).optional(), // Approval state for tools requiring confirmation.
   defaultExpanded: z.boolean().optional(), // Default expanded state for the collapsible.
+  dismissDelay: z.number().optional(), // For `variant="ephemeral"`: ms to keep the completed row visible before fading out. Set to `0` to disable auto-dismiss.
+  persist: z.boolean().optional(), // For `variant="ephemeral"`: when `true`, the row never auto-dismisses. Errors and user-expanded rows are pinned automatically.
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
 });
 
 export const AiUsageBarPropsSchema = z.object({
@@ -348,7 +393,9 @@ export const AiUsageBarPropsSchema = z.object({
   cost: z.number().optional(), // Estimated cost in USD.
   modelId: z.string().optional(), // Model ID being used (shown as label).
   icon: z.unknown().optional(), // Custom icon. Defaults to `LightningIcon`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -356,38 +403,73 @@ export const AiUsageBarPropsSchema = z.object({
 });
 
 export const BadgePropsSchema = z.object({
-  variant: z.enum(["primary", "secondary", "destructive", "outline", "beta", "success", "warning", "info", "ghost"]).optional(), // Visual style of the badge. - `"primary"` — High-emphasis badge for important labels - `"secondary"` — Subtle badge for secondary information - `"destructive"` — Error or danger state indicator - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features - `"success"` — Positive status indicator - `"warning"` — Caution or attention indicator - `"info"` — Informational badge - `"ghost"` — Text-only badge with no background or border
+  variant: z
+    .enum([
+      "primary",
+      "secondary",
+      "destructive",
+      "outline",
+      "beta",
+      "success",
+      "warning",
+      "info",
+      "ghost",
+    ])
+    .optional(), // Visual style of the badge. - `"primary"` — High-emphasis badge for important labels - `"secondary"` — Subtle badge for secondary information - `"destructive"` — Error or danger state indicator - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features - `"success"` — Positive status indicator - `"warning"` — Caution or attention indicator - `"info"` — Informational badge - `"ghost"` — Text-only badge with no background or border
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content rendered inside the badge.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Content rendered inside the badge.
   icon: z.unknown().optional(), // Icon component rendered alongside the text.
   iconPosition: z.enum(["left", "right"]).optional(), // Position of the icon relative to the text.
   loading: z.boolean().optional(), // Shows a loading spinner, replacing the icon slot.
   dot: z.enum(["green", "red", "yellow", "blue", "gray"]).optional(), // Renders a small colored status dot before the text.
-  tooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Wraps the badge in a Tooltip with this content. Requires a TooltipProvider ancestor.
+  tooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Wraps the badge in a Tooltip with this content. Requires a TooltipProvider ancestor.
   href: z.string().optional(),
 });
 
 export const BannerPropsSchema = z.object({
-  icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon element rendered before the banner text (e.g. from `@phosphor-icons/react`).
+  icon: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Icon element rendered before the banner text (e.g. from `@phosphor-icons/react`).
   text: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Banner message content. Accepts strings or custom React elements.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Banner message content. Accepts strings or custom React elements.
   variant: z.enum(["default", "alert", "error"]).optional(), // Visual style of the banner. - `"default"` — Informational blue banner for general messages - `"alert"` — Warning yellow banner for cautionary messages - `"error"` — Error red banner for critical issues
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
 });
 
 export const BreadcrumbsPropsSchema = z.object({
   size: z.enum(["sm", "base"]).optional(), // Size of the breadcrumbs. - `"sm"` — Compact breadcrumbs for dense UIs - `"base"` — Default breadcrumbs size
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
 });
 
 export const ButtonPropsSchema = z.object({
   shape: z.enum(["base", "square", "circle"]).optional(),
   size: z.enum(["xs", "sm", "base", "lg"]).optional(),
-  variant: z.enum(["primary", "secondary", "ghost", "destructive", "secondary-destructive", "outline"]).optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  variant: z
+    .enum([
+      "primary",
+      "secondary",
+      "ghost",
+      "destructive",
+      "secondary-destructive",
+      "outline",
+    ])
+    .optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
-  icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon from `@phosphor-icons/react` or a React element. Rendered before children.
+  icon: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Icon from `@phosphor-icons/react` or a React element. Rendered before children.
   loading: z.boolean().optional(), // Shows a loading spinner and disables interaction.
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -400,8 +482,12 @@ export const ButtonPropsSchema = z.object({
 
 export const CheckboxPropsSchema = z.object({
   variant: z.enum(["default", "error"]).optional(), // Visual variant: "default" or "error" for validation failures (visual only, no error text)
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content to display next to the label via an info icon
   controlFirst: z.boolean().optional(), // When true (default), checkbox appears before label. When false, label appears before checkbox.
   checked: z.boolean().optional(), // Whether the checkbox is checked (controlled)
   indeterminate: z.boolean().optional(), // Whether the checkbox is in indeterminate state
@@ -428,7 +514,9 @@ export const CodePropsSchema = z.object({
 });
 
 export const CollapsiblePropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   label: z.string(), // Text label displayed in the trigger button
   open: z.boolean().optional(), // Whether the collapsible content is visible
   className: z.string().optional(), // Additional CSS classes for the content panel
@@ -439,12 +527,20 @@ export const ComboboxPropsSchema = z.object({
   inputSide: z.enum(["right", "top"]).optional(), // Position of the text input relative to chips in multi-select mode. - `"right"` — Input inline to the right of chips - `"top"` — Input above chips
   items: z.array(z.unknown()), // Array of items to display in the dropdown
   value: z.array(z.unknown()).optional(), // Currently selected value(s)
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Combobox content (trigger, content, items)
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Combobox content (trigger, content, items)
   className: z.string().optional(), // Additional CSS classes
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the combobox (enables Field wrapper) - can be a string or any React node
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Label content for the combobox (enables Field wrapper) - can be a string or any React node
   required: z.boolean().optional(), // Whether the combobox is required
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the combobox
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content to display next to the label via an info icon
+  description: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Helper text displayed below the combobox
   error: z.unknown().optional(), // Error message or validation error object
   onValueChange: z.unknown().optional(), // Callback when selection changes
   multiple: z.boolean().optional(), // Allow multiple selections
@@ -453,18 +549,24 @@ export const ComboboxPropsSchema = z.object({
 
 export const CommandPalettePropsSchema = z.object({
   open: z.boolean(), // Whether the dialog is open
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child content - typically one or more Panel components
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child content - typically one or more Panel components
 });
 
 export const DataGridPropsSchema = z.object({
   layout: z.enum(["auto", "fixed"]).optional(),
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
 });
 
 export const DatePickerPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
 });
 
 export const DateRangePickerPropsSchema = z.object({
@@ -478,7 +580,9 @@ export const DateRangePickerPropsSchema = z.object({
 
 export const DialogPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Dialog content (typically Title, Description, Close, and action buttons).
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Dialog content (typically Title, Description, Close, and action buttons).
   size: z.enum(["base", "sm", "lg", "xl"]).optional(), // Dialog width. - `"sm"` — Small (min 288px) for simple confirmations - `"base"` — Default (min 384px) - `"lg"` — Large (min 512px) for complex content - `"xl"` — Extra large (min 768px) for detailed views
 });
 
@@ -488,29 +592,43 @@ export const DropdownMenuPropsSchema = z.object({
 
 export const EmptyPropsSchema = z.object({
   size: z.enum(["sm", "base", "lg"]).optional(), // Size of the empty state container. - `"sm"` — Compact empty state for smaller containers - `"base"` — Default empty state size - `"lg"` — Large empty state for prominent placement
-  icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`).
+  icon: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`).
   title: z.string(), // Primary heading text for the empty state.
   description: z.string().optional(), // Secondary description text displayed below the title.
   commandLine: z.string().optional(), // Shell command displayed in a copyable code block.
-  contents: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Additional content (buttons, links) rendered below the description.
+  contents: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Additional content (buttons, links) rendered below the description.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
 });
 
 export const FieldPropsSchema = z.object({
   controlFirst: z.boolean().optional(), // When `true`, places the control before the label (for checkbox/switch layouts).
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // The form control element(s) to wrap (Input, Select, Checkbox, etc.).
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // The label content — can be a string or any React node.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // The form control element(s) to wrap (Input, Select, Checkbox, etc.).
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // The label content — can be a string or any React node.
   required: z.boolean().optional(), // When explicitly `false`, shows gray "(optional)" text after the label. When `true` or `undefined`, no indicator is shown.
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content displayed next to the label via an info icon.
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content displayed next to the label via an info icon.
   error: z.unknown().optional(), // Validation error with a message and a browser `ValidityState` match key.
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the control (hidden when `error` is present).
+  description: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Helper text displayed below the control (hidden when `error` is present).
 });
 
 export const FiltersPropsSchema = z.object({
   filters: z.array(z.unknown()), // Active filters array
   fields: z.array(z.unknown()), // Available field configurations
   size: z.enum(["sm", "default", "lg"]).optional(), // Size variant for filter pills
-  trigger: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Custom trigger element (replaces default "Add Filter" button)
+  trigger: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Custom trigger element (replaces default "Add Filter" button)
   showSearchInput: z.boolean().optional(), // Whether to show a search input in the add filter menu
   allowMultiple: z.boolean().optional(), // Whether to allow multiple filters on the same field
   enableShortcut: z.boolean().optional(), // Whether to enable keyboard shortcut (Cmd/Ctrl + K) to open add filter
@@ -522,20 +640,40 @@ export const FiltersPropsSchema = z.object({
 });
 
 export const GridPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Grid items to render.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Grid items to render.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
   mobileDivider: z.boolean().optional(), // Show dividers between grid items on mobile (only works with `"4up"` variant).
   gap: z.enum(["none", "sm", "base", "lg"]).optional(), // Gap size between grid items. - `"none"` — No gap - `"sm"` — 12px gap - `"base"` — Responsive gap (8px → 24px → 32px) - `"lg"` — 32px gap
-  variant: z.enum(["2up", "side-by-side", "2-1", "1-2", "1-3up", "3up", "4up", "6up", "1-2-4up"]).optional(), // Responsive column layout variant. - `"2up"` — 1 col → 2 cols at md - `"side-by-side"` — Always 2 cols - `"2-1"` — 66%/33% split at md - `"1-2"` — 33%/66% split at md - `"3up"` — 1 → 2 → 3 cols - `"4up"` — 1 → 2 → 3 → 4 cols - `"6up"` — 2 → 3 → 4 → 6 cols - `"1-2-4up"` — 1 → 2 → 4 cols
+  variant: z
+    .enum([
+      "2up",
+      "side-by-side",
+      "2-1",
+      "1-2",
+      "1-3up",
+      "3up",
+      "4up",
+      "6up",
+      "1-2-4up",
+    ])
+    .optional(), // Responsive column layout variant. - `"2up"` — 1 col → 2 cols at md - `"side-by-side"` — Always 2 cols - `"2-1"` — 66%/33% split at md - `"1-2"` — 33%/66% split at md - `"3up"` — 1 → 2 → 3 cols - `"4up"` — 1 → 2 → 3 → 4 cols - `"6up"` — 2 → 3 → 4 → 6 cols - `"1-2-4up"` — 1 → 2 → 4 cols
 });
 
 export const InputPropsSchema = z.object({
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the input (enables Field wrapper) - can be a string or any React node
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the input
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Label content for the input (enables Field wrapper) - can be a string or any React node
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content to display next to the label via an info icon
+  description: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Helper text displayed below the input
   error: z.unknown().optional(), // Error message or validation error object
   size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Input size. - `"xs"` — Extra small for compact UIs - `"sm"` — Small for secondary fields - `"base"` — Default size - `"lg"` — Large for prominent fields
   variant: z.enum(["default", "error"]).optional(), // Visual variant. - `"default"` — Standard input - `"error"` — Error state for validation failures
@@ -544,23 +682,31 @@ export const InputPropsSchema = z.object({
 export const InputAreaPropsSchema = z.object({});
 
 export const LabelPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // The label content — can be a string or any React node.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // The label content — can be a string or any React node.
   showOptional: z.boolean().optional(), // When `true`, shows gray "(optional)" text after the label.
-  tooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content displayed next to the label via an info icon.
+  tooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content displayed next to the label via an info icon.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   htmlFor: z.string().optional(), // The id of the form element this label is associated with
   asContent: z.boolean().optional(), // When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling.
 });
 
 export const LayerCardPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
 });
 
 export const LinkPropsSchema = z.object({
   variant: z.enum(["inline", "current", "plain"]).optional(), // Visual style of the link. - `"inline"` — Inline text link that flows with content - `"current"` — Link that inherits color from parent text - `"plain"` — Link without underline decoration
   to: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
@@ -572,8 +718,22 @@ export const LinkPropsSchema = z.object({
   ping: z.string().optional(),
   target: z.unknown().optional(),
   type: z.string().optional(),
-  referrerPolicy: z.enum(["", "no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"]).optional(),
-  render: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
+  referrerPolicy: z
+    .enum([
+      "",
+      "no-referrer",
+      "no-referrer-when-downgrade",
+      "origin",
+      "origin-when-cross-origin",
+      "same-origin",
+      "strict-origin",
+      "strict-origin-when-cross-origin",
+      "unsafe-url",
+    ])
+    .optional(),
+  render: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
 });
 
 export const LoaderPropsSchema = z.object({
@@ -616,7 +776,9 @@ export const PromptInputPropsSchema = z.object({
   globalDrop: z.boolean().optional(), // When true, accept drops anywhere on document. Default false.
   maxFiles: z.number().optional(), // Maximum number of attached files.
   maxFileSize: z.number().optional(), // Maximum file size in bytes.
-  backLayer: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content rendered in the collapsible back layer (e.g. HITL approvals, task lists). When provided the prompt input is wrapped in a LayerCard shell with a header row containing a chevron toggle. Use `PromptInputBackLayer` to compose structured content for this slot.
+  backLayer: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Content rendered in the collapsible back layer (e.g. HITL approvals, task lists). When provided the prompt input is wrapped in a LayerCard shell with a header row containing a chevron toggle. Use `PromptInputBackLayer` to compose structured content for this slot.
   backLayerTitle: z.string().optional(), // Title shown in the back layer header row. Defaults to `"Context"`.
   backLayerOpen: z.boolean().optional(), // Controls whether the back layer is visible. Pair with `onBackLayerOpenChange` for a controlled pattern.
   autoOpenBackLayerWhen: z.boolean().optional(), // Automatically opens the back layer when this condition is true. Useful for showing pending approvals/questions without manual toggle.
@@ -624,15 +786,21 @@ export const PromptInputPropsSchema = z.object({
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
 });
 
 export const RadioPropsSchema = z.object({
   legend: z.string(), // Legend text for the group (required for accessibility)
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child Radio.Item components
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child Radio.Item components
   orientation: z.enum(["vertical", "horizontal"]).optional(), // Layout direction of the radio items
   error: z.string().optional(), // Error message for the group
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text for the group
+  description: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Helper text for the group
   value: z.string().optional(), // Value of the radio that should be selected (controlled)
   disabled: z.boolean().optional(), // Whether all radios in the group are disabled
   controlPosition: z.enum(["start", "end"]).optional(), // Position of radio control relative to label: "start" (default) puts radio before label, "end" puts label before radio
@@ -642,16 +810,24 @@ export const RadioPropsSchema = z.object({
 
 export const SelectPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the select (enables Field wrapper) — can be a string or any React node.
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Label content for the select (enables Field wrapper) — can be a string or any React node.
   hideLabel: z.boolean().optional(), // Visually hide the label while keeping it accessible to screen readers. Set to `false` to show a visible label above the select via the Field wrapper.
   placeholder: z.string().optional(), // Placeholder text shown when no value is selected.
   loading: z.boolean().optional(), // When `true`, shows a skeleton loader in place of the selected value.
   disabled: z.boolean().optional(), // Whether the select is disabled.
   required: z.boolean().optional(), // Whether the select is required. When `false`, shows "(optional)" text.
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content displayed next to the label via an info icon.
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content displayed next to the label via an info icon.
   value: z.string().optional(), // Currently selected value (controlled mode).
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // `Select.Option` elements to render in the dropdown.
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the select.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // `Select.Option` elements to render in the dropdown.
+  description: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Helper text displayed below the select.
   error: z.unknown().optional(), // Error message string or validation error object with `match` key.
   onValueChange: z.unknown().optional(), // Callback when selection changes
   defaultValue: z.string().optional(), // Initial value for uncontrolled mode
@@ -673,13 +849,21 @@ export const SensitiveInputPropsSchema = z.object({
   id: z.string().optional(),
   lang: z.string().optional(),
   title: z.string().optional(),
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   value: z.string().optional(), // Controlled value
   size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Size of the input. - `"xs"` — Extra small for compact UIs - `"sm"` — Small for secondary fields - `"base"` — Default input size - `"lg"` — Large for prominent fields
   variant: z.enum(["default", "error"]).optional(), // Style variant of the input. - `"default"` — Default input appearance - `"error"` — Error state for validation failures
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
-  description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Helper text displayed below the input
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content to display next to the label via an info icon
+  description: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Helper text displayed below the input
   error: z.unknown().optional(), // Error message or validation error object
 });
 
@@ -693,12 +877,16 @@ export const SidebarPropsSchema = z.object({
   defaultWidth: z.number().optional(), // Initial width in pixels when resizable.
   minWidth: z.number().optional(), // Minimum width in pixels when resizing.
   maxWidth: z.number().optional(), // Maximum width in pixels when resizing.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content — typically `<Sidebar>` + main content.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Content — typically `<Sidebar>` + main content.
   className: z.string().optional(), // Additional CSS classes for the wrapper div.
 });
 
 export const SignalFlareAILogoPropsSchema = z.object({
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(),
   className: z.string().optional(),
   height: z.unknown().optional(),
   id: z.string().optional(),
@@ -712,7 +900,23 @@ export const SignalFlareAILogoPropsSchema = z.object({
   accentHeight: z.unknown().optional(),
   accumulate: z.enum(["none", "sum"]).optional(),
   additive: z.enum(["replace", "sum"]).optional(),
-  alignmentBaseline: z.enum(["auto", "baseline", "before-edge", "text-before-edge", "middle", "central", "after-edge", "text-after-edge", "ideographic", "alphabetic", "hanging", "mathematical", "inherit"]).optional(),
+  alignmentBaseline: z
+    .enum([
+      "auto",
+      "baseline",
+      "before-edge",
+      "text-before-edge",
+      "middle",
+      "central",
+      "after-edge",
+      "text-after-edge",
+      "ideographic",
+      "alphabetic",
+      "hanging",
+      "mathematical",
+      "inherit",
+    ])
+    .optional(),
   allowReorder: z.enum(["no", "yes"]).optional(),
   alphabetic: z.unknown().optional(),
   amplitude: z.unknown().optional(),
@@ -736,7 +940,9 @@ export const SignalFlareAILogoPropsSchema = z.object({
   clipPathUnits: z.unknown().optional(),
   clipRule: z.unknown().optional(),
   colorInterpolation: z.unknown().optional(),
-  colorInterpolationFilters: z.enum(["auto", "sRGB", "linearRGB", "inherit"]).optional(),
+  colorInterpolationFilters: z
+    .enum(["auto", "sRGB", "linearRGB", "inherit"])
+    .optional(),
   colorProfile: z.unknown().optional(),
   colorRendering: z.unknown().optional(),
   contentScriptType: z.unknown().optional(),
@@ -751,7 +957,23 @@ export const SignalFlareAILogoPropsSchema = z.object({
   direction: z.unknown().optional(),
   display: z.unknown().optional(),
   divisor: z.unknown().optional(),
-  dominantBaseline: z.enum(["auto", "use-script", "no-change", "reset-size", "ideographic", "alphabetic", "hanging", "mathematical", "central", "middle", "text-after-edge", "text-before-edge", "inherit"]).optional(),
+  dominantBaseline: z
+    .enum([
+      "auto",
+      "use-script",
+      "no-change",
+      "reset-size",
+      "ideographic",
+      "alphabetic",
+      "hanging",
+      "mathematical",
+      "central",
+      "middle",
+      "text-after-edge",
+      "text-before-edge",
+      "inherit",
+    ])
+    .optional(),
   dur: z.unknown().optional(),
   dx: z.unknown().optional(),
   dy: z.unknown().optional(),
@@ -954,16 +1176,48 @@ export const SignalFlareAILogoPropsSchema = z.object({
   variant: z.enum(["glyph", "full"]).optional(), // Logo variant - `glyph`: Map pin icon only - `full`: Full logo with wordmark and decorative element
 });
 
+export const SparklinePropsSchema = z.object({
+  className: z.string().optional(), // Additional CSS classes
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
+});
+
+export const StatCardPropsSchema = z.object({
+  size: z.enum(["sm", "base"]).optional(), // Size of the card. Defaults to `"base"`.
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Short descriptive label (e.g. `"Active users"`).
+  value: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Primary value to emphasise (pre-formatted).
+  hint: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Optional secondary text displayed under the value.
+  delta: z.unknown().optional(), // Optional change indicator (arrow + number + label).
+  trend: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Optional content slot rendered on the right-hand side — typically a `Sparkline` showing the metric's trend.
+  loading: z.boolean().optional(), // When `true`, renders a skeleton placeholder in place of value + delta.
+  className: z.string().optional(), // Additional CSS classes merged via `cn()`.
+});
+
 export const SurfacePropsSchema = z.object({
   as: z.unknown().optional(), // The HTML element type to render as (e.g. `"div"`, `"section"`, `"article"`).
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content rendered inside the surface.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Content rendered inside the surface.
 });
 
 export const SwitchPropsSchema = z.object({
   variant: z.enum(["default", "error"]).optional(), // Visual variant: "default" or "error" for validation failures (visual only, no error text)
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes.
-  labelTooltip: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Tooltip content to display next to the label via an info icon
+  label: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes.
+  labelTooltip: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Tooltip content to display next to the label via an info icon
   required: z.boolean().optional(), // Whether the switch is required. When explicitly false, shows "(optional)" text after the label.
   controlFirst: z.boolean().optional(), // When true (default), switch appears before label. When false, label appears before switch.
   size: z.enum(["sm", "base", "lg"]).optional(),
@@ -984,7 +1238,9 @@ export const TablePropsSchema = z.object({
   layout: z.enum(["auto", "fixed"]).optional(),
   variant: z.enum(["default", "selected"]).optional(),
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
 });
 
 export const TabsPropsSchema = z.object({
@@ -1000,11 +1256,35 @@ export const TabsPropsSchema = z.object({
 });
 
 export const TextPropsSchema = z.object({
-  variant: z.enum(["heading1", "heading2", "heading3", "body", "secondary", "success", "error", "mono", "mono-secondary"]).optional(), // Text style variant. Determines color, font, and weight. - `"heading1"` — Large page title (30px, semibold) - `"heading2"` — Section title (24px, semibold) - `"heading3"` — Subsection title (18px, semibold) - `"body"` — Default body text - `"secondary"` — Muted text for secondary information - `"success"` — Success state text - `"error"` — Error state text - `"mono"` — Monospace text for code - `"mono-secondary"` — Muted monospace text
+  variant: z
+    .enum([
+      "heading1",
+      "heading2",
+      "heading3",
+      "body",
+      "secondary",
+      "success",
+      "error",
+      "mono",
+      "mono-secondary",
+    ])
+    .optional(), // Text style variant. Determines color, font, and weight. - `"heading1"` — Large page title (30px, semibold) - `"heading2"` — Section title (24px, semibold) - `"heading3"` — Subsection title (18px, semibold) - `"body"` — Default body text - `"secondary"` — Muted text for secondary information - `"success"` — Success state text - `"error"` — Error state text - `"mono"` — Monospace text for code - `"mono-secondary"` — Muted monospace text
   size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Text size (only applies to body/secondary/success/error variants). - `"xs"` — 12px - `"sm"` — 14px - `"base"` — 16px - `"lg"` — 18px
   bold: z.boolean().optional(), // Whether to use bold font weight (only applies to body variants).
   as: z.unknown().optional(), // The HTML element type to render as (e.g. `"span"`, `"p"`, `"h1"`). Auto-selected based on variant if omitted.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Text content.
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Text content.
+});
+
+export const TextRollPropsSchema = z.object({
+  children: z.string(), // Text to animate. Each character rolls in / out independently.
+  duration: z.number().optional(), // Duration (seconds) of each letter's enter and exit tween.
+  getEnterDelay: z.unknown().optional(), // Per-letter delay for the enter animation.
+  getExitDelay: z.unknown().optional(), // Per-letter delay for the exit animation.
+  className: z.string().optional(), // Additional CSS classes merged via `cn()`. Use sf semantic tokens only.
+  transition: z.unknown().optional(), // Shared transition for both enter and exit tweens.
+  variants: z.unknown().optional(), // Override the default rotate-X roll with custom enter/exit variants.
 });
 
 export const ThemeTogglePropsSchema = z.object({
@@ -1017,14 +1297,24 @@ export const ThemeTogglePropsSchema = z.object({
 export const ToastyPropsSchema = z.object({
   variant: z.enum(["default", "error", "warning"]).optional(),
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
 });
 
 export const TooltipPropsSchema = z.object({
   side: z.enum(["top", "bottom", "left", "right"]).optional(),
   className: z.string().optional(), // Additional CSS classes
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
-  content: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]), // Content to display in the tooltip
+  children: z
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Child elements
+  content: z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.null(),
+    DynamicValueSchema,
+  ]), // Content to display in the tooltip
 });
 
 // =============================================================================
@@ -1034,7 +1324,74 @@ export const TooltipPropsSchema = z.object({
 /**
  * All valid component type names
  */
-export type KumoComponentType = "AiActions" | "AiAgentCard" | "AiApproval" | "AiCodeBlock" | "AiConversation" | "AiInfoBanner" | "AiLoader" | "AiMessage" | "AiMissionHeader" | "AiQuestion" | "AiReasoning" | "AiResponse" | "AiShimmer" | "AiStatusBadge" | "AiStreamingText" | "AiSubagent" | "AiSuggestions" | "AiTaskList" | "AiTimeline" | "AiToolCall" | "AiUsageBar" | "Badge" | "Banner" | "Breadcrumbs" | "Button" | "Checkbox" | "ClipboardText" | "Code" | "Collapsible" | "Combobox" | "CommandPalette" | "DataGrid" | "DatePicker" | "DateRangePicker" | "Dialog" | "DropdownMenu" | "Empty" | "Field" | "Filters" | "Grid" | "Input" | "InputArea" | "Label" | "LayerCard" | "Link" | "Loader" | "MenuBar" | "Meter" | "Pagination" | "Popover" | "PromptInput" | "Radio" | "Select" | "SensitiveInput" | "Sidebar" | "SignalFlareAILogo" | "Surface" | "Switch" | "Table" | "Tabs" | "Text" | "ThemeToggle" | "Toasty" | "Tooltip";
+export type KumoComponentType =
+  | "AiActions"
+  | "AiAgentCard"
+  | "AiApproval"
+  | "AiCodeBlock"
+  | "AiConversation"
+  | "AiInfoBanner"
+  | "AiMessage"
+  | "AiMissionHeader"
+  | "AiPartGroup"
+  | "AiQuestion"
+  | "AiReasoning"
+  | "AiResponse"
+  | "AiShimmer"
+  | "AiStatusBadge"
+  | "AiStreamingText"
+  | "AiSubagent"
+  | "AiSuggestions"
+  | "AiTaskList"
+  | "AiTimeline"
+  | "AiToolCall"
+  | "AiUsageBar"
+  | "Badge"
+  | "Banner"
+  | "Breadcrumbs"
+  | "Button"
+  | "Checkbox"
+  | "ClipboardText"
+  | "Code"
+  | "Collapsible"
+  | "Combobox"
+  | "CommandPalette"
+  | "DataGrid"
+  | "DatePicker"
+  | "DateRangePicker"
+  | "Dialog"
+  | "DropdownMenu"
+  | "Empty"
+  | "Field"
+  | "Filters"
+  | "Grid"
+  | "Input"
+  | "InputArea"
+  | "Label"
+  | "LayerCard"
+  | "Link"
+  | "Loader"
+  | "MenuBar"
+  | "Meter"
+  | "Pagination"
+  | "Popover"
+  | "PromptInput"
+  | "Radio"
+  | "Select"
+  | "SensitiveInput"
+  | "Sidebar"
+  | "SignalFlareAILogo"
+  | "Sparkline"
+  | "StatCard"
+  | "Surface"
+  | "Switch"
+  | "Table"
+  | "Tabs"
+  | "Text"
+  | "TextRoll"
+  | "ThemeToggle"
+  | "Toasty"
+  | "Tooltip";
 
 export const KumoComponentTypeSchema = z.enum([
   "AiActions",
@@ -1043,9 +1400,9 @@ export const KumoComponentTypeSchema = z.enum([
   "AiCodeBlock",
   "AiConversation",
   "AiInfoBanner",
-  "AiLoader",
   "AiMessage",
   "AiMissionHeader",
+  "AiPartGroup",
   "AiQuestion",
   "AiReasoning",
   "AiResponse",
@@ -1093,11 +1450,14 @@ export const KumoComponentTypeSchema = z.enum([
   "SensitiveInput",
   "Sidebar",
   "SignalFlareAILogo",
+  "Sparkline",
+  "StatCard",
   "Surface",
   "Switch",
   "Table",
   "Tabs",
   "Text",
+  "TextRoll",
   "ThemeToggle",
   "Toasty",
   "Tooltip",
@@ -1113,9 +1473,9 @@ export const ComponentPropsSchemas = {
   AiCodeBlock: AiCodeBlockPropsSchema,
   AiConversation: AiConversationPropsSchema,
   AiInfoBanner: AiInfoBannerPropsSchema,
-  AiLoader: AiLoaderPropsSchema,
   AiMessage: AiMessagePropsSchema,
   AiMissionHeader: AiMissionHeaderPropsSchema,
+  AiPartGroup: AiPartGroupPropsSchema,
   AiQuestion: AiQuestionPropsSchema,
   AiReasoning: AiReasoningPropsSchema,
   AiResponse: AiResponsePropsSchema,
@@ -1163,11 +1523,14 @@ export const ComponentPropsSchemas = {
   SensitiveInput: SensitiveInputPropsSchema,
   Sidebar: SidebarPropsSchema,
   SignalFlareAILogo: SignalFlareAILogoPropsSchema,
+  Sparkline: SparklinePropsSchema,
+  StatCard: StatCardPropsSchema,
   Surface: SurfacePropsSchema,
   Switch: SwitchPropsSchema,
   Table: TablePropsSchema,
   Tabs: TabsPropsSchema,
   Text: TextPropsSchema,
+  TextRoll: TextRollPropsSchema,
   ThemeToggle: ThemeTogglePropsSchema,
   Toasty: ToastyPropsSchema,
   Tooltip: TooltipPropsSchema,
@@ -1209,10 +1572,22 @@ export type UITree = z.infer<typeof UITreeSchema>;
 /**
  * Validate an element's props against its component schema
  */
-export function validateElementProps(element: UIElement): SafeParseResult<unknown> {
-  const schema = ComponentPropsSchemas[element.type as keyof typeof ComponentPropsSchemas];
+export function validateElementProps(
+  element: UIElement
+): SafeParseResult<unknown> {
+  const schema =
+    ComponentPropsSchemas[element.type as keyof typeof ComponentPropsSchemas];
   if (!schema) {
-    return { success: false, error: new z.ZodError([{ code: 'custom', message: `Unknown component type: ${element.type}`, path: ['type'] }]) };
+    return {
+      success: false,
+      error: new z.ZodError([
+        {
+          code: "custom",
+          message: `Unknown component type: ${element.type}`,
+          path: ["type"],
+        },
+      ]),
+    };
   }
   return schema.safeParse(element.props);
 }
@@ -1227,4 +1602,72 @@ export function validateUITree(tree: unknown): SafeParseResult<UITree> {
 /**
  * List of all component names (for catalog generation)
  */
-export const SF_COMPONENT_NAMES = ["AiActions", "AiAgentCard", "AiApproval", "AiCodeBlock", "AiConversation", "AiInfoBanner", "AiLoader", "AiMessage", "AiMissionHeader", "AiQuestion", "AiReasoning", "AiResponse", "AiShimmer", "AiStatusBadge", "AiStreamingText", "AiSubagent", "AiSuggestions", "AiTaskList", "AiTimeline", "AiToolCall", "AiUsageBar", "Badge", "Banner", "Breadcrumbs", "Button", "Checkbox", "ClipboardText", "Code", "Collapsible", "Combobox", "CommandPalette", "DataGrid", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "Empty", "Field", "Filters", "Grid", "Input", "InputArea", "Label", "LayerCard", "Link", "Loader", "MenuBar", "Meter", "Pagination", "Popover", "PromptInput", "Radio", "Select", "SensitiveInput", "Sidebar", "SignalFlareAILogo", "Surface", "Switch", "Table", "Tabs", "Text", "ThemeToggle", "Toasty", "Tooltip"] as const;
+export const SF_COMPONENT_NAMES = [
+  "AiActions",
+  "AiAgentCard",
+  "AiApproval",
+  "AiCodeBlock",
+  "AiConversation",
+  "AiInfoBanner",
+  "AiMessage",
+  "AiMissionHeader",
+  "AiPartGroup",
+  "AiQuestion",
+  "AiReasoning",
+  "AiResponse",
+  "AiShimmer",
+  "AiStatusBadge",
+  "AiStreamingText",
+  "AiSubagent",
+  "AiSuggestions",
+  "AiTaskList",
+  "AiTimeline",
+  "AiToolCall",
+  "AiUsageBar",
+  "Badge",
+  "Banner",
+  "Breadcrumbs",
+  "Button",
+  "Checkbox",
+  "ClipboardText",
+  "Code",
+  "Collapsible",
+  "Combobox",
+  "CommandPalette",
+  "DataGrid",
+  "DatePicker",
+  "DateRangePicker",
+  "Dialog",
+  "DropdownMenu",
+  "Empty",
+  "Field",
+  "Filters",
+  "Grid",
+  "Input",
+  "InputArea",
+  "Label",
+  "LayerCard",
+  "Link",
+  "Loader",
+  "MenuBar",
+  "Meter",
+  "Pagination",
+  "Popover",
+  "PromptInput",
+  "Radio",
+  "Select",
+  "SensitiveInput",
+  "Sidebar",
+  "SignalFlareAILogo",
+  "Sparkline",
+  "StatCard",
+  "Surface",
+  "Switch",
+  "Table",
+  "Tabs",
+  "Text",
+  "TextRoll",
+  "ThemeToggle",
+  "Toasty",
+  "Tooltip",
+] as const;