@invana/ui 0.0.32 → 0.0.33

package/dist/index.cjs

@@ -3174,6 +3174,14 @@ var stackVariants = classVarianceAuthority.cva("flex min-w-0", {
     wrap: {
       true: "flex-wrap",
       false: ""
+    },
+    /**
+     * A page: the stack takes its parent's height and its last child grows
+     * into what the others leave — a header, then a canvas or a split.
+     */
+    fill: {
+      true: "h-full min-h-0 [&>:last-child]:min-h-0 [&>:last-child]:flex-1",
+      false: ""
     }
   },
   defaultVariants: {
@@ -3182,7 +3190,7 @@ var stackVariants = classVarianceAuthority.cva("flex min-w-0", {
   }
 });
 var Stack = React25__namespace.forwardRef(
-  ({ className, direction, gap, align, justify, wrap, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, direction, gap, align, justify, wrap, fill, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
@@ -3193,7 +3201,8 @@ var Stack = React25__namespace.forwardRef(
           // A row lines its items up on their centres unless told otherwise.
           align: align ?? (direction === "row" ? "center" : void 0),
           justify,
-          wrap
+          wrap,
+          fill
         }),
         className
       ),
@@ -3749,7 +3758,7 @@ var Eyebrow = React25__namespace.forwardRef(
     {
       ref,
       className: cn(
-        "flex items-baseline gap-2 text-sm font-semibold uppercase tracking-wide",
+        "flex items-center gap-2 text-sm font-semibold uppercase tracking-wide",
         tone === "muted" && "text-muted-foreground",
         tone === "foreground" && "text-foreground",
         tone === "accent" && "text-primary",
@@ -4445,26 +4454,29 @@ var VARIANT = {
     item: "h-full rounded-none px-3 py-2",
     hover: "hover:text-foreground",
     open: "data-[state=open]:text-foreground",
-    active: "bg-primary/10 text-primary border-b-2 border-primary mb-[-1px]",
+    active: "bg-primary/10 text-primary border-b-2 border-primary translate-y-px",
     strip: "items-stretch"
   },
   /**
    * The workbook tab: boxed on top / left / right with an *open bottom*, so it
-   * punches through the strip's own rule — the classic folder-tab notch.
+   * punches through the strip's own rule — the classic folder-tab notch. The
+   * box wears the rule's own colour and the body's fill, so the active tab and
+   * its page read as one surface; the accent is the label plus a 2px line on
+   * the tab's outer edge.
    */
   folder: {
     item: "h-full rounded-none px-3 py-2 gap-1.5",
     hover: "hover:text-foreground",
     open: "data-[state=open]:text-foreground",
-    active: "mb-[-1px] rounded-t-md border border-b-0 border-primary text-primary",
+    active: "z-10 translate-y-px rounded-t-md border border-b-0 border-border bg-card text-primary shadow-[inset_0_2px_0_var(--color-primary)]",
     strip: "items-stretch"
   },
-  /** The folder tab turned over, for a strip under its pages: open at the top, rounded below. */
+  /** The folder tab turned over, for a strip under its pages: open at the top, rounded below, accent line underneath. */
   "folder-bottom": {
     item: "h-full rounded-none px-3 py-2 gap-1.5",
     hover: "hover:text-foreground",
     open: "data-[state=open]:text-foreground",
-    active: "mt-[-1px] rounded-b-md border border-t-0 border-primary text-primary",
+    active: "z-10 mt-[-1px] rounded-b-md border border-t-0 border-border bg-card text-primary shadow-[inset_0_-2px_0_var(--color-primary)]",
     strip: "items-stretch"
   }
 };
@@ -4814,14 +4826,14 @@ var NavBase = ({
     sections.start?.content && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `${sectionWrapperClass} ${sections.start.className || ""}`,
+        className: `${sectionWrapperClass} ${isVertical ? "" : "min-w-0 shrink"} ${sections.start.className || ""}`,
         children: sections.start.content
       }
     ),
     sections.center?.content ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `flex-1 ${isVertical ? "" : "flex justify-center items-center gap-1"} ${sections.center.className || ""}`,
+        className: `flex-1 ${isVertical ? "" : "flex min-w-0 justify-center items-center gap-1"} ${sections.center.className || ""}`,
         children: sections.center.content
       }
     ) : (
@@ -4831,7 +4843,7 @@ var NavBase = ({
     sections.end?.content && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto"} ${sections.end.className || ""}`,
+        className: `${sectionWrapperClass} ${isVertical ? "" : "ml-auto shrink-0"} ${sections.end.className || ""}`,
         children: sections.end.content
       }
     )
@@ -6879,7 +6891,7 @@ var NestedMenu = (props) => {
   );
 };
 var PanelBox = React25__namespace.forwardRef(
-  ({ title, aside, flush, className, headerClassName, bodyClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ({ title, aside, flush, fill, className, headerClassName, bodyClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     Card,
     {
       ref,
@@ -6888,6 +6900,7 @@ var PanelBox = React25__namespace.forwardRef(
         // these in a column would read as twenty floating things rather than
         // one page. Its corner is the surface dial, as a Card's is.
         "flex min-w-0 flex-col overflow-hidden rounded-surface shadow-none",
+        fill && "h-full min-h-0",
         className
       ),
       ...props,
@@ -6907,6 +6920,7 @@ var PanelBox = React25__namespace.forwardRef(
           {
             className: cn(
               "flex min-w-0 flex-col",
+              fill && "min-h-0 flex-1",
               flush ? "p-0" : title != null ? "px-2.5 py-2" : "p-2.5",
               bodyClassName
             ),
@@ -8127,6 +8141,45 @@ var SectionHeader = React25__namespace.forwardRef(({ icon, title, count, actions
   }
 ));
 SectionHeader.displayName = "SectionHeader";
+var TONE7 = { done: "success", current: "info", todo: "queued" };
+var StageTrail = React25__namespace.forwardRef(
+  ({ steps, onPick, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": "Stages",
+      className: cn("@container/trail flex w-full min-w-0 justify-center", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex min-w-0 items-center gap-1", children: steps.map((step, i) => {
+        const current = step.state === "current";
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex min-w-0 items-center gap-1", children: [
+          i ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-px w-3 shrink bg-border @min-[560px]/trail:w-8" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !onPick,
+              "aria-current": current ? "step" : void 0,
+              "aria-label": `${step.label} \xB7 ${step.state === "todo" ? "not started" : step.state}`,
+              title: step.label,
+              onClick: () => onPick?.(step.id),
+              className: cn(
+                "inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-control px-2 text-muted-foreground",
+                "enabled:hover:bg-accent enabled:hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default",
+                current && "bg-secondary text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { tone: TONE7[step.state] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", !current && "@max-[559px]/trail:sr-only"), children: step.label })
+              ]
+            }
+          )
+        ] }, step.id);
+      }) })
+    }
+  )
+);
+StageTrail.displayName = "StageTrail";
 function TabbedPanel({
   tabs,
   defaultTab,
@@ -8785,6 +8838,29 @@ var Gantt = React25__namespace.forwardRef(
   }
 );
 Gantt.displayName = "Gantt";
+var HeaderTrail = React25__namespace.forwardRef(
+  ({ brand, crumbs, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 select-none px-2 text-xl font-bold", children: brand }),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4 shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex min-w-0 items-center gap-1.5 px-1.5 font-bold", children: crumbs.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex min-w-0 items-center gap-1.5", i === crumbs.length - 1 ? "shrink" : "shrink-[2]"), children: [
+      i ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "/" }) : null,
+      c.href || c.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: c.href ?? "#",
+          onClick: c.onClick ? (e) => {
+            e.preventDefault();
+            c.onClick();
+          } : void 0,
+          "aria-current": i === crumbs.length - 1 ? "page" : void 0,
+          className: "min-w-0 truncate rounded-control hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          children: c.label
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", "aria-current": i === crumbs.length - 1 ? "page" : void 0, children: c.label })
+    ] }, `${i}-${c.label}`)) })
+  ] })
+);
+HeaderTrail.displayName = "HeaderTrail";
 var TaskNode = React25__namespace.forwardRef(
   ({
     taskKey,
@@ -10330,6 +10406,7 @@ exports.FilterChip = FilterChip;
 exports.FloatingPanel = FloatingPanel;
 exports.Gantt = Gantt;
 exports.GanttDetailCard = GanttDetailCard;
+exports.HeaderTrail = HeaderTrail;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
@@ -10482,6 +10559,7 @@ exports.Skeleton = Skeleton;
 exports.SliceSummary = SliceSummary;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
+exports.StageTrail = StageTrail;
 exports.StatusDot = StatusDot;
 exports.StatusIcon = StatusIcon;
 exports.TabbedPanel = TabbedPanel;