@signalflare-ai/ui 1.1.0 → 1.2.0

package/ai/schemas.ts

@@ -100,12 +100,8 @@ 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>;
@@ -115,9 +111,7 @@ 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(),
@@ -154,9 +148,7 @@ 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(),
@@ -166,9 +158,7 @@ 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(),
@@ -176,9 +166,7 @@ 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(),
@@ -188,9 +176,7 @@ 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(),
@@ -199,9 +185,7 @@ 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(),
@@ -221,18 +205,14 @@ 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(),
@@ -247,9 +227,7 @@ 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(),
@@ -271,16 +249,12 @@ 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({
@@ -296,9 +270,7 @@ 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(),
@@ -307,9 +279,7 @@ 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({
@@ -321,9 +291,7 @@ 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(),
@@ -331,9 +299,7 @@ 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(),
@@ -345,9 +311,7 @@ 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(),
@@ -359,9 +323,7 @@ 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(),
@@ -381,9 +343,7 @@ 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({
@@ -393,9 +353,7 @@ 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(),
@@ -403,73 +361,38 @@ 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(),
@@ -482,12 +405,8 @@ 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
@@ -514,9 +433,7 @@ 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
@@ -527,20 +444,12 @@ 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
@@ -549,24 +458,18 @@ 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({
@@ -580,9 +483,7 @@ 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
 });
 
@@ -592,43 +493,29 @@ 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
@@ -640,40 +527,20 @@ 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
@@ -682,31 +549,23 @@ 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(),
@@ -718,22 +577,8 @@ 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({
@@ -776,31 +621,24 @@ 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.string().optional(), // Title shown in the back layer header row. 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.
   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 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
@@ -810,24 +648,16 @@ 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
@@ -849,21 +679,13 @@ 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
 });
 
@@ -877,16 +699,12 @@ 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(),
@@ -900,23 +718,7 @@ 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(),
@@ -940,9 +742,7 @@ 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(),
@@ -957,23 +757,7 @@ 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(),
@@ -1178,26 +962,16 @@ 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()`.
 });
@@ -1205,19 +979,13 @@ 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(),
@@ -1238,9 +1006,7 @@ 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({
@@ -1256,25 +1022,13 @@ 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.
 });
 
 export const TextRollPropsSchema = z.object({
@@ -1297,24 +1051,14 @@ 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
 });
 
 // =============================================================================
@@ -1324,74 +1068,7 @@ 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",
@@ -1572,22 +1249,10 @@ 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);
 }
@@ -1602,72 +1267,4 @@ 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;