@invergent/ui-sdk 0.0.0-stage → 2.19.0

package/dist/list-row.cjs

@@ -0,0 +1,188 @@
+'use strict';
+
+var chunk2UHRDVPT_cjs = require('./chunk-2UHRDVPT.cjs');
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var radixUi = require('radix-ui');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var listRowVariants = classVarianceAuthority.cva(
+  "group/list-row flex w-full items-center text-left font-sans no-underline transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "gap-2.5 rounded-lg px-3 py-2.25 text-sm font-medium pointer-coarse:min-h-11 pointer-coarse:gap-3 pointer-coarse:rounded-xl pointer-coarse:px-3.5 pointer-coarse:text-[15px]",
+        sm: "gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]",
+        lg: "min-h-14 gap-3 px-4 py-3 pointer-fine:min-h-0"
+      },
+      active: { true: "", false: "" }
+    },
+    compoundVariants: [
+      { size: "default", active: true, className: "bg-foreground/5 text-foreground" },
+      {
+        size: "default",
+        active: false,
+        className: "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+      },
+      { size: "sm", active: true, className: "bg-foreground/6 font-medium text-foreground" },
+      {
+        size: "sm",
+        active: false,
+        className: "font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground"
+      },
+      { size: "lg", active: true, className: "bg-foreground/[0.04]" },
+      {
+        size: "lg",
+        active: false,
+        className: "hover:bg-foreground/[0.04] active:bg-foreground/[0.04]"
+      }
+    ],
+    defaultVariants: { size: "default", active: false }
+  }
+);
+var ICON_CLASS = {
+  default: "size-4.5 pointer-coarse:size-5",
+  // Quieter than the label while idle, the row's own colour once active.
+  sm: "size-4 pointer-coarse:size-4.5 group-data-[active=false]/list-row:text-muted-foreground",
+  lg: "size-5 text-muted-foreground"
+};
+function ListRow({
+  icon: Icon,
+  label,
+  description,
+  meta,
+  badge,
+  trailing,
+  chevron = false,
+  isActive = false,
+  activityPulse = false,
+  size = "default",
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "button";
+  const isSmall = size !== "lg";
+  const { collapsed } = chunk2UHRDVPT_cjs.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Comp,
+    {
+      "data-slot": "list-row",
+      "data-size": size,
+      "data-active": isActive,
+      ...asChild ? {} : { type: "button" },
+      "aria-label": collapsed && typeof label === "string" ? label : void 0,
+      className: chunk6YHDDRIM_cjs.cn(
+        listRowVariants({ size, active: isActive }),
+        !asChild && "cursor-pointer bg-transparent",
+        collapsed && "justify-center gap-0 px-0 pointer-coarse:px-0",
+        className
+      ),
+      ...props,
+      children: [
+        asChild && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Slot.Slottable, { children }),
+        Icon && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: ICON_CLASS[size], strokeWidth: 1.75 }),
+          activityPulse && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute -top-1 -right-1 flex size-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-green-500 opacity-75" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex size-2 rounded-full bg-green-500" })
+          ] })
+        ] }),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunk6YHDDRIM_cjs.cn(
+                  "truncate",
+                  size === "lg" && "text-[15px] font-medium text-foreground"
+                ),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[12px] font-normal text-muted-foreground", children: description })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk6YHDDRIM_cjs.cn(
+                "min-w-0 flex-1 truncate",
+                size === "lg" && "text-[15px] font-medium text-foreground"
+              ),
+              children: label
+            }
+          ),
+          meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[12px] font-normal text-muted-foreground", children: meta }),
+          !badge ? null : typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunk6YHDDRIM_cjs.cn(
+                "shrink-0 rounded bg-foreground/10 px-1.5 py-px text-xs font-normal text-muted-foreground",
+                isSmall && "pointer-coarse:rounded-md pointer-coarse:px-2 pointer-coarse:py-0.5 pointer-coarse:text-[13px]"
+              ),
+              children: badge
+            }
+          ) : badge,
+          trailing,
+          chevron && /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronRight,
+            {
+              "aria-hidden": true,
+              className: "size-4 shrink-0 text-muted-foreground/60",
+              strokeWidth: 2
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ListGroup({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      "data-slot": "list-group",
+      className: chunk6YHDDRIM_cjs.cn(
+        "overflow-hidden rounded-2xl border border-border bg-card",
+        className
+      ),
+      ...props,
+      children: React__namespace.Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "ml-[52px] h-px bg-foreground/[0.06]" }),
+        child
+      ] }, React__namespace.isValidElement(child) && child.key != null ? child.key : index))
+    }
+  );
+}
+
+exports.ListGroup = ListGroup;
+exports.ListRow = ListRow;
+exports.listRowVariants = listRowVariants;
+//# sourceMappingURL=list-row.cjs.map
+//# sourceMappingURL=list-row.cjs.map

package/dist/list-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-row.tsx"],"names":["cva","Slot","useSidebar","jsxs","cn","jsx","Fragment","ChevronRight","React"],"mappings":"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","file":"list-row.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\nimport { useSidebar } from \"./sidebar\"\n\n// The Work console's list rows, in its three densities:\n//   default — the navbar row (Agents, Sessions, Skills & Tools): a rounded\n//             pill in muted text, filled faintly when hovered or active.\n//   sm      — the row under an expanded agent (Overview, Configure, Inbox):\n//             tighter, 13px, the label a step brighter than the icon.\n//   lg      — the section-index row (agent sections, Configure on a phone):\n//             a full-width row with a one-line description and a chevron,\n//             meant for a bordered list (see ListGroup).\n// Touch sizing keys off the pointer, not the width: a finger needs the 44px\n// target at any screen size.\nconst listRowVariants = cva(\n  \"group/list-row flex w-full items-center text-left font-sans no-underline transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        default:\n          \"gap-2.5 rounded-lg px-3 py-2.25 text-sm font-medium pointer-coarse:min-h-11 pointer-coarse:gap-3 pointer-coarse:rounded-xl pointer-coarse:px-3.5 pointer-coarse:text-[15px]\",\n        sm: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        lg: \"min-h-14 gap-3 px-4 py-3 pointer-fine:min-h-0\",\n      },\n      active: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { size: \"default\", active: true, className: \"bg-foreground/5 text-foreground\" },\n      {\n        size: \"default\",\n        active: false,\n        className: \"text-muted-foreground hover:bg-foreground/5 hover:text-foreground\",\n      },\n      { size: \"sm\", active: true, className: \"bg-foreground/6 font-medium text-foreground\" },\n      {\n        size: \"sm\",\n        active: false,\n        className: \"font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground\",\n      },\n      { size: \"lg\", active: true, className: \"bg-foreground/[0.04]\" },\n      {\n        size: \"lg\",\n        active: false,\n        className: \"hover:bg-foreground/[0.04] active:bg-foreground/[0.04]\",\n      },\n    ],\n    defaultVariants: { size: \"default\", active: false },\n  }\n)\n\nconst ICON_CLASS = {\n  default: \"size-4.5 pointer-coarse:size-5\",\n  // Quieter than the label while idle, the row's own colour once active.\n  sm: \"size-4 pointer-coarse:size-4.5 group-data-[active=false]/list-row:text-muted-foreground\",\n  lg: \"size-5 text-muted-foreground\",\n} as const\n\ntype ListRowProps = Omit<React.ComponentProps<\"button\">, \"children\"> & {\n  icon?: LucideIcon\n  label: React.ReactNode\n  /** One line under the label, so a list of sections is scannable. */\n  description?: React.ReactNode\n  /** Quiet text at the end of the row (a time, a size). */\n  meta?: React.ReactNode\n  /** A count at the end of the row, hidden when falsy (0 included). A string\n   *  or number gets the muted pill; pass an element (e.g. an amber `Badge`)\n   *  to draw it yourself. */\n  badge?: React.ReactNode\n  /** Anything else at the end of the row. Interactive content cannot live\n   *  inside a button: render the row as a `div` (`asChild`) to hold it. */\n  trailing?: React.ReactNode\n  /** A chevron at the end: the row drills into something. */\n  chevron?: boolean\n  isActive?: boolean\n  /** A pulsing activity dot on the icon (e.g. running workloads). */\n  activityPulse?: boolean\n  size?: \"default\" | \"sm\" | \"lg\"\n  /** Render as the single child element (a router link, an `<a>`, a `div`)\n   *  instead of a button. The row's content is placed inside it. */\n  asChild?: boolean\n  children?: React.ReactElement\n}\n\n/**\n * A single Work list entry: icon, label, optional description, and a\n * trailing count, meta text or chevron. A button by default; any link (or a\n * plain `div`) with `asChild`:\n *\n *   <ListRow asChild icon={Zap} label=\"Skills & Tools\" isActive={active}>\n *     <Link to=\"/work/skills\" />\n *   </ListRow>\n */\nfunction ListRow({\n  icon: Icon,\n  label,\n  description,\n  meta,\n  badge,\n  trailing,\n  chevron = false,\n  isActive = false,\n  activityPulse = false,\n  size = \"default\",\n  asChild = false,\n  className,\n  children,\n  ...props\n}: ListRowProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const isSmall = size !== \"lg\"\n  // In a collapsed sidebar rail the row is its icon alone, centred, and the\n  // label it no longer shows names it.\n  const { collapsed } = useSidebar()\n\n  return (\n    <Comp\n      data-slot=\"list-row\"\n      data-size={size}\n      data-active={isActive}\n      {...(asChild ? {} : { type: \"button\" as const })}\n      aria-label={collapsed && typeof label === \"string\" ? label : undefined}\n      className={cn(\n        listRowVariants({ size, active: isActive }),\n        !asChild && \"cursor-pointer bg-transparent\",\n        collapsed && \"justify-center gap-0 px-0 pointer-coarse:px-0\",\n        className\n      )}\n      {...props}\n    >\n      {asChild && <Slot.Slottable>{children}</Slot.Slottable>}\n      {Icon && (\n        <span className=\"relative flex shrink-0\">\n          <Icon className={ICON_CLASS[size]} strokeWidth={1.75} />\n          {activityPulse && (\n            <span className=\"absolute -top-1 -right-1 flex size-2\">\n              <span className=\"absolute inline-flex size-full animate-ping rounded-full bg-green-500 opacity-75\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-green-500\" />\n            </span>\n          )}\n        </span>\n      )}\n      {!collapsed && (\n        <>\n        {description ? (\n          <span className=\"flex min-w-0 flex-1 flex-col\">\n            <span\n              className={cn(\n                \"truncate\",\n                size === \"lg\" && \"text-[15px] font-medium text-foreground\"\n              )}\n            >\n              {label}\n            </span>\n            <span className=\"truncate text-[12px] font-normal text-muted-foreground\">\n              {description}\n            </span>\n          </span>\n        ) : (\n          <span\n            className={cn(\n              \"min-w-0 flex-1 truncate\",\n              size === \"lg\" && \"text-[15px] font-medium text-foreground\"\n            )}\n          >\n            {label}\n          </span>\n        )}\n        {meta && (\n          <span className=\"shrink-0 text-[12px] font-normal text-muted-foreground\">\n            {meta}\n          </span>\n        )}\n        {/* Falsy hides it: an empty string or a zero count says nothing. A\n            ternary, not &&, or a 0 would render as text. */}\n        {!badge ? null : typeof badge === \"string\" || typeof badge === \"number\" ? (\n          <span\n            className={cn(\n              \"shrink-0 rounded bg-foreground/10 px-1.5 py-px text-xs font-normal text-muted-foreground\",\n              isSmall && \"pointer-coarse:rounded-md pointer-coarse:px-2 pointer-coarse:py-0.5 pointer-coarse:text-[13px]\"\n            )}\n          >\n            {badge}\n          </span>\n        ) : (\n          badge\n        )}\n        {trailing}\n        {chevron && (\n          <ChevronRight\n            aria-hidden={true}\n            className=\"size-4 shrink-0 text-muted-foreground/60\"\n            strokeWidth={2}\n          />\n        )}\n        </>\n      )}\n    </Comp>\n  )\n}\n\n/**\n * The bordered list the `lg` rows sit in, with dividers inset past the icon\n * column. Pass the rows as children; each is wrapped in an `<li>`.\n */\nfunction ListGroup({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"list-group\"\n      className={cn(\n        \"overflow-hidden rounded-2xl border border-border bg-card\",\n        className\n      )}\n      {...props}\n    >\n      {React.Children.toArray(children).map((child, index) => (\n        <li key={React.isValidElement(child) && child.key != null ? child.key : index}>\n          {index > 0 && (\n            <div aria-hidden=\"true\" className=\"ml-[52px] h-px bg-foreground/[0.06]\" />\n          )}\n          {child}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nexport { ListRow, ListGroup, listRowVariants }\n"]}

package/dist/list-row.d.cts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+declare const listRowVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ListRowProps = Omit<React.ComponentProps<"button">, "children"> & {
+    icon?: LucideIcon;
+    label: React.ReactNode;
+    /** One line under the label, so a list of sections is scannable. */
+    description?: React.ReactNode;
+    /** Quiet text at the end of the row (a time, a size). */
+    meta?: React.ReactNode;
+    /** A count at the end of the row, hidden when falsy (0 included). A string
+     *  or number gets the muted pill; pass an element (e.g. an amber `Badge`)
+     *  to draw it yourself. */
+    badge?: React.ReactNode;
+    /** Anything else at the end of the row. Interactive content cannot live
+     *  inside a button: render the row as a `div` (`asChild`) to hold it. */
+    trailing?: React.ReactNode;
+    /** A chevron at the end: the row drills into something. */
+    chevron?: boolean;
+    isActive?: boolean;
+    /** A pulsing activity dot on the icon (e.g. running workloads). */
+    activityPulse?: boolean;
+    size?: "default" | "sm" | "lg";
+    /** Render as the single child element (a router link, an `<a>`, a `div`)
+     *  instead of a button. The row's content is placed inside it. */
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+/**
+ * A single Work list entry: icon, label, optional description, and a
+ * trailing count, meta text or chevron. A button by default; any link (or a
+ * plain `div`) with `asChild`:
+ *
+ *   <ListRow asChild icon={Zap} label="Skills & Tools" isActive={active}>
+ *     <Link to="/work/skills" />
+ *   </ListRow>
+ */
+declare function ListRow({ icon: Icon, label, description, meta, badge, trailing, chevron, isActive, activityPulse, size, asChild, className, children, ...props }: ListRowProps): react_jsx_runtime.JSX.Element;
+/**
+ * The bordered list the `lg` rows sit in, with dividers inset past the icon
+ * column. Pass the rows as children; each is wrapped in an `<li>`.
+ */
+declare function ListGroup({ className, children, ...props }: React.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+
+export { ListGroup, ListRow, listRowVariants };

package/dist/list-row.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+declare const listRowVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    active?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ListRowProps = Omit<React.ComponentProps<"button">, "children"> & {
+    icon?: LucideIcon;
+    label: React.ReactNode;
+    /** One line under the label, so a list of sections is scannable. */
+    description?: React.ReactNode;
+    /** Quiet text at the end of the row (a time, a size). */
+    meta?: React.ReactNode;
+    /** A count at the end of the row, hidden when falsy (0 included). A string
+     *  or number gets the muted pill; pass an element (e.g. an amber `Badge`)
+     *  to draw it yourself. */
+    badge?: React.ReactNode;
+    /** Anything else at the end of the row. Interactive content cannot live
+     *  inside a button: render the row as a `div` (`asChild`) to hold it. */
+    trailing?: React.ReactNode;
+    /** A chevron at the end: the row drills into something. */
+    chevron?: boolean;
+    isActive?: boolean;
+    /** A pulsing activity dot on the icon (e.g. running workloads). */
+    activityPulse?: boolean;
+    size?: "default" | "sm" | "lg";
+    /** Render as the single child element (a router link, an `<a>`, a `div`)
+     *  instead of a button. The row's content is placed inside it. */
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+/**
+ * A single Work list entry: icon, label, optional description, and a
+ * trailing count, meta text or chevron. A button by default; any link (or a
+ * plain `div`) with `asChild`:
+ *
+ *   <ListRow asChild icon={Zap} label="Skills & Tools" isActive={active}>
+ *     <Link to="/work/skills" />
+ *   </ListRow>
+ */
+declare function ListRow({ icon: Icon, label, description, meta, badge, trailing, chevron, isActive, activityPulse, size, asChild, className, children, ...props }: ListRowProps): react_jsx_runtime.JSX.Element;
+/**
+ * The bordered list the `lg` rows sit in, with dividers inset past the icon
+ * column. Pass the rows as children; each is wrapped in an `<li>`.
+ */
+declare function ListGroup({ className, children, ...props }: React.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+
+export { ListGroup, ListRow, listRowVariants };

package/dist/list-row.js

@@ -0,0 +1,164 @@
+import { useSidebar } from './chunk-L73QIINW.js';
+import { cn } from './chunk-LZGII7SX.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var listRowVariants = cva(
+  "group/list-row flex w-full items-center text-left font-sans no-underline transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "gap-2.5 rounded-lg px-3 py-2.25 text-sm font-medium pointer-coarse:min-h-11 pointer-coarse:gap-3 pointer-coarse:rounded-xl pointer-coarse:px-3.5 pointer-coarse:text-[15px]",
+        sm: "gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]",
+        lg: "min-h-14 gap-3 px-4 py-3 pointer-fine:min-h-0"
+      },
+      active: { true: "", false: "" }
+    },
+    compoundVariants: [
+      { size: "default", active: true, className: "bg-foreground/5 text-foreground" },
+      {
+        size: "default",
+        active: false,
+        className: "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+      },
+      { size: "sm", active: true, className: "bg-foreground/6 font-medium text-foreground" },
+      {
+        size: "sm",
+        active: false,
+        className: "font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground"
+      },
+      { size: "lg", active: true, className: "bg-foreground/[0.04]" },
+      {
+        size: "lg",
+        active: false,
+        className: "hover:bg-foreground/[0.04] active:bg-foreground/[0.04]"
+      }
+    ],
+    defaultVariants: { size: "default", active: false }
+  }
+);
+var ICON_CLASS = {
+  default: "size-4.5 pointer-coarse:size-5",
+  // Quieter than the label while idle, the row's own colour once active.
+  sm: "size-4 pointer-coarse:size-4.5 group-data-[active=false]/list-row:text-muted-foreground",
+  lg: "size-5 text-muted-foreground"
+};
+function ListRow({
+  icon: Icon,
+  label,
+  description,
+  meta,
+  badge,
+  trailing,
+  chevron = false,
+  isActive = false,
+  activityPulse = false,
+  size = "default",
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const isSmall = size !== "lg";
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      "data-slot": "list-row",
+      "data-size": size,
+      "data-active": isActive,
+      ...asChild ? {} : { type: "button" },
+      "aria-label": collapsed && typeof label === "string" ? label : void 0,
+      className: cn(
+        listRowVariants({ size, active: isActive }),
+        !asChild && "cursor-pointer bg-transparent",
+        collapsed && "justify-center gap-0 px-0 pointer-coarse:px-0",
+        className
+      ),
+      ...props,
+      children: [
+        asChild && /* @__PURE__ */ jsx(Slot.Slottable, { children }),
+        Icon && /* @__PURE__ */ jsxs("span", { className: "relative flex shrink-0", children: [
+          /* @__PURE__ */ jsx(Icon, { className: ICON_CLASS[size], strokeWidth: 1.75 }),
+          activityPulse && /* @__PURE__ */ jsxs("span", { className: "absolute -top-1 -right-1 flex size-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-green-500 opacity-75" }),
+            /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-green-500" })
+          ] })
+        ] }),
+        !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          description ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate",
+                  size === "lg" && "text-[15px] font-medium text-foreground"
+                ),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-normal text-muted-foreground", children: description })
+          ] }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1 truncate",
+                size === "lg" && "text-[15px] font-medium text-foreground"
+              ),
+              children: label
+            }
+          ),
+          meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[12px] font-normal text-muted-foreground", children: meta }),
+          !badge ? null : typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "shrink-0 rounded bg-foreground/10 px-1.5 py-px text-xs font-normal text-muted-foreground",
+                isSmall && "pointer-coarse:rounded-md pointer-coarse:px-2 pointer-coarse:py-0.5 pointer-coarse:text-[13px]"
+              ),
+              children: badge
+            }
+          ) : badge,
+          trailing,
+          chevron && /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": true,
+              className: "size-4 shrink-0 text-muted-foreground/60",
+              strokeWidth: 2
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ListGroup({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "list-group",
+      className: cn(
+        "overflow-hidden rounded-2xl border border-border bg-card",
+        className
+      ),
+      ...props,
+      children: React.Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs("li", { children: [
+        index > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "ml-[52px] h-px bg-foreground/[0.06]" }),
+        child
+      ] }, React.isValidElement(child) && child.key != null ? child.key : index))
+    }
+  );
+}
+
+export { ListGroup, ListRow, listRowVariants };
+//# sourceMappingURL=list-row.js.map
+//# sourceMappingURL=list-row.js.map

package/dist/list-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-row.tsx"],"names":[],"mappings":"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","file":"list-row.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\nimport { useSidebar } from \"./sidebar\"\n\n// The Work console's list rows, in its three densities:\n//   default — the navbar row (Agents, Sessions, Skills & Tools): a rounded\n//             pill in muted text, filled faintly when hovered or active.\n//   sm      — the row under an expanded agent (Overview, Configure, Inbox):\n//             tighter, 13px, the label a step brighter than the icon.\n//   lg      — the section-index row (agent sections, Configure on a phone):\n//             a full-width row with a one-line description and a chevron,\n//             meant for a bordered list (see ListGroup).\n// Touch sizing keys off the pointer, not the width: a finger needs the 44px\n// target at any screen size.\nconst listRowVariants = cva(\n  \"group/list-row flex w-full items-center text-left font-sans no-underline transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        default:\n          \"gap-2.5 rounded-lg px-3 py-2.25 text-sm font-medium pointer-coarse:min-h-11 pointer-coarse:gap-3 pointer-coarse:rounded-xl pointer-coarse:px-3.5 pointer-coarse:text-[15px]\",\n        sm: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        lg: \"min-h-14 gap-3 px-4 py-3 pointer-fine:min-h-0\",\n      },\n      active: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { size: \"default\", active: true, className: \"bg-foreground/5 text-foreground\" },\n      {\n        size: \"default\",\n        active: false,\n        className: \"text-muted-foreground hover:bg-foreground/5 hover:text-foreground\",\n      },\n      { size: \"sm\", active: true, className: \"bg-foreground/6 font-medium text-foreground\" },\n      {\n        size: \"sm\",\n        active: false,\n        className: \"font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground\",\n      },\n      { size: \"lg\", active: true, className: \"bg-foreground/[0.04]\" },\n      {\n        size: \"lg\",\n        active: false,\n        className: \"hover:bg-foreground/[0.04] active:bg-foreground/[0.04]\",\n      },\n    ],\n    defaultVariants: { size: \"default\", active: false },\n  }\n)\n\nconst ICON_CLASS = {\n  default: \"size-4.5 pointer-coarse:size-5\",\n  // Quieter than the label while idle, the row's own colour once active.\n  sm: \"size-4 pointer-coarse:size-4.5 group-data-[active=false]/list-row:text-muted-foreground\",\n  lg: \"size-5 text-muted-foreground\",\n} as const\n\ntype ListRowProps = Omit<React.ComponentProps<\"button\">, \"children\"> & {\n  icon?: LucideIcon\n  label: React.ReactNode\n  /** One line under the label, so a list of sections is scannable. */\n  description?: React.ReactNode\n  /** Quiet text at the end of the row (a time, a size). */\n  meta?: React.ReactNode\n  /** A count at the end of the row, hidden when falsy (0 included). A string\n   *  or number gets the muted pill; pass an element (e.g. an amber `Badge`)\n   *  to draw it yourself. */\n  badge?: React.ReactNode\n  /** Anything else at the end of the row. Interactive content cannot live\n   *  inside a button: render the row as a `div` (`asChild`) to hold it. */\n  trailing?: React.ReactNode\n  /** A chevron at the end: the row drills into something. */\n  chevron?: boolean\n  isActive?: boolean\n  /** A pulsing activity dot on the icon (e.g. running workloads). */\n  activityPulse?: boolean\n  size?: \"default\" | \"sm\" | \"lg\"\n  /** Render as the single child element (a router link, an `<a>`, a `div`)\n   *  instead of a button. The row's content is placed inside it. */\n  asChild?: boolean\n  children?: React.ReactElement\n}\n\n/**\n * A single Work list entry: icon, label, optional description, and a\n * trailing count, meta text or chevron. A button by default; any link (or a\n * plain `div`) with `asChild`:\n *\n *   <ListRow asChild icon={Zap} label=\"Skills & Tools\" isActive={active}>\n *     <Link to=\"/work/skills\" />\n *   </ListRow>\n */\nfunction ListRow({\n  icon: Icon,\n  label,\n  description,\n  meta,\n  badge,\n  trailing,\n  chevron = false,\n  isActive = false,\n  activityPulse = false,\n  size = \"default\",\n  asChild = false,\n  className,\n  children,\n  ...props\n}: ListRowProps) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const isSmall = size !== \"lg\"\n  // In a collapsed sidebar rail the row is its icon alone, centred, and the\n  // label it no longer shows names it.\n  const { collapsed } = useSidebar()\n\n  return (\n    <Comp\n      data-slot=\"list-row\"\n      data-size={size}\n      data-active={isActive}\n      {...(asChild ? {} : { type: \"button\" as const })}\n      aria-label={collapsed && typeof label === \"string\" ? label : undefined}\n      className={cn(\n        listRowVariants({ size, active: isActive }),\n        !asChild && \"cursor-pointer bg-transparent\",\n        collapsed && \"justify-center gap-0 px-0 pointer-coarse:px-0\",\n        className\n      )}\n      {...props}\n    >\n      {asChild && <Slot.Slottable>{children}</Slot.Slottable>}\n      {Icon && (\n        <span className=\"relative flex shrink-0\">\n          <Icon className={ICON_CLASS[size]} strokeWidth={1.75} />\n          {activityPulse && (\n            <span className=\"absolute -top-1 -right-1 flex size-2\">\n              <span className=\"absolute inline-flex size-full animate-ping rounded-full bg-green-500 opacity-75\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-green-500\" />\n            </span>\n          )}\n        </span>\n      )}\n      {!collapsed && (\n        <>\n        {description ? (\n          <span className=\"flex min-w-0 flex-1 flex-col\">\n            <span\n              className={cn(\n                \"truncate\",\n                size === \"lg\" && \"text-[15px] font-medium text-foreground\"\n              )}\n            >\n              {label}\n            </span>\n            <span className=\"truncate text-[12px] font-normal text-muted-foreground\">\n              {description}\n            </span>\n          </span>\n        ) : (\n          <span\n            className={cn(\n              \"min-w-0 flex-1 truncate\",\n              size === \"lg\" && \"text-[15px] font-medium text-foreground\"\n            )}\n          >\n            {label}\n          </span>\n        )}\n        {meta && (\n          <span className=\"shrink-0 text-[12px] font-normal text-muted-foreground\">\n            {meta}\n          </span>\n        )}\n        {/* Falsy hides it: an empty string or a zero count says nothing. A\n            ternary, not &&, or a 0 would render as text. */}\n        {!badge ? null : typeof badge === \"string\" || typeof badge === \"number\" ? (\n          <span\n            className={cn(\n              \"shrink-0 rounded bg-foreground/10 px-1.5 py-px text-xs font-normal text-muted-foreground\",\n              isSmall && \"pointer-coarse:rounded-md pointer-coarse:px-2 pointer-coarse:py-0.5 pointer-coarse:text-[13px]\"\n            )}\n          >\n            {badge}\n          </span>\n        ) : (\n          badge\n        )}\n        {trailing}\n        {chevron && (\n          <ChevronRight\n            aria-hidden={true}\n            className=\"size-4 shrink-0 text-muted-foreground/60\"\n            strokeWidth={2}\n          />\n        )}\n        </>\n      )}\n    </Comp>\n  )\n}\n\n/**\n * The bordered list the `lg` rows sit in, with dividers inset past the icon\n * column. Pass the rows as children; each is wrapped in an `<li>`.\n */\nfunction ListGroup({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"list-group\"\n      className={cn(\n        \"overflow-hidden rounded-2xl border border-border bg-card\",\n        className\n      )}\n      {...props}\n    >\n      {React.Children.toArray(children).map((child, index) => (\n        <li key={React.isValidElement(child) && child.key != null ? child.key : index}>\n          {index > 0 && (\n            <div aria-hidden=\"true\" className=\"ml-[52px] h-px bg-foreground/[0.06]\" />\n          )}\n          {child}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\nexport { ListRow, ListGroup, listRowVariants }\n"]}

package/dist/pill-tabs.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RING_MASK = {
+  WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+  WebkitMaskComposite: "xor",
+  maskComposite: "exclude"
+};
+function PillTabs({
+  tabs,
+  activeId,
+  onSelect,
+  label = "Sections",
+  flush = false
+}) {
+  const activeRef = react.useRef(null);
+  const [scrolled, setScrolled] = react.useState(false);
+  react.useEffect(() => {
+    activeRef.current?.scrollIntoView({
+      behavior: "smooth",
+      inline: "center",
+      block: "nearest"
+    });
+  }, [activeId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "pill-tabs", className: "relative shrink-0 border-b border-line", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": label,
+        onScroll: (e) => setScrolled(e.currentTarget.scrollLeft > 4),
+        className: chunk6YHDDRIM_cjs.cn(
+          "no-scrollbar flex snap-x snap-proximity gap-1.5 overflow-x-auto py-2 md:py-2.5",
+          !flush && "px-4 md:px-7"
+        ),
+        children: tabs.map((tab) => {
+          const isActive = tab.id === activeId;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: isActive ? activeRef : void 0,
+              type: "button",
+              role: "tab",
+              "data-slot": "pill-tabs-tab",
+              "aria-selected": isActive,
+              "data-onboarding": tab.onboarding,
+              onClick: () => onSelect(tab.id),
+              className: chunk6YHDDRIM_cjs.cn(
+                "relative flex min-h-11 shrink-0 snap-center items-center whitespace-nowrap rounded-[10px] px-3.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-fine:min-h-0 md:px-3 md:py-1.5",
+                isActive ? "bg-surface text-foreground" : "text-muted-foreground active:bg-surface/60 md:hover:bg-surface/60 md:hover:text-foreground"
+              ),
+              children: [
+                isActive && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "pointer-events-none absolute inset-0 rounded-[10px] blur-[2px]",
+                      style: {
+                        padding: "2px",
+                        background: "linear-gradient(to top, rgba(245,158,11,0.75) 10%, rgba(245,158,11,0) 40%)",
+                        ...RING_MASK
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "pointer-events-none absolute inset-0 rounded-[10px]",
+                      style: {
+                        padding: "1px",
+                        background: "linear-gradient(to top, rgba(245,158,11,1) 10%, rgba(245,158,11,0) 40%)",
+                        ...RING_MASK
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative", children: tab.label })
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    ),
+    scrolled && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent md:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent md:hidden"
+      }
+    )
+  ] });
+}
+
+exports.PillTabs = PillTabs;
+//# sourceMappingURL=pill-tabs.cjs.map
+//# sourceMappingURL=pill-tabs.cjs.map

package/dist/pill-tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pill-tabs.tsx"],"names":["useRef","useState","useEffect","jsxs","jsx","cn","Fragment"],"mappings":"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","file":"pill-tabs.cjs","sourcesContent":["// Copyright (c) 2026, Invergent SA, developed by Flavius Burca\n// SPDX-License-Identifier: AGPL-3.0-only\n//\nimport { cn } from \"./lib/utils\";\nimport { type CSSProperties, useEffect, useRef, useState } from \"react\";\n\n// CSS mask that keeps only the border ring of a box: a gradient set as the\n// element's background then fills just the border (the interior is masked out).\n// Pair with a `padding` equal to the desired border thickness.\nconst RING_MASK: CSSProperties = {\n  WebkitMask:\n    \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n  WebkitMaskComposite: \"xor\",\n  maskComposite: \"exclude\",\n};\n\nexport interface PillTab<T extends string> {\n  id: T;\n  label: string;\n  /** Getting-started spotlight anchor rendered as ``data-onboarding``. */\n  onboarding?: string;\n}\n\n// The product's horizontal tab bar (Figma \"tabBar\"): the inner header on every\n// detail page that has sub-sections — agent Configure, models, training runs,\n// datasets, knowledge bases. Active tab gets a subtle surface fill, foreground\n// text and an amber border-glow; inactive tabs are muted.\n//\n// `tabs` draws the same pills over Radix Tabs (with panels); this one is a\n// bare strip for a page that swaps its own content by id.\n//\n// A dozen tabs never fit a phone, so the strip scrolls horizontally there. Two\n// things make that usable: the active tab scrolls itself into view (a\n// deep-linked `?tab=monetize` would otherwise land off-screen with nothing to\n// hint it exists), and a fade on the trailing edge advertises the overflow.\nexport function PillTabs<T extends string>({\n  tabs,\n  activeId,\n  onSelect,\n  label = \"Sections\",\n  flush = false,\n}: {\n  tabs: readonly PillTab<T>[];\n  activeId: T;\n  onSelect: (id: T) => void;\n  /** Names the tablist for screen readers. */\n  label?: string;\n  /** Drop the horizontal padding.\n   *\n   * The default gutter is for a full-bleed page, where this strip spans the\n   * viewport and supplies its own inset. Inside a container that already pads\n   * — a detail view nested in a padded page — that gutter indents the tabs\n   * relative to everything above and below them. */\n  flush?: boolean;\n}) {\n  const activeRef = useRef<HTMLButtonElement | null>(null);\n  // Scrolled past the first tab: a matching fade on the leading edge says\n  // there is more that way, instead of a word cut in half.\n  const [scrolled, setScrolled] = useState(false);\n\n  useEffect(() => {\n    activeRef.current?.scrollIntoView({\n      behavior: \"smooth\",\n      inline: \"center\",\n      block: \"nearest\",\n    });\n  }, [activeId]);\n\n  return (\n    <div data-slot=\"pill-tabs\" className=\"relative shrink-0 border-b border-line\">\n      <div\n        role=\"tablist\"\n        aria-label={label}\n        onScroll={(e) => setScrolled(e.currentTarget.scrollLeft > 4)}\n        className={cn(\n          \"no-scrollbar flex snap-x snap-proximity gap-1.5 overflow-x-auto py-2 md:py-2.5\",\n          !flush && \"px-4 md:px-7\",\n        )}\n      >\n        {tabs.map((tab) => {\n          const isActive = tab.id === activeId;\n          return (\n            <button\n              key={tab.id}\n              ref={isActive ? activeRef : undefined}\n              type=\"button\"\n              role=\"tab\"\n              data-slot=\"pill-tabs-tab\"\n              aria-selected={isActive}\n              data-onboarding={tab.onboarding}\n              onClick={() => onSelect(tab.id)}\n              className={cn(\n                \"relative flex min-h-11 shrink-0 snap-center items-center whitespace-nowrap rounded-[10px] px-3.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-fine:min-h-0 md:px-3 md:py-1.5\",\n                isActive\n                  ? \"bg-surface text-foreground\"\n                  : \"text-muted-foreground active:bg-surface/60 md:hover:bg-surface/60 md:hover:text-foreground\",\n              )}\n            >\n              {/* Amber border-glow: bright along the bottom edge, fading upward\n                  along the rounded corners. The blurred copy adds the bloom. */}\n              {isActive && (\n                <>\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute inset-0 rounded-[10px] blur-[2px]\"\n                    style={{\n                      padding: \"2px\",\n                      background:\n                        \"linear-gradient(to top, rgba(245,158,11,0.75) 10%, rgba(245,158,11,0) 40%)\",\n                      ...RING_MASK,\n                    }}\n                  />\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute inset-0 rounded-[10px]\"\n                    style={{\n                      padding: \"1px\",\n                      background:\n                        \"linear-gradient(to top, rgba(245,158,11,1) 10%, rgba(245,158,11,0) 40%)\",\n                      ...RING_MASK,\n                    }}\n                  />\n                </>\n              )}\n              <span className=\"relative\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </div>\n      {/* Overflow hints. Decorative and non-interactive, so taps still reach\n          the tab underneath. */}\n      {scrolled && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent md:hidden\"\n        />\n      )}\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent md:hidden\"\n      />\n    </div>\n  );\n}\n"]}