@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-JJSZP3TW.js

@@ -0,0 +1,276 @@
+import {
+  DataViewsBoard
+} from "./chunk-BNEWMFVB.js";
+import {
+  SelectAllStrip
+} from "./chunk-JFBEZXNL.js";
+import {
+  toGridExpansion
+} from "./chunk-O5UGAL2V.js";
+import {
+  cardGridTracks
+} from "./chunk-KJK2Q35C.js";
+import {
+  ListCardGroup
+} from "./chunk-JFEEV3XI.js";
+import {
+  DENSITY_BOARD_SCALE,
+  DENSITY_ROW_PADDING,
+  cardScaleForZoom,
+  cardTargetWidthFor,
+  useDataViewsLayout
+} from "./chunk-4LQZH4PU.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DataGrid
+} from "./chunk-G4HBNILE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-grid-bodies.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GridBody({
+  rows,
+  columns,
+  getRowId,
+  selectedIds,
+  onChangeSelected,
+  sortBy,
+  onChangeSortBy,
+  sortMode,
+  rowPadding,
+  rowDetail,
+  dataTestId,
+  emptyState
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        width: "100%",
+        overflowX: "auto",
+        mt: 1.5,
+        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
+        // tall regardless of rowHeight, so the DENSITY preference is applied
+        // here rather than through `rowHeight`, which it would fight.
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: sxRem(13) },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: sxRem(12) }
+      },
+      children: /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          rows,
+          columns,
+          getRowId: (row) => getRowId(row),
+          virtualizeRows: false,
+          density: "compact",
+          rowHeight: 36,
+          headerHeight: 36,
+          selection: { mode: "multi", selectedRowIds: selectedIds, onChangeSelected },
+          sorting: { mode: sortMode, sortBy, onChangeSortBy },
+          expansion: toGridExpansion(rowDetail, copy),
+          "data-testid": dataTestId,
+          emptyState,
+          emptyText: copy.grid.emptyFilteredTitle
+        }
+      )
+    }
+  );
+}
+function CardBody({
+  rows,
+  renderCard,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  targetCardWidth,
+  cardScale,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        mt: 1.5,
+        display: "grid",
+        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so
+        // only the cards grow while the space between them stays constant.
+        gap: 1.5,
+        ...cardGridTracks(targetCardWidth)
+      },
+      "data-testid": dataTestId ? `${dataTestId}-cards` : "data-views-cards",
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+          selected: selectedIds.has(id),
+          onToggleSelect: () => onToggleId(id),
+          scale: cardScale
+        }) }, id);
+      })
+    }
+  );
+}
+function ListBody({
+  rows,
+  renderListRow,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  rowGap,
+  group,
+  density,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id) => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1
+  });
+  if (group) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+      ListCardGroup,
+      {
+        cells: group.cells,
+        metaColumns: group.metaColumns,
+        rails: group.rails,
+        reserveGutters: group.reserveGutters,
+        density,
+        gap: rowGap,
+        dataTestId: testId,
+        children: rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderListRow(row, selectionFor(id)) }, id);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap },
+      "data-testid": testId,
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderListRow(row, selectionFor(id)) }, id);
+      })
+    }
+  );
+}
+function Headerless({
+  c,
+  getRowId,
+  testIdPrefix,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectAllStrip,
+      {
+        rows: c.matched,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onChange: (next) => c.setSelectedIds(next),
+        testIdPrefix
+      }
+    ),
+    children
+  ] });
+}
+function headerlessBody({ c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }, { layout, zoom, density }) {
+  if (layout === "list" && renderListRow) {
+    return /* @__PURE__ */ jsx(
+      ListBody,
+      {
+        rows: c.matched,
+        renderListRow,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        rowGap: DENSITY_ROW_PADDING[density],
+        group: listGroup,
+        density,
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  if (layout === "board" && board && renderCard) {
+    return /* @__PURE__ */ jsx(
+      DataViewsBoard,
+      {
+        rows: c.matched,
+        board,
+        getRowId,
+        renderCard,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        cardScale: DENSITY_BOARD_SCALE[density],
+        dataTestId
+      }
+    );
+  }
+  if (layout === "cards" && renderCard) {
+    return /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        rows: c.matched,
+        renderCard,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        targetCardWidth: cardTargetWidthFor(zoom, density),
+        cardScale: cardScaleForZoom(zoom),
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  return null;
+}
+function GridMain(props) {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
+    return /* @__PURE__ */ jsx(Headerless, { c, getRowId, testIdPrefix, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    GridBody,
+    {
+      rows: c.matched,
+      columns: c.gridColumns,
+      getRowId,
+      selectedIds: [...c.selectedIds],
+      onChangeSelected: (ids) => c.setSelectedIds(new Set(ids)),
+      sortBy: c.state.sortBy,
+      onChangeSortBy: (next) => c.patch({ sortBy: next }),
+      sortMode: c.serverMode ? "server" : "client",
+      rowPadding: DENSITY_ROW_PADDING[layoutState.density],
+      rowDetail: props.rowDetail,
+      dataTestId,
+      emptyState
+    }
+  );
+}
+
+export {
+  GridMain
+};
+//# sourceMappingURL=chunk-JJSZP3TW.js.map

package/dist/chunk-JJSZP3TW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-bodies.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\nimport { DataGrid, type GridColumn, type GridSort } from \"../DataGrid\";\nimport { Box } from \"../../../mui/Box\";\n\nimport {\n  cardTargetWidthFor,\n  cardScaleForZoom,\n  DENSITY_BOARD_SCALE,\n  DENSITY_ROW_PADDING,\n  useDataViewsLayout,\n  type DataViewsDensity,\n} from \"./data-views-layout-context\";\nimport { cardGridTracks } from \"./data-views-grid-helpers\";\nimport { DataViewsBoard, type BoardConfig } from \"./DataViewsBoard\";\nimport { SelectAllStrip } from \"./data-views-select-all-strip\";\nimport { ListCardGroup, type ListGroupConfig } from \"./list-card-rails\";\nimport type { DataViewCardSelection } from \"./data-views-types\";\nimport { toGridExpansion, type DataViewRowDetail } from \"./data-views-row-detail\";\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Body (grid) ─────────────────────────────────────────────────────────── */\n\ninterface GridBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  columns: GridColumn<T>[];\n  getRowId: (row: T) => string | number;\n  selectedIds: Array<string | number>;\n  onChangeSelected: (ids: Array<string | number>) => void;\n  sortBy: GridSort[];\n  onChangeSortBy: (next: GridSort[]) => void;\n  /** \"server\" defers ordering to the backend (rows render as-is); \"client\" sorts in-grid. */\n  sortMode: \"client\" | \"server\";\n  /** Vertical cell padding, from the density preference. */\n  rowPadding: number;\n  rowDetail?: DataViewRowDetail<T>;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/** The dense DataGrid with multi-select, wrapped in the scrollable table region. */\nfunction GridBody<T extends Record<string, unknown>>({\n  rows,\n  columns,\n  getRowId,\n  selectedIds,\n  onChangeSelected,\n  sortBy,\n  onChangeSortBy,\n  sortMode,\n  rowPadding,\n  rowDetail,\n  dataTestId,\n  emptyState,\n}: GridBodyProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      sx={{\n        width: \"100%\",\n        overflowX: \"auto\",\n        mt: 1.5,\n        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows\n        // tall regardless of rowHeight, so the DENSITY preference is applied\n        // here rather than through `rowHeight`, which it would fight.\n        \"& .MuiTableCell-root\": { py: rowPadding, fontSize: sxRem(13) },\n        \"& .MuiTableCell-head\": { py: 0.5, fontSize: sxRem(12) },\n      }}\n    >\n      <DataGrid<T>\n        rows={rows}\n        columns={columns}\n        getRowId={(row) => getRowId(row)}\n        virtualizeRows={false}\n        density=\"compact\"\n        rowHeight={36}\n        headerHeight={36}\n        selection={{ mode: \"multi\", selectedRowIds: selectedIds, onChangeSelected }}\n        sorting={{ mode: sortMode, sortBy, onChangeSortBy }}\n        expansion={toGridExpansion(rowDetail, copy)}\n        data-testid={dataTestId}\n        emptyState={emptyState}\n        emptyText={copy.grid.emptyFilteredTitle}\n      />\n    </Box>\n  );\n}\n\n/* ── Body (cards) ────────────────────────────────────────────────────────── */\n\ninterface CardBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  getRowId: (row: T) => string | number;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** The width each card asks for; `auto-fill` turns it into a column count. */\n  targetCardWidth: number;\n  /** Content scale (padding + type) handed to each card, from the zoom slider. */\n  cardScale: number;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Grade\" layout: the filtered/sorted rows rendered as an auto-filling grid\n * of entity-supplied cards. Reuses `rows` (= `c.matched`), so search/filter/sort\n * apply; the column width comes from the zoom slider, and each card is handed its\n * selection state so it can drive its own checkbox (BaseCard) — the same\n * selection model as the table.\n */\nfunction CardBody<T extends Record<string, unknown>>({\n  rows,\n  renderCard,\n  getRowId,\n  selectedIds,\n  onToggleId,\n  targetCardWidth,\n  cardScale,\n  dataTestId,\n  emptyState,\n}: CardBodyProps<T>): React.JSX.Element {\n  if (rows.length === 0) {\n    return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n  }\n  return (\n    <Box\n      sx={{\n        mt: 1.5,\n        display: \"grid\",\n        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so\n        // only the cards grow while the space between them stays constant.\n        gap: 1.5,\n        ...cardGridTracks(targetCardWidth),\n      }}\n      data-testid={dataTestId ? `${dataTestId}-cards` : \"data-views-cards\"}\n    >\n      {rows.map((row) => {\n        const id = getRowId(row);\n        return (\n          <Box key={id}>\n            {renderCard(row, {\n              selected: selectedIds.has(id),\n              onToggleSelect: () => onToggleId(id),\n              scale: cardScale,\n            })}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n/* ── Body (list) ─────────────────────────────────────────────────────────── */\n\ninterface ListBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  renderListRow: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  getRowId: (row: T) => string | number;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** Gap between rows, from the density preference. */\n  rowGap: number;\n  /** The list's shared column config. See {@link ListGroupConfig}. */\n  group?: ListGroupConfig<T>;\n  /** The density every row answers, handed to the group when there is one. */\n  density: DataViewsDensity;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Lista\" layout: one FULL-WIDTH row per record, rendered by the entity — a\n * marker, a title, a subtitle and a value on the right is the shape it was\n * designed for (FUT-733).\n *\n * It sits between the table and the cards rather than replacing either: the\n * table is for comparing many columns, the cards are for browsing, and the list\n * is for scanning a queue on a narrow screen. Selection is the SAME model as\n * both — each row receives its selection state, so it can drive its own\n * checkbox and the bulk menu behaves identically in every layout.\n *\n * `scale` is handed over as 1 rather than the zoom multiplier, and the zoom\n * slider is hidden in this layout: a full-width row has no card size to\n * multiply. See {@link DataViewsZoomSlider}.\n */\nfunction ListBody<T extends Record<string, unknown>>({\n  rows,\n  renderListRow,\n  getRowId,\n  selectedIds,\n  onToggleId,\n  rowGap,\n  group,\n  density,\n  dataTestId,\n  emptyState,\n}: ListBodyProps<T>): React.JSX.Element {\n  if (rows.length === 0) {\n    return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n  }\n  const testId = dataTestId ? `${dataTestId}-list` : \"data-views-list\";\n  const selectionFor = (id: string | number): DataViewCardSelection => ({\n    selected: selectedIds.has(id),\n    onToggleSelect: () => onToggleId(id),\n    scale: 1,\n  });\n\n  if (group) {\n    return (\n      <Box sx={{ mt: 1.5 }}>\n        <ListCardGroup\n          cells={group.cells}\n          metaColumns={group.metaColumns}\n          rails={group.rails}\n          reserveGutters={group.reserveGutters}\n          density={density}\n          gap={rowGap}\n          dataTestId={testId}\n        >\n          {rows.map((row) => {\n            const id = getRowId(row);\n            // A FRAGMENT, NOT A BOX. The row is subgrid over the group's tracks\n            // (`gridColumn: span railCount`), which only resolves while the card\n            // is a DIRECT child of the group's grid. One wrapper element and the\n            // span is measured against a grid that isn't there, so every rail\n            // collapses — the exact failure the group exists to prevent.\n            return (\n              <React.Fragment key={id}>\n                {renderListRow(row, selectionFor(id))}\n              </React.Fragment>\n            );\n          })}\n        </ListCardGroup>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{ mt: 1.5, display: \"flex\", flexDirection: \"column\", gap: rowGap }}\n      data-testid={testId}\n    >\n      {rows.map((row) => {\n        const id = getRowId(row);\n        return <Box key={id}>{renderListRow(row, selectionFor(id))}</Box>;\n      })}\n    </Box>\n  );\n}\n\n/* ── Body selector (board vs list vs cards vs table, from context) ───────── */\n\ninterface GridMainProps<T extends Record<string, unknown>> {\n  c: DataViewsController<T>;\n  getRowId: (row: T) => string | number;\n  renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  /** Opt-in \"Lista\" layout — one full-width row per record. */\n  renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  /** The Lista's shared columns. Omitted, each row resolves its own tracks. */\n  listGroup?: ListGroupConfig<T>;\n  /** Opt-in \"Quadro\" (board) layout — needs `renderCard`, since it reuses the card. */\n  board?: BoardConfig<T>;\n  /** Opt-in expandable rows — the TABLE only; the headerless layouts ignore it. */\n  rowDetail?: DataViewRowDetail<T>;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n  testIdPrefix: string;\n}\n\n/**\n * The headerless layouts, each preceded by its own select-all.\n *\n * The strip is rendered HERE rather than inside each body so all three agree on\n * where it sits and what it says — and so the table, which already has one in\n * its `<thead>`, never gets a second.\n */\nfunction Headerless<T extends Record<string, unknown>>({\n  c,\n  getRowId,\n  testIdPrefix,\n  children,\n}: {\n  c: DataViewsController<T>;\n  getRowId: (row: T) => string | number;\n  testIdPrefix: string;\n  children: React.ReactNode;\n}): React.JSX.Element {\n  return (\n    <>\n      <SelectAllStrip\n        rows={c.matched}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onChange={(next) => c.setSelectedIds(next)}\n        testIdPrefix={testIdPrefix}\n      />\n      {children}\n    </>\n  );\n}\n\n/**\n * The body for one of the three HEADERLESS layouts, or `null` for the table.\n *\n * Split out from {@link GridMain} so the select-all strip is wrapped around the\n * result exactly once instead of being repeated identically in every branch —\n * which is also what keeps either function inside the line budget.\n */\nfunction headerlessBody<T extends Record<string, unknown>>(\n  { c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }: GridMainProps<T>,\n  { layout, zoom, density }: ReturnType<typeof useDataViewsLayout>,\n): React.ReactNode | null {\n  if (layout === \"list\" && renderListRow) {\n    return (\n      <ListBody\n        rows={c.matched}\n        renderListRow={renderListRow}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        rowGap={DENSITY_ROW_PADDING[density]}\n        group={listGroup}\n        density={density}\n        dataTestId={dataTestId}\n        emptyState={emptyState}\n      />\n    );\n  }\n  if (layout === \"board\" && board && renderCard) {\n    return (\n      <DataViewsBoard\n        rows={c.matched}\n        board={board}\n        getRowId={getRowId}\n        renderCard={renderCard}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        // DENSITY, not zoom: the board's own knob in the Exibição tab is how\n        // wide its columns are, and it is the only sizing control the board\n        // has since the zoom slider was removed.\n        cardScale={DENSITY_BOARD_SCALE[density]}\n        dataTestId={dataTestId}\n      />\n    );\n  }\n  if (layout === \"cards\" && renderCard) {\n    return (\n      <CardBody\n        rows={c.matched}\n        renderCard={renderCard}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        targetCardWidth={cardTargetWidthFor(zoom, density)}\n        cardScale={cardScaleForZoom(zoom)}\n        dataTestId={dataTestId}\n        emptyState={emptyState}\n      />\n    );\n  }\n  return null;\n}\n\n/** Picks the body from the layout context: board, list, cards, or the dense grid. */\nexport function GridMain<T extends Record<string, unknown>>(props: GridMainProps<T>): React.JSX.Element {\n  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;\n  const layoutState = useDataViewsLayout();\n  const body = headerlessBody(props, layoutState);\n  if (body) {\n    return (\n      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>\n        {body}\n      </Headerless>\n    );\n  }\n  return (\n    <GridBody\n      rows={c.matched}\n      columns={c.gridColumns}\n      getRowId={getRowId}\n      selectedIds={[...c.selectedIds]}\n      onChangeSelected={(ids) => c.setSelectedIds(new Set(ids))}\n      sortBy={c.state.sortBy}\n      onChangeSortBy={(next: GridSort[]) => c.patch({ sortBy: next })}\n      sortMode={c.serverMode ? \"server\" : \"client\"}\n      rowPadding={DENSITY_ROW_PADDING[layoutState.density]}\n      rowDetail={props.rowDetail}\n      dataTestId={dataTestId}\n      emptyState={emptyState}\n    />\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-JOKWTRWL.js

@@ -0,0 +1,112 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/CardKit/list-card-parts.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DetailColumns({ left, right }) {
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 3 }, children: [
+    /* @__PURE__ */ jsx(default2, { sx: { minWidth: 0 }, children: left }),
+    /* @__PURE__ */ jsx(default2, { sx: { minWidth: 0 }, children: right })
+  ] });
+}
+function Fact({ label, value }) {
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", justifyContent: "space-between", gap: 2, fontSize: sxRem(13), py: 0.25 }, children: [
+    /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "text.secondary", flexShrink: 0 }, children: label }),
+    /* @__PURE__ */ jsx(default2, { component: "span", sx: { minWidth: 0, textAlign: "right", overflowWrap: "anywhere" }, children: value })
+  ] });
+}
+function Ledger({
+  lines,
+  total
+}) {
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    lines.map((line) => /* @__PURE__ */ jsxs(
+      default2,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          fontSize: sxRem(13),
+          color: line.tone === "info" ? "info.main" : "text.secondary"
+        },
+        children: [
+          /* @__PURE__ */ jsx(default2, { component: "span", children: line.label }),
+          /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: line.value })
+        ]
+      },
+      line.label
+    )),
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          fontWeight: 700,
+          borderTop: 1,
+          borderColor: "divider",
+          pt: 0.5,
+          mt: 0.5
+        },
+        children: [
+          /* @__PURE__ */ jsx(default2, { component: "span", children: total.label }),
+          /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: total.value })
+        ]
+      }
+    )
+  ] });
+}
+function BodyHeading({ children }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        fontSize: sxRem(11),
+        fontWeight: 700,
+        letterSpacing: sxRem(0.4),
+        textTransform: "uppercase",
+        color: "text.disabled",
+        mb: 0.5
+      },
+      children
+    }
+  );
+}
+function TagList({
+  items,
+  empty
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { fontSize: sxRem(13), color: "text.disabled" }, children: empty });
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: items.map((item) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      sx: {
+        fontSize: sxRem(12),
+        px: 0.75,
+        py: 0.25,
+        borderRadius: 1,
+        bgcolor: "action.hover",
+        color: "text.secondary",
+        fontFamily: "monospace"
+      },
+      children: item
+    },
+    item
+  )) });
+}
+
+export {
+  DetailColumns,
+  Fact,
+  Ledger,
+  BodyHeading,
+  TagList
+};
+//# sourceMappingURL=chunk-JOKWTRWL.js.map

package/dist/chunk-JOKWTRWL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/CardKit/list-card-parts.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX, ReactNode } from 'react';\n\nimport { Box } from '../../../mui/Box';\n\nimport type { CardFactProps, CardLedgerLine } from './CardKit.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.\n *\n * `BaseListCard` says nothing about what goes inside a row's expanded area — it\n * spans the rails and stops, because the design belongs to the consumer. Right\n * for the card; wrong as the place where every entity in an admin app invents\n * its own two-column layout, its own label/value pair and its own ledger.\n *\n * So the four shapes that actually repeat live here, once. Nothing here knows a\n * domain: they take `ReactNode` and lay it out.\n */\n\n/** The expanded body's two-column split: detail on the left, a ledger right. */\nexport function DetailColumns({ left, right }: { left: ReactNode; right: ReactNode }): JSX.Element {\n  return (\n    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>\n      <Box sx={{ minWidth: 0 }}>{left}</Box>\n      <Box sx={{ minWidth: 0 }}>{right}</Box>\n    </Box>\n  );\n}\n\n/**\n * One labelled fact inside an expanded body.\n *\n * Horizontal, not stacked: the body is already a wide area with room for a\n * label beside its value, and stacking them there would ape the summary rails\n * above without their alignment.\n */\nexport function Fact({ label, value }: CardFactProps): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: sxRem(13), py: 0.25 }}>\n      <Box component=\"span\" sx={{ color: 'text.secondary', flexShrink: 0 }}>\n        {label}\n      </Box>\n      <Box component=\"span\" sx={{ minWidth: 0, textAlign: 'right', overflowWrap: 'anywhere' }}>\n        {value}\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A money ledger: rows of label/amount, then a ruled total.\n *\n * The total is separated by a RULE rather than by weight alone, because a\n * subtotal and a total in one column with only bold between them is the classic\n * misread — the eye lands on whichever number is larger.\n *\n * The figures arrive pre-formatted. This is a layout, and a component that\n * formatted money would be choosing a locale on the consumer's behalf.\n */\nexport function Ledger({\n  lines,\n  total,\n}: {\n  lines: CardLedgerLine[];\n  total: { label: string; value: ReactNode };\n}): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {lines.map((line) => (\n        <Box\n          key={line.label}\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            fontSize: sxRem(13),\n            color: line.tone === 'info' ? 'info.main' : 'text.secondary',\n          }}\n        >\n          <Box component=\"span\">{line.label}</Box>\n          <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n            {line.value}\n          </Box>\n        </Box>\n      ))}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          fontWeight: 700,\n          borderTop: 1,\n          borderColor: 'divider',\n          pt: 0.5,\n          mt: 0.5,\n        }}\n      >\n        <Box component=\"span\">{total.label}</Box>\n        <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n          {total.value}\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading inside the expanded body, for a section that needs naming. */\nexport function BodyHeading({ children }: { children: ReactNode }): JSX.Element {\n  return (\n    <Box\n      sx={{\n        fontSize: sxRem(11),\n        fontWeight: 700,\n        letterSpacing: sxRem(0.4),\n        textTransform: 'uppercase',\n        color: 'text.disabled',\n        mb: 0.5,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * A wrapping run of small items — permission names, role names, target ids.\n *\n * The whole reason several entities earn a list card at all: a `string[]` has no\n * honest table cell. Truncated to \"3 items\" it says nothing; printed in full it\n * destroys the column. Here it simply wraps.\n */\nexport function TagList({\n  items,\n  empty,\n}: {\n  items: readonly string[];\n  /** What to show for an empty run — the consumer's sentence, no default. */\n  empty: string;\n}): JSX.Element {\n  if (items.length === 0) {\n    return <Box sx={{ fontSize: sxRem(13), color: 'text.disabled' }}>{empty}</Box>;\n  }\n  return (\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n      {items.map((item) => (\n        <Box\n          key={item}\n          component=\"span\"\n          sx={{\n            fontSize: sxRem(12),\n            px: 0.75,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: 'action.hover',\n            color: 'text.secondary',\n            fontFamily: 'monospace',\n          }}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-K4EKTMTC.js

@@ -0,0 +1,100 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-drag.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var DragContainerContext = createContext(null);
+function DragContainerProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(DragContainerContext.Provider, { value, children });
+}
+function useDragItem(dragId) {
+  const container = useContext(DragContainerContext);
+  if (!container || dragId === void 0) {
+    return { draggable: false, itemProps: {}, handleProps: void 0, dragging: false, dropEdge: null };
+  }
+  const indicator = container.dropIndicator;
+  return {
+    draggable: true,
+    itemProps: container.itemProps(dragId),
+    handleProps: container.handleProps?.(dragId),
+    dragging: container.activeId === dragId,
+    dropEdge: indicator != null && indicator.id === dragId ? indicator.edge : null
+  };
+}
+function DropIndicator({ edge }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      "aria-hidden": true,
+      "data-slot": "drop-indicator",
+      "data-drop-edge": edge,
+      sx: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        // Centred ON the gap rather than inside the card: the item lands
+        // BETWEEN two rows, and a rule sitting within one of them reads as
+        // "into this row" instead.
+        ...edge === "before" ? { top: sxRem(-2) } : { bottom: sxRem(-2) },
+        height: sxRem(3),
+        borderRadius: 2,
+        bgcolor: "primary.main",
+        pointerEvents: "none",
+        zIndex: 2
+      }
+    }
+  );
+}
+function DragHandle({
+  handleProps,
+  gated,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      "aria-hidden": handleProps ? void 0 : true,
+      "data-testid": testId,
+      ...handleProps,
+      sx: {
+        display: "inline-grid",
+        gridTemplateColumns: (theme) => `repeat(2, ${rem(theme, 3)})`,
+        gap: sxRem(2),
+        flexShrink: 0,
+        p: 0.5,
+        borderRadius: 1,
+        color: "text.disabled",
+        cursor: gated ? "grab" : "inherit",
+        touchAction: "none",
+        "&:active": { cursor: gated ? "grabbing" : "inherit" },
+        "&:hover": { color: "text.secondary" }
+      },
+      children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "span",
+          sx: { width: sxRem(3), height: sxRem(3), borderRadius: "50%", bgcolor: "currentColor" }
+        },
+        index
+      ))
+    }
+  );
+}
+
+export {
+  DragContainerProvider,
+  useDragItem,
+  DropIndicator,
+  DragHandle
+};
+//# sourceMappingURL=chunk-K4EKTMTC.js.map

package/dist/chunk-K4EKTMTC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-drag.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * DRAGGING, OWNED BY THE CONTAINER AND NOT BY THE CARD.\n *\n * A card cannot know whether it is draggable. The same `BaseListCard` renders\n * inside a reorderable queue, a read-only report and a board column that moves\n * items between columns — and only the thing holding them knows which. So the\n * container publishes a drag context and every card inside it becomes\n * draggable; a card with no container above it renders exactly as before, with\n * no handle and no listeners.\n *\n * This is a SEAM, not a drag implementation. It carries whatever props the\n * host's library hands out — dnd-kit's `attributes`/`listeners`, react-dnd's\n * connector output, or plain HTML5 `draggable` + `onDragStart` — because\n * picking one of those for every consumer of `@12-apps/ui` is a decision this\n * package has no business making. There is no drag dependency here, and adding\n * one would force it on every app that installs the library.\n */\n\n/** The props a container hands to one item. Deliberately untyped-ish: each DnD library has its own shape. */\nexport type DragItemProps = Record<string, unknown>;\n\nexport interface DragContainerValue {\n  /**\n   * Props for the item's ROOT — the element that moves. dnd-kit wants its\n   * `setNodeRef` and transform style here; HTML5 wants `draggable` and\n   * `onDragStart`.\n   */\n  itemProps: (id: string | number) => DragItemProps;\n  /**\n   * Props for the HANDLE alone, when the container wants drags to start only\n   * from the grip.\n   *\n   * Whole-card dragging breaks the two things a card must still do: selecting\n   * text in it, and hitting the checkbox without the row sliding away. When a\n   * container returns handle props, the card puts them on the grip and leaves\n   * the rest of itself alone.\n   */\n  handleProps?: (id: string | number) => DragItemProps;\n  /** The id currently being dragged, so its card can dim itself. */\n  activeId?: string | number | null;\n  /**\n   * WHERE THE DRAGGED ITEM WOULD LAND — the one thing a drag cannot be honest\n   * without.\n   *\n   * A list that dims the row you picked up and shows nothing else asks you to\n   * guess the outcome and find out by dropping. The marker turns that into a\n   * statement: THIS gap is where it goes.\n   *\n   * Published by the container, not computed by the card, for the same reason\n   * everything else here is: only the thing holding the items knows the\n   * geometry — which one you are over, which edge of it, and whether that\n   * position is legal. A card knows none of that about its neighbours.\n   *\n   * `null` while nothing is being dragged, or while the pointer is over no\n   * valid target.\n   */\n  dropIndicator?: { id: string | number; edge: \"before\" | \"after\" } | null;\n}\n\nconst DragContainerContext = createContext<DragContainerValue | null>(null);\n\n/**\n * Marks everything inside as draggable. Cards read this; nothing else does.\n */\nexport function DragContainerProvider({\n  value,\n  children,\n}: {\n  value: DragContainerValue;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <DragContainerContext.Provider value={value}>{children}</DragContainerContext.Provider>;\n}\n\n/**\n * What one card needs to know about dragging.\n *\n * Returns the inert answer when there is no container OR no `dragId` — a card\n * that forgot its id must not render a handle that does nothing, which is worse\n * than no handle at all.\n */\nexport function useDragItem(dragId: string | number | undefined): {\n  draggable: boolean;\n  itemProps: DragItemProps;\n  handleProps: DragItemProps | undefined;\n  dragging: boolean;\n  /** Which of this card's edges the marker sits on, or null for neither. */\n  dropEdge: \"before\" | \"after\" | null;\n} {\n  const container = useContext(DragContainerContext);\n  if (!container || dragId === undefined) {\n    return { draggable: false, itemProps: {}, handleProps: undefined, dragging: false, dropEdge: null };\n  }\n  const indicator = container.dropIndicator;\n  return {\n    draggable: true,\n    itemProps: container.itemProps(dragId),\n    handleProps: container.handleProps?.(dragId),\n    dragging: container.activeId === dragId,\n    dropEdge: indicator != null && indicator.id === dragId ? indicator.edge : null,\n  };\n}\n\n/**\n * THE DROP MARKER — one rule across the card's edge, drawn where the item lands.\n *\n * Shared by every draggable surface rather than reimplemented per card, so a\n * reorderable list, a board column and a grid of tiles all say the same thing\n * the same way. A consumer wiring its own DnD gets this for free by publishing\n * `dropIndicator`; it never draws the marker itself.\n *\n * ABSOLUTE, AND OUTSIDE THE FLOW ON PURPOSE. A marker that took layout space\n * would push every row below it down by its own height the moment it appeared —\n * the list would twitch as you dragged across it, and the gap you were aiming\n * at would move out from under the pointer. Drawn over the gap instead, nothing\n * reflows.\n *\n * `pointerEvents: none` so it cannot swallow the dragover events that placed it,\n * and `aria-hidden` because the position it reports belongs in a live region the\n * LIST owns — fifty rows each announcing a marker is a screen-reader nightmare.\n */\nexport function DropIndicator({ edge }: { edge: \"before\" | \"after\" }): React.JSX.Element {\n  return (\n    <Box\n      aria-hidden\n      data-slot=\"drop-indicator\"\n      data-drop-edge={edge}\n      sx={{\n        position: \"absolute\",\n        left: 0,\n        right: 0,\n        // Centred ON the gap rather than inside the card: the item lands\n        // BETWEEN two rows, and a rule sitting within one of them reads as\n        // \"into this row\" instead.\n        ...(edge === \"before\" ? { top: sxRem(-2) } : { bottom: sxRem(-2) }),\n        height: sxRem(3),\n        borderRadius: 2,\n        bgcolor: \"primary.main\",\n        pointerEvents: \"none\",\n        zIndex: 2,\n      }}\n    />\n  );\n}\n\n/**\n * The grip. Six dots, the convention everywhere, drawn rather than imported so\n * this costs no icon dependency.\n *\n * `cursor: grab` on the handle only when the container gates drags to it —\n * otherwise the whole card carries the cursor and the handle is just an\n * affordance saying so.\n */\nexport function DragHandle({\n  handleProps,\n  gated,\n  testId,\n}: {\n  handleProps: DragItemProps | undefined;\n  gated: boolean;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden={handleProps ? undefined : true}\n      data-testid={testId}\n      {...handleProps}\n      sx={{\n        display: \"inline-grid\",\n        gridTemplateColumns: (theme: Theme) => `repeat(2, ${rem(theme, 3)})`,\n        gap: sxRem(2),\n        flexShrink: 0,\n        p: 0.5,\n        borderRadius: 1,\n        color: \"text.disabled\",\n        cursor: gated ? \"grab\" : \"inherit\",\n        touchAction: \"none\",\n        \"&:active\": { cursor: gated ? \"grabbing\" : \"inherit\" },\n        \"&:hover\": { color: \"text.secondary\" },\n      }}\n    >\n      {Array.from({ length: 6 }).map((_, index) => (\n        <Box\n          key={index}\n          component=\"span\"\n          sx={{ width: sxRem(3), height: sxRem(3), borderRadius: \"50%\", bgcolor: \"currentColor\" }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,SAAS,eAAe,kBAAkC;AA6EjD;AAZT,IAAM,uBAAuB,cAAyC,IAAI;AAKnE,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGsB;AACpB,SAAO,oBAAC,qBAAqB,UAArB,EAA8B,OAAe,UAAS;AAChE;AASO,SAAS,YAAY,QAO1B;AACA,QAAM,YAAY,WAAW,oBAAoB;AACjD,MAAI,CAAC,aAAa,WAAW,QAAW;AACtC,WAAO,EAAE,WAAW,OAAO,WAAW,CAAC,GAAG,aAAa,QAAW,UAAU,OAAO,UAAU,KAAK;AAAA,EACpG;AACA,QAAM,YAAY,UAAU;AAC5B,SAAO;AAAA,IACL,WAAW;AAAA,IACX,WAAW,UAAU,UAAU,MAAM;AAAA,IACrC,aAAa,UAAU,cAAc,MAAM;AAAA,IAC3C,UAAU,UAAU,aAAa;AAAA,IACjC,UAAU,aAAa,QAAQ,UAAU,OAAO,SAAS,UAAU,OAAO;AAAA,EAC5E;AACF;AAoBO,SAAS,cAAc,EAAE,KAAK,GAAoD;AACvF,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,IAAI;AAAA,QACF,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA;AAAA;AAAA;AAAA,QAIP,GAAI,SAAS,WAAW,EAAE,KAAK,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,MAAM,EAAE,EAAE;AAAA,QACjE,QAAQ,MAAM,CAAC;AAAA,QACf,cAAc;AAAA,QACd,SAAS;AAAA,QACT,eAAe;AAAA,QACf,QAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAa,cAAc,SAAY;AAAA,MACvC,eAAa;AAAA,MACZ,GAAG;AAAA,MACJ,IAAI;AAAA,QACF,SAAS;AAAA,QACT,qBAAqB,CAAC,UAAiB,aAAa,IAAI,OAAO,CAAC,CAAC;AAAA,QACjE,KAAK,MAAM,CAAC;AAAA,QACZ,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,cAAc;AAAA,QACd,OAAO;AAAA,QACP,QAAQ,QAAQ,SAAS;AAAA,QACzB,aAAa;AAAA,QACb,YAAY,EAAE,QAAQ,QAAQ,aAAa,UAAU;AAAA,QACrD,WAAW,EAAE,OAAO,iBAAiB;AAAA,MACvC;AAAA,MAEC,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACjC;AAAA,QAACA;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,IAAI,EAAE,OAAO,MAAM,CAAC,GAAG,QAAQ,MAAM,CAAC,GAAG,cAAc,OAAO,SAAS,eAAe;AAAA;AAAA,QAFjF;AAAA,MAGP,CACD;AAAA;AAAA,EACH;AAEJ;","names":["default"]}