@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-Q4BQYYPU.js

@@ -0,0 +1,93 @@
+import {
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BACKGROUND_ALPHA_TO,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  SKELETON_DEFAULT_DIMENSIONS,
+  SKELETON_INTENSITY_OPACITY
+} from "./chunk-EMPVMZAB.js";
+import {
+  modeInk,
+  shadowInk,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/layout/Skeleton/Skeleton.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var muiVariantFor = (variant) => {
+  switch (variant) {
+    case "circular":
+      return "circular";
+    case "rectangular":
+    case "wave":
+      return "rectangular";
+    default:
+      return "text";
+  }
+};
+var muiAnimationFor = (variant, animation) => {
+  if (variant === "wave") return "wave";
+  return animation;
+};
+var defaultDimensions = (variant) => (
+  // The `default:` arm the old switch had: an unrecognised variant used to fall
+  // back rather than hand `undefined` to a caller that then reads `.width`.
+  SKELETON_DEFAULT_DIMENSIONS[variant] ?? SKELETON_DEFAULT_DIMENSIONS.rectangular
+);
+var intensityOpacity = (intensity) => SKELETON_INTENSITY_OPACITY[intensity] ?? SKELETON_INTENSITY_OPACITY.medium;
+var glassmorphismStyles = (theme) => ({
+  background: `linear-gradient(135deg,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
+  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+  border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
+  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`
+});
+var shimmerStyles = (theme) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: `linear-gradient(
+          90deg,
+          transparent,
+          ${sheen(theme, SHIMMER_ALPHA)},
+          transparent
+        )`,
+    transform: "translateX(-100%)",
+    animation: `shimmer ${SHIMMER_DURATION_MS / 1e3}s infinite`
+  },
+  "@keyframes shimmer": {
+    "100%": {
+      transform: "translateX(100%)"
+    }
+  }
+});
+var skeletonStyles = (theme, { intensity, borderRadius, glassmorphism, shimmer, style }) => ({
+  borderRadius,
+  backgroundColor: alpha(
+    theme.palette.mode === "dark" ? modeInk(theme) : theme.palette.text.primary,
+    intensityOpacity(intensity)
+  ),
+  ...shimmer && {
+    position: "relative",
+    overflow: "hidden"
+  },
+  ...glassmorphism ? glassmorphismStyles(theme) : {},
+  ...shimmer ? shimmerStyles(theme) : {},
+  ...style
+});
+
+export {
+  muiVariantFor,
+  muiAnimationFor,
+  defaultDimensions,
+  skeletonStyles
+};
+//# sourceMappingURL=chunk-Q4BQYYPU.js.map

package/dist/chunk-Q4BQYYPU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { SkeletonProps } from './Skeleton.types';\nimport {\n  GLASS_BACKGROUND_ALPHA_FROM,\n  GLASS_BACKGROUND_ALPHA_TO,\n  GLASS_BLUR_PX,\n  GLASS_BORDER_ALPHA,\n  GLASS_SHADOW,\n  SHIMMER_ALPHA,\n  SHIMMER_DURATION_MS,\n  SKELETON_DEFAULT_DIMENSIONS,\n  SKELETON_INTENSITY_OPACITY,\n} from './Skeleton.metrics';\nimport { modeInk, shadowInk, sheen } from '../../../tokens/ink';\n\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\ntype SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;\n\n/** `wave` is our own name for a rectangle that animates; MUI has no such variant. */\nexport const muiVariantFor = (\n  variant: SkeletonVariant,\n): 'circular' | 'rectangular' | 'text' => {\n  switch (variant) {\n    case 'circular':\n      return 'circular';\n    case 'rectangular':\n    case 'wave':\n      return 'rectangular';\n    default:\n      return 'text';\n  }\n};\n\nexport const muiAnimationFor = (\n  variant: SkeletonVariant,\n  animation: SkeletonProps['animation'],\n) => {\n  if (variant === 'wave') return 'wave';\n  return animation;\n};\n\n// Derived from the shared metrics, not restated: the native `Skeleton` reads\n// the same table, so the two renderers cannot disagree on a default box.\nexport const defaultDimensions = (\n  variant: SkeletonVariant,\n): { width: number | string; height: number | undefined } =>\n  // The `default:` arm the old switch had: an unrecognised variant used to fall\n  // back rather than hand `undefined` to a caller that then reads `.width`.\n  SKELETON_DEFAULT_DIMENSIONS[variant] ?? SKELETON_DEFAULT_DIMENSIONS.rectangular;\n\nconst intensityOpacity = (intensity: SkeletonIntensity): number =>\n  SKELETON_INTENSITY_OPACITY[intensity] ?? SKELETON_INTENSITY_OPACITY.medium;\n\nconst glassmorphismStyles = (theme: Theme): CSSObject => ({\n  background: `linear-gradient(135deg,\n        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,\n        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,\n  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,\n  border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,\n  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${shadowInk(theme, GLASS_SHADOW.alpha)}`,\n});\n\n// The sweep is a pseudo-element sliding across the box, so the box has to clip it\n// and establish a positioning context — hence `position`/`overflow` below.\nconst shimmerStyles = (theme: Theme): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    background: `linear-gradient(\n          90deg,\n          transparent,\n          ${sheen(theme, SHIMMER_ALPHA)},\n          transparent\n        )`,\n    transform: 'translateX(-100%)',\n    animation: `shimmer ${SHIMMER_DURATION_MS / 1000}s infinite`,\n  },\n  '@keyframes shimmer': {\n    '100%': {\n      transform: 'translateX(100%)',\n    },\n  },\n});\n\ninterface SkeletonStyleArgs {\n  intensity: SkeletonIntensity;\n  borderRadius?: number | string;\n  glassmorphism: boolean;\n  shimmer: boolean;\n  style?: React.CSSProperties;\n}\n\nexport const skeletonStyles = (\n  theme: Theme,\n  { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,\n): CSSObject => ({\n  borderRadius,\n  backgroundColor: alpha(\n    theme.palette.mode === 'dark' ? modeInk(theme) : theme.palette.text.primary,\n    intensityOpacity(intensity),\n  ),\n  ...(shimmer && {\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n  }),\n  ...(glassmorphism ? glassmorphismStyles(theme) : {}),\n  ...(shimmer ? shimmerStyles(theme) : {}),\n  ...style,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAqBf,IAAM,gBAAgB,CAC3B,YACwC;AACxC,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,kBAAkB,CAC7B,SACA,cACG;AACH,MAAI,YAAY,OAAQ,QAAO;AAC/B,SAAO;AACT;AAIO,IAAM,oBAAoB,CAC/B;AAAA;AAAA;AAAA,EAIA,4BAA4B,OAAO,KAAK,4BAA4B;AAAA;AAEtE,IAAM,mBAAmB,CAAC,cACxB,2BAA2B,SAAS,KAAK,2BAA2B;AAEtE,IAAM,sBAAsB,CAAC,WAA6B;AAAA,EACxD,YAAY;AAAA,UACJ,MAAM,MAAM,QAAQ,WAAW,OAAO,2BAA2B,CAAC;AAAA,UAClE,MAAM,MAAM,QAAQ,WAAW,OAAO,yBAAyB,CAAC;AAAA,EACxE,gBAAgB,QAAQ,aAAa;AAAA,EACrC,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,kBAAkB,CAAC;AAAA,EACrE,WAAW,KAAK,aAAa,OAAO,MAAM,aAAa,IAAI,QAAQ,UAAU,OAAO,aAAa,KAAK,CAAC;AACzG;AAIA,IAAM,gBAAgB,CAAC,WAA6B;AAAA,EAClD,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA;AAAA;AAAA,YAGJ,MAAM,OAAO,aAAa,CAAC;AAAA;AAAA;AAAA,IAGnC,WAAW;AAAA,IACX,WAAW,WAAW,sBAAsB,GAAI;AAAA,EAClD;AAAA,EACA,sBAAsB;AAAA,IACpB,QAAQ;AAAA,MACN,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAUO,IAAM,iBAAiB,CAC5B,OACA,EAAE,WAAW,cAAc,eAAe,SAAS,MAAM,OAC1C;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM,QAAQ,SAAS,SAAS,QAAQ,KAAK,IAAI,MAAM,QAAQ,KAAK;AAAA,IACpE,iBAAiB,SAAS;AAAA,EAC5B;AAAA,EACA,GAAI,WAAW;AAAA,IACb,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,GAAI,gBAAgB,oBAAoB,KAAK,IAAI,CAAC;AAAA,EAClD,GAAI,UAAU,cAAc,KAAK,IAAI,CAAC;AAAA,EACtC,GAAG;AACL;","names":[]}

package/dist/chunk-Q4KFGRBV.js

@@ -0,0 +1,124 @@
+import {
+  SaveViewModal
+} from "./chunk-MAUZCOBB.js";
+import {
+  ManageViewsDialog
+} from "./chunk-QYUB2RFN.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  SavedViewsMenu
+} from "./chunk-IBWVEARQ.js";
+import {
+  Alert
+} from "./chunk-Z2EOT77M.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-Q4KFGRBV.js.map

package/dist/chunk-QAP3FW33.js

@@ -0,0 +1,240 @@
+import {
+  resolveScrollAreaProps
+} from "./chunk-RHIDWUK7.js";
+import {
+  ScrollViewport
+} from "./chunk-T3WHW7ZC.js";
+import {
+  ScrollAreaContent
+} from "./chunk-4OEKIFBC.js";
+
+// src/components/layout/ScrollArea/ScrollArea.tsx
+import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Fab from "@mui/material/Fab/index.js";
+import Zoom from "@mui/material/Zoom/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useObservedScrollRef = ({
+  externalScrollRef,
+  onResize
+}) => {
+  const internalScrollRef = useRef(null);
+  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!internalScrollRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        setContainerDimensions({ width, height });
+        onResize?.({ width, height });
+      }
+    });
+    resizeObserver.observe(internalScrollRef.current);
+    return () => resizeObserver.disconnect();
+  }, [onResize]);
+  const setScrollRef = useCallback(
+    (node) => {
+      internalScrollRef.current = node;
+      if (externalScrollRef) {
+        externalScrollRef.current = node;
+      }
+    },
+    [externalScrollRef]
+  );
+  return { scrollRef: internalScrollRef, setScrollRef, containerDimensions };
+};
+var useAutoHide = ({
+  autoHide,
+  alwaysShowScrollbar,
+  autoHideDelay
+}) => {
+  const [isScrolling, setIsScrolling] = useState(false);
+  const timeoutRef = useRef(void 0);
+  const noteScroll = useCallback(() => {
+    if (!autoHide || alwaysShowScrollbar) return;
+    setIsScrolling(true);
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(() => setIsScrolling(false), autoHideDelay);
+  }, [autoHide, alwaysShowScrollbar, autoHideDelay]);
+  useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+  return { isScrolling, noteScroll };
+};
+var useScrollArea = (props) => {
+  const {
+    disabled,
+    onScroll,
+    onResize,
+    externalScrollRef,
+    autoHide,
+    autoHideDelay,
+    alwaysShowScrollbar,
+    scrollToTopButton,
+    scrollToTopThreshold,
+    smoothScroll
+  } = props;
+  const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({
+    externalScrollRef,
+    onResize
+  });
+  const [showScrollToTop, setShowScrollToTop] = useState(false);
+  const { isScrolling, noteScroll } = useAutoHide({
+    autoHide,
+    alwaysShowScrollbar,
+    autoHideDelay
+  });
+  const handleScroll = useCallback(
+    (event) => {
+      if (disabled) return;
+      noteScroll();
+      if (scrollToTopButton && scrollRef.current) {
+        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);
+      }
+      onScroll?.(event);
+    },
+    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef]
+  );
+  const scrollToTop = useCallback(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? "smooth" : "auto" });
+  }, [smoothScroll, scrollRef]);
+  return {
+    scrollRef,
+    setScrollRef,
+    isScrolling,
+    showScrollToTop,
+    containerDimensions,
+    handleScroll,
+    scrollToTop
+  };
+};
+var LoadingOverlay = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 10
+    },
+    children: /* @__PURE__ */ jsx(CircularProgress, {})
+  }
+);
+var ScrollToTopFab = ({
+  visible,
+  glass,
+  scrollToTopLabel,
+  onClick
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Zoom, { in: visible, children: /* @__PURE__ */ jsx(
+    Fab,
+    {
+      size: "small",
+      "aria-label": scrollToTopLabel,
+      onClick,
+      sx: {
+        position: "absolute",
+        bottom: 16,
+        right: 16,
+        zIndex: 1,
+        backgroundColor: glass ? alpha(theme.palette.primary.main, 0.2) : theme.palette.primary.main,
+        backdropFilter: glass ? "blur(10px)" : "none",
+        "&:hover": {
+          backgroundColor: glass ? alpha(theme.palette.primary.main, 0.3) : theme.palette.primary.dark
+        }
+      },
+      children: /* @__PURE__ */ jsx(KeyboardArrowUp, {})
+    }
+  ) });
+};
+var ScrollArea = (componentProps) => {
+  const resolved = resolveScrollAreaProps(componentProps);
+  const {
+    regionLabel,
+    scrollToTopLabel,
+    children,
+    width,
+    height,
+    maxHeight,
+    maxWidth,
+    orientation: _orientation,
+    scrollbarSize: _scrollbarSize,
+    autoHide,
+    autoHideDelay: _autoHideDelay,
+    smoothScroll: _smoothScroll,
+    variant,
+    onScroll: _onScroll,
+    scrollToTopButton,
+    scrollToTopThreshold: _scrollToTopThreshold,
+    scrollbarColor: _scrollbarColor,
+    scrollbarTrackColor: _scrollbarTrackColor,
+    contentPadding: _contentPadding,
+    alwaysShowScrollbar,
+    disabled,
+    loading,
+    emptyContent,
+    testId,
+    scrollRef: externalScrollRef,
+    onResize: _onResize,
+    sx,
+    ...props
+  } = resolved;
+  const {
+    scrollRef,
+    setScrollRef,
+    isScrolling,
+    showScrollToTop,
+    containerDimensions,
+    handleScroll,
+    scrollToTop
+  } = useScrollArea({ ...resolved, externalScrollRef });
+  const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testId,
+      sx: { position: "relative", width, height, maxHeight, maxWidth, ...sx },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollViewport,
+          {
+            ...resolved,
+            regionLabel,
+            shouldShowScrollbar,
+            setScrollRef,
+            onScroll: handleScroll,
+            children: /* @__PURE__ */ jsx(
+              ScrollAreaContent,
+              {
+                emptyContent,
+                scrollRef,
+                containerWidth: containerDimensions.width,
+                children
+              }
+            )
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(LoadingOverlay, {}),
+        scrollToTopButton && scrollToTopLabel && !disabled && !loading && /* @__PURE__ */ jsx(
+          ScrollToTopFab,
+          {
+            scrollToTopLabel,
+            visible: showScrollToTop,
+            glass: variant === "glass",
+            onClick: scrollToTop
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  ScrollArea
+};
+//# sourceMappingURL=chunk-QAP3FW33.js.map

package/dist/chunk-QG73YT6D.js

@@ -0,0 +1,82 @@
+import {
+  configureTypeScriptDefaults,
+  registerEditorThemes,
+  registerSaveShortcut,
+  resolveEditorTheme,
+  scheduleAutoFormat
+} from "./chunk-HD6ZNARS.js";
+
+// src/components/form/CodeEditor/CodeEditor.hooks.ts
+import { useTheme } from "@mui/material/styles/index.js";
+import React, { useEffect, useRef } from "react";
+var COPIED_FEEDBACK_MS = 2e3;
+var useFullscreen = () => {
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleEsc = (event) => {
+      if (event.key === "Escape") setIsFullscreen(false);
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [isFullscreen]);
+  return { isFullscreen, toggleFullscreen: () => setIsFullscreen((prev) => !prev) };
+};
+var useCodeEditor = ({
+  themeProp,
+  wordWrap,
+  autoFormat,
+  readOnly,
+  onSave
+}) => {
+  const theme = useTheme();
+  const editorRef = useRef(null);
+  const monacoRef = useRef(null);
+  const { isFullscreen, toggleFullscreen } = useFullscreen();
+  const [isWrapped, setIsWrapped] = React.useState(wordWrap);
+  const [isCopied, setIsCopied] = React.useState(false);
+  const editorTheme = React.useMemo(
+    () => resolveEditorTheme(themeProp, theme.palette.mode),
+    [themeProp, theme.palette.mode]
+  );
+  const handleEditorDidMount = (mountedEditor, monaco) => {
+    editorRef.current = mountedEditor;
+    monacoRef.current = monaco;
+    registerEditorThemes(monaco, theme);
+    configureTypeScriptDefaults(monaco);
+    scheduleAutoFormat(mountedEditor, autoFormat && !readOnly);
+    registerSaveShortcut(mountedEditor, monaco, onSave);
+  };
+  const handleCopy = async () => {
+    if (!editorRef.current || !navigator.clipboard?.writeText) return;
+    try {
+      await navigator.clipboard.writeText(editorRef.current.getValue());
+      setIsCopied(true);
+      window.setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MS);
+    } catch {
+    }
+  };
+  const handleWrapToggle = () => {
+    setIsWrapped(!isWrapped);
+    editorRef.current?.updateOptions({ wordWrap: !isWrapped ? "on" : "off" });
+  };
+  const handleFormat = () => {
+    if (!readOnly) editorRef.current?.getAction("editor.action.formatDocument")?.run();
+  };
+  return {
+    editorTheme,
+    isFullscreen,
+    isWrapped,
+    isCopied,
+    handleEditorDidMount,
+    handleCopy,
+    handleFullscreenToggle: toggleFullscreen,
+    handleWrapToggle,
+    handleFormat
+  };
+};
+
+export {
+  useCodeEditor
+};
+//# sourceMappingURL=chunk-QG73YT6D.js.map

package/dist/chunk-QG73YT6D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CodeEditor/CodeEditor.hooks.ts"],"sourcesContent":["import type { Monaco } from '@monaco-editor/react';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { editor } from 'monaco-editor';\nimport React, { useEffect, useRef } from 'react';\n\nimport {\n  configureTypeScriptDefaults,\n  registerEditorThemes,\n  registerSaveShortcut,\n  resolveEditorTheme,\n  scheduleAutoFormat,\n} from './CodeEditor.monaco';\n\nconst COPIED_FEEDBACK_MS = 2000;\n\n// Escape leaves fullscreen, so the flag and its listener belong together.\nconst useFullscreen = () => {\n  const [isFullscreen, setIsFullscreen] = React.useState(false);\n\n  useEffect(() => {\n    if (!isFullscreen) return;\n\n    const handleEsc = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') setIsFullscreen(false);\n    };\n\n    window.addEventListener('keydown', handleEsc);\n    return () => window.removeEventListener('keydown', handleEsc);\n  }, [isFullscreen]);\n\n  return { isFullscreen, toggleFullscreen: () => setIsFullscreen((prev) => !prev) };\n};\n\n// All of the editor's own state: the Monaco handles, the three toggles, and the\n// handlers that drive them.\nexport const useCodeEditor = ({\n  themeProp,\n  wordWrap,\n  autoFormat,\n  readOnly,\n  onSave,\n}: {\n  themeProp: string;\n  wordWrap: boolean;\n  autoFormat: boolean;\n  readOnly: boolean;\n  onSave?: (value: string) => void;\n}) => {\n  const theme = useTheme();\n  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);\n  const monacoRef = useRef<Monaco | null>(null);\n  const { isFullscreen, toggleFullscreen } = useFullscreen();\n  const [isWrapped, setIsWrapped] = React.useState(wordWrap);\n  const [isCopied, setIsCopied] = React.useState(false);\n\n  const editorTheme = React.useMemo(\n    () => resolveEditorTheme(themeProp, theme.palette.mode),\n    [themeProp, theme.palette.mode],\n  );\n\n  const handleEditorDidMount = (mountedEditor: editor.IStandaloneCodeEditor, monaco: Monaco) => {\n    editorRef.current = mountedEditor;\n    monacoRef.current = monaco;\n\n    registerEditorThemes(monaco, theme);\n    configureTypeScriptDefaults(monaco);\n    scheduleAutoFormat(mountedEditor, autoFormat && !readOnly);\n    registerSaveShortcut(mountedEditor, monaco, onSave);\n  };\n\n  // No-ops where the clipboard API is unavailable, as in jsdom.\n  const handleCopy = async () => {\n    if (!editorRef.current || !navigator.clipboard?.writeText) return;\n\n    try {\n      await navigator.clipboard.writeText(editorRef.current.getValue());\n      setIsCopied(true);\n      window.setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MS);\n    } catch {\n      // Silently handle clipboard errors in test environments\n    }\n  };\n\n  const handleWrapToggle = () => {\n    setIsWrapped(!isWrapped);\n    editorRef.current?.updateOptions({ wordWrap: !isWrapped ? 'on' : 'off' });\n  };\n\n  const handleFormat = () => {\n    if (!readOnly) editorRef.current?.getAction('editor.action.formatDocument')?.run();\n  };\n\n  return {\n    editorTheme,\n    isFullscreen,\n    isWrapped,\n    isCopied,\n    handleEditorDidMount,\n    handleCopy,\n    handleFullscreenToggle: toggleFullscreen,\n    handleWrapToggle,\n    handleFormat,\n  };\n};\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB;AAEzB,OAAO,SAAS,WAAW,cAAc;AAUzC,IAAM,qBAAqB;AAG3B,IAAM,gBAAgB,MAAM;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AAEnB,UAAM,YAAY,CAAC,UAAoC;AACrD,UAAI,MAAM,QAAQ,SAAU,iBAAgB,KAAK;AAAA,IACnD;AAEA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,EAAE,cAAc,kBAAkB,MAAM,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE;AAClF;AAIO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,YAAY,OAA4C,IAAI;AAClE,QAAM,YAAY,OAAsB,IAAI;AAC5C,QAAM,EAAE,cAAc,iBAAiB,IAAI,cAAc;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,QAAQ;AACzD,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,cAAc,MAAM;AAAA,IACxB,MAAM,mBAAmB,WAAW,MAAM,QAAQ,IAAI;AAAA,IACtD,CAAC,WAAW,MAAM,QAAQ,IAAI;AAAA,EAChC;AAEA,QAAM,uBAAuB,CAAC,eAA6C,WAAmB;AAC5F,cAAU,UAAU;AACpB,cAAU,UAAU;AAEpB,yBAAqB,QAAQ,KAAK;AAClC,gCAA4B,MAAM;AAClC,uBAAmB,eAAe,cAAc,CAAC,QAAQ;AACzD,yBAAqB,eAAe,QAAQ,MAAM;AAAA,EACpD;AAGA,QAAM,aAAa,YAAY;AAC7B,QAAI,CAAC,UAAU,WAAW,CAAC,UAAU,WAAW,UAAW;AAE3D,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,UAAU,QAAQ,SAAS,CAAC;AAChE,kBAAY,IAAI;AAChB,aAAO,WAAW,MAAM,YAAY,KAAK,GAAG,kBAAkB;AAAA,IAChE,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,iBAAa,CAAC,SAAS;AACvB,cAAU,SAAS,cAAc,EAAE,UAAU,CAAC,YAAY,OAAO,MAAM,CAAC;AAAA,EAC1E;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,CAAC,SAAU,WAAU,SAAS,UAAU,8BAA8B,GAAG,IAAI;AAAA,EACnF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-QJ7I5C4D.js

@@ -0,0 +1,34 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Button
+} from "./chunk-3EDZU2H7.js";
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+
+// src/components/form/total-form/SubmitButton.tsx
+import { jsx } from "react/jsx-runtime";
+function SubmitButton({
+  children,
+  dataTestId = "total-form-submit"
+}) {
+  const { submitting } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      dataTestId,
+      loading: submitting,
+      disabled: submitting,
+      sx: { height: fieldHeight, px: 2, fontSize: "1rem", flexShrink: 0, whiteSpace: "nowrap" },
+      children
+    }
+  );
+}
+
+export {
+  SubmitButton
+};
+//# sourceMappingURL=chunk-QJ7I5C4D.js.map