@devalok/shilp-sutra 0.53.0 → 0.55.0

package/dist/ui/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\n)\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      // raised-hover, NOT raised — tables live on cards (surface-raised), so a\n      // surface-raised hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-body-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-body-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,8GACA,EAAe,IACf,KAAW,gDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,6KACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,qNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,+CAA+C,CAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}
+{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\n)\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      // raised-hover, NOT raised — tables live on cards (surface-raised), so a\n      // surface-raised hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-raised-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-body-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-body-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,8GACA,EAAe,IACf,KAAW,gDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,uQACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,qNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,+CAA+C,CAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}

package/dist/ui/tabs.d.ts

@@ -1,6 +1,5 @@
-"use client";
 import { VariantProps } from 'class-variance-authority';
-import * as TabsPrimitive from '../primitives/react-tabs';
+import * as TabsPrimitive from '../primitives/react-tabs.js';
 import * as React from 'react';
 type TabsOrientation = 'horizontal' | 'vertical';
 /**

package/dist/ui/tabs.js

@@ -1,32 +1,32 @@
 "use client";
-import { Content as e, List as t, Root2 as n, Trigger as r } from "../_chunks/primitives.js";
-import { springs as i, tweens as a } from "./lib/motion.js";
-import { cva as o } from "../_chunks/vendor-utils.js";
-import { cn as s } from "./lib/utils.js";
+import { springs as e, tweens as t } from "./lib/motion.js";
+import { cva as n } from "../_chunks/vendor-utils.js";
+import { cn as r } from "./lib/utils.js";
+import { Content as i, List as a, Root2 as o, Trigger as s } from "../_chunks/primitives/react-tabs.js";
 import * as c from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { LayoutGroup as d, motion as f } from "framer-motion";
 //#region src/ui/tabs.tsx
-var p = c.createContext(void 0), m = c.createContext("horizontal"), h = c.forwardRef(({ value: e, defaultValue: t, onValueChange: r, orientation: i, ...a }, o) => {
+var p = c.createContext(void 0), m = c.createContext("horizontal"), h = c.forwardRef(({ value: e, defaultValue: t, onValueChange: n, orientation: i, ...a }, s) => {
 	let [u, d] = c.useState(e ?? t ?? "");
 	c.useEffect(() => {
 		e !== void 0 && d(e);
 	}, [e]);
 	let f = c.useCallback((e) => {
-		d(e), r?.(e);
-	}, [r]), h = i ?? "horizontal";
+		d(e), n?.(e);
+	}, [n]), h = i ?? "horizontal";
 	return /* @__PURE__ */ l(p.Provider, {
 		value: u,
 		children: /* @__PURE__ */ l(m.Provider, {
 			value: h,
-			children: /* @__PURE__ */ l(n, {
-				ref: o,
+			children: /* @__PURE__ */ l(o, {
+				ref: s,
 				value: e,
 				defaultValue: e === void 0 ? t : void 0,
 				onValueChange: f,
 				orientation: i,
 				...a,
-				className: s(h === "vertical" && "flex flex-row gap-ds-05", a.className)
+				className: r(h === "vertical" && "flex flex-row gap-ds-05", a.className)
 			})
 		})
 	});
@@ -37,7 +37,7 @@ var g = c.createContext({
 	size: "md",
 	color: "accent",
 	layoutId: "tab-indicator"
-}), _ = o("inline-flex items-center", {
+}), _ = n("inline-flex items-center", {
 	variants: {
 		variant: {
 			line: "border-b border-surface-border-strong w-full gap-0",
@@ -67,7 +67,7 @@ var g = c.createContext({
 		size: "md",
 		orientation: "horizontal"
 	}
-}), v = o("relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled", {
+}), v = n("relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled", {
 	variants: {
 		variant: {
 			line: ["-mb-px", "text-surface-fg-muted hover:text-surface-fg"],
@@ -87,8 +87,8 @@ var g = c.createContext({
 		variant: "line",
 		size: "md"
 	}
-}), y = c.forwardRef(({ className: e, variant: n, size: r, color: i, ...a }, o) => {
-	let u = c.useContext(m), f = n ?? "line", p = r ?? "md", h = i ?? "accent", v = c.useId(), y = c.useMemo(() => ({
+}), y = c.forwardRef(({ className: e, variant: t, size: n, color: i, ...o }, s) => {
+	let u = c.useContext(m), f = t ?? "line", p = n ?? "md", h = i ?? "accent", v = c.useId(), y = c.useMemo(() => ({
 		variant: f,
 		size: p,
 		color: h,
@@ -101,66 +101,66 @@ var g = c.createContext({
 	]);
 	return /* @__PURE__ */ l(g.Provider, {
 		value: y,
-		children: /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(t, {
-			ref: o,
-			className: s(_({
+		children: /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(a, {
+			ref: s,
+			className: r(_({
 				variant: f,
 				size: p,
 				orientation: u
 			}), e),
-			...a
+			...o
 		}) })
 	});
 });
-y.displayName = t.displayName;
+y.displayName = a.displayName;
 var b = {
 	accent: "data-[state=active]:text-accent-11",
 	neutral: "data-[state=active]:text-surface-fg"
 }, x = {
 	accent: "bg-accent-9",
 	neutral: "bg-surface-fg"
-}, S = c.forwardRef(({ className: e, variant: t, children: n, ...a }, o) => {
-	let d = c.useContext(g), h = c.useContext(p), _ = c.useContext(m), y = t ?? d.variant, S = d.size, C = d.color, w = a.value === h, T = _ === "vertical";
-	return /* @__PURE__ */ u(r, {
+}, S = c.forwardRef(({ className: t, variant: n, children: i, ...a }, o) => {
+	let d = c.useContext(g), h = c.useContext(p), _ = c.useContext(m), y = n ?? d.variant, S = d.size, C = d.color, w = a.value === h, T = _ === "vertical";
+	return /* @__PURE__ */ u(s, {
 		ref: o,
-		className: s(v({
+		className: r(v({
 			variant: y,
 			size: S
-		}), y === "line" && b[C], T && "w-full justify-start", y === "line" && T && "-ml-px -mb-0", e),
+		}), y === "line" && b[C], T && "w-full justify-start", y === "line" && T && "-ml-px -mb-0", t),
 		...a,
 		children: [
 			y === "contained" && w && /* @__PURE__ */ l(f.span, {
 				layoutId: `${d.layoutId}-contained`,
 				className: "absolute inset-0 rounded-control bg-surface-overlay shadow-raised",
-				transition: i.smooth
+				transition: e.smooth
 			}),
 			/* @__PURE__ */ l("span", {
 				className: "relative z-[1] inline-flex min-w-0 items-center gap-ds-02",
 				children: /* @__PURE__ */ l("span", {
 					className: "truncate",
-					children: n
+					children: i
 				})
 			}),
 			y === "line" && w && /* @__PURE__ */ l(f.span, {
 				layoutId: `${d.layoutId}-line`,
-				className: s("absolute", T ? "left-0 top-0 bottom-0 w-0.5" : "bottom-0 left-0 right-0 h-0.5", x[C]),
-				transition: i.smooth
+				className: r("absolute", T ? "left-0 top-0 bottom-0 w-0.5" : "bottom-0 left-0 right-0 h-0.5", x[C]),
+				transition: e.smooth
 			})
 		]
 	});
 });
-S.displayName = r.displayName;
-var C = c.forwardRef(({ className: t, children: n, ...r }, i) => /* @__PURE__ */ l(e, {
-	ref: i,
-	className: s("ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", c.useContext(m) === "vertical" ? "mt-0 flex-1 min-w-0" : "mt-ds-05", t),
-	...r,
+S.displayName = s.displayName;
+var C = c.forwardRef(({ className: e, children: n, ...a }, o) => /* @__PURE__ */ l(i, {
+	ref: o,
+	className: r("ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", c.useContext(m) === "vertical" ? "mt-0 flex-1 min-w-0" : "mt-ds-05", e),
+	...a,
 	children: /* @__PURE__ */ l(f.div, {
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
-		transition: a.fade,
+		transition: t.fade,
 		children: n
 	})
 }));
-C.displayName = e.displayName;
+C.displayName = i.displayName;
 //#endregion
 export { h as Tabs, C as TabsContent, y as TabsList, S as TabsTrigger };

package/dist/ui/textarea.d.ts

@@ -1,6 +1,5 @@
-"use client";
 import { VariantProps } from 'class-variance-authority';
-import { FieldState } from './lib/field-state';
+import { FieldState } from './lib/field-state.js';
 import * as React from 'react';
 declare const textareaVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;

package/dist/ui/toast-registry.d.ts

@@ -1,4 +1,3 @@
-"use client";
 export declare function registerToaster(): () => void;
 /**
  * Called by toast() in dev to warn once if no <Toaster /> is mounted.

package/dist/ui/toast-types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/toast.d.ts

@@ -1,6 +1,5 @@
-"use client";
 import { ExternalToast } from 'sonner';
-import { ToastActionOptions, ToastOptions, ToastType, ToastUndoOptions, ToastUploadOptions, UploadFile } from './toast-types';
+import { ToastActionOptions, ToastOptions, ToastType, ToastUndoOptions, ToastUploadOptions, UploadFile } from './toast-types.js';
 import * as React from 'react';
 declare function TimerBar({ duration, type, paused, }: {
     duration: number;
@@ -67,5 +66,5 @@ declare namespace toast {
 }
 export type ToastProps = ToastOptions;
 export { formatFileSize, TimerBar, toast, ToastContent, UploadFileRow, UploadToastContent, };
-export type { ToastActionOptions, ToastOptions, ToastType, ToastUndoOptions, ToastUploadOptions, UploadFile, } from './toast-types';
+export type { ToastActionOptions, ToastOptions, ToastType, ToastUndoOptions, ToastUploadOptions, UploadFile, } from './toast-types.js';
 //# sourceMappingURL=toast.d.ts.map

package/dist/ui/toaster.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import * as React from 'react';
 /**
  * Toaster — mount once at your root layout to enable toast notifications.

package/dist/ui/toggle-group.d.ts

@@ -1,7 +1,6 @@
-"use client";
 import { VariantProps } from 'class-variance-authority';
-import { toggleVariants } from './toggle';
-import * as ToggleGroupPrimitive from '../primitives/react-toggle-group';
+import { toggleVariants } from './toggle.js';
+import * as ToggleGroupPrimitive from '../primitives/react-toggle-group.js';
 import * as React from 'react';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "outline" | "default" | null | undefined;

package/dist/ui/toggle-group.js

@@ -1,7 +1,7 @@
 "use client";
-import { Item2 as e, Root2$2 as t } from "../_chunks/primitives.js";
-import { cn as n } from "./lib/utils.js";
-import { toggleVariants as r } from "./toggle.js";
+import { cn as e } from "./lib/utils.js";
+import { toggleVariants as t } from "./toggle.js";
+import { Item2 as n, Root2 as r } from "../_chunks/primitives/react-toggle-group.js";
 import * as i from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/ui/toggle-group.tsx
@@ -9,19 +9,19 @@ var o = i.createContext({
 	size: "md",
 	variant: "default",
 	color: "accent"
-}), s = i.forwardRef(({ className: e, variant: r, size: s, color: c, children: l, ...u }, d) => {
+}), s = i.forwardRef(({ className: t, variant: n, size: s, color: c, children: l, ...u }, d) => {
 	let f = i.useMemo(() => ({
-		variant: r,
+		variant: n,
 		size: s,
 		color: c
 	}), [
-		r,
+		n,
 		s,
 		c
 	]);
-	return /* @__PURE__ */ a(t, {
+	return /* @__PURE__ */ a(r, {
 		ref: d,
-		className: n("inline-flex items-center gap-ds-02", e),
+		className: e("inline-flex items-center gap-ds-02", t),
 		...u,
 		children: /* @__PURE__ */ a(o.Provider, {
 			value: f,
@@ -29,19 +29,19 @@ var o = i.createContext({
 		})
 	});
 });
-s.displayName = t.displayName;
-var c = i.forwardRef(({ className: t, variant: s, size: c, color: l, ...u }, d) => {
+s.displayName = r.displayName;
+var c = i.forwardRef(({ className: r, variant: s, size: c, color: l, ...u }, d) => {
 	let f = i.useContext(o);
-	return /* @__PURE__ */ a(e, {
+	return /* @__PURE__ */ a(n, {
 		ref: d,
-		className: n(r({
+		className: e(t({
 			variant: s ?? f.variant,
 			size: c ?? f.size,
 			color: l ?? f.color
-		}), "active:scale-[0.95] transition-transform", t),
+		}), "active:scale-[0.95] transition-transform", r),
 		...u
 	});
 });
-c.displayName = e.displayName;
+c.displayName = n.displayName;
 //#endregion
 export { s as ToggleGroup, c as ToggleGroupItem };

package/dist/ui/toggle.d.ts

@@ -1,6 +1,5 @@
-"use client";
 import { VariantProps } from 'class-variance-authority';
-import * as TogglePrimitive from '../primitives/react-toggle';
+import * as TogglePrimitive from '../primitives/react-toggle.js';
 import * as React from 'react';
 declare const toggleVariants: (props?: ({
     variant?: "outline" | "default" | null | undefined;

package/dist/ui/toggle.js

@@ -1,13 +1,13 @@
 "use client";
-import { Root$1 as e } from "../_chunks/primitives.js";
-import { motionProps as t, springs as n } from "./lib/motion.js";
-import { cva as r } from "../_chunks/vendor-utils.js";
-import { cn as i } from "./lib/utils.js";
+import { motionProps as e, springs as t } from "./lib/motion.js";
+import { cva as n } from "../_chunks/vendor-utils.js";
+import { cn as r } from "./lib/utils.js";
+import { Root as i } from "../_chunks/primitives/react-toggle.js";
 import * as a from "react";
 import { jsx as o } from "react/jsx-runtime";
 import { motion as s } from "framer-motion";
 //#region src/ui/toggle.tsx
-var c = s.create(e), l = r("inline-flex items-center justify-center gap-ds-03 rounded-control font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", {
+var c = s.create(i), l = n("inline-flex items-center justify-center gap-ds-03 rounded-control font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", {
 	variants: {
 		variant: {
 			default: "bg-transparent hover:bg-surface-raised-hover text-surface-fg-muted",
@@ -30,17 +30,17 @@ var c = s.create(e), l = r("inline-flex items-center justify-center gap-ds-03 ro
 		size: "md",
 		color: "accent"
 	}
-}), u = a.forwardRef(({ className: e, variant: r, size: a, color: s, ...u }, d) => /* @__PURE__ */ o(c, {
+}), u = a.forwardRef(({ className: n, variant: i, size: a, color: s, ...u }, d) => /* @__PURE__ */ o(c, {
 	ref: d,
 	whileTap: { scale: .95 },
-	transition: n.snappy,
-	className: i(l({
-		variant: r,
+	transition: t.snappy,
+	className: r(l({
+		variant: i,
 		size: a,
 		color: s
-	}), e),
-	...t(u)
+	}), n),
+	...e(u)
 }));
-u.displayName = e.displayName;
+u.displayName = i.displayName;
 //#endregion
 export { u as Toggle, l as toggleVariants };

package/dist/ui/tooltip.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import * as TooltipPrimitive from '../primitives/react-tooltip';
+import * as TooltipPrimitive from '../primitives/react-tooltip.js';
 import * as React from 'react';
 declare const TooltipProvider: React.FC<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>>;
 declare const Tooltip: React.FC<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>>;

package/dist/ui/tooltip.js

@@ -1,15 +1,15 @@
 "use client";
-import { Content2$1 as e, Portal as t, Provider as n, Root3$1 as r, Trigger$3 as i } from "../_chunks/primitives.js";
-import { springs as a, tweens as o } from "./lib/motion.js";
-import { cn as s } from "./lib/utils.js";
-import { useControllableOpen as c } from "../_chunks/use-controllable-open.js";
+import { springs as e, tweens as t } from "./lib/motion.js";
+import { cn as n } from "./lib/utils.js";
+import { useControllableOpen as r } from "../_chunks/use-controllable-open.js";
+import { Content2 as i, Portal as a, Provider as o, Root3 as s, Trigger as c } from "../_chunks/primitives/react-tooltip.js";
 import * as l from "react";
 import { Fragment as u, jsx as d } from "react/jsx-runtime";
 import { AnimatePresence as f, motion as p } from "framer-motion";
 //#region src/ui/tooltip.tsx
 var m = l.createContext(!1), h = ({ children: e, ...t }) => /* @__PURE__ */ d(m.Provider, {
 	value: !0,
-	children: /* @__PURE__ */ d(n, {
+	children: /* @__PURE__ */ d(o, {
 		...t,
 		children: e
 	})
@@ -17,21 +17,21 @@ var m = l.createContext(!1), h = ({ children: e, ...t }) => /* @__PURE__ */ d(m.
 function g({ children: e }) {
 	return l.useContext(m) ? /* @__PURE__ */ d(u, { children: e }) : /* @__PURE__ */ d(m.Provider, {
 		value: !0,
-		children: /* @__PURE__ */ d(n, {
+		children: /* @__PURE__ */ d(o, {
 			delayDuration: 300,
 			children: e
 		})
 	});
 }
 var _ = l.createContext({ open: !1 }), v = ({ open: e, defaultOpen: t, onOpenChange: n, ...i }) => {
-	let { open: a, setOpen: o } = c({
+	let { open: a, setOpen: o } = r({
 		open: e,
 		defaultOpen: t,
 		onOpenChange: n
-	}), s = l.useMemo(() => ({ open: a }), [a]);
+	}), c = l.useMemo(() => ({ open: a }), [a]);
 	return /* @__PURE__ */ d(g, { children: /* @__PURE__ */ d(_.Provider, {
-		value: s,
-		children: /* @__PURE__ */ d(r, {
+		value: c,
+		children: /* @__PURE__ */ d(s, {
 			open: a,
 			onOpenChange: o,
 			...i
@@ -39,20 +39,20 @@ var _ = l.createContext({ open: !1 }), v = ({ open: e, defaultOpen: t, onOpenCha
 	}) });
 };
 v.displayName = "Tooltip";
-var y = i, b = {
+var y = c, b = {
 	top: { y: 4 },
 	bottom: { y: -4 },
 	left: { x: 4 },
 	right: { x: -4 }
-}, x = l.forwardRef(({ className: n, sideOffset: r = 4, side: i = "top", children: c, ...u }, m) => {
-	let { open: h } = l.useContext(_), g = b[i] ?? {};
-	return /* @__PURE__ */ d(f, { children: h && /* @__PURE__ */ d(t, {
+}, x = l.forwardRef(({ className: r, sideOffset: o = 4, side: s = "top", children: c, ...u }, m) => {
+	let { open: h } = l.useContext(_), g = b[s] ?? {};
+	return /* @__PURE__ */ d(f, { children: h && /* @__PURE__ */ d(a, {
 		forceMount: !0,
-		children: /* @__PURE__ */ d(e, {
+		children: /* @__PURE__ */ d(i, {
 			ref: m,
 			forceMount: !0,
-			sideOffset: r,
-			side: i,
+			sideOffset: o,
+			side: s,
 			...u,
 			asChild: !0,
 			children: /* @__PURE__ */ d(p.div, {
@@ -73,15 +73,15 @@ var y = i, b = {
 					...g
 				},
 				transition: {
-					...a.snappy,
-					opacity: o.fade
+					...e.snappy,
+					opacity: t.fade
 				},
-				className: s("z-tooltip overflow-hidden rounded-overlay-sm bg-surface-inverted px-ds-04 py-ds-02b text-body-sm text-surface-inverted-fg shadow-floating", n),
+				className: n("z-tooltip overflow-hidden rounded-overlay-sm bg-surface-inverted px-ds-04 py-ds-02b text-body-sm text-surface-inverted-fg shadow-floating", r),
 				children: c
 			})
 		})
 	}) });
 });
-x.displayName = e.displayName;
+x.displayName = i.displayName;
 //#endregion
 export { v as Tooltip, x as TooltipContent, h as TooltipProvider, y as TooltipTrigger };

package/dist/ui/tree-view/index.d.ts

@@ -1,5 +1,4 @@
-"use client";
-export { TreeItem, type TreeItemProps } from './tree-item';
-export { TreeView, type TreeViewProps } from './tree-view';
-export { type TreeNode, useTree } from './use-tree';
+export { TreeItem, type TreeItemProps } from './tree-item.js';
+export { TreeView, type TreeViewProps } from './tree-view.js';
+export { type TreeNode, useTree } from './use-tree.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/tree-view/tree-item.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import { IconInput } from '../lib/icon-input';
+import { IconInput } from '../lib/icon-input.js';
 import * as React from 'react';
 export interface TreeItemProps {
     /** Unique identifier for this tree item */

package/dist/ui/tree-view/tree-view.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import { TreeNode, useTree } from './use-tree';
+import { TreeNode, useTree } from './use-tree.js';
 import * as React from 'react';
 interface TreeContextValue {
     tree: ReturnType<typeof useTree>;

package/dist/ui/tree-view/use-tree.d.ts

@@ -1,5 +1,4 @@
-"use client";
-import { IconInput } from '../lib/icon-input';
+import { IconInput } from '../lib/icon-input.js';
 export interface TreeNode {
     id: string;
     label: string;

package/dist/ui/truncated-text.d.ts

@@ -1,4 +1,3 @@
-"use client";
 import * as React from 'react';
 type TruncateMode = 'end' | 'clamp' | 'middle';
 export interface TruncatedTextProps {

package/docs/components/composed/bulk-action-bar.md

@@ -9,14 +9,20 @@
     count: number (number of selected items — displayed in badge)
     onClearSelection: () => void
     actions: BulkActionBarAction[]
+    totalCount: number (optional — total selectable items; enables "Select all")
+    onSelectAll: () => void (optional — called by the "Select all" control)
     className: string
+    ...div attributes (forwardRef to the toolbar div; HTMLAttributes spread)
 
 ### BulkActionBarAction
     label: string
-    icon: ComponentType<{ className?: string }> (optional icon component)
+    icon: IconInput (optional — any icon component or element)
     onClick: () => void
-    color: "default" | "error"
-    disabled: boolean
+    color: "accent" | "error" | "success" | "warning" | "info" | "neutral" (default: "accent")
+    disabled: boolean (optional)
+    loading: boolean (optional — pending spinner on the action)
+    requiresConfirmation: boolean (optional — inline confirm before executing)
+    confirmMessage: string (optional — default "Are you sure?")
 
 ## Defaults
     (no optional props with defaults)

package/docs/components/composed/error-boundary.md

@@ -5,11 +5,27 @@
 - Category: composed
 
 ## Props
+
+### ErrorDisplay (the rendered UI — forwardRef<HTMLDivElement>, spreads div attrs)
     error: unknown (REQUIRED — Error object, status object, or string)
-    onReset: () => void (optional retry button)
+    onReset: () => void (optional — renders a "Try Again" button)
+    actions: ReactNode (optional — custom recovery actions; replaces the default button)
+    fullPage: boolean (default: true — center in a min-h-[60vh] region; false = inline)
+    autoFocusReset: boolean (default: false — focus the recovery button on mount)
+
+Note: the raw `error.message` is shown ONLY in development. In production, ErrorDisplay
+shows the friendly status-mapped copy (404/403/500/default); the real message stays in
+the dev-only stack-trace block.
+
+### ErrorBoundary (class boundary — wrap a subtree)
+    children: ReactNode (REQUIRED)
+    onReset: () => void (optional — called after the boundary resets)
+    onError: (error: unknown, info: React.ErrorInfo) => void (optional — wire Sentry/logging)
+    resetKeys: unknown[] (optional — auto-reset when any value changes; react-error-boundary parity)
+    fallback: (props: { error: unknown; onReset: () => void }) => ReactNode (optional — defaults to ErrorDisplay)
 
 ## Defaults
-    None
+    fullPage: true
 
 ## Example
 ```jsx

package/docs/components/composed/master-detail.md

@@ -10,13 +10,23 @@ MasterDetail (root), MasterDetail.List, MasterDetail.Detail, MasterDetail.ListIt
 ## Props
 
 ### MasterDetail (root)
-    selected: string | null (ID of currently selected item; null = show list on mobile)
+    selected: string | null (CONTROLLED selected item id; omit for uncontrolled)
+    defaultSelected: string | null (uncontrolled initial selection)
+    onSelect: (value: string) => void (called with a row's `value` when chosen)
+    label: string (accessible name for the listbox; default "Items")
     onBack: () => void (called when mobile back button is pressed)
     masterWidth: string (master panel width on desktop)
     breakpoint: "sm" | "md" | "lg" (below this, stacked mobile mode activates)
+    emptyState: ReactNode (shown in the detail pane when nothing is selected)
+    onNavigate: (direction: "up" | "down") => void
+
+Selection can be controlled (`selected`) or owned by the component
+(`defaultSelected` + `onSelect`). With `value` on each ListItem, `active` /
+`aria-selected` derive automatically — no need to hand-wire `active` + `onClick`.
 
 ### MasterDetail.ListItem
-    active: boolean (highlights the item)
+    value: string (row id — enables derived selection + auto-fires onSelect on activate)
+    active: boolean (explicit highlight; omit to derive from value === selected)
     (extends ButtonHTMLAttributes)
 
 ## Defaults

package/docs/components/composed/page-skeletons.md

@@ -22,12 +22,12 @@ Exports: DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton
 ## Composability
 - **Full-page skeleton layouts** for route-level loading states. Each mimics a common page shape (dashboard tiles, project list with filters, task detail with sidebar).
 - **Server-safe** — use in Next.js app router `loading.tsx` files for instant route-transition feedback while data streams.
-- **Built on LoadingSkeleton + ui/Skeleton** — these just assemble the pre-built regional skeletons into page-shaped layouts.
+- **Assembled from `ui/Skeleton`** — these compose the base `Skeleton` primitive directly into page-shaped layouts (they do NOT wrap the `LoadingSkeleton` regional exports). Each root is a `role="status"` / `aria-busy` region with an sr-only label.
 - **When to use which skeleton tier:**
   - `<Skeleton>` (ui) — single shape for a single element
   - `<CardSkeleton>` / `<TableSkeleton>` (LoadingSkeleton) — individual region shape
   - `<DashboardSkeleton>` / etc. (PageSkeletons) — full page placeholder
-- **Fixed layout structure** — the className prop adjusts the outer container, but internal layout isn't customizable. For custom page skeletons, compose LoadingSkeleton pieces yourself.
+- **Fixed layout structure** — the className prop adjusts the outer container, but internal layout isn't customizable. For custom page skeletons, compose `ui/Skeleton` (or the `LoadingSkeleton` regional exports) yourself.
 
 ## Gotchas
 - Server-safe: can be imported directly in Next.js Server Components