@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-XZW2U6KR.js

@@ -0,0 +1,143 @@
+import {
+  ACTIVE,
+  HOVER
+} from "./chunk-P2UIXDEG.js";
+import {
+  modeInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Banner/Banner.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var fadeInSlide = (theme) => keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(${rem(theme, -10)});
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0.7;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, 8)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var getVariantColor = (theme, variant) => {
+  const colorMap = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    critical: theme.palette.error
+  };
+  return colorMap[variant];
+};
+var bannerPartStyles = (theme, colorPalette) => ({
+  // Icon container
+  ".banner-icon": {
+    flexShrink: 0,
+    marginTop: theme.spacing(0.25),
+    color: colorPalette.main,
+    fontSize: rem(theme, 20),
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      inset: rem(theme, -4),
+      borderRadius: "50%",
+      background: alpha(colorPalette.main, 0.1),
+      animation: `${pulseAnimation(theme)} 3s infinite`
+    }
+  },
+  // Content area
+  ".banner-content": {
+    flex: 1,
+    minWidth: 0
+    // Prevents flex item overflow
+  },
+  // Title styles
+  ".banner-title": {
+    fontWeight: 600,
+    fontSize: rem(theme, 16),
+    lineHeight: 1.4,
+    marginBottom: theme.spacing(0.5),
+    color: colorPalette.dark || colorPalette.main
+  },
+  // Description styles  
+  ".banner-description": {
+    fontSize: rem(theme, 14),
+    lineHeight: 1.5,
+    opacity: 0.9,
+    color: "inherit"
+  },
+  // Actions area
+  ".banner-actions": {
+    display: "flex",
+    flexShrink: 0,
+    gap: theme.spacing(1),
+    alignItems: "center",
+    marginTop: theme.spacing(1),
+    [theme.breakpoints.up("sm")]: {
+      marginTop: 0,
+      marginLeft: theme.spacing(2)
+    }
+  },
+  // Dismiss button
+  ".banner-dismiss": {
+    color: "inherit",
+    opacity: 0.7,
+    marginLeft: theme.spacing(1),
+    flexShrink: 0,
+    // Opacity and a wash only: the dismiss used to spin 90deg, which drew the
+    // eye to the way out rather than to the message. Same fix as `Alert`'s
+    // close button, which is the sibling surface (FUT-1458).
+    "&:hover": {
+      opacity: 1,
+      backgroundColor: alpha(colorPalette.main, 0.1)
+    },
+    "&:focus-visible": {
+      opacity: 1,
+      outline: `${rem(theme, 2)} solid ${colorPalette.main}`,
+      outlineOffset: rem(theme, 2)
+    }
+  }
+});
+var tint = (theme, a) => `inset 0 0 0 100vmax ${alpha(modeInk(theme), a)}`;
+var bannerPointerStates = (theme) => ({
+  "&:hover": {
+    boxShadow: tint(theme, HOVER.tintAlpha)
+  },
+  // The `:not(:has(…))` names CONTROLS, not any descendant: `:active` matches
+  // an ancestor of whatever is pressed, so without it pressing the dismiss or
+  // an action dimmed the message that owns it. Excluding `:has(:active)`
+  // wholesale does not work — pressing the TEXT makes that text `:active` too,
+  // so the guard matched on every press and the state never fired.
+  '&:active:not(:has(button:active, a:active, [role="button"]:active))': {
+    boxShadow: tint(theme, ACTIVE.tintAlpha),
+    transition: "none"
+  }
+});
+var BANNER_TINT_S = ACTIVE.ms / 1e3;
+
+export {
+  fadeInSlide,
+  getVariantColor,
+  bannerPartStyles,
+  bannerPointerStates,
+  BANNER_TINT_S
+};
+//# sourceMappingURL=chunk-XZW2U6KR.js.map

package/dist/chunk-XZW2U6KR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Banner/Banner.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';\n\nimport type { BannerVariant } from './Banner.types';\nimport { ACTIVE, HOVER } from '../Alert/Alert.metrics';\nimport { modeInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// Animations\nexport const fadeInSlide = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(${rem(theme, -10)});\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0.7;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 8)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const getVariantColor = (theme: Theme, variant: BannerVariant) => {\n  const colorMap = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    critical: theme.palette.error,\n  };\n  return colorMap[variant];\n};\n\nexport const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSObject => ({\n  // Icon container\n  '.banner-icon': {\n    flexShrink: 0,\n    marginTop: theme.spacing(0.25),\n    color: colorPalette.main,\n    fontSize: rem(theme, 20),\n    display: 'flex',\n    alignItems: 'center',\n    position: 'relative',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: rem(theme, -4),\n      borderRadius: '50%',\n      background: alpha(colorPalette.main, 0.1),\n      animation: `${pulseAnimation(theme)} 3s infinite`,\n    },\n  },\n\n  // Content area\n  '.banner-content': {\n    flex: 1,\n    minWidth: 0, // Prevents flex item overflow\n  },\n\n  // Title styles\n  '.banner-title': {\n    fontWeight: 600,\n    fontSize: rem(theme, 16),\n    lineHeight: 1.4,\n    marginBottom: theme.spacing(0.5),\n    color: colorPalette.dark || colorPalette.main,\n  },\n\n  // Description styles  \n  '.banner-description': {\n    fontSize: rem(theme, 14),\n    lineHeight: 1.5,\n    opacity: 0.9,\n    color: 'inherit',\n  },\n\n  // Actions area\n  '.banner-actions': {\n    display: 'flex',\n    flexShrink: 0,\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginTop: theme.spacing(1),\n\n    [theme.breakpoints.up('sm')]: {\n      marginTop: 0,\n      marginLeft: theme.spacing(2),\n    },\n  },\n\n  // Dismiss button\n  '.banner-dismiss': {\n    color: 'inherit',\n    opacity: 0.7,\n    marginLeft: theme.spacing(1),\n    flexShrink: 0,\n\n    // Opacity and a wash only: the dismiss used to spin 90deg, which drew the\n    // eye to the way out rather than to the message. Same fix as `Alert`'s\n    // close button, which is the sibling surface (FUT-1458).\n    '&:hover': {\n      opacity: 1,\n      backgroundColor: alpha(colorPalette.main, 0.1),\n    },\n\n    '&:focus-visible': {\n      opacity: 1,\n      outline: `${rem(theme, 2)} solid ${colorPalette.main}`,\n      outlineOffset: rem(theme, 2),\n    },\n  },\n});\n\n/**\n * The pointer states, from `Alert`'s own table.\n *\n * Banner had NO hover at all — measured ΔE76 0.00 on every variant in both\n * modes — so moving between the two surfaces gave feedback on one and silence\n * on the other. They are the same kind of thing and now answer a pointer the\n * same way.\n *\n * Neither block may declare `transition`: `:active` under a mouse always\n * implies `:hover`, so a shorthand here would outrank the root's and reset the\n * opacity fade the press is built on.\n */\n/** The same flat inset tint `Alert` paints; see `ACTIVE` for why it is a layer. */\nconst tint = (theme: Theme, a: number): string =>\n  `inset 0 0 0 100vmax ${alpha(modeInk(theme), a)}`;\n\nexport const bannerPointerStates = (theme: Theme): CSSObject => ({\n  '&:hover': {\n    boxShadow: tint(theme, HOVER.tintAlpha),\n  },\n\n  // The `:not(:has(…))` names CONTROLS, not any descendant: `:active` matches\n  // an ancestor of whatever is pressed, so without it pressing the dismiss or\n  // an action dimmed the message that owns it. Excluding `:has(:active)`\n  // wholesale does not work — pressing the TEXT makes that text `:active` too,\n  // so the guard matched on every press and the state never fired.\n  '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n    boxShadow: tint(theme, ACTIVE.tintAlpha),\n    transition: 'none',\n  },\n});\n\n/** The seconds the tint takes easing back, shared with `Alert`. */\nexport const BANNER_TINT_S = ACTIVE.ms / 1000;\n"],"mappings":"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","names":[]}

package/dist/chunk-YAFBUYVW.js

@@ -0,0 +1,267 @@
+import {
+  rem,
+  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 { useTheme } from "@mui/material/styles/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: sxRem(32), height: sxRem(32), borderRadius: 1, objectFit: "cover", flexShrink: 0 }
+      }
+    );
+  }
+  if (lead.kind === "avatar") {
+    return /* @__PURE__ */ jsx(Avatar, { src: lead.src, alt: lead.alt ?? "", sx: { width: sxRem(32), height: sxRem(32), fontSize: sxRem(13.6) }, children: lead.fallback });
+  }
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: sxRem(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) {
+  const theme = useTheme();
+  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: rem(theme, 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: sxRem(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-YAFBUYVW.js.map

package/dist/chunk-YAFBUYVW.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 { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { SearchFilterChip, SearchResultLead } from './SearchPalette.types';\nimport { rem, 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: sxRem(32), height: sxRem(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: sxRem(32), height: sxRem(32), fontSize: sxRem(13.6) }}>\n        {lead.fallback}\n      </Avatar>\n    );\n  }\n  return (\n    <Box sx={{ display: 'flex', width: sxRem(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  const theme = useTheme();\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={rem(theme, 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: sxRem(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-YLGY3D52.js

@@ -0,0 +1,62 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-glyphs.tsx
+import { jsx } from "react/jsx-runtime";
+var FRAME = { width: sxRem(32), height: sxRem(24), display: "flex" };
+function barColor(active) {
+  return active ? "primary.main" : "action.disabled";
+}
+function RowsGlyph({ gap, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(default2, { sx: { height: sxRem(2), width: "100%", borderRadius: 1, bgcolor: barColor(active) } }, index)) });
+}
+function TableGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: sxRem(2) }, children: Array.from({ length: 9 }).map((_, index) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }
+    },
+    index
+  )) });
+}
+function ListGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap: sxRem(4) }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        height: sxRem(5),
+        width: "100%",
+        borderRadius: 0.5,
+        bgcolor: barColor(active),
+        opacity: 0.7,
+        display: "flex",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsx(default2, { sx: { ml: sxRem(2), height: sxRem(3), width: sxRem(3), borderRadius: "50%", bgcolor: "background.paper" } })
+    },
+    index
+  )) });
+}
+function GridGlyph({ n = 3, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: sxRem(2) }, children: Array.from({ length: n * 2 }).map((_, index) => /* @__PURE__ */ jsx(default2, { sx: { borderRadius: 0.5, bgcolor: barColor(active) } }, index)) });
+}
+function ColumnsGlyph({ n, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, gap: sxRem(2) }, children: Array.from({ length: n }).map((_, column) => /* @__PURE__ */ jsx(default2, { sx: { flex: 1, borderRadius: 0.5, bgcolor: barColor(active) } }, column)) });
+}
+function BoardGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, gap: sxRem(2) }, children: [3, 2, 1].map((count, column) => /* @__PURE__ */ jsx(default2, { sx: { flex: 1, display: "flex", flexDirection: "column", gap: sxRem(2) }, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(default2, { sx: { height: sxRem(5), borderRadius: 0.5, bgcolor: barColor(active) } }, index)) }, column)) });
+}
+
+export {
+  RowsGlyph,
+  TableGlyph,
+  ListGlyph,
+  GridGlyph,
+  ColumnsGlyph,
+  BoardGlyph
+};
+//# sourceMappingURL=chunk-YLGY3D52.js.map

package/dist/chunk-YLGY3D52.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-glyphs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * Miniature previews of what a layout or a density setting DOES.\n *\n * \"Baixa / Média / Alta\" tells an operator nothing until they try it, and\n * \"Grade\" vs \"Lista\" is only obvious to whoever named them. A glyph that draws\n * three tight rows, or three loose ones, or a grid of blocks, answers the\n * question before the click — so the picker is read once instead of cycled\n * through.\n *\n * Deliberately CSS boxes rather than icons: the point is to show spacing and\n * proportion, which is exactly what an icon font flattens away.\n */\n\n/** The glyph's own footprint, so every tile in a picker lines up. */\nconst FRAME = { width: sxRem(32), height: sxRem(24), display: \"flex\" } as const;\n\n/** Active tiles use the accent; the rest stay muted so the choice reads at a glance. */\nfunction barColor(active: boolean): string {\n  return active ? \"primary.main\" : \"action.disabled\";\n}\n\n/** Three rows at a given gap (through the type scale) — the density preview for the table and list. */\nexport function RowsGlyph({ gap, active }: { gap: (theme: Theme) => string; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap }}>\n      {[0, 1, 2].map((index) => (\n        <Box key={index} sx={{ height: sxRem(2), width: \"100%\", borderRadius: 1, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** A dense block grid — the table layout. */\nexport function TableGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: sxRem(2) }}>\n      {Array.from({ length: 9 }).map((_, index) => (\n        <Box\n          key={index}\n          sx={{ borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }}\n        />\n      ))}\n    </Box>\n  );\n}\n\n/** Full-width rows each carrying a leading mark — the list layout. */\nexport function ListGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap: sxRem(4) }}>\n      {[0, 1, 2].map((index) => (\n        <Box\n          key={index}\n          sx={{\n            height: sxRem(5),\n            width: \"100%\",\n            borderRadius: 0.5,\n            bgcolor: barColor(active),\n            opacity: 0.7,\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <Box sx={{ ml: sxRem(2), height: sxRem(3), width: sxRem(3), borderRadius: \"50%\", bgcolor: \"background.paper\" }} />\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/**\n * A grid of blocks — the cards layout, and ALSO the cards density preview: `n`\n * is how many fit per row, so \"Muitos / Médio / Poucos\" is shown rather than\n * described.\n */\nexport function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: sxRem(2) }}>\n      {Array.from({ length: n * 2 }).map((_, index) => (\n        <Box key={index} sx={{ borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/**\n * Full-height columns, `n` of them — the board's DENSITY, where fewer, wider\n * columns is the comfortable end. Distinct from {@link BoardGlyph}, which\n * stands for the board format itself and shows cards stacked at differing\n * depths; this one is about the columns' width, so the bars are solid.\n */\nexport function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: sxRem(2) }}>\n      {Array.from({ length: n }).map((_, column) => (\n        <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** Three columns of decreasing height — the board. */\nexport function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: sxRem(2) }}>\n      {[3, 2, 1].map((count, column) => (\n        <Box key={column} sx={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: sxRem(2) }}>\n          {Array.from({ length: count }).map((_, index) => (\n            <Box key={index} sx={{ height: sxRem(5), borderRadius: 0.5, bgcolor: barColor(active) }} />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}