@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-LTEXWGK6.js

@@ -0,0 +1,176 @@
+import {
+  DEFAULT_AUTOPLAY_INTERVAL_MS,
+  MAX_ZOOM,
+  MIN_SWIPE_DISTANCE,
+  MIN_ZOOM,
+  WHEEL_ZOOM_FACTOR,
+  ZOOM_STEP
+} from "./chunk-56SJYTIT.js";
+
+// src/components/data-display/Lightbox/Lightbox.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var clampZoom = (zoom) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
+var isImageItem = (item) => Boolean(item && (item.type === "image" || !item.type));
+var usePreloader = () => {
+  const [preloadedImages, setPreloadedImages] = useState(/* @__PURE__ */ new Set());
+  return useCallback(
+    (src) => {
+      if (preloadedImages.has(src)) return;
+      const img = new window.Image();
+      img.onload = () => setPreloadedImages((prev) => /* @__PURE__ */ new Set([...prev, src]));
+      img.src = src;
+    },
+    [preloadedImages]
+  );
+};
+var useZoomState = () => {
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const resetZoom = useCallback(() => {
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  }, []);
+  const zoomIn = useCallback(() => setZoomLevel((prev) => Math.min(MAX_ZOOM, prev * ZOOM_STEP)), []);
+  const zoomOut = useCallback(
+    () => setZoomLevel((prev) => Math.max(MIN_ZOOM, prev / ZOOM_STEP)),
+    []
+  );
+  return { zoomLevel, panOffset, setZoomLevel, resetZoom, zoomIn, zoomOut };
+};
+var useWheelZoom = ({
+  enabled,
+  setZoomLevel
+}) => useCallback(
+  (event) => {
+    if (!enabled) return;
+    event.preventDefault();
+    setZoomLevel((prev) => clampZoom(prev + event.deltaY * -WHEEL_ZOOM_FACTOR));
+  },
+  [enabled, setZoomLevel]
+);
+var useNavigation = ({
+  items,
+  loop,
+  startIndex,
+  resetZoom,
+  preloadImage
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(
+    Math.max(0, Math.min(startIndex, items.length - 1))
+  );
+  const goToIndex = useCallback(
+    (index) => {
+      if (items.length === 0) return;
+      const newIndex = loop ? (index % items.length + items.length) % items.length : Math.max(0, Math.min(index, items.length - 1));
+      setCurrentIndex(newIndex);
+      resetZoom();
+      [items[newIndex - 1], items[newIndex + 1]].filter(isImageItem).forEach((item) => preloadImage(item.src));
+    },
+    [items, loop, resetZoom, preloadImage]
+  );
+  const next = useCallback(() => {
+    if (currentIndex < items.length - 1 || loop) goToIndex(currentIndex + 1);
+  }, [currentIndex, items.length, loop, goToIndex]);
+  const prev = useCallback(() => {
+    if (currentIndex > 0 || loop) goToIndex(currentIndex - 1);
+  }, [currentIndex, loop, goToIndex]);
+  return { currentIndex, goToIndex, next, prev };
+};
+var useAutoplay = ({
+  isOpen,
+  autoplay,
+  itemCount,
+  currentIndex,
+  next
+}) => {
+  const [isAutoPlaying, setIsAutoPlaying] = useState(false);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    if (!isAutoPlaying || !autoplay || itemCount <= 1) return;
+    const interval = typeof autoplay === "object" ? autoplay.interval || DEFAULT_AUTOPLAY_INTERVAL_MS : DEFAULT_AUTOPLAY_INTERVAL_MS;
+    timerRef.current = window.setTimeout(next, interval);
+    return () => window.clearTimeout(timerRef.current);
+  }, [isAutoPlaying, autoplay, currentIndex, next, itemCount]);
+  useEffect(() => {
+    setIsAutoPlaying(Boolean(isOpen && autoplay && itemCount > 1));
+  }, [isOpen, autoplay, itemCount]);
+  const stopAutoplay = useCallback(() => {
+    setIsAutoPlaying(false);
+    window.clearTimeout(timerRef.current);
+  }, []);
+  return { isAutoPlaying, setIsAutoPlaying, stopAutoplay };
+};
+var useLightboxKeyboard = ({
+  isOpen,
+  showControls,
+  autoplay,
+  close,
+  prev,
+  next,
+  setIsAutoPlaying
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const arrows = { ArrowLeft: prev, ArrowRight: next };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        close();
+        return;
+      }
+      const arrow = arrows[event.key];
+      if (arrow && showControls) {
+        event.preventDefault();
+        arrow();
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        if (autoplay) setIsAutoPlaying((playing) => !playing);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, showControls, close, prev, next, autoplay, setIsAutoPlaying]);
+};
+var useSwipe = ({
+  prev,
+  next,
+  close
+}) => {
+  const touchStartRef = useRef(null);
+  const handleTouchStart = useCallback((event) => {
+    const touch = event.touches.length === 1 ? event.touches[0] : void 0;
+    if (touch) touchStartRef.current = { x: touch.clientX, y: touch.clientY };
+  }, []);
+  const handleTouchEnd = useCallback(
+    (event) => {
+      const start = touchStartRef.current;
+      const touch = event.changedTouches[0];
+      touchStartRef.current = null;
+      if (!start || !touch) return;
+      const deltaX = touch.clientX - start.x;
+      const deltaY = touch.clientY - start.y;
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (Math.abs(deltaX) > MIN_SWIPE_DISTANCE) {
+          if (deltaX > 0) prev();
+          else next();
+        }
+        return;
+      }
+      if (deltaY > MIN_SWIPE_DISTANCE) close();
+    },
+    [prev, next, close]
+  );
+  return { handleTouchStart, handleTouchEnd };
+};
+
+export {
+  usePreloader,
+  useZoomState,
+  useWheelZoom,
+  useNavigation,
+  useAutoplay,
+  useLightboxKeyboard,
+  useSwipe
+};
+//# sourceMappingURL=chunk-LTEXWGK6.js.map

package/dist/chunk-LTEXWGK6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.hooks.ts"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport {\n  DEFAULT_AUTOPLAY_INTERVAL_MS,\n  MAX_ZOOM,\n  MIN_SWIPE_DISTANCE,\n  MIN_ZOOM,\n  WHEEL_ZOOM_FACTOR,\n  ZOOM_STEP,\n} from './Lightbox.constants';\nimport type { LightboxItem, LightboxProps } from './Lightbox.types';\n\nconst clampZoom = (zoom: number): number => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));\n\n// Items with no explicit type are images.\nconst isImageItem = (item?: LightboxItem): item is LightboxItem =>\n  Boolean(item && (item.type === 'image' || !item.type));\n\n// Images are fetched once and remembered, so stepping back to one is instant.\nexport const usePreloader = () => {\n  const [preloadedImages, setPreloadedImages] = useState<Set<string>>(new Set());\n\n  return useCallback(\n    (src: string) => {\n      if (preloadedImages.has(src)) return;\n\n      const img = new window.Image();\n      img.onload = () => setPreloadedImages((prev) => new Set([...prev, src]));\n      img.src = src;\n    },\n    [preloadedImages],\n  );\n};\n\nexport interface ZoomState {\n  zoomLevel: number;\n  panOffset: { x: number; y: number };\n  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;\n  resetZoom: () => void;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nexport const useZoomState = (): ZoomState => {\n  const [zoomLevel, setZoomLevel] = useState(1);\n  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });\n\n  const resetZoom = useCallback(() => {\n    setZoomLevel(1);\n    setPanOffset({ x: 0, y: 0 });\n  }, []);\n\n  const zoomIn = useCallback(() => setZoomLevel((prev) => Math.min(MAX_ZOOM, prev * ZOOM_STEP)), []);\n  const zoomOut = useCallback(\n    () => setZoomLevel((prev) => Math.max(MIN_ZOOM, prev / ZOOM_STEP)),\n    [],\n  );\n\n  return { zoomLevel, panOffset, setZoomLevel, resetZoom, zoomIn, zoomOut };\n};\n\nexport const useWheelZoom = ({\n  enabled,\n  setZoomLevel,\n}: {\n  enabled: boolean;\n  setZoomLevel: React.Dispatch<React.SetStateAction<number>>;\n}) =>\n  useCallback(\n    (event: React.WheelEvent) => {\n      if (!enabled) return;\n\n      event.preventDefault();\n      // Scrolling up (negative deltaY) zooms in.\n      setZoomLevel((prev) => clampZoom(prev + event.deltaY * -WHEEL_ZOOM_FACTOR));\n    },\n    [enabled, setZoomLevel],\n  );\n\nexport const useNavigation = ({\n  items,\n  loop,\n  startIndex,\n  resetZoom,\n  preloadImage,\n}: {\n  items: LightboxItem[];\n  loop: boolean;\n  startIndex: number;\n  resetZoom: () => void;\n  preloadImage: (src: string) => void;\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(\n    Math.max(0, Math.min(startIndex, items.length - 1)),\n  );\n\n  const goToIndex = useCallback(\n    (index: number) => {\n      if (items.length === 0) return;\n\n      // Looping wraps both ways; otherwise the index sticks at the ends.\n      const newIndex = loop\n        ? ((index % items.length) + items.length) % items.length\n        : Math.max(0, Math.min(index, items.length - 1));\n\n      setCurrentIndex(newIndex);\n      resetZoom();\n\n      // Fetch the neighbours so a step in either direction shows immediately.\n      [items[newIndex - 1], items[newIndex + 1]]\n        .filter(isImageItem)\n        .forEach((item) => preloadImage(item.src));\n    },\n    [items, loop, resetZoom, preloadImage],\n  );\n\n  const next = useCallback(() => {\n    if (currentIndex < items.length - 1 || loop) goToIndex(currentIndex + 1);\n  }, [currentIndex, items.length, loop, goToIndex]);\n\n  const prev = useCallback(() => {\n    if (currentIndex > 0 || loop) goToIndex(currentIndex - 1);\n  }, [currentIndex, loop, goToIndex]);\n\n  return { currentIndex, goToIndex, next, prev };\n};\n\nexport const useAutoplay = ({\n  isOpen,\n  autoplay,\n  itemCount,\n  currentIndex,\n  next,\n}: {\n  isOpen: boolean;\n  autoplay: LightboxProps['autoplay'];\n  itemCount: number;\n  currentIndex: number;\n  next: () => void;\n}) => {\n  const [isAutoPlaying, setIsAutoPlaying] = useState(false);\n  const timerRef = useRef<number | undefined>(undefined);\n\n  useEffect(() => {\n    if (!isAutoPlaying || !autoplay || itemCount <= 1) return;\n\n    const interval =\n      typeof autoplay === 'object'\n        ? autoplay.interval || DEFAULT_AUTOPLAY_INTERVAL_MS\n        : DEFAULT_AUTOPLAY_INTERVAL_MS;\n\n    timerRef.current = window.setTimeout(next, interval);\n\n    return () => window.clearTimeout(timerRef.current);\n  }, [isAutoPlaying, autoplay, currentIndex, next, itemCount]);\n\n  // Opening a gallery with more than one item starts the slideshow.\n  useEffect(() => {\n    setIsAutoPlaying(Boolean(isOpen && autoplay && itemCount > 1));\n  }, [isOpen, autoplay, itemCount]);\n\n  const stopAutoplay = useCallback(() => {\n    setIsAutoPlaying(false);\n    window.clearTimeout(timerRef.current);\n  }, []);\n\n  return { isAutoPlaying, setIsAutoPlaying, stopAutoplay };\n};\n\nexport const useLightboxKeyboard = ({\n  isOpen,\n  showControls,\n  autoplay,\n  close,\n  prev,\n  next,\n  setIsAutoPlaying,\n}: {\n  isOpen: boolean;\n  showControls: boolean;\n  autoplay: LightboxProps['autoplay'];\n  close: () => void;\n  prev: () => void;\n  next: () => void;\n  setIsAutoPlaying: React.Dispatch<React.SetStateAction<boolean>>;\n}) => {\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const arrows: Record<string, () => void> = { ArrowLeft: prev, ArrowRight: next };\n\n    const handleKeyDown = (event: { key: string; preventDefault: () => void }) => {\n      if (event.key === 'Escape') {\n        close();\n        return;\n      }\n\n      const arrow = arrows[event.key];\n      if (arrow && showControls) {\n        event.preventDefault();\n        arrow();\n        return;\n      }\n\n      if (event.key === ' ') {\n        event.preventDefault();\n        if (autoplay) setIsAutoPlaying((playing) => !playing);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOpen, showControls, close, prev, next, autoplay, setIsAutoPlaying]);\n};\n\n// Horizontal swipes step through the gallery; a downward swipe dismisses it.\nexport const useSwipe = ({\n  prev,\n  next,\n  close,\n}: {\n  prev: () => void;\n  next: () => void;\n  close: () => void;\n}) => {\n  const touchStartRef = useRef<{ x: number; y: number } | null>(null);\n\n  const handleTouchStart = useCallback((event: React.TouchEvent) => {\n    const touch = event.touches.length === 1 ? event.touches[0] : undefined;\n    if (touch) touchStartRef.current = { x: touch.clientX, y: touch.clientY };\n  }, []);\n\n  const handleTouchEnd = useCallback(\n    (event: React.TouchEvent) => {\n      const start = touchStartRef.current;\n      const touch = event.changedTouches[0];\n      touchStartRef.current = null;\n      if (!start || !touch) return;\n\n      const deltaX = touch.clientX - start.x;\n      const deltaY = touch.clientY - start.y;\n\n      // Whichever axis moved further decides what the gesture meant.\n      if (Math.abs(deltaX) > Math.abs(deltaY)) {\n        if (Math.abs(deltaX) > MIN_SWIPE_DISTANCE) {\n          if (deltaX > 0) prev();\n          else next();\n        }\n        return;\n      }\n\n      if (deltaY > MIN_SWIPE_DISTANCE) close();\n    },\n    [prev, next, close],\n  );\n\n  return { handleTouchStart, handleTouchEnd };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-LVCUJ7YU.js

@@ -0,0 +1,69 @@
+// src/components/layout/ContentToolbar/FilterTrigger.tsx
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterTrigger({
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  activeCount = 0,
+  label = "Filtros",
+  "data-testid": testId = "toggle-filters-btn"
+}) {
+  const active = activeCount > 0 || hasActiveFilters;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "text",
+      size: "small",
+      color: "inherit",
+      "data-testid": testId,
+      "aria-expanded": open,
+      "aria-label": open ? "Close filters" : "Open filters",
+      onClick: () => onOpenChange(!open),
+      startIcon: /* @__PURE__ */ jsx(FilterIcon, { sx: { fontSize: 16 } }),
+      sx: {
+        minWidth: 0,
+        height: 32,
+        px: 1,
+        gap: 0.25,
+        textTransform: "none",
+        fontWeight: 600,
+        color: active ? "primary.main" : "text.primary",
+        bgcolor: open ? "action.selected" : "transparent"
+      },
+      children: [
+        label,
+        activeCount > 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            "data-testid": `${testId}-count`,
+            sx: {
+              ml: 0.5,
+              minWidth: 18,
+              height: 18,
+              px: 0.5,
+              borderRadius: 999,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "0.7rem",
+              fontWeight: 700,
+              lineHeight: 1,
+              bgcolor: "primary.main",
+              color: "primary.contrastText"
+            },
+            children: activeCount
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  FilterTrigger
+};
+//# sourceMappingURL=chunk-LVCUJ7YU.js.map

package/dist/chunk-LVCUJ7YU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/FilterTrigger.tsx"],"sourcesContent":["'use client';\n\nimport FilterIcon from '@mui/icons-material/FilterListRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport React from 'react';\n\nimport type { FilterTriggerProps } from './ContentToolbar.types';\n\n/**\n * Labeled filter toggle: a \"Filtros\" button (styled like the sibling toolbar\n * controls) with a funnel icon and, when filters are active, a count badge — so\n * it's obvious that the list is filtered and by how many facets. The panel itself\n * is supplied by the consumer.\n */\nexport function FilterTrigger({\n  open,\n  onOpenChange,\n  hasActiveFilters = false,\n  activeCount = 0,\n  label = 'Filtros',\n  'data-testid': testId = 'toggle-filters-btn',\n}: FilterTriggerProps): React.JSX.Element {\n  const active = activeCount > 0 || hasActiveFilters;\n  return (\n    <Button\n      variant=\"text\"\n      size=\"small\"\n      color=\"inherit\"\n      data-testid={testId}\n      aria-expanded={open}\n      aria-label={open ? 'Close filters' : 'Open filters'}\n      onClick={() => onOpenChange(!open)}\n      startIcon={<FilterIcon sx={{ fontSize: 16 }} />}\n      sx={{\n        minWidth: 0,\n        height: 32,\n        px: 1,\n        gap: 0.25,\n        textTransform: 'none',\n        fontWeight: 600,\n        color: active ? 'primary.main' : 'text.primary',\n        bgcolor: open ? 'action.selected' : 'transparent',\n      }}\n    >\n      {label}\n      {activeCount > 0 && (\n        <Box\n          component=\"span\"\n          data-testid={`${testId}-count`}\n          sx={{\n            ml: 0.5,\n            minWidth: 18,\n            height: 18,\n            px: 0.5,\n            borderRadius: 999,\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontSize: '0.7rem',\n            fontWeight: 700,\n            lineHeight: 1,\n            bgcolor: 'primary.main',\n            color: 'primary.contrastText',\n          }}\n        >\n          {activeCount}\n        </Box>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";AAEA,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAChB,OAAO,YAAY;AAqBf,SAQa,KARb;AAVG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,eAAe,SAAS;AAC1B,GAA0C;AACxC,QAAM,SAAS,cAAc,KAAK;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,eAAa;AAAA,MACb,iBAAe;AAAA,MACf,cAAY,OAAO,kBAAkB;AAAA,MACrC,SAAS,MAAM,aAAa,CAAC,IAAI;AAAA,MACjC,WAAW,oBAAC,cAAW,IAAI,EAAE,UAAU,GAAG,GAAG;AAAA,MAC7C,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,OAAO,SAAS,iBAAiB;AAAA,QACjC,SAAS,OAAO,oBAAoB;AAAA,MACtC;AAAA,MAEC;AAAA;AAAA,QACA,cAAc,KACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAa,GAAG,MAAM;AAAA,YACtB,IAAI;AAAA,cACF,IAAI;AAAA,cACJ,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,IAAI;AAAA,cACJ,cAAc;AAAA,cACd,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-LVDRVPGD.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-LVDRVPGD.js.map

package/dist/chunk-LVDRVPGD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-LWYXMCX6.js

@@ -0,0 +1,158 @@
+import {
+  CategoryQuickActions
+} from "./chunk-E3IPN3KN.js";
+import {
+  CategoryPanelList
+} from "./chunk-5F4NIRVF.js";
+import {
+  CategoryPanelHead,
+  CategoryPinnedTray
+} from "./chunk-PLOOVF43.js";
+import {
+  CategoryMultiFoot,
+  CategorySingleFoot
+} from "./chunk-GPVB3FQP.js";
+import {
+  panelSx,
+  sheetSx
+} from "./chunk-XCT2ZLA6.js";
+import {
+  removeChip
+} from "./chunk-DVTCZR3K.js";
+
+// src/components/form/CategorySelect/CategoryPanel.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CategoryPanel({
+  state,
+  chips,
+  rowIds,
+  changed,
+  single,
+  sheet,
+  loading,
+  showCounts,
+  allowParentSelection,
+  ariaLabel,
+  onKeyDown,
+  onActivateCategory,
+  onActivateSubcategory,
+  onApply,
+  onCancel,
+  onCreateCategory,
+  searchInputRef,
+  listRef,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onKeyDown,
+      role: "dialog",
+      "aria-label": ariaLabel,
+      "data-testid": `${dataTestId}-panel`,
+      sx: (theme) => ({ ...panelSx(theme), ...sheet ? sheetSx(theme) : {} }),
+      children: [
+        /* @__PURE__ */ jsx(
+          CategoryPanelHead,
+          {
+            copy,
+            query: state.query,
+            placeholder: single ? copy.search.placeholderSingle : copy.search.placeholderMulti,
+            sheet,
+            quickActions: single ? void 0 : /* @__PURE__ */ jsx(CategoryQuickActions, { state, dataTestId, copy }),
+            onQueryChange: state.setQuery,
+            searchInputRef,
+            dataTestId
+          }
+        ),
+        !single && !loading && /* @__PURE__ */ jsx(PinnedTray, { state, chips, dataTestId, copy }),
+        /* @__PURE__ */ jsx(
+          CategoryPanelList,
+          {
+            copy,
+            groups: state.visibleGroups,
+            query: state.query,
+            draft: state.draft,
+            rowIds,
+            activeIndex: state.activeIndex,
+            sheet,
+            single,
+            loading,
+            showCounts,
+            allowParentSelection,
+            isExpanded: state.isExpanded,
+            onToggleExpanded: state.toggleExpanded,
+            onActivateCategory,
+            onActivateSubcategory,
+            onClearQuery: () => state.setQuery(""),
+            onCreateCategory,
+            listRef,
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelFooter,
+          {
+            state,
+            changed,
+            single,
+            sheet,
+            copy,
+            onApply,
+            onCancel,
+            dataTestId
+          }
+        )
+      ]
+    }
+  );
+}
+function PinnedTray({
+  state,
+  chips,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(
+    CategoryPinnedTray,
+    {
+      copy,
+      chips,
+      onRemove: (chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft)),
+      dataTestId
+    }
+  );
+}
+function PanelFooter({
+  state,
+  changed,
+  single,
+  sheet,
+  onApply,
+  onCancel,
+  dataTestId,
+  copy
+}) {
+  if (single) {
+    return /* @__PURE__ */ jsx(CategorySingleFoot, { sheet, onCancel, dataTestId, copy });
+  }
+  return /* @__PURE__ */ jsx(
+    CategoryMultiFoot,
+    {
+      count: state.draft.size,
+      changed,
+      sheet,
+      copy,
+      onClear: () => state.setDraft(/* @__PURE__ */ new Set()),
+      onApply,
+      dataTestId
+    }
+  );
+}
+
+export {
+  CategoryPanel
+};
+//# sourceMappingURL=chunk-LWYXMCX6.js.map

package/dist/chunk-LWYXMCX6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanel.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from \"../../../copy\";\nimport Box from '@mui/material/Box/index.js';\n\nimport { removeChip } from './category-tree';\nimport { CategoryMultiFoot, CategorySingleFoot } from './CategoryPanelFoot';\nimport { CategoryPanelHead, CategoryPinnedTray } from './CategoryPanelHead';\nimport { CategoryPanelList } from './CategoryPanelList';\nimport { CategoryQuickActions } from './CategoryQuickActions';\nimport { panelSx, sheetSx } from './CategorySelect.styles';\nimport type { CategoryGroup, CategorySelectionChip } from './CategorySelect.types';\nimport type { CategorySelectState } from './useCategorySelect';\n\nexport interface CategoryPanelProps {\n  /** The words this panel renders. REQUIRED — no default copy. */\n  copy: CategorySelectCopy;\n  state: CategorySelectState;\n  chips: CategorySelectionChip[];\n  rowIds: string[];\n  /** True when the applied selection differs from the draft. */\n  changed: boolean;\n  single: boolean;\n  sheet: boolean;\n  loading: boolean;\n  showCounts: boolean;\n  allowParentSelection: boolean;\n  ariaLabel: string;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  onActivateCategory: (group: CategoryGroup) => void;\n  onActivateSubcategory: (id: string) => void;\n  onApply: () => void;\n  onCancel: () => void;\n  onCreateCategory?: () => void;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  dataTestId: string;\n}\n\n/** Search + pinned selection + tree + footer, in the panel's own chrome. */\nexport function CategoryPanel({\n  state,\n  chips,\n  rowIds,\n  changed,\n  single,\n  sheet,\n  loading,\n  showCounts,\n  allowParentSelection,\n  ariaLabel,\n  onKeyDown,\n  onActivateCategory,\n  onActivateSubcategory,\n  onApply,\n  onCancel,\n  onCreateCategory,\n  searchInputRef,\n  listRef,\n  dataTestId,\n  copy,\n}: CategoryPanelProps): React.JSX.Element {\n  return (\n    <Box\n      onKeyDown={onKeyDown}\n      role=\"dialog\"\n      aria-label={ariaLabel}\n      data-testid={`${dataTestId}-panel`}\n      sx={(theme) => ({ ...panelSx(theme), ...(sheet ? sheetSx(theme) : {}) })}\n    >\n      <CategoryPanelHead\n        copy={copy}\n        query={state.query}\n        placeholder={single ? copy.search.placeholderSingle : copy.search.placeholderMulti}\n        sheet={sheet}\n        quickActions={\n          single ? undefined : <CategoryQuickActions state={state} dataTestId={dataTestId} copy={copy} />\n        }\n        onQueryChange={state.setQuery}\n        searchInputRef={searchInputRef}\n        dataTestId={dataTestId}\n      />\n      {!single && !loading && (\n        <PinnedTray state={state} chips={chips} dataTestId={dataTestId} copy={copy} />\n      )}\n      <CategoryPanelList copy={copy}\n        groups={state.visibleGroups}\n        query={state.query}\n        draft={state.draft}\n        rowIds={rowIds}\n        activeIndex={state.activeIndex}\n        sheet={sheet}\n        single={single}\n        loading={loading}\n        showCounts={showCounts}\n        allowParentSelection={allowParentSelection}\n        isExpanded={state.isExpanded}\n        onToggleExpanded={state.toggleExpanded}\n        onActivateCategory={onActivateCategory}\n        onActivateSubcategory={onActivateSubcategory}\n        onClearQuery={() => state.setQuery('')}\n        onCreateCategory={onCreateCategory}\n        listRef={listRef}\n        dataTestId={dataTestId}\n      />\n      <PanelFooter\n        state={state}\n        changed={changed}\n        single={single}\n        sheet={sheet}\n        copy={copy}\n        onApply={onApply}\n        onCancel={onCancel}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n}\n\n/** The selected-category chips, wired to remove from the draft. */\nfunction PinnedTray({\n  state,\n  chips,\n  dataTestId,\n  copy,\n}: Pick<CategoryPanelProps, 'state' | 'chips' | 'dataTestId' | 'copy'>): React.JSX.Element {\n  return (\n    <CategoryPinnedTray\n      copy={copy}\n      chips={chips}\n      onRemove={(chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft))}\n      dataTestId={dataTestId}\n    />\n  );\n}\n\n/** Whichever footer the mode calls for. */\nfunction PanelFooter({\n  state,\n  changed,\n  single,\n  sheet,\n  onApply,\n  onCancel,\n  dataTestId,\n  copy,\n}: Pick<\n  CategoryPanelProps,\n  'state' | 'changed' | 'single' | 'sheet' | 'onApply' | 'onCancel' | 'dataTestId' | 'copy'\n>): React.JSX.Element {\n  if (single) {\n    return (\n      <CategorySingleFoot sheet={sheet} onCancel={onCancel} dataTestId={dataTestId} copy={copy} />\n    );\n  }\n  return (\n    <CategoryMultiFoot\n      count={state.draft.size}\n      changed={changed}\n      sheet={sheet}\n      copy={copy}\n      onClear={() => state.setDraft(new Set())}\n      onApply={onApply}\n      dataTestId={dataTestId}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,OAAO,SAAS;AA4DZ,SAa2B,KAb3B;AAvBG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAC1B,IAAI,CAAC,WAAW,EAAE,GAAG,QAAQ,KAAK,GAAG,GAAI,QAAQ,QAAQ,KAAK,IAAI,CAAC,EAAG;AAAA,MAEtE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,MAAM;AAAA,YACb,aAAa,SAAS,KAAK,OAAO,oBAAoB,KAAK,OAAO;AAAA,YAClE;AAAA,YACA,cACE,SAAS,SAAY,oBAAC,wBAAqB,OAAc,YAAwB,MAAY;AAAA,YAE/F,eAAe,MAAM;AAAA,YACrB;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC,CAAC,UAAU,CAAC,WACX,oBAAC,cAAW,OAAc,OAAc,YAAwB,MAAY;AAAA,QAE9E;AAAA,UAAC;AAAA;AAAA,YAAkB;AAAA,YACjB,QAAQ,MAAM;AAAA,YACd,OAAO,MAAM;AAAA,YACb,OAAO,MAAM;AAAA,YACb;AAAA,YACA,aAAa,MAAM;AAAA,YACnB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,MAAM;AAAA,YAClB,kBAAkB,MAAM;AAAA,YACxB;AAAA,YACA;AAAA,YACA,cAAc,MAAM,MAAM,SAAS,EAAE;AAAA,YACrC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2F;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,CAAC,WAAW,MAAM,SAAS,WAAW,MAAM,WAAW,QAAQ,MAAM,KAAK,CAAC;AAAA,MACrF;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGsB;AACpB,MAAI,QAAQ;AACV,WACE,oBAAC,sBAAmB,OAAc,UAAoB,YAAwB,MAAY;AAAA,EAE9F;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM,MAAM,SAAS,oBAAI,IAAI,CAAC;AAAA,MACvC;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-LYKV3C7B.js

@@ -0,0 +1,203 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.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;
+}
+function scopeTabSx(active) {
+  return {
+    // A 44px min target: the strip is the first thing a thumb reaches on a phone.
+    minHeight: 44,
+    px: 1.5,
+    py: 1,
+    border: 0,
+    borderBottom: 2,
+    borderStyle: "solid",
+    borderColor: active ? "primary.main" : "transparent",
+    background: "none",
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    font: "inherit",
+    fontSize: "0.8125rem",
+    fontWeight: active ? 600 : 400,
+    color: active ? "primary.main" : "text.secondary",
+    "&:hover": { color: active ? "primary.main" : "text.primary" },
+    "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: -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: "0.6875rem",
+        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-LYKV3C7B.js.map