@sofya-ds/react 1.13.1 → 1.14.0

package/dist/index.cjs

@@ -113,6 +113,15 @@ __export(index_exports, {
   RadioGroupOptionDescription: () => RadioGroupOptionDescription,
   RadioGroupOptionIndicator: () => RadioGroupOptionIndicator,
   RadioGroupOptionLabel: () => RadioGroupOptionLabel,
+  ReasoningLabsWidget: () => ReasoningLabsWidget,
+  ReasoningSummaryWidget: () => ReasoningSummaryWidget,
+  ReasoningVitalsWidget: () => ReasoningVitalsWidget,
+  ReasoningWidget: () => ReasoningWidget,
+  ReasoningWidgetActionButton: () => ReasoningWidgetActionButton,
+  ReasoningWidgetActions: () => ReasoningWidgetActions,
+  ReasoningWidgetList: () => ReasoningWidgetList,
+  ReasoningWidgetRenderer: () => ReasoningWidgetRenderer,
+  ReasoningWidgetTable: () => ReasoningWidgetTable,
   RichTextToolbar: () => RichTextToolbar,
   RichTextToolbarButton: () => RichTextToolbarButton,
   RichTextToolbarGroup: () => RichTextToolbarGroup,
@@ -217,6 +226,14 @@ __export(index_exports, {
   progressSizeOptions: () => progressSizeOptions,
   radioGroupOrientationOptions: () => radioGroupOrientationOptions,
   radioGroupVariantOptions: () => radioGroupVariantOptions,
+  reasoningWidgetActionScopeOptions: () => reasoningWidgetActionScopeOptions,
+  reasoningWidgetActionToneOptions: () => reasoningWidgetActionToneOptions,
+  reasoningWidgetDensityOptions: () => reasoningWidgetDensityOptions,
+  reasoningWidgetFrameOptions: () => reasoningWidgetFrameOptions,
+  reasoningWidgetTableAlignOptions: () => reasoningWidgetTableAlignOptions,
+  reasoningWidgetTableColumnVariantOptions: () => reasoningWidgetTableColumnVariantOptions,
+  reasoningWidgetToneOptions: () => reasoningWidgetToneOptions,
+  reasoningWidgetVariantOptions: () => reasoningWidgetVariantOptions,
   renderTextContent: () => renderTextContent,
   resolveSurfaceToken: () => import_tokens4.resolveSurfaceToken,
   resolveTextStyle: () => import_tokens4.resolveTextStyle,
@@ -369,26 +386,42 @@ var React2 = __toESM(require("react"), 1);
 var import_icons_react = require("@tabler/icons-react");
 var tablerIconRegistry = {
   IconAdjustmentsHorizontalFilled: import_icons_react.IconAdjustmentsHorizontalFilled,
+  IconActivity: import_icons_react.IconActivity,
+  IconActivityHeartbeat: import_icons_react.IconActivityHeartbeat,
   IconAlignCenter: import_icons_react.IconAlignCenter,
   IconAlignJustified: import_icons_react.IconAlignJustified,
   IconAlignLeft: import_icons_react.IconAlignLeft,
   IconAlignRight: import_icons_react.IconAlignRight,
+  IconAlertCircle: import_icons_react.IconAlertCircle,
   IconArrowUp: import_icons_react.IconArrowUp,
   IconArchive: import_icons_react.IconArchive,
   IconBold: import_icons_react.IconBold,
+  IconBrain: import_icons_react.IconBrain,
   IconBuildingHospital: import_icons_react.IconBuildingHospital,
   IconBooks: import_icons_react.IconBooks,
   IconBulb: import_icons_react.IconBulb,
   IconChartBar: import_icons_react.IconChartBar,
   IconCheck: import_icons_react.IconCheck,
   IconChecklist: import_icons_react.IconChecklist,
+  IconClipboardList: import_icons_react.IconClipboardList,
+  IconClipboardText: import_icons_react.IconClipboardText,
   IconCode: import_icons_react.IconCode,
+  IconFileText: import_icons_react.IconFileText,
+  IconFlask: import_icons_react.IconFlask,
+  IconHeartbeat: import_icons_react.IconHeartbeat,
   IconItalic: import_icons_react.IconItalic,
   IconLink: import_icons_react.IconLink,
   IconList: import_icons_react.IconList,
+  IconListCheck: import_icons_react.IconListCheck,
   IconListNumbers: import_icons_react.IconListNumbers,
+  IconNotes: import_icons_react.IconNotes,
+  IconPill: import_icons_react.IconPill,
   IconQuote: import_icons_react.IconQuote,
+  IconReportMedical: import_icons_react.IconReportMedical,
   IconStrikethrough: import_icons_react.IconStrikethrough,
+  IconStethoscope: import_icons_react.IconStethoscope,
+  IconTable: import_icons_react.IconTable,
+  IconTemperature: import_icons_react.IconTemperature,
   IconUnderline: import_icons_react.IconUnderline,
   IconChevronLeft: import_icons_react.IconChevronLeft,
   IconChevronDown: import_icons_react.IconChevronDown,
@@ -456,6 +489,7 @@ var legacyIconToTablerNameMap = {
   "lightbulb": "IconBulb",
   "chats": "IconMessages",
   "file": "IconFile",
+  "file-text": "IconFileText",
   "folders": "IconFolders",
   "sparkle": "IconSparkles",
   "x": "IconX",
@@ -463,6 +497,21 @@ var legacyIconToTablerNameMap = {
   "search": "IconSearch",
   "arrow-up": "IconArrowUp",
   "question": "IconHelpCircle",
+  "activity": "IconActivity",
+  "activity-heartbeat": "IconActivityHeartbeat",
+  "alert-circle": "IconAlertCircle",
+  "brain": "IconBrain",
+  "clipboard-list": "IconClipboardList",
+  "clipboard-text": "IconClipboardText",
+  "flask": "IconFlask",
+  "heartbeat": "IconHeartbeat",
+  "list-check": "IconListCheck",
+  "notes": "IconNotes",
+  "pill": "IconPill",
+  "report-medical": "IconReportMedical",
+  "stethoscope": "IconStethoscope",
+  "table": "IconTable",
+  "temperature": "IconTemperature",
   "user-filled": "IconUserFilled",
   "caret-up": "IconChevronUp",
   "caret-left": "IconChevronLeft",
@@ -676,8 +725,10 @@ var defaultElements = {
   "body-md": "p",
   "body-sm": "p",
   body: "p",
+  "clinical-body": "p",
   "label-md": "span",
   "settings-section-title": "span",
+  "clinical-section-title": "span",
   "section-label": "span",
   "eyebrow-md": "span",
   "overline-md": "span",
@@ -705,7 +756,7 @@ var textSizeStyles = Object.fromEntries(
       fontWeight: `var(--sofya-text-${size}-font-weight)`,
       lineHeight: `var(--sofya-text-${size}-line-height)`,
       letterSpacing: `var(--sofya-text-${size}-letter-spacing)`,
-      ...size === "settings-section-title" ? { textTransform: "uppercase" } : {}
+      ...size === "settings-section-title" || size === "clinical-section-title" ? { textTransform: "uppercase" } : {}
     }
   ])
 );
@@ -5184,11 +5235,1424 @@ var RichTextToolbarButton = React31.forwardRef(function RichTextToolbarButton2({
 });
 RichTextToolbarButton.displayName = "RichTextToolbarButton";
 
-// src/components/right-rail-action.tsx
+// src/components/reasoning-widget.tsx
 var React32 = __toESM(require("react"), 1);
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var RightRailAction = React32.forwardRef(
-  ({ active = false, className, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var reasoningWidgetToneOptions = [
+  "default",
+  "info",
+  "success",
+  "warning",
+  "critical",
+  "muted"
+];
+var reasoningWidgetDensityOptions = ["default", "compact"];
+var reasoningWidgetVariantOptions = [
+  "flat",
+  "outline",
+  "muted",
+  "suggestion"
+];
+var reasoningWidgetActionScopeOptions = ["item", "widget"];
+var reasoningWidgetActionToneOptions = [
+  "primary",
+  "neutral",
+  "danger"
+];
+var reasoningWidgetTableAlignOptions = [
+  "left",
+  "center",
+  "right"
+];
+var reasoningWidgetTableColumnVariantOptions = [
+  "default",
+  "value"
+];
+var reasoningWidgetFrameOptions = ["bordered", "minimal"];
+var ReasoningWidgetDensityContext = React32.createContext("default");
+var actionIconNames = {
+  accept: "check",
+  add: "plus",
+  edit: "edit",
+  reject: "x",
+  remove: "trash"
+};
+var actionToneById = {
+  accept: "primary",
+  add: "primary",
+  edit: "neutral",
+  reject: "danger",
+  remove: "danger"
+};
+var actionVariantByTone = {
+  danger: "destructive",
+  neutral: "ghost",
+  primary: "subtle"
+};
+var toneSurfaceClassName = {
+  default: "border-[color:var(--sofya-neutral-600)] bg-card",
+  info: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)]",
+  success: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)]",
+  warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)]",
+  critical: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)]",
+  muted: "border-[color:var(--sofya-neutral-600)] bg-card"
+};
+var clinicalToneMarkerClassName = {
+  default: "bg-[color:var(--sofya-neutral-600)]",
+  info: "bg-secondary",
+  success: "bg-[color:var(--sofya-tag-green)]",
+  warning: "bg-[color:var(--sofya-tag-red)]",
+  critical: "bg-[color:var(--sofya-tag-red)]",
+  muted: "bg-[color:var(--sofya-neutral-600)]"
+};
+var clinicalToneSurfaceClassName = {
+  default: "bg-transparent",
+  info: "bg-[color:var(--sofya-neutral-50)]",
+  success: "bg-transparent",
+  warning: "bg-transparent",
+  critical: "bg-transparent",
+  muted: "bg-transparent"
+};
+var clinicalToneStatusClassName = {
+  default: "text-[color:var(--sofya-text-subtle)]",
+  info: "text-secondary",
+  success: "text-[color:var(--sofya-tag-green)]",
+  warning: "text-[color:var(--sofya-tag-red)]",
+  critical: "text-[color:var(--sofya-tag-red)]",
+  muted: "text-[color:var(--sofya-text-subtle)]"
+};
+var clinicalToneValueClassName = {
+  default: "text-[color:var(--sofya-neutral-900)]",
+  info: "text-[color:var(--sofya-neutral-900)]",
+  success: "text-[color:var(--sofya-neutral-900)]",
+  warning: "text-[color:var(--sofya-tag-red)]",
+  critical: "text-[color:var(--sofya-tag-red)]",
+  muted: "text-[color:var(--sofya-neutral-900)]"
+};
+var clinicalToneBadgeClassName = {
+  default: "bg-[color:var(--sofya-neutral-50)] text-[color:var(--sofya-text-subtle)]",
+  info: "bg-[color:var(--sofya-neutral-50)] text-secondary",
+  success: "bg-[color:var(--sofya-agent-mint)] text-[color:var(--sofya-tag-green)]",
+  warning: "bg-[color:var(--sofya-tag-sand)] text-[color:var(--sofya-tag-red)]",
+  critical: "bg-[color:var(--sofya-tag-sand)] text-[color:var(--sofya-tag-red)]",
+  muted: "bg-[color:var(--sofya-neutral-50)] text-[color:var(--sofya-text-subtle)]"
+};
+var clinicalDataFrameClassName = {
+  bordered: "w-full overflow-hidden rounded-[var(--sofya-radius-lg)] border border-[color:var(--sofya-neutral-600)] bg-card",
+  minimal: "w-full overflow-hidden rounded-[var(--sofya-radius-md)] border-0 bg-[color:var(--sofya-neutral-50)]"
+};
+var clinicalDataHeaderClassName = {
+  bordered: "border-b border-[color:var(--sofya-neutral-600)] bg-[color:var(--sofya-neutral-50)]",
+  minimal: "border-b border-[color:var(--sofya-neutral-600)] bg-transparent"
+};
+var clinicalLabsFrameClassName = {
+  bordered: "w-full overflow-x-auto overflow-y-hidden rounded-[var(--sofya-radius-lg)] border border-[color:var(--sofya-neutral-600)] bg-card",
+  minimal: "w-fit max-w-full overflow-x-auto overflow-y-hidden rounded-[var(--sofya-radius-md)] border-0 bg-[color:var(--sofya-neutral-50)]"
+};
+var tableAlignClassName = {
+  center: "text-center",
+  left: "text-left",
+  right: "text-right"
+};
+function isWidgetAction(action) {
+  return action.scope === "widget";
+}
+function isItemAction(action) {
+  return action.scope !== "widget";
+}
+function getActionIcon(action) {
+  if (action.icon) {
+    return action.icon;
+  }
+  return actionIconNames[action.id] ?? "square-toggle";
+}
+function getActionTone(action) {
+  if (action.tone) {
+    return action.tone;
+  }
+  return actionToneById[action.id] ?? "neutral";
+}
+function getTargetLabel(target) {
+  if (!target) {
+    return void 0;
+  }
+  if ("label" in target) {
+    return typeof target.label === "string" || typeof target.label === "number" ? String(target.label) : target.id;
+  }
+  return target.id;
+}
+function getActionLabel(action, target) {
+  if (action.ariaLabel) {
+    return action.ariaLabel;
+  }
+  const targetLabel = getTargetLabel(target);
+  return targetLabel ? `${action.label} ${targetLabel}` : action.label;
+}
+function getItemsFromDescriptor(widget) {
+  return widget.items ?? widget.data?.items ?? [];
+}
+function getDescriptionFromDescriptor(widget) {
+  return widget.description ?? widget.data?.description;
+}
+function getEmptyLabelFromDescriptor(widget) {
+  return widget.emptyLabel ?? widget.data?.emptyLabel;
+}
+function getFrameFromDescriptor(widget) {
+  return widget.frame ?? widget.data?.frame;
+}
+function getDescriptorKind(widget) {
+  return `${widget.component ?? ""} ${widget.type ?? ""}`.toLowerCase();
+}
+function getIconFromDescriptor(widget) {
+  if (widget.icon) {
+    return widget.icon;
+  }
+  const descriptorKind = getDescriptorKind(widget);
+  if (descriptorKind.includes("summary") || descriptorKind.includes("impression") || hasRenderableNode(widget.data?.impression)) {
+    return "stethoscope";
+  }
+  if (descriptorKind.includes("vitals")) {
+    return "activity-heartbeat";
+  }
+  if (descriptorKind.includes("question")) {
+    return "question";
+  }
+  if (descriptorKind.includes("prescription") || descriptorKind.includes("medication")) {
+    return "pill";
+  }
+  if (descriptorKind.includes("lab")) {
+    return "flask";
+  }
+  if (descriptorKind.includes("alert")) {
+    return "alert-circle";
+  }
+  if (widget.data?.tableColumns && widget.data.rows) {
+    return "table";
+  }
+  return "clipboard-list";
+}
+function hasRenderableNode(value) {
+  return value !== null && value !== void 0 && value !== false;
+}
+function isEditableTextValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+function ReasoningEditableText({
+  as = "span",
+  ariaLabel,
+  className,
+  editable = false,
+  multiline = false,
+  onCommit,
+  size,
+  value,
+  weight
+}) {
+  if (!editable || !isEditableTextValue(value)) {
+    return renderTextContent(value, {
+      as,
+      className,
+      size,
+      weight
+    });
+  }
+  const initialValue = String(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    Text,
+    {
+      as,
+      "aria-label": ariaLabel,
+      className: cn(
+        "rounded-[4px] text-inherit outline-none transition-[background-color,box-shadow] duration-sofya ease-sofya",
+        "-mx-1 px-1 hover:bg-[color:var(--sofya-surface-hover)] focus-visible:bg-card focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-strong)]",
+        multiline ? "whitespace-pre-wrap" : "truncate",
+        className
+      ),
+      contentEditable: true,
+      "data-editable": "true",
+      role: "textbox",
+      size,
+      spellCheck: true,
+      suppressContentEditableWarning: true,
+      tabIndex: 0,
+      weight,
+      onBlur: (event) => {
+        const nextValue = event.currentTarget.textContent ?? "";
+        if (nextValue !== initialValue) {
+          onCommit?.(nextValue);
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && !multiline) {
+          event.preventDefault();
+          event.currentTarget.blur();
+        }
+      },
+      children: initialValue
+    }
+  );
+}
+var ReasoningWidgetActionButton = React32.forwardRef(function ReasoningWidgetActionButton2({ action, className, disabled, onAction, target, widgetId, ...props }, ref) {
+  const tone = getActionTone(action);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    IconButton,
+    {
+      ref,
+      "aria-label": getActionLabel(
+        action,
+        target
+      ),
+      "data-action-id": action.id,
+      "data-action-scope": action.scope,
+      disabled: disabled ?? action.disabled,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: getActionIcon(action), size: "sm" }),
+      size: "sm",
+      variant: actionVariantByTone[tone],
+      className: cn(
+        "rounded-[var(--sofya-radius-sm)] text-[color:var(--sofya-text-soft)]",
+        tone === "primary" && "text-primary",
+        className
+      ),
+      onClick: () => {
+        onAction?.({
+          action,
+          target,
+          widgetId
+        });
+      },
+      ...props
+    }
+  );
+});
+var ReasoningWidgetActions = React32.forwardRef(function ReasoningWidgetActions2({
+  actions = [],
+  className,
+  onAction,
+  reveal = "widget-hover",
+  target,
+  widgetId,
+  ...props
+}, ref) {
+  if (actions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "reasoning-widget-actions",
+      "data-reveal": reveal,
+      className: cn(
+        "z-10 flex shrink-0 items-center gap-1 transition-opacity duration-sofya ease-sofya",
+        reveal === "widget-hover" && "pointer-events-none opacity-0 group-hover/reasoning:pointer-events-auto group-hover/reasoning:opacity-100 group-focus-within/reasoning:pointer-events-auto group-focus-within/reasoning:opacity-100",
+        reveal === "item-hover" && "pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 group-focus-within/item:pointer-events-auto group-focus-within/item:opacity-100",
+        className
+      ),
+      ...props,
+      children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        ReasoningWidgetActionButton,
+        {
+          action,
+          onAction,
+          target,
+          widgetId
+        },
+        action.id
+      ))
+    }
+  );
+});
+var ReasoningWidget = React32.forwardRef(
+  function ReasoningWidget2({
+    actions = [],
+    children,
+    className,
+    density = "default",
+    description,
+    empty = false,
+    emptyLabel = "No extracted information yet.",
+    eyebrow,
+    icon,
+    onAction,
+    sectionDivider = false,
+    title,
+    variant = "flat",
+    widgetId,
+    ...props
+  }, ref) {
+    const widgetActions = actions.filter(isWidgetAction);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ReasoningWidgetDensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "article",
+      {
+        ref,
+        "data-density": density,
+        "data-slot": "reasoning-widget",
+        "data-variant": variant,
+        className: cn(
+          "group/reasoning w-full shadow-none",
+          "transition-[border-color,box-shadow] duration-sofya ease-sofya",
+          variant === "flat" && "rounded-none border-0 bg-transparent p-0",
+          variant === "outline" && "rounded-[var(--sofya-radius-md)] border border-[color:var(--sofya-border-strong)] bg-card",
+          variant === "muted" && "rounded-[var(--sofya-radius-md)] border-0 bg-[color:var(--sofya-surface-muted)]",
+          variant === "suggestion" && "rounded-[var(--sofya-radius-md)] border border-[color:var(--sofya-border-hover)] bg-card",
+          variant !== "flat" && (density === "compact" ? "p-4" : "p-5"),
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            "div",
+            {
+              "data-slot": "reasoning-widget-header",
+              className: "relative flex items-start gap-4",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 items-start gap-2.5", children: [
+                    icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-icon": icon,
+                        "data-slot": "reasoning-widget-icon",
+                        className: "mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-secondary",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon, size: 14, strokeWidth: 1.8 })
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0", children: [
+                      eyebrow ? renderTextContent(eyebrow, {
+                        as: "span",
+                        className: "mb-1 block uppercase text-secondary [font-weight:var(--sofya-text-section-label-font-weight)]",
+                        size: "section-label"
+                      }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        "h3",
+                        {
+                          className: cn(
+                            "m-0",
+                            eyebrow ? "text-[color:var(--sofya-neutral-800)]" : "text-secondary"
+                          ),
+                          children: renderTextContent(title, {
+                            as: "span",
+                            className: cn(
+                              "block text-inherit",
+                              !eyebrow && "uppercase"
+                            ),
+                            size: eyebrow ? density === "compact" ? "label-md" : "title-sm" : density === "compact" ? "section-label" : "clinical-section-title"
+                          })
+                        }
+                      ),
+                      description ? renderTextContent(description, {
+                        as: "p",
+                        className: "mt-2 text-[color:var(--sofya-text-subtle)]",
+                        size: "body-md"
+                      }) : null
+                    ] })
+                  ] }),
+                  sectionDivider ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      "data-slot": "reasoning-widget-section-divider",
+                      className: cn(
+                        "mt-2 h-px min-w-8 flex-1 bg-[color:var(--sofya-neutral-600)]",
+                        widgetActions.length > 0 && "mr-12"
+                      )
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  ReasoningWidgetActions,
+                  {
+                    actions: widgetActions,
+                    className: "absolute right-0 top-1/2 -translate-y-1/2",
+                    onAction,
+                    reveal: "widget-hover",
+                    widgetId
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "div",
+            {
+              "data-slot": "reasoning-widget-content",
+              className: cn(density === "compact" ? "mt-3" : "mt-4"),
+              children: empty ? renderTextContent(emptyLabel, {
+                as: "p",
+                className: "m-0 text-[color:var(--sofya-text-subtle)]",
+                size: "body-md"
+              }) : children
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var ReasoningWidgetList = React32.forwardRef(function ReasoningWidgetList2({
+  actions = [],
+  className,
+  editable = false,
+  emptyLabel,
+  items,
+  onAction,
+  onItemEdit,
+  widgetId,
+  ...props
+}, ref) {
+  const itemActions = actions.filter(isItemAction);
+  const density = React32.useContext(ReasoningWidgetDensityContext);
+  const primaryTextSize = density === "compact" ? "body-md" : "clinical-body";
+  const supportingTextSize = density === "compact" ? "body-sm" : "clinical-body";
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "m-0 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(emptyLabel ?? "No extracted items.", {
+      as: "span",
+      className: "block text-inherit",
+      size: "body-md"
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "ul",
+    {
+      ref,
+      "data-slot": "reasoning-widget-list",
+      className: cn("m-0 list-none space-y-0 p-0", className),
+      ...props,
+      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "li",
+        {
+          "data-slot": "reasoning-widget-list-item",
+          "data-tone": item.tone,
+          className: "group/item relative grid grid-cols-[auto_minmax(0,1fr)] items-start gap-3 rounded-[var(--sofya-radius-sm)] pr-2 transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-surface-hover)] focus-within:bg-[color:var(--sofya-surface-hover)]",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-slot": "reasoning-widget-list-marker",
+                className: "mt-2 size-2 rounded-full bg-[color:var(--sofya-text-soft)]"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 text-[color:var(--sofya-neutral-800)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  ReasoningEditableText,
+                  {
+                    ariaLabel: `Edit ${getTargetLabel(item) ?? "item"} label`,
+                    className: "block text-inherit",
+                    editable,
+                    size: primaryTextSize,
+                    value: item.label,
+                    onCommit: (value) => {
+                      onItemEdit?.({
+                        field: "label",
+                        item,
+                        value,
+                        widgetId
+                      });
+                    }
+                  }
+                ) }),
+                hasRenderableNode(item.value) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  ReasoningEditableText,
+                  {
+                    ariaLabel: `Edit ${getTargetLabel(item) ?? "item"} value`,
+                    className: "text-[color:var(--sofya-text-soft)]",
+                    editable,
+                    size: primaryTextSize,
+                    value: item.value,
+                    onCommit: (value) => {
+                      onItemEdit?.({
+                        field: "value",
+                        item,
+                        value,
+                        widgetId
+                      });
+                    }
+                  }
+                ) : null,
+                hasRenderableNode(item.status) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  ReasoningEditableText,
+                  {
+                    ariaLabel: `Edit ${getTargetLabel(item) ?? "item"} status`,
+                    className: "text-[color:var(--sofya-text-subtle)]",
+                    editable,
+                    size: "caption",
+                    value: item.status,
+                    onCommit: (value) => {
+                      onItemEdit?.({
+                        field: "status",
+                        item,
+                        value,
+                        widgetId
+                      });
+                    }
+                  }
+                ) : null
+              ] }),
+              hasRenderableNode(item.evidence) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                ReasoningEditableText,
+                {
+                  as: "p",
+                  ariaLabel: `Edit ${getTargetLabel(item) ?? "item"} evidence`,
+                  className: "mt-1 text-[color:var(--sofya-text-subtle)]",
+                  editable,
+                  multiline: true,
+                  size: supportingTextSize,
+                  value: item.evidence,
+                  onCommit: (value) => {
+                    onItemEdit?.({
+                      field: "evidence",
+                      item,
+                      value,
+                      widgetId
+                    });
+                  }
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              ReasoningWidgetActions,
+              {
+                actions: itemActions,
+                className: "absolute right-1 top-1",
+                onAction,
+                reveal: "item-hover",
+                target: item,
+                widgetId
+              }
+            )
+          ]
+        },
+        item.id ?? `reasoning-widget-item-${index}`
+      ))
+    }
+  );
+});
+var ReasoningWidgetTable = React32.forwardRef(function ReasoningWidgetTable2({
+  actions = [],
+  className,
+  columns,
+  editable = false,
+  emptyLabel = "No rows available.",
+  onAction,
+  onCellEdit,
+  rows,
+  showHeader = true,
+  widgetId,
+  ...props
+}, ref) {
+  const itemActions = actions.filter(isItemAction);
+  const hasActions = itemActions.length > 0;
+  const density = React32.useContext(ReasoningWidgetDensityContext);
+  const headerTextSize = density === "compact" ? "label-md" : "body-sm";
+  const cellTextSize = density === "compact" ? "body-sm" : "body-sm";
+  if (rows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "m-0 text-[color:var(--sofya-text-subtle)]", children: renderTextContent(emptyLabel, {
+      as: "span",
+      className: "block text-inherit",
+      size: "body-md"
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "reasoning-widget-table",
+      className: cn(
+        "overflow-hidden rounded-[10px] border border-[color:var(--sofya-neutral-600)] bg-[color:var(--sofya-neutral-50)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "w-full border-collapse table-fixed", children: [
+        showHeader ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { className: "border-b border-[color:var(--sofya-neutral-600)]", children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "th",
+          {
+            className: cn(
+              "align-middle text-[color:var(--sofya-text-subtle)]",
+              density === "compact" ? "px-3 py-2" : "px-4 py-2",
+              columnIndex > 0 && "border-l border-[color:var(--sofya-neutral-600)]",
+              tableAlignClassName[column.align ?? "left"]
+            ),
+            style: column.width ? { width: column.width } : void 0,
+            scope: "col",
+            children: renderTextContent(column.header, {
+              as: "span",
+              className: "block truncate text-inherit",
+              size: headerTextSize
+            })
+          },
+          column.key
+        )) }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "tr",
+          {
+            "data-tone": row.tone,
+            className: cn(
+              "group/item border-t border-[color:var(--sofya-neutral-600)] transition-colors duration-sofya ease-sofya first:border-t-0 hover:bg-[color:var(--sofya-surface-hover)] focus-within:bg-[color:var(--sofya-surface-hover)]",
+              row.tone && toneSurfaceClassName[row.tone]
+            ),
+            children: columns.map((column, columnIndex) => {
+              const isLastColumn = columnIndex === columns.length - 1;
+              return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                "td",
+                {
+                  className: cn(
+                    "relative min-w-0 align-top",
+                    density === "compact" ? "px-3 py-2" : "px-4 py-2",
+                    column.variant === "value" ? "text-[color:var(--sofya-neutral-800)]" : "text-[color:var(--sofya-neutral-800)]",
+                    columnIndex > 0 && "border-l border-[color:var(--sofya-neutral-600)]",
+                    hasActions && isLastColumn && "pr-24",
+                    tableAlignClassName[column.align ?? "left"]
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningEditableText,
+                      {
+                        ariaLabel: `Edit ${row.id ?? "row"} ${column.key}`,
+                        className: "block truncate text-inherit",
+                        editable,
+                        size: cellTextSize,
+                        value: row.cells[column.key] ?? null,
+                        weight: column.variant === "value" ? 600 : void 0,
+                        onCommit: (value) => {
+                          onCellEdit?.({
+                            columnKey: column.key,
+                            row,
+                            value,
+                            widgetId
+                          });
+                        }
+                      }
+                    ),
+                    hasActions && isLastColumn ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningWidgetActions,
+                      {
+                        actions: itemActions,
+                        className: "absolute right-2 top-1/2 -translate-y-1/2",
+                        onAction,
+                        reveal: "item-hover",
+                        target: row,
+                        widgetId
+                      }
+                    ) : null
+                  ]
+                },
+                column.key
+              );
+            })
+          },
+          row.id ?? `reasoning-widget-row-${rowIndex}`
+        )) })
+      ] })
+    }
+  );
+});
+var ReasoningVitalsWidget = React32.forwardRef(function ReasoningVitalsWidget2({
+  actions = [],
+  editable = false,
+  emptyLabel = "No vitals extracted.",
+  frame = "bordered",
+  icon = "activity-heartbeat",
+  items,
+  onAction,
+  onItemEdit,
+  title = "Vitals",
+  widgetId,
+  ...props
+}, ref) {
+  const itemActions = actions.filter(isItemAction);
+  const hasActions = itemActions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ReasoningWidget,
+    {
+      ref,
+      actions,
+      empty: items.length === 0,
+      emptyLabel,
+      icon,
+      onAction,
+      title,
+      widgetId,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "div",
+        {
+          "data-slot": "reasoning-vitals-list",
+          "data-frame": frame,
+          className: clinicalDataFrameClassName[frame],
+          children: items.map((item, index) => {
+            const tone = item.tone ?? "muted";
+            const unit = item.unit ?? (typeof item.metadata?.unit === "string" ? item.metadata.unit : void 0);
+            const hasValue = hasRenderableNode(item.value);
+            const value = hasValue ? item.value : item.label;
+            const label = hasValue ? item.label : void 0;
+            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              "div",
+              {
+                "data-slot": "reasoning-vital",
+                "data-tone": tone,
+                className: cn(
+                  "group/item relative grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-stretch gap-0 border-t border-[color:var(--sofya-neutral-600)] transition-colors duration-sofya ease-sofya first:border-t-0 hover:bg-[color:var(--sofya-surface-hover)] focus-within:bg-[color:var(--sofya-surface-hover)]",
+                  clinicalToneSurfaceClassName[tone]
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      "data-slot": "reasoning-vital-marker",
+                      className: cn(
+                        "my-5 ml-0 mr-5 w-1 rounded-r-full",
+                        clinicalToneMarkerClassName[tone]
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "min-w-0 py-5", children: [
+                    hasRenderableNode(label) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningEditableText,
+                      {
+                        as: "p",
+                        ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} label`,
+                        className: "text-[color:var(--sofya-neutral-900)]",
+                        editable,
+                        size: "title-sm",
+                        weight: 500,
+                        value: label,
+                        onCommit: (nextValue) => {
+                          onItemEdit?.({
+                            field: "label",
+                            item,
+                            value: nextValue,
+                            widgetId
+                          });
+                        }
+                      }
+                    ) : null,
+                    hasRenderableNode(item.referenceRange) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningEditableText,
+                      {
+                        as: "p",
+                        ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} reference range`,
+                        className: "mt-1 text-[color:var(--sofya-text-subtle)]",
+                        editable,
+                        size: "body-sm",
+                        value: item.referenceRange,
+                        onCommit: (nextValue) => {
+                          onItemEdit?.({
+                            field: "referenceRange",
+                            item,
+                            value: nextValue,
+                            widgetId
+                          });
+                        }
+                      }
+                    ) : null,
+                    hasRenderableNode(item.evidence) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningEditableText,
+                      {
+                        as: "p",
+                        ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} evidence`,
+                        className: "mt-1 text-[color:var(--sofya-text-subtle)]",
+                        editable,
+                        multiline: true,
+                        size: "body-sm",
+                        value: item.evidence,
+                        onCommit: (nextValue) => {
+                          onItemEdit?.({
+                            field: "evidence",
+                            item,
+                            value: nextValue,
+                            widgetId
+                          });
+                        }
+                      }
+                    ) : null,
+                    hasRenderableNode(item.observedAt) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningEditableText,
+                      {
+                        as: "p",
+                        ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} observed time`,
+                        className: "mt-1 text-[color:var(--sofya-text-subtle)]",
+                        editable,
+                        size: "body-sm",
+                        value: item.observedAt,
+                        onCommit: (nextValue) => {
+                          onItemEdit?.({
+                            field: "observedAt",
+                            item,
+                            value: nextValue,
+                            widgetId
+                          });
+                        }
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                    "div",
+                    {
+                      className: cn(
+                        "min-w-[7.5rem] py-4 pr-6 text-right",
+                        hasActions && "pr-24"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 items-baseline justify-end gap-1", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                            "span",
+                            {
+                              className: cn("min-w-0", clinicalToneValueClassName[tone]),
+                              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                                ReasoningEditableText,
+                                {
+                                  ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} value`,
+                                  className: "block text-inherit",
+                                  editable,
+                                  size: "title-md",
+                                  value,
+                                  weight: 600,
+                                  onCommit: (nextValue) => {
+                                    onItemEdit?.({
+                                      field: hasValue ? "value" : "label",
+                                      item,
+                                      value: nextValue,
+                                      widgetId
+                                    });
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          hasRenderableNode(unit) && hasValue ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                            ReasoningEditableText,
+                            {
+                              ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} unit`,
+                              className: "text-[color:var(--sofya-text-subtle)]",
+                              editable,
+                              size: "body-sm",
+                              value: unit,
+                              onCommit: (nextValue) => {
+                                onItemEdit?.({
+                                  field: "unit",
+                                  item,
+                                  value: nextValue,
+                                  widgetId
+                                });
+                              }
+                            }
+                          ) : null
+                        ] }),
+                        hasRenderableNode(item.status) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          ReasoningEditableText,
+                          {
+                            as: "p",
+                            ariaLabel: `Edit ${getTargetLabel(item) ?? "vital"} status`,
+                            className: cn(
+                              "mt-1 text-right",
+                              clinicalToneStatusClassName[tone]
+                            ),
+                            editable,
+                            size: "label-md",
+                            value: item.status,
+                            weight: 600,
+                            onCommit: (nextValue) => {
+                              onItemEdit?.({
+                                field: "status",
+                                item,
+                                value: nextValue,
+                                widgetId
+                              });
+                            }
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                    ReasoningWidgetActions,
+                    {
+                      actions: itemActions,
+                      className: "absolute right-2 top-1/2 -translate-y-1/2",
+                      onAction,
+                      reveal: "item-hover",
+                      target: item,
+                      widgetId
+                    }
+                  )
+                ]
+              },
+              item.id ?? `reasoning-vital-${index}`
+            );
+          })
+        }
+      )
+    }
+  );
+});
+var ReasoningLabsWidget = React32.forwardRef(function ReasoningLabsWidget2({
+  actions = [],
+  columnLabels,
+  editable = false,
+  emptyLabel = "No labs extracted.",
+  frame = "bordered",
+  icon = "flask",
+  items,
+  onAction,
+  onItemEdit,
+  title = "Labs",
+  widgetId,
+  ...props
+}, ref) {
+  const itemActions = actions.filter(isItemAction);
+  const labColumns = [
+    {
+      key: "test",
+      label: columnLabels?.test ?? "Test",
+      width: "260px"
+    },
+    {
+      key: "result",
+      label: columnLabels?.result ?? "Result",
+      width: "150px"
+    },
+    {
+      key: "reference",
+      label: columnLabels?.reference ?? "Reference",
+      width: "150px"
+    },
+    {
+      key: "flag",
+      label: columnLabels?.flag ?? "Flag",
+      width: "160px"
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ReasoningWidget,
+    {
+      ref,
+      actions,
+      empty: items.length === 0,
+      emptyLabel,
+      icon,
+      onAction,
+      title,
+      widgetId,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "div",
+        {
+          "data-slot": "reasoning-labs-table",
+          "data-frame": frame,
+          className: clinicalLabsFrameClassName[frame],
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "w-auto min-w-[720px] border-collapse table-fixed", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tr", { className: clinicalDataHeaderClassName[frame], children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { className: "w-7 px-4 py-3", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sr-only", children: columnLabels?.tone ?? "Tone" }) }),
+              labColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "th",
+                {
+                  className: "px-4 py-3 text-left align-middle text-[color:var(--sofya-text-subtle)]",
+                  scope: "col",
+                  style: { width: column.width },
+                  children: renderTextContent(column.label, {
+                    as: "span",
+                    className: "block truncate text-inherit",
+                    size: "clinical-section-title"
+                  })
+                },
+                column.key
+              ))
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tbody", { children: items.map((item, index) => {
+              const tone = item.tone ?? "muted";
+              const unit = item.unit ?? (typeof item.metadata?.unit === "string" ? item.metadata.unit : void 0);
+              const interpretation = item.interpretation ?? item.status;
+              return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                "tr",
+                {
+                  "data-slot": "reasoning-lab",
+                  "data-tone": tone,
+                  className: cn(
+                    "group/item border-t border-[color:var(--sofya-neutral-600)] transition-colors duration-sofya ease-sofya first:border-t-0 hover:bg-[color:var(--sofya-surface-hover)] focus-within:bg-[color:var(--sofya-surface-hover)]",
+                    clinicalToneSurfaceClassName[tone]
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-0 py-4 align-top", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "reasoning-lab-marker",
+                        className: cn(
+                          "mt-1 block h-12 w-1 rounded-r-full",
+                          clinicalToneMarkerClassName[tone]
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("td", { className: "min-w-0 px-4 py-4 align-top text-[color:var(--sofya-neutral-900)]", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        ReasoningEditableText,
+                        {
+                          ariaLabel: `Edit ${getTargetLabel(item) ?? "lab"} label`,
+                          className: "block text-inherit",
+                          editable,
+                          size: "title-sm",
+                          value: item.label,
+                          weight: 500,
+                          onCommit: (nextValue) => {
+                            onItemEdit?.({
+                              field: "label",
+                              item,
+                              value: nextValue,
+                              widgetId
+                            });
+                          }
+                        }
+                      ),
+                      hasRenderableNode(item.evidence) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        ReasoningEditableText,
+                        {
+                          as: "p",
+                          ariaLabel: `Edit ${getTargetLabel(item) ?? "lab"} evidence`,
+                          className: "mt-1 text-[color:var(--sofya-text-subtle)]",
+                          editable,
+                          multiline: true,
+                          size: "body-sm",
+                          value: item.evidence,
+                          onCommit: (nextValue) => {
+                            onItemEdit?.({
+                              field: "evidence",
+                              item,
+                              value: nextValue,
+                              widgetId
+                            });
+                          }
+                        }
+                      ) : null
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "min-w-0 px-4 py-4 align-top", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-col items-start", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        "span",
+                        {
+                          className: cn(
+                            "min-w-0",
+                            clinicalToneValueClassName[tone]
+                          ),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                            ReasoningEditableText,
+                            {
+                              ariaLabel: `Edit ${getTargetLabel(item) ?? "lab"} value`,
+                              className: "block text-inherit",
+                              editable,
+                              size: "title-sm",
+                              value: item.value ?? null,
+                              weight: 600,
+                              onCommit: (nextValue) => {
+                                onItemEdit?.({
+                                  field: "value",
+                                  item,
+                                  value: nextValue,
+                                  widgetId
+                                });
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      hasRenderableNode(unit) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        ReasoningEditableText,
+                        {
+                          ariaLabel: `Edit ${getTargetLabel(item) ?? "lab"} unit`,
+                          className: "text-[color:var(--sofya-text-subtle)]",
+                          editable,
+                          size: "body-sm",
+                          value: unit,
+                          onCommit: (nextValue) => {
+                            onItemEdit?.({
+                              field: "unit",
+                              item,
+                              value: nextValue,
+                              widgetId
+                            });
+                          }
+                        }
+                      ) : null
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "min-w-0 px-4 py-4 align-top text-[color:var(--sofya-text-soft)]", children: hasRenderableNode(item.referenceRange) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                      ReasoningEditableText,
+                      {
+                        ariaLabel: `Edit ${getTargetLabel(item) ?? "lab"} reference range`,
+                        className: "block truncate text-inherit",
+                        editable,
+                        size: "body-sm",
+                        value: item.referenceRange,
+                        onCommit: (nextValue) => {
+                          onItemEdit?.({
+                            field: "referenceRange",
+                            item,
+                            value: nextValue,
+                            widgetId
+                          });
+                        }
+                      }
+                    ) : null }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("td", { className: "relative min-w-0 px-4 py-4 align-top", children: [
+                      hasRenderableNode(interpretation) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        ReasoningEditableText,
+                        {
+                          ariaLabel: `Edit ${getTargetLabel(item) ?? "lab"} interpretation`,
+                          className: cn(
+                            "inline-flex rounded-full px-3 py-1",
+                            clinicalToneBadgeClassName[tone]
+                          ),
+                          editable,
+                          multiline: true,
+                          size: "label-md",
+                          value: interpretation,
+                          weight: tone === "muted" ? void 0 : 600,
+                          onCommit: (nextValue) => {
+                            onItemEdit?.({
+                              field: "status",
+                              item,
+                              value: nextValue,
+                              widgetId
+                            });
+                          }
+                        }
+                      ) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                        ReasoningWidgetActions,
+                        {
+                          actions: itemActions,
+                          className: "absolute right-2 top-1/2 -translate-y-1/2",
+                          onAction,
+                          reveal: "item-hover",
+                          target: item,
+                          widgetId
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                item.id ?? `reasoning-lab-${index}`
+              );
+            }) })
+          ] })
+        }
+      )
+    }
+  );
+});
+var ReasoningSummaryWidget = React32.forwardRef(function ReasoningSummaryWidget2({
+  actions,
+  clinicalImpression,
+  description,
+  editable = false,
+  findings = [],
+  eyebrow = "Summary",
+  icon = "stethoscope",
+  onAction,
+  onItemEdit,
+  onSummaryEdit,
+  title,
+  widgetId,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    ReasoningWidget,
+    {
+      ref,
+      actions,
+      description,
+      eyebrow,
+      icon,
+      onAction,
+      title,
+      widgetId,
+      ...props,
+      children: [
+        hasRenderableNode(clinicalImpression) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          ReasoningEditableText,
+          {
+            as: "p",
+            ariaLabel: "Edit clinical impression",
+            className: "m-0 text-[color:var(--sofya-neutral-800)]",
+            editable,
+            multiline: true,
+            size: "clinical-body",
+            value: clinicalImpression,
+            onCommit: (value) => {
+              onSummaryEdit?.({
+                field: "clinicalImpression",
+                value,
+                widgetId
+              });
+            }
+          }
+        ) : null,
+        findings.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          ReasoningWidgetList,
+          {
+            actions,
+            className: hasRenderableNode(clinicalImpression) ? "mt-3" : void 0,
+            editable,
+            items: findings,
+            onAction,
+            onItemEdit,
+            widgetId
+          }
+        ) : null
+      ]
+    }
+  );
+});
+function ReasoningWidgetRenderer({
+  editable = false,
+  onAction,
+  onCellEdit,
+  onItemEdit,
+  onSummaryEdit,
+  widget,
+  ...props
+}) {
+  const descriptorKind = getDescriptorKind(widget);
+  const description = getDescriptionFromDescriptor(widget);
+  const emptyLabel = getEmptyLabelFromDescriptor(widget);
+  const frame = getFrameFromDescriptor(widget);
+  const items = getItemsFromDescriptor(widget);
+  const actions = widget.actions ?? [];
+  const icon = getIconFromDescriptor(widget);
+  if (descriptorKind.includes("summary") || hasRenderableNode(widget.data?.impression)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      ReasoningSummaryWidget,
+      {
+        actions,
+        clinicalImpression: widget.data?.impression,
+        description,
+        editable,
+        findings: items,
+        icon,
+        onAction,
+        onItemEdit,
+        onSummaryEdit,
+        sectionDivider: widget.sectionDivider,
+        title: widget.title,
+        widgetId: widget.id,
+        ...props
+      }
+    );
+  }
+  if (descriptorKind.includes("vitals")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      ReasoningVitalsWidget,
+      {
+        actions,
+        description,
+        editable,
+        emptyLabel,
+        frame,
+        icon,
+        items,
+        onAction,
+        onItemEdit,
+        sectionDivider: widget.sectionDivider,
+        title: widget.title,
+        widgetId: widget.id,
+        ...props
+      }
+    );
+  }
+  if (descriptorKind.includes("lab") && items.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      ReasoningLabsWidget,
+      {
+        actions,
+        columnLabels: widget.data?.labColumnLabels,
+        description,
+        editable,
+        emptyLabel,
+        frame,
+        icon,
+        items,
+        onAction,
+        onItemEdit,
+        sectionDivider: widget.sectionDivider,
+        title: widget.title,
+        widgetId: widget.id,
+        ...props
+      }
+    );
+  }
+  if (widget.data?.tableColumns && widget.data.rows) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      ReasoningWidget,
+      {
+        actions,
+        description,
+        empty: widget.data.rows.length === 0,
+        emptyLabel,
+        icon,
+        onAction,
+        sectionDivider: widget.sectionDivider,
+        title: widget.title,
+        widgetId: widget.id,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          ReasoningWidgetTable,
+          {
+            actions,
+            columns: widget.data.tableColumns,
+            editable,
+            emptyLabel,
+            onAction,
+            onCellEdit,
+            rows: widget.data.rows,
+            widgetId: widget.id
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ReasoningWidget,
+    {
+      actions,
+      description,
+      empty: items.length === 0,
+      emptyLabel,
+      icon,
+      onAction,
+      sectionDivider: widget.sectionDivider,
+      title: widget.title,
+      widgetId: widget.id,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        ReasoningWidgetList,
+        {
+          actions,
+          editable,
+          emptyLabel,
+          items,
+          onAction,
+          onItemEdit,
+          widgetId: widget.id
+        }
+      )
+    }
+  );
+}
+ReasoningWidgetActionButton.displayName = "ReasoningWidgetActionButton";
+ReasoningWidgetActions.displayName = "ReasoningWidgetActions";
+ReasoningWidget.displayName = "ReasoningWidget";
+ReasoningWidgetList.displayName = "ReasoningWidgetList";
+ReasoningWidgetTable.displayName = "ReasoningWidgetTable";
+ReasoningVitalsWidget.displayName = "ReasoningVitalsWidget";
+ReasoningLabsWidget.displayName = "ReasoningLabsWidget";
+ReasoningSummaryWidget.displayName = "ReasoningSummaryWidget";
+
+// src/components/right-rail-action.tsx
+var React33 = __toESM(require("react"), 1);
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var RightRailAction = React33.forwardRef(
+  ({ active = false, className, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     IconButton,
     {
       ref,
@@ -5207,12 +6671,12 @@ var RightRailAction = React32.forwardRef(
 RightRailAction.displayName = "RightRailAction";
 
 // src/components/scroll-area.tsx
-var React33 = __toESM(require("react"), 1);
+var React34 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var scrollAreaOrientationOptions = ["horizontal", "vertical"];
-var ScrollArea = React33.forwardRef(function ScrollArea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ScrollArea = React34.forwardRef(function ScrollArea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ScrollAreaPrimitive.Root,
     {
       ref,
@@ -5223,8 +6687,8 @@ var ScrollArea = React33.forwardRef(function ScrollArea2({ className, ...props }
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollAreaViewport = React33.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ScrollAreaViewport = React34.forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ScrollAreaPrimitive.Viewport,
     {
       ref,
@@ -5238,8 +6702,8 @@ var ScrollAreaViewport = React33.forwardRef(function ScrollAreaViewport2({ class
   );
 });
 ScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
-var ScrollAreaScrollbar = React33.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ScrollAreaScrollbar = React34.forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", thumbClassName, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ScrollAreaPrimitive.Scrollbar,
     {
       ref,
@@ -5250,7 +6714,7 @@ var ScrollAreaScrollbar = React33.forwardRef(function ScrollAreaScrollbar2({ cla
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         ScrollAreaPrimitive.Thumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -5264,8 +6728,8 @@ var ScrollAreaScrollbar = React33.forwardRef(function ScrollAreaScrollbar2({ cla
   );
 });
 ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
-var ScrollAreaCorner = React33.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var ScrollAreaCorner = React34.forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ScrollAreaPrimitive.Corner,
     {
       ref,
@@ -5278,19 +6742,19 @@ var ScrollAreaCorner = React33.forwardRef(function ScrollAreaCorner2({ className
 ScrollAreaCorner.displayName = ScrollAreaPrimitive.Corner.displayName;
 
 // src/components/select.tsx
-var React34 = __toESM(require("react"), 1);
+var React35 = __toESM(require("react"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
 
 // src/lib/form-control-classes.ts
 var formControlBaseClasses = "flex w-full items-center justify-between gap-4 rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 text-left [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] [font-weight:var(--sofya-text-body-font-weight)] leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus:ring-destructive/20 data-[placeholder]:text-[color:var(--sofya-text-placeholder)]";
 
 // src/components/select.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var selectSizeOptions = ["default", "sm"];
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
-var SelectValue = React34.forwardRef(function SelectValue2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var SelectValue = React35.forwardRef(function SelectValue2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Text,
     {
       ref,
@@ -5299,13 +6763,13 @@ var SelectValue = React34.forwardRef(function SelectValue2({ className, ...props
       className: cn("block truncate text-inherit", className),
       size: "tiny",
       style: inheritedTypographyStyle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Value, { className: "block truncate", ...props })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectPrimitive.Value, { className: "block truncate", ...props })
     }
   );
 });
 SelectValue.displayName = SelectPrimitive.Value.displayName;
-var SelectTrigger = React34.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+var SelectTrigger = React35.forwardRef(function SelectTrigger2({ className, children, size = "default", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     SelectPrimitive.Trigger,
     {
       ref,
@@ -5319,7 +6783,7 @@ var SelectTrigger = React34.forwardRef(function SelectTrigger2({ className, chil
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           Icon,
           {
             name: "caret-down",
@@ -5332,8 +6796,8 @@ var SelectTrigger = React34.forwardRef(function SelectTrigger2({ className, chil
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React34.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var SelectScrollUpButton = React35.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     SelectPrimitive.ScrollUpButton,
     {
       ref,
@@ -5343,13 +6807,13 @@ var SelectScrollUpButton = React34.forwardRef(function SelectScrollUpButton2({ c
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "caret-up", size: 12 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "caret-up", size: 12 })
     }
   );
 });
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React34.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var SelectScrollDownButton = React35.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     SelectPrimitive.ScrollDownButton,
     {
       ref,
@@ -5359,13 +6823,13 @@ var SelectScrollDownButton = React34.forwardRef(function SelectScrollDownButton2
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "caret-down", size: 12 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "caret-down", size: 12 })
     }
   );
 });
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React34.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+var SelectContent = React35.forwardRef(function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     SelectPrimitive.Content,
     {
       ref,
@@ -5378,8 +6842,8 @@ var SelectContent = React34.forwardRef(function SelectContent2({ className, chil
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           SelectPrimitive.Viewport,
           {
             "data-slot": "select-viewport",
@@ -5387,14 +6851,14 @@ var SelectContent = React34.forwardRef(function SelectContent2({ className, chil
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectScrollDownButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectScrollDownButton, {})
       ]
     }
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React34.forwardRef(function SelectLabel2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var SelectLabel = React35.forwardRef(function SelectLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     SelectPrimitive.Label,
     {
       ref,
@@ -5416,8 +6880,8 @@ var SelectLabel = React34.forwardRef(function SelectLabel2({ className, ...props
   );
 });
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React34.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+var SelectItem = React35.forwardRef(function SelectItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     SelectPrimitive.Item,
     {
       ref,
@@ -5428,20 +6892,20 @@ var SelectItem = React34.forwardRef(function SelectItem2({ className, children,
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectPrimitive.ItemText, { className: "truncate", children: renderTextContent(children, {
           as: "span",
           className: "block truncate text-[color:var(--sofya-text-default)]",
           size: "tiny",
           style: inheritedTypographyStyle
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "check", size: 14 }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectPrimitive.ItemIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "absolute right-4 inline-flex h-4 w-4 items-center justify-center text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "check", size: 14 }) }) })
       ]
     }
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React34.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var SelectSeparator = React35.forwardRef(function SelectSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     SelectPrimitive.Separator,
     {
       ref,
@@ -5454,11 +6918,11 @@ var SelectSeparator = React34.forwardRef(function SelectSeparator2({ className,
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator.tsx
-var React35 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Separator2 = React35.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Separator2 = React36.forwardRef(function Separator3({ className, decorative = true, orientation = "horizontal", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     SeparatorPrimitive.Root,
     {
       ref,
@@ -5477,8 +6941,8 @@ var Separator2 = React35.forwardRef(function Separator3({ className, decorative
 Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/sidebar-nav-item.tsx
-var React36 = __toESM(require("react"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var React37 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var sidebarNavItemAppearanceClassNames = {
   settings: "rounded-[var(--sofya-radius-md)] py-[var(--sofya-space-2)] pl-[var(--sofya-space-3)] pr-[var(--sofya-space-3)] text-[color:var(--sofya-text-soft)] hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[active=true]:bg-[color:var(--sofya-surface-selected)] data-[active=true]:text-[color:var(--sofya-text-default)] data-[active=true]:hover:bg-[color:var(--sofya-surface-selected-strong)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent",
   workspace: "rounded-[var(--sofya-radius-sm)] bg-transparent px-0 py-0 text-[color:var(--sofya-text-subtle)] hover:bg-transparent hover:text-[color:var(--sofya-text-default)] data-[active=true]:bg-transparent data-[active=true]:text-primary data-[active=true]:hover:bg-transparent data-[active=true]:hover:text-primary data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent"
@@ -5491,10 +6955,10 @@ var sidebarNavItemTextSize = {
   settings: "sidebar-title",
   workspace: "sidebar-title-regular"
 };
-var SidebarNav = React36.forwardRef(
+var SidebarNav = React37.forwardRef(
   ({ as, className, ...props }, ref) => {
     const Comp = as ?? "nav";
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Comp,
       {
         ref,
@@ -5506,8 +6970,8 @@ var SidebarNav = React36.forwardRef(
   }
 );
 SidebarNav.displayName = "SidebarNav";
-var SidebarNavSection = React36.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SidebarNavSection = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       ref,
@@ -5518,10 +6982,10 @@ var SidebarNavSection = React36.forwardRef(
   )
 );
 SidebarNavSection.displayName = "SidebarNavSection";
-var SidebarNavSectionLabel = React36.forwardRef(
+var SidebarNavSectionLabel = React37.forwardRef(
   ({ as, className, children, ...props }, ref) => {
     const Comp = as ?? "h5";
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Comp,
       {
         ref,
@@ -5538,8 +7002,8 @@ var SidebarNavSectionLabel = React36.forwardRef(
   }
 );
 SidebarNavSectionLabel.displayName = "SidebarNavSectionLabel";
-var SidebarNavSectionItems = React36.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var SidebarNavSectionItems = React37.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       ref,
@@ -5550,7 +7014,7 @@ var SidebarNavSectionItems = React36.forwardRef(
   )
 );
 SidebarNavSectionItems.displayName = "SidebarNavSectionItems";
-var SidebarNavItem = React36.forwardRef(
+var SidebarNavItem = React37.forwardRef(
   function SidebarNavItem2({
     as,
     active = false,
@@ -5563,7 +7027,7 @@ var SidebarNavItem = React36.forwardRef(
   }, ref) {
     const Comp = as ?? (props.href ? "a" : "button");
     const isNativeButton = Comp === "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       Comp,
       {
         ref,
@@ -5584,7 +7048,7 @@ var SidebarNavItem = React36.forwardRef(
         ),
         ...props,
         children: [
-          appearance === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          appearance === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -5595,7 +7059,7 @@ var SidebarNavItem = React36.forwardRef(
               )
             }
           ) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "span",
             {
               "data-slot": "sidebar-nav-item-icon",
@@ -5603,7 +7067,7 @@ var SidebarNavItem = React36.forwardRef(
               children: icon
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(children, {
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(children, {
             as: "span",
             className: "block min-w-0 truncate text-inherit",
             size: sidebarNavItemTextSize[appearance]
@@ -5617,8 +7081,8 @@ SidebarNavItem.displayName = "SidebarNavItem";
 var SettingsNavItem = SidebarNavItem;
 
 // src/components/slider.tsx
-var React37 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var React38 = __toESM(require("react"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function clampSliderValue(value, min, max) {
   if (Number.isNaN(value)) {
     return min;
@@ -5643,7 +7107,7 @@ function resolveSliderMeasurement(value, fallback) {
 function isTextValue(value) {
   return typeof value === "string" || typeof value === "number";
 }
-var Slider = React37.forwardRef(function Slider2({
+var Slider = React38.forwardRef(function Slider2({
   className,
   defaultValue,
   formatValue,
@@ -5666,7 +7130,7 @@ var Slider = React37.forwardRef(function Slider2({
   valueClassName,
   ...props
 }, ref) {
-  const resolvedId = React37.useId();
+  const resolvedId = React38.useId();
   const inputId = id ?? resolvedId;
   const safeMin = min;
   const safeMax = resolveSliderMax(safeMin, max);
@@ -5675,7 +7139,7 @@ var Slider = React37.forwardRef(function Slider2({
     onChange: onValueChange,
     value
   });
-  React37.useEffect(() => {
+  React38.useEffect(() => {
     if (value !== void 0) {
       return;
     }
@@ -5722,14 +7186,14 @@ var Slider = React37.forwardRef(function Slider2({
     setControllableValue(nextValue);
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       "data-slot": "slider",
       className: cn("grid w-full gap-2", className),
       children: [
-        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             FieldLabel,
             {
               htmlFor: inputId,
@@ -5740,8 +7204,8 @@ var Slider = React37.forwardRef(function Slider2({
               textClassName: "block min-w-0 text-[color:var(--sofya-text-default)]",
               children: label
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", {}),
-          showValue ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", {}),
+          showValue ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "div",
             {
               className: cn(
@@ -5759,7 +7223,7 @@ var Slider = React37.forwardRef(function Slider2({
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           "div",
           {
             "data-slot": "slider-control",
@@ -5769,7 +7233,7 @@ var Slider = React37.forwardRef(function Slider2({
             ),
             style: controlStyle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "input",
                 {
                   ...props,
@@ -5786,7 +7250,7 @@ var Slider = React37.forwardRef(function Slider2({
                   style: inputBoundsStyle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
                   "data-slot": "slider-track",
@@ -5797,7 +7261,7 @@ var Slider = React37.forwardRef(function Slider2({
                   style: trackBoundsStyle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
                   "data-slot": "slider-range",
@@ -5808,7 +7272,7 @@ var Slider = React37.forwardRef(function Slider2({
                   style: rangeStyle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "div",
                 {
                   "data-slot": "slider-thumb",
@@ -5829,10 +7293,10 @@ var Slider = React37.forwardRef(function Slider2({
 Slider.displayName = "Slider";
 
 // src/components/skeleton.tsx
-var React38 = __toESM(require("react"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var Skeleton = React38.forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var React39 = __toESM(require("react"), 1);
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Skeleton = React39.forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       ref,
@@ -5847,15 +7311,15 @@ var Skeleton = React38.forwardRef(function Skeleton2({ className, ...props }, re
 Skeleton.displayName = "Skeleton";
 
 // src/components/sonner.tsx
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var import_sonner = require("sonner");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var notificationVariantOptions = ["default", "success", "error", "warning"];
 function ToastStatusIcon({
   iconName,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "span",
     {
       "aria-hidden": "true",
@@ -5863,7 +7327,7 @@ function ToastStatusIcon({
         "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-none",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: iconName, size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: iconName, size: 16 })
     }
   );
 }
@@ -5887,35 +7351,35 @@ var defaultToastClassNames = {
   loading: "border-border bg-card text-foreground"
 };
 var defaultToastIcons = {
-  success: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  success: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     ToastStatusIcon,
     {
       iconName: "check",
       className: "border-success/15 bg-success/12 text-success"
     }
   ),
-  error: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  error: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     ToastStatusIcon,
     {
       iconName: "x",
       className: "border-destructive/15 bg-destructive/12 text-destructive"
     }
   ),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  warning: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-warning/20 bg-warning/15 text-foreground"
     }
   ),
-  info: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  info: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-primary/15 bg-primary/10 text-primary"
     }
   ),
-  close: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: "x", size: 12 })
+  close: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "x", size: 12 })
 };
 function mergeToastClassNames(overrides) {
   return {
@@ -5923,7 +7387,7 @@ function mergeToastClassNames(overrides) {
     ...overrides
   };
 }
-var Toaster = React39.forwardRef(
+var Toaster = React40.forwardRef(
   function Toaster2({
     className,
     closeButton = true,
@@ -5935,7 +7399,7 @@ var Toaster = React39.forwardRef(
     visibleToasts = 5,
     ...props
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       import_sonner.Toaster,
       {
         ref,
@@ -5990,12 +7454,12 @@ notify.dismiss = import_sonner.toast.dismiss;
 notify.promise = import_sonner.toast.promise;
 
 // src/components/status-indicator.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 
 // src/components/tooltip.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -6013,8 +7477,8 @@ var tooltipToneClassNames = {
   warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
   destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
 };
-var TooltipContent = React40.forwardRef(function TooltipContent2({ className, sideOffset = 8, align = "center", tone = "default", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var TooltipContent = React41.forwardRef(function TooltipContent2({ className, sideOffset = 8, align = "center", tone = "default", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -6040,7 +7504,7 @@ var TooltipContent = React40.forwardRef(function TooltipContent2({ className, si
   ) });
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var StatusTooltip = React40.forwardRef(function StatusTooltip2({
+var StatusTooltip = React41.forwardRef(function StatusTooltip2({
   children,
   label,
   status = "default",
@@ -6055,11 +7519,11 @@ var StatusTooltip = React40.forwardRef(function StatusTooltip2({
   className
 }, ref) {
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       TooltipContent,
       {
         ref,
@@ -6077,7 +7541,7 @@ var StatusTooltip = React40.forwardRef(function StatusTooltip2({
 StatusTooltip.displayName = "StatusTooltip";
 
 // src/components/status-indicator.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var workflowStatusOptions = [
   "draft",
   "in_progress",
@@ -6158,7 +7622,7 @@ var toneTextClassName = {
   warning: "text-[color:var(--sofya-tone-warning-foreground)]",
   destructive: "text-[color:var(--sofya-tone-destructive-foreground)]"
 };
-var StatusIndicator = React41.forwardRef(
+var StatusIndicator = React42.forwardRef(
   function StatusIndicator2({
     className,
     label,
@@ -6169,7 +7633,7 @@ var StatusIndicator = React41.forwardRef(
     ...props
   }, ref) {
     const resolved = resolveWorkflowStatus(status, { label });
-    const indicator = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    const indicator = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "span",
       {
         ref,
@@ -6184,7 +7648,7 @@ var StatusIndicator = React41.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "span",
             {
               "aria-hidden": "true",
@@ -6205,15 +7669,15 @@ var StatusIndicator = React41.forwardRef(
     if (!tooltip) {
       return indicator;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StatusTooltip, { status: resolved.tone, label: resolved.label, side, children: indicator });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StatusTooltip, { status: resolved.tone, label: resolved.label, side, children: indicator });
   }
 );
 StatusIndicator.displayName = "StatusIndicator";
 
 // src/components/switch.tsx
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var switchSizeOptions = ["default", "sm"];
 var switchRootSizeClasses = {
   default: "h-6 w-11",
@@ -6223,7 +7687,7 @@ var switchThumbSizeClasses = {
   default: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
   sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
 };
-var Switch = React42.forwardRef(
+var Switch = React43.forwardRef(
   ({
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
@@ -6238,7 +7702,7 @@ var Switch = React42.forwardRef(
     size,
     ...props
   }, ref) => {
-    const generatedId = React42.useId();
+    const generatedId = React43.useId();
     const resolvedId = id ?? generatedId;
     const labelId = label ? `${resolvedId}-label` : void 0;
     const descriptionId = description ? `${resolvedId}-description` : void 0;
@@ -6247,7 +7711,7 @@ var Switch = React42.forwardRef(
     const alignClassName2 = description ? "items-start" : "items-center";
     const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
     const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
-    const switchControl = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    const switchControl = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       SwitchPrimitives.Root,
       {
         id: resolvedId,
@@ -6262,7 +7726,7 @@ var Switch = React42.forwardRef(
         "data-size": resolvedSize,
         ...props,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           SwitchPrimitives.Thumb,
           {
             className: cn(
@@ -6276,7 +7740,7 @@ var Switch = React42.forwardRef(
     if (!hasTextContent) {
       return switchControl;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "div",
       {
         "data-slot": "switch-container",
@@ -6287,8 +7751,8 @@ var Switch = React42.forwardRef(
         }),
         children: [
           switchControl,
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
-            label ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+            label ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "span",
               {
                 id: labelId,
@@ -6303,7 +7767,7 @@ var Switch = React42.forwardRef(
                 })
               }
             ) }) : null,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "span",
               {
                 id: descriptionId,
@@ -6328,8 +7792,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var React43 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var React44 = __toESM(require("react"), 1);
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var tableDensityOptions = ["default", "compact"];
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
@@ -6339,10 +7803,10 @@ var tableStatusToneOptions = [
   "warning"
 ];
 var tableActionToneOptions = ["primary", "neutral", "danger"];
-var TableDensityContext = React43.createContext("default");
-var TableHeaderDensityContext = React43.createContext("default");
+var TableDensityContext = React44.createContext("default");
+var TableHeaderDensityContext = React44.createContext("default");
 function useTableDensity(density) {
-  const inheritedDensity = React43.useContext(TableDensityContext);
+  const inheritedDensity = React44.useContext(TableDensityContext);
   return density ?? inheritedDensity;
 }
 var tableCellVariants = (0, import_class_variance_authority8.cva)(
@@ -6398,13 +7862,13 @@ var tableActionButtonVariants = (0, import_class_variance_authority8.cva)(
     }
   }
 );
-var Table = React43.forwardRef(function Table2({ className, density = "default", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var Table = React44.forwardRef(function Table2({ className, density = "default", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "table",
         {
           "data-density": density,
@@ -6421,10 +7885,10 @@ var Table = React43.forwardRef(function Table2({ className, density = "default",
     }
   ) });
 });
-var TableHeader = React43.forwardRef(function TableHeader2({ className, density, ...props }, ref) {
+var TableHeader = React44.forwardRef(function TableHeader2({ className, density, ...props }, ref) {
   const tableDensity = useTableDensity();
   const headerDensity = density ?? tableDensity;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableHeaderDensityContext.Provider, { value: headerDensity, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableDensityContext.Provider, { value: "default", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableHeaderDensityContext.Provider, { value: headerDensity, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableDensityContext.Provider, { value: "default", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -6438,8 +7902,8 @@ var TableHeader = React43.forwardRef(function TableHeader2({ className, density,
     }
   ) }) });
 });
-var TableBody = React43.forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var TableBody = React44.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -6449,8 +7913,8 @@ var TableBody = React43.forwardRef(function TableBody2({ className, ...props },
     }
   );
 });
-var TableFooter = React43.forwardRef(function TableFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var TableFooter = React44.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -6463,10 +7927,10 @@ var TableFooter = React43.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React43.forwardRef(
+var TableRow = React44.forwardRef(
   function TableRow2({ className, density, ...props }, ref) {
     const resolvedDensity = useTableDensity(density);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableDensityContext.Provider, { value: resolvedDensity, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TableDensityContext.Provider, { value: resolvedDensity, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "tr",
       {
         "data-density": resolvedDensity,
@@ -6482,9 +7946,9 @@ var TableRow = React43.forwardRef(
     ) });
   }
 );
-var TableHead = React43.forwardRef(function TableHead2({ className, children, ...props }, ref) {
-  const headerDensity = React43.useContext(TableHeaderDensityContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var TableHead = React44.forwardRef(function TableHead2({ className, children, ...props }, ref) {
+  const headerDensity = React44.useContext(TableHeaderDensityContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -6505,10 +7969,10 @@ var TableHead = React43.forwardRef(function TableHead2({ className, children, ..
     }
   );
 });
-var TableCell = React43.forwardRef(
+var TableCell = React44.forwardRef(
   function TableCell2({ className, density, variant, truncate, children, ...props }, ref) {
     const resolvedDensity = useTableDensity(density);
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "td",
       {
         "data-density": resolvedDensity,
@@ -6533,8 +7997,8 @@ var TableCell = React43.forwardRef(
     );
   }
 );
-var TableCaption = React43.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var TableCaption = React44.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "caption",
     {
       "data-slot": "table-caption",
@@ -6553,12 +8017,12 @@ var TableCaption = React43.forwardRef(function TableCaption2({ className, childr
     }
   );
 });
-var TableCellTitle = React43.forwardRef(
+var TableCellTitle = React44.forwardRef(
   function TableCellTitle2({ className, children, size, ...props }, ref) {
     const density = useTableDensity();
     const resolvedSize = size ?? (density === "compact" ? "compact" : "default");
     const textSize = resolvedSize === "compact" ? "label-md" : "body";
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "span",
       {
         "data-slot": "table-cell-title",
@@ -6578,11 +8042,11 @@ var TableCellTitle = React43.forwardRef(
     );
   }
 );
-var TableCellDescription = React43.forwardRef(function TableCellDescription2({ className, children, size, ...props }, ref) {
+var TableCellDescription = React44.forwardRef(function TableCellDescription2({ className, children, size, ...props }, ref) {
   const density = useTableDensity();
   const resolvedSize = size ?? (density === "compact" ? "compact" : "default");
   const textSize = resolvedSize === "compact" ? "body-sm" : "tiny";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "span",
     {
       "data-slot": "table-cell-description",
@@ -6610,7 +8074,7 @@ function TableStatusBadge({
   ...props
 }) {
   const resolvedDensity = useTableDensity(density);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Badge,
     {
       "data-density": resolvedDensity,
@@ -6629,8 +8093,8 @@ function TableStatusBadge({
     }
   );
 }
-var TableActionButton = React43.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var TableActionButton = React44.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Button,
     {
       ref,
@@ -6648,8 +8112,8 @@ var TableActionButton = React43.forwardRef(function TableActionButton2({ classNa
     }
   );
 });
-var TableActions = React43.forwardRef(function TableActions2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var TableActions = React44.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       ref,
@@ -6676,8 +8140,8 @@ TableActions.displayName = "TableActions";
 
 // src/components/tag.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var React44 = __toESM(require("react"), 1);
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var React45 = __toESM(require("react"), 1);
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var tagVariantOptions = [
   "neutral",
   "organization",
@@ -6718,9 +8182,9 @@ var tagStatusToneClasses = {
   warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]",
   destructive: "border-[color:var(--sofya-tone-destructive-border)] bg-[color:var(--sofya-tone-destructive-background)] text-[color:var(--sofya-tone-destructive-foreground)]"
 };
-var Tag = React44.forwardRef(function Tag2({ children, className, icon, tone = "info", truncate = false, variant, ...props }, ref) {
+var Tag = React45.forwardRef(function Tag2({ children, className, icon, tone = "info", truncate = false, variant, ...props }, ref) {
   const resolvedVariant = variant ?? "neutral";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "span",
     {
       ref,
@@ -6734,7 +8198,7 @@ var Tag = React44.forwardRef(function Tag2({ children, className, icon, tone = "
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon }) : null,
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon }) : null,
         renderTextContent(children, {
           as: "span",
           className: cn("text-inherit", truncate && "min-w-0 truncate"),
@@ -6755,11 +8219,11 @@ var privacyDefaultLabels = {
   organization: "Minha organiza\xE7\xE3o",
   public: "P\xFAblico"
 };
-var PrivacyLabel = React44.forwardRef(
+var PrivacyLabel = React45.forwardRef(
   function PrivacyLabel2({ appearance = "text", className, icon, label, privacy, ...props }, ref) {
     const content = label ?? privacyDefaultLabels[privacy];
     if (appearance === "tag") {
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Tag,
         {
           ref,
@@ -6772,7 +8236,7 @@ var PrivacyLabel = React44.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "span",
       {
         ref,
@@ -6784,7 +8248,7 @@ var PrivacyLabel = React44.forwardRef(
         ),
         ...props,
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "inline-flex shrink-0 items-center justify-center", children: icon }) : null,
           renderTextContent(content, {
             as: "span",
             className: "text-inherit",
@@ -6798,12 +8262,12 @@ var PrivacyLabel = React44.forwardRef(
 PrivacyLabel.displayName = "PrivacyLabel";
 
 // src/components/template-card.tsx
-var React45 = __toESM(require("react"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var React46 = __toESM(require("react"), 1);
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var templateCardLayoutOptions = ["card", "list"];
 var templateCardFavoriteDisplayOptions = ["action", "inline"];
 var templateCardMetaPlacementOptions = ["block", "inline"];
-var TemplateCard = React45.forwardRef(
+var TemplateCard = React46.forwardRef(
   function TemplateCard2({
     className,
     description,
@@ -6830,14 +8294,14 @@ var TemplateCard = React45.forwardRef(
     const showInlineMeta = metaPlacement === "inline" && Boolean(meta);
     const showBlockMeta = metaPlacement !== "inline" && Boolean(meta);
     const showFavoriteAction = favoriteDisplay !== "inline" && (onToggleFavorite !== void 0 || favorited !== void 0);
-    const actions = showFavoriteAction || overflow ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex shrink-0 items-center gap-[var(--sofya-gap-tight)]", children: [
-      showFavoriteAction ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    const actions = showFavoriteAction || overflow ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex shrink-0 items-center gap-[var(--sofya-gap-tight)]", children: [
+      showFavoriteAction ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         IconButton,
         {
           "aria-label": favoriteLabel,
           selected: Boolean(favorited),
           onClick: onToggleFavorite,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "star", size: 18 })
+          icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { name: "star", size: 18 })
         }
       ) : null,
       overflow
@@ -6852,10 +8316,10 @@ var TemplateCard = React45.forwardRef(
       style: selectable ? { fontSize: "15px", lineHeight: "26px", fontWeight: 600 } : void 0
     });
     const hasInlineTitleExtras = showInlineStar || showInlineMeta;
-    const titleRow = hasInlineTitleExtras ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-w-0 items-center gap-[var(--sofya-gap-tight)]", children: [
-      showInlineStar ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "star-filled", size: 18, color: "primary" }) : null,
+    const titleRow = hasInlineTitleExtras ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 items-center gap-[var(--sofya-gap-tight)]", children: [
+      showInlineStar ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { name: "star-filled", size: 18, color: "primary" }) : null,
       titleNode,
-      showInlineMeta ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      showInlineMeta ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "span",
         {
           "data-slot": "template-card-meta-inline",
@@ -6864,7 +8328,7 @@ var TemplateCard = React45.forwardRef(
         }
       ) : null
     ] }) : titleNode;
-    const heading = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-w-0 flex-col gap-[var(--sofya-space-1)]", children: [
+    const heading = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-col gap-[var(--sofya-space-1)]", children: [
       titleRow,
       description ? renderTextContent(description, {
         as: "span",
@@ -6882,7 +8346,7 @@ var TemplateCard = React45.forwardRef(
         style: selectable ? { fontSize: "14px", lineHeight: "18px", fontWeight: 400 } : void 0
       }) : null
     ] });
-    const blockMeta = showBlockMeta ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    const blockMeta = showBlockMeta ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         "data-slot": "template-card-meta",
@@ -6906,7 +8370,7 @@ var TemplateCard = React45.forwardRef(
       }
       onKeyDown?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "div",
       {
         ref,
@@ -6932,13 +8396,13 @@ var TemplateCard = React45.forwardRef(
           className
         ),
         ...props,
-        children: selectable ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        children: selectable ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "span",
             {
               className: "shrink-0",
               onClick: (event) => event.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Checkbox,
                 {
                   checked: selected,
@@ -6948,15 +8412,15 @@ var TemplateCard = React45.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "min-w-0 flex-1", children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "min-w-0 flex-1", children: heading }),
           blockMeta,
           actions
-        ] }) : isList ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "min-w-0 flex-1", children: heading }),
+        ] }) : isList ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "min-w-0 flex-1", children: heading }),
           blockMeta,
           actions
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-start justify-between gap-[var(--sofya-gap-compact)]", children: [
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start justify-between gap-[var(--sofya-gap-compact)]", children: [
             heading,
             actions
           ] }),
@@ -6967,16 +8431,16 @@ var TemplateCard = React45.forwardRef(
   }
 );
 TemplateCard.displayName = "TemplateCard";
-var TemplateListItem = React45.forwardRef(function TemplateListItem2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TemplateCard, { ref, layout: "list", ...props });
+var TemplateListItem = React46.forwardRef(function TemplateListItem2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TemplateCard, { ref, layout: "list", ...props });
 });
 TemplateListItem.displayName = "TemplateListItem";
 
 // src/components/tabs.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_react3 = require("motion/react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -7000,13 +8464,13 @@ function Tabs({
     onChange: onValueChange,
     value
   });
-  const indicatorLayoutId = React46.useId();
-  React46.useEffect(() => {
+  const indicatorLayoutId = React47.useId();
+  React47.useEffect(() => {
     if (value === void 0) {
       setUncontrolledCurrentValue(resolvedDefaultValue);
     }
   }, [resolvedDefaultValue, setUncontrolledCurrentValue, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -7014,7 +8478,7 @@ function Tabs({
       value: currentValue,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
@@ -7025,7 +8489,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -7037,7 +8501,7 @@ function Tabs({
                     item.triggerClassName
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       import_react3.motion.span,
                       {
                         "aria-hidden": "true",
@@ -7047,15 +8511,15 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
-                      item.loading ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                      item.loading ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
                         }
                       ) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: renderTextContent(item.label, {
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
                         size: "body"
@@ -7069,7 +8533,7 @@ function Tabs({
           }
         ),
         items.map(
-          (item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          (item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             TabsPrimitive.Content,
             {
               value: item.value,
@@ -7092,9 +8556,9 @@ function Tabs({
 Tabs.displayName = "Tabs";
 
 // src/components/textarea.tsx
-var React47 = __toESM(require("react"), 1);
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var Textarea = React47.forwardRef(
+var React48 = __toESM(require("react"), 1);
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Textarea = React48.forwardRef(
   ({
     className,
     containerClassName,
@@ -7104,10 +8568,10 @@ var Textarea = React47.forwardRef(
     rows = 5,
     ...props
   }, ref) => {
-    const generatedId = React47.useId();
+    const generatedId = React48.useId();
     const resolvedId = id ?? generatedId;
     const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
-    const control = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "textarea",
       {
         className: cn(
@@ -7121,7 +8585,7 @@ var Textarea = React47.forwardRef(
         "aria-label": ariaLabel
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       FieldShell,
       {
         control,
@@ -7136,10 +8600,10 @@ var Textarea = React47.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/toggle.tsx
-var React48 = __toESM(require("react"), 1);
+var React49 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var Toggle = React48.forwardRef(function Toggle2({
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Toggle = React49.forwardRef(function Toggle2({
   "aria-describedby": ariaDescribedBy,
   "aria-labelledby": ariaLabelledBy,
   className,
@@ -7152,7 +8616,7 @@ var Toggle = React48.forwardRef(function Toggle2({
   labelClassName,
   ...props
 }, ref) {
-  const generatedId = React48.useId();
+  const generatedId = React49.useId();
   const resolvedId = id ?? generatedId;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const descriptionId = description ? `${resolvedId}-description` : void 0;
@@ -7160,7 +8624,7 @@ var Toggle = React48.forwardRef(function Toggle2({
   const alignClassName2 = description ? "items-start" : "items-center";
   const resolvedAriaDescribedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
   const resolvedAriaLabelledBy = ariaLabelledBy ?? labelId;
-  const toggleControl = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  const toggleControl = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     SwitchPrimitives2.Root,
     {
       id: resolvedId,
@@ -7174,7 +8638,7 @@ var Toggle = React48.forwardRef(function Toggle2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         SwitchPrimitives2.Thumb,
         {
           "data-slot": "toggle-thumb",
@@ -7186,7 +8650,7 @@ var Toggle = React48.forwardRef(function Toggle2({
   if (!hasTextContent) {
     return toggleControl;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       "data-slot": "toggle-container",
@@ -7197,8 +8661,8 @@ var Toggle = React48.forwardRef(function Toggle2({
       }),
       children: [
         toggleControl,
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: selectionControlContentBaseClasses, children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("label", { htmlFor: resolvedId, className: selectionControlLabelTextBaseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "span",
             {
               id: labelId,
@@ -7210,7 +8674,7 @@ var Toggle = React48.forwardRef(function Toggle2({
               })
             }
           ) }) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             "span",
             {
               id: descriptionId,
@@ -7233,9 +8697,9 @@ var Toggle = React48.forwardRef(function Toggle2({
 Toggle.displayName = "Toggle";
 
 // src/theme/provider.tsx
-var React49 = __toESM(require("react"), 1);
+var React50 = __toESM(require("react"), 1);
 var import_tokens3 = require("@sofya-ds/tokens");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SOFYA_FONT_LINKS = [
   {
     id: "preconnect-googleapis",
@@ -7255,7 +8719,7 @@ var SOFYA_FONT_LINKS = [
   }
 ];
 function useSofyaFontLinks() {
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -7288,7 +8752,7 @@ function SofyaProvider({
   useSofyaFontLinks();
   const theme = (0, import_tokens3.createWhitelabelTheme)(overrides ?? {}, preset);
   const cssVariables = (0, import_tokens3.themeToCssVariables)(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       "data-sofya-theme": theme.name,
@@ -7387,6 +8851,15 @@ var import_tokens4 = require("@sofya-ds/tokens");
   RadioGroupOptionDescription,
   RadioGroupOptionIndicator,
   RadioGroupOptionLabel,
+  ReasoningLabsWidget,
+  ReasoningSummaryWidget,
+  ReasoningVitalsWidget,
+  ReasoningWidget,
+  ReasoningWidgetActionButton,
+  ReasoningWidgetActions,
+  ReasoningWidgetList,
+  ReasoningWidgetRenderer,
+  ReasoningWidgetTable,
   RichTextToolbar,
   RichTextToolbarButton,
   RichTextToolbarGroup,
@@ -7491,6 +8964,14 @@ var import_tokens4 = require("@sofya-ds/tokens");
   progressSizeOptions,
   radioGroupOrientationOptions,
   radioGroupVariantOptions,
+  reasoningWidgetActionScopeOptions,
+  reasoningWidgetActionToneOptions,
+  reasoningWidgetDensityOptions,
+  reasoningWidgetFrameOptions,
+  reasoningWidgetTableAlignOptions,
+  reasoningWidgetTableColumnVariantOptions,
+  reasoningWidgetToneOptions,
+  reasoningWidgetVariantOptions,
   renderTextContent,
   resolveSurfaceToken,
   resolveTextStyle,