@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-CJHP6E34.js

@@ -0,0 +1,264 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/SearchPalette/SearchPalette.parts.tsx
+import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import SearchIcon from "@mui/icons-material/Search";
+import Avatar from "@mui/material/Avatar/index.js";
+import Box from "@mui/material/Box/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import InputBase from "@mui/material/InputBase/index.js";
+import List from "@mui/material/List/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function highlight(text, query) {
+  const q = query.trim();
+  const at = q ? text.toLowerCase().indexOf(q.toLowerCase()) : -1;
+  if (at < 0) return text;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    text.slice(0, at),
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: 700 }, children: text.slice(at, at + q.length) }),
+    text.slice(at + q.length)
+  ] });
+}
+function Lead({ lead }) {
+  if (!lead) return null;
+  if (lead.kind === "image") {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "img",
+        src: lead.src,
+        alt: lead.alt ?? "",
+        sx: { width: 32, height: 32, borderRadius: 1, objectFit: "cover", flexShrink: 0 }
+      }
+    );
+  }
+  if (lead.kind === "avatar") {
+    return /* @__PURE__ */ jsx(Avatar, { src: lead.src, alt: lead.alt ?? "", sx: { width: 32, height: 32, fontSize: sxRem(13.6) }, children: lead.fallback });
+  }
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: 32, justifyContent: "center", flexShrink: 0, color: "text.secondary" }, children: lead.node });
+}
+function ghostRemainder(topPrimary, query) {
+  if (!query || !topPrimary) return "";
+  return topPrimary.toLowerCase().startsWith(query.toLowerCase()) && topPrimary.length > query.length ? topPrimary.slice(query.length) : "";
+}
+function PaletteInput(props) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.25, px: 2, py: 1.5 }, children: [
+    /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { color: "text.secondary", flexShrink: 0 } }),
+    /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
+      props.ghost && /* @__PURE__ */ jsxs(
+        Box,
+        {
+          "aria-hidden": true,
+          sx: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            pointerEvents: "none",
+            whiteSpace: "pre",
+            overflow: "hidden",
+            fontSize: sxRem(16)
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: { visibility: "hidden" }, children: props.value }),
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "text.secondary", opacity: 0.6 }, children: props.ghost })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputBase,
+        {
+          fullWidth: true,
+          autoFocus: props.autoFocus,
+          value: props.value,
+          onChange: (e) => props.onChange(e.target.value),
+          onKeyDown: props.onKeyDown,
+          placeholder: props.placeholder,
+          inputProps: {
+            role: "combobox",
+            "aria-expanded": props.hasQuery,
+            "aria-label": props.inputAriaLabel,
+            "aria-autocomplete": "list"
+          },
+          sx: { fontSize: sxRem(16) }
+        }
+      )
+    ] }),
+    props.isLoading && /* @__PURE__ */ jsx(CircularProgress, { size: 18, sx: { flexShrink: 0 } })
+  ] });
+}
+function FilterChips(props) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "search-palette-filters",
+      sx: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 1,
+        px: 2,
+        pb: 1.5,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`
+      },
+      children: props.filters.map((chip) => {
+        const active = props.activeFilterIds.includes(chip.id);
+        return /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: chip.label,
+            icon: chip.icon,
+            onClick: () => props.onToggleFilter?.(chip.id),
+            variant: active ? "filled" : "outlined",
+            color: active ? "primary" : "default",
+            size: "small",
+            "aria-pressed": active,
+            "data-testid": `search-palette-filter-${chip.id}`,
+            sx: { borderRadius: 2 }
+          },
+          chip.id
+        );
+      })
+    }
+  );
+}
+function ResultRow(props) {
+  return /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      role: "option",
+      "aria-selected": props.active,
+      selected: props.active,
+      onMouseEnter: props.onHover,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: props.onSelect,
+      "data-testid": `search-palette-result-${props.index}`,
+      sx: { gap: 1.25, px: 2, py: 1 },
+      children: [
+        /* @__PURE__ */ jsx(Lead, { lead: props.lead }),
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { color: "text.primary" }, children: highlight(props.primary, props.query) }),
+          props.secondary && /* @__PURE__ */ jsx(Typography, { variant: "caption", noWrap: true, sx: { display: "block", color: "text.secondary" }, children: props.secondary })
+        ] }),
+        props.trailing != null && /* @__PURE__ */ jsx(Box, { sx: { flexShrink: 0, color: "text.secondary", fontSize: sxRem(12) }, children: props.trailing })
+      ]
+    }
+  );
+}
+function SubmitAllFooter(props) {
+  return /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      selected: props.selected,
+      onMouseEnter: props.onHover,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: props.onSelect,
+      "data-testid": "search-palette-submit-all",
+      sx: { gap: 1.25, px: 2, py: 1, borderTop: (theme) => `1px solid ${theme.palette.divider}` },
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { color: "text.secondary", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { flex: 1, minWidth: 0 }, noWrap: true, children: props.label }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, color: "text.secondary" }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", children: props.keyLabel }),
+          /* @__PURE__ */ jsx(KeyboardReturnIcon, { sx: { fontSize: sxRem(14) } })
+        ] })
+      ]
+    }
+  );
+}
+function PaletteBody(view) {
+  if (!view.hasQuery) {
+    return view.emptyQueryContent ? /* @__PURE__ */ jsx(Box, { "data-testid": "search-palette-empty-query", children: view.emptyQueryContent }) : null;
+  }
+  const empty = view.visible.length === 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !empty && /* @__PURE__ */ jsx(List, { dense: true, disablePadding: true, role: "listbox", "data-testid": "search-palette-results", children: view.visible.map((item, index) => /* @__PURE__ */ jsx(
+      ResultRow,
+      {
+        index,
+        active: index === view.activeIndex,
+        query: view.trimmed,
+        lead: view.getLead?.(item),
+        primary: view.getPrimary(item),
+        secondary: view.getSecondary?.(item),
+        trailing: view.getTrailing?.(item),
+        onSelect: () => view.onSelect(item),
+        onHover: () => view.setActiveIndex(index)
+      },
+      view.getKey(item)
+    )) }),
+    empty && !view.isLoading && /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1.5 }, "data-testid": "search-palette-no-results", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: view.noResultsLabel }) }),
+    view.showFooter && /* @__PURE__ */ jsx(
+      SubmitAllFooter,
+      {
+        label: view.submitAllLabel(view.trimmed),
+        keyLabel: view.submitKeyLabel,
+        selected: view.activeIndex === view.footerIndex,
+        onSelect: () => view.onSubmitAll?.(view.trimmed),
+        onHover: () => view.setActiveIndex(view.footerIndex)
+      }
+    )
+  ] });
+}
+var PALETTE_CARD_SX = {
+  width: "100%",
+  maxWidth: 640,
+  maxHeight: "100%",
+  borderRadius: 2,
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column"
+};
+function PaletteScrollArea({ children }) {
+  return /* @__PURE__ */ jsx(Box, { sx: { minHeight: 0, overflowY: "auto", overscrollBehavior: "contain" }, children });
+}
+function createKeyDownHandler(ctx) {
+  const move = (delta) => ctx.setActiveIndex((i) => Math.min(Math.max(i + delta, 0), Math.max(ctx.rowCount - 1, 0)));
+  const commit = () => {
+    if (!ctx.hasQuery) return;
+    if (ctx.activeIndex === ctx.footerIndex) {
+      ctx.onSubmitAll?.(ctx.trimmed);
+      return;
+    }
+    const item = ctx.visible[ctx.activeIndex];
+    if (item) ctx.onSelect(item);
+  };
+  const actions = {
+    ArrowDown: () => move(1),
+    ArrowUp: () => move(-1),
+    Enter: commit,
+    Escape: () => ctx.onClose?.()
+  };
+  return (e) => {
+    if ((e.key === "Tab" || e.key === "ArrowRight") && ctx.ghost && ctx.top) {
+      e.preventDefault();
+      ctx.onChange(ctx.getPrimary(ctx.top));
+      return;
+    }
+    const action = actions[e.key];
+    if (!action) return;
+    e.preventDefault();
+    action();
+  };
+}
+
+export {
+  Paper,
+  highlight,
+  Lead,
+  ghostRemainder,
+  PaletteInput,
+  FilterChips,
+  ResultRow,
+  SubmitAllFooter,
+  PaletteBody,
+  PALETTE_CARD_SX,
+  PaletteScrollArea,
+  createKeyDownHandler
+};
+//# sourceMappingURL=chunk-CJHP6E34.js.map

package/dist/chunk-CJHP6E34.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/SearchPalette/SearchPalette.parts.tsx"],"sourcesContent":["import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Avatar from '@mui/material/Avatar/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/** Bold the first case-insensitive occurrence of `query` within `text`. */\nexport function highlight(text: string, query: string): React.ReactNode {\n  const q = query.trim();\n  const at = q ? text.toLowerCase().indexOf(q.toLowerCase()) : -1;\n  if (at < 0) return text;\n  return (\n    <>\n      {text.slice(0, at)}\n      <Box component=\"span\" sx={{ fontWeight: 700 }}>\n        {text.slice(at, at + q.length)}\n      </Box>\n      {text.slice(at + q.length)}\n    </>\n  );\n}\n\n/** The leading visual of a result row (image / avatar / icon). */\nexport function Lead({ lead }: { lead: SearchResultLead | undefined }): React.JSX.Element | null {\n  if (!lead) return null;\n  if (lead.kind === 'image') {\n    return (\n      <Box\n        component=\"img\"\n        src={lead.src}\n        alt={lead.alt ?? ''}\n        sx={{ width: 32, height: 32, borderRadius: 1, objectFit: 'cover', flexShrink: 0 }}\n      />\n    );\n  }\n  if (lead.kind === 'avatar') {\n    return (\n      <Avatar src={lead.src} alt={lead.alt ?? ''} sx={{ width: 32, height: 32, fontSize: sxRem(13.6) }}>\n        {lead.fallback}\n      </Avatar>\n    );\n  }\n  return (\n    <Box sx={{ display: 'flex', width: 32, justifyContent: 'center', flexShrink: 0, color: 'text.secondary' }}>\n      {lead.node}\n    </Box>\n  );\n}\n\n/** Compute the ghost-completion remainder of the top result for `query`. */\nexport function ghostRemainder(topPrimary: string | undefined, query: string): string {\n  if (!query || !topPrimary) return '';\n  return topPrimary.toLowerCase().startsWith(query.toLowerCase()) && topPrimary.length > query.length\n    ? topPrimary.slice(query.length)\n    : '';\n}\n\n/** The search input row: leading icon, ghost overlay, the field, and a spinner. */\nexport function PaletteInput(props: {\n  value: string;\n  ghost: string;\n  isLoading: boolean;\n  autoFocus: boolean;\n  placeholder: string;\n  inputAriaLabel?: string;\n  hasQuery: boolean;\n  onChange: (v: string) => void;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, px: 2, py: 1.5 }}>\n      <SearchIcon fontSize=\"small\" sx={{ color: 'text.secondary', flexShrink: 0 }} />\n      <Box sx={{ position: 'relative', flex: 1, minWidth: 0 }}>\n        {props.ghost && (\n          <Box\n            aria-hidden\n            sx={{\n              position: 'absolute',\n              inset: 0,\n              display: 'flex',\n              alignItems: 'center',\n              pointerEvents: 'none',\n              whiteSpace: 'pre',\n              overflow: 'hidden',\n              fontSize: sxRem(16),\n            }}\n          >\n            <Box component=\"span\" sx={{ visibility: 'hidden' }}>\n              {props.value}\n            </Box>\n            <Box component=\"span\" sx={{ color: 'text.secondary', opacity: 0.6 }}>\n              {props.ghost}\n            </Box>\n          </Box>\n        )}\n        <InputBase\n          fullWidth\n          autoFocus={props.autoFocus}\n          value={props.value}\n          onChange={(e) => props.onChange(e.target.value)}\n          onKeyDown={props.onKeyDown}\n          placeholder={props.placeholder}\n          inputProps={{\n            role: 'combobox',\n            'aria-expanded': props.hasQuery,\n            'aria-label': props.inputAriaLabel,\n            'aria-autocomplete': 'list',\n          }}\n          sx={{ fontSize: sxRem(16) }}\n        />\n      </Box>\n      {props.isLoading && <CircularProgress size={18} sx={{ flexShrink: 0 }} />}\n    </Box>\n  );\n}\n\n/** The toggleable filter-chip row. */\nexport function FilterChips(props: {\n  filters: SearchFilterChip[];\n  activeFilterIds: string[];\n  onToggleFilter?: (id: string) => void;\n}): React.JSX.Element {\n  return (\n    <Box\n      data-testid=\"search-palette-filters\"\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: 1,\n        px: 2,\n        pb: 1.5,\n        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      {props.filters.map((chip) => {\n        const active = props.activeFilterIds.includes(chip.id);\n        return (\n          <Chip\n            key={chip.id}\n            label={chip.label}\n            icon={chip.icon as React.ReactElement | undefined}\n            onClick={() => props.onToggleFilter?.(chip.id)}\n            variant={active ? 'filled' : 'outlined'}\n            color={active ? 'primary' : 'default'}\n            size=\"small\"\n            aria-pressed={active}\n            data-testid={`search-palette-filter-${chip.id}`}\n            sx={{ borderRadius: 2 }}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n\n/** One rich result row. */\nexport function ResultRow(props: {\n  index: number;\n  active: boolean;\n  query: string;\n  lead: SearchResultLead | undefined;\n  primary: string;\n  secondary: string | undefined;\n  trailing: React.ReactNode | undefined;\n  onSelect: () => void;\n  onHover: () => void;\n}): React.JSX.Element {\n  return (\n    <ListItemButton\n      role=\"option\"\n      aria-selected={props.active}\n      selected={props.active}\n      onMouseEnter={props.onHover}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={props.onSelect}\n      data-testid={`search-palette-result-${props.index}`}\n      sx={{ gap: 1.25, px: 2, py: 1 }}\n    >\n      <Lead lead={props.lead} />\n      <Box sx={{ minWidth: 0, flex: 1 }}>\n        <Typography variant=\"body2\" noWrap sx={{ color: 'text.primary' }}>\n          {highlight(props.primary, props.query)}\n        </Typography>\n        {props.secondary && (\n          <Typography variant=\"caption\" noWrap sx={{ display: 'block', color: 'text.secondary' }}>\n            {props.secondary}\n          </Typography>\n        )}\n      </Box>\n      {props.trailing != null && (\n        <Box sx={{ flexShrink: 0, color: 'text.secondary', fontSize: sxRem(12) }}>{props.trailing}</Box>\n      )}\n    </ListItemButton>\n  );\n}\n\n/** The \"see all results — Press ENTER\" footer row. */\nexport function SubmitAllFooter(props: {\n  label: string;\n  keyLabel: string;\n  selected: boolean;\n  onSelect: () => void;\n  onHover: () => void;\n}): React.JSX.Element {\n  return (\n    <ListItemButton\n      selected={props.selected}\n      onMouseEnter={props.onHover}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={props.onSelect}\n      data-testid=\"search-palette-submit-all\"\n      sx={{ gap: 1.25, px: 2, py: 1, borderTop: (theme) => `1px solid ${theme.palette.divider}` }}\n    >\n      <SearchIcon fontSize=\"small\" sx={{ color: 'text.secondary', flexShrink: 0 }} />\n      <Typography variant=\"body2\" sx={{ flex: 1, minWidth: 0 }} noWrap>\n        {props.label}\n      </Typography>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'text.secondary' }}>\n        <Typography variant=\"caption\">{props.keyLabel}</Typography>\n        <KeyboardReturnIcon sx={{ fontSize: sxRem(14) }} />\n      </Box>\n    </ListItemButton>\n  );\n}\n\n/** Resolved view state shared by the body renderer. */\nexport interface BodyView<T> {\n  hasQuery: boolean;\n  emptyQueryContent: React.ReactNode;\n  visible: T[];\n  isLoading: boolean;\n  noResultsLabel: string;\n  showFooter: boolean;\n  footerIndex: number;\n  activeIndex: number;\n  trimmed: string;\n  submitAllLabel: (q: string) => string;\n  submitKeyLabel: string;\n  getKey: (item: T) => string;\n  getPrimary: (item: T) => string;\n  getSecondary?: (item: T) => string | undefined;\n  getLead?: (item: T) => SearchResultLead | undefined;\n  getTrailing?: (item: T) => React.ReactNode | undefined;\n  onSelect: (item: T) => void;\n  onSubmitAll?: (query: string) => void;\n  setActiveIndex: (i: number) => void;\n}\n\n/** The results list (or the empty-query slot / no-results message) + footer. */\nexport function PaletteBody<T>(view: BodyView<T>): React.JSX.Element | null {\n  if (!view.hasQuery) {\n    return view.emptyQueryContent ? (\n      <Box data-testid=\"search-palette-empty-query\">{view.emptyQueryContent}</Box>\n    ) : null;\n  }\n  const empty = view.visible.length === 0;\n  return (\n    <>\n      {!empty && (\n        <List dense disablePadding role=\"listbox\" data-testid=\"search-palette-results\">\n          {view.visible.map((item, index) => (\n            <ResultRow\n              key={view.getKey(item)}\n              index={index}\n              active={index === view.activeIndex}\n              query={view.trimmed}\n              lead={view.getLead?.(item)}\n              primary={view.getPrimary(item)}\n              secondary={view.getSecondary?.(item)}\n              trailing={view.getTrailing?.(item)}\n              onSelect={() => view.onSelect(item)}\n              onHover={() => view.setActiveIndex(index)}\n            />\n          ))}\n        </List>\n      )}\n      {empty && !view.isLoading && (\n        <Box sx={{ px: 2, py: 1.5 }} data-testid=\"search-palette-no-results\">\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {view.noResultsLabel}\n          </Typography>\n        </Box>\n      )}\n      {view.showFooter && (\n        <SubmitAllFooter\n          label={view.submitAllLabel(view.trimmed)}\n          keyLabel={view.submitKeyLabel}\n          selected={view.activeIndex === view.footerIndex}\n          onSelect={() => view.onSubmitAll?.(view.trimmed)}\n          onHover={() => view.setActiveIndex(view.footerIndex)}\n        />\n      )}\n    </>\n  );\n}\n\n/**\n * The palette card: a flex column capped at the height its container allows, so\n * the input and the filter chips stay pinned while only the results scroll and a\n * long result set can never push the palette past the bottom of the viewport.\n */\nexport const PALETTE_CARD_SX = {\n  width: '100%',\n  maxWidth: 640,\n  maxHeight: '100%',\n  borderRadius: 2,\n  overflow: 'hidden',\n  display: 'flex',\n  flexDirection: 'column',\n} as const;\n\n/** The scrolling region of the card — the results, and nothing above them. */\nexport function PaletteScrollArea({ children }: { children: React.ReactNode }): React.JSX.Element {\n  return (\n    <Box sx={{ minHeight: 0, overflowY: 'auto', overscrollBehavior: 'contain' }}>{children}</Box>\n  );\n}\n\nexport { Paper };\n\n/** Context for the keydown handler builder. */\nexport interface KeyCtx<T> {\n  rowCount: number;\n  activeIndex: number;\n  footerIndex: number;\n  visible: T[];\n  hasQuery: boolean;\n  ghost: string;\n  top: T | undefined;\n  trimmed: string;\n  getPrimary: (item: T) => string;\n  onChange: (v: string) => void;\n  onSelect: (item: T) => void;\n  onSubmitAll?: (query: string) => void;\n  onClose?: () => void;\n  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n}\n\n/** Build the input's keydown handler (nav / select / ghost-accept / close). */\nexport function createKeyDownHandler<T>(ctx: KeyCtx<T>): (e: React.KeyboardEvent) => void {\n  const move = (delta: number): void =>\n    ctx.setActiveIndex((i) => Math.min(Math.max(i + delta, 0), Math.max(ctx.rowCount - 1, 0)));\n  const commit = (): void => {\n    if (!ctx.hasQuery) return;\n    if (ctx.activeIndex === ctx.footerIndex) {\n      ctx.onSubmitAll?.(ctx.trimmed);\n      return;\n    }\n    const item = ctx.visible[ctx.activeIndex];\n    if (item) ctx.onSelect(item);\n  };\n  // A lookup keeps the handler itself flat (low complexity). Tab/→ is special —\n  // it must only swallow the event when there is a ghost to accept, otherwise\n  // Tab keeps its native focus behavior.\n  const actions: Record<string, (() => void) | undefined> = {\n    ArrowDown: () => move(1),\n    ArrowUp: () => move(-1),\n    Enter: commit,\n    Escape: () => ctx.onClose?.(),\n  };\n  return (e) => {\n    if ((e.key === 'Tab' || e.key === 'ArrowRight') && ctx.ghost && ctx.top) {\n      e.preventDefault();\n      ctx.onChange(ctx.getPrimary(ctx.top));\n      return;\n    }\n    const action = actions[e.key];\n    if (!action) return;\n    e.preventDefault();\n    action();\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-COYGTEN5.js

@@ -0,0 +1,88 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/list-card-cells.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALIGN_ITEMS = { start: "flex-start", center: "center", end: "flex-end" };
+var TEXT_ALIGN = { start: "left", center: "center", end: "right" };
+var DEFAULT_CELL_WIDTH = "minmax(0, 1fr)";
+function cellTracks(cells) {
+  return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);
+}
+var CellConfigContext = createContext(null);
+function CellConfigProvider({
+  cells,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CellConfigContext.Provider, { value: cells ?? null, children });
+}
+function useCellConfig() {
+  return useContext(CellConfigContext);
+}
+function Cell({
+  config,
+  row
+}) {
+  const align = config.align ?? "start";
+  const numeric = align === "end" ? { fontVariantNumeric: "tabular-nums" } : {};
+  const clamp = {
+    minWidth: 0,
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  const secondary = config.secondary?.(row);
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-slot": `cell-${config.id}`,
+      sx: {
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: ALIGN_ITEMS[align],
+        justifyContent: "center",
+        textAlign: TEXT_ALIGN[align]
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: { ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric },
+            children: config.primary(row)
+          }
+        ),
+        secondary != null && /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: { ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: "text.secondary", ...numeric },
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
+function ListCardCells({
+  cells,
+  row
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: cells.map((config) => /* @__PURE__ */ jsx(Cell, { config, row }, config.id)) });
+}
+
+export {
+  DEFAULT_CELL_WIDTH,
+  cellTracks,
+  CellConfigProvider,
+  useCellConfig,
+  ListCardCells
+};
+//# sourceMappingURL=chunk-COYGTEN5.js.map

package/dist/chunk-COYGTEN5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/list-card-cells.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * THE CELL CONFIG — the list declares its columns once, every row obeys them.\n *\n * The row used to name its middle slots: a title, a subtitle beneath it, then\n * labelled `meta` pairs, then a value, then a status. That vocabulary was the\n * mistake twice over. It reads as a description of every list, and no list is\n * quite that shape — so a consumer wanting a date over a time, or an order\n * number over the client who placed it, had to pick whichever named slot was\n * least wrong and take its styling with it. And because each row decided its own\n * content, alignment across a list was a convention the rows could break.\n *\n * So cells are CONFIGURED, the way a data grid's columns are: the list declares\n * them once, and every card renders the same columns in the same tracks from its\n * own row. Two cards cannot disagree about the shape of the list, because\n * neither of them is deciding it.\n *\n * THE SECOND LINE IS AN OPTION, NOT A SUBTITLE. `secondary` is not \"the small\n * grey text under the title\" — it is the cell's second line, for whatever pairs\n * naturally in this list: date over time, name over e-mail, pedido over cliente.\n * It carries no meaning the config did not put there, and a cell that wants one\n * line simply omits it.\n */\nexport interface ListCardCellConfig<T extends Record<string, unknown> = Record<string, unknown>> {\n  /** Stable key. Also the cell's `data-slot`, so a test can find it by name. */\n  id: string;\n  /** The cell's first line, from the row. */\n  primary: (row: T) => ReactNode;\n  /** An optional second line beneath it. Anything that pairs with the first. */\n  secondary?: (row: T) => ReactNode;\n  /**\n   * Which edge the lines sit on. `end` is what a column of numbers wants, so its\n   * digits line up with the values above and below it — and it switches the cell\n   * to tabular figures, since nothing else ever asks for that alignment.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * This cell's track, as a `grid-template-columns` entry. Defaults to an even\n   * share of the spare width.\n   *\n   * A cell holding a number usually wants `max-content`: the rail is then as\n   * wide as the widest amount in the list and no wider, and its right edge does\n   * not move when a longer row arrives.\n   */\n  width?: string;\n  /** Emphasise the first line — for the one figure the row is really about. */\n  strong?: boolean;\n}\n\nconst ALIGN_ITEMS = { start: \"flex-start\", center: \"center\", end: \"flex-end\" } as const;\nconst TEXT_ALIGN = { start: \"left\", center: \"center\", end: \"right\" } as const;\n\n/** The default track: an even share of whatever width the row has spare. */\nexport const DEFAULT_CELL_WIDTH = \"minmax(0, 1fr)\";\n\n/** The tracks a cell config asks for, in order. */\nexport function cellTracks(cells: readonly ListCardCellConfig<never>[] | undefined): string[] {\n  return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);\n}\n\n/**\n * The config handed down by the list.\n *\n * A card inside a group takes its columns from here rather than from props, so\n * there is exactly one declaration of the list's shape and no way for a row to\n * hold a different one.\n */\nconst CellConfigContext = createContext<readonly ListCardCellConfig<never>[] | null>(null);\n\nexport function CellConfigProvider({\n  cells,\n  children,\n}: {\n  cells: readonly ListCardCellConfig<never>[] | undefined;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <CellConfigContext.Provider value={cells ?? null}>{children}</CellConfigContext.Provider>;\n}\n\n/** The list's cell config, if it declared one. */\nexport function useCellConfig(): readonly ListCardCellConfig<never>[] | null {\n  return useContext(CellConfigContext);\n}\n\n/**\n * One cell rendered from its config.\n *\n * Both lines truncate rather than wrap: a row is a fixed-height scanning unit,\n * and a cell that grows to two lines because one name was long drags every rail\n * on that row down with it. Whatever does not fit belongs in the expandable\n * body, which is the entire reason the body exists.\n */\nfunction Cell<T extends Record<string, unknown>>({\n  config,\n  row,\n}: {\n  config: ListCardCellConfig<T>;\n  row: T;\n}): React.JSX.Element {\n  const align = config.align ?? \"start\";\n  const numeric = align === \"end\" ? { fontVariantNumeric: \"tabular-nums\" } : {};\n  const clamp = {\n    minWidth: 0,\n    maxWidth: \"100%\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  } as const;\n  const secondary = config.secondary?.(row);\n  return (\n    <Box\n      data-slot={`cell-${config.id}`}\n      sx={{\n        minWidth: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: ALIGN_ITEMS[align],\n        justifyContent: \"center\",\n        textAlign: TEXT_ALIGN[align],\n      }}\n    >\n      <Box\n        component=\"span\"\n        sx={{ ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}\n      >\n        {config.primary(row)}\n      </Box>\n      {secondary != null && (\n        <Box\n          component=\"span\"\n          sx={{ ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: \"text.secondary\", ...numeric }}\n        >\n          {secondary}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** Every configured cell of a row, in the list's declared order. */\nexport function ListCardCells<T extends Record<string, unknown>>({\n  cells,\n  row,\n}: {\n  cells: readonly ListCardCellConfig<T>[];\n  row: T;\n}): React.JSX.Element {\n  return (\n    <>\n      {cells.map((config) => (\n        <Cell key={config.id} config={config} row={row} />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAe,kBAAkC;AAgFjD,SAwEL,UAxEK,KAkCL,YAlCK;AA3BT,IAAM,cAAc,EAAE,OAAO,cAAc,QAAQ,UAAU,KAAK,WAAW;AAC7E,IAAM,aAAa,EAAE,OAAO,QAAQ,QAAQ,UAAU,KAAK,QAAQ;AAG5D,IAAM,qBAAqB;AAG3B,SAAS,WAAW,OAAmE;AAC5F,UAAQ,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,kBAAkB;AACrE;AASA,IAAM,oBAAoB,cAA2D,IAAI;AAElF,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGsB;AACpB,SAAO,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,SAAS,MAAO,UAAS;AACrE;AAGO,SAAS,gBAA6D;AAC3E,SAAO,WAAW,iBAAiB;AACrC;AAUA,SAAS,KAAwC;AAAA,EAC/C;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,QAAQ,OAAO,SAAS;AAC9B,QAAM,UAAU,UAAU,QAAQ,EAAE,oBAAoB,eAAe,IAAI,CAAC;AAC5E,QAAM,QAAQ;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,QAAM,YAAY,OAAO,YAAY,GAAG;AACxC,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,aAAW,QAAQ,OAAO,EAAE;AAAA,MAC5B,IAAI;AAAA,QACF,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY,YAAY,KAAK;AAAA,QAC7B,gBAAgB;AAAA,QAChB,WAAW,WAAW,KAAK;AAAA,MAC7B;AAAA,MAEA;AAAA;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,GAAG,OAAO,UAAU,MAAM,EAAE,GAAG,YAAY,OAAO,SAAS,MAAM,KAAK,YAAY,MAAM,GAAG,QAAQ;AAAA,YAExG,iBAAO,QAAQ,GAAG;AAAA;AAAA,QACrB;AAAA,QACC,aAAa,QACZ;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,GAAG,OAAO,UAAU,MAAM,IAAI,GAAG,YAAY,KAAK,OAAO,kBAAkB,GAAG,QAAQ;AAAA,YAE3F;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGO,SAAS,cAAiD;AAAA,EAC/D;AAAA,EACA;AACF,GAGsB;AACpB,SACE,gCACG,gBAAM,IAAI,CAAC,WACV,oBAAC,QAAqB,QAAgB,OAA3B,OAAO,EAA8B,CACjD,GACH;AAEJ;","names":["default"]}

package/dist/chunk-CPTY6UZ6.js

@@ -0,0 +1,124 @@
+import {
+  TOUCH_TARGET,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/SettingsLayout/SettingsSectionHeader.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLIP = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function HeaderText({
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "h2",
+        sx: { m: 0, font: "inherit", fontSize: sxRem(16), fontWeight: 600, lineHeight: 1.3, ...CLIP },
+        children: title
+      }
+    ),
+    description !== void 0 && description !== "" && /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "p",
+        sx: {
+          m: 0,
+          font: "inherit",
+          fontSize: sxRem(13),
+          color: "text.secondary",
+          lineHeight: 1.35,
+          ...CLIP
+        },
+        children: description
+      }
+    )
+  ] });
+}
+function SettingsSectionHeader({
+  href,
+  backLabel,
+  title,
+  description,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-section-header`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
+        alignItems: "center",
+        gap: 1.5,
+        minWidth: 0,
+        // ITS OWN SURFACE, not the panel's.
+        //
+        // The header, the chip strip and the first card were all the same
+        // white, so nothing said where "you are here" ended and the screen
+        // began — the eye had only the type sizes to go on. A tint plus the
+        // rule below turns three stacked runs of text into two blocks.
+        //
+        // `paper` against a `default` panel rather than a hand-picked grey, so
+        // it tracks the host's theme (and its dark mode) instead of being a
+        // light-mode constant that goes wrong the moment the palette does.
+        bgcolor: "background.paper",
+        px: 1.5,
+        pt: 1.5,
+        pb: 1.5,
+        mb: 1,
+        borderRadius: 1,
+        // A rule under the header, because what follows it is the sibling strip
+        // — a row of other sections. Without a line the section's own name and
+        // the chip naming a DIFFERENT section sit in one undifferentiated
+        // block, which reads as one navigation rather than as "you are here"
+        // above "go elsewhere".
+        borderBottom: 1,
+        borderColor: "divider"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: linkComponent,
+            href,
+            "aria-label": backLabel,
+            "data-testid": `${testIdPrefix}-back`,
+            sx: (theme) => ({
+              flex: "0 0 auto",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: TOUCH_TARGET,
+              height: TOUCH_TARGET,
+              border: 1,
+              borderColor: "divider",
+              borderRadius: 2,
+              color: "text.primary",
+              textDecoration: "none",
+              "&:hover": { backgroundColor: theme.palette.action.hover }
+            }),
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderText, { title, description })
+      ]
+    }
+  );
+}
+
+export {
+  SettingsSectionHeader
+};
+//# sourceMappingURL=chunk-CPTY6UZ6.js.map

package/dist/chunk-CPTY6UZ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/** One line that must not wrap, whatever the section is called. */\nconst CLIP = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The name of where you are, and optionally what it holds.\n *\n * `minWidth: 0` on the wrapper is what lets the clipping work at all: without\n * it a flex item refuses to shrink below its content, so a long section name\n * pushes the back button off the row instead of ellipsising.\n */\nfunction HeaderText({\n  title,\n  description,\n}: {\n  title: string;\n  description?: string;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ minWidth: 0 }}>\n      <Box\n        component=\"h2\"\n        sx={{ m: 0, font: 'inherit', fontSize: sxRem(16), fontWeight: 600, lineHeight: 1.3, ...CLIP }}\n      >\n        {title}\n      </Box>\n      {description !== undefined && description !== '' && (\n        <Box\n          component=\"p\"\n          sx={{\n            m: 0,\n            font: 'inherit',\n            fontSize: sxRem(13),\n            color: 'text.secondary',\n            lineHeight: 1.35,\n            ...CLIP,\n          }}\n        >\n          {description}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width panel header: a back control, and the name of where you are.\n *\n * ## Why this replaced a \"‹ Voltar\" link\n *\n * The bare link spent a whole row saying only that a back existed. Under it came\n * the sibling chips and under those the section's own Salvar, so three stacked\n * rows went by before the first field — on the width with the least room for\n * them. Worse, none of the three said WHICH section was open: the chips mark the\n * active one, but a chip strip scrolls, so the answer could be off-screen.\n *\n * Folding the control into a square button beside the title buys back a row and\n * makes the header say where you are, which is what a header is for.\n *\n * ## Narrow only, and mounted at every width\n *\n * `displayAcrossRail` hides this above the breakpoint rather than unmounting it,\n * for the reason the whole component works that way: navigation that exists at\n * one width and not the other is navigation nothing can assert about. Above the\n * breakpoint the rail is on screen with the open row marked, so a back control\n * would point at a list already visible.\n *\n * The button is `TOUCH_TARGET` square because this is the phone shape, and it\n * keeps the accessible name — the visible text is the section, not the verb, so\n * a screen reader still hears \"Voltar\" rather than being handed an icon.\n */\nexport function SettingsSectionHeader({\n  href,\n  backLabel,\n  title,\n  description,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  title: string;\n  description?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-section-header`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        gap: 1.5,\n        minWidth: 0,\n        // ITS OWN SURFACE, not the panel's.\n        //\n        // The header, the chip strip and the first card were all the same\n        // white, so nothing said where \"you are here\" ended and the screen\n        // began — the eye had only the type sizes to go on. A tint plus the\n        // rule below turns three stacked runs of text into two blocks.\n        //\n        // `paper` against a `default` panel rather than a hand-picked grey, so\n        // it tracks the host's theme (and its dark mode) instead of being a\n        // light-mode constant that goes wrong the moment the palette does.\n        bgcolor: 'background.paper',\n        px: 1.5,\n        pt: 1.5,\n        pb: 1.5,\n        mb: 1,\n        borderRadius: 1,\n        // A rule under the header, because what follows it is the sibling strip\n        // — a row of other sections. Without a line the section's own name and\n        // the chip naming a DIFFERENT section sit in one undifferentiated\n        // block, which reads as one navigation rather than as \"you are here\"\n        // above \"go elsewhere\".\n        borderBottom: 1,\n        borderColor: 'divider',\n      })}\n    >\n      <Box\n        component={linkComponent}\n        href={href}\n        aria-label={backLabel}\n        data-testid={`${testIdPrefix}-back`}\n        sx={(theme) => ({\n          flex: '0 0 auto',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: TOUCH_TARGET,\n          height: TOUCH_TARGET,\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: 2,\n          color: 'text.primary',\n          textDecoration: 'none',\n          '&:hover': { backgroundColor: theme.palette.action.hover },\n        })}\n      >\n        <ChevronLeftIcon fontSize=\"small\" />\n      </Box>\n\n      <HeaderText title={title} description={description} />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,OAAO,qBAAqB;AAC5B,OAAO,SAAS;AA6BZ,SACE,KADF;AArBJ,IAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AASA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGsB;AACpB,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,GAAG,GAAG,MAAM,WAAW,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,YAAY,KAAK,GAAG,KAAK;AAAA,QAE3F;AAAA;AAAA,IACH;AAAA,IACC,gBAAgB,UAAa,gBAAgB,MAC5C;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI;AAAA,UACF,GAAG;AAAA,UACH,MAAM;AAAA,UACN,UAAU,MAAM,EAAE;AAAA,UAClB,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AA4BO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,kBAAkB,OAAO,YAAY,QAAQ,MAAM;AAAA,QACtD,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWV,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA,cAAY;AAAA,YACZ,eAAa,GAAG,YAAY;AAAA,YAC5B,IAAI,CAAC,WAAW;AAAA,cACd,MAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,cAAc;AAAA,cACd,OAAO;AAAA,cACP,gBAAgB;AAAA,cAChB,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,YAC3D;AAAA,YAEA,8BAAC,mBAAgB,UAAS,SAAQ;AAAA;AAAA,QACpC;AAAA,QAEA,oBAAC,cAAW,OAAc,aAA0B;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/chunk-CPWWMGYR.js

@@ -0,0 +1,49 @@
+import {
+  Chart
+} from "./chunk-Q2YNXJEL.js";
+import {
+  CHART_SEMANTIC_COLORS,
+  specToChartProps
+} from "./chunk-R6SBP5M5.js";
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+
+// src/components/data-display/Chart/SpecChart.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var SpecChart = ({
+  spec,
+  data,
+  size,
+  fillHeight,
+  loading,
+  className,
+  onClick,
+  "data-testid": dataTestId = "spec-chart"
+}) => {
+  const theme = useTheme();
+  const chartProps = React.useMemo(() => {
+    const scheme = spec.colorScheme && spec.colorScheme.length > 0 ? spec.colorScheme : CHART_SEMANTIC_COLORS;
+    const resolveColor = (token, index) => accentFor(theme, token ?? scheme[index % scheme.length] ?? "primary").main;
+    return specToChartProps(spec, data, { resolveColor });
+  }, [spec, data, theme]);
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      ...chartProps,
+      size,
+      fillHeight,
+      loading,
+      className,
+      onClick,
+      "data-testid": dataTestId
+    }
+  );
+};
+
+export {
+  SpecChart
+};
+//# sourceMappingURL=chunk-CPWWMGYR.js.map

package/dist/chunk-CRZXSZ5O.js

@@ -0,0 +1,34 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Pagination
+} from "./chunk-YVUD3MY4.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-pagination.tsx
+import { jsx } from "react/jsx-runtime";
+function DataViewsPagination({
+  c,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (!c.serverMode || c.serverPageCount <= 1) return null;
+  return /* @__PURE__ */ jsx(default2, { sx: { mt: 2, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      pageSizeLabel: copy.nav.pageSize,
+      page: c.serverPage,
+      count: c.serverPageCount,
+      onChange: (_event, page) => c.changePage(page),
+      dataTestId: `${testIdPrefix}-pagination`
+    }
+  ) });
+}
+
+export {
+  DataViewsPagination
+};
+//# sourceMappingURL=chunk-CRZXSZ5O.js.map