@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/messages-display/user/UserMessageHybridTileSamples.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge } from "@ai-matrx/design-system/controls";
 import { createElement } from "react";
 import {
@@ -94,7 +95,7 @@ function TileIcon({
 function HybridTileStacked({ spec }) {
   const theme = tileTheme(spec);
   const isImage = spec.id === "image-legacy";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -103,15 +104,17 @@ function HybridTileStacked({ spec }) {
         TILE_SHELL,
         "w-[4.5rem] h-[4.5rem] flex flex-col",
         theme.bg
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex items-center justify-center min-h-0 p-1.5" }, isImage ? /* @__PURE__ */ React.createElement("div", { className: "h-full w-full rounded-md bg-gradient-to-br from-blue-200/80 to-indigo-300/60 dark:from-blue-800/50 dark:to-indigo-900/40 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(ImageIcon, { className: cn("h-5 w-5", theme.icon) })) : /* @__PURE__ */ React.createElement(TileIcon, { spec, className: "h-5 w-5" })),
-    /* @__PURE__ */ React.createElement("div", { className: "px-1.5 py-1 border-t border-border/40 bg-background/30 dark:bg-black/10" }, /* @__PURE__ */ React.createElement("span", { className: "block text-[10px] leading-tight font-medium text-foreground text-center truncate" }, truncateLabel(spec.title, 12)))
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center min-h-0 p-1.5", children: isImage ? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-gradient-to-br from-blue-200/80 to-indigo-300/60 dark:from-blue-800/50 dark:to-indigo-900/40 flex items-center justify-center", children: /* @__PURE__ */ jsx(ImageIcon, { className: cn("h-5 w-5", theme.icon) }) }) : /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-1.5 py-1 border-t border-border/40 bg-background/30 dark:bg-black/10", children: /* @__PURE__ */ jsx("span", { className: "block text-[10px] leading-tight font-medium text-foreground text-center truncate", children: truncateLabel(spec.title, 12) }) })
+      ]
+    }
   );
 }
 function HybridTileHorizontal({ spec }) {
   const theme = tileTheme(spec);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -120,10 +123,15 @@ function HybridTileHorizontal({ spec }) {
         TILE_SHELL,
         "w-[7rem] h-11 flex items-center gap-2 px-2",
         theme.bg
-      )
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/40 dark:bg-black/15" }, /* @__PURE__ */ React.createElement(TileIcon, { spec, className: "h-3.5 w-3.5" })),
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 text-left" }, /* @__PURE__ */ React.createElement("span", { className: "block text-[9px] uppercase tracking-wide text-muted-foreground leading-none mb-0.5" }, spec.label), /* @__PURE__ */ React.createElement("span", { className: "block text-[10px] font-medium text-foreground leading-tight truncate" }, truncateLabel(spec.title, 16)))
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/40 dark:bg-black/15", children: /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 text-left", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-[9px] uppercase tracking-wide text-muted-foreground leading-none mb-0.5", children: spec.label }),
+          /* @__PURE__ */ jsx("span", { className: "block text-[10px] font-medium text-foreground leading-tight truncate", children: truncateLabel(spec.title, 16) })
+        ] })
+      ]
+    }
   );
 }
 function StackedRowsIcon({
@@ -131,7 +139,7 @@ function StackedRowsIcon({
   iconSlot,
   iconSize
 }) {
-  return /* @__PURE__ */ React.createElement("span", { className: cn(iconSlot, "shrink-0 flex items-center justify-center") }, /* @__PURE__ */ React.createElement(TileIcon, { spec, className: iconSize }));
+  return /* @__PURE__ */ jsx("span", { className: cn(iconSlot, "shrink-0 flex items-center justify-center"), children: /* @__PURE__ */ jsx(TileIcon, { spec, className: iconSize }) });
 }
 function HybridTileStackedRowsBase({
   spec,
@@ -140,7 +148,7 @@ function HybridTileStackedRowsBase({
   surfaceClassName
 }) {
   const theme = tileTheme(spec);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -152,36 +160,41 @@ function HybridTileStackedRowsBase({
         config.body,
         config.rowGap,
         surfaceClassName ?? theme.bg
-      )
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1 min-w-0 w-full" }, /* @__PURE__ */ React.createElement(
-      StackedRowsIcon,
-      {
-        spec,
-        iconSlot: config.iconSlot,
-        iconSize: config.iconSize,
-        iconInset: config.iconInset
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          config.typeClass,
-          "min-w-0 flex-1 truncate whitespace-nowrap text-muted-foreground uppercase tracking-wide"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 w-full", children: [
+          /* @__PURE__ */ jsx(
+            StackedRowsIcon,
+            {
+              spec,
+              iconSlot: config.iconSlot,
+              iconSize: config.iconSize,
+              iconInset: config.iconInset
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                config.typeClass,
+                "min-w-0 flex-1 truncate whitespace-nowrap text-muted-foreground uppercase tracking-wide"
+              ),
+              children: spec.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              config.titleClass,
+              "block w-full min-w-0 truncate whitespace-nowrap text-foreground font-medium"
+            ),
+            children: spec.title
+          }
         )
-      },
-      spec.label
-    )),
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          config.titleClass,
-          "block w-full min-w-0 truncate whitespace-nowrap text-foreground font-medium"
-        )
-      },
-      spec.title
-    )
+      ]
+    }
   );
 }
 const STACKED_ROWS_E = {
@@ -208,14 +221,14 @@ const STACKED_ROWS_E3 = {
   iconSize: "h-3.5 w-3.5"
 };
 function HybridTileStackedRows({ spec }) {
-  return /* @__PURE__ */ React.createElement(HybridTileStackedRowsBase, { spec, config: STACKED_ROWS_E });
+  return /* @__PURE__ */ jsx(HybridTileStackedRowsBase, { spec, config: STACKED_ROWS_E });
 }
 function HybridTileStackedRowsTight({ spec }) {
-  return /* @__PURE__ */ React.createElement(HybridTileStackedRowsBase, { spec, config: STACKED_ROWS_E2 });
+  return /* @__PURE__ */ jsx(HybridTileStackedRowsBase, { spec, config: STACKED_ROWS_E2 });
 }
 function HybridTileStackedRowsInset({ spec }) {
   const theme = resolveResourceAttachmentTileTheme(spec.id);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     HybridTileStackedRowsBase,
     {
       spec,
@@ -227,7 +240,7 @@ function HybridTileStackedRowsInset({ spec }) {
 }
 function DemoResourceAttachmentTile({ spec }) {
   const Icon = TILE_ICONS[spec.id] ?? FileText;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ResourceAttachmentTile,
     {
       typeLabel: spec.label,
@@ -242,7 +255,7 @@ function E3StyleTile({
   shellClassName,
   surfaceMode = "flat"
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     HybridTileStackedRowsBase,
     {
       spec,
@@ -341,7 +354,7 @@ const E3_STYLE_VARIANTS = [
 ];
 function HybridTileWide({ spec }) {
   const theme = tileTheme(spec);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -350,28 +363,36 @@ function HybridTileWide({ spec }) {
         TILE_SHELL,
         "w-[8.5rem] h-12 flex items-start gap-2 p-2 text-left",
         theme.bg
-      )
-    },
-    /* @__PURE__ */ React.createElement(TileIcon, { spec, className: "h-4 w-4 mt-0.5" }),
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("span", { className: "block text-[9px] font-medium text-muted-foreground leading-none" }, spec.label), /* @__PURE__ */ React.createElement("span", { className: "block text-[11px] font-medium text-foreground leading-snug line-clamp-2 mt-1" }, truncateLabel(spec.title, 22)))
+      ),
+      children: [
+        /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-4 w-4 mt-0.5" }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-[9px] font-medium text-muted-foreground leading-none", children: spec.label }),
+          /* @__PURE__ */ jsx("span", { className: "block text-[11px] font-medium text-foreground leading-snug line-clamp-2 mt-1", children: truncateLabel(spec.title, 22) })
+        ] })
+      ]
+    }
   );
 }
 function HybridTileCaption({ spec }) {
   const theme = tileTheme(spec);
   const isImage = spec.id === "image-legacy";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-1 w-[4rem] shrink-0" }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      title: spec.title,
-      className: cn(
-        TILE_SHELL,
-        "w-16 h-16 flex items-center justify-center p-1.5",
-        theme.bg
-      )
-    },
-    isImage ? /* @__PURE__ */ React.createElement("div", { className: "h-full w-full rounded-md bg-gradient-to-br from-blue-200/80 to-indigo-300/60 dark:from-blue-800/50 dark:to-indigo-900/40 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(ImageIcon, { className: cn("h-6 w-6", theme.icon) })) : /* @__PURE__ */ React.createElement(TileIcon, { spec, className: "h-6 w-6" })
-  ), /* @__PURE__ */ React.createElement("span", { className: "w-full text-[10px] text-foreground font-medium text-center leading-tight line-clamp-2 px-0.5" }, truncateLabel(spec.title, 18)));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-[4rem] shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: spec.title,
+        className: cn(
+          TILE_SHELL,
+          "w-16 h-16 flex items-center justify-center p-1.5",
+          theme.bg
+        ),
+        children: isImage ? /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-gradient-to-br from-blue-200/80 to-indigo-300/60 dark:from-blue-800/50 dark:to-indigo-900/40 flex items-center justify-center", children: /* @__PURE__ */ jsx(ImageIcon, { className: cn("h-6 w-6", theme.icon) }) }) : /* @__PURE__ */ jsx(TileIcon, { spec, className: "h-6 w-6" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "w-full text-[10px] text-foreground font-medium text-center leading-tight line-clamp-2 px-0.5", children: truncateLabel(spec.title, 18) })
+  ] });
 }
 const HYBRID_VARIANTS = [
   {
@@ -415,78 +436,139 @@ function SampleBubble({
   description,
   children
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, title), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-0.5" }, description)), /* @__PURE__ */ React.createElement("div", { className: "bg-muted border border-border rounded-lg px-2 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, children, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-foreground whitespace-pre-wrap pt-1" }, "Can you review these attachments and summarize next steps?"))));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg px-2 py-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      children,
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground whitespace-pre-wrap pt-1", children: "Can you review these attachments and summarize next steps?" })
+    ] }) })
+  ] });
 }
 function UserMessageHybridTileSamples({
   specs
 }) {
-  return /* @__PURE__ */ React.createElement("section", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2" }, "Hybrid tile samples"), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground mt-2 max-w-3xl" }, "Input-bar tints + old-chat", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "rounded-lg"), " shape. Every variant uses the same border, radius, and shadow shell \u2014 only layout differs. Slightly larger than legacy 40px tiles, with room for a short label.")), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, "S8 \xB7 Adaptive \u2014 ship candidate"), /* @__PURE__ */ React.createElement(Badge, { tone: "primary" }, "Light 3D + dark glass")), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground max-w-3xl" }, "Combines S5 (3D raised) in light mode and S7 (glass ring + gradient) in dark mode. Icons sit directly on the tile \u2014 no inset plate. Wired into ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "AgentUserMessage"), " via", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "ResourceAttachmentTile"), "."), /* @__PURE__ */ React.createElement(
-    SampleBubble,
-    {
-      title: "Production tile",
-      description: "Same component used in live user messages."
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, specs.map((spec) => /* @__PURE__ */ React.createElement(DemoResourceAttachmentTile, { key: `s8-${spec.id}`, spec })))
-  )), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, "E3 \xB7 Style polish (exploration)")), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground max-w-3xl" }, "Historical S0\u2013S7 chrome on the E3 layout. Ship candidate is S8 above (adaptive shell + transparent icons)."), /* @__PURE__ */ React.createElement("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-2" }, E3_STYLE_VARIANTS.map((variant) => /* @__PURE__ */ React.createElement(
-    SampleBubble,
-    {
-      key: variant.id,
-      title: variant.title,
-      description: variant.description
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, specs.map((spec) => {
-      const theme = tileTheme(spec);
-      const shell = "tintedBorder" in variant && variant.tintedBorder ? cn(variant.shellClassName, theme.borderTint) : variant.shellClassName;
-      return /* @__PURE__ */ React.createElement(
-        E3StyleTile,
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground border-b border-border pb-2", children: "Hybrid tile samples" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-2 max-w-3xl", children: [
+        "Input-bar tints + old-chat",
+        " ",
+        /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "rounded-lg" }),
+        " shape. Every variant uses the same border, radius, and shadow shell \u2014 only layout differs. Slightly larger than legacy 40px tiles, with room for a short label."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "S8 \xB7 Adaptive \u2014 ship candidate" }),
+        /* @__PURE__ */ jsx(Badge, { tone: "primary", children: "Light 3D + dark glass" })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-3xl", children: [
+        "Combines S5 (3D raised) in light mode and S7 (glass ring + gradient) in dark mode. Icons sit directly on the tile \u2014 no inset plate. Wired into ",
+        /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "AgentUserMessage" }),
+        " via",
+        " ",
+        /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "ResourceAttachmentTile" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsx(
+        SampleBubble,
         {
-          key: `${variant.id}-${spec.id}`,
-          spec,
-          shellClassName: shell,
-          surfaceMode: variant.surfaceMode
+          title: "Production tile",
+          description: "Same component used in live user messages.",
+          children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: specs.map((spec) => /* @__PURE__ */ jsx(DemoResourceAttachmentTile, { spec }, `s8-${spec.id}`)) })
         }
-      );
-    }))
-  )))), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, "E refinements \u2014 layout pick (done)"), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground max-w-3xl" }, "Same layout: icon + type, then title. No wrap \u2014 truncate only. Title left edge aligns with icon left edge."), /* @__PURE__ */ React.createElement("div", { className: "grid gap-4 lg:grid-cols-3" }, /* @__PURE__ */ React.createElement(
-    SampleBubble,
-    {
-      title: "E \xB7 Default",
-      description: "px-1.5 py-1, bare icon h-3.5 in h-4 slot."
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, specs.map((spec) => /* @__PURE__ */ React.createElement(
-      HybridTileStackedRows,
-      {
-        key: `e-default-${spec.id}`,
-        spec
-      }
-    )))
-  ), /* @__PURE__ */ React.createElement(
-    SampleBubble,
-    {
-      title: "E2 \xB7 Tighter",
-      description: "Less padding, icon bumped to h-4, minimal gap."
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, specs.map((spec) => /* @__PURE__ */ React.createElement(
-      HybridTileStackedRowsTight,
-      {
-        key: `e-tight-${spec.id}`,
-        spec
-      }
-    )))
-  ), /* @__PURE__ */ React.createElement(
-    SampleBubble,
-    {
-      title: "E3 \xB7 Adaptive inset layout",
-      description: "Same as S8 \u2014 adaptive chrome, transparent icon, truncate-only rows."
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, specs.map((spec) => /* @__PURE__ */ React.createElement(
-      HybridTileStackedRowsInset,
-      {
-        key: `e-inset-${spec.id}`,
-        spec
-      }
-    )))
-  ))), /* @__PURE__ */ React.createElement("div", { className: "grid gap-6 md:grid-cols-2" }, HYBRID_VARIANTS.map(({ id, title, description, Tile, gap }) => /* @__PURE__ */ React.createElement(SampleBubble, { key: id, title, description }, /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-wrap items-start", gap) }, specs.map((spec) => /* @__PURE__ */ React.createElement(Tile, { key: `${id}-${spec.id}`, spec })))))), /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-dashed border-border bg-card/50 px-3 py-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, "Shared rules:"), " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "rounded-lg"), ",", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "border-border/60"), ", input-bar", " ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "bg-*-100"), " tints, no rainbow borders. Images use an inner thumb area; other types use the type icon at the same tile size.")));
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "E3 \xB7 Style polish (exploration)" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground max-w-3xl", children: "Historical S0\u2013S7 chrome on the E3 layout. Ship candidate is S8 above (adaptive shell + transparent icons)." }),
+      /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-2", children: E3_STYLE_VARIANTS.map((variant) => /* @__PURE__ */ jsx(
+        SampleBubble,
+        {
+          title: variant.title,
+          description: variant.description,
+          children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: specs.map((spec) => {
+            const theme = tileTheme(spec);
+            const shell = "tintedBorder" in variant && variant.tintedBorder ? cn(variant.shellClassName, theme.borderTint) : variant.shellClassName;
+            return /* @__PURE__ */ jsx(
+              E3StyleTile,
+              {
+                spec,
+                shellClassName: shell,
+                surfaceMode: variant.surfaceMode
+              },
+              `${variant.id}-${spec.id}`
+            );
+          }) })
+        },
+        variant.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "E refinements \u2014 layout pick (done)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground max-w-3xl", children: "Same layout: icon + type, then title. No wrap \u2014 truncate only. Title left edge aligns with icon left edge." }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsx(
+          SampleBubble,
+          {
+            title: "E \xB7 Default",
+            description: "px-1.5 py-1, bare icon h-3.5 in h-4 slot.",
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: specs.map((spec) => /* @__PURE__ */ jsx(
+              HybridTileStackedRows,
+              {
+                spec
+              },
+              `e-default-${spec.id}`
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SampleBubble,
+          {
+            title: "E2 \xB7 Tighter",
+            description: "Less padding, icon bumped to h-4, minimal gap.",
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: specs.map((spec) => /* @__PURE__ */ jsx(
+              HybridTileStackedRowsTight,
+              {
+                spec
+              },
+              `e-tight-${spec.id}`
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SampleBubble,
+          {
+            title: "E3 \xB7 Adaptive inset layout",
+            description: "Same as S8 \u2014 adaptive chrome, transparent icon, truncate-only rows.",
+            children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: specs.map((spec) => /* @__PURE__ */ jsx(
+              HybridTileStackedRowsInset,
+              {
+                spec
+              },
+              `e-inset-${spec.id}`
+            )) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-6 md:grid-cols-2", children: HYBRID_VARIANTS.map(({ id, title, description, Tile, gap }) => /* @__PURE__ */ jsx(SampleBubble, { title, description, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-start", gap), children: specs.map((spec) => /* @__PURE__ */ jsx(Tile, { spec }, `${id}-${spec.id}`)) }) }, id)) }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border bg-card/50 px-3 py-2", children: /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Shared rules:" }),
+      " ",
+      /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "rounded-lg" }),
+      ",",
+      " ",
+      /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "border-border/60" }),
+      ", input-bar",
+      " ",
+      /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "bg-*-100" }),
+      " tints, no rainbow borders. Images use an inner thumb area; other types use the type icon at the same tile size."
+    ] }) })
+  ] });
 }
 export {
   UserMessageHybridTileSamples

package/dist/agents/components/model/AgentModelPanel.js

@@ -1,7 +1,8 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { AgentSettingsCore } from "../../../host/ui-slots.js";
 function AgentModelPanel({ agentId }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col h-full min-h-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-hidden px-4" }, /* @__PURE__ */ React.createElement(AgentSettingsCore, { agentId })));
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full min-h-0", children: /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden px-4", children: /* @__PURE__ */ jsx(AgentSettingsCore, { agentId }) }) });
 }
 export {
   AgentModelPanel

package/dist/agents/components/model-tiers/ModelTierIdentityList.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AiModelRef } from "../../../host/ui-slots.js";
 import { cn } from "@ai-matrx/design-system";
 function isRecord(value) {
@@ -35,25 +36,27 @@ function ModelTierIdentityList({
 }) {
   const identities = readModelTierIdentities(value);
   if (identities.length === 0) {
-    return /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "No model tiers");
+    return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "No model tiers" });
   }
-  return /* @__PURE__ */ React.createElement("span", { className: cn("flex flex-col gap-1.5", className) }, identities.map((identity) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("span", { className: cn("flex flex-col gap-1.5", className), children: identities.map((identity) => /* @__PURE__ */ jsxs(
     "span",
     {
-      key: identity.key,
-      className: "grid min-w-0 grid-cols-[5rem_minmax(0,1fr)] items-start gap-2"
+      className: "grid min-w-0 grid-cols-[5rem_minmax(0,1fr)] items-start gap-2",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: identity.role }),
+        /* @__PURE__ */ jsx(
+          AiModelRef,
+          {
+            modelId: identity.modelId,
+            showId,
+            showIcon: false,
+            disableNavigation
+          }
+        )
+      ]
     },
-    /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, identity.role),
-    /* @__PURE__ */ React.createElement(
-      AiModelRef,
-      {
-        modelId: identity.modelId,
-        showId,
-        showIcon: false,
-        disableNavigation
-      }
-    )
-  )));
+    identity.key
+  )) });
 }
 export {
   ModelTierIdentityList,

package/dist/agents/components/notifications/ImageArrivalPeek.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { X, ImageIcon } from "lucide-react";
@@ -43,59 +44,69 @@ function ImageArrivalPeek({
     };
   }, [autoHideMs, startTimer]);
   const mimeLabel = block.mimeType?.split("/")[1] ?? null;
-  return /* @__PURE__ */ React.createElement(AnimatePresence, { onExitComplete: () => onDismiss(peekId) }, visible && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: () => onDismiss(peekId), children: visible && /* @__PURE__ */ jsxs(
     motion.div,
     {
-      key: peekId,
       initial: { opacity: 0, x: 40, scale: 0.96 },
       animate: { opacity: 1, x: 0, scale: 1 },
       exit: { opacity: 0, x: 40, scale: 0.94 },
       transition: { type: "spring", stiffness: 340, damping: 30 },
       className: "relative w-56 rounded-xl border bg-card shadow-lg overflow-hidden",
       onMouseEnter: pauseTimer,
-      onMouseLeave: resumeTimer
-    },
-    /* @__PURE__ */ React.createElement(ProgressBar, { durationMs: autoHideMs, paused: false }),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2.5 pt-2 pb-1" }, /* @__PURE__ */ React.createElement(ImageIcon, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-foreground flex-1 leading-none" }, "New image"), mimeLabel && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-mono text-muted-foreground" }, mimeLabel), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), onClick: dismiss, "aria-label": "Dismiss", className: "ml-auto" })),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "relative mx-2 mb-2 rounded-lg overflow-hidden bg-muted/40",
-        style: { height: 110 }
-      },
-      /* @__PURE__ */ React.createElement(
-        UnifiedImageBlockRenderer,
-        {
-          block,
-          variant: "compact",
-          onCompactClick: (src) => {
-            dismiss();
-            onImageClick(src);
+      onMouseLeave: resumeTimer,
+      children: [
+        /* @__PURE__ */ jsx(ProgressBar, { durationMs: autoHideMs, paused: false }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2.5 pt-2 pb-1", children: [
+          /* @__PURE__ */ jsx(ImageIcon, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground flex-1 leading-none", children: "New image" }),
+          mimeLabel && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: mimeLabel }),
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), onClick: dismiss, "aria-label": "Dismiss", className: "ml-auto" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative mx-2 mb-2 rounded-lg overflow-hidden bg-muted/40",
+            style: { height: 110 },
+            children: /* @__PURE__ */ jsx(
+              UnifiedImageBlockRenderer,
+              {
+                block,
+                variant: "compact",
+                onCompactClick: (src) => {
+                  dismiss();
+                  onImageClick(src);
+                }
+              }
+            )
           }
-        }
-      )
-    )
-  ));
+        )
+      ]
+    },
+    peekId
+  ) });
 }
 function ProgressBar({
   durationMs,
   paused
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "absolute top-0 left-0 right-0 h-0.5 bg-muted overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "h-full bg-primary origin-left",
-      style: {
-        animation: `shrink ${durationMs}ms linear forwards`,
-        animationPlayState: paused ? "paused" : "running"
+  return /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-0 right-0 h-0.5 bg-muted overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full bg-primary origin-left",
+        style: {
+          animation: `shrink ${durationMs}ms linear forwards`,
+          animationPlayState: paused ? "paused" : "running"
+        }
       }
-    }
-  ), /* @__PURE__ */ React.createElement("style", null, `
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
         @keyframes shrink {
           from { transform: scaleX(1); }
           to   { transform: scaleX(0); }
         }
-      `));
+      ` })
+  ] });
 }
 export {
   ImageArrivalPeek