@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-PJ7NKK33.js

@@ -1,124 +0,0 @@
-import {
-  SaveViewModal
-} from "./chunk-6AN23E37.js";
-import {
-  ManageViewsDialog
-} from "./chunk-EE44OC4M.js";
-import {
-  useDataViewsCopy
-} from "./chunk-KHG57NAE.js";
-import {
-  SavedViewsMenu
-} from "./chunk-IBWVEARQ.js";
-import {
-  Alert
-} from "./chunk-RGKGBYT2.js";
-
-// src/components/data-display/DataViews/data-views-table-parts.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function ViewMutationErrorAlert({
-  error,
-  onClose,
-  testIdPrefix
-}) {
-  const copy = useDataViewsCopy();
-  if (!error) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Alert,
-    {
-      variant: "danger",
-      title: copy.nav.updateFailed,
-      description: error,
-      closable: true,
-      closeLabel: copy.nav.dismissError,
-      onClose,
-      "data-testid": `${testIdPrefix}-views-mutation-error`
-    }
-  );
-}
-function ViewsMenuSlot({
-  views,
-  activeViewName,
-  applyView,
-  selectMain,
-  openCreate,
-  openEdit,
-  handleDelete,
-  patchView,
-  onManageAll,
-  testIdPrefix
-}) {
-  const copy = useDataViewsCopy();
-  return /* @__PURE__ */ jsx(
-    SavedViewsMenu,
-    {
-      labels: copy.savedViewsMenu,
-      views,
-      activeViewName,
-      onApply: applyView,
-      onSelectMain: selectMain,
-      onSaveCurrent: openCreate,
-      onEdit: openEdit,
-      onDelete: (view) => void handleDelete(view),
-      onSetDefault: (view) => void patchView(view, { isDefault: true }),
-      onTogglePin: (view) => void patchView(view, { pinned: !view.pinned }),
-      onToggleShare: (view) => void patchView(view, { shared: !view.shared }),
-      onManageAll,
-      testIdPrefix: `${testIdPrefix}-views`
-    }
-  );
-}
-function ViewDialogs({
-  saveOpen,
-  onCloseSave,
-  currentState,
-  fields,
-  columns,
-  editing,
-  onSave,
-  manageOpen,
-  onCloseManage,
-  views,
-  onEditFromManage,
-  onDelete,
-  testIdPrefix
-}) {
-  const copy = useDataViewsCopy();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      SaveViewModal,
-      {
-        open: saveOpen,
-        onClose: onCloseSave,
-        currentState,
-        fields,
-        columns,
-        editing,
-        onSave,
-        testIdPrefix: `${testIdPrefix}-views`
-      },
-      editing ? `edit-${editing.id}` : "create"
-    ),
-    /* @__PURE__ */ jsx(
-      ManageViewsDialog,
-      {
-        confirmCopy: copy.confirmAction,
-        open: manageOpen,
-        onClose: onCloseManage,
-        views,
-        onEdit: onEditFromManage,
-        onDelete,
-        testIdPrefix: `${testIdPrefix}-views`
-      }
-    )
-  ] });
-}
-
-export {
-  ViewMutationErrorAlert,
-  ViewsMenuSlot,
-  ViewDialogs
-};
-//# sourceMappingURL=chunk-PJ7NKK33.js.map

package/dist/chunk-PLEZDLVU.js

@@ -1,30 +0,0 @@
-import {
-  GridShell
-} from "./chunk-JRHZZTVV.js";
-import {
-  useDataViewsState
-} from "./chunk-TBRAZK3Y.js";
-
-// src/components/data-display/DataViews/DataViewsGrid.tsx
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-function useVisibleRowsNotifier(matched, onVisibleRowsChange) {
-  const visibleSignature = JSON.stringify(matched);
-  const lastSignature = useRef(null);
-  useEffect(() => {
-    if (lastSignature.current === visibleSignature) return;
-    lastSignature.current = visibleSignature;
-    onVisibleRowsChange?.(matched);
-  }, [visibleSignature, matched, onVisibleRowsChange]);
-}
-function DataViewsGrid(props) {
-  const { rangeFields = [], testIdPrefix = "table" } = props;
-  const controller = useDataViewsState({ ...props, rangeFields, testIdPrefix });
-  useVisibleRowsNotifier(controller.matched, props.onVisibleRowsChange);
-  return /* @__PURE__ */ jsx(GridShell, { ...props, c: controller, rangeFields, testIdPrefix });
-}
-
-export {
-  DataViewsGrid
-};
-//# sourceMappingURL=chunk-PLEZDLVU.js.map

package/dist/chunk-PPTF5X7K.js

@@ -1,305 +0,0 @@
-import {
-  resolveCommandProps,
-  useCommandPalette
-} from "./chunk-6DN4ZULV.js";
-import {
-  commandPaperStyles,
-  commandSizeStyles
-} from "./chunk-R2G4MVPY.js";
-import {
-  CommandEmpty,
-  CommandLoading
-} from "./chunk-CMK4DJDR.js";
-
-// src/components/form/Command/Command.tsx
-import CloseIcon from "@mui/icons-material/Close";
-import SearchIcon from "@mui/icons-material/Search";
-import Box from "@mui/material/Box/index.js";
-import Chip from "@mui/material/Chip/index.js";
-import Dialog from "@mui/material/Dialog/index.js";
-import DialogContent from "@mui/material/DialogContent/index.js";
-import Divider from "@mui/material/Divider/index.js";
-import Fade from "@mui/material/Fade/index.js";
-import Grow from "@mui/material/Grow/index.js";
-import IconButton from "@mui/material/IconButton/index.js";
-import InputAdornment from "@mui/material/InputAdornment/index.js";
-import List from "@mui/material/List/index.js";
-import ListItemButton from "@mui/material/ListItemButton/index.js";
-import ListItemIcon from "@mui/material/ListItemIcon/index.js";
-import ListItemText from "@mui/material/ListItemText/index.js";
-import TextField from "@mui/material/TextField/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, useTheme } from "@mui/material/styles/index.js";
-import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
-var Command = (rawProps) => {
-  const props = resolveCommandProps(rawProps);
-  const { open, onOpenChange, variant, dataTestId } = props;
-  const theme = useTheme();
-  const testId = makeTestId(dataTestId);
-  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } = useCommandPalette(props);
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      onClose: () => onOpenChange?.(false),
-      maxWidth: false,
-      PaperProps: {
-        sx: {
-          ...commandPaperStyles(theme, props),
-          ...commandSizeStyles(props.size),
-          overflow: "hidden",
-          ...props.style
-        },
-        className: props.className,
-        "data-testid": dataTestId
-      },
-      TransitionComponent: variant === "glass" ? Fade : Grow,
-      onClick: props.onClick,
-      children: /* @__PURE__ */ jsxs(Box, { sx: { p: 0 }, children: [
-        /* @__PURE__ */ jsx(
-          CommandInput,
-          {
-            placeholder: props.placeholder,
-            value: internalValue,
-            onChange: handleValueChange,
-            onFocus: props.onFocus,
-            onBlur: props.onBlur,
-            disabled: props.disabled,
-            autoFocus: props.autoFocus,
-            onKeyDown: handleKeyDown,
-            dataTestId: testId("input")
-          }
-        ),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0, maxHeight: props.maxHeight, overflow: "auto" }, children: [
-          /* @__PURE__ */ jsx(
-            CommandBody,
-            {
-              loading: props.loading,
-              items: filteredItems,
-              value: internalValue,
-              emptyMessage: props.emptyMessage,
-              onSelect: handleSelect,
-              selectedId: highlightedId,
-              showCategories: props.showCategories,
-              showShortcuts: props.showShortcuts,
-              showDescriptions: props.showDescriptions,
-              testId
-            }
-          ),
-          props.children
-        ] })
-      ] })
-    }
-  );
-};
-var CommandBody = ({ loading, emptyMessage, testId, ...list }) => {
-  if (loading) {
-    return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: testId("loading") });
-  }
-  if (!list.items?.length) {
-    return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: testId("empty") });
-  }
-  return /* @__PURE__ */ jsx(CommandList, { ...list, dataTestId: testId("list") });
-};
-var CommandInput = ({
-  placeholder,
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  disabled,
-  autoFocus,
-  onKeyDown,
-  className,
-  style,
-  dataTestId
-}) => /* @__PURE__ */ jsx(
-  TextField,
-  {
-    fullWidth: true,
-    value,
-    onChange: (e) => onChange?.(e.target.value),
-    onFocus,
-    onBlur,
-    onKeyDown,
-    placeholder,
-    disabled,
-    autoFocus,
-    variant: "standard",
-    className,
-    inputProps: {
-      "data-testid": dataTestId
-    },
-    sx: {
-      p: 2,
-      "& .MuiInput-underline:before": { border: "none" },
-      "& .MuiInput-underline:after": { border: "none" },
-      ...style
-    },
-    InputProps: {
-      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-      endAdornment: value && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onChange?.(""), children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }) })
-    }
-  }
-);
-var CommandList = ({
-  items = [],
-  onSelect,
-  selectedId,
-  emptyMessage,
-  showCategories,
-  showShortcuts,
-  showDescriptions,
-  loading,
-  className,
-  style,
-  dataTestId
-}) => {
-  const groupedItems = useMemo(() => {
-    if (!showCategories) return { "": items };
-    const groups = {};
-    items.forEach((item) => {
-      const category = item.category || "";
-      if (!groups[category]) groups[category] = [];
-      groups[category].push(item);
-    });
-    return groups;
-  }, [items, showCategories]);
-  if (loading) return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: dataTestId ? `${dataTestId}-loading` : void 0 });
-  if (items.length === 0) return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: dataTestId ? `${dataTestId}-empty` : void 0 });
-  return /* @__PURE__ */ jsx(List, { className, sx: style, "data-testid": dataTestId, children: Object.entries(groupedItems).map(([category, categoryItems]) => /* @__PURE__ */ jsx(
-    CommandGroup,
-    {
-      heading: category,
-      items: categoryItems,
-      onSelect,
-      selectedId,
-      showShortcuts,
-      showDescriptions
-    },
-    category
-  )) });
-};
-var CommandGroup = ({
-  heading,
-  items = [],
-  onSelect,
-  selectedId,
-  showShortcuts,
-  showDescriptions,
-  className,
-  style,
-  dataTestId
-}) => {
-  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : void 0);
-  return /* @__PURE__ */ jsxs(Box, { className, sx: style, "data-testid": groupTestId, children: [
-    heading && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "caption",
-        sx: {
-          px: 2,
-          py: 1,
-          display: "block",
-          color: "text.secondary",
-          fontWeight: 600,
-          textTransform: "uppercase"
-        },
-        children: heading
-      }
-    ),
-    items.map((item) => /* @__PURE__ */ jsx(
-      CommandItemComponent,
-      {
-        ...item,
-        selected: selectedId === item.id,
-        onSelect: () => onSelect?.(item),
-        showShortcut: showShortcuts,
-        showDescription: showDescriptions,
-        dataTestId: `command-item-${item.id}`
-      },
-      item.id
-    ))
-  ] });
-};
-var CommandItemComponent = ({
-  label,
-  description,
-  icon,
-  shortcut,
-  disabled,
-  selected,
-  onSelect,
-  showShortcut,
-  showDescription,
-  className,
-  style,
-  dataTestId
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    ListItemButton,
-    {
-      onClick: onSelect,
-      disabled,
-      selected,
-      className,
-      "data-testid": dataTestId,
-      sx: {
-        py: 1.5,
-        px: 2,
-        "&:hover": {
-          backgroundColor: alpha(theme.palette.primary.main, 0.08)
-        },
-        "&.Mui-selected": {
-          backgroundColor: alpha(theme.palette.primary.main, 0.12),
-          "&:hover": {
-            backgroundColor: alpha(theme.palette.primary.main, 0.16)
-          }
-        },
-        ...style
-      },
-      children: [
-        icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: icon }),
-        /* @__PURE__ */ jsx(
-          ListItemText,
-          {
-            primary: label,
-            secondary: showDescription && description,
-            primaryTypographyProps: {
-              fontSize: "0.875rem",
-              fontWeight: selected ? 600 : 400
-            },
-            secondaryTypographyProps: {
-              fontSize: "0.75rem"
-            }
-          }
-        ),
-        showShortcut && shortcut && /* @__PURE__ */ jsx(
-          Chip,
-          {
-            label: shortcut,
-            size: "small",
-            variant: "outlined",
-            sx: {
-              height: 20,
-              fontSize: "0.7rem",
-              ml: 1
-            }
-          }
-        )
-      ]
-    }
-  );
-};
-
-export {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandGroup
-};
-//# sourceMappingURL=chunk-PPTF5X7K.js.map

package/dist/chunk-PTP3CZL4.js

@@ -1,133 +0,0 @@
-import {
-  contrastText
-} from "./chunk-2BYKTBDL.js";
-import {
-  alpha,
-  darken,
-  lighten
-} from "./chunk-6JAIFIPW.js";
-
-// src/components/data-display/Alert/Alert.metrics.ts
-var ALERT_RADIUS_UNITS = 1.5;
-var ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 };
-var ALERT_TRANSITION_MS = 300;
-var ALERT_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
-var FADE_IN = { ms: 300, scale: 0.95, lift: 10 };
-var ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 };
-var COLLAPSE_MS = 300;
-var CLOSE_DELAY_MS = 200;
-var MESSAGE_GAP_UNITS = 1;
-var MESSAGE_FONT_SIZE = 15.2;
-var MESSAGE_LINE_HEIGHT = 1.5;
-var MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 };
-var TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 };
-var DESCRIPTION = { fontSize: 14.8, opacity: 0.9 };
-var ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 };
-var ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 };
-var CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 };
-var SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 };
-var GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 };
-var GRADIENT = {
-  angleDeg: 135,
-  stopAlpha: 0.9,
-  shimmerAlpha: 0.2,
-  shimmerMs: 3e3,
-  shimmerTravel: 1e3
-};
-var GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 };
-var PULSE = { alpha: 0.2, ms: 2e3, spread: 10 };
-var HOVER = { tintAlpha: 0.06 };
-var ACTIVE = { tintAlpha: 0.2, ms: 250 };
-var FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 };
-var NEUTRAL_GREY = { main: 500, light: 300, dark: 700 };
-var seconds = (ms) => `${ms / 1e3}s`;
-function alertPalette(theme, key) {
-  switch (key) {
-    case "info":
-    case "success":
-    case "warning":
-    case "danger":
-    case "primary":
-    case "secondary":
-      return theme.palette[key];
-    case "neutral":
-      return {
-        main: theme.palette.grey[NEUTRAL_GREY.main],
-        light: theme.palette.grey[NEUTRAL_GREY.light],
-        dark: theme.palette.grey[NEUTRAL_GREY.dark]
-      };
-    default:
-      return theme.palette.info;
-  }
-}
-var SEMANTIC_VARIANTS = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
-function semanticSurface(theme, palette) {
-  const dark = theme.mode === "dark";
-  return {
-    backgroundColor: dark ? darken(palette.main, SEMANTIC_SURFACE.tint.dark) : lighten(palette.main, SEMANTIC_SURFACE.tint.light),
-    color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),
-    borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),
-    iconColor: palette.main
-  };
-}
-function glassSurface(theme) {
-  return {
-    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),
-    color: theme.palette.text.primary,
-    borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),
-    iconColor: theme.palette.primary.main
-  };
-}
-function gradientStops(palette) {
-  return {
-    from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),
-    to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha)
-  };
-}
-function gradientSurface(palette) {
-  const ink = contrastText(palette.main);
-  return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };
-}
-function alertSurface(theme, variant, palette) {
-  if (variant === "glass") return glassSurface(theme);
-  if (variant === "gradient") return gradientSurface(palette);
-  return semanticSurface(theme, palette);
-}
-
-export {
-  ALERT_RADIUS_UNITS,
-  ALERT_PADDING_UNITS,
-  ALERT_TRANSITION_MS,
-  ALERT_EASING,
-  FADE_IN,
-  ICON_SPIN,
-  COLLAPSE_MS,
-  CLOSE_DELAY_MS,
-  MESSAGE_GAP_UNITS,
-  MESSAGE_FONT_SIZE,
-  MESSAGE_LINE_HEIGHT,
-  MESSAGE_BUTTON,
-  TITLE,
-  DESCRIPTION,
-  ICON_SLOT,
-  ACTION_SLOT,
-  CLOSE_BUTTON,
-  SEMANTIC_SURFACE,
-  GLASS,
-  GRADIENT,
-  GLOW,
-  PULSE,
-  HOVER,
-  ACTIVE,
-  FOCUS,
-  NEUTRAL_GREY,
-  seconds,
-  alertPalette,
-  SEMANTIC_VARIANTS,
-  semanticSurface,
-  glassSurface,
-  gradientStops,
-  gradientSurface,
-  alertSurface
-};
-//# sourceMappingURL=chunk-PTP3CZL4.js.map

package/dist/chunk-PTP3CZL4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Alert/Alert.metrics.ts"],"sourcesContent":["import type { AlertVariant } from './Alert.base';\nimport { alpha, darken, lighten } from '../../../tokens/color';\nimport { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Alert` RENDERERS DRAW WITH.\n *\n * `Alert.styles.tsx` / `Alert.tsx` (MUI) and `Alert.native.tsx` (React\n * Native) read this one table. Spacing is in SPACING UNITS where the web\n * writes `theme.spacing(n)`; durations are ms (the web turns them into `s`\n * through {@link seconds} so its emitted CSS is byte-for-byte what it was);\n * everything else is px, a ratio or an alpha. The hover, active and focus\n * numbers are here too although only the DOM can honour them — a number the\n * web draws with belongs in the table whether or not native can reach it.\n */\n\n/** The root: 12px corners, 14px 16px of padding, one 300ms curve for everything. */\nexport const ALERT_RADIUS_UNITS = 1.5;\nexport const ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 } as const;\nexport const ALERT_TRANSITION_MS = 300;\nexport const ALERT_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** Mount: the web's `fadeInScale` keyframes and the icon's `iconRotate`. */\nexport const FADE_IN = { ms: 300, scale: 0.95, lift: 10 } as const;\nexport const ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 } as const;\n/** Dismiss: MUI `Collapse` runs 300ms; `onClose` fires 200ms in. */\nexport const COLLAPSE_MS = 300;\nexport const CLOSE_DELAY_MS = 200;\n\n/** The message column: 8px between title, description and children; 0.95rem body on 1.5. */\nexport const MESSAGE_GAP_UNITS = 1;\nexport const MESSAGE_FONT_SIZE = 15.2;\nexport const MESSAGE_LINE_HEIGHT = 1.5;\n/** A control inside the message gets an edge: 4px above, a hairline at 0.45 of the hue. */\nexport const MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 } as const;\n\n/** The title: 1.05rem at 600; MUI's `AlertTitle` lifts it 2px; 4px below it when a description follows. */\nexport const TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 } as const;\n/** The description: 0.925rem, slightly faded. */\nexport const DESCRIPTION = { fontSize: 14.8, opacity: 0.9 } as const;\n\n/** The icon slot: MUI's 22px glyph at 0.9, 14px from the words, 2px down (MUI's 7px stays below). */\nexport const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 } as const;\n/** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */\nexport const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;\n/** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */\nexport const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;\n\n/**\n * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark\n * ink of the same hue — MUI's own `standard` recipe, at its ratios. See\n * `semanticSurface` in `Alert.styles.tsx` for why not `alpha(main, 0.1)`.\n */\nexport const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;\n/** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */\nexport const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;\n/**\n * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.\n *\n * It carries no hover of its own, and that is load-bearing rather than an\n * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the\n * same object literal, so a second `'&:hover'` key does not merge with it — it\n * REPLACES it. While this variant had one, `gradient` was the only alert that\n * brightened on hover while every other variant darkened, and the only one to\n * lose the shimmer reveal the root's hover performs.\n */\nexport const GRADIENT = {\n  angleDeg: 135,\n  stopAlpha: 0.9,\n  shimmerAlpha: 0.2,\n  shimmerMs: 3000,\n  shimmerTravel: 1000,\n} as const;\n\n/** Emphasis: the glow's shadow and brightness, the pulse's wash. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;\nexport const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;\n\n/**\n * Pointer states — DOM only, kept so the web derives them.\n *\n * HOVER and ACTIVE carry NO geometry, and that is the point rather than an\n * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow\n * and spin the icon 10deg at 1.15 — four things moving at once on a surface\n * that is not a control, which made a page of alerts twitch under the pointer.\n *\n * Both are a TINT now: a flat inset layer over the surface. Two mechanisms\n * came before it and each failed on a case the next had to fix. Dropping the\n * element's `opacity` composites toward the PAGE, so it inverted the hover on\n * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a\n * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,\n * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)\n * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the\n * same on an opaque tint, a translucent wash and a gradient, and because it\n * paints above the background and below the content the ink keeps its own\n * contrast.\n */\nexport const HOVER = { tintAlpha: 0.06 } as const;\n\n/**\n * The press: a 20% tint LAYER, eased back fast.\n *\n * The layer is the point. The first attempt dropped the whole element's\n * opacity, which composites toward the PAGE and so behaves differently on\n * every surface it is asked about. Measured: over a light page it made a light\n * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the\n * surface looked like the pointer leaving; over a dark page it landed back on\n * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body\n * copy to 2.31:1, under AA; and it diluted the ink during a text-selection\n * drag. A `brightness()` step instead of it fixed the direction but not the\n * reach — a multiplier does nothing to a near-black `glass` in dark mode\n * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it\n * scales only what the element already paints.\n *\n * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,\n * so it reads the same on an opaque tint, a translucent wash and a gradient;\n * painted above the background and below the content, so the ink keeps its\n * own contrast; and animatable, which `background-image` is not.\n *\n * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE\n * property carries both states. CSS runs a transition from the DESTINATION\n * state's declaration, and entering hover and releasing a press share that\n * destination — so they cannot have different durations without a second\n * animatable property, and both free pseudo-elements are already spent on the\n * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the\n * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and\n * for ~360ms the alert you had just LEFT was darker than the one under the\n * pointer. A fast press-return is the smaller loss, and it is the call the\n * product owner made when shown both.\n */\nexport const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;\n\nexport const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;\n\n/** `neutral` has no palette slot; the web has always drawn it from three greys. */\nexport const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`, `300` → `0.3s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** The palette shape the web's `getColorFromTheme` returns — a main plus optional shades. */\nexport interface AlertPalette {\n  main: string;\n  light?: string;\n  dark?: string;\n}\n\n/**\n * The renderer-free twin of the web's `getColorFromTheme`: a variant or\n * colour name to its palette, `neutral` from the greys, anything unknown\n * (`glass`, `gradient`) to `info`.\n */\nexport function alertPalette(theme: UiTheme, key: string | undefined): AlertPalette {\n  switch (key) {\n    case 'info':\n    case 'success':\n    case 'warning':\n    case 'danger':\n    case 'primary':\n    case 'secondary':\n      return theme.palette[key];\n    case 'neutral':\n      return {\n        main: theme.palette.grey[NEUTRAL_GREY.main],\n        light: theme.palette.grey[NEUTRAL_GREY.light],\n        dark: theme.palette.grey[NEUTRAL_GREY.dark],\n      };\n    default:\n      return theme.palette.info;\n  }\n}\n\n/** What a variant paints: its fill, its ink, its hairline if any, and the colour of its glyph. */\nexport interface AlertSurface {\n  backgroundColor: string;\n  color: string;\n  borderColor?: string;\n  iconColor: string;\n}\n\nexport const SEMANTIC_VARIANTS: ReadonlySet<AlertVariant> = new Set(['info', 'success', 'warning', 'danger']);\n\n/** The opaque tint and same-hue ink, inverted for dark mode; the hairline keeps its alpha. */\nexport function semanticSurface(theme: UiTheme, palette: AlertPalette): AlertSurface {\n  const dark = theme.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(palette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(palette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),\n    borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),\n    iconColor: palette.main,\n  };\n}\n\nexport function glassSurface(theme: UiTheme): AlertSurface {\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    color: theme.palette.text.primary,\n    borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),\n    iconColor: theme.palette.primary.main,\n  };\n}\n\n/** The gradient's two stops; a renderer with no gradient fill paints `from`. */\nexport function gradientStops(palette: AlertPalette): { from: string; to: string } {\n  return {\n    from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),\n    to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha),\n  };\n}\n\nexport function gradientSurface(palette: AlertPalette): AlertSurface {\n  const ink = contrastText(palette.main);\n  return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };\n}\n\n/** The surface for a variant, `glass` and `gradient` included. */\nexport function alertSurface(theme: UiTheme, variant: AlertVariant, palette: AlertPalette): AlertSurface {\n  if (variant === 'glass') return glassSurface(theme);\n  if (variant === 'gradient') return gradientSurface(palette);\n  return semanticSurface(theme, palette);\n}\n"],"mappings":"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","names":[]}