@mastra/playground-ui 68.0.0-alpha.0 → 68.0.0-alpha.2

package/dist/{MetricsTable-D-aZf3dk.cjs → MetricsTable-BSl81oNe.cjs}

@@ -76,10 +76,17 @@ function MetricsTableHeaderLabel({ header, description, sorted, onSort }) {
 }
 // src/ds/components/MetricsTable/metrics-table-rows.tsx
 /**
+* Full-width lines that fade over their last 6px. A hovered row covers the lines above and below
+* it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind
+* finds every class.
+*/
+var ROW_LINE = "isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]";
+/**
 * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the
 * separator drawn in the row's last pixel, so text sits centered between the lines.
 */
-var ROW = require_utils.cn("relative col-span-full grid grid-cols-subgrid items-center px-3 pt-1.75 pb-2 text-body-sm", "isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]");
+var ROW_BOX = "pt-1.75 pb-2 text-body-sm";
+var ROW = require_utils.cn("relative col-span-full grid grid-cols-subgrid items-center px-3", ROW_BOX, ROW_LINE);
 /** Skeleton widths for the first column's names, so loading rows don't look stamped. */
 var SKELETON_NAMES = [
 	"w-32",
@@ -103,12 +110,24 @@ function skeletonBar(column, columnIndex, rowIndex) {
 	return require_utils.cn("left-0", SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);
 }
 /** Skeleton rows while loading, the empty message without rows, else the page's rows. */
-function MetricsTableBody({ columns, rows, getRowKey, empty, skeletonRows, isLoading, ...behavior }) {
-	if (isLoading) return Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsTableSkeletonRow, {
+function MetricsTableBody({ columns, rows, getRowKey, empty, pageSize, isLoading, ...behavior }) {
+	if (isLoading) return Array.from({ length: pageSize ?? 5 }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsTableSkeletonRow, {
 		columns,
 		rowIndex: i
 	}, i));
 	if (rows.length === 0) {
+		if (pageSize) {
+			if (empty === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsTableFiller, { count: pageSize });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				role: "row",
+				className: "col-span-full grid *:col-start-1 *:row-start-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsTableFiller, { count: pageSize }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					role: "cell",
+					className: "flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground",
+					children: empty
+				})]
+			});
+		}
 		if (empty === void 0) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			role: "row",
@@ -126,6 +145,22 @@ function MetricsTableBody({ columns, rows, getRowKey, empty, skeletonRows, isLoa
 		...behavior
 	}, getRowKey(row)));
 }
+/**
+* Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it
+* shows. Rows of the same box, not a fixed height, so it follows the row's text size.
+*/
+function MetricsTableFiller({ count }) {
+	if (count <= 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": true,
+		"data-slot": "metrics-table-filler",
+		className: "col-span-full",
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: ROW_BOX,
+			children: "​"
+		}, i))
+	});
+}
 /** A loading row: the real row's markup with a bar in each cell, so it has the same height. */
 function MetricsTableSkeletonRow({ columns, rowIndex }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -222,7 +257,7 @@ var columnWidth = (column) => column.width ?? (column.align === "end" ? "minmax(
 * A table for the numbers behind a chart: one row per series or group, columns for its figures,
 * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row
 * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.
-* With `pageSize` it pages long lists. For a share of a total, a compact `ShareBar` fits better.
+* With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.
 */
 function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChange, onRowClick, onRowHover, isRowDimmed, isRowActive, rowTitle, empty, pageSize, isLoading = false, "aria-label": ariaLabel, className }) {
 	const [ownSort, setOwnSort] = (0, react.useState)(defaultSort);
@@ -242,9 +277,9 @@ function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChang
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_utils.cn("grid min-w-0 gap-3", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scroll_area.ScrollArea, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_scroll_area.ScrollArea, {
 			orientation: "horizontal",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				role: "table",
 				"aria-label": ariaLabel,
 				className: "grid min-w-min gap-x-4",
@@ -276,10 +311,10 @@ function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChang
 					isRowActive,
 					rowTitle,
 					empty,
-					skeletonRows: pageSize ?? 5,
+					pageSize,
 					isLoading
 				})]
-			})
+			}), pageSize !== void 0 && !isLoading && shown.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MetricsTableFiller, { count: pageSize - shown.length })]
 		}), showsPagination && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_table_pagination.TablePagination, {
 			page: safePage,
 			pageCount,
@@ -294,4 +329,4 @@ Object.defineProperty(exports, "MetricsTable", {
 	}
 });
 
-//# sourceMappingURL=MetricsTable-D-aZf3dk.cjs.map
+//# sourceMappingURL=MetricsTable-BSl81oNe.cjs.map

package/dist/MetricsTable-BSl81oNe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsTable-BSl81oNe.cjs","names":["ArrowUpIcon","ArrowDownIcon","cn","useId","Tooltip","TooltipTrigger","TooltipContent","cn","Skeleton","useState","cn","ScrollArea","TablePagination"],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/{MetricsTable-CRPeLHe1.js → MetricsTable-DID6LRoP.js}

@@ -76,10 +76,17 @@ function MetricsTableHeaderLabel({ header, description, sorted, onSort }) {
 }
 // src/ds/components/MetricsTable/metrics-table-rows.tsx
 /**
+* Full-width lines that fade over their last 6px. A hovered row covers the lines above and below
+* it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind
+* finds every class.
+*/
+var ROW_LINE = "isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]";
+/**
 * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the
 * separator drawn in the row's last pixel, so text sits centered between the lines.
 */
-var ROW = cn("relative col-span-full grid grid-cols-subgrid items-center px-3 pt-1.75 pb-2 text-body-sm", "isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]");
+var ROW_BOX = "pt-1.75 pb-2 text-body-sm";
+var ROW = cn("relative col-span-full grid grid-cols-subgrid items-center px-3", ROW_BOX, ROW_LINE);
 /** Skeleton widths for the first column's names, so loading rows don't look stamped. */
 var SKELETON_NAMES = [
 	"w-32",
@@ -103,12 +110,24 @@ function skeletonBar(column, columnIndex, rowIndex) {
 	return cn("left-0", SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);
 }
 /** Skeleton rows while loading, the empty message without rows, else the page's rows. */
-function MetricsTableBody({ columns, rows, getRowKey, empty, skeletonRows, isLoading, ...behavior }) {
-	if (isLoading) return Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx(MetricsTableSkeletonRow, {
+function MetricsTableBody({ columns, rows, getRowKey, empty, pageSize, isLoading, ...behavior }) {
+	if (isLoading) return Array.from({ length: pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(MetricsTableSkeletonRow, {
 		columns,
 		rowIndex: i
 	}, i));
 	if (rows.length === 0) {
+		if (pageSize) {
+			if (empty === void 0) return /* @__PURE__ */ jsx(MetricsTableFiller, { count: pageSize });
+			return /* @__PURE__ */ jsxs("div", {
+				role: "row",
+				className: "col-span-full grid *:col-start-1 *:row-start-1",
+				children: [/* @__PURE__ */ jsx(MetricsTableFiller, { count: pageSize }), /* @__PURE__ */ jsx("p", {
+					role: "cell",
+					className: "flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground",
+					children: empty
+				})]
+			});
+		}
 		if (empty === void 0) return null;
 		return /* @__PURE__ */ jsx("div", {
 			role: "row",
@@ -126,6 +145,22 @@ function MetricsTableBody({ columns, rows, getRowKey, empty, skeletonRows, isLoa
 		...behavior
 	}, getRowKey(row)));
 }
+/**
+* Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it
+* shows. Rows of the same box, not a fixed height, so it follows the row's text size.
+*/
+function MetricsTableFiller({ count }) {
+	if (count <= 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-slot": "metrics-table-filler",
+		className: "col-span-full",
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("div", {
+			className: ROW_BOX,
+			children: "​"
+		}, i))
+	});
+}
 /** A loading row: the real row's markup with a bar in each cell, so it has the same height. */
 function MetricsTableSkeletonRow({ columns, rowIndex }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -222,7 +257,7 @@ var columnWidth = (column) => column.width ?? (column.align === "end" ? "minmax(
 * A table for the numbers behind a chart: one row per series or group, columns for its figures,
 * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row
 * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.
-* With `pageSize` it pages long lists. For a share of a total, a compact `ShareBar` fits better.
+* With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.
 */
 function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChange, onRowClick, onRowHover, isRowDimmed, isRowActive, rowTitle, empty, pageSize, isLoading = false, "aria-label": ariaLabel, className }) {
 	const [ownSort, setOwnSort] = useState(defaultSort);
@@ -242,9 +277,9 @@ function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChang
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("grid min-w-0 gap-3", className),
-		children: [/* @__PURE__ */ jsx(ScrollArea, {
+		children: [/* @__PURE__ */ jsxs(ScrollArea, {
 			orientation: "horizontal",
-			children: /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsxs("div", {
 				role: "table",
 				"aria-label": ariaLabel,
 				className: "grid min-w-min gap-x-4",
@@ -276,10 +311,10 @@ function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChang
 					isRowActive,
 					rowTitle,
 					empty,
-					skeletonRows: pageSize ?? 5,
+					pageSize,
 					isLoading
 				})]
-			})
+			}), pageSize !== void 0 && !isLoading && shown.length > 0 && /* @__PURE__ */ jsx(MetricsTableFiller, { count: pageSize - shown.length })]
 		}), showsPagination && /* @__PURE__ */ jsx(TablePagination, {
 			page: safePage,
 			pageCount,
@@ -289,4 +324,4 @@ function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChang
 }
 export { MetricsTable as t };
 
-//# sourceMappingURL=MetricsTable-CRPeLHe1.js.map
+//# sourceMappingURL=MetricsTable-DID6LRoP.js.map

package/dist/MetricsTable-DID6LRoP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsTable-DID6LRoP.js","names":[],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/{Notice-CyKngbbv.js → Notice-C-8oOZZF.js}

@@ -1,5 +1,5 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { n as ButtonLabel, r as buttonVariants, t as Button } from "./Button-Bw1e3ONi.js";
+import { i as ButtonLabel, o as buttonVariants, t as Button } from "./Button-CLXTbAY8.js";
 import { Children, isValidElement } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from "lucide-react";
@@ -109,4 +109,4 @@ var Notice = Object.assign(NoticeRoot, {
 });
 export { Notice as t };
 
-//# sourceMappingURL=Notice-CyKngbbv.js.map
+//# sourceMappingURL=Notice-C-8oOZZF.js.map

package/dist/{Notice-CyKngbbv.js.map → Notice-C-8oOZZF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Notice-CyKngbbv.js","names":["_Fragment"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":";;;;;;;;AAWA,SAAS,kBAAkB,QAAqC;CAC9D,IAAI,CAAC,UAAW,eAAe,MAAM,KAAK,OAAO,SAAS,UAAW,OAAO,EAAE,MAAM,SAAkB;CACtG,OAAO,CAAC;AACV;AAEA,SAAgB,aAAa,EAAE,QAAQ,MAAM,WAAW,UAAU,GAAG,SAA4B;CAC/F,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,kBAAkB,MAAM,GACxB;GACE,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,CAAC,GAClC,iEACA,SACF;GACA,UACE,qBAAAA,YAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD;IAAa,SAAQ;IAAQ;GAAsB,CAAA,CACnD,EAAA,CAAA;EAEN,GACA,KACF;CACF,CAAC;AACH;;ACjCA,SAAgB,cAAc,EAAE,UAAU,aAAiC;CACzE,OAAO,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;;ACEA,IAAM,gBAA+E;CACnF,SAAS;EAAE,MAAM,oBAAC,eAAD,CAAgB,CAAA;EAAG,WAAW;CAAyB;CACxE,aAAa;EAAE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;EAAG,WAAW;CAA6B;CACnF,SAAS;EAAE,MAAM,oBAAC,mBAAD,CAAoB,CAAA;EAAG,WAAW;CAA0B;CAC7E,MAAM;EAAE,MAAM,oBAAC,UAAD,CAAW,CAAA;EAAG,WAAW;CAAsB;CAC7D,MAAM;EAAE,MAAM,oBAAC,cAAD,CAAe,CAAA;EAAG,WAAW;CAAwB;AACrE;AAEA,SAAS,WAAW,SAAoB;CACtC,OAAO,SAAS,QAAQ,OAAO,CAAC,CAAC,MAAK,UAAS,UAAU,EAAE;AAC7D;AAWA,SAAgB,WAAW,EACzB,SACA,OACA,MACA,QACA,kBAAkB,SAClB,WACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,EAAE,MAAM,aAAa,cAAc,cAAc;CACvD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,aAAa,WAAW,QAAQ;CACtC,MAAM,YAAY,WAAW,MAAM;CAEnC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW;EACX,yBAAuB;EACvB,WAAW,GAAG,6DAA6D,aAAa,SAAS,SAAS;EAL5G,UAAA;IAOI,YAAY,cAAc,cAC1B,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAW,GAAG,yEAAyE,SAAS;IAE/F,UAAA,QAAQ;GACL,CAAA;IAEN,YAAY,eACZ,qBAAC,OAAD;IAAK,aAAU;IAAiB,WAAU;IAA1C,UAAA,CACG,YAAY,oBAAC,OAAD;KAAK,WAAU;KAAmB,UAAA;IAAW,CAAA,GACzD,cAAc,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACxE;;GAEN,aACC,oBAAC,OAAD;IAAK,aAAU;IAAgB,WAAU;IACtC,UAAA;GACE,CAAA;GAEN,aACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAQ;IACR,SAAS;IAET,UAAA,oBAAC,OAAD,CAAQ,CAAA;GACF,CAAA;EAEP;;AAET;;ACjFA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,QAAQ;AACV,CAAC"}
+{"version":3,"file":"Notice-C-8oOZZF.js","names":["_Fragment"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":";;;;;;;;AAWA,SAAS,kBAAkB,QAAqC;CAC9D,IAAI,CAAC,UAAW,eAAe,MAAM,KAAK,OAAO,SAAS,UAAW,OAAO,EAAE,MAAM,SAAkB;CACtG,OAAO,CAAC;AACV;AAEA,SAAgB,aAAa,EAAE,QAAQ,MAAM,WAAW,UAAU,GAAG,SAA4B;CAC/F,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,kBAAkB,MAAM,GACxB;GACE,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,CAAC,GAClC,iEACA,SACF;GACA,UACE,qBAAAA,YAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD;IAAa,SAAQ;IAAQ;GAAsB,CAAA,CACnD,EAAA,CAAA;EAEN,GACA,KACF;CACF,CAAC;AACH;;ACjCA,SAAgB,cAAc,EAAE,UAAU,aAAiC;CACzE,OAAO,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;;ACEA,IAAM,gBAA+E;CACnF,SAAS;EAAE,MAAM,oBAAC,eAAD,CAAgB,CAAA;EAAG,WAAW;CAAyB;CACxE,aAAa;EAAE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;EAAG,WAAW;CAA6B;CACnF,SAAS;EAAE,MAAM,oBAAC,mBAAD,CAAoB,CAAA;EAAG,WAAW;CAA0B;CAC7E,MAAM;EAAE,MAAM,oBAAC,UAAD,CAAW,CAAA;EAAG,WAAW;CAAsB;CAC7D,MAAM;EAAE,MAAM,oBAAC,cAAD,CAAe,CAAA;EAAG,WAAW;CAAwB;AACrE;AAEA,SAAS,WAAW,SAAoB;CACtC,OAAO,SAAS,QAAQ,OAAO,CAAC,CAAC,MAAK,UAAS,UAAU,EAAE;AAC7D;AAWA,SAAgB,WAAW,EACzB,SACA,OACA,MACA,QACA,kBAAkB,SAClB,WACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,EAAE,MAAM,aAAa,cAAc,cAAc;CACvD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,aAAa,WAAW,QAAQ;CACtC,MAAM,YAAY,WAAW,MAAM;CAEnC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW;EACX,yBAAuB;EACvB,WAAW,GAAG,6DAA6D,aAAa,SAAS,SAAS;EAL5G,UAAA;IAOI,YAAY,cAAc,cAC1B,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAW,GAAG,yEAAyE,SAAS;IAE/F,UAAA,QAAQ;GACL,CAAA;IAEN,YAAY,eACZ,qBAAC,OAAD;IAAK,aAAU;IAAiB,WAAU;IAA1C,UAAA,CACG,YAAY,oBAAC,OAAD;KAAK,WAAU;KAAmB,UAAA;IAAW,CAAA,GACzD,cAAc,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACxE;;GAEN,aACC,oBAAC,OAAD;IAAK,aAAU;IAAgB,WAAU;IACtC,UAAA;GACE,CAAA;GAEN,aACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAQ;IACR,SAAS;IAET,UAAA,oBAAC,OAAD,CAAQ,CAAA;GACF,CAAA;EAEP;;AAET;;ACjFA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,QAAQ;AACV,CAAC"}

package/dist/{Notice-DWNeCe-t.cjs → Notice-JZ7SW7q6.cjs}

@@ -1,5 +1,5 @@
 require('./Notice.css');const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_Button = require("./Button-YQRflC47.cjs");
+const require_Button = require("./Button-DLcMcuUL.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -114,4 +114,4 @@ Object.defineProperty(exports, "Notice", {
 	}
 });
 
-//# sourceMappingURL=Notice-DWNeCe-t.cjs.map
+//# sourceMappingURL=Notice-JZ7SW7q6.cjs.map

package/dist/{Notice-DWNeCe-t.cjs.map → Notice-JZ7SW7q6.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Notice-DWNeCe-t.cjs","names":["isValidElement","useRender","mergeProps","cn","buttonVariants","_Fragment","ButtonLabel","LightbulbIcon","OctagonAlertIcon","TriangleAlertIcon","InfoIcon","FileTextIcon","Children","cn","Button","XIcon"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Notice-JZ7SW7q6.cjs","names":["isValidElement","useRender","mergeProps","cn","buttonVariants","_Fragment","ButtonLabel","LightbulbIcon","OctagonAlertIcon","TriangleAlertIcon","InfoIcon","FileTextIcon","Children","cn","Button","XIcon"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":"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"}

package/dist/{Workflow-BVWvgDmI.js → Workflow-C3SlEdP-.js}

@@ -3,17 +3,17 @@ import { formatDate, formatShortDate } from "./utils/date-format.es.js";
 import { formatDuration } from "./utils/duration.es.js";
 import { n as formatTypeScript } from "./formatting-FU4kOXPG.js";
 import { raisedSurfaceStyle, surfaceStateLayerStyle } from "./primitives/raised-surface.es.js";
-import { t as Button } from "./Button-Bw1e3ONi.js";
+import { t as Button } from "./Button-CLXTbAY8.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
-import { t as CopyButton } from "./copy-button-CF-X4iDj.js";
+import { t as CopyButton } from "./copy-button-BXrbevLn.js";
 import { t as Code } from "./code-B7cFirk4.js";
 import { t as DropdownMenu } from "./dropdown-menu-B4jY3J9e.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/Collapsible.es.js";
 import { DisclosureChevron } from "./components/DisclosureChevron.es.js";
 import { Shimmer } from "./components/Shimmer.es.js";
 import { t as Badge } from "./Badge-aVu5iGAF.js";
-import { a as DialogContent, c as DialogHeader, d as DialogTitle, n as DialogBody, t as Dialog } from "./Dialog-CKtTR8h3.js";
-import { n as useCodemirrorTheme, s as codeFoldGutter } from "./CodeEditor-CPVxj7WS.js";
+import { a as DialogContent, c as DialogHeader, d as DialogTitle, n as DialogBody, t as Dialog } from "./Dialog-DaWtxwd9.js";
+import { n as useCodemirrorTheme, s as codeFoldGutter } from "./CodeEditor-COnz9c6B.js";
 import { Skeleton } from "./components/Skeleton.es.js";
 import { ActivityWick } from "./components/Activity.es.js";
 import { Slider } from "./components/Slider.es.js";
@@ -1312,4 +1312,4 @@ function WorkflowStepAction({ action, isActive, onSelect }) {
 }
 export { WorkflowTypeBadge as C, getNodeIndicators as S, workflowFitOptions as T, BADGE_COLORS as _, WorkflowDebugControls as a, getConditionIndicator as b, WorkflowDataEdgeView as c, WORKFLOW_DATA_EDGE_TYPE as d, WorkflowEdgeDataButton as f, WorkflowClock as g, WorkflowConditionCardView as h, WorkflowGraphPlaceholder as i, WorkflowBoundaryNode as l, WorkflowStepCardView as m, WorkflowStepActions as n, WorkflowNodeFrame as o, WorkflowCodeContent as p, WorkflowConditionCard as r, WorkflowGraphCanvas as s, WorkflowStepAction as t, WORKFLOW_BOUNDARY_NODE_TYPE as u, BADGE_ICONS as v, WorkflowCanvasInsetContext as w, getNodeBadgeInfo as x, getConditionIconAndColor as y };
 
-//# sourceMappingURL=Workflow-BVWvgDmI.js.map
+//# sourceMappingURL=Workflow-C3SlEdP-.js.map