@invana/ui 0.0.26 → 0.0.28

package/README.md

@@ -0,0 +1,101 @@
+# @invana/ui
+
+Invana's React component library — shadcn-style primitives over Radix, plus the composed
+components the Invana products share.
+
+```bash
+pnpm add @invana/ui
+```
+
+Peer dependencies: `react` and `react-dom` (18 or 19).
+
+## Styles
+
+Two ways in, and the difference matters.
+
+**Recommended — compile the tokens yourself.** Your Tailwind v4 build sees `@invana/styling`'s
+`@theme` block, so the design tokens (including the type ladder) are real tokens in your build:
+
+```css
+@import "tailwindcss";
+
+/* your own source globs, plus this package's so its classes are generated */
+@source "./src/**/*.{ts,tsx}";
+@source "../../node_modules/@invana/ui/dist/**/*.js";
+
+@import "@invana/styling/index.css";
+```
+
+**Or ship the precompiled sheet**, if you are not running Tailwind:
+
+```ts
+import '@invana/ui/styles.css';
+```
+
+The precompiled sheet gives you CSS custom properties but **not** the `@theme` tokens — your own
+Tailwind will regenerate `text-sm` at its stock `0.875rem` rather than the kit's alias. Prefer the
+first form when you have a Tailwind build.
+
+## Usage
+
+```tsx
+import { Button, Card, NavHorizontal, cn } from '@invana/ui';
+
+export function Toolbar({ active }: { active: boolean }) {
+  return (
+    <Card className={cn('p-4', active && 'ring-1 ring-ring')}>
+      <Button variant="outline">Run</Button>
+    </Card>
+  );
+}
+```
+
+`cn` is the class merger used throughout the kit — `clsx` + `tailwind-merge`.
+
+## What's in it
+
+**Primitives** (`components/ui`) — accordion, alert, alert-dialog, avatar, badge, breadcrumb,
+button, button-group, card, carousel, command, dialog, dropdown-menu, hover-card, item, kbd,
+menubar, navigation-menu, pagination, popover, progress, resizable, scroll-area, separator, sheet,
+sidebar, skeleton, sonner, spinner, status-dot, table, tabs, toggle, toggle-group, tooltip.
+
+**Composed** (`components/ui-extended`) — layout and navigation (`NavHorizontal`, `NavVertical`,
+`TabbedPanel`, `PanelStack`, `PanelBox`, `Toolbar`, `TreeView`, `ContextBar`, `FilterBar`,
+`SectionHeader`, `RecordHeader`, `EmptyState`, `Tour`), charts and readouts (`BarChartH`,
+`BarChartV`, `DivergingBar`, `Sparkline`, `HeatStrip`, `Legend`, `MetricTile`, `TaskGantt`,
+`TimelineList`, `PropertyList`), and the Invana-domain composites (`ChatSession`, `EmissionCard`,
+`CitationList`, `ProposalCard`, `DiagnosisCard`, `ClarifyCard`, `CannotAnswerCard`, `AgentChip`,
+`BoundChip`, `TaskNode`, `Terminal`, `DiffList`, `ClampedText`, `RichSelect`).
+
+**Typography** (`components/typography`) — exported both individually as `TypographyH1` …
+`TypographyPre`, and as a `Typography` namespace object:
+
+```tsx
+import { Typography, TypographyH1 } from '@invana/ui';
+
+<TypographyH1>Runs</TypographyH1>
+<Typography.Lead>Everything that ran today.</Typography.Lead>
+```
+
+`H1`–`H6`, `P`, `Lead`, `Large`, `Small`, `Muted`, `Blockquote`, `Code`, `List`, `Pre`.
+
+Also exported: `cn` and the `useOverflowItems` hook.
+
+## Type scale
+
+Components declare no font size. Default text inherits the root, and text that is deliberately
+subordinate — a count, a timing, a row's subtitle — uses `text-meta`. Setting `html` to 13px gives
+you an application; 16px gives you a site, and every component follows. Don't hard-code
+`text-sm` / `text-xs` in consuming code: they are compatibility aliases, not options.
+
+## Documentation
+
+Every component has a Storybook story. From the monorepo root:
+
+```bash
+pnpm --filter @invana/stoybook dev
+```
+
+## License
+
+MIT © Ravi Raja Merugu

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,
@@ -4954,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,
@@ -5273,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",
   {
@@ -5760,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",
   {
@@ -5800,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",
@@ -5831,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,
@@ -5859,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
           },
@@ -6569,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;
@@ -6719,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;
@@ -6729,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;
@@ -6792,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;
@@ -6829,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;