@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-PH36XEB3.js

@@ -0,0 +1,134 @@
+import {
+  useAutocomplete
+} from "./chunk-362OGE5J.js";
+import {
+  AutocompleteInput,
+  ChipList,
+  DefaultSuggestion,
+  SuggestionListBox
+} from "./chunk-BN742L2M.js";
+import {
+  defaultGetKey,
+  defaultGetLabel,
+  defaultGetSuggestionType
+} from "./chunk-XBHQT4BQ.js";
+
+// src/components/form/Autocomplete/Autocomplete.tsx
+import Box from "@mui/material/Box/index.js";
+import ClickAwayListener from "@mui/material/ClickAwayListener/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveRenderConfig(p) {
+  return {
+    getKey: p.getKey ?? defaultGetKey,
+    getLabel: p.getLabel ?? defaultGetLabel,
+    getSuggestionType: p.getSuggestionType ?? defaultGetSuggestionType,
+    getDescription: p.getDescription,
+    renderSuggestion: p.renderSuggestion,
+    matchMode: p.matchMode ?? "contains",
+    multiple: Boolean(p.multiple),
+    selectedItems: p.selectedItems ?? [],
+    isLoading: Boolean(p.isLoading),
+    showGhostText: p.showGhostText ?? true,
+    placeholder: p.placeholder ?? p.copy.placeholder,
+    autoFocus: Boolean(p.autoFocus),
+    disabled: Boolean(p.disabled),
+    portal: p.portal ?? false,
+    className: p.className,
+    chipClassName: p.chipClassName,
+    inputAriaLabel: p.inputAriaLabel,
+    inputClassName: p.inputClassName,
+    listClassName: p.listClassName,
+    itemClassName: p.itemClassName,
+    activeItemClassName: p.activeItemClassName
+  };
+}
+function renderSuggestionNode(item, active, query, cfg) {
+  if (cfg.renderSuggestion) return cfg.renderSuggestion(item, { active, query });
+  return /* @__PURE__ */ jsx(
+    DefaultSuggestion,
+    {
+      item,
+      state: { active, query },
+      getLabel: cfg.getLabel,
+      getDescription: cfg.getDescription,
+      getSuggestionType: cfg.getSuggestionType,
+      matchMode: cfg.matchMode
+    }
+  );
+}
+var Autocomplete = (props) => {
+  const cfg = resolveRenderConfig(props);
+  const view = useAutocomplete(props);
+  const s = view.state;
+  const showNoResults = !cfg.isLoading && view.visibleSuggestions.length === 0 && Boolean(s.inputValue.trim());
+  return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: view.onClickAway, children: /* @__PURE__ */ jsxs(Box, { className: cfg.className, "data-testid": "autocomplete-container", children: [
+    cfg.multiple && cfg.selectedItems.length > 0 && /* @__PURE__ */ jsx(
+      ChipList,
+      {
+        items: cfg.selectedItems,
+        getKey: cfg.getKey,
+        getLabel: cfg.getLabel,
+        onRemove: view.removeSelectedItem,
+        chipClassName: cfg.chipClassName
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AutocompleteInput,
+      {
+        id: view.id,
+        listId: view.listId,
+        inputRef: s.inputRef,
+        inputValue: s.inputValue,
+        ghost: s.ghost,
+        showGhost: cfg.showGhostText,
+        isInputFocused: s.isInputFocused,
+        open: s.open,
+        activeDescendant: view.activeDescendant,
+        isLoading: cfg.isLoading,
+        disabled: cfg.disabled,
+        autoFocus: cfg.autoFocus,
+        placeholder: cfg.placeholder,
+        startAdornment: props.startAdornment,
+        inputAriaLabel: cfg.inputAriaLabel,
+        inputClassName: cfg.inputClassName,
+        onChange: view.onInputChange,
+        onKeyDown: view.onKeyDown,
+        onFocus: view.onFocus,
+        onBlur: view.onBlur,
+        onCompositionStart: () => s.setComposition(true),
+        onCompositionEnd: () => s.setComposition(false)
+      }
+    ),
+    s.open && /* @__PURE__ */ jsx(
+      SuggestionListBox,
+      {
+        copy: props.copy,
+        open: s.open,
+        anchorEl: s.inputRef.current,
+        portal: cfg.portal,
+        listRef: s.listRef,
+        listId: view.listId,
+        optionIdPrefix: view.optionIdPrefix,
+        items: view.visibleSuggestions,
+        activeIndex: s.activeIndex,
+        isLoading: cfg.isLoading,
+        showNoResults,
+        getKey: cfg.getKey,
+        onSelect: view.selectItem,
+        onHover: s.setActiveIndex,
+        renderItem: (item, active) => renderSuggestionNode(item, active, s.inputValue, cfg),
+        listClassName: cfg.listClassName,
+        itemClassName: cfg.itemClassName,
+        activeItemClassName: cfg.activeItemClassName
+      }
+    )
+  ] }) });
+};
+Autocomplete.displayName = "Autocomplete";
+var Autocomplete_default = Autocomplete;
+
+export {
+  Autocomplete,
+  Autocomplete_default
+};
+//# sourceMappingURL=chunk-PH36XEB3.js.map

package/dist/chunk-PL2AB5HJ.js

@@ -0,0 +1,211 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-scopes.tsx
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveScope(scopes, stored) {
+  if (scopes.length === 0) return void 0;
+  const declared = stored !== void 0 && scopes.some((scope) => scope.id === stored);
+  return declared ? stored : scopes[0]?.id;
+}
+function isDevelopment() {
+  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+}
+function assertNoScopePillOverlap(scopes, fieldIds, scopeFieldId) {
+  if (scopes.length === 0 || !isDevelopment()) return;
+  const clash = scopeFieldId !== void 0 && fieldIds.includes(scopeFieldId) ? scopeFieldId : void 0;
+  if (clash === void 0) return;
+  throw new Error(
+    `DataViews: the field "${clash}" is both the scope partition (scopes: ${scopes.map((scope) => scope.id).join(", ")}) and a filter field (fields: ${fieldIds.join(", ")}). A field may drive the scope tabs or a filter pill, not both \u2014 drop one of the two declarations.`
+  );
+}
+function warnScopesNeedServer(scopes, hasServer) {
+  if (scopes.length === 0 || hasServer || !isDevelopment()) return;
+  console.warn(
+    "DataViews: `scopes` require server mode. The scope is tracked and would be emitted, but with no `server` there is nothing to emit it to and rows are NOT filtered in the browser. Supply `server` (see DataViewServer) or drop the scopes."
+  );
+}
+function useScopeConfigChecks(scopes, fieldIds, scopeFieldId, hasServer) {
+  useMemo(() => {
+    assertNoScopePillOverlap(scopes, fieldIds, scopeFieldId);
+    warnScopesNeedServer(scopes, hasServer);
+  }, [scopes, fieldIds.join(","), scopeFieldId, hasServer]);
+}
+function tabLabel(label, count) {
+  return count === void 0 ? label : `${label}, ${count}`;
+}
+function arrowTarget(key, index, total) {
+  if (key === "ArrowRight") return (index + 1) % total;
+  if (key === "ArrowLeft") return (index - 1 + total) % total;
+  if (key === "Home") return 0;
+  if (key === "End") return total - 1;
+  return null;
+}
+function useScrollActiveIntoView(value) {
+  const stripRef = useRef(null);
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip || value === void 0) return;
+    const active = strip.querySelector('[role="tab"][aria-selected="true"]');
+    active?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [value]);
+  return stripRef;
+}
+var scopeTabSx = (active) => {
+  return {
+    // A 44px min target: the strip is the first thing a thumb reaches on a phone.
+    minHeight: sxRem(44),
+    px: 1.5,
+    py: 1,
+    border: 0,
+    borderBottom: (theme) => `${rem(theme, 2)} solid`,
+    borderStyle: "solid",
+    borderColor: active ? "primary.main" : "transparent",
+    background: "none",
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    font: "inherit",
+    fontSize: sxRem(13),
+    fontWeight: active ? 600 : 400,
+    color: active ? "primary.main" : "text.secondary",
+    "&:hover": { color: active ? "primary.main" : "text.primary" },
+    "&:focus-visible": {
+      outline: (theme) => `${rem(theme, 2)} solid`,
+      outlineColor: "primary.main",
+      outlineOffset: sxRem(-2)
+    }
+  };
+};
+function ScopeCount({
+  count,
+  active,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      "aria-hidden": "true",
+      "data-testid": testId,
+      sx: {
+        ml: 0.75,
+        px: 0.75,
+        borderRadius: 5,
+        fontSize: sxRem(11),
+        fontWeight: 600,
+        bgcolor: active ? "primary.main" : "action.selected",
+        color: active ? "primary.contrastText" : "text.secondary"
+      },
+      children: count
+    }
+  );
+}
+function ScopeTab({
+  scope,
+  index,
+  total,
+  active,
+  count,
+  onChange,
+  moveTo,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      component: "button",
+      type: "button",
+      role: "tab",
+      id: `${testIdPrefix}-scope-tab-${scope.id}`,
+      "aria-selected": active,
+      tabIndex: active ? 0 : -1,
+      "aria-label": tabLabel(scope.label, count),
+      "data-testid": `${testIdPrefix}-scope-${scope.id}`,
+      onClick: () => onChange(scope.id),
+      onKeyDown: (event) => {
+        const target = arrowTarget(event.key, index, total);
+        if (target === null) return;
+        event.preventDefault();
+        moveTo(target);
+      },
+      sx: scopeTabSx(active),
+      children: [
+        scope.label,
+        count !== void 0 && /* @__PURE__ */ jsx(
+          ScopeCount,
+          {
+            count,
+            active,
+            testId: `${testIdPrefix}-scope-count-${scope.id}`
+          }
+        )
+      ]
+    }
+  );
+}
+var STRIP_SX = {
+  display: "flex",
+  alignItems: "stretch",
+  gap: 0.5,
+  // One row that scrolls — never wraps, never collapses into a select.
+  flexWrap: "nowrap",
+  overflowX: "auto",
+  overflowY: "hidden",
+  scrollbarWidth: "thin",
+  borderBottom: 1,
+  borderColor: "divider",
+  mx: { xs: -2, md: -3 },
+  px: { xs: 2, md: 3 }
+};
+function DataViewsScopeTabs({
+  scopes,
+  value,
+  onChange,
+  counts,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const stripRef = useScrollActiveIntoView(value);
+  const moveTo = (index) => {
+    stripRef.current?.querySelectorAll('[role="tab"]')?.[index]?.focus();
+    const next = scopes[index];
+    if (next) onChange(next.id);
+  };
+  if (scopes.length === 0) return null;
+  const activeIndex = Math.max(
+    0,
+    scopes.findIndex((scope) => scope.id === value)
+  );
+  return /* @__PURE__ */ jsx(default2, { ref: stripRef, role: "tablist", "aria-label": copy.filters.scopesLabel, "data-testid": `${testIdPrefix}-scopes`, sx: STRIP_SX, children: scopes.map((scope, index) => /* @__PURE__ */ jsx(
+    ScopeTab,
+    {
+      scope,
+      index,
+      total: scopes.length,
+      active: index === activeIndex,
+      count: counts?.[scope.id],
+      onChange,
+      moveTo,
+      testIdPrefix
+    },
+    scope.id
+  )) });
+}
+
+export {
+  resolveScope,
+  assertNoScopePillOverlap,
+  warnScopesNeedServer,
+  useScopeConfigChecks,
+  DataViewsScopeTabs
+};
+//# sourceMappingURL=chunk-PL2AB5HJ.js.map

package/dist/chunk-PL2AB5HJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-scopes.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * SCOPES — a page-level partition rendered as a strip of tabs under the toolbar.\n *\n * A scope is not a filter. Filters NARROW within the current partition and are\n * multi-select by design; a scope PARTITIONS and is exclusive. The distinction\n * is load-bearing for three reasons, and each is why `FilterFieldConfig` could\n * not express these tabs:\n *\n *   1. They are mutually exclusive, and a pill is not.\n *   2. They carry counts of the WHOLE query, which no client can compute under\n *      pagination — the count has to come off the response\n *      ({@link DataViewServer.scopeCounts}).\n *   3. They compose with the filters instead of competing with them: the scope\n *      picks the bucket, the pills narrow inside it.\n *\n * The `predicate` is deliberately opaque to this package. Only the host knows\n * what \"recusados\" selects; the component's whole job is to say WHICH scope is\n * active and let the server answer.\n */\nexport interface ScopeConfig {\n  /** Stable id — travels in `DataViewQuery.scope` and in a saved view's state. */\n  id: string;\n  label: string;\n  /**\n   * Opaque payload the SERVER interprets. Omitted on the \"all\" scope. Never read\n   * by this package: a scope is applied at the backend, never in the browser.\n   */\n  predicate?: unknown;\n}\n\n/**\n * The active scope id, resolved against what the table currently declares.\n *\n * Resolution happens at READ time, on purpose. A saved view is written once and\n * read many times, and the declared scopes change underneath it — a scope\n * removed after a view was saved must fall back at render rather than break the\n * view or, worse, emit a scope the backend rejects. Resolving on write would\n * bake the mistake in.\n *\n * Returns `undefined` when the table declares no scopes, which is what keeps\n * `scope` out of the emitted query entirely for every table that never opted in.\n */\nexport function resolveScope(scopes: ScopeConfig[], stored: string | undefined): string | undefined {\n  if (scopes.length === 0) return undefined;\n  const declared = stored !== undefined && scopes.some((scope) => scope.id === stored);\n  return declared ? stored : scopes[0]?.id;\n}\n\n/** Are we running outside production? Config mistakes fail loudly only here. */\nfunction isDevelopment(): boolean {\n  return typeof process !== \"undefined\" && process.env?.NODE_ENV !== \"production\";\n}\n\n/**\n * Reject a table that partitions by a field AND declares a filter pill over the\n * same field. Two controls over one field is how a tab and a pill end up\n * contradicting each other — the pill says \"estado ∈ {pago, recusado}\" while the\n * tab says \"estado = recusado\", and nothing in either control can show the user\n * which one the server honoured.\n *\n * Throws in DEVELOPMENT ONLY. A thrown config error in production is strictly\n * worse than a duplicated control: the duplicate is confusing, the throw is a\n * blank page. Fail where it is seen and fixed.\n *\n * `scopeFieldId` is the field the scopes partition by, when the host knows it.\n * Absent, the scope IDS are checked against the field ids — which catches the\n * common shape where the scope ids ARE the field's values (`pago`, `recusado`)\n * declared a second time as a pill.\n */\nexport function assertNoScopePillOverlap(\n  scopes: ScopeConfig[],\n  fieldIds: string[],\n  scopeFieldId?: string,\n): void {\n  if (scopes.length === 0 || !isDevelopment()) return;\n  const clash = scopeFieldId !== undefined && fieldIds.includes(scopeFieldId) ? scopeFieldId : undefined;\n  if (clash === undefined) return;\n  throw new Error(\n    `DataViews: the field \"${clash}\" is both the scope partition (scopes: ` +\n      `${scopes.map((scope) => scope.id).join(\", \")}) and a filter field (fields: ` +\n      `${fieldIds.join(\", \")}). A field may drive the scope tabs or a filter pill, not both — ` +\n      `drop one of the two declarations.`,\n  );\n}\n\n/**\n * A development-only warning that scopes need server wiring. Scopes are resolved\n * and emitted, never applied in the browser: filtering locally would make the\n * counts, the \"N de N\" counter and the rendered rows disagree the moment a\n * second page exists.\n */\nexport function warnScopesNeedServer(scopes: ScopeConfig[], hasServer: boolean): void {\n  if (scopes.length === 0 || hasServer || !isDevelopment()) return;\n  // eslint-disable-next-line no-console -- a config warning has no other channel.\n  console.warn(\n    \"DataViews: `scopes` require server mode. The scope is tracked and would be emitted, \" +\n      \"but with no `server` there is nothing to emit it to and rows are NOT filtered in the browser. \" +\n      \"Supply `server` (see DataViewServer) or drop the scopes.\",\n  );\n}\n\n/**\n * The scope configuration's setup-time checks, run once per configuration rather\n * than per render: reject a field that is both a scope partition and a filter\n * pill (development only — see `assertNoScopePillOverlap`), and warn about\n * scopes declared with no server to apply them.\n *\n * In a `useMemo` so a mistake surfaces during the FIRST render, where the stack\n * still points at the table that made it.\n */\nexport function useScopeConfigChecks(\n  scopes: ScopeConfig[],\n  fieldIds: string[],\n  scopeFieldId: string | undefined,\n  hasServer: boolean,\n): void {\n  useMemo(() => {\n    assertNoScopePillOverlap(scopes, fieldIds, scopeFieldId);\n    warnScopesNeedServer(scopes, hasServer);\n    // Keyed on the ids rather than the arrays: hosts pass inline literals, so the\n    // array identity changes every render while the configuration does not.\n  }, [scopes, fieldIds.join(\",\"), scopeFieldId, hasServer]);\n}\n\n/** Everything the tab strip needs; `counts` is absent when the server omits it. */\ninterface DataViewsScopeTabsProps {\n  scopes: ScopeConfig[];\n  /** The RESOLVED active scope id (see {@link resolveScope}). */\n  value: string | undefined;\n  onChange: (id: string) => void;\n  /** Server-supplied per-scope totals. Absent ⇒ tabs render WITHOUT numbers. */\n  counts?: Record<string, number>;\n  testIdPrefix: string;\n}\n\n/** The accessible name of one tab: its label, plus its count when there is one. */\nfunction tabLabel(label: string, count: number | undefined): string {\n  return count === undefined ? label : `${label}, ${count}`;\n}\n\n/**\n * Move focus + selection between tabs with the arrow keys, wrapping at both\n * ends. Selection FOLLOWS focus here (an \"automatic activation\" tab list): each\n * arrow press is one scope change, which is one query — the same cost as a\n * click, and it keeps the strip's behaviour identical whichever input the\n * operator uses.\n */\nfunction arrowTarget(key: string, index: number, total: number): number | null {\n  if (key === \"ArrowRight\") return (index + 1) % total;\n  if (key === \"ArrowLeft\") return (index - 1 + total) % total;\n  if (key === \"Home\") return 0;\n  if (key === \"End\") return total - 1;\n  return null;\n}\n\n/** The active tab's own scroll-into-view, so a deep link to a late scope lands visible. */\nfunction useScrollActiveIntoView(value: string | undefined): React.RefObject<HTMLDivElement | null> {\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || value === undefined) return;\n    const active = strip.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    // jsdom implements neither, so guard rather than assume the DOM is a browser's.\n    active?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  }, [value]);\n  return stripRef;\n}\n\n/** One tab's visual + a11y state, kept out of the strip's map for readability. */\nconst scopeTabSx = (active: boolean): Record<string, unknown> => {\n  return {\n    // A 44px min target: the strip is the first thing a thumb reaches on a phone.\n    minHeight: sxRem(44),\n    px: 1.5,\n    py: 1,\n    border: 0,\n    borderBottom: (theme: Theme) => `${rem(theme, 2)} solid`,\n    borderStyle: \"solid\",\n    borderColor: active ? \"primary.main\" : \"transparent\",\n    background: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n    font: \"inherit\",\n    fontSize: sxRem(13),\n    fontWeight: active ? 600 : 400,\n    color: active ? \"primary.main\" : \"text.secondary\",\n    \"&:hover\": { color: active ? \"primary.main\" : \"text.primary\" },\n    \"&:focus-visible\": {\n      outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n      outlineColor: \"primary.main\",\n      outlineOffset: sxRem(-2),\n    },\n  };\n};\n\n/** The count badge. Rendered only when the server actually supplied a number. */\nfunction ScopeCount({\n  count,\n  active,\n  testId,\n}: {\n  count: number;\n  active: boolean;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      // The number is already in the tab's `aria-label`; announcing it twice\n      // would read \"Recusados 2, 2\".\n      aria-hidden=\"true\"\n      data-testid={testId}\n      sx={{\n        ml: 0.75,\n        px: 0.75,\n        borderRadius: 5,\n        fontSize: sxRem(11),\n        fontWeight: 600,\n        bgcolor: active ? \"primary.main\" : \"action.selected\",\n        color: active ? \"primary.contrastText\" : \"text.secondary\",\n      }}\n    >\n      {count}\n    </Box>\n  );\n}\n\ninterface ScopeTabProps {\n  scope: ScopeConfig;\n  index: number;\n  total: number;\n  active: boolean;\n  count: number | undefined;\n  onChange: (id: string) => void;\n  /**\n   * Move to the tab at `index`: focus it AND select it. Only the strip knows\n   * the other scopes and owns the DOM, so the move belongs to it.\n   */\n  moveTo: (index: number) => void;\n  testIdPrefix: string;\n}\n\n/** One tab: a real `<button role=\"tab\">` with a roving tabindex and arrow keys. */\nfunction ScopeTab({\n  scope,\n  index,\n  total,\n  active,\n  count,\n  onChange,\n  moveTo,\n  testIdPrefix,\n}: ScopeTabProps): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      role=\"tab\"\n      id={`${testIdPrefix}-scope-tab-${scope.id}`}\n      aria-selected={active}\n      // Roving tabindex: one tab stop for the whole strip, arrows move within it.\n      tabIndex={active ? 0 : -1}\n      aria-label={tabLabel(scope.label, count)}\n      data-testid={`${testIdPrefix}-scope-${scope.id}`}\n      onClick={() => onChange(scope.id)}\n      onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        const target = arrowTarget(event.key, index, total);\n        if (target === null) return;\n        event.preventDefault();\n        moveTo(target);\n      }}\n      sx={scopeTabSx(active)}\n    >\n      {scope.label}\n      {count !== undefined && (\n        <ScopeCount\n          count={count}\n          active={active}\n          testId={`${testIdPrefix}-scope-count-${scope.id}`}\n        />\n      )}\n    </Box>\n  );\n}\n\n/** The strip's own layout: one non-wrapping row that scrolls horizontally. */\nconst STRIP_SX = {\n  display: \"flex\",\n  alignItems: \"stretch\",\n  gap: 0.5,\n  // One row that scrolls — never wraps, never collapses into a select.\n  flexWrap: \"nowrap\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  scrollbarWidth: \"thin\",\n  borderBottom: 1,\n  borderColor: \"divider\",\n  mx: { xs: -2, md: -3 },\n  px: { xs: 2, md: 3 },\n} as const;\n\n/**\n * The scope strip: a horizontally scrolling tab list under the toolbar.\n *\n * It SCROLLS rather than collapsing into a select on a narrow screen, which is\n * the opposite of what the filter pills do — and deliberately. The counts are\n * the reason the tabs exist at all; burying them behind a menu costs a tap per\n * glance, exactly on the device where glancing is the point.\n *\n * Counts render verbatim from `counts` — never derived from the loaded page, and\n * never invented when the key is missing. A missing count means \"the server did\n * not say\", which reads honestly as no badge at all.\n */\nexport function DataViewsScopeTabs({\n  scopes,\n  value,\n  onChange,\n  counts,\n  testIdPrefix,\n}: DataViewsScopeTabsProps): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  const stripRef = useScrollActiveIntoView(value);\n  const moveTo = (index: number): void => {\n    // Focus FIRST, then select: the roving tabindex follows the selection, so\n    // focusing afterwards would land on a tab that has given up its tab stop.\n    stripRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')?.[index]?.focus();\n    const next = scopes[index];\n    if (next) onChange(next.id);\n  };\n  // Reserve NO vertical space when there is nothing to show: a page that\n  // declares no scopes must not gain an empty row.\n  if (scopes.length === 0) return null;\n  const activeIndex = Math.max(\n    0,\n    scopes.findIndex((scope) => scope.id === value),\n  );\n\n  return (\n    <Box ref={stripRef} role=\"tablist\" aria-label={copy.filters.scopesLabel} data-testid={`${testIdPrefix}-scopes`} sx={STRIP_SX}>\n      {scopes.map((scope, index) => (\n        <ScopeTab\n          key={scope.id}\n          scope={scope}\n          index={index}\n          total={scopes.length}\n          active={index === activeIndex}\n          count={counts?.[scope.id]}\n          onChange={onChange}\n          moveTo={moveTo}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-PMOEG36E.js

@@ -0,0 +1,187 @@
+import {
+  DATA_VIEWS_LAYOUTS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Slider
+} from "./chunk-MNHIK2OR.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-layout-context.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataViewsLayoutContext = createContext(null);
+var DEFAULT_ZOOM = 35;
+var BASE_CARD_WIDTH = 180;
+var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
+var LAYOUT_STORAGE_KEY = "dataviews:layout";
+var DENSITY_STORAGE_KEY = "dataviews:density";
+var DENSITIES = ["compact", "cozy", "comfortable"];
+var DENSITY_ROW_PADDING = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5
+};
+var DENSITY_CARD_SCALE = {
+  compact: 0.84,
+  cozy: 1.15,
+  comfortable: 1.4
+};
+function cardTargetWidthFor(zoom, density) {
+  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
+}
+var DENSITY_BOARD_SCALE = {
+  compact: 0.95,
+  cozy: 1,
+  comfortable: 1.25
+};
+function cardScaleForZoom(zoom) {
+  const clamped = Math.max(0, Math.min(100, zoom));
+  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
+}
+function cardMinWidthForZoom(zoom) {
+  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
+}
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function isDensity(value) {
+  return DENSITIES.includes(value);
+}
+function readStoredDensity() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function pinLayout(layout, available) {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+function readStoredLayout() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function DataViewsLayoutProvider({
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
+  defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
+  children
+}) {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState(
+    () => pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
+      availability
+    )
+  );
+  const [density, setDensityState] = useState(
+    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? "cozy"
+  );
+  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+  }, [viewLayout]);
+  const effective = pinLayout(layout, availability);
+  const value = useMemo(
+    () => ({
+      layout: effective,
+      setLayout: (next) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
+  );
+  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
+}
+function useDataViewsLayout() {
+  const ctx = useContext(DataViewsLayoutContext);
+  if (!ctx) {
+    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
+  }
+  return ctx;
+}
+function DataViewsZoomSlider({ testIdPrefix }) {
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
+  if (layout !== "cards" && layout !== "board") return null;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: { xs: "none", sm: "flex" },
+        alignItems: "center",
+        gap: 1,
+        color: "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 14 } }),
+        /* @__PURE__ */ jsx(default2, { sx: { width: 88, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            size: "sm",
+            showValue: false,
+            value: zoom,
+            min: 0,
+            max: 100,
+            step: 5,
+            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
+            "aria-label": copy.display.cardZoom,
+            "data-testid": `${testIdPrefix}-card-zoom`
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 20 } })
+      ]
+    }
+  );
+}
+
+export {
+  DENSITY_ROW_PADDING,
+  DENSITY_CARD_SCALE,
+  cardTargetWidthFor,
+  DENSITY_BOARD_SCALE,
+  cardScaleForZoom,
+  cardMinWidthForZoom,
+  DataViewsLayoutProvider,
+  useDataViewsLayout,
+  DataViewsZoomSlider
+};
+//# sourceMappingURL=chunk-PMOEG36E.js.map