@ggui-ai/ui-visual-tester 0.3.0-rc.0 → 0.5.0-rc.0

package/fixture/fixture-runtime.js

@@ -19445,6 +19445,58 @@
 
   // ../design/dist/primitives/Text.js
   var import_react3 = __toESM(require_react(), 1);
+  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_react3.createElement)(is, elementProps, children);
+  }
+
+  // ../design/dist/primitives/Heading.js
+  var import_react4 = __toESM(require_react(), 1);
 
   // ../design/dist/tokens/typography.js
   var fontSize = {
@@ -19524,81 +19576,8 @@
       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"
-    }
-  };
-
-  // ../design/dist/primitives/Text.js
-  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_react3.createElement)(is, elementProps, children);
-  }
 
   // ../design/dist/primitives/Heading.js
-  var import_react4 = __toESM(require_react(), 1);
   function Heading({ children, level = 2, tone, align, style, className }) {
     const tag = `h${level}`;
     const headingStyle = headingStyles[tag] || headingStyles.h2;
@@ -25039,6 +25018,7 @@
     Pagination: () => Pagination,
     SearchField: () => SearchField,
     Stat: () => Stat,
+    Stepper: () => Stepper,
     Tag: () => Tag
   });
 
@@ -25598,7 +25578,79 @@
   var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1);
   function Stat({ label, value, delta, trend = "neutral", icon, style, className }) {
     const deltaTone = trend === "up" ? "success" : trend === "down" ? "error" : "muted";
-    return (0, import_jsx_runtime36.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime36.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime36.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime36.jsx)(Text, { variant: "overline", tone: "muted", children: label })] }), (0, import_jsx_runtime36.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime36.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime36.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
+    return (0, import_jsx_runtime36.jsxs)(Stack, { gap: "xs", className, style, children: [(0, import_jsx_runtime36.jsxs)(Row, { gap: "xs", align: "center", children: [icon !== void 0 && (typeof icon === "string" ? (0, import_jsx_runtime36.jsx)(Icon, { name: icon, size: 16, tone: "muted" }) : icon), (0, import_jsx_runtime36.jsx)(Text, { size: "xs", weight: "semibold", caps: true, tone: "muted", children: label })] }), (0, import_jsx_runtime36.jsxs)(Row, { gap: "sm", align: "end", children: [(0, import_jsx_runtime36.jsx)(Text, { size: "3xl", weight: "bold", children: value }), delta !== void 0 && (0, import_jsx_runtime36.jsx)(Text, { size: "sm", weight: "semibold", tone: deltaTone, children: delta })] })] });
+  }
+
+  // ../design/dist/components/Stepper.js
+  var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
+  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_runtime37.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_runtime37.jsx)(Icon, { name: "check", size: 16, tone: "inherit" }) : (0, import_jsx_runtime37.jsx)(Text, { is: "span", size: "sm", weight: "semibold", tone: "inherit", children: index + 1 }) });
+  }
+  function StepLabel({ label, state }) {
+    return (0, import_jsx_runtime37.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_runtime37.jsxs)(Row, { gap: "sm", align: "center", children: [(0, import_jsx_runtime37.jsx)(Marker, { index, state }), (0, import_jsx_runtime37.jsx)(StepLabel, { label, state })] });
+      if (onStepClick === void 0) {
+        return (0, import_jsx_runtime37.jsx)("span", { "aria-current": state === "current" ? "step" : void 0, children: content });
+      }
+      return (0, import_jsx_runtime37.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_runtime37.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime37.jsx)(Stack, { gap: "none", align: "start", children: steps.map((label, index) => (0, import_jsx_runtime37.jsxs)(Stack, { gap: "none", align: "start", children: [index > 0 && (0, import_jsx_runtime37.jsx)("span", { style: {
+        width: MARKER_SIZE,
+        height: 16,
+        display: "inline-flex",
+        justifyContent: "center"
+      }, children: (0, import_jsx_runtime37.jsx)(Divider, { orientation: "vertical", margin: 0 }) }), renderStep(label, index)] }, index)) }) });
+    }
+    return (0, import_jsx_runtime37.jsx)("nav", { "aria-label": "Progress", className, style, children: (0, import_jsx_runtime37.jsx)(Row, { gap: "sm", align: "center", children: steps.map((label, index) => (0, import_jsx_runtime37.jsxs)(Row, { gap: "sm", align: "center", style: index > 0 ? { flex: 1 } : void 0, children: [index > 0 && (0, import_jsx_runtime37.jsx)(Divider, { style: { flex: 1, minWidth: 16, margin: 0 } }), renderStep(label, index)] }, index)) }) });
   }
 
   // ../design/dist/compositions/index.js
@@ -25613,22 +25665,16 @@
     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
   });
 
   // ../design/dist/compositions/Header.js
-  var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
   function Header({ logo, navigation, actions, sticky = false, background, bordered = true, style, className }) {
-    return (0, import_jsx_runtime37.jsxs)("header", { className, style: {
+    return (0, import_jsx_runtime38.jsxs)("header", { className, style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -25642,11 +25688,11 @@
         boxShadow: shadow.sm
       },
       ...style
-    }, children: [logo && (0, import_jsx_runtime37.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation && (0, import_jsx_runtime37.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation }), actions && (0, import_jsx_runtime37.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
+    }, children: [logo && (0, import_jsx_runtime38.jsx)("div", { style: { flexShrink: 0 }, children: logo }), navigation && (0, import_jsx_runtime38.jsx)("nav", { style: { display: "flex", alignItems: "center", flex: 1, marginLeft: "32px" }, children: navigation }), actions && (0, import_jsx_runtime38.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: actions })] });
   }
 
   // ../design/dist/compositions/Sidebar.js
-  var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
   var import_react24 = __toESM(require_react(), 1);
   function SidebarItem({ item, activeId, onItemClick, collapsed, depth = 0 }) {
     const [expanded, setExpanded] = (0, import_react24.useState)(false);
@@ -25658,7 +25704,7 @@
       }
       onItemClick?.(item);
     };
-    return (0, import_jsx_runtime38.jsxs)("div", { children: [(0, import_jsx_runtime38.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
+    return (0, import_jsx_runtime39.jsxs)("div", { children: [(0, import_jsx_runtime39.jsxs)("button", { onClick: handleClick, disabled: item.disabled, style: {
       display: "flex",
       alignItems: "center",
       gap: "12px",
@@ -25675,11 +25721,11 @@
       cursor: item.disabled ? "not-allowed" : "pointer",
       transition: "all 0.15s",
       justifyContent: collapsed ? "center" : "flex-start"
-    }, children: [item.icon && (0, import_jsx_runtime38.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [(0, import_jsx_runtime38.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime38.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime38.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime38.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime38.jsx)(SidebarItem, { item: child, activeId, onItemClick, collapsed, depth: depth + 1 }, child.id)) })] });
+    }, children: [item.icon && (0, import_jsx_runtime39.jsx)("span", { style: { display: "flex", flexShrink: 0 }, children: item.icon }), !collapsed && (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [(0, import_jsx_runtime39.jsx)("span", { style: { flex: 1 }, children: item.label }), item.badge && (0, import_jsx_runtime39.jsx)("span", { children: item.badge }), hasChildren && (0, import_jsx_runtime39.jsx)(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: 14, tone: "subtle" })] })] }), hasChildren && expanded && !collapsed && (0, import_jsx_runtime39.jsx)("div", { style: { marginTop: "4px" }, children: item.children.map((child) => (0, import_jsx_runtime39.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_runtime38.jsxs)("aside", { className, style: {
+    return (0, import_jsx_runtime39.jsxs)("aside", { className, style: {
       width: currentWidth,
       minWidth: currentWidth,
       height: "100%",
@@ -25690,22 +25736,22 @@
       transition: "width 0.2s",
       overflow: "hidden",
       ...style
-    }, children: [header && (0, import_jsx_runtime38.jsx)("div", { style: {
+    }, children: [header && (0, import_jsx_runtime39.jsx)("div", { style: {
       padding: collapsed ? "16px 8px" : "16px",
       borderBottom: `1px solid ${colors.gray[200]}`
-    }, children: header }), (0, import_jsx_runtime38.jsx)("nav", { style: {
+    }, children: header }), (0, import_jsx_runtime39.jsx)("nav", { style: {
       flex: 1,
       padding: "8px",
       overflowY: "auto",
       overflowX: "hidden"
-    }, children: (0, import_jsx_runtime38.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime38.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime38.jsx)("div", { style: {
+    }, children: (0, import_jsx_runtime39.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: items.map((item) => (0, import_jsx_runtime39.jsx)(SidebarItem, { item, activeId, onItemClick, collapsed }, item.id)) }) }), footer && (0, import_jsx_runtime39.jsx)("div", { style: {
       padding: collapsed ? "16px 8px" : "16px",
       borderTop: `1px solid ${colors.gray[200]}`
     }, children: footer })] });
   }
 
   // ../design/dist/compositions/CardGrid.js
-  var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
   function CardGrid({ children, columns = 3, gap = 16, style, className }) {
     const getGridColumns = () => {
       if (typeof columns === "number") {
@@ -25713,7 +25759,7 @@
       }
       return `repeat(auto-fit, minmax(280px, 1fr))`;
     };
-    return (0, import_jsx_runtime39.jsx)("div", { className, style: {
+    return (0, import_jsx_runtime40.jsx)("div", { className, style: {
       display: "grid",
       gridTemplateColumns: getGridColumns(),
       gap: `${gap}px`,
@@ -25722,7 +25768,7 @@
   }
 
   // ../design/dist/compositions/CommentThread.js
-  var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
   var import_react25 = __toESM(require_react(), 1);
   function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
     const [showReplyInput, setShowReplyInput] = (0, import_react25.useState)(false);
@@ -25735,20 +25781,20 @@
       }
     };
     const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
-    return (0, import_jsx_runtime40.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime40.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime40.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime40.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime40.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime40.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime40.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
+    return (0, import_jsx_runtime41.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime41.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime41.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime41.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime41.jsx)("span", { style: { color: colors.gray[500], fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime41.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: colors.gray[700] }, children: comment.content }), (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime41.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_runtime40.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
+    }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime41.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_runtime40.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime40.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime40.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime40.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime40.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
+    }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime41.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime41.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime41.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime41.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime41.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_react25.useState)("");
@@ -25758,11 +25804,11 @@
         setNewComment("");
       }
     };
-    return (0, import_jsx_runtime40.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime40.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime40.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime40.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime40.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime40.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime40.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime40.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime40.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime40.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
+    return (0, import_jsx_runtime41.jsxs)("div", { className, style: { ...style }, children: [currentUser && (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: "12px", marginBottom: "24px" }, children: [(0, import_jsx_runtime41.jsx)(Avatar, { name: currentUser.name, src: currentUser.avatar, size: "sm" }), (0, import_jsx_runtime41.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime41.jsx)(TextArea, { value: newComment, onChange: setNewComment, placeholder: "Write a comment...", rows: 3 }), (0, import_jsx_runtime41.jsx)("div", { style: { marginTop: "8px", display: "flex", justifyContent: "flex-end" }, children: (0, import_jsx_runtime41.jsx)(Button, { onClick: handleSubmit, disabled: !newComment.trim(), children: "Comment" }) })] })] }), loading ? (0, import_jsx_runtime41.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime41.jsx)(Spinner, { size: 24 }) }) : (0, import_jsx_runtime41.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: comments.map((comment) => (0, import_jsx_runtime41.jsx)(CommentItem, { comment, onReply, onReaction }, comment.id)) })] });
   }
 
   // ../design/dist/compositions/DataTable.js
-  var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
   function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data", onSort, sortKey, sortDirection, onRowClick, selectable, selectedKeys = [], onSelectionChange, style, className }) {
     const getRowKey = (row, index) => {
       if (typeof rowKey === "function") {
@@ -25786,16 +25832,16 @@
     };
     const allSelected = data.length > 0 && selectedKeys.length === data.length;
     const someSelected = selectedKeys.length > 0 && selectedKeys.length < data.length;
-    return (0, import_jsx_runtime41.jsx)("div", { className, style: {
+    return (0, import_jsx_runtime42.jsx)("div", { className, style: {
       border: `1px solid ${colors.gray[200]}`,
       borderRadius: "8px",
       overflow: "hidden",
       ...style
-    }, children: (0, import_jsx_runtime41.jsxs)("table", { style: {
+    }, children: (0, import_jsx_runtime42.jsxs)("table", { style: {
       width: "100%",
       borderCollapse: "collapse",
       fontSize: fontSize.sm
-    }, children: [(0, import_jsx_runtime41.jsx)("thead", { children: (0, import_jsx_runtime41.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime41.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime41.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime41.jsx)("th", { style: {
+    }, children: [(0, import_jsx_runtime42.jsx)("thead", { children: (0, import_jsx_runtime42.jsxs)("tr", { style: { backgroundColor: colors.gray[50] }, children: [selectable && (0, import_jsx_runtime42.jsx)("th", { style: { width: "40px", padding: "12px" }, children: (0, import_jsx_runtime42.jsx)(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll }) }), columns.map((col) => (0, import_jsx_runtime42.jsx)("th", { style: {
       padding: "12px 16px",
       textAlign: col.align || "left",
       fontWeight: fontWeight.semibold,
@@ -25803,14 +25849,14 @@
       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_runtime41.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime41.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime41.jsx)("tbody", { children: loading ? (0, import_jsx_runtime41.jsx)("tr", { children: (0, import_jsx_runtime41.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime41.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime41.jsx)("tr", { children: (0, import_jsx_runtime41.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_runtime42.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime42.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime42.jsx)("tbody", { children: loading ? (0, import_jsx_runtime42.jsx)("tr", { children: (0, import_jsx_runtime42.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime42.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime42.jsx)("tr", { children: (0, import_jsx_runtime42.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_runtime41.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
+      return (0, import_jsx_runtime42.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_runtime41.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime41.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime41.jsx)("td", { style: {
+      }, children: [selectable && (0, import_jsx_runtime42.jsx)("td", { style: { padding: "12px" }, children: (0, import_jsx_runtime42.jsx)(Checkbox, { checked: isSelected, onChange: (checked) => handleSelectRow(key, checked) }) }), columns.map((col) => (0, import_jsx_runtime42.jsx)("td", { style: {
         padding: "12px 16px",
         textAlign: col.align || "left",
         color: colors.gray[900],
@@ -25820,7 +25866,7 @@
   }
 
   // ../design/dist/compositions/ChatWindow.js
-  var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
   var import_react26 = __toESM(require_react(), 1);
   function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, placeholder = "Type a message...", header, style, className }) {
     const [inputValue, setInputValue] = (0, import_react26.useState)("");
@@ -25840,7 +25886,7 @@
         handleSend();
       }
     };
-    return (0, import_jsx_runtime42.jsxs)("div", { className, style: {
+    return (0, import_jsx_runtime43.jsxs)("div", { className, style: {
       display: "flex",
       flexDirection: "column",
       height: "100%",
@@ -25849,55 +25895,55 @@
       backgroundColor: colors.white,
       overflow: "hidden",
       ...style
-    }, children: [header && (0, import_jsx_runtime42.jsx)("div", { style: {
+    }, children: [header && (0, import_jsx_runtime43.jsx)("div", { style: {
       padding: "12px 16px",
       borderBottom: `1px solid ${colors.gray[200]}`
-    }, children: header }), (0, import_jsx_runtime42.jsxs)("div", { style: {
+    }, children: header }), (0, import_jsx_runtime43.jsxs)("div", { style: {
       flex: 1,
       padding: "16px",
       overflowY: "auto",
       display: "flex",
       flexDirection: "column",
       gap: "12px"
-    }, children: [loading ? (0, import_jsx_runtime42.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime42.jsx)(Spinner, { size: 24 }) }) : messages.map((message) => {
+    }, children: [loading ? (0, import_jsx_runtime43.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "24px" }, children: (0, import_jsx_runtime43.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_runtime42.jsxs)("div", { style: {
+      return (0, import_jsx_runtime43.jsxs)("div", { style: {
         display: "flex",
         flexDirection: isOwn ? "row-reverse" : "row",
         alignItems: "flex-end",
         gap: "8px"
-      }, children: [!isOwn && (0, import_jsx_runtime42.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime42.jsxs)("div", { style: {
+      }, children: [!isOwn && (0, import_jsx_runtime43.jsx)(Avatar, { name: message.sender.name, src: message.sender.avatar, size: "xs" }), (0, import_jsx_runtime43.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_runtime42.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime42.jsxs)("div", { style: {
+      }, children: [(0, import_jsx_runtime43.jsx)("p", { style: { margin: 0, fontSize: fontSize.sm }, children: message.content }), (0, import_jsx_runtime43.jsxs)("div", { style: {
         display: "flex",
         alignItems: "center",
         gap: "4px",
         marginTop: "4px",
         fontSize: fontSize.xs,
         opacity: 0.7
-      }, children: [(0, import_jsx_runtime42.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime42.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_runtime42.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime42.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime42.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime42.jsxs)("div", { style: {
+      }, children: [(0, import_jsx_runtime43.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime43.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_runtime43.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime43.jsxs)("span", { style: { fontSize: fontSize.xs, color: colors.gray[500] }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime43.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime43.jsxs)("div", { style: {
       padding: "12px 16px",
       borderTop: `1px solid ${colors.gray[200]}`,
       display: "flex",
       gap: "8px"
-    }, children: [(0, import_jsx_runtime42.jsx)("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder, style: {
+    }, children: [(0, import_jsx_runtime43.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_runtime42.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime42.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
+    } }), (0, import_jsx_runtime43.jsx)(Button, { onClick: handleSend, disabled: !inputValue.trim(), children: (0, import_jsx_runtime43.jsx)(Icon, { name: "chevron-right", size: 18 }) })] })] });
   }
 
   // ../design/dist/compositions/NavigationBar.js
-  var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
   function NavigationBar({ items, activeId, onItemClick, orientation = "horizontal", variant = "default", style, className }) {
     const renderItem = (item) => {
       const isActive = activeId === item.id;
@@ -25938,16 +25984,16 @@
           onItemClick?.(item);
         }
       };
-      const content = (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [item.icon && (0, import_jsx_runtime43.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime43.jsx)("span", { children: item.label })] });
+      const content = (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [item.icon && (0, import_jsx_runtime44.jsx)("span", { style: { display: "flex" }, children: item.icon }), (0, import_jsx_runtime44.jsx)("span", { children: item.label })] });
       if (item.href) {
-        return (0, import_jsx_runtime43.jsx)("a", { href: item.href, onClick: (e) => {
+        return (0, import_jsx_runtime44.jsx)("a", { href: item.href, onClick: (e) => {
           e.preventDefault();
           handleClick();
         }, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
       }
-      return (0, import_jsx_runtime43.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
+      return (0, import_jsx_runtime44.jsx)("button", { onClick: handleClick, disabled: item.disabled, style: { ...baseStyle, ...variantStyles6[variant] }, children: content }, item.id);
     };
-    return (0, import_jsx_runtime43.jsx)("nav", { className, style: {
+    return (0, import_jsx_runtime44.jsx)("nav", { className, style: {
       display: "flex",
       flexDirection: orientation === "horizontal" ? "row" : "column",
       gap: orientation === "horizontal" ? "4px" : "2px",
@@ -25959,7 +26005,7 @@
   }
 
   // ../design/dist/compositions/FileUploader.js
-  var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
   var import_react27 = __toESM(require_react(), 1);
   function formatFileSize(bytes) {
     if (bytes === 0)
@@ -26000,7 +26046,7 @@
     const handleDragLeave = () => {
       setIsDragOver(false);
     };
-    return (0, import_jsx_runtime44.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime44.jsxs)("div", { onClick: () => !disabled && inputRef.current?.click(), onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
+    return (0, import_jsx_runtime45.jsxs)("div", { className, style: { ...style }, children: [(0, import_jsx_runtime45.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",
@@ -26009,7 +26055,7 @@
       cursor: disabled ? "not-allowed" : "pointer",
       transition: "all 0.2s",
       opacity: disabled ? 0.5 : 1
-    }, children: [(0, import_jsx_runtime44.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime44.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime44.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_runtime44.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_runtime44.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime44.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime45.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime45.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime45.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_runtime45.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_runtime45.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file2) => (0, import_jsx_runtime45.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "12px",
@@ -26017,77 +26063,14 @@
       border: `1px solid ${colors.gray[200]}`,
       borderRadius: radius.md,
       backgroundColor: colors.white
-    }, children: [(0, import_jsx_runtime44.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime44.jsx)("p", { style: {
+    }, children: [(0, import_jsx_runtime45.jsx)(Icon, { name: "menu", size: 20, tone: "subtle" }), (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime45.jsx)("p", { style: {
       margin: 0,
       fontSize: fontSize.sm,
       color: colors.gray[900],
       whiteSpace: "nowrap",
       overflow: "hidden",
       textOverflow: "ellipsis"
-    }, children: file2.name }), (0, import_jsx_runtime44.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime44.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime44.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime44.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime44.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
-  }
-
-  // ../design/dist/compositions/UserProfileCard.js
-  var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
-  function UserProfileCard({ name, subtitle, avatar, coverImage, bio, stats, actions, compact, style, className }) {
-    if (compact) {
-      return (0, import_jsx_runtime45.jsx)(Card, { className, style: { padding: "16px", ...style }, children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [(0, import_jsx_runtime45.jsx)(Avatar, { name, src: avatar, size: "md" }), (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime45.jsx)("p", { style: {
-        margin: 0,
-        fontWeight: fontWeight.semibold,
-        color: colors.gray[900],
-        fontSize: fontSize.sm
-      }, children: name }), subtitle && (0, import_jsx_runtime45.jsx)("p", { style: {
-        margin: "2px 0 0",
-        color: colors.gray[500],
-        fontSize: fontSize.xs
-      }, children: subtitle })] }), actions] }) });
-    }
-    return (0, import_jsx_runtime45.jsxs)(Card, { className, style: { padding: 0, overflow: "hidden", ...style }, children: [coverImage && (0, import_jsx_runtime45.jsx)("div", { style: {
-      height: "120px",
-      backgroundImage: `url(${coverImage})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center"
-    } }), (0, import_jsx_runtime45.jsxs)("div", { style: {
-      padding: "16px",
-      paddingTop: coverImage ? "0" : "16px",
-      textAlign: "center"
-    }, children: [(0, import_jsx_runtime45.jsx)("div", { style: {
-      marginTop: coverImage ? "-40px" : "0",
-      marginBottom: "12px"
-    }, children: (0, import_jsx_runtime45.jsx)(Avatar, { name, src: avatar, size: "xl", style: {
-      border: `4px solid ${colors.white}`,
-      margin: "0 auto"
-    } }) }), (0, import_jsx_runtime45.jsx)("p", { style: {
-      margin: 0,
-      fontWeight: fontWeight.semibold,
-      color: colors.gray[900],
-      fontSize: fontSize.lg
-    }, children: name }), subtitle && (0, import_jsx_runtime45.jsx)("p", { style: {
-      margin: "4px 0 0",
-      color: colors.gray[500],
-      fontSize: fontSize.sm
-    }, children: subtitle }), bio && (0, import_jsx_runtime45.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_runtime45.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_runtime45.jsxs)("div", { style: { textAlign: "center" }, children: [(0, import_jsx_runtime45.jsx)("p", { style: {
-      margin: 0,
-      fontWeight: fontWeight.semibold,
-      color: colors.gray[900],
-      fontSize: fontSize.lg
-    }, children: stat.value }), (0, import_jsx_runtime45.jsx)("p", { style: {
-      margin: "2px 0 0",
-      color: colors.gray[500],
-      fontSize: fontSize.xs
-    }, children: stat.label })] }, index)) }), actions && (0, import_jsx_runtime45.jsx)("div", { style: { marginTop: "16px", display: "flex", justifyContent: "center", gap: "8px" }, children: actions })] })] });
+    }, children: file2.name }), (0, import_jsx_runtime45.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: colors.gray[500] }, children: [formatFileSize(file2.size), file2.error && (0, import_jsx_runtime45.jsx)("span", { style: { color: colors.error[500], marginLeft: "8px" }, children: file2.error })] }), file2.status === "uploading" && file2.progress !== void 0 && (0, import_jsx_runtime45.jsx)(Progress, { value: file2.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime45.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file2.id), children: (0, import_jsx_runtime45.jsx)(Icon, { name: "x", size: 16 }) })] }, file2.id)) })] });
   }
 
   // ../design/dist/compositions/NotificationCenter.js
@@ -26559,441 +26542,6 @@
     }, children: media })] })] });
   }
 
-  // ../design/dist/compositions/IncidentTimeline.js
-  var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
-  var import_react30 = __toESM(require_react(), 1);
-  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_runtime51.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_runtime51.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_runtime51.jsx)("span", { style, children: statusLabels[status] });
-  }
-  function IncidentCard({ incident, compact }) {
-    const [expanded, setExpanded] = (0, import_react30.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 headerStyle = {
-      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_runtime51.jsxs)("div", { style: cardStyle, children: [(0, import_jsx_runtime51.jsxs)("div", { style: headerStyle, 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_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1, minWidth: 0 }, children: [(0, import_jsx_runtime51.jsx)(SeverityBadge, { severity: incident.severity }), (0, import_jsx_runtime51.jsx)("p", { style: titleStyle, children: incident.title })] }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }, children: [(0, import_jsx_runtime51.jsx)(StatusLabel, { status: incident.status }), !compact && (0, import_jsx_runtime51.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_runtime51.jsx)("path", { d: "M6 9l6 6 6-6" }) })] })] }), incident.affectedServices && incident.affectedServices.length > 0 && (0, import_jsx_runtime51.jsx)("div", { style: { padding: "0 16px 8px", display: "flex", gap: "4px", flexWrap: "wrap" }, children: incident.affectedServices.map((service) => (0, import_jsx_runtime51.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_runtime51.jsx)("div", { style: {
-      borderTop: "1px solid var(--ggui-color-outlineVariant, #e4e4e7)",
-      padding: "12px 16px"
-    }, children: (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: incident.updates.map((update) => (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", gap: "8px", fontSize: "12px" }, children: [(0, import_jsx_runtime51.jsx)("span", { style: {
-      color: "var(--ggui-color-outline, #d4d4d8)",
-      flexShrink: 0,
-      fontVariantNumeric: "tabular-nums"
-    }, children: formatTime(update.timestamp) }), (0, import_jsx_runtime51.jsx)("span", { style: {
-      fontWeight: 500,
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
-      flexShrink: 0,
-      textTransform: "capitalize"
-    }, children: statusLabels[update.status] }), (0, import_jsx_runtime51.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_runtime51.jsxs)("div", { style: containerStyle, className, children: [(0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: "24px" }, children: [(0, import_jsx_runtime51.jsxs)("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: "8px"
-    }, children: [(0, import_jsx_runtime51.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_runtime51.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_runtime51.jsx)(DaySquare, { severity: null }), emptyText] })] }), (0, import_jsx_runtime51.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_runtime51.jsx)("div", { title: `${formatDate(entry.date)}: ${entry.incidents.length === 0 ? "No incidents" : `${entry.incidents.length} incident(s)`}`, children: (0, import_jsx_runtime51.jsx)(DaySquare, { severity }) }, entry.key);
-    }) }), (0, import_jsx_runtime51.jsxs)("div", { style: {
-      display: "flex",
-      justifyContent: "space-between",
-      marginTop: "4px",
-      fontSize: "10px",
-      color: "var(--ggui-color-outline, #d4d4d8)"
-    }, children: [(0, import_jsx_runtime51.jsx)("span", { children: formatDate(dayEntries[dayEntries.length - 1]?.date ?? now) }), (0, import_jsx_runtime51.jsx)("span", { children: "Today" })] })] }), hasAnyIncidents && (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: dayEntries.filter((e) => e.incidents.length > 0).map((entry) => (0, import_jsx_runtime51.jsxs)("div", { children: [(0, import_jsx_runtime51.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_runtime51.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: entry.incidents.map((incident) => (0, import_jsx_runtime51.jsx)(IncidentCard, { incident, compact }, incident.id)) })] }, entry.key)) })] });
-  }
-
-  // ../design/dist/compositions/MakeTabLayout.js
-  var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
-  function MakeTabLayout({ chat, canvas, chatWidth = "400px", style, className }) {
-    return (0, import_jsx_runtime52.jsxs)("div", { className, style: {
-      display: "flex",
-      height: "100%",
-      minHeight: 0,
-      ...style
-    }, children: [(0, import_jsx_runtime52.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_runtime52.jsx)("div", { style: {
-      flex: 1,
-      minWidth: 0,
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden"
-    }, children: canvas })] });
-  }
-
-  // ../design/dist/compositions/marketing/Hero.js
-  var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
-  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_runtime53.jsx)("section", { className, style: {
-      position: "relative",
-      overflow: "hidden",
-      ...backgroundStyles[variant],
-      ...style
-    }, children: (0, import_jsx_runtime53.jsxs)("div", { style: {
-      maxWidth: "1280px",
-      margin: "0 auto",
-      padding: "96px 24px",
-      display: "flex",
-      alignItems: "center",
-      gap: "64px",
-      flexWrap: "wrap"
-    }, children: [(0, import_jsx_runtime53.jsxs)("div", { style: { flex: "1 1 480px", minWidth: 0 }, children: [(0, import_jsx_runtime53.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_runtime53.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_runtime53.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "16px" }, children: [primaryAction && (0, import_jsx_runtime53.jsx)(ActionButton, { action: primaryAction, variant: "primary", dark: isPatternVariant }), secondaryAction && (0, import_jsx_runtime53.jsx)(ActionButton, { action: secondaryAction, variant: "secondary", dark: isPatternVariant })] })] }), media && (0, import_jsx_runtime53.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_runtime53.jsx)("a", { href: action.href, onClick: action.onClick, style: combined, role: "button", children: action.label });
-    }
-    return (0, import_jsx_runtime53.jsx)("button", { type: "button", onClick: action.onClick, style: combined, children: action.label });
-  }
-
-  // ../design/dist/compositions/marketing/Features.js
-  var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
-  function MarketingFeatures({ heading, subheading, features, columns = 3, style, className }) {
-    return (0, import_jsx_runtime54.jsxs)("section", { className, style: {
-      backgroundColor: "var(--ggui-color-surface, #ffffff)",
-      ...style
-    }, children: [(0, import_jsx_runtime54.jsxs)("div", { style: {
-      maxWidth: "1280px",
-      margin: "0 auto",
-      padding: "80px 24px"
-    }, children: [(heading || subheading) && (0, import_jsx_runtime54.jsxs)("div", { style: { textAlign: "center", marginBottom: "64px" }, children: [heading && (0, import_jsx_runtime54.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_runtime54.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_runtime54.jsx)("div", { className: "ggui-features-grid", style: {
-      display: "grid",
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      gap: "32px"
-    }, children: features.map((feature, index) => (0, import_jsx_runtime54.jsx)(FeatureCard, { feature }, index)) })] }), (0, import_jsx_runtime54.jsx)("style", { children: `
-        @media (max-width: 768px) {
-          .ggui-features-grid {
-            grid-template-columns: 1fr !important;
-          }
-        }
-      ` })] });
-  }
-  function FeatureCard({ feature }) {
-    return (0, import_jsx_runtime54.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_runtime54.jsx)("div", { style: {
-      fontSize: "32px",
-      marginBottom: "var(--ggui-spacing-4, 16px)",
-      lineHeight: 1
-    }, children: feature.icon }), (0, import_jsx_runtime54.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_runtime54.jsx)("p", { style: {
-      fontSize: "var(--ggui-font-size-base, 16px)",
-      lineHeight: 1.6,
-      color: "var(--ggui-color-onSurfaceVariant, #52525b)",
-      margin: 0
-    }, children: feature.description })] });
-  }
-
-  // ../design/dist/compositions/marketing/CallToAction.js
-  var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
-  function MarketingCTA({ headline, description, action, variant = "filled", style, className }) {
-    const isFilled = variant === "filled";
-    return (0, import_jsx_runtime55.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_runtime55.jsxs)("div", { style: {
-      maxWidth: "800px",
-      margin: "0 auto",
-      padding: "80px 24px",
-      textAlign: "center"
-    }, children: [(0, import_jsx_runtime55.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_runtime55.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_runtime55.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_runtime55.jsx)("a", { href: action.href, onClick: action.onClick, style: styles, role: "button", children: action.label });
-    }
-    return (0, import_jsx_runtime55.jsx)("button", { type: "button", onClick: action.onClick, style: styles, children: action.label });
-  }
-
   // ../design/dist/interact/index.js
   var interact_exports = {};
   __export(interact_exports, {
@@ -27003,11 +26551,11 @@
   });
 
   // ../design/dist/interact/Clickable.js
-  var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
-  var import_react31 = __toESM(require_react(), 1);
-  var Clickable = (0, import_react31.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_react31.useState)(false);
-    const [active, setActive] = (0, import_react31.useState)(false);
+  var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1);
+  var import_react30 = __toESM(require_react(), 1);
+  var Clickable = (0, import_react30.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_react30.useState)(false);
+    const [active, setActive] = (0, import_react30.useState)(false);
     const hasClick = !!onClick;
     const resolvedCursor = disabled ? "not-allowed" : cursor ?? (hasClick ? "pointer" : void 0);
     const resolvedRole = role ?? (hasClick ? "button" : void 0);
@@ -27028,23 +26576,23 @@
       ...hovered && !disabled ? hoverStyle : {},
       ...active && !disabled ? activeStyle : {}
     };
-    return (0, import_jsx_runtime56.jsx)("div", { ref, className, style: mergedStyle, onClick: disabled ? void 0 : onClick, onDoubleClick: disabled ? void 0 : onDoubleClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
+    return (0, import_jsx_runtime51.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 });
   });
 
   // ../design/dist/interact/Hoverable.js
-  var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
-  var import_react32 = __toESM(require_react(), 1);
-  var Hoverable = (0, import_react32.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
-    const [hovered, setHovered] = (0, import_react32.useState)(false);
+  var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
+  var import_react31 = __toESM(require_react(), 1);
+  var Hoverable = (0, import_react31.forwardRef)(function Hoverable2({ children, hoverStyle, onHoverChange, transition: transition2 = "all 200ms ease", style, className, ...rest }, ref) {
+    const [hovered, setHovered] = (0, import_react31.useState)(false);
     const mergedStyle = {
       ...style,
       transition: transition2,
       ...hovered ? hoverStyle : {}
     };
-    return (0, import_jsx_runtime57.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
+    return (0, import_jsx_runtime52.jsx)("div", { ref, className, style: mergedStyle, onMouseEnter: () => {
       setHovered(true);
       onHoverChange?.(true);
     }, onMouseLeave: () => {
@@ -27054,12 +26602,12 @@
   });
 
   // ../design/dist/interact/Pressable.js
-  var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
-  var import_react33 = __toESM(require_react(), 1);
-  var Pressable = (0, import_react33.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_react33.useState)(false);
-    const [pressed, setPressed] = (0, import_react33.useState)(false);
-    const [longPressTimer, setLongPressTimer] = (0, import_react33.useState)(null);
+  var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
+  var import_react32 = __toESM(require_react(), 1);
+  var Pressable = (0, import_react32.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_react32.useState)(false);
+    const [pressed, setPressed] = (0, import_react32.useState)(false);
+    const [longPressTimer, setLongPressTimer] = (0, import_react32.useState)(null);
     const hasPress = !!onPress || !!onLongPress;
     const handleMouseDown = (e) => {
       if (disabled)
@@ -27102,7 +26650,7 @@
       ...pressed && !disabled ? pressStyle : {}
     };
     const content = typeof children === "function" ? children({ pressed, hovered }) : children;
-    return (0, import_jsx_runtime58.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
+    return (0, import_jsx_runtime53.jsx)("div", { ref, className, style: mergedStyle, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseEnter: () => setHovered(true), onMouseLeave: () => {
       setHovered(false);
       setPressed(false);
       if (longPressTimer)
@@ -27134,13 +26682,13 @@
   });
 
   // ../wire/dist/WireProvider.js
-  var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
 
   // ../wire/dist/context.js
-  var import_react34 = __toESM(require_react(), 1);
-  var WireContext = (0, import_react34.createContext)(null);
+  var import_react33 = __toESM(require_react(), 1);
+  var WireContext = (0, import_react33.createContext)(null);
   function useWireContext() {
-    const ctx = (0, import_react34.useContext)(WireContext);
+    const ctx = (0, import_react33.useContext)(WireContext);
     if (!ctx) {
       throw new Error("useWireContext must be used within a WireProvider. Ensure the component is rendered inside a GguiWireProvider.");
     }
@@ -27149,11 +26697,11 @@
 
   // ../wire/dist/WireProvider.js
   function GguiWireProvider({ config: config2, children }) {
-    return (0, import_jsx_runtime59.jsx)(WireContext.Provider, { value: config2, children });
+    return (0, import_jsx_runtime54.jsx)(WireContext.Provider, { value: config2, children });
   }
 
   // ../wire/dist/useAction.js
-  var import_react35 = __toESM(require_react(), 1);
+  var import_react34 = __toESM(require_react(), 1);
 
   // ../wire/dist/dispatch-dedup.js
   var pendingDispatches = /* @__PURE__ */ new Set();
@@ -27187,7 +26735,7 @@
   // ../wire/dist/useAction.js
   function useAction(actionName) {
     const { dispatch, onDispatchSuppressed } = useWireContext();
-    return (0, import_react35.useCallback)((data) => {
+    return (0, import_react34.useCallback)((data) => {
       const decision = tryAcceptDispatch(actionName, data);
       if (decision.suppressed) {
         console.warn(`[ggui] useAction('${actionName}') suppressed a duplicate dispatch (same name + payload, same event-loop task). This usually means two interactive elements nest and both wire to the same action (e.g. a Checkbox onChange inside a Card as={Clickable} onClick); the inner gesture bubbles to the outer handler so one user click would fire the action twice. Wire each useAction callback to exactly ONE interactive surface. Tier-0 'double-wired-action' warns on this at gen time; this runtime defense ensures the user-visible behavior stays correct regardless of code shape.`);
@@ -27210,7 +26758,7 @@
   }
 
   // ../wire/dist/useGguiContext.js
-  var import_react36 = __toESM(require_react(), 1);
+  var import_react35 = __toESM(require_react(), 1);
   function useGguiContext(slotName) {
     const contextName = slotName.length === 0 ? "Context" : slotName.charAt(0).toUpperCase() + slotName.slice(1) + "Context";
     const registry2 = globalThis.__ggui__?.contexts;
@@ -27218,19 +26766,19 @@
     if (!ctx) {
       throw new Error(`[ggui] useGguiContext('${slotName}'): no Context registered. The contract must declare 'contextSpec.${slotName}' AND the runtime must have synthesized the per-slot React Context at boot. If you see this in production code generated by the LLM, the boilerplate's destructure line drifted from the contract.`);
     }
-    return (0, import_react36.useContext)(ctx);
+    return (0, import_react35.useContext)(ctx);
   }
 
   // ../wire/dist/useStream.js
-  var import_react37 = __toESM(require_react(), 1);
+  var import_react36 = __toESM(require_react(), 1);
   function useStream(channelName) {
     const { subscribe } = useWireContext();
-    const [latest, setLatest] = (0, import_react37.useState)(null);
-    const [all, setAll] = (0, import_react37.useState)([]);
-    const [isComplete, setIsComplete] = (0, import_react37.useState)(false);
-    const allRef = (0, import_react37.useRef)(all);
+    const [latest, setLatest] = (0, import_react36.useState)(null);
+    const [all, setAll] = (0, import_react36.useState)([]);
+    const [isComplete, setIsComplete] = (0, import_react36.useState)(false);
+    const allRef = (0, import_react36.useRef)(all);
     allRef.current = all;
-    (0, import_react37.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       return subscribe(channelName, (delivery) => {
         const typed = delivery.payload;
         setLatest(typed);
@@ -41055,7 +40603,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
 
   // ../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,
@@ -41668,6 +41216,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     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(),
     /**
@@ -41677,13 +41235,24 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
      * 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
@@ -41719,7 +41288,15 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   ]);
   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.")
@@ -45237,9 +44814,9 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   };
 
   // ../design/dist/themes/ThemeProvider.js
-  var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1);
-  var import_react38 = __toESM(require_react(), 1);
-  var ThemeContext = (0, import_react38.createContext)(null);
+  var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
+  var import_react37 = __toESM(require_react(), 1);
+  var ThemeContext = (0, import_react37.createContext)(null);
 
   // ../design/dist/rendering/rewrite-imports.js
   var WIRE_EXPORTS = [
@@ -45304,7 +44881,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     "Breadcrumb",
     "Pagination",
     "EmptyState",
-    "Stat"
+    "Stat",
+    "Stepper"
   ];
   var COMPOSITIONS_EXPORTS = [
     "Header",
@@ -45315,17 +44893,11 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     "ChatWindow",
     "NavigationBar",
     "FileUploader",
-    "UserProfileCard",
     "NotificationCenter",
     "Modal",
     "CommandPalette",
     "Footer",
-    "Hero",
-    "IncidentTimeline",
-    "MakeTabLayout",
-    "MarketingHero",
-    "MarketingCTA",
-    "MarketingFeatures"
+    "Hero"
   ];
   var INTERACT_EXPORTS = [
     "Clickable",
@@ -45404,7 +44976,6 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     "lineHeight",
     "letterSpacing",
     "headingStyles",
-    "textStyles",
     // Layout / shape
     "spacing",
     "spacingValues",