@tensor_1/react 2.1.0 → 2.2.0

package/dist/components/DescriptionList.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * Key-value description list — the `uix-dl` two-column grid (label / value).
+ * The house body primitive for detail surfaces: the side-peek drawer, the
+ * record detail header, summary cards.
+ *
+ * UIx owns the LOOK + this controlled contract; the consumer owns the data —
+ * WHICH fields to show and how to format each value (a raw `sev_3` enum or an
+ * assignee UUID is the app's job to resolve into "SEV 3" / a display name
+ * before it reaches `description`). So in a Tensor peek surface:
+ *
+ *   <DescriptionList items={[
+ *     { term: 'State',    description: <StatusPill tone="neutral">Closed</StatusPill> },
+ *     { term: 'Severity', description: formatSeverity(row.severity) }, // app formats
+ *     { term: 'Assignee', description: assigneeName ?? <em>Unassigned</em> },
+ *   ]} />
+ *
+ * Use `items` for data-driven lists (the common case) or the `DescriptionItem`
+ * compound child for hand-authored content. Both render `<dt>`/`<dd>` pairs as
+ * direct children of the grid `<dl>`, so they align into the same columns.
+ */
+interface DescriptionListItem {
+    /** Stable identity for the row; falls back to the list index when omitted. */
+    id?: string;
+    term: ReactNode;
+    description: ReactNode;
+}
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    items?: DescriptionListItem[];
+    children?: ReactNode;
+}
+declare function DescriptionList({ items, children, className, ...props }: DescriptionListProps): react.JSX.Element;
+interface DescriptionItemProps {
+    term: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * One hand-authored row. Renders a `<dt>`/`<dd>` fragment so the pair lands as
+ * direct grid children of the enclosing `<DescriptionList>` (never wrap it in
+ * an element — that breaks the two-column alignment).
+ */
+declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
+
+export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps };

package/dist/components/DescriptionList.js

@@ -0,0 +1,22 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
+import { cx } from "../cx.js";
+function DescriptionList({ items, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("dl", { className: cx("uix-dl", className), ...props, children: [
+    items?.map((item, i) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx("dt", { children: item.term }),
+      /* @__PURE__ */ jsx("dd", { children: item.description })
+    ] }, item.id ?? i)),
+    children
+  ] });
+}
+function DescriptionItem({ term, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("dt", { children: term }),
+    /* @__PURE__ */ jsx("dd", { children })
+  ] });
+}
+export {
+  DescriptionItem,
+  DescriptionList
+};

package/dist/index.cjs

@@ -33,6 +33,8 @@ __export(src_exports, {
   CommandPalette: () => CommandPalette,
   Comment: () => Comment,
   Comments: () => Comments,
+  DescriptionItem: () => DescriptionItem,
+  DescriptionList: () => DescriptionList,
   DetailLayout: () => DetailLayout,
   Drawer: () => Drawer,
   EmptyState: () => EmptyState,
@@ -401,17 +403,36 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
   ] });
 }
 
-// src/components/Tabs.tsx
+// src/components/DescriptionList.tsx
 var import_react9 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var TabsCtx = (0, import_react9.createContext)({});
+function DescriptionList({ items, children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("dl", { className: cx("uix-dl", className), ...props, children: [
+    items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dt", { children: item.term }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dd", { children: item.description })
+    ] }, item.id ?? i)),
+    children
+  ] });
+}
+function DescriptionItem({ term, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dt", { children: term }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dd", { children })
+  ] });
+}
+
+// src/components/Tabs.tsx
+var import_react10 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TabsCtx = (0, import_react10.createContext)({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
-  const ctx = (0, import_react9.useContext)(TabsCtx);
+  const ctx = (0, import_react10.useContext)(TabsCtx);
   const selected = ctx.value === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       role: "tab",
@@ -429,113 +450,113 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
 }
 
 // src/components/AppShell.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function AppShell({ collapsed, sidebar, topbar, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx("uix-shell", className), "data-collapsed": collapsed || void 0, ...props, children: [
-    sidebar && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
-    topbar && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("main", { className: "uix-shell__main", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cx("uix-shell", className), "data-collapsed": collapsed || void 0, ...props, children: [
+    sidebar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
+    topbar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("main", { className: "uix-shell__main", children })
   ] });
 }
 
 // src/components/Sidebar.tsx
-var import_react10 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var import_react11 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("nav", { className: cx("uix-sidebar", className), "data-collapsed": collapsed || void 0, ...props, children: [
-    (brand != null || onToggle) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uix-sidebar__head", children: [
-      brand && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-sidebar__brand", children: brand }),
-      onToggle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", children: toggleIcon ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "3", y: "4", width: "12", height: "1.5", rx: ".75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "3", y: "8.25", width: "8", height: "1.5", rx: ".75" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { x: "3", y: "12.5", width: "12", height: "1.5", rx: ".75" })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("nav", { className: cx("uix-sidebar", className), "data-collapsed": collapsed || void 0, ...props, children: [
+    (brand != null || onToggle) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-sidebar__head", children: [
+      brand && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-sidebar__brand", children: brand }),
+      onToggle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", children: toggleIcon ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "4", width: "12", height: "1.5", rx: ".75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "8.25", width: "8", height: "1.5", rx: ".75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "12.5", width: "12", height: "1.5", rx: ".75" })
       ] }) })
     ] }),
     children
   ] });
 }
 function SidebarSection({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-sidebar__eyebrow", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-sidebar__eyebrow", children: label }),
     children
   ] });
 }
 function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...props }) {
   if (Tag === "button") {
     const { href: _href, ...btnProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
       {
         className: cx("uix-navitem", className),
         "aria-current": active ? "page" : void 0,
         ...btnProps,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__label", children }),
-          badge != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__badge", children: badge })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }),
+          badge != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__badge", children: badge })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "a",
     {
       className: cx("uix-navitem", className),
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__label", children }),
-        badge != null && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__badge", children: badge })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }),
+        badge != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__badge", children: badge })
       ]
     }
   );
 }
 function NavGroup({ icon, label, children, defaultExpanded = true }) {
-  const [expanded, setExpanded] = (0, import_react10.useState)(defaultExpanded);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uix-navgroup", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  const [expanded, setExpanded] = (0, import_react11.useState)(defaultExpanded);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-navgroup", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
       {
         className: "uix-navitem uix-navgroup__trigger",
         "aria-expanded": expanded,
         onClick: () => setExpanded((v) => !v),
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronIcon, {})
+          icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChevronIcon, {})
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-navgroup__panel", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-navgroup__panel", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children }) })
   ] });
 }
 function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
   const cls = cx("uix-navitem uix-subitem", className);
   if (Tag === "button") {
     const { href: _href, ...btnProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__label", children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "uix-navitem__label", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }) });
 }
 
 // src/components/Alert.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-alert__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-alert__title", children: title }),
-      children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-alert__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__title", children: title }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__body", children })
     ] })
   ] });
 }
 
 // src/components/Spinner.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Spinner({ size = "md", accent, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "span",
     {
       className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
@@ -547,9 +568,9 @@ function Spinner({ size = "md", accent, className, ...props }) {
 }
 
 // src/components/Toast.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
@@ -558,24 +579,24 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
       "aria-live": "polite",
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uix-toast__icon", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "uix-toast__body", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uix-toast__title", children: title }),
-          message && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uix-toast__msg", children: message })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "uix-toast__body", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__title", children: title }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
       ]
     }
   );
 }
 function Toaster({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
 }
 
 // src/components/Table.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TableWrap({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("uix-table-wrap", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx("uix-table-wrap", className), ...props, children });
 }
 function Table({
   density = "standard",
@@ -587,7 +608,7 @@ function Table({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "table",
     {
       className: cx("uix-table", !zebra && "uix-table--no-zebra", pinnedCol && "uix-table--pinned-col", className),
@@ -600,7 +621,7 @@ function Table({
   );
 }
 function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "th",
     {
       className,
@@ -613,10 +634,10 @@ function Th({ sortable, sortDirection, onSort, className, children, onClick, ...
   );
 }
 function Td({ pinned, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
 }
 function Tr({ selected, pinned, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "tr",
     {
       className,
@@ -629,7 +650,7 @@ function Tr({ selected, pinned, className, children, ...props }) {
 }
 
 // src/components/Pagination.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function getPageNumbers(page, total) {
   if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
   const pages = [1];
@@ -643,8 +664,8 @@ function getPageNumbers(page, total) {
 }
 function Pagination({ page, pageCount, onChange, className, ...props }) {
   const pages = getPageNumbers(page, pageCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         className: "uix-pagination__btn",
@@ -655,7 +676,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
       }
     ),
     pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "button",
         {
           className: "uix-pagination__btn",
@@ -666,7 +687,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
         p
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         className: "uix-pagination__btn",
@@ -680,15 +701,15 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
 }
 
 // src/components/StatusPill.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function StatusPill({ tone = "neutral", treatment = "filled", dot, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "span",
     {
       className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", className),
       ...props,
       children: [
-        dot && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
+        dot && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
         children
       ]
     }
@@ -696,10 +717,10 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
 }
 
 // src/components/Progress.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
   const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       role: "progressbar",
@@ -708,54 +729,54 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
       "aria-valuenow": indeterminate ? void 0 : value,
       className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
     }
   );
 }
 
 // src/components/Stat.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Stat({ label, value, icon, meta, trend, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "uix-stat__label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uix-stat__label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: label }),
       icon
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "uix-stat__value", children: value }),
-    (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "uix-stat__meta", children: [
-      trend != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "uix-stat__value", children: value }),
+    (meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uix-stat__meta", children: [
+      trend != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
       meta
     ] })
   ] });
 }
 
 // src/components/Tooltip.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Tooltip({ label, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "data-uix-tip": label, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "data-uix-tip": label, ...props, children });
 }
 
 // src/components/States.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function EmptyState({ icon, title, children, action, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-empty__icon", children: icon }),
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-empty__title", children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__icon", children: icon }),
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__title", children: title }),
     children,
     action
   ] });
 }
 function ErrorState({ icon, title, detail, action, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-empty__title", children: title }),
-    detail != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { children: detail }),
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__title", children: title }),
+    detail != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: detail }),
     action
   ] });
 }
 function Skeleton({ variant = "block", width, height, className, style, ...props }) {
   const dims = { width, height, ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       className: cx(
@@ -770,52 +791,52 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
   );
 }
 function LoadingState({ rows = 3, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
 }
 
 // src/components/Label.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Label({ color, dot, children, className, style, ...props }) {
   const merged = color ? { "--label-color": color, ...style } : style;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
     children
   ] });
 }
 
 // src/components/Avatar.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
-    src ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-avatar__status" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
+    src ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt: alt ?? "" }) : children,
+    status && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-avatar__status" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
 }
 function UserChip({ avatar, name, sub, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
     avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
-      name != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-user-chip__name", children: name }),
-      sub != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
+      name != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-user-chip__name", children: name }),
+      sub != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
     ] }),
     children
   ] });
 }
 
 // src/components/Comments.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Comments({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cx("uix-comments", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-comments", className), ...props, children });
 }
 function Comment({ avatar, author, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
-    avatar ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "uix-comment__body", children: [
-      (author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "uix-comment__meta", children: [
-        author != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-comment__author", children: author }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
+    avatar ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-comment__body", children: [
+      (author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-comment__meta", children: [
+        author != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-comment__author", children: author }),
         author != null && meta != null ? " \xB7 " : null,
         meta
       ] }),
@@ -825,95 +846,95 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
 }
 
 // src/components/Timeline.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-timeline__rail", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-timeline__node" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-timeline__line" })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "uix-timeline__rail", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-timeline__node" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-timeline__line" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-timeline__body", children: [
-      meta != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-timeline__meta", children: meta }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "uix-timeline__body", children: [
+      meta != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uix-timeline__meta", children: meta }),
       children
     ] })
   ] });
 }
 
 // src/components/Prose.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Prose({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cx("uix-prose", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("uix-prose", className), ...props, children });
 }
 function Note({ tone, icon, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
-    icon != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uix-note__icon", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uix-note__body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uix-note__icon", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uix-note__body", children })
   ] });
 }
 
 // src/components/Popover.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Popover({ popover = "auto", children, className, ...props }) {
   const popoverAttr = { popover };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 
 // src/components/CommandPalette.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function CommandPalette({ inputProps, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "uix-cmdk__list", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-cmdk__list", children })
   ] });
 }
 function CommandGroup({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "uix-cmdk__group", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-cmdk__group", children: label }),
     children
   ] });
 }
 function CommandItem({ icon, shortcut, active, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
     icon,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children }),
     shortcut
   ] });
 }
 
 // src/components/Kanban.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Kanban({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
 }
 function KanbanColumn({ title, count, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
-    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "uix-kanban__head", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
+    (title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uix-kanban__head", children: [
       title,
-      count != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "uix-kanban__count", children: count })
+      count != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-kanban__body", children })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__body", children })
   ] });
 }
 function KanbanCard({ title, meta, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-kanban__card-title", children: title }),
-    meta && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__card-title", children: title }),
+    meta && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
     children
   ] });
 }
 
 // src/components/Tree.tsx
-var import_react11 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M2 4l4 4 4-4" }) });
+var import_react12 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M2 4l4 4 4-4" }) });
 function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "button",
       {
         className: "uix-tree__row",
@@ -924,13 +945,13 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
           onSelect?.(node.id);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronIcon2, {}) }),
-          node.icon && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", children: node.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronIcon2, {}) }),
+          node.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": "true", children: node.icon }),
           node.label
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       TreeNode,
       {
         node: child,
@@ -945,7 +966,7 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
   ] });
 }
 function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react11.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
+  const [internalExpanded, setInternalExpanded] = (0, import_react12.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
   function handleToggle(id) {
     if (!controlledExpanded) {
@@ -958,7 +979,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
     }
     onToggle?.(id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     TreeNode,
     {
       node,
@@ -985,6 +1006,8 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
   CommandPalette,
   Comment,
   Comments,
+  DescriptionItem,
+  DescriptionList,
   DetailLayout,
   Drawer,
   EmptyState,

package/dist/index.d.cts

@@ -162,6 +162,48 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
 /** A single `.uix-list__item`. Provide `title`/`meta`, or arbitrary `children`. */
 declare function ListItem({ title, meta, trail, leading, children, className, ...props }: ListItemProps): react.JSX.Element;
 
+/**
+ * Key-value description list — the `uix-dl` two-column grid (label / value).
+ * The house body primitive for detail surfaces: the side-peek drawer, the
+ * record detail header, summary cards.
+ *
+ * UIx owns the LOOK + this controlled contract; the consumer owns the data —
+ * WHICH fields to show and how to format each value (a raw `sev_3` enum or an
+ * assignee UUID is the app's job to resolve into "SEV 3" / a display name
+ * before it reaches `description`). So in a Tensor peek surface:
+ *
+ *   <DescriptionList items={[
+ *     { term: 'State',    description: <StatusPill tone="neutral">Closed</StatusPill> },
+ *     { term: 'Severity', description: formatSeverity(row.severity) }, // app formats
+ *     { term: 'Assignee', description: assigneeName ?? <em>Unassigned</em> },
+ *   ]} />
+ *
+ * Use `items` for data-driven lists (the common case) or the `DescriptionItem`
+ * compound child for hand-authored content. Both render `<dt>`/`<dd>` pairs as
+ * direct children of the grid `<dl>`, so they align into the same columns.
+ */
+interface DescriptionListItem {
+    /** Stable identity for the row; falls back to the list index when omitted. */
+    id?: string;
+    term: ReactNode;
+    description: ReactNode;
+}
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    items?: DescriptionListItem[];
+    children?: ReactNode;
+}
+declare function DescriptionList({ items, children, className, ...props }: DescriptionListProps): react.JSX.Element;
+interface DescriptionItemProps {
+    term: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * One hand-authored row. Renders a `<dt>`/`<dd>` fragment so the pair lands as
+ * direct grid children of the enclosing `<DescriptionList>` (never wrap it in
+ * an element — that breaks the two-column alignment).
+ */
+declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
+
 interface TabsProps {
     variant?: 'line' | 'enclosed' | 'pill';
     value?: string;
@@ -531,4 +573,4 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
 }
 declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Modal, type ModalProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };
+export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Modal, type ModalProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { Card, CardProps } from './components/Card.js';
 export { PageHeader, PageHeaderProps } from './components/PageHeader.js';
 export { DetailLayout, DetailLayoutProps } from './components/DetailLayout.js';
 export { List, ListItem, ListItemProps, ListProps } from './components/List.js';
+export { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListItem, DescriptionListProps } from './components/DescriptionList.js';
 export { Tab, TabProps, Tabs, TabsProps } from './components/Tabs.js';
 export { AppShell, AppShellProps } from './components/AppShell.js';
 export { NavGroup, NavGroupProps, NavItem, NavItemProps, Sidebar, SidebarProps, SidebarSection, SidebarSectionProps, SubNavItem, SubNavItemProps } from './components/Sidebar.js';

package/dist/index.js

@@ -15,6 +15,7 @@ import { Card } from "./components/Card.js";
 import { PageHeader } from "./components/PageHeader.js";
 import { DetailLayout } from "./components/DetailLayout.js";
 import { List, ListItem } from "./components/List.js";
+import { DescriptionList, DescriptionItem } from "./components/DescriptionList.js";
 import { Tabs, Tab } from "./components/Tabs.js";
 import { AppShell } from "./components/AppShell.js";
 import { Sidebar, SidebarSection, NavItem, NavGroup, SubNavItem } from "./components/Sidebar.js";
@@ -51,6 +52,8 @@ export {
   CommandPalette,
   Comment,
   Comments,
+  DescriptionItem,
+  DescriptionList,
   DetailLayout,
   Drawer,
   EmptyState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",