@ggui-ai/dev-stack 0.3.0-rc.0 → 0.5.0-rc.0

package/dist/hub-preview/client.js

@@ -32833,7 +32833,7 @@ config(en_default());
 
 // ../protocol/dist/gadgets/stdlib-gadgets.js
 var STDLIB_GADGETS_PACKAGE = "@ggui-ai/gadgets";
-var STDLIB_GADGETS_VERSION = "0.3.0";
+var STDLIB_GADGETS_VERSION = "0.5.0-rc.0";
 var STDLIB_GADGETS = [
   {
     package: STDLIB_GADGETS_PACKAGE,
@@ -33446,6 +33446,16 @@ var renderCacheMarkerSchema = external_exports.object({
   kind: external_exports.enum(["full-template", "cold"]).optional().describe("full-template = a whole stored component was served; cold = freshly generated."),
   reason: external_exports.string().optional().describe("Compact human-readable explanation of the cache outcome \u2014 why this render reused a stored component or generated cold. Diagnostic; default-available without the verbose env-gated trace.")
 });
+var renderErrorCodeSchema = external_exports.enum([
+  "PRODUCTION_FAILED",
+  "VALIDATION_ERROR",
+  "NO_PLATFORM_KEY",
+  "NO_CREDENTIALS"
+]);
+var renderErrorSchema = external_exports.object({
+  code: renderErrorCodeSchema.describe("Canonical failure class. PRODUCTION_FAILED: generation did not produce a component. VALIDATION_ERROR: a server-side precondition rejected the render before generation. NO_PLATFORM_KEY: the server's managed provider-key configuration has no key for the resolved route. NO_CREDENTIALS: no generation credentials are configured on the server."),
+  message: external_exports.string().describe("Human-readable failure detail \u2014 fold into the next attempt or surface to the operator.")
+});
 var renderOutputSchema = external_exports.object({
   sessionId: external_exports.string(),
   /**
@@ -33455,13 +33465,24 @@ var renderOutputSchema = external_exports.object({
    * tool_results (OpenAI Agents SDK, Google ADK) reach the mount URI;
    * SDKs that preserve `_meta` see the same value on both fields.
    * Mirrors the `resourceUri` field on `ggui_update`'s output.
+   *
+   * OPTIONAL — present iff the render is mountable. Absent on the
+   * failure envelope (`error` present): a failed render commits an
+   * error GguiSession but exposes no mount affordance.
    */
-  resourceUri: external_exports.string(),
+  resourceUri: external_exports.string().optional().describe("MCP-Apps mount URI (ui://ggui/render/{id}). Present iff the render is mountable; absent on a failed render."),
   action: external_exports.enum(["create", "reuse", "update", "replace", "declined"]),
   contractHash: external_exports.string().describe("Canonical hash of the rendered data contract (shape only \u2014 fields, types, specs). Same hash \u27FA same data flow."),
   blueprintId: external_exports.string().describe("Opaque id of the materialised component for this render. On the handshake-decided reuse paths (accept a cache-origin proposal, or a variance re-aim that resolves to an existing variant) it is the stored id \u2014 equal ids across renders mean the same stored component. override.contract always generates cold and mints a fresh id, even for an identical contract."),
   variantKey: external_exports.string().describe("Canonical hash of the design-time variance (persona, aesthetic, seed prompt, context). With contractHash it forms the reuse key: the same pair reuses one component; a different variant of the same contract gets its own."),
   cache: renderCacheMarkerSchema.describe("Reuse outcome for this render: whether a stored component was served, its similarity, the matched component id, and how many generation calls that avoided."),
+  /**
+   * In-result failure marker — present iff the tool result is
+   * `isError: true`. The structuredContent stays schema-conformant on
+   * failures; this field carries the canonical `{code, message}`
+   * classification. Absent on every successful render.
+   */
+  error: renderErrorSchema.optional().describe("Present iff the tool result is isError \u2014 canonical {code, message} for a failed/rejected generation. Absent on success."),
   /**
    * Wire-shape recovery hint for the next call. Emitted ONLY when the
    * rendered contract has a non-empty `actionSpec` — i.e. the agent will
@@ -33497,7 +33518,15 @@ var updateInputSchema = external_exports.discriminatedUnion("kind", [
 ]);
 var updateOutputSchema = external_exports.object({
   sessionId: external_exports.string(),
-  updated: external_exports.boolean()
+  updated: external_exports.boolean(),
+  /**
+   * Unchanged from the initial render — the same `ui://ggui/render/{id}`
+   * URI the mount stamped. Mirrored on the LLM-visible structuredContent
+   * so SDKs that strip `_meta` from tool_results can still reach the
+   * mount URI. Kept in sync with the update handler's wire shape —
+   * this export and the handler's inline schema must not drift.
+   */
+  resourceUri: external_exports.string()
 });
 var declareToolCatalogInputSchema = external_exports.object({
   toolCatalog: external_exports.record(external_exports.string(), external_exports.object({ name: external_exports.string(), version: external_exports.string().optional() }).strict()).describe("Per-app canonical tool identities: bare tool name -> its server's initialize-declared serverInfo. Host/library-supplied; not an agent action.")
@@ -34647,17 +34676,17 @@ var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
-var import_react36 = __toESM(require_react(), 1);
 var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
+var import_react36 = __toESM(require_react(), 1);
 var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
-var import_react37 = __toESM(require_react(), 1);
 var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
+var import_react37 = __toESM(require_react(), 1);
 var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
-var import_react38 = __toESM(require_react(), 1);
 var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
+var import_react38 = __toESM(require_react(), 1);
 var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
-var import_react39 = __toESM(require_react(), 1);
 var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
+var import_react39 = __toESM(require_react(), 1);
 var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
 var import_react40 = __toESM(require_react(), 1);
@@ -34668,32 +34697,28 @@ var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
 var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
 var import_react42 = __toESM(require_react(), 1);
 var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
+var import_react43 = __toESM(require_react(), 1);
 var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
+var import_react44 = __toESM(require_react(), 1);
 var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
+var import_react45 = __toESM(require_react(), 1);
 var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
+var import_react46 = __toESM(require_react(), 1);
 var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1);
-var import_react43 = __toESM(require_react(), 1);
+var import_react47 = __toESM(require_react(), 1);
 var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
-var import_react44 = __toESM(require_react(), 1);
 var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1);
-var import_react45 = __toESM(require_react(), 1);
 var import_jsx_runtime63 = __toESM(require_jsx_runtime(), 1);
-var import_react46 = __toESM(require_react(), 1);
-var import_jsx_runtime64 = __toESM(require_jsx_runtime(), 1);
-var import_react47 = __toESM(require_react(), 1);
-var import_jsx_runtime65 = __toESM(require_jsx_runtime(), 1);
 var import_react48 = __toESM(require_react(), 1);
-var import_jsx_runtime66 = __toESM(require_jsx_runtime(), 1);
-var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1);
-var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1);
 var import_react49 = __toESM(require_react(), 1);
+var import_jsx_runtime64 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime65 = __toESM(require_jsx_runtime(), 1);
 var import_react50 = __toESM(require_react(), 1);
-var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
-var import_jsx_runtime70 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime66 = __toESM(require_jsx_runtime(), 1);
 var import_react51 = __toESM(require_react(), 1);
-var import_jsx_runtime71 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1);
 var import_react52 = __toESM(require_react(), 1);
-var import_jsx_runtime72 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1);
 var StreamBusContext = (0, import_react11.createContext)(null);
 var primitives_exports = {};
 __export2(primitives_exports, {
@@ -35053,6 +35078,55 @@ function Spacer({ size = 16, style, className }) {
     ...style
   } });
 }
+var sizeMap = {
+  xs: "var(--ggui-font-size-xs, 12px)",
+  sm: "var(--ggui-font-size-sm, 14px)",
+  base: "var(--ggui-font-size-base, 16px)",
+  lg: "var(--ggui-font-size-lg, 18px)",
+  xl: "var(--ggui-font-size-xl, 20px)",
+  "2xl": "var(--ggui-font-size-2xl, 24px)",
+  "3xl": "var(--ggui-font-size-3xl, 30px)",
+  "4xl": "var(--ggui-font-size-4xl, 36px)"
+};
+var weightMap = {
+  normal: "var(--ggui-font-weight-normal, 400)",
+  medium: "var(--ggui-font-weight-medium, 500)",
+  semibold: "var(--ggui-font-weight-semibold, 600)",
+  bold: "var(--ggui-font-weight-bold, 700)"
+};
+var lineHeightMap = {
+  xs: 1.5,
+  sm: 1.5,
+  base: 1.5,
+  lg: 1.625,
+  xl: 1.375,
+  "2xl": 1.25,
+  "3xl": 1.25,
+  "4xl": 1.25
+};
+function Text({ children, size = "base", weight = "normal", caps = false, tone, align, truncate, is = "p", id, htmlFor, style, className }) {
+  const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onSurface, #18181b)";
+  const textStyle = {
+    fontSize: sizeMap[size],
+    fontWeight: weightMap[weight],
+    lineHeight: lineHeightMap[size],
+    color: resolvedColor,
+    textAlign: align,
+    margin: 0,
+    ...caps && {
+      textTransform: "uppercase",
+      letterSpacing: "0.05em"
+    },
+    ...truncate && {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    ...style
+  };
+  const elementProps = { id, htmlFor, className, style: textStyle };
+  return (0, import_react15.createElement)(is, elementProps, children);
+}
 var fontSize = {
   xs: "12px",
   sm: "14px",
@@ -35130,76 +35204,6 @@ var headingStyles = {
     letterSpacing: letterSpacing.normal
   }
 };
-var textStyles = {
-  body: {
-    fontSize: fontSize.base,
-    fontWeight: fontWeight.normal,
-    lineHeight: lineHeight.normal
-  },
-  bodySmall: {
-    fontSize: fontSize.sm,
-    fontWeight: fontWeight.normal,
-    lineHeight: lineHeight.normal
-  },
-  bodyLarge: {
-    fontSize: fontSize.lg,
-    fontWeight: fontWeight.normal,
-    lineHeight: lineHeight.relaxed
-  },
-  caption: {
-    fontSize: fontSize.xs,
-    fontWeight: fontWeight.normal,
-    lineHeight: lineHeight.normal
-  },
-  label: {
-    fontSize: fontSize.sm,
-    fontWeight: fontWeight.medium,
-    lineHeight: lineHeight.normal
-  },
-  overline: {
-    fontSize: fontSize.xs,
-    fontWeight: fontWeight.semibold,
-    lineHeight: lineHeight.normal,
-    letterSpacing: letterSpacing.wider,
-    textTransform: "uppercase"
-  }
-};
-var sizeMap = {
-  xs: "var(--ggui-font-size-xs, 12px)",
-  sm: "var(--ggui-font-size-sm, 14px)",
-  base: "var(--ggui-font-size-base, 16px)",
-  lg: "var(--ggui-font-size-lg, 18px)",
-  xl: "var(--ggui-font-size-xl, 20px)",
-  "2xl": "var(--ggui-font-size-2xl, 24px)",
-  "3xl": "var(--ggui-font-size-3xl, 30px)",
-  "4xl": "var(--ggui-font-size-4xl, 36px)"
-};
-var weightMap = {
-  normal: "var(--ggui-font-weight-normal, 400)",
-  medium: "var(--ggui-font-weight-medium, 500)",
-  semibold: "var(--ggui-font-weight-semibold, 600)",
-  bold: "var(--ggui-font-weight-bold, 700)"
-};
-function Text({ children, variant = "body", size, weight, tone, align, truncate, is = "p", id, htmlFor, style, className }) {
-  const variantStyle = textStyles[variant] || textStyles.body;
-  const resolvedColor = tone ? resolveToneCss(tone) : "var(--ggui-color-onSurface, #18181b)";
-  const textStyle = {
-    ...variantStyle,
-    fontSize: size ? sizeMap[size] || size : void 0,
-    fontWeight: weight ? weightMap[weight] : void 0,
-    color: resolvedColor,
-    textAlign: align,
-    margin: 0,
-    ...truncate && {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    ...style
-  };
-  const elementProps = { id, htmlFor, className, style: textStyle };
-  return (0, import_react15.createElement)(is, elementProps, children);
-}
 function Heading({ children, level = 2, tone, align, style, className }) {
   const tag = `h${level}`;
   const headingStyle = headingStyles[tag] || headingStyles.h2;
@@ -40543,6 +40547,7 @@ __export2(components_exports, {
   Pagination: () => Pagination,
   SearchField: () => SearchField,
   Stat: () => Stat,
+  Stepper: () => Stepper,
   Tag: () => Tag
 });
 var primary = {
@@ -41064,7 +41069,76 @@ function EmptyState({ icon, title, description, action, style, className }) {
 }
 function Stat({ label, value, delta, trend = "neutral", icon, style, className }) {
   const deltaTone = trend === "up" ? "success" : trend === "down" ? "error" : "muted";
-  return (0, import_jsx_runtime40.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime40.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime40.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime40.jsx)(Text, { variant: "overline", tone: "muted", children: label })] }), (0, import_jsx_runtime40.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime40.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime40.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
+  return (0, import_jsx_runtime40.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime40.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime40.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime40.jsx)(Text, { size: "xs", weight: "semibold", caps: true, tone: "muted", children: label })] }), (0, import_jsx_runtime40.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime40.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime40.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
+}
+var MARKER_SIZE = 28;
+function stepState(index, current) {
+  if (index < current)
+    return "completed";
+  if (index === current)
+    return "current";
+  return "upcoming";
+}
+var markerStyles = {
+  completed: {
+    backgroundColor: "var(--ggui-color-primary-100, #e0f2fe)",
+    border: "1px solid var(--ggui-color-primary-300, #7dd3fc)",
+    color: "var(--ggui-color-primary-700, #0369a1)"
+  },
+  current: {
+    backgroundColor: "var(--ggui-color-primary-600, #0284c7)",
+    border: "1px solid var(--ggui-color-primary-600, #0284c7)",
+    color: "var(--ggui-color-onPrimary, #ffffff)"
+  },
+  upcoming: {
+    backgroundColor: "var(--ggui-color-surface, #fafafa)",
+    border: "1px solid var(--ggui-color-outline, #d4d4d8)",
+    color: "var(--ggui-color-onSurfaceVariant, #52525b)"
+  }
+};
+function Marker({ index, state }) {
+  return (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": "true", style: {
+    width: MARKER_SIZE,
+    height: MARKER_SIZE,
+    borderRadius: "50%",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    boxSizing: "border-box",
+    transition: "background-color 0.2s, border-color 0.2s, color 0.2s",
+    ...markerStyles[state]
+  }, children: state === "completed" ? (0, import_jsx_runtime41.jsx)(Icon, { name: "check", size: 16, tone: "inherit" }) : (0, import_jsx_runtime41.jsx)(Text, { is: "span", size: "sm", weight: "semibold", tone: "inherit", children: index + 1 }) });
+}
+function StepLabel({ label, state }) {
+  return (0, import_jsx_runtime41.jsx)(Text, { is: "span", size: "sm", weight: state === "current" ? "semibold" : "normal", tone: state === "upcoming" ? "muted" : "default", children: label });
+}
+function Stepper({ steps, current, orientation = "horizontal", onStepClick, style, className }) {
+  const renderStep = (label, index) => {
+    const state = stepState(index, current);
+    const content = (0, import_jsx_runtime41.jsxs)(Row, { gap: "sm", align: "center", children: [(0, import_jsx_runtime41.jsx)(Marker, { index, state }), (0, import_jsx_runtime41.jsx)(StepLabel, { label, state })] });
+    if (onStepClick === void 0) {
+      return (0, import_jsx_runtime41.jsx)("span", { "aria-current": state === "current" ? "step" : void 0, children: content });
+    }
+    return (0, import_jsx_runtime41.jsx)("button", { type: "button", onClick: () => onStepClick(index), "aria-current": state === "current" ? "step" : void 0, style: {
+      background: "none",
+      border: "none",
+      padding: 0,
+      margin: 0,
+      font: "inherit",
+      textAlign: "inherit",
+      cursor: "pointer"
+    }, children: content });
+  };
+  if (orientation === "vertical") {
+    return (0, import_jsx_runtime41.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime41.jsx)(Stack, { gap: "none", align: "start", children: steps.map((label, index) => (0, import_jsx_runtime41.jsxs)(Stack, { gap: "none", align: "start", children: [index > 0 && (0, import_jsx_runtime41.jsx)("span", { style: {
+      width: MARKER_SIZE,
+      height: 16,
+      display: "inline-flex",
+      justifyContent: "center"
+    }, children: (0, import_jsx_runtime41.jsx)(Divider, { orientation: "vertical", margin: 0 }) }), renderStep(label, index)] }, index)) }) });
+  }
+  return (0, import_jsx_runtime41.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime41.jsx)(Row, { gap: "sm", align: "center", children: steps.map((label, index) => (0, import_jsx_runtime41.jsxs)(Row, { gap: "sm", align: "center", style: index > 0 ? { flex: 1 } : void 0, children: [index > 0 && (0, import_jsx_runtime41.jsx)(Divider, { style: { flex: 1, minWidth: 16, margin: 0 } }), renderStep(label, index)] }, index)) }) });
 }
 var compositions_exports = {};
 __export2(compositions_exports, {
@@ -41077,19 +41151,13 @@ __export2(compositions_exports, {
   Footer: () => Footer,
   Header: () => Header,
   Hero: () => Hero,
-  IncidentTimeline: () => IncidentTimeline,
-  MakeTabLayout: () => MakeTabLayout,
-  MarketingCTA: () => MarketingCTA,
-  MarketingFeatures: () => MarketingFeatures,
-  MarketingHero: () => MarketingHero,
   Modal: () => Modal,
   NavigationBar: () => NavigationBar,
   NotificationCenter: () => NotificationCenter,
-  Sidebar: () => Sidebar,
-  UserProfileCard: () => UserProfileCard
+  Sidebar: () => Sidebar
 });
 function Header({ logo, navigation, actions, sticky = false, background, bordered = true, style, className }) {
-  return (0, import_jsx_runtime41.jsxs)("header", { className, style: {
+  return (0, import_jsx_runtime42.jsxs)("header", { className, style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -41103,7 +41171,7 @@ function Header({ logo, navigation, actions, sticky = false, background, bordere
       boxShadow: shadow.sm
     },
     ...style
-  }, children: [logo && (0, import_jsx_runtime41.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation && (0, import_jsx_runtime41.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation }), actions && (0, import_jsx_runtime41.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
+  }, children: [logo && (0, import_jsx_runtime42.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation && (0, import_jsx_runtime42.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation }), actions && (0, import_jsx_runtime42.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
 }
 function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
   const [expanded, setExpanded] = (0, import_react36.useState)(false);
@@ -41115,7 +41183,7 @@ function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
     }
     onItemClick?.(item);
   };
-  return (0, import_jsx_runtime42.jsxs)("div", { children: [(0, import_jsx_runtime42.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
+  return (0, import_jsx_runtime43.jsxs)("div", { children: [(0, import_jsx_runtime43.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
     display: "flex",
     alignItems: "center",
     gap: "12px",
@@ -41132,11 +41200,11 @@ function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
     cursor: item.disabled ? "not-allowed" : "pointer",
     transition: "all 0.15s",
     justifyContent: collapsed ? "center" : "flex-start"
-  }, children: [item.icon && (0, import_jsx_runtime42.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [(0, import_jsx_runtime42.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime42.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime42.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime42.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime42.jsx)(SidebarItem, { item: child, activeId, onItemClick, collapsed, depth: depth + 1 }, child.id)) })] });
+  }, children: [item.icon && (0, import_jsx_runtime43.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [(0, import_jsx_runtime43.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime43.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime43.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime43.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime43.jsx)(SidebarItem, { item: child, activeId, onItemClick, collapsed, depth: depth + 1 }, child.id)) })] });
 }
 function Sidebar({ items, activeId, onItemClick, collapsed = false, header, footer, width = 256, collapsedWidth = 64, style, className }) {
   const currentWidth = collapsed ? collapsedWidth : width;
-  return (0, import_jsx_runtime42.jsxs)("aside", { className, style: {
+  return (0, import_jsx_runtime43.jsxs)("aside", { className, style: {
     width: currentWidth,
     minWidth: currentWidth,
     height: "100%",
@@ -41147,15 +41215,15 @@ function Sidebar({ items, activeId, onItemClick, collapsed = false, header, foot
     transition: "width 0.2s",
     overflow: "hidden",
     ...style
-  }, children: [header && (0, import_jsx_runtime42.jsx)("div", { style: {
+  }, children: [header && (0, import_jsx_runtime43.jsx)("div", { style: {
     padding: collapsed ? "16px 8px" : "16px",
     borderBottom: `1px solid ${colors.gray[200]}`
-  }, children: header }), (0, import_jsx_runtime42.jsx)("nav", { style: {
+  }, children: header }), (0, import_jsx_runtime43.jsx)("nav", { style: {
     flex: 1,
     padding: "8px",
     overflowY: "auto",
     overflowX: "hidden"
-  }, children: (0, import_jsx_runtime42.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime42.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime42.jsx)("div", { style: {
+  }, children: (0, import_jsx_runtime43.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime43.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime43.jsx)("div", { style: {
     padding: collapsed ? "16px 8px" : "16px",
     borderTop: `1px solid ${colors.gray[200]}`
   }, children: footer })] });
@@ -41167,7 +41235,7 @@ function CardGrid({ children, columns = 3, gap = 16, style, className }) {
     }
     return `repeat(auto-fit, minmax(280px, 1fr))`;
   };
-  return (0, import_jsx_runtime43.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime44.jsx)("div", { className, style: {
     display: "grid",
     gridTemplateColumns: getGridColumns(),
     gap: `${gap}px`,
@@ -41185,20 +41253,20 @@ function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
     }
   };
   const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
-  return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
+  return (0, import_jsx_runtime45.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime45.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime45.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime45.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime45.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime45.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
     padding: "2px 8px",
     border: `1px solid ${colors.gray[200]}`,
     borderRadius: "12px",
     backgroundColor: colors.gray[50],
     fontSize: fontSize.xs,
     cursor: "pointer"
-  }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime44.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
+  }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime45.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
     background: "none",
     border: "none",
     color: colors.gray[500],
     fontSize: fontSize.xs,
     cursor: "pointer"
-  }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime44.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime44.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime44.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime44.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
+  }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime45.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime45.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime45.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime45.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime45.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
 }
 function CommentThread({ comments, currentUser, onAddComment, onReply, onReaction, loading, style, className }) {
   const [newComment, setNewComment] = (0, import_react37.useState)("");
@@ -41208,7 +41276,7 @@ function CommentThread({ comments, currentUser, onAddComment, onReply, onReactio
       setNewComment("");
     }
   };
-  return (0, import_jsx_runtime44.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime44.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime44.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime44.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime44.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
+  return (0, import_jsx_runtime45.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime45.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime45.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime45.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime45.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime45.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime45.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime45.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
 }
 function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data", onSort, sortKey, sortDirection, onRowClick, selectable, selectedKeys = [], onSelectionChange, style, className }) {
   const getRowKey = (row, index) => {
@@ -41233,16 +41301,16 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
   };
   const allSelected = data.length > 0 && selectedKeys.length === data.length;
   const someSelected = selectedKeys.length > 0 && selectedKeys.length < data.length;
-  return (0, import_jsx_runtime45.jsx)("div", { className, style: {
+  return (0, import_jsx_runtime46.jsx)("div", { className, style: {
     border: `1px solid ${colors.gray[200]}`,
     borderRadius: "8px",
     overflow: "hidden",
     ...style
-  }, children: (0, import_jsx_runtime45.jsxs)("table", { style: {
+  }, children: (0, import_jsx_runtime46.jsxs)("table", { style: {
     width: "100%",
     borderCollapse: "collapse",
     fontSize: fontSize.sm
-  }, children: [(0, import_jsx_runtime45.jsx)("thead", { children: (0, import_jsx_runtime45.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime45.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime45.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime45.jsx)("th", { style: {
+  }, children: [(0, import_jsx_runtime46.jsx)("thead", { children: (0, import_jsx_runtime46.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime46.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime46.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime46.jsx)("th", { style: {
     padding: "12px 16px",
     textAlign: col.align || "left",
     fontWeight: fontWeight.semibold,
@@ -41250,14 +41318,14 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
     borderBottom: `1px solid ${colors.gray[200]}`,
     cursor: col.sortable ? "pointer" : void 0,
     width: col.width
-  }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: colors.gray[500] }, children: emptyText }) }) : data.map((row, index) => {
+  }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime46.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime46.jsx)("tbody", { children: loading ? (0, import_jsx_runtime46.jsx)("tr", { children: (0, import_jsx_runtime46.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime46.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime46.jsx)("tr", { children: (0, import_jsx_runtime46.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: colors.gray[500] }, children: emptyText }) }) : data.map((row, index) => {
     const key = getRowKey(row, index);
     const isSelected = selectedKeys.includes(key);
-    return (0, import_jsx_runtime45.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
+    return (0, import_jsx_runtime46.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
       backgroundColor: isSelected ? colors.primary[50] : void 0,
       cursor: onRowClick ? "pointer" : void 0,
       transition: "background-color 0.15s"
-    }, children: [selectable && (0, import_jsx_runtime45.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime45.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime45.jsx)("td", { style: {
+    }, children: [selectable && (0, import_jsx_runtime46.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime46.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime46.jsx)("td", { style: {
       padding: "12px 16px",
       textAlign: col.align || "left",
       color: colors.gray[900],
@@ -41283,7 +41351,7 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
       handleSend();
     }
   };
-  return (0, import_jsx_runtime46.jsxs)("div", { className, style: {
+  return (0, import_jsx_runtime47.jsxs)("div", { className, style: {
     display: "flex",
     flexDirection: "column",
     height: "100%",
@@ -41292,51 +41360,51 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
     backgroundColor: colors.white,
     overflow: "hidden",
     ...style
-  }, children: [header && (0, import_jsx_runtime46.jsx)("div", { style: {
+  }, children: [header && (0, import_jsx_runtime47.jsx)("div", { style: {
     padding: "12px 16px",
     borderBottom: `1px solid ${colors.gray[200]}`
-  }, children: header }), (0, import_jsx_runtime46.jsxs)("div", { style: {
+  }, children: header }), (0, import_jsx_runtime47.jsxs)("div", { style: {
     flex: 1,
     padding: "16px",
     overflowY: "auto",
     display: "flex",
     flexDirection: "column",
     gap: "12px"
-  }, children: [loading ? (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime46.jsx)(Spinner, { size: 24 }) }) : messages.map((message) => {
+  }, children: [loading ? (0, import_jsx_runtime47.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime47.jsx)(Spinner, { size: 24 }) }) : messages.map((message) => {
     const isOwn = message.sender.id === currentUserId;
     const timestamp = message.timestamp instanceof Date ? message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : message.timestamp;
-    return (0, import_jsx_runtime46.jsxs)("div", { style: {
+    return (0, import_jsx_runtime47.jsxs)("div", { style: {
       display: "flex",
       flexDirection: isOwn ? "row-reverse" : "row",
       alignItems: "flex-end",
       gap: "8px"
-    }, children: [!isOwn && (0, import_jsx_runtime46.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime46.jsxs)("div", { style: {
+    }, children: [!isOwn && (0, import_jsx_runtime47.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime47.jsxs)("div", { style: {
       maxWidth: "70%",
       padding: "10px 14px",
       borderRadius: radius.lg,
       backgroundColor: isOwn ? colors.primary[600] : colors.gray[100],
       color: isOwn ? colors.white : colors.gray[900]
-    }, children: [(0, import_jsx_runtime46.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime46.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime47.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime47.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "4px",
       marginTop: "4px",
       fontSize: fontSize.xs,
       opacity: 0.7
-    }, children: [(0, import_jsx_runtime46.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime46.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
-  }), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime47.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime47.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
+  }), typing && (0, import_jsx_runtime47.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime47.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime47.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime47.jsxs)("div", { style: {
     padding: "12px 16px",
     borderTop: `1px solid ${colors.gray[200]}`,
     display: "flex",
     gap: "8px"
-  }, children: [(0, import_jsx_runtime46.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
+  }, children: [(0, import_jsx_runtime47.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
     flex: 1,
     padding: "10px 14px",
     border: `1px solid ${colors.gray[300]}`,
     borderRadius: radius.full,
     fontSize: fontSize.sm,
     outline: "none"
-  } }), (0, import_jsx_runtime46.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime46.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
+  } }), (0, import_jsx_runtime47.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime47.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
 }
 function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal", variant = "default", style, className }) {
   const renderItem = (item) => {
@@ -41378,16 +41446,16 @@ function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal
         onItemClick?.(item);
       }
     };
-    const content = (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [item.icon && (0, import_jsx_runtime47.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime47.jsx)("span", { children: item.label })] });
+    const content = (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [item.icon && (0, import_jsx_runtime48.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime48.jsx)("span", { children: item.label })] });
     if (item.href) {
-      return (0, import_jsx_runtime47.jsx)("a", { href: item.href, onClick: (e) => {
+      return (0, import_jsx_runtime48.jsx)("a", { href: item.href, onClick: (e) => {
         e.preventDefault();
         handleClick();
       }, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
     }
-    return (0, import_jsx_runtime47.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
+    return (0, import_jsx_runtime48.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
   };
-  return (0, import_jsx_runtime47.jsx)("nav", { className, style: {
+  return (0, import_jsx_runtime48.jsx)("nav", { className, style: {
     display: "flex",
     flexDirection: orientation === "horizontal" ? "row" : "column",
     gap: orientation === "horizontal" ? "4px" : "2px",
@@ -41436,7 +41504,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
   const handleDragLeave = () => {
     setIsDragOver(false);
   };
-  return (0, import_jsx_runtime48.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime48.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
+  return (0, import_jsx_runtime49.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime49.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
     border: `2px dashed ${isDragOver ? colors.primary[400] : colors.gray[300]}`,
     borderRadius: radius.lg,
     padding: "32px",
@@ -41445,7 +41513,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     cursor: disabled ? "not-allowed" : "pointer",
     transition: "all 0.2s",
     opacity: disabled ? 0.5 : 1
-  }, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.jsx)("p", { style: { margin: "12px 0 4px", color: colors.gray[700], fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: 0, color: colors.gray[500], fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime48.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime49.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime49.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime49.jsx)("p", { style: { margin: "12px 0 4px", color: colors.gray[700], fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime49.jsxs)("p", { style: { margin: 0, color: colors.gray[500], fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime49.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime49.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     gap: "12px",
@@ -41453,74 +41521,14 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     border: `1px solid ${colors.gray[200]}`,
     borderRadius: radius.md,
     backgroundColor: colors.white
-  }, children: [(0, import_jsx_runtime48.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime48.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime48.jsx)("p", { style: {
+  }, children: [(0, import_jsx_runtime49.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime49.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime49.jsx)("p", { style: {
     margin: 0,
     fontSize: fontSize.sm,
     color: colors.gray[900],
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
-  }, children: file2.name }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime48.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime48.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
-}
-function UserProfileCard({ name, subtitle, avatar, coverImage, bio, stats, actions, compact, style, className }) {
-  if (compact) {
-    return (0, import_jsx_runtime49.jsx)(Card, { className, style: { padding: "16px", ...style }, children: (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [(0, import_jsx_runtime49.jsx)(Avatar, { name, src: avatar, size: "md" }), (0, import_jsx_runtime49.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime49.jsx)("p", { style: {
-      margin: 0,
-      fontWeight: fontWeight.semibold,
-      color: colors.gray[900],
-      fontSize: fontSize.sm
-    }, children: name }), subtitle && (0, import_jsx_runtime49.jsx)("p", { style: {
-      margin: "2px 0 0",
-      color: colors.gray[500],
-      fontSize: fontSize.xs
-    }, children: subtitle })] }), actions] }) });
-  }
-  return (0, import_jsx_runtime49.jsxs)(Card, { className, style: { padding: 0, overflow: "hidden", ...style }, children: [coverImage && (0, import_jsx_runtime49.jsx)("div", { style: {
-    height: "120px",
-    backgroundImage: `url(${coverImage})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center"
-  } }), (0, import_jsx_runtime49.jsxs)("div", { style: {
-    padding: "16px",
-    paddingTop: coverImage ? "0" : "16px",
-    textAlign: "center"
-  }, children: [(0, import_jsx_runtime49.jsx)("div", { style: {
-    marginTop: coverImage ? "-40px" : "0",
-    marginBottom: "12px"
-  }, children: (0, import_jsx_runtime49.jsx)(Avatar, { name, src: avatar, size: "xl", style: {
-    border: `4px solid ${colors.white}`,
-    margin: "0 auto"
-  } }) }), (0, import_jsx_runtime49.jsx)("p", { style: {
-    margin: 0,
-    fontWeight: fontWeight.semibold,
-    color: colors.gray[900],
-    fontSize: fontSize.lg
-  }, children: name }), subtitle && (0, import_jsx_runtime49.jsx)("p", { style: {
-    margin: "4px 0 0",
-    color: colors.gray[500],
-    fontSize: fontSize.sm
-  }, children: subtitle }), bio && (0, import_jsx_runtime49.jsx)("p", { style: {
-    margin: "12px 0 0",
-    color: colors.gray[600],
-    fontSize: fontSize.sm,
-    lineHeight: 1.5
-  }, children: bio }), stats && stats.length > 0 && (0, import_jsx_runtime49.jsx)("div", { style: {
-    display: "flex",
-    justifyContent: "center",
-    gap: "24px",
-    marginTop: "16px",
-    paddingTop: "16px",
-    borderTop: `1px solid ${colors.gray[200]}`
-  }, children: stats.map((stat, index) => (0, import_jsx_runtime49.jsxs)("div", { style: { textAlign: "center" }, children: [(0, import_jsx_runtime49.jsx)("p", { style: {
-    margin: 0,
-    fontWeight: fontWeight.semibold,
-    color: colors.gray[900],
-    fontSize: fontSize.lg
-  }, children: stat.value }), (0, import_jsx_runtime49.jsx)("p", { style: {
-    margin: "2px 0 0",
-    color: colors.gray[500],
-    fontSize: fontSize.xs
-  }, children: stat.label })] }, index)) }), actions && (0, import_jsx_runtime49.jsx)("div", { style: { marginTop: "16px", display: "flex", justifyContent: "center", gap: "8px" }, children: actions })] })] });
+  }, children: file2.name }), (0, import_jsx_runtime49.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime49.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime49.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime49.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
 }
 var variantColors2 = {
   info: colors.info[500],
@@ -41974,434 +41982,15 @@ function Hero({ heading, description, primaryAction, secondaryAction, media, ali
     ...align === "center" && { marginTop: "16px" }
   }, children: media })] })] });
 }
-var severityColors = {
-  minor: {
-    bg: "var(--ggui-color-warning-50, #fffbeb)",
-    text: "var(--ggui-color-warning-700, #b45309)",
-    dot: "var(--ggui-color-warning-500, #f59e0b)"
-  },
-  major: {
-    bg: "var(--ggui-color-error-50, #fef2f2)",
-    text: "var(--ggui-color-error-700, #b91c1c)",
-    dot: "var(--ggui-color-error-500, #ef4444)"
-  },
-  critical: {
-    bg: "var(--ggui-color-error-100, #fee2e2)",
-    text: "var(--ggui-color-error-800, #991b1b)",
-    dot: "var(--ggui-color-error-700, #b91c1c)"
-  }
-};
-var statusLabels = {
-  investigating: "Investigating",
-  identified: "Identified",
-  monitoring: "Monitoring",
-  resolved: "Resolved"
-};
-function getDayKey(date5) {
-  return `${date5.getFullYear()}-${String(date5.getMonth() + 1).padStart(2, "0")}-${String(date5.getDate()).padStart(2, "0")}`;
-}
-function formatDate(date5) {
-  return date5.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-}
-function formatTime(date5) {
-  return new Date(date5).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
-}
-function getWorstSeverity(incidents) {
-  if (incidents.some((i) => i.severity === "critical"))
-    return "critical";
-  if (incidents.some((i) => i.severity === "major"))
-    return "major";
-  if (incidents.some((i) => i.severity === "minor"))
-    return "minor";
-  return null;
-}
-function DaySquare({ severity }) {
-  const color = severity ? severityColors[severity].dot : "var(--ggui-color-success-500, #22c55e)";
-  const style = {
-    width: "12px",
-    height: "12px",
-    borderRadius: "var(--ggui-shape-radius-sm, 4px)",
-    backgroundColor: color,
-    flexShrink: 0
-  };
-  return (0, import_jsx_runtime55.jsx)("div", { style });
-}
-function SeverityBadge({ severity }) {
-  const colors2 = severityColors[severity];
-  const style = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "4px",
-    fontSize: "var(--ggui-font-size-xs, 12px)",
-    fontWeight: 500,
-    padding: "2px 8px",
-    borderRadius: "var(--ggui-shape-radius-full, 9999px)",
-    backgroundColor: colors2.bg,
-    color: colors2.text,
-    textTransform: "capitalize"
-  };
-  return (0, import_jsx_runtime55.jsx)("span", { style, children: severity });
-}
-function StatusLabel({ status }) {
-  const isResolved = status === "resolved";
-  const style = {
-    fontSize: "var(--ggui-font-size-xs, 12px)",
-    color: isResolved ? "var(--ggui-color-success-600, #16a34a)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
-    fontWeight: isResolved ? 500 : 400
-  };
-  return (0, import_jsx_runtime55.jsx)("span", { style, children: statusLabels[status] });
-}
-function IncidentCard({ incident, compact }) {
-  const [expanded, setExpanded] = (0, import_react42.useState)(false);
-  const cardStyle = {
-    border: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)",
-    borderRadius: "var(--ggui-shape-radius-md, 8px)",
-    overflow: "hidden",
-    backgroundColor: "var(--ggui-color-surface, #ffffff)"
-  };
-  const headerStyle2 = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "12px 16px",
-    cursor: compact ? "default" : "pointer",
-    gap: "8px"
-  };
-  const titleStyle = {
-    fontSize: "var(--ggui-font-size-sm, 14px)",
-    fontWeight: 500,
-    color: "var(--ggui-color-onSurface, #18181b)",
-    margin: 0,
-    flex: 1,
-    minWidth: 0
-  };
-  return (0, import_jsx_runtime55.jsxs)("div", { style: cardStyle, children: [(0, import_jsx_runtime55.jsxs)("div", { style: headerStyle2, onClick: compact ? void 0 : () => setExpanded(!expanded), role: compact ? void 0 : "button", tabIndex: compact ? void 0 : 0, onKeyDown: compact ? void 0 : (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      setExpanded(!expanded);
-    }
-  }, children: [(0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime55.jsx)(SeverityBadge, { severity: incident.severity }), (0, import_jsx_runtime55.jsx)("p", { style: titleStyle, children: incident.title })] }), (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }, children: [(0, import_jsx_runtime55.jsx)(StatusLabel, { status: incident.status }), !compact && (0, import_jsx_runtime55.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--ggui-color-outline, #d4d4d8)", strokeWidth: "2", style: {
-    transform: expanded ? "rotate(180deg)" : "none",
-    transition: "transform 200ms cubic-bezier(0.4, 0, 0.2, 1)"
-  }, children: (0, import_jsx_runtime55.jsx)("path", { d: "M6 9l6 6 6-6" }) })] })] }), incident.affectedServices && incident.affectedServices.length > 0 && (0, import_jsx_runtime55.jsx)("div", { style: { padding: "0 16px 8px", display: "flex", gap: "4px", flexWrap: "wrap" }, children: incident.affectedServices.map((service) => (0, import_jsx_runtime55.jsx)("span", { style: {
-    fontSize: "11px",
-    padding: "1px 6px",
-    borderRadius: "var(--ggui-shape-radius-sm, 4px)",
-    backgroundColor: "var(--ggui-color-surfaceVariant, #f4f4f5)",
-    color: "var(--ggui-color-onSurfaceVariant, #52525b)"
-  }, children: service }, service)) }), !compact && expanded && incident.updates.length > 0 && (0, import_jsx_runtime55.jsx)("div", { style: {
-    borderTop: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)",
-    padding: "12px 16px"
-  }, children: (0, import_jsx_runtime55.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: incident.updates.map((update) => (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", gap: "8px", fontSize: "12px" }, children: [(0, import_jsx_runtime55.jsx)("span", { style: {
-    color: "var(--ggui-color-outline, #d4d4d8)",
-    flexShrink: 0,
-    fontVariantNumeric: "tabular-nums"
-  }, children: formatTime(update.timestamp) }), (0, import_jsx_runtime55.jsx)("span", { style: {
-    fontWeight: 500,
-    color: "var(--ggui-color-onSurfaceVariant, #52525b)",
-    flexShrink: 0,
-    textTransform: "capitalize"
-  }, children: statusLabels[update.status] }), (0, import_jsx_runtime55.jsx)("span", { style: { color: "var(--ggui-color-onSurface, #18181b)" }, children: update.message })] }, update.id)) }) })] });
-}
-function IncidentTimeline({ incidents, days = 14, emptyText = "All systems operational", compact = false, style, className }) {
-  const now = /* @__PURE__ */ new Date();
-  const dayEntries = [];
-  for (let i = 0; i < days; i++) {
-    const date5 = new Date(now);
-    date5.setDate(date5.getDate() - i);
-    const key = getDayKey(date5);
-    const dayIncidents = incidents.filter((inc) => {
-      const created = new Date(inc.createdAt);
-      return getDayKey(created) === key;
-    });
-    dayEntries.push({ date: date5, key, incidents: dayIncidents });
-  }
-  const hasAnyIncidents = incidents.length > 0;
-  const containerStyle = {
-    fontFamily: "var(--ggui-font-family-sans, Inter, system-ui, sans-serif)",
-    ...style
-  };
-  return (0, import_jsx_runtime55.jsxs)("div", { style: containerStyle, className, children: [(0, import_jsx_runtime55.jsxs)("div", { style: { marginBottom: "24px" }, children: [(0, import_jsx_runtime55.jsxs)("div", { style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: "8px"
-  }, children: [(0, import_jsx_runtime55.jsxs)("span", { style: {
-    fontSize: "var(--ggui-font-size-sm, 14px)",
-    fontWeight: 500,
-    color: "var(--ggui-color-onSurface, #18181b)"
-  }, children: [days, "-Day History"] }), !hasAnyIncidents && (0, import_jsx_runtime55.jsxs)("span", { style: {
-    fontSize: "var(--ggui-font-size-xs, 12px)",
-    color: "var(--ggui-color-success-600, #16a34a)",
-    display: "flex",
-    alignItems: "center",
-    gap: "4px"
-  }, children: [(0, import_jsx_runtime55.jsx)(DaySquare, { severity: null }), emptyText] })] }), (0, import_jsx_runtime55.jsx)("div", { style: {
-    display: "flex",
-    gap: "3px",
-    flexDirection: "row-reverse",
-    justifyContent: "flex-end"
-  }, children: dayEntries.map((entry) => {
-    const severity = getWorstSeverity(entry.incidents);
-    return (0, import_jsx_runtime55.jsx)("div", { title: `${formatDate(entry.date)}: ${entry.incidents.length === 0 ? "No incidents" : `${entry.incidents.length} incident(s)`}`, children: (0, import_jsx_runtime55.jsx)(DaySquare, { severity }) }, entry.key);
-  }) }), (0, import_jsx_runtime55.jsxs)("div", { style: {
-    display: "flex",
-    justifyContent: "space-between",
-    marginTop: "4px",
-    fontSize: "10px",
-    color: "var(--ggui-color-outline, #d4d4d8)"
-  }, children: [(0, import_jsx_runtime55.jsx)("span", { children: formatDate(dayEntries[dayEntries.length - 1]?.date ?? now) }), (0, import_jsx_runtime55.jsx)("span", { children: "Today" })] })] }), hasAnyIncidents && (0, import_jsx_runtime55.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: dayEntries.filter((e) => e.incidents.length > 0).map((entry) => (0, import_jsx_runtime55.jsxs)("div", { children: [(0, import_jsx_runtime55.jsx)("div", { style: {
-    fontSize: "var(--ggui-font-size-xs, 12px)",
-    fontWeight: 500,
-    color: "var(--ggui-color-onSurfaceVariant, #52525b)",
-    marginBottom: "8px",
-    textTransform: "uppercase",
-    letterSpacing: "0.05em"
-  }, children: formatDate(entry.date) }), (0, import_jsx_runtime55.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: entry.incidents.map((incident) => (0, import_jsx_runtime55.jsx)(IncidentCard, { incident, compact }, incident.id)) })] }, entry.key)) })] });
-}
-function MakeTabLayout({ chat, canvas, chatWidth = "400px", style, className }) {
-  return (0, import_jsx_runtime56.jsxs)("div", { className, style: {
-    display: "flex",
-    height: "100%",
-    minHeight: 0,
-    ...style
-  }, children: [(0, import_jsx_runtime56.jsx)("div", { style: {
-    width: chatWidth,
-    minWidth: "320px",
-    maxWidth: "50%",
-    flexShrink: 0,
-    borderRight: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden"
-  }, children: chat }), (0, import_jsx_runtime56.jsx)("div", { style: {
-    flex: 1,
-    minWidth: 0,
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden"
-  }, children: canvas })] });
-}
-function MarketingHero({ headline, subheadline, primaryAction, secondaryAction, variant = "default", media, style, className }) {
-  const backgroundStyles = {
-    default: {
-      backgroundColor: "var(--ggui-color-surface, #ffffff)"
-    },
-    gradient: {
-      background: "linear-gradient(135deg, var(--ggui-color-primary-50, #f0f9ff) 0%, var(--ggui-color-surface, #ffffff) 50%, var(--ggui-color-primary-100, #e0f2fe) 100%)"
-    },
-    pattern: {
-      backgroundColor: "var(--ggui-color-primary-900, #0c4a6e)",
-      backgroundImage: "radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 40%)"
-    }
-  };
-  const isPatternVariant = variant === "pattern";
-  return (0, import_jsx_runtime57.jsx)("section", { className, style: {
-    position: "relative",
-    overflow: "hidden",
-    ...backgroundStyles[variant],
-    ...style
-  }, children: (0, import_jsx_runtime57.jsxs)("div", { style: {
-    maxWidth: "1280px",
-    margin: "0 auto",
-    padding: "96px 24px",
-    display: "flex",
-    alignItems: "center",
-    gap: "64px",
-    flexWrap: "wrap"
-  }, children: [(0, import_jsx_runtime57.jsxs)("div", { style: { flex: "1 1 480px", minWidth: 0 }, children: [(0, import_jsx_runtime57.jsx)("h1", { style: {
-    fontSize: "var(--ggui-font-size-5xl, 48px)",
-    fontWeight: "var(--ggui-font-weight-bold, 700)",
-    lineHeight: 1.1,
-    letterSpacing: "-0.025em",
-    color: isPatternVariant ? "#ffffff" : "var(--ggui-color-onSurface, #18181b)",
-    margin: "0 0 24px 0"
-  }, children: headline }), subheadline && (0, import_jsx_runtime57.jsx)("p", { style: {
-    fontSize: "var(--ggui-font-size-xl, 20px)",
-    lineHeight: 1.6,
-    color: isPatternVariant ? "rgba(255, 255, 255, 0.85)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
-    margin: "0 0 40px 0",
-    maxWidth: "560px"
-  }, children: subheadline }), (primaryAction || secondaryAction) && (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "16px" }, children: [primaryAction && (0, import_jsx_runtime57.jsx)(ActionButton, { action: primaryAction, variant: "primary", dark: isPatternVariant }), secondaryAction && (0, import_jsx_runtime57.jsx)(ActionButton, { action: secondaryAction, variant: "secondary", dark: isPatternVariant })] })] }), media && (0, import_jsx_runtime57.jsx)("div", { style: {
-    flex: "1 1 400px",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    minWidth: 0
-  }, children: media })] }) });
-}
-function ActionButton({ action, variant, dark }) {
-  const isPrimary = variant === "primary";
-  const baseStyles = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "14px 32px",
-    fontSize: "var(--ggui-font-size-lg, 18px)",
-    fontWeight: 600,
-    borderRadius: "var(--ggui-shape-radius-lg, 12px)",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    textDecoration: "none",
-    border: "none",
-    lineHeight: "1.5"
-  };
-  const primaryStyles = dark ? {
-    backgroundColor: "#ffffff",
-    color: "var(--ggui-color-primary-900, #0c4a6e)"
-  } : {
-    backgroundColor: "var(--ggui-color-primary-600, #0284c7)",
-    color: "#ffffff"
-  };
-  const secondaryStyles = dark ? {
-    backgroundColor: "transparent",
-    color: "#ffffff",
-    border: "2px solid rgba(255, 255, 255, 0.3)"
-  } : {
-    backgroundColor: "transparent",
-    color: "var(--ggui-color-onSurface, #18181b)",
-    border: "2px solid var(--ggui-color-outline, #d4d4d8)"
-  };
-  const combined = {
-    ...baseStyles,
-    ...isPrimary ? primaryStyles : secondaryStyles
-  };
-  if (action.href) {
-    return (0, import_jsx_runtime57.jsx)("a", { href: action.href, onClick: action.onClick, style: combined, role: "button", children: action.label });
-  }
-  return (0, import_jsx_runtime57.jsx)("button", { type: "button", onClick: action.onClick, style: combined, children: action.label });
-}
-function MarketingFeatures({ heading, subheading, features, columns = 3, style, className }) {
-  return (0, import_jsx_runtime58.jsxs)("section", { className, style: {
-    backgroundColor: "var(--ggui-color-surface, #ffffff)",
-    ...style
-  }, children: [(0, import_jsx_runtime58.jsxs)("div", { style: {
-    maxWidth: "1280px",
-    margin: "0 auto",
-    padding: "80px 24px"
-  }, children: [(heading || subheading) && (0, import_jsx_runtime58.jsxs)("div", { style: { textAlign: "center", marginBottom: "64px" }, children: [heading && (0, import_jsx_runtime58.jsx)("h2", { style: {
-    fontSize: "var(--ggui-font-size-3xl, 30px)",
-    fontWeight: "var(--ggui-font-weight-bold, 700)",
-    lineHeight: 1.2,
-    color: "var(--ggui-color-onSurface, #18181b)",
-    margin: "0 0 16px 0"
-  }, children: heading }), subheading && (0, import_jsx_runtime58.jsx)("p", { style: {
-    fontSize: "var(--ggui-font-size-lg, 18px)",
-    lineHeight: 1.6,
-    color: "var(--ggui-color-onSurfaceVariant, #52525b)",
-    margin: 0,
-    maxWidth: "640px",
-    marginLeft: "auto",
-    marginRight: "auto"
-  }, children: subheading })] }), (0, import_jsx_runtime58.jsx)("div", { className: "ggui-features-grid", style: {
-    display: "grid",
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    gap: "32px"
-  }, children: features.map((feature, index) => (0, import_jsx_runtime58.jsx)(FeatureCard, { feature }, index)) })] }), (0, import_jsx_runtime58.jsx)("style", { children: `
-        @media (max-width: 768px) {
-          .ggui-features-grid {
-            grid-template-columns: 1fr !important;
-          }
-        }
-      ` })] });
-}
-function FeatureCard({ feature }) {
-  return (0, import_jsx_runtime58.jsxs)("div", { style: {
-    padding: "var(--ggui-spacing-6, 24px)",
-    borderRadius: "var(--ggui-shape-radius-xl, 16px)",
-    backgroundColor: "var(--ggui-color-surface, #ffffff)",
-    border: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)",
-    transition: "box-shadow 0.2s ease, transform 0.2s ease",
-    cursor: "default"
-  }, onMouseEnter: (e) => {
-    e.currentTarget.style.boxShadow = "var(--ggui-shape-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))";
-    e.currentTarget.style.transform = "translateY(-2px)";
-  }, onMouseLeave: (e) => {
-    e.currentTarget.style.boxShadow = "none";
-    e.currentTarget.style.transform = "translateY(0)";
-  }, children: [feature.icon && (0, import_jsx_runtime58.jsx)("div", { style: {
-    fontSize: "32px",
-    marginBottom: "var(--ggui-spacing-4, 16px)",
-    lineHeight: 1
-  }, children: feature.icon }), (0, import_jsx_runtime58.jsx)("h3", { style: {
-    fontSize: "var(--ggui-font-size-xl, 20px)",
-    fontWeight: "var(--ggui-font-weight-semibold, 600)",
-    lineHeight: 1.3,
-    color: "var(--ggui-color-onSurface, #18181b)",
-    margin: "0 0 8px 0"
-  }, children: feature.title }), (0, import_jsx_runtime58.jsx)("p", { style: {
-    fontSize: "var(--ggui-font-size-base, 16px)",
-    lineHeight: 1.6,
-    color: "var(--ggui-color-onSurfaceVariant, #52525b)",
-    margin: 0
-  }, children: feature.description })] });
-}
-function MarketingCTA({ headline, description, action, variant = "filled", style, className }) {
-  const isFilled = variant === "filled";
-  return (0, import_jsx_runtime59.jsx)("section", { className, style: {
-    backgroundColor: isFilled ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-surface, #ffffff)",
-    ...isFilled ? {} : {
-      borderTop: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)",
-      borderBottom: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)"
-    },
-    ...style
-  }, children: (0, import_jsx_runtime59.jsxs)("div", { style: {
-    maxWidth: "800px",
-    margin: "0 auto",
-    padding: "80px 24px",
-    textAlign: "center"
-  }, children: [(0, import_jsx_runtime59.jsx)("h2", { style: {
-    fontSize: "var(--ggui-font-size-3xl, 30px)",
-    fontWeight: "var(--ggui-font-weight-bold, 700)",
-    lineHeight: 1.2,
-    color: isFilled ? "#ffffff" : "var(--ggui-color-onSurface, #18181b)",
-    margin: "0 0 16px 0"
-  }, children: headline }), description && (0, import_jsx_runtime59.jsx)("p", { style: {
-    fontSize: "var(--ggui-font-size-lg, 18px)",
-    lineHeight: 1.6,
-    color: isFilled ? "rgba(255, 255, 255, 0.85)" : "var(--ggui-color-onSurfaceVariant, #52525b)",
-    margin: "0 0 32px 0",
-    maxWidth: "560px",
-    marginLeft: "auto",
-    marginRight: "auto"
-  }, children: description }), (0, import_jsx_runtime59.jsx)(CTAButton, { action, filled: isFilled })] }) });
-}
-function CTAButton({ action, filled }) {
-  const styles = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "14px 36px",
-    fontSize: "var(--ggui-font-size-lg, 18px)",
-    fontWeight: 600,
-    borderRadius: "var(--ggui-shape-radius-lg, 12px)",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    textDecoration: "none",
-    border: "none",
-    lineHeight: "1.5",
-    ...filled ? {
-      backgroundColor: "#ffffff",
-      color: "var(--ggui-color-primary-700, #0369a1)"
-    } : {
-      backgroundColor: "var(--ggui-color-primary-600, #0284c7)",
-      color: "#ffffff"
-    }
-  };
-  if (action.href) {
-    return (0, import_jsx_runtime59.jsx)("a", { href: action.href, onClick: action.onClick, style: styles, role: "button", children: action.label });
-  }
-  return (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: action.onClick, style: styles, children: action.label });
-}
 var interact_exports = {};
 __export2(interact_exports, {
   Clickable: () => Clickable,
   Hoverable: () => Hoverable,
   Pressable: () => Pressable
 });
-var Clickable = (0, import_react43.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react43.useState)(false);
-  const [active, setActive] = (0, import_react43.useState)(false);
+var Clickable = (0, import_react42.forwardRef)(function Clickable2({ children, onClick, onDoubleClick, hoverStyle, activeStyle, cursor, transition: transition2 = "all 200ms ease", disabled = false, role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react42.useState)(false);
+  const [active, setActive] = (0, import_react42.useState)(false);
   const hasClick = !!onClick;
   const resolvedCursor = disabled ? "not-allowed" : cursor ?? (hasClick ? "pointer" : void 0);
   const resolvedRole = role ?? (hasClick ? "button" : void 0);
@@ -42422,19 +42011,19 @@ var Clickable = (0, import_react43.forwardRef)(function Clickable2({ children, o
     ...hovered && !disabled ? hoverStyle : {},
     ...active && !disabled ? activeStyle : {}
   };
-  return (0, import_jsx_runtime60.jsx)("div", { ref, className, style: mergedStyle, onClick: disabled ? void 0 : onClick, onDoubleClick: disabled ? void 0 : onDoubleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
+  return (0, import_jsx_runtime55.jsx)("div", { ref, className, style: mergedStyle, onClick: disabled ? void 0 : onClick, onDoubleClick: disabled ? void 0 : onDoubleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
     setHovered(false);
     setActive(false);
   }, onMouseDown: () => setActive(true), onMouseUp: () => setActive(false), onKeyDown: handleKeyDown, role: resolvedRole, "aria-label": ariaLabel, "aria-disabled": disabled || void 0, tabIndex: resolvedTabIndex, ...rest, children });
 });
-var Hoverable = (0, import_react44.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react44.useState)(false);
+var Hoverable = (0, import_react43.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react43.useState)(false);
   const mergedStyle = {
     ...style,
     transition: transition2,
     ...hovered ? hoverStyle : {}
   };
-  return (0, import_jsx_runtime61.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
+  return (0, import_jsx_runtime56.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
     setHovered(true);
     onHoverChange?.(true);
   }, onMouseLeave: () => {
@@ -42442,10 +42031,10 @@ var Hoverable = (0, import_react44.forwardRef)(function Hoverable2({ children, h
     onHoverChange?.(false);
   }, ...rest, children });
 });
-var Pressable = (0, import_react45.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
-  const [hovered, setHovered] = (0, import_react45.useState)(false);
-  const [pressed, setPressed] = (0, import_react45.useState)(false);
-  const [longPressTimer, setLongPressTimer] = (0, import_react45.useState)(null);
+var Pressable = (0, import_react44.forwardRef)(function Pressable2({ children, onPress, onLongPress, longPressDelay = 500, hoverStyle, pressStyle, disabled = false, transition: transition2 = "all 150ms ease", role, "aria-label": ariaLabel, tabIndex, style, className, ...rest }, ref) {
+  const [hovered, setHovered] = (0, import_react44.useState)(false);
+  const [pressed, setPressed] = (0, import_react44.useState)(false);
+  const [longPressTimer, setLongPressTimer] = (0, import_react44.useState)(null);
   const hasPress = !!onPress || !!onLongPress;
   const handleMouseDown = (e) => {
     if (disabled)
@@ -42488,7 +42077,7 @@ var Pressable = (0, import_react45.forwardRef)(function Pressable2({ children, o
     ...pressed && !disabled ? pressStyle : {}
   };
   const content = typeof children === "function" ? children({ pressed, hovered }) : children;
-  return (0, import_jsx_runtime62.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
+  return (0, import_jsx_runtime57.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
     setHovered(false);
     setPressed(false);
     if (longPressTimer)
@@ -45332,7 +44921,7 @@ function getTheme(id, mode = "light") {
 function getDefaultThemeId() {
   return "ggui";
 }
-var ThemeContext = (0, import_react46.createContext)(null);
+var ThemeContext = (0, import_react45.createContext)(null);
 var COLOR_MIX_SUPPORTS = "@supports (color: color-mix(in srgb, red, blue))";
 function resolvePrimary500Hex(cssVariables) {
   const match = cssVariables.match(/--ggui-color-primary-500:\s*(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6})\s*;/);
@@ -45526,7 +45115,8 @@ var COMPONENTS_EXPORTS = [
   "Breadcrumb",
   "Pagination",
   "EmptyState",
-  "Stat"
+  "Stat",
+  "Stepper"
 ];
 var COMPOSITIONS_EXPORTS = [
   "Header",
@@ -45537,17 +45127,11 @@ var COMPOSITIONS_EXPORTS = [
   "ChatWindow",
   "NavigationBar",
   "FileUploader",
-  "UserProfileCard",
   "NotificationCenter",
   "Modal",
   "CommandPalette",
   "Footer",
-  "Hero",
-  "IncidentTimeline",
-  "MakeTabLayout",
-  "MarketingHero",
-  "MarketingCTA",
-  "MarketingFeatures"
+  "Hero"
 ];
 var INTERACT_EXPORTS = [
   "Clickable",
@@ -45626,7 +45210,6 @@ var TOKENS_EXPORTS = [
   "lineHeight",
   "letterSpacing",
   "headingStyles",
-  "textStyles",
   // Layout / shape
   "spacing",
   "spacingValues",
@@ -45849,7 +45432,7 @@ var ErrorBoundary = class extends import_react12.default.Component {
     const { error: error210, autoRetrying, catchCount } = this.state;
     if (!error210) return this.props.children;
     if (autoRetrying) {
-      return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { style: {
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -45860,7 +45443,7 @@ var ErrorBoundary = class extends import_react12.default.Component {
         fontSize: 13,
         color: "rgba(255,255,255,0.4)"
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: {
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: {
           width: 16,
           height: 16,
           border: "2px solid rgba(255,255,255,0.15)",
@@ -45869,10 +45452,10 @@ var ErrorBoundary = class extends import_react12.default.Component {
           animation: "ggui-err-spin 0.6s linear infinite"
         } }),
         "Retrying...",
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("style", { children: `@keyframes ggui-err-spin { to { transform: rotate(360deg); } }` })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("style", { children: `@keyframes ggui-err-spin { to { transform: rotate(360deg); } }` })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -45883,7 +45466,7 @@ var ErrorBoundary = class extends import_react12.default.Component {
       textAlign: "center",
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: {
         width: 48,
         height: 48,
         borderRadius: 14,
@@ -45893,9 +45476,9 @@ var ErrorBoundary = class extends import_react12.default.Component {
         justifyContent: "center",
         fontSize: 22
       }, children: "!" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Something went wrong" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: "This component encountered an error. Try asking for a different view." }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Something went wrong" }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: "This component encountered an error. Try asking for a different view." }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "button",
         {
           onClick: () => this.setState({ error: null, catchCount: 0 }),
@@ -45913,7 +45496,7 @@ var ErrorBoundary = class extends import_react12.default.Component {
           children: "Retry"
         }
       ),
-      catchCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.2)" }, children: error210.message })
+      catchCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.2)" }, children: error210.message })
     ] });
   }
 };
@@ -45922,7 +45505,7 @@ function ReactComponentRenderer({
   props = {},
   themeId,
   cssOverrides,
-  fallback = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children: "Loading component..." }),
+  fallback = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: "Loading component..." }),
   onError
 }) {
   const reactId = (0, import_react12.useId)();
@@ -46002,13 +45585,13 @@ function ReactComponentRenderer({
   }, [code]);
   const themeCss = themeId ? getScopedThemeCss(themeId, scopeClass) : getScopedCssTokens(scopeClass);
   if (!code || code.trim().length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: fallback });
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: fallback });
   }
   if (error210) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { style: {
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -46019,7 +45602,7 @@ function ReactComponentRenderer({
       textAlign: "center",
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: {
         width: 48,
         height: 48,
         borderRadius: 14,
@@ -46029,19 +45612,19 @@ function ReactComponentRenderer({
         justifyContent: "center",
         fontSize: 22
       }, children: "!" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Failed to load component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: error210.message })
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.8)" }, children: "Failed to load component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", maxWidth: 280, lineHeight: 1.4 }, children: error210.message })
     ] });
   }
   if (!Component2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: scopeClass, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("style", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: scopeClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("style", { children: [
       themeCss,
       cssOverrides ?? ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Component2, { ...props }) }, code.length)
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Component2, { ...props }) }, code.length)
   ] });
 }
 var previewShimmerKeyframes = `@keyframes ggui-preview-shimmer {
@@ -46074,7 +45657,7 @@ var previewKeyframesCss = [
 var DynamicComponent = ReactComponentRenderer;
 
 // hub-preview-client/main.tsx
-var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
 function bootstrap() {
   const boot = window.__GGUI_DEV_PREVIEW__;
   return {
@@ -46165,90 +45748,90 @@ function PreviewApp({
     return () => controller.abort();
   }, [selectedId, token]);
   if (state.kind === "idle") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Meta, { children: "No UI selected" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Status, { children: "Pick a UI from the Discovered UIs panel to preview it here." })
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Meta, { children: "No UI selected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Status, { children: "Pick a UI from the Discovered UIs panel to preview it here." })
     ] });
   }
   if (state.kind === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Meta, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Meta, { children: [
         "Preview of ",
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { children: selectedId })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { children: selectedId })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Status, { children: "Loading bundle\u2026" })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Status, { children: "Loading bundle\u2026" })
     ] });
   }
   if (state.kind === "ready") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "surface", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DynamicComponent, { code: state.code }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "surface", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DynamicComponent, { code: state.code }) });
   }
   if (state.kind === "not-found") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Meta, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Meta, { children: [
         "Preview of ",
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { children: selectedId })
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { children: selectedId })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Status, { children: "The server doesn't know this id. It may have been removed from the registry." })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Status, { children: "The server doesn't know this id. It may have been removed from the registry." })
     ] });
   }
   if (state.kind === "missing") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Meta, { children: "No renderable entry" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Status, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Meta, { children: "No renderable entry" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Status, { children: [
         "Declare ",
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { children: "entryPoint" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { children: "entryPoint" }),
         " in ",
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { children: "ggui.ui.json" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { children: "ggui.ui.json" }),
         ", or colocate a ",
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { children: "ggui.ui.tsx" }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { children: "ggui.ui.tsx" }),
         " beside the manifest."
       ] }),
-      state.tried.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("pre", { className: "tried", children: state.tried.join("\n") })
+      state.tried.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("pre", { className: "tried", children: state.tried.join("\n") })
     ] });
   }
   if (state.kind === "compile") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Meta, { children: "Local compile failed" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("ul", { className: "errors", children: state.detail.errors.map((err, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Meta, { children: "Local compile failed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("ul", { className: "errors", children: state.detail.errors.map((err, i) => {
         const loc = err.location;
         const locLine = loc ? `${loc.file ?? state.detail.entry}:${loc.line ?? "?"}:${loc.column ?? "?"}` : state.detail.entry;
-        return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("li", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("pre", { className: "location", children: locLine }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("pre", { className: "error", children: err.text }),
-          loc?.lineText && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("pre", { className: "line-text", children: loc.lineText })
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("pre", { className: "location", children: locLine }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("pre", { className: "error", children: err.text }),
+          loc?.lineText && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("pre", { className: "line-text", children: loc.lineText })
         ] }, i);
       }) })
     ] });
   }
   if (state.kind === "http") {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Meta, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Meta, { children: [
         "Bundle fetch failed (HTTP ",
         state.status,
         ")"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Status, { children: state.message })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Status, { children: state.message })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Pane, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Meta, { children: "Local ggui dev server is unreachable" }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Status, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Pane, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Meta, { children: "Local ggui dev server is unreachable" }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Status, { children: [
       "Studio could not reach the server \u2014 is ",
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("code", { children: "ggui dev" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("code", { children: "ggui dev" }),
       " still running?",
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("br", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "dim", children: state.message })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("br", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "dim", children: state.message })
     ] })
   ] });
 }
 function Pane({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "frame", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "pane", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "frame", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "pane", children }) });
 }
 function Meta({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "meta", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "meta", children });
 }
 function Status({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "status", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "status", children });
 }
 async function subscribeToRegistry(token, signal, onEvent) {
   let backoff = 500;
@@ -46317,7 +45900,7 @@ function mount() {
   if (!root) throw new Error("preview-root element not found in shell");
   const { token, selectedId } = bootstrap();
   (0, import_client.createRoot)(root).render(
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react53.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PreviewApp, { token, selectedId }) })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react53.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PreviewApp, { token, selectedId }) })
   );
 }
 mount();