@12-apps/ui 6.38.0 → 6.39.1

package/dist/{chunk-TQ6FPOPD.js → chunk-ODW2D5PN.js}

@@ -1,18 +1,22 @@
 import {
-  GAP,
   RESERVED,
   estimateWidth,
   furnitureCost,
   isRangeSet,
   pillText,
+  pricesFor,
   rightClusterCost
-} from "./chunk-IAGOUTI6.js";
+} from "./chunk-DNT5PZLF.js";
 import {
   splitToFit,
   useMeasuredWidth
 } from "./chunk-Y4KKS6WL.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataViews/data-views-overflow.ts
+import { useTheme } from "@mui/material/styles/index.js";
 import { useRef } from "react";
 function toOverflowFields(fields, rangeFields) {
   return [
@@ -23,27 +27,29 @@ function toOverflowFields(fields, rangeFields) {
 function isActiveField(field, pills, ranges) {
   return field.group === "pill" ? (pills[field.id]?.length ?? 0) > 0 : isRangeSet(ranges[field.id]);
 }
-function fieldWidth(field, pills, ranges) {
-  if (field.group === "pill") return estimateWidth(pillText(field, pills[field.id] ?? []), 0);
-  return estimateWidth(field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
+function fieldWidth(theme, field, pills, ranges) {
+  if (field.group === "pill") return estimateWidth(theme, pillText(field, pills[field.id] ?? []), 0);
+  return estimateWidth(theme, field.label, isRangeSet(ranges[field.id]) ? 100 : 0);
 }
-function splitFilters(all, pills, ranges, width, furniture, compact) {
+function splitFilters(all, pills, ranges, width, furniture, compact, theme) {
   const active = all.filter((field) => isActiveField(field, pills, ranges));
   const idle = all.filter((field) => !isActiveField(field, pills, ranges));
-  const clearCost = active.length > 0 ? RESERVED.clearAll + GAP : 0;
+  const price = pricesFor(theme);
+  const gap = remPx(theme, RESERVED.betweenControls);
+  const clearCost = active.length > 0 ? price.clearAll + gap : 0;
   const split = splitToFit(all, {
-    widthOf: (field) => fieldWidth(field, pills, ranges),
+    widthOf: (field) => fieldWidth(theme, field, pills, ranges),
     keyOf: (field) => field.id,
-    gap: GAP,
+    gap,
     available: width - furniture - clearCost,
     // The overflow button at the width it will actually have, which on a phone
     // is the icon-and-badge one.
-    overflowCost: compact ? RESERVED.overflowButtonCompact : RESERVED.overflowButton,
+    overflowCost: compact ? price.overflowButtonCompact : price.overflowButton,
     priority: [...active, ...idle]
   });
   return { ...split, used: split.used + clearCost };
 }
-function computeSplit(all, pills, ranges, width, hasExport) {
+function computeSplit(all, pills, ranges, width, hasExport, theme) {
   if (width === 0) {
     return {
       inline: all,
@@ -55,45 +61,48 @@ function computeSplit(all, pills, ranges, width, hasExport) {
       searchTakeover: false
     };
   }
-  let split = splitFilters(all, pills, ranges, width, furnitureCost(UNCOLLAPSED, hasExport), false);
-  let flags = ladderFlags(split, width, hasExport);
-  let budget = furnitureCost(UNCOLLAPSED, hasExport);
+  const price = pricesFor(theme);
+  let budget = furnitureCost(price, UNCOLLAPSED, hasExport);
+  let split = splitFilters(all, pills, ranges, width, budget, false, theme);
+  let flags = ladderFlags(split, width, hasExport, price);
   for (let pass = 0; pass < 3; pass += 1) {
-    const freed = furnitureCost(flags, hasExport);
+    const freed = furnitureCost(price, flags, hasExport);
     if (freed >= budget) break;
     budget = freed;
-    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls);
-    flags = ladderFlags(split, width, hasExport);
+    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls, theme);
+    flags = ladderFlags(split, width, hasExport, price);
   }
   return { inline: split.inline, overflow: split.overflow, ...flags };
 }
 var UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };
-function ladderFlags(split, width, hasExport) {
+function ladderFlags(split, width, hasExport, price) {
   const { overflow, used } = split;
-  const base = width - used - RESERVED.chrome;
-  const compactControls = base - RESERVED.counter - rightClusterCost(hasExport, false) < RESERVED.search;
-  const rightCost = rightClusterCost(hasExport, compactControls);
-  const searchCollapsed = base - RESERVED.counter - rightCost < RESERVED.search;
-  const counterHidden = searchCollapsed && base - RESERVED.counter - rightCost < RESERVED.searchIcon;
+  const base = width - used - price.chrome;
+  const compactControls = base - price.counter - rightClusterCost(price, hasExport, false) < price.search;
+  const rightCost = rightClusterCost(price, hasExport, compactControls);
+  const searchCollapsed = base - price.counter - rightCost < price.search;
+  const counterHidden = searchCollapsed && base - price.counter - rightCost < price.searchIcon;
   const clearAllHidden = counterHidden && overflow.length > 0;
-  const overflowButton = compactControls ? RESERVED.overflowButtonCompact : RESERVED.overflowButton;
-  const shedRoom = width - RESERVED.chrome - (overflow.length > 0 ? overflowButton : 0);
-  const searchBoxRoom = shedRoom - (counterHidden ? 0 : RESERVED.counter) - rightCost;
-  const searchTakeover = searchCollapsed && searchBoxRoom < RESERVED.usableSearch;
+  const overflowButton = compactControls ? price.overflowButtonCompact : price.overflowButton;
+  const shedRoom = width - price.chrome - (overflow.length > 0 ? overflowButton : 0);
+  const searchBoxRoom = shedRoom - (counterHidden ? 0 : price.counter) - rightCost;
+  const searchTakeover = searchCollapsed && searchBoxRoom < price.usableSearch;
   return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };
 }
 function useFilterOverflow(all, pills, ranges, frozen = false, hasExport = true) {
   const { ref: barRef, width } = useMeasuredWidth();
+  const theme = useTheme();
   const signature = JSON.stringify({
     ids: all.map((field) => field.id),
     pills,
     ranges,
     width,
-    hasExport
+    hasExport,
+    scale: remPx(theme, 1)
   });
   const cache = useRef(null);
   if (cache.current === null || !frozen && cache.current.signature !== signature) {
-    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport) };
+    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport, theme) };
   }
   return { ...cache.current.split, barRef };
 }
@@ -102,4 +111,4 @@ export {
   toOverflowFields,
   useFilterOverflow
 };
-//# sourceMappingURL=chunk-TQ6FPOPD.js.map
+//# sourceMappingURL=chunk-ODW2D5PN.js.map

package/dist/chunk-ODW2D5PN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-overflow.ts"],"sourcesContent":["\"use client\";\n\nimport { useTheme, type Theme } from \"@mui/material/styles/index.js\";\nimport { useRef } from \"react\";\n\nimport { remPx } from \"../../../tokens/relative\";\nimport { splitToFit, useMeasuredWidth } from \"../../utility/Overflow\";\nimport {\n  estimateWidth,\n  furnitureCost,\n  isRangeSet,\n  pillText,\n  pricesFor,\n  RESERVED,\n  rightClusterCost,\n  type Prices,\n} from \"./data-views-overflow-costs\";\nimport type { FilterFieldConfig, RangeFieldConfig, RangeValue } from \"./data-views-types\";\n\n/**\n * PROGRESSIVE COLLAPSE — which filter controls fit on the toolbar, measured.\n *\n * Two rules, and both come from watching the all-or-nothing version fail:\n *\n * 1. Controls shed ONE AT A TIME into an overflow, never all at once. With four\n *    filters and room for three, hiding all four throws away the room that was\n *    there.\n * 2. An APPLIED filter is ranked first, not exempt. Applied controls take the\n *    visible slots ahead of idle ones, and go into \"Mais\" like anything else\n *    when even those slots run out. Exempting them outright — the earlier rule\n *    — meant four applied filters on a phone claimed more width than the row\n *    had, and the bar painted past its own edge: the pills were reachable only\n *    by scrolling the toolbar sideways. Hiding one is safe because \"Mais\" says\n *    how many applied filters are behind it; scrolling one off-screen says\n *    nothing at all.\n *\n * It MEASURES rather than picking a breakpoint, which is what\n * `FILTERS-CONTRACT.md` asks for: pages declare different numbers of filters\n * with different label lengths, and the same page collapses at a different\n * width in another language. A shared breakpoint is wrong for at least one\n * table by construction.\n *\n * Collapsing is presentation only — nothing here emits a query, drops a filter\n * or changes a rendered row.\n */\n\n/** A filter control on the bar: a multi-select pill or a min/max range. */\nexport interface OverflowField<T extends Record<string, unknown>> {\n  id: string;\n  label: string;\n  /** Which control it is — the caller renders the right one. */\n  group: \"pill\" | \"range\";\n  pill?: FilterFieldConfig<T>;\n  range?: RangeFieldConfig<T>;\n}\n\n/** What the caller renders inline, and what goes behind \"Mais\". */\nexport interface OverflowSplit<T extends Record<string, unknown>> {\n  inline: OverflowField<T>[];\n  overflow: OverflowField<T>[];\n  /**\n   * Step 2 — Exibir/Exportar drop their text labels and become icons.\n   * Cheap: both keep their icon, their tooltip and their position.\n   */\n  compactControls: boolean;\n  /**\n   * Step 5, and the LAST resort — the \"N de N\" counter is dropped.\n   *\n   * Only once every control has already collapsed and the row STILL does not\n   * fit, which on a six-filter table is below about 400px. The counter goes\n   * last because it is the only thing left that reports rather than does: an\n   * operator can act without knowing the total, but not without the search.\n   */\n  counterHidden: boolean;\n  /**\n   * Step 4 — the search collapses to a magnifier that expands on click.\n   * The most expensive step, so it is taken last: the search is the one\n   * control on the bar that cannot be guessed from an icon's position.\n   */\n  searchCollapsed: boolean;\n  /**\n   * Step 6, below even the counter — \"Limpar\" leaves the bar.\n   *\n   * The one control here with a second home: the overflow panel's footer\n   * carries \"Limpar todos os filtros\". So it goes before the search icon or\n   * \"Mais\", neither of which has anywhere else to be.\n   */\n  clearAllHidden: boolean;\n  /**\n   * Expanding the magnifier must take the whole cluster, filters and all.\n   *\n   * Only on the rungs where what is left over would be too narrow to read —\n   * on a large phone the box simply shrinks and the filters stay, which is why\n   * this is its own answer rather than `searchCollapsed` reused.\n   */\n  searchTakeover: boolean;\n  /** Attach to the toolbar row being measured. */\n  barRef: React.RefObject<HTMLDivElement | null>;\n}\n\n/** Every declared control, pills first, in the order the bar renders them. */\nexport function toOverflowFields<T extends Record<string, unknown>>(\n  fields: FilterFieldConfig<T>[],\n  rangeFields: RangeFieldConfig<T>[],\n): OverflowField<T>[] {\n  return [\n    ...fields.map((pill) => ({ id: pill.id, label: pill.label, group: \"pill\" as const, pill })),\n    ...rangeFields.map((range) => ({ id: range.id, label: range.label, group: \"range\" as const, range })),\n  ];\n}\n\n\n/** Is this control carrying a value the operator set? */\nfunction isActiveField<T extends Record<string, unknown>>(\n  field: OverflowField<T>,\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n): boolean {\n  return field.group === \"pill\"\n    ? (pills[field.id]?.length ?? 0) > 0\n    : isRangeSet(ranges[field.id]);\n}\n\n/** Estimated rendered width of one control at its CURRENT value, in px at `theme`'s scale. */\nfunction fieldWidth<T extends Record<string, unknown>>(\n  theme: Theme,\n  field: OverflowField<T>,\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n): number {\n  if (field.group === \"pill\") return estimateWidth(theme, pillText(field, pills[field.id] ?? []), 0);\n  // A bounded range renders two number inputs (100 design px) beside its label.\n  return estimateWidth(theme, field.label, isRangeSet(ranges[field.id]) ? 100 : 0);\n}\n\n/** What one split costs on the bar, so the ladder below can price the next step. */\ntype Split<T extends Record<string, unknown>> = {\n  inline: OverflowField<T>[];\n  overflow: OverflowField<T>[];\n  /** Width the surviving inline controls occupy, incl. the \"Mais\" button. */\n  used: number;\n};\n\n/** Step 1 — shed filter controls into the overflow. Pure. */\nfunction splitFilters<T extends Record<string, unknown>>(\n  all: OverflowField<T>[],\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n  width: number,\n  /** Search + counter + right cluster + chrome, at the rung being considered. */\n  furniture: number,\n  /** Is the bar already down to icons? \"Mais\" shrinks with everything else. */\n  compact: boolean,\n  /** Whose type scale every price is read at — the bar's own. */\n  theme: Theme,\n): Split<T> {\n  const active = all.filter((field) => isActiveField(field, pills, ranges));\n  const idle = all.filter((field) => !isActiveField(field, pills, ranges));\n  const price = pricesFor(theme);\n  const gap = remPx(theme, RESERVED.betweenControls);\n\n  // \"Limpar\" rides the end of the cluster whenever anything is applied.\n  const clearCost = active.length > 0 ? price.clearAll + gap : 0;\n  // APPLIED FIRST, BUT NOT EXEMPT.\n  //\n  // Applied controls take the visible slots ahead of idle ones — that part was\n  // always right. Exempting them from the overflow entirely was not: applying\n  // a value LENGTHENS a control (\"Pagamento (1)\"), so on a phone four applied\n  // filters claimed more width than the row had and the bar simply painted\n  // past its own edge, leaving pills reachable only by scrolling sideways.\n  //\n  // An applied filter hidden in \"Mais\" is not lost the way it would be if it\n  // vanished silently: the trigger goes to the applied tone and says how many\n  // are in there (see `MoreTrigger`), which is the same signal the pill itself\n  // was carrying. A control you scroll off-screen carries no signal at all.\n  //\n  // The keep-what-fits loop itself is `splitToFit` (`utility/Overflow`) — the\n  // one part of this that is not filter-shaped, and the part a second cluster\n  // in the design system would otherwise have had to reimplement.\n  const split = splitToFit(all, {\n    widthOf: (field) => fieldWidth(theme, field, pills, ranges),\n    keyOf: (field) => field.id,\n    gap,\n    available: width - furniture - clearCost,\n    // The overflow button at the width it will actually have, which on a phone\n    // is the icon-and-badge one.\n    overflowCost: compact ? price.overflowButtonCompact : price.overflowButton,\n    priority: [...active, ...idle],\n  });\n  return { ...split, used: split.used + clearCost };\n}\n\n/**\n * THE DEGRADATION LADDER — cheapest loss first, and each rung taken only if\n * the one before it did not free enough:\n *\n *   1. filter controls move into the \"Mais\" overflow   (`splitFilters`)\n *   2. Exibir / Exportar drop their text labels        (`compactControls`)\n *   3. the search shrinks toward its minimum           (CSS: it is `flex: 1`)\n *   4. the search itself collapses to an icon          (`searchCollapsed`)\n *\n * Step 3 needs no flag — the search is a flex child, so it gives up width on\n * its own until it hits `RESERVED.search`. The flags mark the two steps that\n * change what is RENDERED rather than how wide it is.\n *\n * Measured against what is CURRENTLY on the bar, never a breakpoint: a\n * two-filter page and a five-filter page would otherwise collapse at the same\n * width, and only one of them would be right.\n */\nfunction computeSplit<T extends Record<string, unknown>>(\n  all: OverflowField<T>[],\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n  width: number,\n  /** Does the host render \"Exportar\" beside \"Exibir\"? Half the cluster if not. */\n  hasExport: boolean,\n  theme: Theme,\n): Omit<OverflowSplit<T>, \"barRef\"> {\n  // Unmeasured (SSR, or jsdom without a ResizeObserver) ⇒ degrade nothing.\n  if (width === 0) {\n    return {\n      inline: all,\n      overflow: [],\n      compactControls: false,\n      counterHidden: false,\n      searchCollapsed: false,\n      clearAllHidden: false,\n      searchTakeover: false,\n    };\n  }\n  const price = pricesFor(theme);\n  // Pass 1 prices the furniture at its widest — no rung has been taken yet.\n  let budget = furnitureCost(price, UNCOLLAPSED, hasExport);\n  let split = splitFilters(all, pills, ranges, width, budget, false, theme);\n  let flags = ladderFlags(split, width, hasExport, price);\n  // RE-SPEND WHAT THE LATER RUNGS FREED.\n  //\n  // Rungs 2/4/5 turn 200 + 96 + 216 of furniture into 44 + 0 + 140, and until\n  // this loop existed nobody handed those ~330px back to the filters: the\n  // split was decided once, against the uncollapsed row, so a phone shed every\n  // control and then sat with a band of empty bar beside \"Mais 5\".\n  //\n  // Settles rather than oscillates, and cannot overfill: a cheaper furniture\n  // can only give the filters MORE room, more filter width can only push the\n  // ladder FURTHER down, and a further rung can only make the furniture\n  // cheaper again — so the budget decreases monotonically and the loop exits\n  // the moment it stops moving. The bound is a backstop, not the exit.\n  for (let pass = 0; pass < 3; pass += 1) {\n    const freed = furnitureCost(price, flags, hasExport);\n    if (freed >= budget) break;\n    budget = freed;\n    split = splitFilters(all, pills, ranges, width, budget, flags.compactControls, theme);\n    flags = ladderFlags(split, width, hasExport, price);\n  }\n  return { inline: split.inline, overflow: split.overflow, ...flags };\n}\n\n/** The widest the furniture ever is — every rung still untaken. */\nconst UNCOLLAPSED = { searchCollapsed: false, counterHidden: false, compactControls: false };\n\n/** Rungs 2 and 4-6, priced against what the filters actually took. */\nfunction ladderFlags<T extends Record<string, unknown>>(\n  split: Split<T>,\n  width: number,\n  hasExport: boolean,\n  price: Prices,\n): Omit<OverflowSplit<T>, \"barRef\" | \"inline\" | \"overflow\"> {\n  const { overflow, used } = split;\n  const base = width - used - price.chrome;\n\n  // Would the search still make its minimum with the labels on?\n  const compactControls = base - price.counter - rightClusterCost(price, hasExport, false) < price.search;\n  const rightCost = rightClusterCost(price, hasExport, compactControls);\n  // …and with them off?\n  const searchCollapsed = base - price.counter - rightCost < price.search;\n  // Everything has collapsed and the row STILL overflows. The controls cannot\n  // shrink further — they are `flexShrink: 0` precisely so an over-packed row\n  // sheds rather than squeezes — so without this last rung they simply paint\n  // outside the toolbar, which is what a narrow phone was doing.\n  const counterHidden =\n    searchCollapsed && base - price.counter - rightCost < price.searchIcon;\n  // Step 6 — below even that, \"Limpar\" leaves the bar. It is the ONLY control\n  // here with a second home: the overflow panel's footer carries \"Limpar todos\n  // os filtros\", so nothing is lost, which is exactly why it goes before the\n  // search icon or \"Mais\" (neither of which has anywhere else to be). Guarded\n  // on there BEING an overflow, because with no panel the footer does not\n  // exist and dropping this would strand the operator.\n  const clearAllHidden = counterHidden && overflow.length > 0;\n  // What the keyword box would get if the operator expanded the magnifier.\n  // `searchCollapsed` is a different question — it asks whether the box fits at\n  // its PREFERRED 200px, and is deliberately pessimistic — so reusing it to\n  // decide the takeover evicted the filters on screens where the box had plenty\n  // of room to simply shrink.\n  //\n  // Asked with the inline filters SHED, because shedding them is exactly what\n  // expanding the box does: the row re-splits and they go behind \"Mais\".\n  // Measuring against the resting row instead made a filter argue for its own\n  // eviction — now that a large phone keeps one, its width came out of `base`,\n  // pushed the box under `usableSearch`, and tipped a row that had ample space\n  // to share into a full takeover.\n  const overflowButton = compactControls\n    ? price.overflowButtonCompact\n    : price.overflowButton;\n  const shedRoom = width - price.chrome - (overflow.length > 0 ? overflowButton : 0);\n  const searchBoxRoom = shedRoom - (counterHidden ? 0 : price.counter) - rightCost;\n  // Below this a box is too narrow to read what you typed into it, and shrinking\n  // further buys nothing; that is the only point at which taking the whole\n  // cluster is worth losing the filters.\n  const searchTakeover = searchCollapsed && searchBoxRoom < price.usableSearch;\n\n  return { compactControls, counterHidden, searchCollapsed, clearAllHidden, searchTakeover };\n}\n\n/**\n * Split the declared filter controls into what fits and what goes behind\n * \"Mais\", measured against the live toolbar width.\n *\n * Cached on a SIGNATURE rather than by `useMemo` over the inputs: hosts declare\n * their fields inline, so `all` is a fresh array on every render while the\n * configuration is unchanged, and a reference-keyed memo would never hit.\n */\nexport function useFilterOverflow<T extends Record<string, unknown>>(\n  all: OverflowField<T>[],\n  pills: Record<string, string[]>,\n  ranges: Record<string, RangeValue>,\n  /**\n   * A filter control is open — hold the current answer until it closes.\n   *\n   * Applying a filter changes that control's LABEL (\"Valor\" becomes \"Valor: ≥\n   * R$ 1\"), which changes its measured width, which re-runs the whole split\n   * while its popover is open on top of it. Measured: setting a minimum moved\n   * the trigger 192px left, took the popover with it, and pushed two other\n   * controls into a newly-appeared \"Mais 2\" — so reaching for the second bound\n   * meant chasing the control across the row. Nobody sets a range that way.\n   *\n   * Frozen only for the duration: closing re-measures against the new labels,\n   * so the row still ends up correct, it just does not rearrange under a hand\n   * that is mid-edit.\n   */\n  frozen = false,\n  /** Whether \"Exportar\" is on the bar — see `rightClusterCost`. */\n  hasExport = true,\n): OverflowSplit<T> {\n  // The measurement is `useMeasuredWidth` (`utility/Overflow`): the same\n  // ResizeObserver every collapsing cluster in the design system reads, so\n  // there is one loop to get right rather than one per bar. `0` until the\n  // first measurement lands (and forever under SSR or jsdom), which\n  // `computeSplit` reads as \"degrade nothing\".\n  const { ref: barRef, width } = useMeasuredWidth<HTMLDivElement>();\n  // The prices follow the theme's type scale, so the answer does too.\n  const theme = useTheme();\n  const signature = JSON.stringify({\n    ids: all.map((field) => field.id),\n    pills,\n    ranges,\n    width,\n    hasExport,\n    scale: remPx(theme, 1),\n  });\n  const cache = useRef<{ signature: string; split: ReturnType<typeof computeSplit<T>> } | null>(null);\n  if (cache.current === null || (!frozen && cache.current.signature !== signature)) {\n    cache.current = { signature, split: computeSplit(all, pills, ranges, width, hasExport, theme) };\n  }\n  return { ...cache.current.split, barRef };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-RZYSKQTS.js → chunk-PCBZYORN.js}

@@ -1,7 +1,7 @@
 import {
   useColumnsWithActions,
   useRenderedColumns
-} from "./chunk-ZAY6OA6F.js";
+} from "./chunk-D4FZ3ANG.js";
 import {
   filterRows
 } from "./chunk-YGQX7BNI.js";
@@ -18,7 +18,7 @@ import {
 import {
   computeActiveFilterCount,
   defaultSortFields
-} from "./chunk-PPRV4LTM.js";
+} from "./chunk-BWHOCNGW.js";
 import {
   serverDerived,
   useServerQuery
@@ -172,4 +172,4 @@ function useDataViewsState({
 export {
   useDataViewsState
 };
-//# sourceMappingURL=chunk-RZYSKQTS.js.map
+//# sourceMappingURL=chunk-PCBZYORN.js.map

package/dist/{chunk-5OBXEMQO.js → chunk-PRIBOWX4.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-R6SN73RX.js";
+} from "./chunk-GLHNMTP6.js";
 import {
   useDataViewsState
-} from "./chunk-RZYSKQTS.js";
+} from "./chunk-PCBZYORN.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-5OBXEMQO.js.map
+//# sourceMappingURL=chunk-PRIBOWX4.js.map

package/dist/{chunk-F42MJOHM.js → chunk-PVM7XTLZ.js}

@@ -1,9 +1,15 @@
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/utility/VirtualList/VirtualList.hooks.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
 var scrollOffsets = (event) => {
   const target = event.currentTarget || event.target;
   const element = target;
-  return { top: element.scrollTop, left: element.scrollLeft };
+  return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };
 };
 var useExternalScrollListener = (scrollContainerRef, handleScroll) => {
   useEffect(() => {
@@ -18,7 +24,7 @@ var useScrollTop = (scrollContainerRef, report) => {
   const [scrollTop, setScrollTop] = useState(0);
   const handleScroll = useCallback(
     (event) => {
-      const { top, left } = scrollOffsets(event);
+      const { scrollTop: top, scrollLeft: left } = scrollOffsets(event);
       setScrollTop(top);
       report(top, left);
     },
@@ -27,33 +33,21 @@ var useScrollTop = (scrollContainerRef, report) => {
   useExternalScrollListener(scrollContainerRef, handleScroll);
   return { scrollTop, handleScroll };
 };
-var useItemHeight = ({
-  items,
-  variant,
-  itemHeight,
-  estimatedItemHeight
-}) => {
-  const measured = useRef(/* @__PURE__ */ new Map());
-  return useCallback(
-    (index) => {
-      if (variant !== "variable") {
-        return itemHeight;
-      }
-      return items[index]?.height || measured.current.get(index) || estimatedItemHeight;
-    },
-    [variant, itemHeight, estimatedItemHeight, items]
-  );
+var widthCss = (theme, width) => {
+  if (typeof width !== "number") return width;
+  return width <= 1 && width !== 0 ? `${width * 100}%` : rem(theme, width);
 };
-var useTotalHeight = (items, variant, itemHeight, getItemHeight) => useMemo(() => {
-  if (variant === "fixed") {
-    return items.length * itemHeight;
+var useDesignHeights = (items, variant, fixed, estimated) => useMemo(() => {
+  if (variant !== "variable") {
+    return { size: () => fixed, offset: (index) => index * fixed, total: items.length * fixed };
   }
-  let sum = 0;
+  const size = (index) => items[index]?.height || estimated;
+  const starts = [0];
   for (let i = 0; i < items.length; i++) {
-    sum += getItemHeight(i);
+    starts.push((starts[i] ?? 0) + size(i));
   }
-  return sum;
-}, [items.length, variant, itemHeight, getItemHeight]);
+  return { size, offset: (index) => starts[index] ?? 0, total: starts[items.length] ?? 0 };
+}, [items, variant, fixed, estimated]);
 var variableRange = ({ count, scrollTop, height, overscan, getItemHeight }) => {
   let accumulated = 0;
   let startIndex = 0;
@@ -82,36 +76,29 @@ var fixedRange = ({ count, scrollTop, height, overscan, itemHeight }) => ({
   startIndex: Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),
   endIndex: Math.min(count - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan)
 });
-var useItemOffset = (variant, itemHeight, getItemHeight) => useCallback(
-  (index) => {
-    if (variant === "fixed") {
-      return index * itemHeight;
-    }
-    let offset = 0;
-    for (let i = 0; i < index; i++) {
-      offset += getItemHeight(i);
-    }
-    return offset;
-  },
-  [variant, itemHeight, getItemHeight]
-);
 var useVirtualList = ({
   items,
-  variant,
+  variant = "fixed",
   height,
   itemHeight,
   estimatedItemHeight,
-  overscan,
+  overscan = 5,
   onScroll,
   scrollContainerRef
 }) => {
-  const getItemHeight = useItemHeight({ items, variant, itemHeight, estimatedItemHeight });
-  const getItemOffset = useItemOffset(variant, itemHeight, getItemHeight);
-  const totalHeight = useTotalHeight(items, variant, itemHeight, getItemHeight);
+  const theme = useTheme();
+  const design = useDesignHeights(items, variant, itemHeight ?? 40, estimatedItemHeight ?? 40);
   const report = useCallback((top) => onScroll?.(top), [onScroll]);
   const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);
   const visibleItems = useMemo(() => {
-    const args = { count: items.length, scrollTop, height, overscan, itemHeight, getItemHeight };
+    const args = {
+      count: items.length,
+      scrollTop,
+      height: remPx(theme, height),
+      overscan,
+      itemHeight: remPx(theme, design.size(0)),
+      getItemHeight: (index) => remPx(theme, design.size(index))
+    };
     const { startIndex, endIndex } = variant === "fixed" ? fixedRange(args) : variableRange(args);
     const result = [];
     for (let i = startIndex; i <= endIndex; i++) {
@@ -122,16 +109,21 @@ var useVirtualList = ({
         index: i,
         style: {
           position: "absolute",
-          top: getItemOffset(i),
+          top: remPx(theme, design.offset(i)),
           left: 0,
           width: "100%",
-          height: getItemHeight(i)
+          height: remPx(theme, design.size(i))
         }
       });
     }
     return result;
-  }, [items, scrollTop, height, overscan, variant, itemHeight, getItemOffset, getItemHeight]);
-  return { totalHeight, visibleItems, handleScroll };
+  }, [items, scrollTop, height, overscan, variant, design, theme]);
+  return {
+    totalHeight: rem(theme, design.total),
+    viewportHeight: rem(theme, height),
+    visibleItems,
+    handleScroll
+  };
 };
 var useColumnWidth = (columnWidth, width, columnCount, gap) => useMemo(() => {
   if (columnWidth) return columnWidth;
@@ -141,27 +133,31 @@ var useColumnWidth = (columnWidth, width, columnCount, gap) => useMemo(() => {
 var useVirtualGrid = ({
   items,
   height,
-  width,
+  width = "100%",
   columnCount,
   rowHeight,
   columnWidth,
-  gap,
-  overscan,
+  gap = 0,
+  overscan = 5,
   onScroll,
   scrollContainerRef
 }) => {
+  const theme = useTheme();
   const rowCount = Math.ceil(items.length / columnCount);
-  const totalHeight = rowCount * (rowHeight + gap) - gap;
-  const computedColumnWidth = useColumnWidth(columnWidth, width, columnCount, gap);
+  const designColumn = useColumnWidth(columnWidth, width, columnCount, gap);
   const report = useCallback(
     (top, left) => onScroll?.(top, left),
     [onScroll]
   );
   const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);
   const visibleItems = useMemo(() => {
-    const pitch = rowHeight + gap;
+    const pitch = remPx(theme, rowHeight + gap);
+    const stride = remPx(theme, designColumn + gap);
     const startRow = Math.max(0, Math.floor(scrollTop / pitch) - overscan);
-    const endRow = Math.min(rowCount - 1, Math.ceil((scrollTop + height) / pitch) + overscan);
+    const endRow = Math.min(
+      rowCount - 1,
+      Math.ceil((scrollTop + remPx(theme, height)) / pitch) + overscan
+    );
     const firstIndex = startRow * columnCount;
     const lastIndex = Math.min((endRow + 1) * columnCount - 1, items.length - 1);
     const result = [];
@@ -178,19 +174,25 @@ var useVirtualGrid = ({
         style: {
           position: "absolute",
           top: rowIndex * pitch,
-          left: columnIndex * (computedColumnWidth + gap),
-          width: computedColumnWidth,
-          height: rowHeight
+          left: columnIndex * stride,
+          width: remPx(theme, designColumn),
+          height: remPx(theme, rowHeight)
         }
       });
     }
     return result;
-  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, computedColumnWidth]);
-  return { totalHeight, visibleItems, handleScroll };
+  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, designColumn, theme]);
+  return {
+    totalHeight: rem(theme, rowCount * (rowHeight + gap) - gap),
+    viewportHeight: rem(theme, height),
+    visibleItems,
+    handleScroll
+  };
 };
 
 export {
+  widthCss,
   useVirtualList,
   useVirtualGrid
 };
-//# sourceMappingURL=chunk-F42MJOHM.js.map
+//# sourceMappingURL=chunk-PVM7XTLZ.js.map

package/dist/chunk-PVM7XTLZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/VirtualList/VirtualList.hooks.ts"],"sourcesContent":["import { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport type { VirtualGridProps, VirtualListProps } from './VirtualList.types';\n\ntype ScrollEvent = React.UIEvent<HTMLDivElement> | Event;\ntype ListItems = VirtualListProps['items'];\ntype ListVariant = NonNullable<VirtualListProps['variant']>;\ntype ItemSize = (index: number) => number;\n\n// Handles both React synthetic events and native DOM events, since the same\n// handler serves an internal onScroll and an external container's listener.\nconst scrollOffsets = (event: ScrollEvent) => {\n  const target = (event as React.UIEvent<HTMLDivElement>).currentTarget || (event as Event).target;\n  const element = target as HTMLElement;\n  return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };\n};\n\n/**\n * When the caller owns the scroll container, the component cannot attach\n * `onScroll` through JSX and has to subscribe to that element directly.\n */\nconst useExternalScrollListener = (\n  scrollContainerRef: VirtualListProps['scrollContainerRef'],\n  handleScroll: (event: Event) => void,\n) => {\n  useEffect(() => {\n    if (!scrollContainerRef?.current) return;\n\n    const element = scrollContainerRef.current;\n    const scrollHandler = (e: Event) => handleScroll(e);\n\n    element.addEventListener('scroll', scrollHandler);\n    return () => element.removeEventListener('scroll', scrollHandler);\n  }, [scrollContainerRef, handleScroll]);\n};\n\n/**\n * Tracks the scroll offset whether it arrives through our own `onScroll` or\n * through a container the caller owns, and hands both offsets to `report` so a\n * grid can pass on the horizontal one too.\n */\nconst useScrollTop = (\n  scrollContainerRef: VirtualListProps['scrollContainerRef'],\n  report: (top: number, left: number) => void,\n) => {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  const handleScroll = useCallback(\n    (event: ScrollEvent) => {\n      const { scrollTop: top, scrollLeft: left } = scrollOffsets(event);\n      setScrollTop(top);\n      report(top, left);\n    },\n    [report],\n  );\n\n  useExternalScrollListener(scrollContainerRef, handleScroll);\n\n  return { scrollTop, handleScroll };\n};\n\n\n/**\n * A `width` prop as CSS. `sx` reads a number of 1 or less as a fraction of the\n * parent, and that stays so; a larger number is design px, through the type\n * scale; a string is as given.\n */\nexport const widthCss = (theme: Theme, width: number | string): string => {\n  if (typeof width !== 'number') return width;\n  return width <= 1 && width !== 0 ? `${width * 100}%` : rem(theme, width);\n};\n\n/** Every item's height, its offset from the top, and their sum — all in DESIGN px. */\ninterface DesignHeights {\n  size: ItemSize;\n  offset: ItemSize;\n  total: number;\n}\n\n/**\n * Fixed lists know every height up front; variable ones take the item's own\n * declared height and otherwise the estimate.\n *\n * Kept in the caller's DESIGN px on purpose: the CSS draws a height with `rem`\n * and the range maths reads it through `remPx`, so the two are one number at\n * any type scale — never a row drawn at one pitch and positioned at another.\n */\nconst useDesignHeights = (\n  items: ListItems,\n  variant: ListVariant,\n  fixed: number,\n  estimated: number,\n): DesignHeights =>\n  useMemo(() => {\n    if (variant !== 'variable') {\n      return { size: () => fixed, offset: (index) => index * fixed, total: items.length * fixed };\n    }\n\n    const size = (index: number): number => items[index]?.height || estimated;\n    // Running sums, so an offset is a lookup rather than a walk from the top.\n    const starts = [0];\n    for (let i = 0; i < items.length; i++) {\n      starts.push((starts[i] ?? 0) + size(i));\n    }\n    return { size, offset: (index) => starts[index] ?? 0, total: starts[items.length] ?? 0 };\n  }, [items, variant, fixed, estimated]);\n\n/** The range maths' inputs, in the px the scroll offset is measured in. */\ninterface RangeArgs {\n  count: number;\n  scrollTop: number;\n  height: number;\n  overscan: number;\n  itemHeight: number;\n  getItemHeight: ItemSize;\n}\n\n// Walks forward accumulating heights until it passes the viewport's top edge, then\n// its bottom edge. Linear in the number of items, which is why fixed lists take\n// the arithmetic shortcut instead.\nconst variableRange = ({ count, scrollTop, height, overscan, getItemHeight }: RangeArgs) => {\n  let accumulated = 0;\n  let startIndex = 0;\n  let endIndex = count - 1;\n\n  for (let i = 0; i < count; i++) {\n    if (accumulated + getItemHeight(i) > scrollTop) {\n      startIndex = Math.max(0, i - overscan);\n      break;\n    }\n    accumulated += getItemHeight(i);\n  }\n\n  accumulated = 0;\n  for (let i = 0; i <= startIndex; i++) {\n    accumulated += getItemHeight(i);\n  }\n\n  for (let i = startIndex; i < count; i++) {\n    if (accumulated > scrollTop + height) {\n      endIndex = Math.min(count - 1, i + overscan);\n      break;\n    }\n    accumulated += getItemHeight(i);\n  }\n\n  return { startIndex, endIndex };\n};\n\nconst fixedRange = ({ count, scrollTop, height, overscan, itemHeight }: RangeArgs) => ({\n  startIndex: Math.max(0, Math.floor(scrollTop / itemHeight) - overscan),\n  endIndex: Math.min(count - 1, Math.ceil((scrollTop + height) / itemHeight) + overscan),\n});\n\n/**\n * `height`, `itemHeight`, `estimatedItemHeight` and an item's own `height` are\n * design px. The range is computed in the px `scrollTop` is measured in\n * (`remPx`), the viewport and the scroll content are drawn in `rem`, and each\n * item's `top`/`height` is the `remPx` of its design offset and height.\n */\nexport const useVirtualList = ({\n  items,\n  variant = 'fixed',\n  height,\n  itemHeight,\n  estimatedItemHeight,\n  overscan = 5,\n  onScroll,\n  scrollContainerRef,\n}: VirtualListProps) => {\n  const theme = useTheme();\n  // 40 design px when the caller does not size a row.\n  const design = useDesignHeights(items, variant, itemHeight ?? 40, estimatedItemHeight ?? 40);\n\n  const report = useCallback((top: number) => onScroll?.(top), [onScroll]);\n  const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);\n\n  const visibleItems = useMemo(() => {\n    const args = {\n      count: items.length,\n      scrollTop,\n      height: remPx(theme, height),\n      overscan,\n      itemHeight: remPx(theme, design.size(0)),\n      getItemHeight: (index: number) => remPx(theme, design.size(index)),\n    };\n    const { startIndex, endIndex } = variant === 'fixed' ? fixedRange(args) : variableRange(args);\n    const result = [];\n\n    for (let i = startIndex; i <= endIndex; i++) {\n      const item = items[i];\n      if (!item) continue;\n\n      result.push({\n        item,\n        index: i,\n        style: {\n          position: 'absolute' as const,\n          top: remPx(theme, design.offset(i)),\n          left: 0,\n          width: '100%',\n          height: remPx(theme, design.size(i)),\n        },\n      });\n    }\n\n    return result;\n  }, [items, scrollTop, height, overscan, variant, design, theme]);\n\n  return {\n    totalHeight: rem(theme, design.total),\n    viewportHeight: rem(theme, height),\n    visibleItems,\n    handleScroll,\n  };\n};\n\n/** The column width in DESIGN px: the caller's, or an even share of a numeric width. */\nconst useColumnWidth = (\n  columnWidth: number | undefined,\n  width: number | string,\n  columnCount: number,\n  gap: number,\n) =>\n  useMemo(() => {\n    if (columnWidth) return columnWidth;\n\n    const containerWidth = typeof width === 'number' ? width : 300; // fallback\n    return (containerWidth - (columnCount - 1) * gap) / columnCount;\n  }, [columnWidth, width, columnCount, gap]);\n\n/**\n * `height`, `rowHeight`, `columnWidth` and `gap` are design px: the range and\n * every cell's box are computed through `remPx`, the viewport and the content\n * are drawn through `rem`.\n */\nexport const useVirtualGrid = ({\n  items,\n  height,\n  width = '100%',\n  columnCount,\n  rowHeight,\n  columnWidth,\n  gap = 0,\n  overscan = 5,\n  onScroll,\n  scrollContainerRef,\n}: VirtualGridProps) => {\n  const theme = useTheme();\n  const rowCount = Math.ceil(items.length / columnCount);\n  const designColumn = useColumnWidth(columnWidth, width, columnCount, gap);\n\n  const report = useCallback(\n    (top: number, left: number) => onScroll?.(top, left),\n    [onScroll],\n  );\n  const { scrollTop, handleScroll } = useScrollTop(scrollContainerRef, report);\n\n  const visibleItems = useMemo(() => {\n    const pitch = remPx(theme, rowHeight + gap);\n    const stride = remPx(theme, designColumn + gap);\n    const startRow = Math.max(0, Math.floor(scrollTop / pitch) - overscan);\n    const endRow = Math.min(\n      rowCount - 1,\n      Math.ceil((scrollTop + remPx(theme, height)) / pitch) + overscan,\n    );\n\n    // Rows are contiguous in `items`, so the visible block is one index range\n    // rather than a row loop wrapping a column loop.\n    const firstIndex = startRow * columnCount;\n    const lastIndex = Math.min((endRow + 1) * columnCount - 1, items.length - 1);\n    const result = [];\n\n    for (let index = firstIndex; index <= lastIndex; index++) {\n      const item = items[index];\n      if (!item) continue;\n\n      const rowIndex = Math.floor(index / columnCount);\n      const columnIndex = index % columnCount;\n\n      result.push({\n        item,\n        index,\n        columnIndex,\n        rowIndex,\n        style: {\n          position: 'absolute' as const,\n          top: rowIndex * pitch,\n          left: columnIndex * stride,\n          width: remPx(theme, designColumn),\n          height: remPx(theme, rowHeight),\n        },\n      });\n    }\n\n    return result;\n  }, [items, scrollTop, height, overscan, rowCount, columnCount, rowHeight, gap, designColumn, theme]);\n\n  return {\n    totalHeight: rem(theme, rowCount * (rowHeight + gap) - gap),\n    viewportHeight: rem(theme, height),\n    visibleItems,\n    handleScroll,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-3TDVGZZN.js → chunk-QBTBRJ2Q.js}

@@ -1,3 +1,8 @@
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/Resizable/Resizable.helpers.ts
 var defaultHandles = (variant) => {
   switch (variant) {
@@ -43,16 +48,30 @@ var handleStyle = (theme, handle, active) => {
   };
   switch (handle) {
     case "right":
-      return { ...baseStyle, top: 0, right: -2, width: 4, height: "100%", cursor: "ew-resize" };
+      return {
+        ...baseStyle,
+        top: 0,
+        right: rem(theme, -2),
+        width: rem(theme, 4),
+        height: "100%",
+        cursor: "ew-resize"
+      };
     case "bottom":
-      return { ...baseStyle, bottom: -2, left: 0, width: "100%", height: 4, cursor: "ns-resize" };
+      return {
+        ...baseStyle,
+        bottom: rem(theme, -2),
+        left: 0,
+        width: "100%",
+        height: rem(theme, 4),
+        cursor: "ns-resize"
+      };
     case "bottomRight":
       return {
         ...baseStyle,
-        bottom: -2,
-        right: -2,
-        width: 8,
-        height: 8,
+        bottom: rem(theme, -2),
+        right: rem(theme, -2),
+        width: rem(theme, 8),
+        height: rem(theme, 8),
         cursor: "nw-resize",
         borderRadius: "50%"
       };
@@ -62,14 +81,17 @@ var handleStyle = (theme, handle, active) => {
 };
 var RESIZABLE_DEFAULTS = {
   variant: "both",
-  width: 200,
-  height: 200,
-  minWidth: 50,
-  maxWidth: 1e3,
-  minHeight: 50,
-  maxHeight: 1e3,
   disabled: false
 };
+var DEFAULT_BOX_PX = { start: 200, min: 50, max: 1e3 };
+var startSizePx = (theme, width, height) => ({
+  width: remPx(theme, width ?? DEFAULT_BOX_PX.start),
+  height: remPx(theme, height ?? DEFAULT_BOX_PX.start)
+});
+var axisPx = (theme, min, max) => ({
+  min: remPx(theme, min ?? DEFAULT_BOX_PX.min),
+  max: remPx(theme, max ?? DEFAULT_BOX_PX.max)
+});
 var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
 );
@@ -79,6 +101,8 @@ export {
   defaultHandles,
   resizedTo,
   handleStyle,
+  startSizePx,
+  axisPx,
   resolveResizableProps
 };
-//# sourceMappingURL=chunk-3TDVGZZN.js.map
+//# sourceMappingURL=chunk-QBTBRJ2Q.js.map

package/dist/chunk-QBTBRJ2Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Resizable/Resizable.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport type { ResizableProps, ResizableVariant, ResizeHandle } from './Resizable.types';\n\n/** One axis's clamp, in the px a drag runs in. */\nexport interface Axis {\n  min: number;\n  max: number;\n}\n\nexport interface Bounds {\n  width: Axis;\n  height: Axis;\n}\n\nexport const defaultHandles = (variant: ResizableVariant): ResizeHandle[] => {\n  switch (variant) {\n    case 'horizontal':\n      return ['right'];\n    case 'vertical':\n      return ['bottom'];\n    default:\n      return ['right', 'bottom', 'bottomRight'];\n  }\n};\n\nconst HORIZONTAL_GROW: readonly ResizeHandle[] = ['right', 'topRight', 'bottomRight'];\nconst HORIZONTAL_SHRINK: readonly ResizeHandle[] = ['left', 'topLeft', 'bottomLeft'];\nconst VERTICAL_GROW: readonly ResizeHandle[] = ['bottom', 'bottomLeft', 'bottomRight'];\nconst VERTICAL_SHRINK: readonly ResizeHandle[] = ['top', 'topLeft', 'topRight'];\n\nconst clamp = (value: number, { min, max }: Axis): number =>\n  Math.max(min, Math.min(max, value));\n\n/**\n * A handle on the right or bottom edge grows the box by the drag distance; one on\n * the left or top shrinks it by the same amount, because the opposite edge is\n * what stays put. A handle on neither edge of this axis leaves it alone.\n */\nconst alongAxis = (\n  handle: ResizeHandle,\n  grow: readonly ResizeHandle[],\n  shrink: readonly ResizeHandle[],\n  start: number,\n  delta: number,\n  bounds: Axis,\n): number => {\n  if (grow.includes(handle)) return clamp(start + delta, bounds);\n  if (shrink.includes(handle)) return clamp(start - delta, bounds);\n  return start;\n};\n\nexport const resizedTo = (\n  handle: ResizeHandle,\n  delta: { x: number; y: number },\n  start: { width: number; height: number },\n  bounds: Bounds,\n) => ({\n  width: alongAxis(handle, HORIZONTAL_GROW, HORIZONTAL_SHRINK, start.width, delta.x, bounds.width),\n  height: alongAxis(\n    handle,\n    VERTICAL_GROW,\n    VERTICAL_SHRINK,\n    start.height,\n    delta.y,\n    bounds.height,\n  ),\n});\n\nexport const handleStyle = (theme: Theme, handle: ResizeHandle, active: boolean) => {\n  const baseStyle = {\n    position: 'absolute' as const,\n    backgroundColor: theme.palette.primary.main,\n    opacity: 0,\n    transition: theme.transitions.create('opacity'),\n    '&:hover': {\n      opacity: 0.3,\n    },\n    ...(active ? { opacity: 0.5 } : {}),\n  };\n\n  switch (handle) {\n    case 'right':\n      return {\n        ...baseStyle,\n        top: 0,\n        right: rem(theme, -2),\n        width: rem(theme, 4),\n        height: '100%',\n        cursor: 'ew-resize',\n      };\n    case 'bottom':\n      return {\n        ...baseStyle,\n        bottom: rem(theme, -2),\n        left: 0,\n        width: '100%',\n        height: rem(theme, 4),\n        cursor: 'ns-resize',\n      };\n    case 'bottomRight':\n      return {\n        ...baseStyle,\n        bottom: rem(theme, -2),\n        right: rem(theme, -2),\n        width: rem(theme, 8),\n        height: rem(theme, 8),\n        cursor: 'nw-resize',\n        borderRadius: '50%',\n      };\n    default:\n      return baseStyle;\n  }\n};\n\ntype ResizableDefaultedKeys = 'variant' | 'disabled';\n\ntype ResolvedResizableProps = ResizableProps &\n  Required<Pick<ResizableProps, ResizableDefaultedKeys>>;\n\nconst RESIZABLE_DEFAULTS: Pick<ResizableProps, ResizableDefaultedKeys> = {\n  variant: 'both',\n  disabled: false,\n};\n\n/** The box's own defaults, in design px: where it starts, and its clamp. */\nconst DEFAULT_BOX_PX = { start: 200, min: 50, max: 1000 } as const;\n\n/**\n * Where the box starts, in the px a drag runs in. The consumer's sizes are\n * design px, like every other size in the package; a drag is pointer pixels,\n * so the live size is px from here on.\n */\nexport const startSizePx = (theme: Theme, width?: number, height?: number) => ({\n  width: remPx(theme, width ?? DEFAULT_BOX_PX.start),\n  height: remPx(theme, height ?? DEFAULT_BOX_PX.start),\n});\n\n/** One axis's clamp, from the consumer's design px to the px a drag runs in. */\nexport const axisPx = (theme: Theme, min?: number, max?: number): Axis => ({\n  min: remPx(theme, min ?? DEFAULT_BOX_PX.min),\n  max: remPx(theme, max ?? DEFAULT_BOX_PX.max),\n});\n\n// Strips explicitly-undefined props before the merge, so `minWidth={undefined}`\n// still falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: ResizableProps): Partial<ResizableProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<ResizableProps>;\n\nexport const resolveResizableProps = (props: ResizableProps): ResolvedResizableProps =>\n  ({ ...RESIZABLE_DEFAULTS, ...definedProps(props) }) as ResolvedResizableProps;\n"],"mappings":"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","names":[]}

package/dist/{chunk-2WFDHFK4.js → chunk-QNCWSDXE.js}

@@ -1,19 +1,33 @@
 import {
   cn
 } from "./chunk-NHL5ERBM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/CardGrid/CardGrid.tsx
+import { useTheme } from "@mui/material/styles/index.js";
 import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
-var GRID_GAP = 16;
+var GRID = {
+  /** Between cards: the grid's `gap`, and what the scroll math reserves per gap. */
+  gapPx: 16,
+  /**
+   * `scroll`: the next card left visible past the last whole one — the
+   * "there's more, swipe" hint. Wide enough to read as a clipped card (rounded
+   * edge + a slice of its photo) rather than as a rendering glitch.
+   */
+  peekPx: 28,
+  /** Under the row — the tabwoah original's Tailwind `pb-0.5`. */
+  paddingBottomPx: 2
+};
 var SCROLL_VISIBLE_CARDS = 2;
-var SCROLL_PEEK_WIDTH = 28;
-function scrollTrackWidth(count, max) {
+function scrollTrackWidth(theme, count, max) {
   const tracks = Math.max(1, Math.min(count, SCROLL_VISIBLE_CARDS));
   const overflows = count > tracks;
   const gaps = overflows ? tracks : tracks - 1;
-  const reserved = gaps * GRID_GAP + (overflows ? SCROLL_PEEK_WIDTH : 0);
-  return `min(${max}px, calc((100% - ${reserved}px) / ${tracks}))`;
+  const reserved = gaps * GRID.gapPx + (overflows ? GRID.peekPx : 0);
+  return `min(${rem(theme, max)}, calc((100% - ${rem(theme, reserved)}) / ${tracks}))`;
 }
 function CardGrid({
   cardWidth,
@@ -24,22 +38,23 @@ function CardGrid({
   containerRef,
   children
 }) {
+  const theme = useTheme();
   const style = {
     display: "grid",
-    gap: "1rem",
-    paddingBottom: "2px"
+    gap: rem(theme, GRID.gapPx),
+    paddingBottom: rem(theme, GRID.paddingBottomPx)
   };
   if (variant === "scroll") {
     const max = maxCardWidth ?? Math.round(cardWidth * 1.6);
     style.gridAutoFlow = "column";
-    style.gridAutoColumns = scrollTrackWidth(Children.count(children), max);
+    style.gridAutoColumns = scrollTrackWidth(theme, Children.count(children), max);
     style.overflowX = "auto";
     style.overflowY = "hidden";
     style.scrollSnapType = "x mandatory";
   } else if (variant === "fluid") {
-    style.gridTemplateColumns = `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`;
+    style.gridTemplateColumns = `repeat(auto-fill, minmax(${rem(theme, cardWidth)}, 1fr))`;
   } else {
-    style.gridTemplateColumns = `repeat(auto-fill, ${cardWidth}px)`;
+    style.gridTemplateColumns = `repeat(auto-fill, ${rem(theme, cardWidth)})`;
     style.justifyContent = "space-around";
   }
   const content = variant === "scroll" ? Children.map(children, (child) => /* @__PURE__ */ jsx("div", { style: { scrollSnapAlign: "start" }, children: child })) : children;
@@ -49,4 +64,4 @@ function CardGrid({
 export {
   CardGrid
 };
-//# sourceMappingURL=chunk-2WFDHFK4.js.map
+//# sourceMappingURL=chunk-QNCWSDXE.js.map