@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-SJO3K7SB.js

@@ -0,0 +1,124 @@
+import {
+  SaveViewModal
+} from "./chunk-2BIVCYTO.js";
+import {
+  ManageViewsDialog
+} from "./chunk-LT4NEKXB.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  SavedViewsMenu
+} from "./chunk-EL7CMURV.js";
+import {
+  Alert
+} from "./chunk-AUHYR7ID.js";
+
+// src/components/data-display/DataViews/data-views-table-parts.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ViewMutationErrorAlert({
+  error,
+  onClose,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (!error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      variant: "danger",
+      title: copy.nav.updateFailed,
+      description: error,
+      closable: true,
+      closeLabel: copy.nav.dismissError,
+      onClose,
+      "data-testid": `${testIdPrefix}-views-mutation-error`
+    }
+  );
+}
+function ViewsMenuSlot({
+  views,
+  activeViewName,
+  applyView,
+  selectMain,
+  openCreate,
+  openEdit,
+  handleDelete,
+  patchView,
+  onManageAll,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    SavedViewsMenu,
+    {
+      labels: copy.savedViewsMenu,
+      views,
+      activeViewName,
+      onApply: applyView,
+      onSelectMain: selectMain,
+      onSaveCurrent: openCreate,
+      onEdit: openEdit,
+      onDelete: (view) => void handleDelete(view),
+      onSetDefault: (view) => void patchView(view, { isDefault: true }),
+      onTogglePin: (view) => void patchView(view, { pinned: !view.pinned }),
+      onToggleShare: (view) => void patchView(view, { shared: !view.shared }),
+      onManageAll,
+      testIdPrefix: `${testIdPrefix}-views`
+    }
+  );
+}
+function ViewDialogs({
+  saveOpen,
+  onCloseSave,
+  currentState,
+  fields,
+  columns,
+  editing,
+  onSave,
+  manageOpen,
+  onCloseManage,
+  views,
+  onEditFromManage,
+  onDelete,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SaveViewModal,
+      {
+        open: saveOpen,
+        onClose: onCloseSave,
+        currentState,
+        fields,
+        columns,
+        editing,
+        onSave,
+        testIdPrefix: `${testIdPrefix}-views`
+      },
+      editing ? `edit-${editing.id}` : "create"
+    ),
+    /* @__PURE__ */ jsx(
+      ManageViewsDialog,
+      {
+        confirmCopy: copy.confirmAction,
+        open: manageOpen,
+        onClose: onCloseManage,
+        views,
+        onEdit: onEditFromManage,
+        onDelete,
+        testIdPrefix: `${testIdPrefix}-views`
+      }
+    )
+  ] });
+}
+
+export {
+  ViewMutationErrorAlert,
+  ViewsMenuSlot,
+  ViewDialogs
+};
+//# sourceMappingURL=chunk-SJO3K7SB.js.map

package/dist/chunk-SOHQPPYJ.js

@@ -0,0 +1,60 @@
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-axis.ts
+var DEFAULT_MAX_CATEGORY_TICKS = 8;
+var DEFAULT_TICK_LABEL_MAX_CHARS = 12;
+function selectCategoryTicks(values, maxTicks) {
+  if (maxTicks < 1 || values.length <= maxTicks) return void 0;
+  if (new Set(values).size !== values.length) return void 0;
+  const step = Math.ceil(values.length / maxTicks);
+  const kept = [];
+  for (let index = values.length - 1; index >= 0; index -= step) {
+    const value = values[index];
+    if (value !== void 0) kept.push(value);
+  }
+  return kept.reverse();
+}
+function categoryValues(data, xAxisKey) {
+  const values = [];
+  for (const row of data) {
+    const value = row[xAxisKey];
+    if (value !== null && value !== void 0) values.push(value);
+  }
+  return values;
+}
+function truncateTickLabel(value, maxChars) {
+  const text = value === null || value === void 0 ? "" : String(value);
+  if (maxChars < 1 || text.length <= maxChars) return text;
+  return `${text.slice(0, maxChars - 1)}\u2026`;
+}
+function resolveAxisConfig(props, tickMargin) {
+  const maxChars = props.tickLabelMaxChars ?? DEFAULT_TICK_LABEL_MAX_CHARS;
+  return {
+    tickMargin,
+    categoryTicks: selectCategoryTicks(
+      categoryValues(props.data, props.xAxisKey ?? "name"),
+      props.maxCategoryTicks ?? DEFAULT_MAX_CATEGORY_TICKS
+    ),
+    tickFormatter: (value) => truncateTickLabel(value, maxChars)
+  };
+}
+function resolveBarGeometry(props, theme) {
+  const radius = remPx(theme, props.barRadius ?? 3);
+  return {
+    // A stacked segment rounded on its top corners tears a notch out of the
+    // segment above it, so stacks stay square.
+    radius: props.stacked ? 0 : [radius, radius, 0, 0],
+    maxBarSize: remPx(theme, props.maxBarWidth ?? 38)
+  };
+}
+
+export {
+  selectCategoryTicks,
+  categoryValues,
+  truncateTickLabel,
+  resolveAxisConfig,
+  resolveBarGeometry
+};
+//# sourceMappingURL=chunk-SOHQPPYJ.js.map

package/dist/chunk-SOHQPPYJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-axis.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ChartDataPoint, ChartProps } from './Chart.types';\nimport { remPx } from '../../../tokens/relative';\n\n/**\n * Cartesian axis + bar geometry: the rules that keep a chart readable rather\n * than merely correct (FUT-391 visual pass).\n *\n * Three of them are pass/fail by looking at the rendered chart:\n *\n * - **No overlapping text.** The bottom value tick sits ON the x-axis line and\n *   the first category tick sits ON the y-axis line, so the two labels meet at\n *   the corner. Recharts' default `tickMargin` of 2 leaves the category label's\n *   cap height inside the value label's descender — a few px of overlap at\n *   every viewport. The margin has to clear the value label's box, which grows\n *   with the font, hence a per-size value ({@link SIZE_PRESETS}).\n * - **Skip every nth tick, always keep the last, truncate at ~12 chars.** With\n *   more categories than fit, Recharts thins them only when it can measure text\n *   (never server-side, where `getStringSize` returns 0 and every label renders\n *   on top of its neighbour). Thinning here is deterministic and viewport-free.\n * - **Bars rounded, capped, never touching the frame.** A two-category bar\n *   chart in a wide card draws 150px slabs flush against the axis; the cap is\n *   what turns them back into bars.\n */\n\n/** Category ticks kept before thinning starts. */\nconst DEFAULT_MAX_CATEGORY_TICKS = 8;\n/** Category tick labels longer than this are truncated with an ellipsis. */\nconst DEFAULT_TICK_LABEL_MAX_CHARS = 12;\n\n/**\n * Thin a category axis to at most `maxTicks` labels, keeping every nth.\n *\n * The walk runs from the END so the last category is always labelled — the\n * most recent day/bucket is the one a reader looks for first. Returns\n * `undefined` when everything already fits, which leaves Recharts' own\n * width-aware thinning in charge of the common small-data case.\n *\n * Also `undefined` when a value repeats: Recharts places an explicit tick by\n * looking its value up in the scale, so a duplicate would land the label on\n * the first row that carries it rather than on the row it was picked for.\n */\nexport function selectCategoryTicks(\n  values: ReadonlyArray<string | number>,\n  maxTicks: number,\n): Array<string | number> | undefined {\n  if (maxTicks < 1 || values.length <= maxTicks) return undefined;\n  if (new Set(values).size !== values.length) return undefined;\n  const step = Math.ceil(values.length / maxTicks);\n  const kept: Array<string | number> = [];\n  for (let index = values.length - 1; index >= 0; index -= step) {\n    const value = values[index];\n    if (value !== undefined) kept.push(value);\n  }\n  return kept.reverse();\n}\n\n/** The category-axis values of `data`, in row order, skipping empty cells. */\nexport function categoryValues(\n  data: ReadonlyArray<ChartDataPoint>,\n  xAxisKey: string,\n): Array<string | number> {\n  const values: Array<string | number> = [];\n  for (const row of data) {\n    const value = row[xAxisKey];\n    if (value !== null && value !== undefined) values.push(value);\n  }\n  return values;\n}\n\n/** Shorten a tick label to `maxChars`, ellipsis included, never mid-render. */\nexport function truncateTickLabel(value: unknown, maxChars: number): string {\n  const text = value === null || value === undefined ? '' : String(value);\n  if (maxChars < 1 || text.length <= maxChars) return text;\n  return `${text.slice(0, maxChars - 1)}…`;\n}\n\n/** Resolved geometry for the shared cartesian axes. */\nexport interface CartesianAxisConfig {\n  /** Gap between an axis line and its tick labels, px. */\n  tickMargin: number;\n  /** Explicit category ticks once thinning applies; `undefined` = Recharts decides. */\n  categoryTicks: Array<string | number> | undefined;\n  /** Category tick label formatter (truncation). */\n  tickFormatter: (value: unknown) => string;\n}\n\n/** Resolved geometry for bar series. */\nexport interface BarGeometry {\n  /** Per-corner radius in rendered px, top corners only; `0` for stacked segments. */\n  radius: number | [number, number, number, number];\n  /** Cap on a bar's thickness in rendered px — also what keeps bars off the frame. */\n  maxBarSize: number;\n}\n\nexport function resolveAxisConfig(props: ChartProps, tickMargin: number): CartesianAxisConfig {\n  const maxChars = props.tickLabelMaxChars ?? DEFAULT_TICK_LABEL_MAX_CHARS;\n  return {\n    tickMargin,\n    categoryTicks: selectCategoryTicks(\n      categoryValues(props.data, props.xAxisKey ?? 'name'),\n      props.maxCategoryTicks ?? DEFAULT_MAX_CATEGORY_TICKS,\n    ),\n    tickFormatter: (value: unknown) => truncateTickLabel(value, maxChars),\n  };\n}\n\n/**\n * The bar geometry Recharts takes as px numbers, from design px through the\n * type scale: a 3px corner and a 38px thickness cap unless the caller says\n * otherwise.\n */\nexport function resolveBarGeometry(props: ChartProps, theme: Theme): BarGeometry {\n  const radius = remPx(theme, props.barRadius ?? 3);\n  return {\n    // A stacked segment rounded on its top corners tears a notch out of the\n    // segment above it, so stacks stay square.\n    radius: props.stacked ? 0 : [radius, radius, 0, 0],\n    maxBarSize: remPx(theme, props.maxBarWidth ?? 38),\n  };\n}\n"],"mappings":";;;;;AA2BA,IAAM,6BAA6B;AAEnC,IAAM,+BAA+B;AAc9B,SAAS,oBACd,QACA,UACoC;AACpC,MAAI,WAAW,KAAK,OAAO,UAAU,SAAU,QAAO;AACtD,MAAI,IAAI,IAAI,MAAM,EAAE,SAAS,OAAO,OAAQ,QAAO;AACnD,QAAM,OAAO,KAAK,KAAK,OAAO,SAAS,QAAQ;AAC/C,QAAM,OAA+B,CAAC;AACtC,WAAS,QAAQ,OAAO,SAAS,GAAG,SAAS,GAAG,SAAS,MAAM;AAC7D,UAAM,QAAQ,OAAO,KAAK;AAC1B,QAAI,UAAU,OAAW,MAAK,KAAK,KAAK;AAAA,EAC1C;AACA,SAAO,KAAK,QAAQ;AACtB;AAGO,SAAS,eACd,MACA,UACwB;AACxB,QAAM,SAAiC,CAAC;AACxC,aAAW,OAAO,MAAM;AACtB,UAAM,QAAQ,IAAI,QAAQ;AAC1B,QAAI,UAAU,QAAQ,UAAU,OAAW,QAAO,KAAK,KAAK;AAAA,EAC9D;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,OAAgB,UAA0B;AAC1E,QAAM,OAAO,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AACtE,MAAI,WAAW,KAAK,KAAK,UAAU,SAAU,QAAO;AACpD,SAAO,GAAG,KAAK,MAAM,GAAG,WAAW,CAAC,CAAC;AACvC;AAoBO,SAAS,kBAAkB,OAAmB,YAAyC;AAC5F,QAAM,WAAW,MAAM,qBAAqB;AAC5C,SAAO;AAAA,IACL;AAAA,IACA,eAAe;AAAA,MACb,eAAe,MAAM,MAAM,MAAM,YAAY,MAAM;AAAA,MACnD,MAAM,oBAAoB;AAAA,IAC5B;AAAA,IACA,eAAe,CAAC,UAAmB,kBAAkB,OAAO,QAAQ;AAAA,EACtE;AACF;AAOO,SAAS,mBAAmB,OAAmB,OAA2B;AAC/E,QAAM,SAAS,MAAM,OAAO,MAAM,aAAa,CAAC;AAChD,SAAO;AAAA;AAAA;AAAA,IAGL,QAAQ,MAAM,UAAU,IAAI,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,IACjD,YAAY,MAAM,OAAO,MAAM,eAAe,EAAE;AAAA,EAClD;AACF;","names":[]}

package/dist/chunk-SSS64KYB.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Input
+} from "./chunk-VURQZBFH.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.js";
+
+// src/components/form/total-form/Fields/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({ name, label, type = "text", placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, event.target.value)
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=chunk-SSS64KYB.js.map

package/dist/chunk-SYN46YL6.js

@@ -0,0 +1,271 @@
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-BYH5GPLT.js";
+import {
+  DragHandle,
+  useDragItem
+} from "./chunk-K4EKTMTC.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-4PRZLII7.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/base-card.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var cardSx = (opts) => {
+  const { aspectRatio, pad, scale, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    zoom: scale,
+    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    p: pad,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}
+  };
+};
+var OVERLAY_BAND_UNITS = 42 / 8;
+function contentGaps(opts) {
+  const { hasMedia, hasBody, overlays, pad } = opts;
+  const gap = pad * 0.5;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_UNITS - pad) : 0;
+  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
+}
+function CardOverlays({
+  selected,
+  onToggleSelect,
+  checkboxTestId,
+  menu
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected,
+        onChange: () => onToggleSelect(),
+        onClick: (event) => event.stopPropagation(),
+        size: "small",
+        "data-testid": checkboxTestId,
+        "aria-label": copy.selection.selectRow
+      }
+    ) }),
+    menu && /* @__PURE__ */ jsx(
+      default2,
+      {
+        sx: { position: "absolute", top: sxRem(4), right: sxRem(4), zIndex: 2 },
+        onClick: (event) => event.stopPropagation(),
+        children: menu
+      }
+    )
+  ] });
+}
+function CardMedia({ image, imageFallback }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 1,
+        "& img": { width: "100%", height: "100%", objectFit: "cover" }
+      },
+      children: image ?? imageFallback
+    }
+  );
+}
+function CardBodyContent({
+  children,
+  fill,
+  topGap
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: fill ? 1 : "none",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 0.75,
+        mt: topGap,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+}
+function CardCaption({
+  title,
+  subtitle,
+  topGap
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(default2, { sx: { mt: topGap, minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "heading",
+        size: "sm",
+        weight: "bold",
+        as: "p",
+        style: {
+          lineHeight: 1.15,
+          fontSize: rem(theme, 15.2),
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: title
+      }
+    ),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: subtitle })
+  ] });
+}
+function CardContents({
+  children,
+  image,
+  imageFallback,
+  title,
+  subtitle,
+  overlays,
+  pad
+}) {
+  const hasMedia = image != null || imageFallback != null;
+  const hasBody = children != null;
+  const hasCaption = title != null || subtitle != null;
+  const top = contentGaps({ hasMedia, hasBody, overlays, pad });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMedia && /* @__PURE__ */ jsx(CardMedia, { image, imageFallback }),
+    hasBody && /* @__PURE__ */ jsx(CardBodyContent, { fill: !hasMedia, topGap: top.body, children }),
+    hasCaption && /* @__PURE__ */ jsx(CardCaption, { title, subtitle, topGap: top.caption })
+  ] });
+}
+function useCardShell(props) {
+  const actionable = isActionable(props.state);
+  return {
+    selectable: isSelectable(props),
+    actionable,
+    theme: useTheme(),
+    slot: slotTestIds(props.testId),
+    scale: props.scale ?? 1,
+    // The card's own veto over the container's decision — see `CardSurfaceProps`.
+    drag: useDragItem(props.draggable === false || !actionable ? void 0 : props.dragId)
+  };
+}
+function BaseCard(props) {
+  const { aspectRatio = "4:3", selected = false } = props;
+  const { menu, onToggleSelect, onClick } = props;
+  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);
+  const dataTestId = props.testId;
+  const checkboxTestId = slot("checkbox");
+  const pad = 1.5;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      onClick,
+      dataTestId,
+      className: props.className,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      ...drag.itemProps,
+      sx: {
+        // The same corner the row uses: a Grade and a Lista of the same records
+        // sit beside each other, and a tile that rounds harder than the row
+        // reads as a different component.
+        borderRadius: CARD_RADIUS,
+        // The shared half — variant, colour, selection, effects — identical to
+        // the one BaseListCard uses, so a Grade and a Lista of the same records
+        // are dressed by one set of rules.
+        ...cardSurfaceStyles(
+          {
+            ...props,
+            selectable,
+            shape: "tile",
+            // A card mid-drag is a ghost of itself; the drop target is what the
+            // eye should be on.
+            state: drag.dragging ? "disabled" : props.state
+          },
+          theme
+        ),
+        // …and the tile's own geometry on top.
+        ...cardSx({
+          aspectRatio,
+          pad,
+          scale,
+          interactive: onClick != null,
+          draggable: drag.draggable && drag.handleProps === void 0
+        })
+      },
+      children: [
+        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            handleProps: drag.handleProps,
+            gated: drag.handleProps !== void 0,
+            testId: slot("drag")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CardOverlays,
+          {
+            selected,
+            onToggleSelect: selectable ? onToggleSelect ?? (() => {
+            }) : void 0,
+            checkboxTestId,
+            menu
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardContents,
+          {
+            image: props.image,
+            imageFallback: props.imageFallback,
+            title: props.title,
+            subtitle: props.subtitle,
+            overlays: selectable || menu != null,
+            pad,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  BaseCard
+};
+//# sourceMappingURL=chunk-SYN46YL6.js.map

package/dist/chunk-SYN46YL6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\n\nimport { useTheme, type CSSObject } from \"@mui/material/styles/index.js\";\n\n/** See the note on `CardSx` in `card-surface` — these fragments get merged. */\ntype CardSx = CSSObject | Record<string, unknown>;\n\nimport { Checkbox } from \"../../form/Checkbox\";\nimport { Card } from \"../../layout/Card\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { DragHandle, useDragItem } from \"./data-views-drag\";\nimport {\n  CARD_RADIUS,\n  cardSurfaceStyles,\n  isActionable,\n  isSelectable,\n  slotTestIds,\n  type CardSurfaceProps,\n} from \"./card-surface\";\nimport { CARD_ASPECT_RATIOS, type CardAspectRatio } from \"./data-views-types\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\nexport interface BaseCardProps extends CardSurfaceProps {\n  /** Extra body content below the caption (chips, meta). Optional. */\n  children?: ReactNode;\n  /** Tile proportion. Defaults to \"4:3\". */\n  aspectRatio?: CardAspectRatio;\n  /**\n   * Size multiplier from the zoom slider (1 = base).\n   *\n   * Applied as `zoom`, so the whole card grows together — padding, typography,\n   * the checkbox, the menu and the media alike — in step with its width, which\n   * the grid sizes to base × scale. A card at scale 2 renders at ~twice the\n   * size, its proportion preserved by `aspectRatio`. Default 1.\n   */\n  scale?: number;\n  /** Display-image node (e.g. an `<img>` / thumbnail) filling the media region. */\n  image?: ReactNode;\n  /** Shown centered in the media region when there is no `image` (icon/initial). */\n  imageFallback?: ReactNode;\n  /** First-class title, rendered in the caption. */\n  title?: ReactNode;\n  /** Secondary caption line under the title. */\n  subtitle?: ReactNode;\n  /** The 3-dots menu (or any action node) pinned to the top-right corner. */\n  menu?: ReactNode;\n  /** Toggle this card's selection. Omit to hide the checkbox (non-selectable). */\n  onToggleSelect?: () => void;\n  /**\n   * This card's id for drag purposes.\n   *\n   * Draggable ONLY inside a {@link DragContainerProvider} — see\n   * `data-views-drag`. On the board that is how a card moves between columns;\n   * in a grade it is how the operator reorders. Outside a container this is\n   * inert and no grip appears.\n   */\n  dragId?: string | number;\n  checkboxTestId?: string;\n}\n\n/**\n * The outlined-tile style: fixed ratio, scaled padding, selected/dimmed states.\n *\n * See the note on the row: `zoom` scales EVERY length in the subtree, including\n * the MUI internals (checkbox, chip, icon button) that no prop of ours reaches.\n * The grid still sizes the track to BASE_CARD_WIDTH x scale, so the tile fills\n * its track physically and lays its contents out in the unscaled box behind it\n * — which is what \"the whole card grows together\" was always meant to mean.\n */\nconst cardSx = (opts: {\n  aspectRatio: CardAspectRatio;\n  pad: number;\n  scale: number;\n  interactive: boolean;\n  draggable: boolean;\n}): CardSx => {\n  const { aspectRatio, pad, scale, interactive, draggable } = opts;\n  return {\n    position: \"relative\",\n    zoom: scale,\n    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflow: \"hidden\",\n    p: pad,\n    cursor: draggable ? \"grab\" : interactive ? \"pointer\" : undefined,\n    ...(draggable ? { touchAction: \"none\", \"&:active\": { cursor: \"grabbing\" } } : {}),\n  };\n};\n\n/**\n * How far the first block in flow must start below the tile's top edge to clear\n * the absolute overlays, in MUI spacing units: their 4px inset plus the\n * checkbox's 38px hit area (20px glyph in MUI's 9px padding), which is the\n * taller of the two corners — 42px at 8px a unit.\n */\nconst OVERLAY_BAND_UNITS = 42 / 8;\n\n/**\n * The top margin each stacked slot needs, in MUI spacing units.\n *\n * The overlays are absolute, so they cost the flow nothing — over MEDIA that is\n * the whole point (a checkbox on a thumbnail reads as a checkbox on a\n * thumbnail). Over TEXT it is a collision: a title-only tile started its first\n * line at the padding edge, directly under the checkbox, and rendered\n * `Selecionada` with the box sitting on the `Se`. So when nothing pictorial is\n * there to absorb them, whichever block comes first clears the band instead.\n */\nfunction contentGaps(opts: {\n  hasMedia: boolean;\n  hasBody: boolean;\n  overlays: boolean;\n  pad: number;\n}): { body: number; caption: number } {\n  const { hasMedia, hasBody, overlays, pad } = opts;\n  const gap = pad * 0.5;\n  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_UNITS - pad) : 0;\n  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };\n}\n\n/** The top-corner overlays: the select checkbox (left) and the menu slot (right). */\nfunction CardOverlays({\n  selected,\n  onToggleSelect,\n  checkboxTestId,\n  menu,\n}: Pick<BaseCardProps, \"selected\" | \"onToggleSelect\" | \"checkboxTestId\" | \"menu\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      {onToggleSelect && (\n        <Box sx={{ position: \"absolute\", top: sxRem(4), left: sxRem(4), zIndex: 2 }}>\n          <Checkbox\n            checked={selected}\n            onChange={() => onToggleSelect()}\n            // Selecting must never trigger the card's own click (open/edit).\n            onClick={(event) => event.stopPropagation()}\n            size=\"small\"\n            data-testid={checkboxTestId}\n            aria-label={copy.selection.selectRow}\n          />\n        </Box>\n      )}\n      {menu && (\n        <Box\n          sx={{ position: \"absolute\", top: sxRem(4), right: sxRem(4), zIndex: 2 }}\n          // Acting on the menu must never trigger the card's own click.\n          onClick={(event) => event.stopPropagation()}\n        >\n          {menu}\n        </Box>\n      )}\n    </>\n  );\n}\n\n/**\n * Media region: fills the tile above the caption; centers `imageFallback` when\n * there is no image so title-only entities still fill the ratio box and mixed\n * grids stay aligned.\n */\nfunction CardMedia({ image, imageFallback }: Pick<BaseCardProps, \"image\" | \"imageFallback\">): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        minHeight: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        overflow: \"hidden\",\n        borderRadius: 1,\n        \"& img\": { width: \"100%\", height: \"100%\", objectFit: \"cover\" },\n      }}\n    >\n      {image ?? imageFallback}\n    </Box>\n  );\n}\n\n/** The body slot (chips/meta); fills remaining space when there is no media. */\nfunction CardBodyContent({\n  children,\n  fill,\n  topGap,\n}: {\n  children: ReactNode;\n  fill: boolean;\n  topGap: number;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        flex: fill ? 1 : \"none\",\n        minHeight: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 0.75,\n        mt: topGap,\n        overflow: \"hidden\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/** The title/subtitle caption. */\nfunction CardCaption({\n  title,\n  subtitle,\n  topGap,\n}: {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  topGap: number;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box sx={{ mt: topGap, minWidth: 0 }}>\n      {title != null && (\n        <Text\n          variant=\"heading\"\n          size=\"sm\"\n          weight=\"bold\"\n          as=\"p\"\n          style={{\n            lineHeight: 1.15,\n            fontSize: rem(theme, 15.2),\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {title}\n        </Text>\n      )}\n      {subtitle != null && (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** The stacked media / body / caption slots inside the tile (below the overlays). */\nfunction CardContents({\n  children,\n  image,\n  imageFallback,\n  title,\n  subtitle,\n  overlays,\n  pad,\n}: Pick<BaseCardProps, \"children\" | \"image\" | \"imageFallback\" | \"title\" | \"subtitle\"> & {\n  overlays: boolean;\n  pad: number;\n}): React.JSX.Element {\n  const hasMedia = image != null || imageFallback != null;\n  const hasBody = children != null;\n  const hasCaption = title != null || subtitle != null;\n  const top = contentGaps({ hasMedia, hasBody, overlays, pad });\n  return (\n    <>\n      {hasMedia && <CardMedia image={image} imageFallback={imageFallback} />}\n      {hasBody && (\n        <CardBodyContent fill={!hasMedia} topGap={top.body}>\n          {children}\n        </CardBodyContent>\n      )}\n      {hasCaption && <CardCaption title={title} subtitle={subtitle} topGap={top.caption} />}\n    </>\n  );\n}\n\n/**\n * Reusable selectable card shell for the DataViews \"Grade\" (cards) layout, and\n * the ONLY card component that lives in `@12-apps/ui` — every domain \"kind card\"\n * (product, mesa, role, …) lives in the app and composes this envelope. See the\n * per-slot helpers above; this shell just assembles them within a fixed-ratio\n * tile. Reads no context, so it renders standalone as well as inside the grid.\n */\n/**\n * Everything the tile derives from its props before it can render — pulled out\n * so `BaseCard` itself stays inside the complexity budget.\n */\nfunction useCardShell(props: BaseCardProps) {\n  const actionable = isActionable(props.state);\n  return {\n    selectable: isSelectable(props),\n    actionable,\n    theme: useTheme(),\n    slot: slotTestIds(props.testId),\n    scale: props.scale ?? 1,\n    // The card's own veto over the container's decision — see `CardSurfaceProps`.\n    drag: useDragItem(props.draggable === false || !actionable ? undefined : props.dragId),\n  };\n}\n\nexport function BaseCard(props: BaseCardProps): React.JSX.Element {\n  const { aspectRatio = \"4:3\", selected = false } = props;\n  const { menu, onToggleSelect, onClick } = props;\n  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);\n  const dataTestId = props.testId;\n  const checkboxTestId = slot(\"checkbox\");\n  const pad = 1.5;\n\n  return (\n    <Card\n      variant=\"outlined\"\n      onClick={onClick}\n      dataTestId={dataTestId}\n      className={props.className}\n      aria-label={props[\"aria-label\"]}\n      aria-disabled={actionable ? undefined : true}\n      {...drag.itemProps}\n      // A PLAIN OBJECT, not a function. `Card` merges by spreading\n      // (`sx={{ ...defaults, ...sx }}`), and spreading a function yields\n      // nothing at all — the styles vanish silently, which is exactly how the\n      // first version of this shipped with no variants and no effects.\n      sx={{\n        // The same corner the row uses: a Grade and a Lista of the same records\n        // sit beside each other, and a tile that rounds harder than the row\n        // reads as a different component.\n        borderRadius: CARD_RADIUS,\n        // The shared half — variant, colour, selection, effects — identical to\n        // the one BaseListCard uses, so a Grade and a Lista of the same records\n        // are dressed by one set of rules.\n        ...cardSurfaceStyles(\n          {\n            ...props,\n            selectable,\n            shape: \"tile\",\n            // A card mid-drag is a ghost of itself; the drop target is what the\n            // eye should be on.\n            state: drag.dragging ? \"disabled\" : props.state,\n          },\n          theme,\n        ),\n        // …and the tile's own geometry on top.\n        ...cardSx({\n          aspectRatio, pad, scale,\n          interactive: onClick != null,\n          draggable: drag.draggable && drag.handleProps === undefined,\n        }),\n      }}\n    >\n      {/* Bottom-left, opposite the menu and clear of the checkbox — a grip in\n          the same corner as a control that toggles selection means every drag\n          starts with a near-miss on it. */}\n      {drag.draggable && (\n        <Box sx={{ position: \"absolute\", bottom: sxRem(4), left: sxRem(4), zIndex: 2 }}>\n          <DragHandle\n            handleProps={drag.handleProps}\n            gated={drag.handleProps !== undefined}\n            testId={slot(\"drag\")}\n          />\n        </Box>\n      )}\n      <CardOverlays\n        selected={selected}\n        onToggleSelect={selectable ? onToggleSelect ?? (() => {}) : undefined}\n        checkboxTestId={checkboxTestId}\n        menu={menu}\n      />\n      <CardContents\n        image={props.image}\n        imageFallback={props.imageFallback}\n        title={props.title}\n        subtitle={props.subtitle}\n        overlays={selectable || menu != null}\n        pad={pad}\n      >\n        {props.children}\n      </CardContents>\n    </Card>\n  );\n}\n"],"mappings":"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","names":["default"]}