@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-BOU3HR4C.js

@@ -1,216 +0,0 @@
-import {
-  BUTTON_SIZES,
-  ICON_ONLY_PADDING
-} from "./chunk-LN46DSMF.js";
-import {
-  asFieldSize,
-  fieldBorder,
-  fieldHeight
-} from "./chunk-CGO452DC.js";
-import {
-  px
-} from "./chunk-PE4ZW3IA.js";
-import {
-  inkOver
-} from "./chunk-2BYKTBDL.js";
-import {
-  absoluteInk,
-  controlNeutral
-} from "./chunk-FQ6UW7IY.js";
-
-// src/components/form/Button/Button.styles.ts
-import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 15px currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
-var neutralPalette = (theme) => controlNeutral(theme);
-var getColorFromTheme = (theme, color) => {
-  if (color === "neutral") return neutralPalette(theme);
-  const colorMap = {
-    primary: theme.palette.primary,
-    secondary: theme.palette.secondary,
-    success: theme.palette.success,
-    warning: theme.palette.warning,
-    info: theme.palette.info,
-    danger: theme.palette.error
-  };
-  const fallback = theme.palette.primary;
-  const palette = colorMap[color] || fallback;
-  return {
-    main: palette?.main || fallback.main,
-    dark: shade(palette, "dark", fallback),
-    light: shade(palette, "light", fallback),
-    contrastText: palette?.contrastText || absoluteInk(theme).white
-  };
-};
-var SIZE_MAP = Object.fromEntries(
-  Object.entries(BUTTON_SIZES).map(([size, m]) => [
-    size,
-    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontSize: px(m.fontSize) }
-  ])
-);
-var DEFAULT_SIZE = SIZE_MAP.md;
-var ICON_ONLY_PADDING2 = Object.fromEntries(
-  Object.entries(ICON_ONLY_PADDING).map(([size, padding]) => [size, `${padding}px`])
-);
-var iconOnlySize = (size) => ({
-  minWidth: 0,
-  padding: ICON_ONLY_PADDING2[size] ?? ICON_ONLY_PADDING2.md,
-  fontSize: SIZE_MAP[size]?.fontSize ?? DEFAULT_SIZE.fontSize,
-  "& .MuiButton-startIcon, & .MuiButton-endIcon": { margin: 0 }
-});
-var buttonSize = (size, iconOnly) => (theme) => {
-  const height = fieldHeight(theme, asFieldSize(size));
-  if (iconOnly) return { ...iconOnlySize(size), padding: 0, minWidth: height, minHeight: height };
-  return { ...SIZE_MAP[size] ?? DEFAULT_SIZE, minHeight: height, paddingTop: 0, paddingBottom: 0 };
-};
-var iconAlignmentStyles = (theme) => ({
-  "& .MuiButton-startIcon, & .MuiButton-endIcon": {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    margin: 0,
-    verticalAlign: "middle",
-    "& > *": {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      lineHeight: 0
-    }
-  },
-  "& .MuiButton-startIcon": {
-    marginRight: theme.spacing(0.5)
-  },
-  "& .MuiButton-endIcon": {
-    marginLeft: theme.spacing(0.5)
-  }
-});
-var GRADIENT_PAIRS = {
-  primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],
-  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
-  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
-  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
-  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark]
-};
-var gradientStops = (theme, color, palette) => GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];
-var gradientFor = (theme, color, palette) => {
-  const [from, to] = gradientStops(theme, color, palette);
-  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
-};
-var gradientInk = (theme, color, palette) => inkOver(gradientStops(theme, color, palette), palette.contrastText || absoluteInk(theme).white);
-var quietInk = (theme, palette) => theme.palette.mode === "dark" ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);
-var VARIANT_STYLES = {
-  solid: (theme, palette) => ({
-    backgroundColor: palette.main,
-    color: palette.contrastText || absoluteInk(theme).white,
-    "&:hover": {
-      backgroundColor: palette.dark,
-      transform: "translateY(-2px)",
-      boxShadow: theme.shadows[8]
-    }
-  }),
-  // A NEUTRAL outline is a field-row control ("Mais", "Exibir"), so it rests on
-  // the one field border; a coloured outline keeps its colour, which is the
-  // point of asking for one.
-  outline: (theme, palette, color) => ({
-    backgroundColor: "transparent",
-    color: palette.main,
-    border: color === "neutral" ? fieldBorder(theme) : `1px solid ${palette.main}`,
-    "&:hover": {
-      backgroundColor: alpha(palette.main, 0.1),
-      borderColor: palette.dark
-    }
-  }),
-  ghost: (theme, palette) => ({
-    backgroundColor: "transparent",
-    color: quietInk(theme, palette),
-    "&:hover": {
-      backgroundColor: alpha(palette.main, 0.1)
-    }
-  }),
-  text: (theme, palette) => ({
-    backgroundColor: "transparent",
-    color: quietInk(theme, palette),
-    border: `none`,
-    "&:hover": {
-      backgroundColor: alpha(palette.main, 0.1)
-    },
-    "&.active": {
-      backgroundColor: alpha(palette.main, 0.1),
-      color: quietInk(theme, palette)
-    }
-  }),
-  glass: (theme, palette) => ({
-    backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    color: palette.main,
-    "&:hover": {
-      backgroundColor: alpha(theme.palette.background.paper, 0.2),
-      transform: "translateY(-2px)"
-    }
-  }),
-  gradient: (theme, palette, color) => ({
-    background: gradientFor(theme, color, palette),
-    color: gradientInk(theme, color, palette),
-    "&:hover": {
-      filter: "brightness(1.1)",
-      transform: "translateY(-2px)",
-      boxShadow: theme.shadows[12]
-    }
-  })
-};
-var buttonVariantStyles = (theme, variant, palette, color) => VARIANT_STYLES[variant ?? ""]?.(theme, palette, color) ?? {};
-var glowStyles = (palette) => ({
-  boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,
-  filter: "brightness(1.05)",
-  "&:hover": {
-    boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,
-    filter: "brightness(1.1)",
-    transform: "translateY(-2px) scale(1.02)"
-  }
-});
-var pulseStyles = (palette) => ({
-  position: "relative",
-  overflow: "visible",
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    width: "100%",
-    height: "100%",
-    borderRadius: "inherit",
-    transform: "translate(-50%, -50%)",
-    backgroundColor: palette.main,
-    opacity: 0.3,
-    animation: `${pulseAnimation} 2s infinite`,
-    pointerEvents: "none",
-    zIndex: -1
-  }
-});
-var buttonEmphasisStyles = (palette, glow, pulse) => ({
-  ...glow ? glowStyles(palette) : {},
-  ...pulse ? pulseStyles(palette) : {}
-});
-
-export {
-  getColorFromTheme,
-  buttonSize,
-  iconAlignmentStyles,
-  buttonVariantStyles,
-  buttonEmphasisStyles
-};
-//# sourceMappingURL=chunk-BOU3HR4C.js.map

package/dist/chunk-BOU3HR4C.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Button/Button.styles.ts"],"sourcesContent":["import { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { BUTTON_SIZES, ICON_ONLY_PADDING as ICON_ONLY_PADDING_PX } from './Button.metrics';\nimport { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { inkOver, px } from '../../../tokens/theme';\n\n// Define pulse animation globally\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 15px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\ninterface ColorPalette {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n}\n\nconst shade = (\n  palette: ColorPalette | undefined,\n  key: 'dark' | 'light',\n  fallback: ColorPalette,\n): string => palette?.[key] || palette?.main || fallback[key];\n\n/** `neutral` has no MUI palette entry, so its four shades come from grey. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\nexport const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, ColorPalette> = {\n    primary: theme.palette.primary as ColorPalette,\n    secondary: theme.palette.secondary as ColorPalette,\n    success: theme.palette.success as ColorPalette,\n    warning: theme.palette.warning as ColorPalette,\n    info: theme.palette.info as ColorPalette,\n    danger: theme.palette.error as ColorPalette,\n  };\n\n  const fallback = theme.palette.primary as ColorPalette;\n  const palette = colorMap[color] || fallback;\n\n  // Ensure palette has required properties\n  return {\n    main: palette?.main || fallback.main,\n    dark: shade(palette, 'dark', fallback),\n    light: shade(palette, 'light', fallback),\n    contrastText: palette?.contrastText || absoluteInk(theme).white,\n  };\n};\n\n// Derived from `Button.metrics.ts`, which the native `Button` reads too — one\n// table, so a size cannot differ between the renderers.\nconst SIZE_MAP: Record<string, CSSObject> = Object.fromEntries(\n  Object.entries(BUTTON_SIZES).map(([size, m]) => [\n    size,\n    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontSize: px(m.fontSize) },\n  ]),\n);\n\n/** What an unrecognised size falls back to, named so indexing can never be undefined. */\nconst DEFAULT_SIZE: CSSObject = SIZE_MAP.md as CSSObject;\n\n/**\n * A BUTTON THAT IS ONLY AN ICON IS SQUARE.\n *\n * MUI puts a 64px `min-width` on every button, which is right for a label and\n * wrong for a glyph: three dots in a 64px slab reads as a button that failed to\n * load its text, and at the end of a dense row it claims space the row needs.\n * The horizontal padding goes too — a square of padding round a square glyph —\n * and so does the gap MUI reserves beside a start/end icon, since there is\n * nothing on the other side of it.\n *\n * Derived, not declared: a button with an `icon` and no children can only be an\n * icon button, so no consumer has to opt in and none can forget to.\n */\nconst ICON_ONLY_PADDING: Record<string, string> = Object.fromEntries(\n  Object.entries(ICON_ONLY_PADDING_PX).map(([size, padding]) => [size, `${padding}px`]),\n);\n\nconst iconOnlySize = (size: string): CSSObject => ({\n  minWidth: 0,\n  padding: ICON_ONLY_PADDING[size] ?? ICON_ONLY_PADDING.md,\n  fontSize: SIZE_MAP[size]?.fontSize ?? DEFAULT_SIZE.fontSize,\n  '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },\n});\n\n/**\n * The size styles for a button, square when it carries nothing but an icon.\n *\n * The HEIGHT is the theme's field height for the size (`tokens/field-height`),\n * so a button stands level with the field beside it: the vertical padding goes\n * and the label is centred in a box at least that tall — a label that wraps\n * still grows it. An icon-only button is that height on every side.\n */\nexport const buttonSize =\n  (size: string, iconOnly: boolean) =>\n  (theme: Theme): CSSObject => {\n    const height = fieldHeight(theme, asFieldSize(size));\n    if (iconOnly) return { ...iconOnlySize(size), padding: 0, minWidth: height, minHeight: height };\n    return { ...(SIZE_MAP[size] ?? DEFAULT_SIZE), minHeight: height, paddingTop: 0, paddingBottom: 0 };\n  };\n\n/**\n * MUI centres icons with a negative margin that fights our own padding, so the\n * flex alignment is restated here rather than fought with `!important`.\n */\nexport const iconAlignmentStyles = (theme: Theme): CSSObject => ({\n  '& .MuiButton-startIcon, & .MuiButton-endIcon': {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    margin: 0,\n    verticalAlign: 'middle',\n    '& > *': {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      lineHeight: 0,\n    },\n  },\n  '& .MuiButton-startIcon': {\n    marginRight: theme.spacing(0.5),\n  },\n  '& .MuiButton-endIcon': {\n    marginLeft: theme.spacing(0.5),\n  },\n});\n\n// Gradients run between two related hues; the named colours pick a specific pair,\n// anything else runs from its own main to its own dark.\nconst GRADIENT_PAIRS: Record<string, (theme: Theme) => [string, string]> = {\n  primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],\n  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n};\n\nconst gradientStops = (theme: Theme, color: string, palette: ColorPalette): [string, string] =>\n  GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];\n\nconst gradientFor = (theme: Theme, color: string, palette: ColorPalette): string => {\n  const [from, to] = gradientStops(theme, color, palette);\n  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;\n};\n\n/**\n * The label colour for `gradient`, which used to be `#fff` outright (FUT-1924).\n *\n * Every other filled variant reads `palette.contrastText`, derived from `main`\n * — so a white-labelled host handing the library a pale brand got dark ink on\n * its solid buttons and white ink on its gradient one. That store had exactly\n * one button in the library whose label it could not read, in LIGHT mode,\n * before dark mode existed anywhere.\n *\n * `contrastText` is still not the right thing to read, and that is why this\n * goes through {@link inkOver}: a gradient is TWO fills, the named pairs run\n * light-to-dark, and an ink chosen against `main` says nothing about the end\n * the gradient actually reaches. Both stops go in, and the ink has to survive\n * the worse of them.\n */\nconst gradientInk = (theme: Theme, color: string, palette: ColorPalette): string =>\n  inkOver(gradientStops(theme, color, palette), palette.contrastText || absoluteInk(theme).white);\n\n/**\n * The label colour for the two variants that paint no background of their own.\n *\n * `ghost` and `text` used `palette.main` directly, which is the same mistake\n * the Alert made with its body text: a palette's `main` is chosen to sit UNDER\n * white — it is the fill of a solid button — and it is not chosen to be read AS\n * text. `#6366F1`, the default primary, is 3.6:1 on white and worse on any\n * tinted surface, so a \"Cancelar\" or an \"Agora não\" placed on a coloured panel\n * turned into a smudge. That is precisely where these two variants belong: they\n * exist to be the quiet option NEXT to a solid one, so they are the buttons\n * most likely to be sitting on something other than plain paper.\n *\n * One step darker (lighter, on a dark theme) keeps the hue the caller asked for\n * and buys the contrast back. `main` still drives the hover wash and every\n * bordered variant, so nothing that was already legible moves.\n */\nconst quietInk = (theme: Theme, palette: ColorPalette): string =>\n  theme.palette.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\nconst VARIANT_STYLES: Record<\n  string,\n  (theme: Theme, palette: ColorPalette, color: string) => CSSObject\n> = {\n  solid: (theme, palette) => ({\n    backgroundColor: palette.main,\n    color: palette.contrastText || absoluteInk(theme).white,\n    '&:hover': {\n      backgroundColor: palette.dark,\n      transform: 'translateY(-2px)',\n      boxShadow: theme.shadows[8],\n    },\n  }),\n  // A NEUTRAL outline is a field-row control (\"Mais\", \"Exibir\"), so it rests on\n  // the one field border; a coloured outline keeps its colour, which is the\n  // point of asking for one.\n  outline: (theme, palette, color) => ({\n    backgroundColor: 'transparent',\n    color: palette.main,\n    border: color === 'neutral' ? fieldBorder(theme) : `1px solid ${palette.main}`,\n    '&:hover': {\n      backgroundColor: alpha(palette.main, 0.1),\n      borderColor: palette.dark,\n    },\n  }),\n  ghost: (theme, palette) => ({\n    backgroundColor: 'transparent',\n    color: quietInk(theme, palette),\n    '&:hover': {\n      backgroundColor: alpha(palette.main, 0.1),\n    },\n  }),\n  text: (theme, palette) => ({\n    backgroundColor: 'transparent',\n    color: quietInk(theme, palette),\n    border: `none`,\n    '&:hover': {\n      backgroundColor: alpha(palette.main, 0.1),\n    },\n    '&.active': {\n      backgroundColor: alpha(palette.main, 0.1),\n      color: quietInk(theme, palette),\n    },\n  }),\n  glass: (theme, palette) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    color: palette.main,\n    '&:hover': {\n      backgroundColor: alpha(theme.palette.background.paper, 0.2),\n      transform: 'translateY(-2px)',\n    },\n  }),\n  gradient: (theme, palette, color) => ({\n    background: gradientFor(theme, color, palette),\n    color: gradientInk(theme, color, palette),\n    '&:hover': {\n      filter: 'brightness(1.1)',\n      transform: 'translateY(-2px)',\n      boxShadow: theme.shadows[12],\n    },\n  }),\n};\n\nexport const buttonVariantStyles = (\n  theme: Theme,\n  variant: string | undefined,\n  palette: ColorPalette,\n  color: string,\n): CSSObject => VARIANT_STYLES[variant ?? '']?.(theme, palette, color) ?? {};\n\n// Glow effect - applied with !important to override variant shadows\nconst glowStyles = (palette: ColorPalette): CSSObject => ({\n  boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,\n  filter: 'brightness(1.05)',\n  '&:hover': {\n    boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,\n    filter: 'brightness(1.1)',\n    transform: 'translateY(-2px) scale(1.02)',\n  },\n});\n\n// Pulse animation using pseudo-element\nconst pulseStyles = (palette: ColorPalette): CSSObject => ({\n  position: 'relative',\n  overflow: 'visible',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: '100%',\n    height: '100%',\n    borderRadius: 'inherit',\n    transform: 'translate(-50%, -50%)',\n    backgroundColor: palette.main,\n    opacity: 0.3,\n    animation: `${pulseAnimation} 2s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\n/**\n * glow and pulse are independent flags. The three combinations used to be spelled\n * out one by one, but each is just the union of whichever flags are set.\n */\nexport const buttonEmphasisStyles = (\n  palette: ColorPalette,\n  glow?: boolean,\n  pulse?: boolean,\n): CSSObject => ({\n  ...(glow ? glowStyles(palette) : {}),\n  ...(pulse ? pulseStyles(palette) : {}),\n});\n"],"mappings":"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","names":["ICON_ONLY_PADDING"]}

package/dist/chunk-BQGT77IQ.js

@@ -1,181 +0,0 @@
-import {
-  DeleteViewDialog
-} from "./chunk-OT5DVKXP.js";
-import {
-  DataViewsGrid
-} from "./chunk-GJRBK564.js";
-import {
-  viewStateKey
-} from "./chunk-ZOLAYP2D.js";
-import {
-  ViewDialogs,
-  ViewMutationErrorAlert
-} from "./chunk-Q4KFGRBV.js";
-import {
-  useSavedViewsController
-} from "./chunk-HR7YTBR7.js";
-
-// src/components/data-display/DataViews/DataViewsTableBase.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function useUrlSyncState(server, initialState) {
-  const isServerMode = server !== void 0;
-  return useMemo(
-    () => isServerMode && initialState ? {
-      search: initialState.search,
-      pills: initialState.pills,
-      ranges: initialState.ranges,
-      sortBy: initialState.sortBy,
-      // The scope belongs in the URL-driven slice alongside them: a
-      // `?view=recusados`-style deep link and browser back/forward must
-      // move the tab strip, and they must do it WITHOUT resetting the
-      // user's hidden columns — which is the whole reason this is a
-      // merging `syncState` and not a replacing `appliedState`.
-      scope: initialState.scope
-    } : void 0,
-    [isServerMode, initialState]
-  );
-}
-function resolveInitialView(views, requestedId) {
-  const requested = requestedId ? views.find((view) => view.id === requestedId) : void 0;
-  return requested ?? views.find((view) => view.isDefault);
-}
-function buildDisplayView({
-  ctl,
-  views,
-  activeView,
-  dirty,
-  onRequestDelete
-}) {
-  return {
-    activeViewName: ctl.activeViewName,
-    dirty,
-    onReset: () => activeView ? ctl.applyView(activeView) : ctl.selectMain(),
-    // Only offer "Atualizar" when there IS a view to update — otherwise the
-    // single footer button is a plain "Salvar visão".
-    onUpdate: activeView ? () => ctl.openEdit(activeView) : void 0,
-    onSaveAs: ctl.openCreate,
-    // The views themselves, not a dropdown: the panel renders them in its own
-    // body (see `data-views-view-nav`), so there is no second popover to clip
-    // the row actions.
-    nav: {
-      views,
-      activeViewId: activeView?.id ?? null,
-      onSelectView: (id) => {
-        const next = id === null ? null : views.find((view) => view.id === id);
-        if (next) ctl.applyView(next);
-        else ctl.selectMain();
-      },
-      onEditView: ctl.openEdit,
-      onPatchView: (view, changes) => void ctl.patchView(view, changes),
-      onDeleteView: onRequestDelete
-    }
-  };
-}
-function useDirtyTracking(ctl) {
-  const [dirty, setDirty] = useState(false);
-  const [savedAt, setSavedAt] = useState(0);
-  const baseline = useRef(null);
-  const appliedKey = JSON.stringify(ctl.applied ?? null);
-  useEffect(() => {
-    baseline.current = null;
-    setDirty(false);
-  }, [appliedKey, savedAt]);
-  return {
-    dirty,
-    noteState: (state) => {
-      ctl.currentRef.current = state;
-      const key = viewStateKey(state);
-      if (baseline.current === null) {
-        baseline.current = key;
-        setDirty(false);
-        return;
-      }
-      const next = key !== baseline.current;
-      setDirty((prev) => prev === next ? prev : next);
-    },
-    markSaved: () => setSavedAt((tick) => tick + 1)
-  };
-}
-function DataViewsTableBase(props) {
-  const {
-    initialViewId = null,
-    persistence,
-    router,
-    columns,
-    fields,
-    testIdPrefix = "table",
-    views,
-    server,
-    initialState
-  } = props;
-  const initialView = resolveInitialView(views, initialViewId);
-  const columnIds = columns.map((col) => col.id);
-  const ctl = useSavedViewsController(persistence, router, columnIds, views, initialView, initialState);
-  const { dirty, noteState, markSaved } = useDirtyTracking(ctl);
-  const [pendingDelete, setPendingDelete] = useState(null);
-  const activeView = views.find((view) => view.name === ctl.activeViewName);
-  const displayView = buildDisplayView({
-    ctl,
-    views,
-    activeView,
-    dirty,
-    onRequestDelete: setPendingDelete
-  });
-  const syncState = useUrlSyncState(server, initialState);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ViewMutationErrorAlert, { error: ctl.mutationError, onClose: ctl.clearMutationError, testIdPrefix }),
-    /* @__PURE__ */ jsx(
-      DataViewsGrid,
-      {
-        ...props,
-        testIdPrefix,
-        appliedState: ctl.applied,
-        syncState,
-        onStateChange: noteState,
-        displayView
-      }
-    ),
-    renderViewDialogs(ctl, fields, columns, views, testIdPrefix, markSaved),
-    /* @__PURE__ */ jsx(
-      DeleteViewDialog,
-      {
-        view: pendingDelete,
-        onClose: () => setPendingDelete(null),
-        onConfirm: (view) => {
-          void ctl.handleDelete(view);
-          setPendingDelete(null);
-        },
-        testIdPrefix
-      }
-    )
-  ] });
-}
-function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
-  return /* @__PURE__ */ jsx(
-    ViewDialogs,
-    {
-      saveOpen: ctl.saveOpen,
-      onCloseSave: ctl.closeSave,
-      currentState: ctl.editing ? ctl.editing.state : ctl.currentRef.current,
-      fields,
-      columns,
-      editing: ctl.editing,
-      onSave: async (payload) => {
-        await ctl.handleSave(payload);
-        onSaved();
-      },
-      manageOpen: ctl.manageOpen,
-      onCloseManage: () => ctl.setManageOpen(false),
-      views,
-      onEditFromManage: ctl.editFromManage,
-      onDelete: (view) => void ctl.handleDelete(view),
-      testIdPrefix
-    }
-  );
-}
-
-export {
-  DataViewsTableBase
-};
-//# sourceMappingURL=chunk-BQGT77IQ.js.map

package/dist/chunk-BR7RM3WR.js

@@ -1,79 +0,0 @@
-import {
-  avatarFor,
-  chipStyles,
-  iconWithTestId,
-  makeKeyDownHandler
-} from "./chunk-5NFPO3YY.js";
-import {
-  chipMuiSize
-} from "./chunk-KU6VHNRV.js";
-import {
-  chipRole,
-  isClickable,
-  makeTestId
-} from "./chunk-BF4FYOAR.js";
-
-// src/components/data-display/Chip/Chip.tsx
-import CancelIcon from "@mui/icons-material/Cancel";
-import MuiChip from "@mui/material/Chip/index.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var muiColorFor = (color) => {
-  if (color === "danger") return "error";
-  return color === "neutral" ? "default" : color;
-};
-var Chip = forwardRef(({
-  label,
-  variant = "filled",
-  size = "md",
-  color = "primary",
-  avatarSrc,
-  avatar,
-  icon,
-  selected,
-  selectable,
-  deletable,
-  disabled,
-  onClick,
-  onDelete,
-  className,
-  dataTestId,
-  // React Native's spelling of the same id; it names the component on both
-  // sides and must not reach the DOM as an attribute.
-  testID,
-  ...props
-}, ref) => {
-  const chipId = testID ?? dataTestId;
-  const testId = makeTestId(chipId);
-  const clickable = isClickable(disabled, onClick, selectable);
-  return /* @__PURE__ */ jsx(
-    MuiChip,
-    {
-      ref,
-      label: /* @__PURE__ */ jsx("span", { "data-testid": testId("label"), children: label }),
-      variant,
-      size: chipMuiSize(size),
-      color: muiColorFor(color),
-      avatar: avatarFor(avatar, avatarSrc),
-      icon: iconWithTestId(icon, testId("icon")),
-      onDelete: deletable ? onDelete : void 0,
-      deleteIcon: deletable ? /* @__PURE__ */ jsx(CancelIcon, { "data-testid": testId("delete") }) : void 0,
-      disabled,
-      clickable,
-      onClick: clickable ? onClick : void 0,
-      onKeyDown: makeKeyDownHandler({ disabled, deletable, selectable, onClick, onDelete }),
-      className,
-      role: chipRole(selectable, onClick),
-      "aria-selected": selectable ? selected : void 0,
-      "data-testid": chipId || "chip",
-      sx: chipStyles({ variant, selected, clickable, disabled }),
-      ...props
-    }
-  );
-});
-Chip.displayName = "Chip";
-
-export {
-  Chip
-};
-//# sourceMappingURL=chunk-BR7RM3WR.js.map

package/dist/chunk-BTVIHTAL.js

@@ -1,107 +0,0 @@
-import {
-  fieldHeight
-} from "./chunk-CGO452DC.js";
-import {
-  fieldRadiusPx
-} from "./chunk-GDN2LUTZ.js";
-
-// src/components/layout/ContentToolbar/ViewSelector.tsx
-import CheckIcon from "@mui/icons-material/Check";
-import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import GridIcon from "@mui/icons-material/GridViewOutlined";
-import ListIcon from "@mui/icons-material/FormatListBulletedRounded";
-import Box from "@mui/material/Box/index.js";
-import Button from "@mui/material/Button/index.js";
-import ListItemIcon from "@mui/material/ListItemIcon/index.js";
-import ListItemText from "@mui/material/ListItemText/index.js";
-import Menu from "@mui/material/Menu/index.js";
-import MenuItem from "@mui/material/MenuItem/index.js";
-import Slider from "@mui/material/Slider/index.js";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var VIEW_OPTIONS = [
-  { value: "grid", label: "Grid View", icon: GridIcon },
-  { value: "list", label: "List View", icon: ListIcon }
-];
-function ViewSelector({
-  viewMode,
-  onViewModeChange,
-  zoom,
-  onZoomChange,
-  cardSizeLabel
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
-  const ActiveIcon = activeOption.icon;
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
-      Slider,
-      {
-        "data-testid": "resize-card-slider",
-        "aria-label": cardSizeLabel,
-        value: zoom[0] ?? 0,
-        onChange: (_, value) => onZoomChange([value]),
-        min: 0,
-        max: 100,
-        step: 1,
-        size: "small"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        "data-testid": "view-mode-btn",
-        variant: "text",
-        size: "small",
-        color: "inherit",
-        "aria-label": activeOption.label,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: { minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: "text.secondary" },
-        children: [
-          /* @__PURE__ */ jsx(ActiveIcon, { sx: { fontSize: 16 } }),
-          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Menu,
-      {
-        anchorEl,
-        open,
-        onClose: () => setAnchorEl(null),
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 180 } } },
-        children: VIEW_OPTIONS.map((option) => {
-          const OptionIcon = option.icon;
-          const selected = viewMode === option.value;
-          return /* @__PURE__ */ jsxs(
-            MenuItem,
-            {
-              "data-testid": `view-mode-${option.value}`,
-              onClick: () => {
-                onViewModeChange(option.value);
-                setAnchorEl(null);
-              },
-              sx: { gap: 1.5 },
-              children: [
-                /* @__PURE__ */ jsx(ListItemText, { children: option.label }),
-                /* @__PURE__ */ jsx(OptionIcon, { sx: { fontSize: 16, color: "text.secondary" } }),
-                /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: "auto !important" }, children: /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: 16, color: selected ? "text.primary" : "transparent" } }) })
-              ]
-            },
-            option.value
-          );
-        })
-      }
-    )
-  ] });
-}
-
-export {
-  ViewSelector
-};
-//# sourceMappingURL=chunk-BTVIHTAL.js.map

package/dist/chunk-BTVIHTAL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/ContentToolbar/ViewSelector.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport GridIcon from '@mui/icons-material/GridViewOutlined';\nimport ListIcon from '@mui/icons-material/FormatListBulletedRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Slider from '@mui/material/Slider/index.js';\n// `SvgIconComponent` is declared inline in @mui/icons-material's barrel and has\n// no module of its own, so the deep-import equivalent is its own definition:\n// `type SvgIconComponent = typeof SvgIcon`.\nimport type SvgIcon from '@mui/material/SvgIcon/index.js';\nimport React, { useState } from 'react';\n\nimport type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\n\nconst VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [\n  { value: 'grid', label: 'Grid View', icon: GridIcon },\n  { value: 'list', label: 'List View', icon: ListIcon },\n];\n\n/**\n * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode\n * only). Faithful MUI port of the reference toolbar's view control.\n */\nexport function ViewSelector({\n  viewMode,\n  onViewModeChange,\n  zoom,\n  onZoomChange,\n  cardSizeLabel,\n}: ViewSelectorProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;\n  const ActiveIcon = activeOption.icon;\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n      {viewMode === 'grid' && (\n        <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>\n          <Slider\n            data-testid=\"resize-card-slider\"\n            aria-label={cardSizeLabel}\n            value={zoom[0] ?? 0}\n            onChange={(_, value) => onZoomChange([value as number])}\n            min={0}\n            max={100}\n            step={1}\n            size=\"small\"\n          />\n        </Box>\n      )}\n\n      <Button\n        data-testid=\"view-mode-btn\"\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        aria-label={activeOption.label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}\n      >\n        <ActiveIcon sx={{ fontSize: 16 }} />\n        <ChevronDownIcon sx={{ fontSize: 14 }} />\n      </Button>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: 180 } } }}\n      >\n        {VIEW_OPTIONS.map((option) => {\n          const OptionIcon = option.icon;\n          const selected = viewMode === option.value;\n          return (\n            <MenuItem\n              key={option.value}\n              data-testid={`view-mode-${option.value}`}\n              onClick={() => {\n                onViewModeChange(option.value);\n                setAnchorEl(null);\n              }}\n              sx={{ gap: 1.5 }}\n            >\n              <ListItemText>{option.label}</ListItemText>\n              <OptionIcon sx={{ fontSize: 16, color: 'text.secondary' }} />\n              <ListItemIcon sx={{ minWidth: 'auto !important' }}>\n                <CheckIcon sx={{ fontSize: 16, color: selected ? 'text.primary' : 'transparent' }} />\n              </ListItemIcon>\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}