@invergent/ui-sdk 0.0.0-stage → 2.19.1

package/dist/label.js

@@ -0,0 +1,4 @@
+export { Label } from './chunk-M677T75H.js';
+import './chunk-LZGII7SX.js';
+//# sourceMappingURL=label.js.map
+//# sourceMappingURL=label.js.map

package/dist/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"label.js"}

package/dist/lib/utils.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('../chunk-6YHDDRIM.cjs');
+
+
+
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return chunk6YHDDRIM_cjs.cn; }
+});
+//# sourceMappingURL=utils.cjs.map
+//# sourceMappingURL=utils.cjs.map

package/dist/lib/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"utils.cjs"}

package/dist/lib/utils.d.cts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.js

@@ -0,0 +1,3 @@
+export { cn } from '../chunk-LZGII7SX.js';
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"utils.js"}

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAM,eAAA,GAAkBA,0BAAA;AAAA,EACtB,0MAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,OAAA,EACE,6KAAA;AAAA,QACF,EAAA,EAAI,2KAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,MAAA,EAAQ,EAAE,IAAA,EAAM,EAAA,EAAI,OAAO,EAAA;AAAG,KAChC;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,IAAA,EAAM,SAAA,EAAW,MAAA,EAAQ,IAAA,EAAM,WAAW,iCAAA,EAAkC;AAAA,MAC9E;AAAA,QACE,IAAA,EAAM,SAAA;AAAA,QACN,MAAA,EAAQ,KAAA;AAAA,QACR,SAAA,EAAW;AAAA,OACb;AAAA,MACA,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,WAAW,6CAAA,EAA8C;AAAA,MACrF;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,MAAA,EAAQ,KAAA;AAAA,QACR,SAAA,EAAW;AAAA,OACb;AAAA,MACA,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,WAAW,sBAAA,EAAuB;AAAA,MAC9D;AAAA,QACE,IAAA,EAAM,IAAA;AAAA,QACN,MAAA,EAAQ,KAAA;AAAA,QACR,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,SAAA,EAAW,QAAQ,KAAA;AAAM;AAEtD;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,OAAA,EAAS,gCAAA;AAAA;AAAA,EAET,EAAA,EAAI,yFAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAqCA,SAAS,OAAA,CAAQ;AAAA,EACf,IAAA,EAAM,IAAA;AAAA,EACN,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,aAAA,GAAgB,KAAA;AAAA,EAChB,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,IAAA,GAAO,OAAA,GAAUC,YAAA,CAAK,IAAA,GAAO,QAAA;AACnC,EAAA,MAAM,UAAU,IAAA,KAAS,IAAA;AAGzB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAW;AAEjC,EAAA,uBACEC,eAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,UAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,QAAA;AAAA,MACZ,GAAI,OAAA,GAAU,EAAC,GAAI,EAAE,MAAM,QAAA,EAAkB;AAAA,MAC9C,YAAA,EAAY,SAAA,IAAa,OAAO,KAAA,KAAU,WAAW,KAAA,GAAQ,MAAA;AAAA,MAC7D,SAAA,EAAWC,oBAAA;AAAA,QACT,eAAA,CAAgB,EAAE,IAAA,EAAM,MAAA,EAAQ,UAAU,CAAA;AAAA,QAC1C,CAAC,OAAA,IAAW,+BAAA;AAAA,QACZ,SAAA,IAAa,+CAAA;AAAA,QACb;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAWC,cAAA,CAACJ,YAAA,CAAK,SAAA,EAAL,EAAgB,QAAA,EAAS,CAAA;AAAA,QACrC,IAAA,oBACCE,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EACd,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAAC,QAAK,SAAA,EAAW,UAAA,CAAW,IAAI,CAAA,EAAG,aAAa,IAAA,EAAM,CAAA;AAAA,UACrD,aAAA,oBACCF,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sCAAA,EACd,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,kFAAA,EAAmF,CAAA;AAAA,4BACnGA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uDAAA,EAAwD;AAAA,WAAA,EAC1E;AAAA,SAAA,EAEJ,CAAA;AAAA,QAED,CAAC,6BACAF,eAAA,CAAAG,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,UAAA,WAAA,mBACCH,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EACd,QAAA,EAAA;AAAA,4BAAAE,cAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWD,oBAAA;AAAA,kBACT,UAAA;AAAA,kBACA,SAAS,IAAA,IAAQ;AAAA,iBACnB;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BACAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wDAAA,EACb,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EACF,CAAA,mBAEAA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,yBAAA;AAAA,gBACA,SAAS,IAAA,IAAQ;AAAA,eACnB;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,IAAA,oBACCC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0DACb,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,UAID,CAAC,QAAQ,IAAA,GAAO,OAAO,UAAU,QAAA,IAAY,OAAO,UAAU,QAAA,mBAC7DA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWD,oBAAA;AAAA,gBACT,0FAAA;AAAA,gBACA,OAAA,IAAW;AAAA,eACb;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH,GAEA,KAAA;AAAA,UAED,QAAA;AAAA,UACA,OAAA,oBACCC,cAAA;AAAA,YAACE,wBAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAa,IAAA;AAAA,cACb,SAAA,EAAU,0CAAA;AAAA,cACV,WAAA,EAAa;AAAA;AAAA;AACf,SAAA,EAEF;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAMA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA+B;AAC7B,EAAA,uBACEF,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAWD,oBAAA;AAAA,QACT,0DAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAMI,gBAAA,CAAA,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAI,CAAC,KAAA,EAAO,KAAA,qBAC5CL,eAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,KAAA,GAAQ,qBACPE,cAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,WAAU,qCAAA,EAAsC,CAAA;AAAA,QAEzE;AAAA,OAAA,EAAA,EAJYG,gBAAA,CAAA,cAAA,CAAe,KAAK,CAAA,IAAK,KAAA,CAAM,OAAO,IAAA,GAAO,KAAA,CAAM,GAAA,GAAM,KAKxE,CACD;AAAA;AAAA,GACH;AAEJ","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"]}