@invana/ui 0.0.25 → 0.0.27

package/dist/index.cjs

@@ -2821,6 +2821,36 @@ var AgentChip = React23__namespace.forwardRef(
   )
 );
 AgentChip.displayName = "AgentChip";
+var SWATCH = {
+  none: "bg-muted-foreground",
+  network: "bg-warning",
+  graph_read: "bg-success",
+  graph_write: "bg-data-2",
+  schema_write: "bg-data-4",
+  ingest: "bg-info",
+  llm: "bg-data-7",
+  plan_write: "bg-data-5",
+  work_write: "bg-destructive"
+};
+var BoundChip = React23__namespace.forwardRef(
+  ({ bound, swatchOnly, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "inline-flex max-w-full shrink-0 items-center gap-1.5 font-mono text-meta text-muted-foreground",
+        className
+      ),
+      "aria-label": swatchOnly ? `bound: ${bound}` : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn("size-1.5 shrink-0", SWATCH[bound]) }),
+        swatchOnly ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: bound })
+      ]
+    }
+  )
+);
+BoundChip.displayName = "BoundChip";
 var stateVariants = classVarianceAuthority.cva("inline-flex shrink-0 items-center gap-1.5 font-medium", {
   variants: {
     tone: {
@@ -4601,17 +4631,59 @@ var MenuItem = ({
     )
   ] });
 };
+var TONE = {
+  running: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-destructive",
+  info: "text-info"
+};
 var MetricTile = React23__namespace.forwardRef(
-  ({ label, value, caption, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ({ label, value, caption, tone, meter, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
-      className: cn("flex flex-col gap-0.5 border border-border bg-card p-2", className),
+      className: cn(
+        "flex flex-col gap-px border border-border bg-card px-3 py-2.5",
+        className
+      ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-meta text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium leading-tight", children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-meta font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              // Mono, because a metric is a figure: proportional digits make
+              // `1,880` and `2 / 5` in adjacent tiles sit at different widths, and
+              // a strip of six stops reading as one row of numbers.
+              "font-mono text-lg font-semibold leading-tight",
+              tone ? TONE[tone] : void 0
+            ),
+            children: value
+          }
+        ),
         caption != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", children: caption }) : null,
+        meter != null ? (
+          // Not a <Progress>: that is a control-sized, rounded, animated bar for
+          // work in flight. This is a 4px rule that says how much of a ceiling is
+          // gone, and it must not read as a second value in the tile.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "mt-1 h-1 w-full bg-muted",
+              role: "img",
+              "aria-label": `${Math.round(Math.min(Math.max(meter, 0), 1) * 100)}% of the ceiling`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("h-full", tone ? TONE[tone] : "text-primary", "bg-current"),
+                  style: { width: `${Math.min(Math.max(meter, 0), 1) * 100}%` }
+                }
+              )
+            }
+          )
+        ) : null,
         children
       ]
     }
@@ -4619,12 +4691,13 @@ var MetricTile = React23__namespace.forwardRef(
 );
 MetricTile.displayName = "MetricTile";
 var MetricGrid = React23__namespace.forwardRef(
-  ({ minTileWidth = 120, className, style, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ minTileWidth = 120, gap = 6, className, style, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
-      className: cn("grid gap-1.5", className),
+      className: cn("grid", className),
       style: {
+        gap,
         gridTemplateColumns: `repeat(auto-fit, minmax(${minTileWidth}px, 1fr))`,
         ...style
       },
@@ -4676,6 +4749,67 @@ var NestedMenu = (props) => {
     }
   );
 };
+var Eyebrow = React23__namespace.forwardRef(
+  ({ aside, tone = "muted", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-baseline gap-2 text-meta font-semibold uppercase tracking-wide",
+        tone === "muted" && "text-muted-foreground",
+        tone === "foreground" && "text-foreground",
+        tone === "accent" && "text-primary",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+        aside != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 font-normal normal-case tracking-normal text-muted-foreground", children: aside }) : null
+      ]
+    }
+  )
+);
+Eyebrow.displayName = "Eyebrow";
+var PanelBox = React23__namespace.forwardRef(
+  ({ title, aside, flush, className, headerClassName, bodyClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      ref,
+      className: cn(
+        // A band is square and flat: the radius and the lift belong to cards
+        // that float, and twenty of these in a column would read as twenty
+        // floating things rather than one page.
+        "flex min-w-0 flex-col overflow-hidden rounded-control shadow-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-[31px] shrink-0 items-center border-b border-border px-2.5",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Eyebrow, { aside, className: "w-full", children: title })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-col",
+              flush ? "p-0" : "px-2.5 py-2",
+              bodyClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  )
+);
+PanelBox.displayName = "PanelBox";
 function PanelContent({
   title,
   titleText,
@@ -4719,6 +4853,8 @@ function PanelContent({
 }
 function PanelStack({
   sections,
+  stackRef,
+  onCollapsedChange,
   headerHeight = 35,
   withHandle = false,
   className,
@@ -4763,19 +4899,26 @@ function PanelStack({
     for (const s of targets) refs.current[s.id]?.collapse();
     group.setLayout(next);
   }, []);
-  const toggle = (id) => {
+  const notify = React23__namespace.useRef(onCollapsedChange);
+  React23__namespace.useEffect(() => {
+    notify.current = onCollapsedChange;
+  }, [onCollapsedChange]);
+  const collapsedRef = React23__namespace.useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const collapsePanel = React23__namespace.useCallback((id) => {
     const ref = refs.current[id];
-    if (!ref) return;
-    if (!ref.isCollapsed()) {
-      ref.collapse();
-      return;
-    }
+    if (!ref || ref.isCollapsed()) return;
+    ref.collapse();
+  }, []);
+  const expandPanel = React23__namespace.useCallback((id) => {
+    const ref = refs.current[id];
+    if (!ref || !ref.isCollapsed()) return;
     ref.expand();
     if (!ref.isCollapsed()) return;
     const group = groupRef.current;
     if (!group) return;
     const layout = group.getLayout();
-    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsed[panelId]).sort((a, b) => b[1] - a[1])[0];
+    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsedRef.current[panelId]).sort((a, b) => b[1] - a[1])[0];
     if (!donor) return;
     const [donorId, donorPct] = donor;
     const share = donorPct / 2;
@@ -4784,7 +4927,26 @@ function PanelStack({
       [id]: (layout[id] ?? 0) + share,
       [donorId]: donorPct - share
     });
-  };
+  }, []);
+  const toggle = React23__namespace.useCallback(
+    (id) => {
+      const ref = refs.current[id];
+      if (!ref) return;
+      if (ref.isCollapsed()) expandPanel(id);
+      else collapsePanel(id);
+    },
+    [expandPanel, collapsePanel]
+  );
+  React23__namespace.useImperativeHandle(
+    stackRef,
+    () => ({
+      expand: expandPanel,
+      collapse: collapsePanel,
+      toggle,
+      isCollapsed: (id) => !!collapsedRef.current[id]
+    }),
+    [expandPanel, collapsePanel, toggle]
+  );
   return (
     // Header actions are nav items, and those carry tooltips — provide the
     // context here so a `PanelStack` works outside an app shell too. Nesting
@@ -4822,9 +4984,12 @@ function PanelStack({
                 },
                 onResize: (size) => {
                   const next = size.inPixels <= headerHeight + 1;
-                  setCollapsed(
-                    (prev) => prev[section.id] === next ? prev : { ...prev, [section.id]: next }
-                  );
+                  setCollapsed((prev) => {
+                    if (prev[section.id] === next) return prev;
+                    const map = { ...prev, [section.id]: next };
+                    notify.current?.(map);
+                    return map;
+                  });
                 },
                 className: "flex flex-col overflow-hidden",
                 children: [
@@ -4923,6 +5088,47 @@ var PropertyRow = React23__namespace.forwardRef(
   )
 );
 PropertyRow.displayName = "PropertyRow";
+var RecordHeader = React23__namespace.forwardRef(
+  ({ tone, crumbs, chips, actions, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex shrink-0 items-center gap-2.5 border-b border-border bg-card px-4 py-2.5",
+        className
+      ),
+      ...props,
+      children: [
+        tone ? /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { tone, size: "lg" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-1.5", children: crumbs.map((crumb, i) => {
+          const last = i === crumbs.length - 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(React23__namespace.Fragment, { children: [
+            i > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronRight,
+              {
+                "aria-hidden": true,
+                className: "size-3.5 shrink-0 text-muted-foreground/60"
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "min-w-0 truncate font-mono",
+                  last ? "text-base font-semibold text-foreground" : "text-muted-foreground"
+                ),
+                children: crumb
+              }
+            )
+          ] }, i);
+        }) }),
+        chips ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center gap-1.5", children: chips }) : null,
+        actions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: actions }) : null
+      ]
+    }
+  )
+);
+RecordHeader.displayName = "RecordHeader";
 var ProposalCard = React23__namespace.forwardRef(
   ({
     title,
@@ -5242,27 +5448,6 @@ var SearchInput = ({
     }
   );
 };
-var Eyebrow = React23__namespace.forwardRef(
-  ({ aside, tone = "muted", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex items-baseline gap-2 text-meta font-semibold uppercase tracking-wide",
-        tone === "muted" && "text-muted-foreground",
-        tone === "foreground" && "text-foreground",
-        tone === "accent" && "text-primary",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
-        aside != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 font-normal normal-case tracking-normal text-muted-foreground", children: aside }) : null
-      ]
-    }
-  )
-);
-Eyebrow.displayName = "Eyebrow";
 var SectionHeader = React23__namespace.forwardRef(({ icon, title, count, actions, bare, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
@@ -5729,6 +5914,85 @@ var TaskGantt = React23__namespace.forwardRef(
   }
 );
 TaskGantt.displayName = "TaskGantt";
+var TaskNode = React23__namespace.forwardRef(
+  ({ taskKey, bound, status, tags, meta, selected, gate, dim, ghost, className, ...props }, ref) => {
+    if (ghost) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "flex w-[146px] flex-col gap-1 border border-dashed border-border p-2",
+            "text-meta text-muted-foreground",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono", children: taskKey }),
+            meta != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: meta }) : null
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-selected": selected || void 0,
+        className: cn(
+          "relative flex w-[146px] flex-col gap-1 border bg-card p-2 shadow-xs",
+          // The ring says one thing at a time, in this order: you picked it,
+          // it is held for approval, it failed. A node cannot be two of those.
+          selected ? "border-primary ring-2 ring-primary/25" : gate ? "border-warning" : status === "error" ? "border-destructive" : "border-border",
+          dim && "opacity-45",
+          className
+        ),
+        ...props,
+        children: [
+          selected ? ["-left-1 -top-1", "-right-1 -top-1", "-bottom-1 -left-1", "-bottom-1 -right-1"].map(
+            (pos) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: cn("absolute size-[7px] border-[1.5px] border-primary bg-card", pos)
+              },
+              pos
+            )
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            status ? /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { tone: status, size: "sm" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate font-mono", children: taskKey })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(BoundChip, { bound }),
+            tags?.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 border px-1 text-meta",
+                  tag.tone === "warning" ? "border-warning/40 text-warning" : "border-border text-muted-foreground"
+                ),
+                children: tag.label
+              },
+              i
+            ))
+          ] }),
+          meta != null ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "truncate text-meta",
+                gate ? "text-warning" : "text-muted-foreground"
+              ),
+              children: meta
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+TaskNode.displayName = "TaskNode";
 var TemplatePicker = React23__namespace.forwardRef(({ heading, options, value, onSelect, footnote, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
@@ -5769,6 +6033,12 @@ var TemplatePicker = React23__namespace.forwardRef(({ heading, options, value, o
   }
 ));
 TemplatePicker.displayName = "TemplatePicker";
+var LEVEL = {
+  info: "text-success",
+  warn: "text-warning",
+  error: "text-destructive",
+  debug: "text-muted-foreground"
+};
 var MARKER = {
   prompt: "$",
   output: "\u2192",
@@ -5800,19 +6070,19 @@ var Terminal = React23__namespace.forwardRef(
 );
 Terminal.displayName = "Terminal";
 var TerminalLine = React23__namespace.forwardRef(
-  ({ kind = "output", columns, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ({ kind = "output", level, levelColumn = 1, columns, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       className: cn(
         "items-baseline gap-2 whitespace-pre",
-        columns ? "grid [grid-template-columns:auto_var(--terminal-cols)]" : "flex",
+        columns ? level ? "grid [grid-template-columns:var(--terminal-cols)]" : "grid [grid-template-columns:auto_var(--terminal-cols)]" : "flex",
         kind === "comment" && "text-muted-foreground",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        level ? null : /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "aria-hidden": true,
@@ -5828,7 +6098,9 @@ var TerminalLine = React23__namespace.forwardRef(
           {
             className: cn(
               "min-w-0 truncate",
-              i === columns.length - 1 && "text-muted-foreground"
+              // A log tints its level cell and greys everything that is not the
+              // message; a transcript greys only its trailing cell.
+              level ? i === levelColumn ? LEVEL[level] : i === columns.length - 1 ? void 0 : "text-muted-foreground" : i === columns.length - 1 && "text-muted-foreground"
             ),
             children: c
           },
@@ -6538,6 +6810,7 @@ exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
 exports.BarChartH = BarChartH;
 exports.BarChartV = BarChartV;
+exports.BoundChip = BoundChip;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -6688,6 +6961,7 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.PanelBox = PanelBox;
 exports.PanelContent = PanelContent;
 exports.PanelStack = PanelStack;
 exports.Popover = Popover;
@@ -6698,6 +6972,7 @@ exports.PropertyList = PropertyList;
 exports.PropertyRow = PropertyRow;
 exports.ProposalCard = ProposalCard;
 exports.RatingControl = RatingControl;
+exports.RecordHeader = RecordHeader;
 exports.RepairNote = RepairNote;
 exports.ResizableHandle = ResizableHandle;
 exports.ResizablePanel = ResizablePanel;
@@ -6761,6 +7036,7 @@ exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.TaskGantt = TaskGantt;
 exports.TaskGanttDetailCard = TaskGanttDetailCard;
+exports.TaskNode = TaskNode;
 exports.TemplatePicker = TemplatePicker;
 exports.Terminal = Terminal;
 exports.TerminalLine = TerminalLine;
@@ -6798,6 +7074,7 @@ exports.TypographySmall = TypographySmall;
 exports.UnderDevelopment = UnderDevelopment;
 exports.agentChipVariants = agentChipVariants;
 exports.badgeVariants = badgeVariants;
+exports.boundSwatch = SWATCH;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.chatSessionGutterClass = chatSessionGutterClass;