@signalflare-ai/ui 1.2.0 → 1.4.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,7 +188,9 @@ 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(),
@@ -185,7 +199,9 @@ export const AiInfoBannerPropsSchema = z.object({
 
 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(),
@@ -205,14 +221,18 @@ 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(),
+  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(),
@@ -227,7 +247,9 @@ 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(),
@@ -249,12 +271,16 @@ export const AiReasoningPropsSchema = 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 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({
@@ -270,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(),
@@ -279,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({
@@ -291,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(),
@@ -299,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(),
@@ -311,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(),
@@ -323,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(),
@@ -343,7 +381,9 @@ export const AiToolCallPropsSchema = 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 AiUsageBarPropsSchema = z.object({
@@ -353,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(),
@@ -361,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(),
@@ -405,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
@@ -433,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
@@ -444,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
@@ -458,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({
@@ -483,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
 });
 
@@ -493,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
@@ -527,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
@@ -549,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(),
@@ -577,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({
@@ -621,8 +776,12 @@ 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.
-  backLayerTitle: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Header content shown in the back layer header row. Strings render as plain text; pass JSX to compose with icons/spinners/badges. Defaults to `"Context"`.
+  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
+    .union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema])
+    .optional(), // Header content shown in the back layer header row. Strings render as plain text; pass JSX to compose with icons/spinners/badges. Defaults to `"Context"`.
   backLayerStatus: z.enum(["idle", "running", "error"]).optional(), // Optional status indicator rendered next to the title. `"running"` shows a small spinner; `"error"` shows an inline error icon. Use this instead of composing JSX into `backLayerTitle` for the common case of an agent doing work.
   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.
@@ -630,15 +789,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
@@ -648,16 +813,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
@@ -679,13 +852,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
 });
 
@@ -699,12 +880,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(),
@@ -718,7 +903,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(),
@@ -742,7 +943,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(),
@@ -757,7 +960,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(),
@@ -962,16 +1181,26 @@ export const SignalFlareAILogoPropsSchema = z.object({
 
 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
+  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.
+  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.
+  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()`.
 });
@@ -979,13 +1208,19 @@ export const StatCardPropsSchema = z.object({
 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(),
@@ -1006,7 +1241,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({
@@ -1022,11 +1259,25 @@ 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.
   wrap: z.unknown().optional(), // Text layout strategy using pretext-driven measurement. - `"natural"` — No measurement, normal browser wrapping (default for body). - `"balance"` — Even wrapping, smallest maxWidth without adding lines (default for headings). - `"shrink"` — Hug widest natural line (maxWidth = line width). Good for chat bubbles. - `"reserve"` — Reserve height based on line count. Good for streaming text.
   reserveLines: z.number().optional(), // For `wrap="reserve"`: reserve this many lines of height. If omitted, measures current content to determine line count.
 });
@@ -1051,14 +1302,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
 });
 
 // =============================================================================
@@ -1068,7 +1329,74 @@ export const TooltipPropsSchema = z.object({
 /**
  * All valid component type names
  */
-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 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",
@@ -1249,10 +1577,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);
 }
@@ -1267,4 +1607,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", "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;
+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;