@omnitron-dev/prism 0.2.0 → 0.3.1

package/dist/{chunk-A2Z7NVGL.js → chunk-LSPFFEJT.js}

@@ -1,20 +1,22 @@
-import { PRESET_NAMES, PRESET_DISPLAY_NAMES } from './chunk-MEFT6XPH.js';
-import { SearchInput } from './chunk-KTCWPGON.js';
-import { useBoolean } from './chunk-HO2GKTWJ.js';
-import { useSettingsStore } from './chunk-DDY7TLUI.js';
-import { forwardRef, useMemo, useState, useCallback, createContext, lazy, useTransition, useRef, useEffect, useId, Children, Fragment as Fragment$1, useContext, isValidElement, Component, Suspense } from 'react';
+import { contentClasses, ContentRoot, TipTapRenderer } from './chunk-GUGTDURV.js';
+import { PRESET_NAMES, PRESET_DISPLAY_NAMES } from './chunk-KQ67XB6T.js';
+import { useSettingsStore } from './chunk-XIXSSI3B.js';
+import { SearchInput } from './chunk-GMIE6III.js';
+import { useBoolean } from './chunk-BRDWQVRT.js';
+import { FilterIcon, EmptyIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ZoomOutIcon, ZoomInIcon, FullscreenExitIcon, FullscreenIcon, DownloadIcon, ShareIcon, ChevronLeftIcon, PlayIcon, ChevronUpIcon } from './chunk-PGHEP4JD.js';
+import { createContext, lazy, useCallback, useState, useMemo, useTransition, useRef, useEffect, Fragment as Fragment$1, useId, Children, useContext, isValidElement, Suspense } from 'react';
 import Stack from '@mui/material/Stack';
 import TextField2 from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
 import MenuItem from '@mui/material/MenuItem';
-import Box20 from '@mui/material/Box';
+import Box19 from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography5 from '@mui/material/Typography';
 import Badge from '@mui/material/Badge';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import dayjs from 'dayjs';
 import InputAdornment from '@mui/material/InputAdornment';
-import IconButton3 from '@mui/material/IconButton';
+import IconButton4 from '@mui/material/IconButton';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogActions from '@mui/material/DialogActions';
@@ -34,26 +36,27 @@ import TableSortLabel from '@mui/material/TableSortLabel';
 import TablePagination from '@mui/material/TablePagination';
 import Paper from '@mui/material/Paper';
 import Checkbox from '@mui/material/Checkbox';
-import Skeleton from '@mui/material/Skeleton';
+import Skeleton3 from '@mui/material/Skeleton';
 import Autocomplete from '@mui/material/Autocomplete';
 import { LazyMotion, domMax, useMotionValue, useAnimationFrame, useTransform, useMotionTemplate, m } from 'framer-motion';
 import MuiAvatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
-import MuiCard from '@mui/material/Card';
+import Card2 from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
 import CardActions from '@mui/material/CardActions';
 import DialogContentText from '@mui/material/DialogContentText';
+import CardActionArea from '@mui/material/CardActionArea';
+import Tooltip2 from '@mui/material/Tooltip';
 import Grid from '@mui/material/Grid';
 import Portal from '@mui/material/Portal';
 import MuiLinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
-import List2 from '@mui/material/List';
+import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert from '@mui/material/Alert';
-import CloseIcon3 from '@mui/icons-material/Close';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import Divider3 from '@mui/material/Divider';
 import MuiTabs from '@mui/material/Tabs';
@@ -61,43 +64,31 @@ import MuiTab from '@mui/material/Tab';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MuiMenu from '@mui/material/Menu';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import NProgress from 'nprogress';
-import Collapse from '@mui/material/Collapse';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import Drawer from '@mui/material/Drawer';
-import Tooltip from '@mui/material/Tooltip';
 import Switch from '@mui/material/Switch';
 import Slider from '@mui/material/Slider';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import AlertTitle from '@mui/material/AlertTitle';
+import { useForkRef } from '@mui/material/utils';
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import SvgIcon from '@mui/material/SvgIcon';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MuiStepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import StepContent from '@mui/material/StepContent';
 import { clsx } from 'clsx';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
-import DownloadIcon from '@mui/icons-material/Download';
-import ShareIcon from '@mui/icons-material/Share';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ButtonBase from '@mui/material/ButtonBase';
+import Collapse from '@mui/material/Collapse';
 import Popover from '@mui/material/Popover';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import rehypeHighlight from 'rehype-highlight';
 import remarkGfm from 'remark-gfm';
 import TurndownService from 'turndown';
@@ -129,7 +120,7 @@ function DateRangePicker({
   const txTitle = translations?.title ?? title ?? "Select date range";
   const txStart = translations?.startDate ?? "Start date";
   const txEnd = translations?.endDate ?? "End date";
-  const txErrorRange = translations?.errorRange ?? "End date must be later than start date";
+  const txErrorRange = translations?.errorRange ?? "End date cannot be earlier than start date";
   const txCancel = translations?.cancel ?? "Cancel";
   const txApply = translations?.apply ?? "Apply";
   const mdUp = useMediaQuery((theme) => theme.breakpoints.up("md"));
@@ -277,6 +268,7 @@ function DateRangeInput({
   const txPlaceholder = translations?.placeholder ?? "Select dates...";
   const txFrom = translations?.from ?? "From";
   const txTo = translations?.to ?? "To";
+  const txClear = translations?.clear ?? "Clear date range";
   const displayLabel = useMemo(
     () => formatLabel(startDate, endDate, txFrom, txTo),
     [startDate, endDate, txFrom, txTo]
@@ -317,7 +309,7 @@ function DateRangeInput({
             sx: { cursor: "pointer" },
             startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { color: "text.disabled" }, children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
             ...hasValue && {
-              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton3, { size: "small", onClick: handleClear, sx: { p: 0.25 }, children: /* @__PURE__ */ jsx(ClearIcon, {}) }) })
+              endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton4, { size: "small", onClick: handleClear, "aria-label": txClear, sx: { p: 0.25 }, children: /* @__PURE__ */ jsx(ClearIcon, {}) }) })
             }
           },
           inputLabel: { shrink: true }
@@ -356,22 +348,6 @@ function DateRangeInput({
     )
   ] });
 }
-function FilterIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
-    }
-  );
-}
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -413,6 +389,12 @@ function FilterToolbar({
       });
     }
   }, [debouncedSearch, searchFilter?.key, onChange, values]);
+  const searchValue = values[searchFilter?.key ?? "search"] ?? "";
+  useEffect(() => {
+    if (searchValue === prevDebouncedRef.current) return;
+    prevDebouncedRef.current = searchValue;
+    setLocalSearch(searchValue);
+  }, [searchValue]);
   const activeCount = useMemo(
     () => filters.filter((f) => f.type !== "search" && isFilterActive(f, values[f.key])).length,
     [filters, values]
@@ -476,16 +458,23 @@ function FilterToolbar({
               size: "small",
               value: values[key] ?? "",
               onChange: (e) => handleChange(key, e.target.value),
-              slotProps: { select: { displayEmpty: true } },
+              slotProps: { select: { displayEmpty: true, "aria-label": label } },
               sx: {
                 minWidth: width ?? 150,
                 "& .MuiOutlinedInput-root": { borderRadius: 1 },
                 "& .MuiOutlinedInput-notchedOutline legend": { width: 0 }
               },
               children: [
-                /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: {
-                  color: "text.secondary"
-                }, children: label }) }),
+                /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx(
+                  Typography5,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: "text.secondary"
+                    },
+                    children: label
+                  }
+                ) }),
                 options?.map((opt) => /* @__PURE__ */ jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))
               ]
             },
@@ -504,12 +493,23 @@ function FilterToolbar({
                 select: {
                   multiple: true,
                   displayEmpty: true,
+                  // Same reason as the single select above: the label lives in
+                  // `renderValue` as placeholder text, leaving the control
+                  // without an accessible name.
+                  "aria-label": label,
                   renderValue: (selected) => {
                     const sel = selected;
                     if (sel.length === 0) {
-                      return /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: {
-                        color: "text.secondary"
-                      }, children: label });
+                      return /* @__PURE__ */ jsx(
+                        Typography5,
+                        {
+                          variant: "body2",
+                          sx: {
+                            color: "text.secondary"
+                          },
+                          children: label
+                        }
+                      );
                     }
                     return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, sx: { overflow: "hidden" }, children: sel.map((val) => {
                       const opt = options?.find((o) => o.value === val);
@@ -574,43 +574,52 @@ function FilterToolbar({
             key
           );
         case "number-range":
-          return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: {
-            alignItems: "center"
-          }, children: [
-            /* @__PURE__ */ jsx(
-              TextField2,
-              {
-                type: "number",
-                size: "small",
-                label: `${label} min`,
-                value: values[`${key}Min`] ?? "",
-                onChange: (e) => handleChange(`${key}Min`, e.target.value),
-                sx: { minWidth: width ?? 100 }
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Typography5,
-              {
-                variant: "body2",
-                sx: {
-                  color: "text.disabled",
-                  px: 0.5
-                },
-                children: "\u2014"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TextField2,
-              {
-                type: "number",
-                size: "small",
-                label: `${label} max`,
-                value: values[`${key}Max`] ?? "",
-                onChange: (e) => handleChange(`${key}Max`, e.target.value),
-                sx: { minWidth: width ?? 100 }
-              }
-            )
-          ] }, key);
+          return /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  TextField2,
+                  {
+                    type: "number",
+                    size: "small",
+                    label: `${label} min`,
+                    value: values[`${key}Min`] ?? "",
+                    onChange: (e) => handleChange(`${key}Min`, e.target.value),
+                    sx: { minWidth: width ?? 100 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography5,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: "text.disabled",
+                      px: 0.5
+                    },
+                    children: "\u2014"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextField2,
+                  {
+                    type: "number",
+                    size: "small",
+                    label: `${label} max`,
+                    value: values[`${key}Max`] ?? "",
+                    onChange: (e) => handleChange(`${key}Max`, e.target.value),
+                    sx: { minWidth: width ?? 100 }
+                  }
+                )
+              ]
+            },
+            key
+          );
         default:
           return null;
       }
@@ -650,7 +659,7 @@ function FilterToolbar({
                     ml: "auto"
                   },
                   children: [
-                    activeCount > 0 && /* @__PURE__ */ jsx(Badge, { badgeContent: activeCount, color: "primary", sx: { "& .MuiBadge-badge": { fontSize: "0.65rem" } }, children: /* @__PURE__ */ jsx(Box20, { sx: { color: "text.secondary", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(FilterIcon, {}) }) }),
+                    activeCount > 0 && /* @__PURE__ */ jsx(Badge, { badgeContent: activeCount, color: "primary", sx: { "& .MuiBadge-badge": { fontSize: "0.65rem" } }, children: /* @__PURE__ */ jsx(Box19, { sx: { color: "text.secondary", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(FilterIcon, {}) }) }),
                     hasAnyActive && /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -708,7 +717,11 @@ var StyledTableRow = styled(TableRow)(({ theme }) => ({
   transition: theme.transitions.create("background-color", {
     duration: theme.transitions.duration.shortest
   }),
-  "&:nth-of-type(even)": {
+  // `:nth-child(even)` for zebra-striping — table rows are homogeneous
+  // siblings, so child-position is equivalent to of-type but doesn't
+  // assume the rendered tag never changes (e.g. a row replaced by a
+  // skeleton placeholder still alternates correctly).
+  "&:nth-child(even)": {
     backgroundColor: alpha(theme.palette.grey[500], 0.02)
   },
   "&:hover": {
@@ -719,32 +732,12 @@ var StyledTableRow = styled(TableRow)(({ theme }) => ({
   }
 }));
 var EMPTY_SELECTION = /* @__PURE__ */ new Set();
-function EmptyIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "48",
-      height: "48",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      opacity: "0.3",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" }),
-        /* @__PURE__ */ jsx("line", { x1: "9", y1: "15", x2: "15", y2: "15" })
-      ]
-    }
-  );
-}
 function AdminDataTable({
   columns,
   data,
   total,
   loading = false,
+  loadingRows = 5,
   page,
   pageSize,
   onPageChange,
@@ -753,12 +746,17 @@ function AdminDataTable({
   sortOrder = "asc",
   onSort,
   emptyMessage = "No data found",
+  loadError = null,
+  loadErrorLabels,
   rowKey,
   onRowClick,
+  rowSx,
+  renderExpanded,
   pageSizeOptions = [10, 25, 50, 100],
   stickyHeader = false,
   dense = false,
   maxHeight,
+  paginationLabels,
   sx,
   selectable = false,
   selectedKeys,
@@ -770,9 +768,14 @@ function AdminDataTable({
       if (rowKey) return rowKey(row);
       const record = row;
       if (record["id"] !== void 0) return String(record["id"]);
+      if (selectable && process.env["NODE_ENV"] !== "production") {
+        console.error(
+          "[AdminDataTable] `selectable` is on but rows have no stable key: pass `rowKey`, or give each row an `id`. Index-based keys make the selection positional, so sorting or paging silently re-targets it."
+        );
+      }
       return String(index);
     },
-    [rowKey]
+    [rowKey, selectable]
   );
   const selection = selectedKeys ?? EMPTY_SELECTION;
   const pageRowKeys = useMemo(
@@ -820,11 +823,12 @@ function AdminDataTable({
     },
     [onPageSizeChange, onPageChange]
   );
+  const skeletonRowCount = Math.max(1, Math.min(pageSize, loadingRows));
   const skeletonRows = useMemo(
-    () => Array.from({ length: pageSize }, (_, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-      selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: 18, height: 18, sx: { borderRadius: 0.5 } }) }),
+    () => Array.from({ length: skeletonRowCount }, (_, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(Skeleton3, { variant: "rectangular", width: 18, height: 18, sx: { borderRadius: 0.5 } }) }),
       columns.map((col) => /* @__PURE__ */ jsx(TableCell, { align: col.align ?? "left", children: /* @__PURE__ */ jsx(
-        Skeleton,
+        Skeleton3,
         {
           variant: "text",
           width: col.align === "right" ? "60%" : "80%",
@@ -835,7 +839,7 @@ function AdminDataTable({
         }
       ) }, col.key))
     ] }, `skeleton-${i}`)),
-    [pageSize, columns, selectable]
+    [skeletonRowCount, columns, selectable]
   );
   const showBulkBar = selectable && selection.size > 0 && !!bulkActions;
   if (!loading && data.length === 0) {
@@ -845,7 +849,7 @@ function AdminDataTable({
         columns.map((col) => /* @__PURE__ */ jsx(TableCell, { align: col.align ?? "left", style: { width: col.width }, children: col.header }, col.key))
       ] }) }) }),
       /* @__PURE__ */ jsxs(
-        Box20,
+        Box19,
         {
           sx: {
             py: 6,
@@ -856,15 +860,41 @@ function AdminDataTable({
           },
           children: [
             /* @__PURE__ */ jsx(EmptyIcon, {}),
-            /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: {
-              color: "text.disabled"
-            }, children: emptyMessage })
+            /* @__PURE__ */ jsx(
+              Typography5,
+              {
+                variant: "body2",
+                sx: { color: loadError ? "text.secondary" : "text.disabled" },
+                children: loadError ? loadErrorLabels?.empty ?? "Could not load this data" : emptyMessage
+              }
+            ),
+            loadError && /* @__PURE__ */ jsx(Typography5, { variant: "caption", sx: { color: "text.disabled", maxWidth: 420, textAlign: "center" }, children: loadError })
           ]
         }
       )
     ] });
   }
   return /* @__PURE__ */ jsxs(StyledTableContainer, { sx: { maxHeight, ...sx }, children: [
+    loadError && /* @__PURE__ */ jsxs(
+      Box19,
+      {
+        role: "status",
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          px: 2,
+          py: 1,
+          borderBottom: 1,
+          borderColor: "divider",
+          bgcolor: (theme) => alpha(theme.palette.warning.main, 0.12)
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: { color: "warning.dark", fontWeight: 600 }, children: loadErrorLabels?.partial ?? "Some of this data could not be loaded" }),
+          /* @__PURE__ */ jsx(Typography5, { variant: "caption", sx: { color: "text.secondary" }, children: loadError })
+        ]
+      }
+    ),
     showBulkBar && /* @__PURE__ */ jsxs(
       Stack,
       {
@@ -878,13 +908,20 @@ function AdminDataTable({
           bgcolor: (theme) => alpha(theme.palette.primary.main, 0.06)
         },
         children: [
-          /* @__PURE__ */ jsxs(Typography5, { variant: "body2", sx: {
-            fontWeight: 600
-          }, children: [
-            selection.size,
-            " selected"
-          ] }),
-          /* @__PURE__ */ jsx(Box20, { sx: { flex: 1 } }),
+          /* @__PURE__ */ jsxs(
+            Typography5,
+            {
+              variant: "body2",
+              sx: {
+                fontWeight: 600
+              },
+              children: [
+                selection.size,
+                " selected"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Box19, { sx: { flex: 1 } }),
           bulkActions(selection)
         ]
       }
@@ -926,13 +963,16 @@ function AdminDataTable({
       /* @__PURE__ */ jsx(TableBody, { children: loading ? skeletonRows : data.map((row, index) => {
         const key = getRowKey(row, index);
         const isSelected = selectable && selection.has(key);
-        return /* @__PURE__ */ jsxs(
+        const body = /* @__PURE__ */ jsxs(
           StyledTableRow,
           {
             hover: true,
             selected: isSelected,
             onClick: onRowClick ? () => onRowClick(row) : void 0,
-            sx: { cursor: onRowClick ? "pointer" : "default" },
+            sx: {
+              cursor: onRowClick ? "pointer" : "default",
+              ...rowSx?.(row, index)
+            },
             children: [
               selectable && /* @__PURE__ */ jsx(
                 TableCell,
@@ -957,6 +997,12 @@ function AdminDataTable({
           },
           key
         );
+        const detail = renderExpanded?.(row, index);
+        if (detail == null) return body;
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          body,
+          /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length + (selectable ? 1 : 0), sx: { py: 0, borderBottom: 0 }, children: detail }) })
+        ] }, `${key}-group`);
       }) })
     ] }) }),
     /* @__PURE__ */ jsx(
@@ -969,6 +1015,8 @@ function AdminDataTable({
         rowsPerPageOptions: pageSizeOptions,
         onPageChange: handlePageChange,
         onRowsPerPageChange: handlePageSizeChange,
+        ...paginationLabels?.rowsPerPage != null && { labelRowsPerPage: paginationLabels.rowsPerPage },
+        ...paginationLabels?.displayedRows != null && { labelDisplayedRows: paginationLabels.displayedRows },
         sx: {
           borderTop: (theme) => `1px solid ${theme.palette.divider}`,
           "& .MuiTablePagination-displayedRows": {
@@ -1011,41 +1059,166 @@ var DEFAULT_COLOR_MAP = {
   new: "info",
   open: "info"
 };
-function StatusChip({ status, colorMap, size = "small", sx }) {
+function StatusChip({ status, label, colorMap, size = "small", sx, ref, ...other }) {
   const normalizedStatus = status.toLowerCase();
   const mergedMap = colorMap ? { ...DEFAULT_COLOR_MAP, ...colorMap } : DEFAULT_COLOR_MAP;
-  const color = mergedMap[normalizedStatus] ?? "default";
-  const displayLabel = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+  const mapped = Object.hasOwn(mergedMap, normalizedStatus) ? mergedMap[normalizedStatus] : void 0;
+  const color = mapped ?? "default";
+  const displayLabel = label ?? status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
   return /* @__PURE__ */ jsx(
     Chip,
     {
+      ref,
+      ...other,
       label: displayLabel,
       size,
-      sx: {
-        height: size === "small" ? 22 : 28,
-        fontSize: size === "small" ? "0.7rem" : "0.775rem",
-        fontWeight: 600,
-        borderRadius: 0.75,
-        letterSpacing: "0.01em",
-        ...color !== "default" && {
-          color: (theme) => theme.palette[color].main,
-          bgcolor: (theme) => alpha(theme.palette[color].main, 0.1),
-          border: (theme) => `1px solid ${alpha(theme.palette[color].main, 0.2)}`
-        },
-        ...color === "default" && {
-          color: "text.secondary",
-          bgcolor: (theme) => alpha(theme.palette.grey[500], 0.08),
-          border: (theme) => `1px solid ${alpha(theme.palette.grey[500], 0.16)}`
+      sx: [
+        {
+          height: size === "small" ? 22 : 28,
+          fontSize: size === "small" ? "0.7rem" : "0.775rem",
+          fontWeight: 600,
+          borderRadius: 0.75,
+          letterSpacing: "0.01em",
+          ...color !== "default" && {
+            color: (theme) => theme.palette[color].main,
+            bgcolor: (theme) => alpha(theme.palette[color].main, 0.1),
+            border: (theme) => `1px solid ${alpha(theme.palette[color].main, 0.2)}`
+          },
+          ...color === "default" && {
+            color: "text.secondary",
+            bgcolor: (theme) => alpha(theme.palette.grey[500], 0.08),
+            border: (theme) => `1px solid ${alpha(theme.palette.grey[500], 0.16)}`
+          }
         },
-        ...sx
-      }
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ]
     }
   );
 }
+
+// src/utils/format-crypto.ts
+var COIN_DISPLAY_DECIMALS = Object.freeze(
+  // Prototype-free: a plain literal answers `COIN_DISPLAY_DECIMALS['constructor']`
+  // with a function, which `?? FALLBACK_DECIMALS` accepts as a precision. That
+  // produced `toFixed(NaN)` — silently formatting with zero decimals instead
+  // of eight, for any coin code that collides with an Object.prototype key.
+  Object.assign(/* @__PURE__ */ Object.create(null), { btc: 8, xmr: 8 })
+);
+var COIN_WIRE_DECIMALS = Object.freeze(
+  Object.assign(/* @__PURE__ */ Object.create(null), { btc: 8, xmr: 12 })
+);
+var FALLBACK_DECIMALS = 8;
+var FALLBACK_WIRE_DECIMALS = 12;
+var DECIMAL = /^([+-]?)(\d*)(?:\.(\d*))?$/;
+function getCoinDecimals(coin) {
+  const decimals = COIN_DISPLAY_DECIMALS[coin.toLowerCase()];
+  return typeof decimals === "number" ? decimals : FALLBACK_DECIMALS;
+}
+function getCoinWireDecimals(coin) {
+  const decimals = COIN_WIRE_DECIMALS[coin.toLowerCase()];
+  return typeof decimals === "number" ? decimals : FALLBACK_WIRE_DECIMALS;
+}
+function formatDecimalString(raw, decimals, rounding = "down") {
+  const scaled = toScaledInteger(raw, decimals, rounding);
+  return scaled === null ? null : fromScaledInteger(scaled, decimals);
+}
+function toScaledInteger(raw, decimals, rounding = "half-up") {
+  const match = DECIMAL.exec(raw.trim());
+  if (!match) return null;
+  const [, sign = "", intPart = "", fracPart = ""] = match;
+  if (intPart === "" && fracPart === "") return null;
+  const digits = `${intPart || "0"}${fracPart.slice(0, decimals).padEnd(decimals, "0")}`;
+  const roundUp = rounding === "half-up" && (fracPart[decimals] ?? "0") >= "5";
+  const magnitude = BigInt(digits) + (roundUp ? 1n : 0n);
+  return sign === "-" ? -magnitude : magnitude;
+}
+function fromScaledInteger(scaled, decimals) {
+  const negative = scaled < 0n;
+  const asString = (negative ? -scaled : scaled).toString().padStart(decimals + 1, "0");
+  const whole = asString.slice(0, asString.length - decimals) || "0";
+  const fraction = decimals > 0 ? asString.slice(asString.length - decimals) : "";
+  const magnitude = decimals > 0 ? `${whole}.${fraction}` : whole;
+  return `${negative && scaled !== 0n ? "-" : ""}${magnitude}`;
+}
+function isNonZeroDecimal(raw) {
+  const match = DECIMAL.exec(raw.trim());
+  if (!match) return false;
+  const [, , intPart = "", fracPart = ""] = match;
+  if (intPart === "" && fracPart === "") return false;
+  return /[1-9]/.test(intPart) || /[1-9]/.test(fracPart);
+}
+function sumDecimalStrings(values, decimals, options) {
+  const rounding = options?.rounding ?? "half-up";
+  let total = 0n;
+  for (const value of values) {
+    if (value === null || value === void 0 || value === "") continue;
+    const scaled = toScaledInteger(
+      typeof value === "number" ? String(value) : value,
+      decimals,
+      rounding
+    );
+    if (scaled !== null) total += scaled;
+  }
+  return fromScaledInteger(total, decimals);
+}
+function subtractDecimalStrings(minuend, subtrahends, decimals, options) {
+  if (minuend === null || minuend === void 0 || minuend === "") return null;
+  const rounding = options?.rounding ?? "half-up";
+  let total = toScaledInteger(
+    typeof minuend === "number" ? String(minuend) : minuend,
+    decimals,
+    rounding
+  );
+  if (total === null) return null;
+  for (const value of subtrahends) {
+    if (value === null || value === void 0 || value === "") continue;
+    const scaled = toScaledInteger(
+      typeof value === "number" ? String(value) : value,
+      decimals,
+      rounding
+    );
+    if (scaled !== null) total -= scaled;
+  }
+  if (options?.clampAtZero && total < 0n) total = 0n;
+  return fromScaledInteger(total, decimals);
+}
+function formatCoinAmount(value, coin, options) {
+  const code = coin.toLowerCase();
+  const symbol = options?.symbol ?? coin.toUpperCase();
+  const withSymbol = options?.withSymbol !== false;
+  const decimals = Math.max(0, options?.precision ?? getCoinDecimals(code));
+  const trim = options?.trim === true;
+  const rounding = options?.rounding ?? "down";
+  const markDust = options?.markDust !== false;
+  const raw = typeof value === "string" ? value.trim() : typeof value === "number" && Number.isFinite(value) ? String(Object.is(value, -0) ? 0 : value) : "";
+  let formatted = raw === "" ? null : formatDecimalString(raw, decimals, rounding);
+  const exact = formatted !== null;
+  if (formatted === null) {
+    let n = typeof value === "number" ? value : Number(raw);
+    if (!Number.isFinite(n)) n = 0;
+    if (Object.is(n, -0)) n = 0;
+    formatted = n.toFixed(decimals);
+  }
+  if (markDust && exact && !/[1-9]/.test(formatted) && isNonZeroDecimal(raw)) {
+    const epsilon = fromScaledInteger(1n, decimals);
+    const below = raw.startsWith("-");
+    return withSymbol ? `${below ? ">" : "<"} ${below ? "-" : ""}${epsilon} ${symbol}` : `${below ? ">" : "<"} ${below ? "-" : ""}${epsilon}`;
+  }
+  if (trim && formatted.includes(".")) {
+    formatted = formatted.replace(/\.?0+$/, "");
+    if (formatted === "" || formatted === "-") formatted = "0";
+  }
+  return withSymbol ? `${formatted} ${symbol}` : formatted;
+}
+function formatCoinAmountList(totals, options) {
+  const sep = options?.separator ?? " \xB7 ";
+  return Object.keys(totals).sort().map((coin) => formatCoinAmount(totals[coin], coin, options)).join(sep);
+}
 function formatAmount(amount, decimals) {
   const num = parseFloat(amount);
   if (Number.isNaN(num)) return amount;
-  const fixed = decimals !== void 0 ? num.toFixed(decimals) : amount;
+  const scaled = decimals !== void 0 ? formatDecimalString(amount, decimals) : null;
+  const fixed = scaled ?? (decimals !== void 0 ? num.toFixed(decimals) : amount);
   const [intPart, decPart] = fixed.split(".");
   const absInt = intPart.replace("-", "");
   const formatted = absInt.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -1326,7 +1499,7 @@ function CountrySelect({
         const isWorldRow = worldwideValue !== void 0 && option.iso2 === worldwideValue;
         const src = isWorldRow ? null : getFlagSrc?.(option.iso2.toLowerCase()) ?? null;
         return /* @__PURE__ */ jsxs(
-          Box20,
+          Box19,
           {
             component: "li",
             ...rest,
@@ -1531,7 +1704,7 @@ function AnimateBorder({ sx, children, duration, slotProps, className, ...other
     }
   );
   return /* @__PURE__ */ jsxs(
-    Box20,
+    Box19,
     {
       dir: "ltr",
       ref: rootRef,
@@ -1589,7 +1762,7 @@ function MovingBorder({ sx, size, isHidden, rx = "30%", ry = "30%", duration = 8
   const x = useTransform(progress, (val) => calculateTransform(val).x);
   const y = useTransform(progress, (val) => calculateTransform(val).y);
   const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
-  return /* @__PURE__ */ jsxs(Box20, { component: "span", sx: [{ textAlign: "initial" }, ...Array.isArray(sx) ? sx : [sx]], ...other, children: [
+  return /* @__PURE__ */ jsxs(Box19, { component: "span", sx: [{ textAlign: "initial" }, ...Array.isArray(sx) ? sx : [sx]], ...other, children: [
     /* @__PURE__ */ jsx(
       "svg",
       {
@@ -1603,7 +1776,7 @@ function MovingBorder({ sx, size, isHidden, rx = "30%", ry = "30%", duration = 8
       }
     ),
     /* @__PURE__ */ jsx(
-      Box20,
+      Box19,
       {
         component: m.span,
         style: { transform },
@@ -1772,7 +1945,7 @@ function AvatarWrapper({
     badge && /* @__PURE__ */ jsx("span", { style: badgeStyle, children: badge })
   ] });
 }
-var Avatar = forwardRef(function Avatar2({ size = "md", shape = "circular", name, src, alt, online, offline, badge, badgeColor, children, sx, ...other }, ref) {
+function Avatar({ size = "md", shape = "circular", name, src, alt, online, offline, badge, badgeColor, children, sx, ref, ...other }) {
   const initials = useMemo(() => {
     if (children) return null;
     return name ? getInitials(name) : null;
@@ -1789,7 +1962,7 @@ var Avatar = forwardRef(function Avatar2({ size = "md", shape = "circular", name
   };
   const avatarContent = /* @__PURE__ */ jsx(StyledAvatar, { ref, src, alt: alt || name, ownerState, sx, ...other, children: children || initials });
   return /* @__PURE__ */ jsx(AvatarWrapper, { online, offline, badge, badgeColor, size, children: avatarContent });
-});
+}
 function CustomAvatarGroup({ avatars, size = "sm", max = 4, sx, ...other }) {
   return /* @__PURE__ */ jsx(AvatarGroup, { max, sx, ...other, children: avatars.map((avatar, index) => /* @__PURE__ */ jsx(Avatar, { name: avatar.name, src: avatar.src, alt: avatar.alt || avatar.name, size }, index)) });
 }
@@ -1859,7 +2032,7 @@ var StyledBadge = styled(Badge, {
     }
   };
 });
-var Badge2 = forwardRef(function Badge3({ variant = "standard", color = "error", size = "medium", badgeContent, children, sx, ...other }, ref) {
+function Badge2({ variant = "standard", color = "error", size = "medium", badgeContent, children, sx, ref, ...other }) {
   const ownerState = { variant, color, size };
   const isStatusVariant = variant === "online" || variant === "offline" || variant === "busy";
   const isDotVariant = variant === "dot" || isStatusVariant;
@@ -1875,14 +2048,16 @@ var Badge2 = forwardRef(function Badge3({ variant = "standard", color = "error",
       children
     }
   );
-});
+}
 function CountBadge({
   count,
   max = 99,
   showZero = false,
   color = "error",
   size = "medium",
-  sx
+  sx,
+  ref,
+  ...other
 }) {
   if (!showZero && count === 0) {
     return null;
@@ -1905,28 +2080,32 @@ function CountBadge({
   };
   const bgColor = colorMap[color];
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       component: "span",
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minWidth,
-        height,
-        padding: "0 4px",
-        borderRadius: height / 2,
-        fontSize,
-        fontWeight: 600,
-        backgroundColor: bgColor,
-        color: "white",
-        ...sx
-      },
+      ref,
+      ...other,
+      sx: [
+        {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minWidth,
+          height,
+          padding: "0 4px",
+          borderRadius: height / 2,
+          fontSize,
+          fontWeight: 600,
+          backgroundColor: bgColor,
+          color: "white"
+        },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
       children: displayCount
     }
   );
 }
-function StatusDot({ status, size = 8, pulse = true, sx }) {
+function StatusDot({ status, size = 8, pulse = true, sx, ref, ...other }) {
   const statusColors = {
     online: "#22c55e",
     offline: "#9ca3af",
@@ -1935,24 +2114,28 @@ function StatusDot({ status, size = 8, pulse = true, sx }) {
   };
   const color = statusColors[status];
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       component: "span",
-      sx: {
-        display: "inline-block",
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        backgroundColor: color,
-        ...pulse && status === "online" && {
-          animation: "pulse 2s infinite"
+      ref,
+      ...other,
+      sx: [
+        {
+          display: "inline-block",
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          backgroundColor: color,
+          ...pulse && status === "online" && {
+            animation: "pulse 2s infinite"
+          }
         },
-        ...sx
-      }
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ]
     }
   );
 }
-var StyledCard = styled(MuiCard, {
+var StyledCard = styled(Card2, {
   shouldForwardProp: (prop) => prop !== "ownerState"
 })(({ theme, ownerState }) => {
   const { variant } = ownerState;
@@ -1971,7 +2154,7 @@ var StyledCard = styled(MuiCard, {
     }
   };
 });
-var Card = forwardRef(function Card2({
+function Card({
   variant = "elevation",
   title,
   subheader,
@@ -1983,8 +2166,9 @@ var Card = forwardRef(function Card2({
   disablePadding,
   children,
   sx,
+  ref,
   ...other
-}, ref) {
+}) {
   const ownerState = { variant };
   const hasHeader = title || subheader || headerAction;
   return /* @__PURE__ */ jsxs(
@@ -2011,9 +2195,9 @@ var Card = forwardRef(function Card2({
       ]
     }
   );
-});
+}
 function CardSection({ title, description, children, sx }) {
-  return /* @__PURE__ */ jsxs(Box20, { sx: { mb: 3, ...sx }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { mb: 3, ...sx }, children: [
     title && /* @__PURE__ */ jsx(
       Typography5,
       {
@@ -2053,10 +2237,10 @@ function StatCard({
 }) {
   const isPositive = change && change > 0;
   const isNegative = change && change < 0;
-  return /* @__PURE__ */ jsx(Card, { variant, contentSx: { p: 2, "&:last-child": { pb: 2 } }, sx, ...other, children: /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-    /* @__PURE__ */ jsx(Box20, { children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 16 }),
-      /* @__PURE__ */ jsx(Skeleton, { width: 50, height: 32, sx: { mt: 0.5 } })
+  return /* @__PURE__ */ jsx(Card, { variant, contentSx: { p: 2, "&:last-child": { pb: 2 } }, sx, ...other, children: /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsx(Box19, { children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Skeleton3, { width: 80, height: 16 }),
+      /* @__PURE__ */ jsx(Skeleton3, { width: 50, height: 32, sx: { mt: 0.5 } })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Typography5,
@@ -2104,7 +2288,7 @@ function StatCard({
         color: "text.secondary"
       }, children: subtitle })
     ] }) }),
-    icon && !loading && /* @__PURE__ */ jsx(Box20, { sx: { color: `${color}.main` }, children: icon })
+    icon && !loading && /* @__PURE__ */ jsx(Box19, { sx: { color: `${color}.main` }, children: icon })
   ] }) });
 }
 function ConfirmDialog({
@@ -2123,18 +2307,21 @@ function ConfirmDialog({
 }) {
   const titleId = useId();
   const descriptionId = useId();
+  const [confirming, setConfirming] = useState(false);
+  const busy = loading || confirming;
   const handleConfirm = () => {
+    if (busy) return;
     const result = onConfirm();
-    if (result instanceof Promise) {
-      result.catch(() => {
-      });
-    }
+    if (!(result instanceof Promise)) return;
+    setConfirming(true);
+    result.catch(() => {
+    }).finally(() => setConfirming(false));
   };
   return /* @__PURE__ */ jsxs(
     Dialog,
     {
       open,
-      onClose: loading ? void 0 : onClose,
+      onClose: busy ? void 0 : onClose,
       maxWidth,
       fullWidth: true,
       "aria-labelledby": titleId,
@@ -2144,8 +2331,8 @@ function ConfirmDialog({
         /* @__PURE__ */ jsx(DialogTitle, { id: titleId, children: title }),
         content && /* @__PURE__ */ jsx(DialogContent, { children: typeof content === "string" ? /* @__PURE__ */ jsx(DialogContentText, { id: descriptionId, children: content }) : /* @__PURE__ */ jsx("div", { id: descriptionId, children: content }) }),
         /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
-          /* @__PURE__ */ jsx(Button, { onClick: onClose, color: "inherit", disabled: loading, variant: "outlined", children: cancelLabel }),
-          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, color: confirmColor, variant: "contained", loading, disabled, children: confirmLabel })
+          /* @__PURE__ */ jsx(Button, { onClick: onClose, color: "inherit", disabled: busy, variant: "outlined", children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, color: confirmColor, variant: "contained", loading: busy, disabled, children: confirmLabel })
         ] })
       ]
     }
@@ -2163,184 +2350,85 @@ function DeleteDialog({ itemName, content, ...props }) {
     }
   );
 }
-function IconWrapper({ icon, color = "primary.main", size = 64 }) {
-  return /* @__PURE__ */ jsx(
-    Box20,
+
+// src/components/sponsored-slot/types.ts
+var DEFAULT_SPONSORED_SLOT_LABELS = {
+  sponsored: "Sponsored"
+};
+var TILE_IMAGE = { width: "100%", aspectRatio: "4 / 3" };
+var BANNER_IMAGE = { width: 160, minHeight: 120, flexShrink: 0 };
+function SponsoredSlot({
+  content,
+  variant = "tile",
+  loading = false,
+  labels: labelsProp,
+  icon,
+  link,
+  onOpen,
+  id
+}) {
+  const labels = { ...DEFAULT_SPONSORED_SLOT_LABELS, ...labelsProp };
+  const banner = variant === "banner";
+  const imageBox = banner ? BANNER_IMAGE : TILE_IMAGE;
+  if (!content) {
+    if (!loading) return null;
+    return /* @__PURE__ */ jsx(Card2, { variant: "outlined", sx: { height: "100%" }, "data-sponsored-pending": "", children: /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", flexDirection: banner ? "row" : "column", height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Skeleton3, { variant: "rectangular", sx: { ...imageBox, height: banner ? void 0 : "auto" } }),
+      /* @__PURE__ */ jsxs(Box19, { sx: { p: 1.5, flex: 1 }, children: [
+        /* @__PURE__ */ jsx(Skeleton3, { width: "40%" }),
+        /* @__PURE__ */ jsx(Skeleton3, { width: "80%" })
+      ] })
+    ] }) });
+  }
+  const mark = /* @__PURE__ */ jsxs(
+    Box19,
     {
-      sx: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        bgcolor: (theme) => {
-          const parts = color.split(".");
-          let resolved = theme.palette;
-          for (const part of parts) {
-            resolved = resolved?.[part];
-          }
-          return typeof resolved === "string" ? alpha(resolved, 0.08) : alpha(theme.palette.primary.main, 0.08);
-        }
-      },
-      children: icon
+      component: "span",
+      sx: { display: "inline-flex", alignItems: "center", gap: 0.5, color: "text.secondary", typography: "caption" },
+      children: [
+        icon,
+        content.byline || labels.sponsored
+      ]
     }
   );
+  const body = /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", flexDirection: banner ? "row" : "column", height: "100%" }, children: [
+    content.image && /* @__PURE__ */ jsx(
+      Box19,
+      {
+        component: "img",
+        src: content.image,
+        alt: "",
+        loading: "lazy",
+        decoding: "async",
+        sx: {
+          display: "block",
+          objectFit: content.imageFit ?? "cover",
+          ...content.imageFit === "contain" && { p: 2, boxSizing: "border-box" },
+          bgcolor: "action.hover",
+          ...imageBox
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box19, { sx: { p: 1.5, display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
+      content.because ? /* @__PURE__ */ jsx(Tooltip2, { title: content.because, children: mark }) : mark,
+      /* @__PURE__ */ jsx(Typography5, { variant: "subtitle2", sx: { fontWeight: 600 }, noWrap: !banner, children: content.title }),
+      content.body && /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: { color: "text.secondary" }, children: content.body }),
+      link && content.cta && /* @__PURE__ */ jsx(Typography5, { variant: "caption", sx: { color: "primary.main", fontWeight: 600, mt: "auto" }, children: content.cta })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(Card2, { variant: "outlined", sx: { height: "100%" }, ...id !== void 0 && { "data-sponsored": id }, children: link ? /* @__PURE__ */ jsx(CardActionArea, { component: link.component, ...link.props, onClick: onOpen, sx: { height: "100%" }, children: body }) : body });
 }
-function EmptyContent({
-  illustration,
-  icon,
-  iconColor = "primary.main",
-  iconSize = 64,
-  title = "No data",
-  description,
-  action,
-  actions,
-  maxWidth = 400,
-  filled = false,
+var PAGE_GAP = 3;
+var GRID_GAP = 3;
+function PageContent({
+  children,
+  gap = PAGE_GAP,
+  fill,
   sx,
-  illustrationSx,
-  slotProps,
-  compact = false
+  ref,
+  ...rest
 }) {
-  const visual = icon ? /* @__PURE__ */ jsx(IconWrapper, { icon, color: iconColor, size: iconSize }) : illustration ? /* @__PURE__ */ jsx(Box20, { sx: illustrationSx, children: illustration }) : null;
-  const allActions = [...actions ?? [], ...action ? [action] : []];
   return /* @__PURE__ */ jsx(
-    Stack,
-    {
-      sx: {
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-        py: compact ? 4 : 8,
-        px: 2,
-        // Default non-compact behavior: vertically center inside the
-        // available "main content" area. Two complementary anchors:
-        //   * `flex: 1, alignSelf: 'stretch'` — when the parent IS a
-        //     flex column with explicit height (DashboardLayout main,
-        //     full-height page wrappers), EmptyContent grows to fill
-        //     the column and the inner `justifyContent: center` puts
-        //     the message in the middle of that column.
-        //   * `minHeight: calc(100vh - 240px)` — fallback for the
-        //     common case where the page wrapper is just a content-
-        //     sized `<Stack>` or `<Box>`. 240px is the typical
-        //     vertical chrome (header ~64 + breadcrumbs ~60 + page
-        //     padding ~80 + a small margin), so this leaves enough
-        //     space below the breadcrumbs for the message to sit at
-        //     the optical center of the visible viewport.
-        //
-        // `compact` keeps the inline-sized behavior for callers that
-        // drop EmptyContent inside a card cell or sidebar.
-        // `filled` is the explicit "fill my parent" mode and shares
-        // the same fallback so the visual is consistent.
-        ...!compact && {
-          flex: 1,
-          alignSelf: "stretch",
-          minHeight: "calc(100vh - 240px)"
-        },
-        ...filled && { height: "100%" },
-        ...sx
-      },
-      children: /* @__PURE__ */ jsxs(
-        Box20,
-        {
-          sx: {
-            maxWidth,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: compact ? 1.5 : 2.5
-          },
-          children: [
-            visual,
-            /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: {
-              alignItems: "center"
-            }, children: [
-              title && /* @__PURE__ */ jsx(
-                Typography5,
-                {
-                  variant: compact ? "subtitle1" : "h6",
-                  sx: {
-                    color: "text.secondary",
-                    fontWeight: 600,
-                    ...slotProps?.title
-                  },
-                  children: title
-                }
-              ),
-              description && /* @__PURE__ */ jsx(
-                Typography5,
-                {
-                  variant: "body2",
-                  sx: {
-                    color: "text.disabled",
-                    lineHeight: 1.6,
-                    ...slotProps?.description
-                  },
-                  children: description
-                }
-              )
-            ] }),
-            allActions.length > 0 && /* @__PURE__ */ jsx(
-              Stack,
-              {
-                direction: "row",
-                spacing: 1,
-                sx: { mt: compact ? 0.5 : 1, flexWrap: "wrap", justifyContent: "center", ...slotProps?.actions },
-                children: allActions.map((a, i) => /* @__PURE__ */ jsx(Box20, { children: a }, i))
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function SearchEmptyContent({
-  query,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    EmptyContent,
-    {
-      title: "No results found",
-      description: query ? `Your search for "${query}" did not match any results.` : "Try adjusting your search criteria.",
-      ...props
-    }
-  );
-}
-function LoadingEmptyContent({ ...props }) {
-  return /* @__PURE__ */ jsx(
-    EmptyContent,
-    {
-      title: "Loading...",
-      illustration: /* @__PURE__ */ jsx(
-        Box20,
-        {
-          sx: {
-            width: 64,
-            height: 64,
-            borderRadius: "50%",
-            border: "3px solid",
-            borderColor: "divider",
-            borderTopColor: "primary.main",
-            animation: "spin 1s linear infinite",
-            "@keyframes spin": {
-              from: { transform: "rotate(0deg)" },
-              to: { transform: "rotate(360deg)" }
-            }
-          }
-        }
-      ),
-      compact: true,
-      ...props
-    }
-  );
-}
-var PAGE_GAP = 3;
-var GRID_GAP = 3;
-var PageContent = forwardRef(
-  ({ children, gap = PAGE_GAP, fill, sx, ...rest }, ref) => /* @__PURE__ */ jsx(
     Stack,
     {
       ref,
@@ -2349,9 +2437,8 @@ var PageContent = forwardRef(
       ...rest,
       children
     }
-  )
-);
-PageContent.displayName = "PageContent";
+  );
+}
 var COLUMN_SIZE = {
   1: { xs: 12, md: 12 },
   2: { xs: 12, md: 6 },
@@ -2365,7 +2452,7 @@ function CardGrid({ children, columns = 2, gap = GRID_GAP, sx }) {
     (child) => child != null ? /* @__PURE__ */ jsx(Grid, { size, sx: { display: "flex" }, children: child }) : null
   ) });
 }
-var ImageRoot = styled(Box20, {
+var ImageRoot = styled(Box19, {
   shouldForwardProp: (prop) => prop !== "ownerState"
 })(({ theme, ownerState }) => {
   const { ratio, hasError } = ownerState;
@@ -2406,7 +2493,7 @@ var StyledImg = styled("img")(() => ({
   objectFit: "cover",
   display: "block"
 }));
-var PlaceholderBox = styled(Box20)(({ theme }) => ({
+var PlaceholderBox = styled(Box19)(({ theme }) => ({
   position: "absolute",
   top: 0,
   left: 0,
@@ -2431,7 +2518,7 @@ var PlaceholderBox = styled(Box20)(({ theme }) => ({
     }
   }
 }));
-var OverlayBox = styled(Box20)(() => ({
+var OverlayBox = styled(Box19)(() => ({
   position: "absolute",
   top: 0,
   left: 0,
@@ -2441,7 +2528,7 @@ var OverlayBox = styled(Box20)(() => ({
   alignItems: "center",
   justifyContent: "center"
 }));
-var FallbackBox = styled(Box20)(({ theme }) => ({
+var FallbackBox = styled(Box19)(({ theme }) => ({
   width: "100%",
   height: "100%",
   minHeight: 100,
@@ -2450,7 +2537,7 @@ var FallbackBox = styled(Box20)(({ theme }) => ({
   justifyContent: "center",
   color: theme.palette.text.disabled
 }));
-var Image = forwardRef(function Image2({
+function Image({
   src,
   alt,
   ratio,
@@ -2464,8 +2551,9 @@ var Image = forwardRef(function Image2({
   imgSx,
   onLoad,
   onError,
+  ref,
   ...imgProps
-}, ref) {
+}) {
   const [isLoaded, setIsLoaded] = useState(false);
   const [hasError, setHasError] = useState(false);
   const [currentSrc, setCurrentSrc] = useState(src);
@@ -2511,9 +2599,9 @@ var Image = forwardRef(function Image2({
     ),
     overlay && /* @__PURE__ */ jsx(OverlayBox, { children: overlay })
   ] });
-});
+}
 function DefaultImageIcon() {
-  return /* @__PURE__ */ jsx(Box20, { component: "svg", viewBox: "0 0 24 24", sx: { width: 48, height: 48, opacity: 0.5 }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box19, { component: "svg", viewBox: "0 0 24 24", sx: { width: 48, height: 48, opacity: 0.5 }, children: /* @__PURE__ */ jsx(
     "path",
     {
       fill: "currentColor",
@@ -2591,7 +2679,17 @@ var StyledLabel = styled("span", {
     ...variantStyles[variant]
   };
 });
-var Label = forwardRef(function Label2({ children, color = "default", variant = "soft", startIcon, endIcon, sx, disabled, ...other }, ref) {
+function Label({
+  children,
+  color = "default",
+  variant = "soft",
+  startIcon,
+  endIcon,
+  sx,
+  disabled,
+  ref,
+  ...other
+}) {
   const ownerState = {
     color,
     variant,
@@ -2604,11 +2702,11 @@ var Label = forwardRef(function Label2({ children, color = "default", variant =
     "& svg, & img": { width: "100%", height: "100%" }
   };
   return /* @__PURE__ */ jsxs(StyledLabel, { ref, ownerState, sx, ...other, children: [
-    startIcon && /* @__PURE__ */ jsx(Box20, { sx: { mr: 0.5, ...iconStyles }, children: startIcon }),
+    startIcon && /* @__PURE__ */ jsx(Box19, { sx: { mr: 0.5, ...iconStyles }, children: startIcon }),
     children,
-    endIcon && /* @__PURE__ */ jsx(Box20, { sx: { ml: 0.5, ...iconStyles }, children: endIcon })
+    endIcon && /* @__PURE__ */ jsx(Box19, { sx: { ml: 0.5, ...iconStyles }, children: endIcon })
   ] });
-});
+}
 function StatusLabel({
   status,
   ...props
@@ -2631,6 +2729,155 @@ function BooleanLabel({
 }) {
   return /* @__PURE__ */ jsx(Label, { color: value ? "success" : "error", ...props, children: value ? trueText : falseText });
 }
+var MINUTE = 6e4;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+function deadlineUrgency(leftMs, urgentWithinMs = HOUR, soonWithinMs = DAY) {
+  if (leftMs <= 0) return "overdue";
+  if (leftMs < urgentWithinMs) return "urgent";
+  if (leftMs < soonWithinMs) return "soon";
+  return "later";
+}
+function relativeTimeLeft(leftMs, locale) {
+  const words = new Intl.RelativeTimeFormat(locale, { numeric: "always", style: "short" });
+  const size = Math.abs(leftMs);
+  const sign = leftMs < 0 ? -1 : 1;
+  if (size < HOUR) return words.format(sign * Math.max(1, Math.round(size / MINUTE)), "minute");
+  if (size < 2 * DAY) return words.format(sign * Math.round(size / HOUR), "hour");
+  return words.format(sign * Math.round(size / DAY), "day");
+}
+var LOOK = {
+  overdue: { color: "error", variant: "filled" },
+  urgent: { color: "error", variant: "soft" },
+  soon: { color: "warning", variant: "soft" },
+  later: { color: "default", variant: "soft" }
+};
+function DeadlineChip({
+  deadline,
+  locale,
+  overdueLabel,
+  urgentWithinMs,
+  soonWithinMs,
+  now = Date.now,
+  sx
+}) {
+  const [at, setAt] = useState(now);
+  useEffect(() => {
+    const tick = setInterval(() => setAt(now()), 3e4);
+    return () => clearInterval(tick);
+  }, [now]);
+  const due = new Date(deadline).getTime();
+  if (Number.isNaN(due)) return null;
+  const left = due - at;
+  const urgency = deadlineUrgency(left, urgentWithinMs, soonWithinMs);
+  const look = LOOK[urgency];
+  const text = urgency === "overdue" && overdueLabel ? overdueLabel : relativeTimeLeft(left, locale);
+  const exact = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(due);
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      color: look.color,
+      variant: look.variant,
+      "data-urgency": urgency,
+      sx: [{ fontVariantNumeric: "tabular-nums" }, ...Array.isArray(sx) ? sx : [sx]],
+      children: /* @__PURE__ */ jsx("time", { dateTime: new Date(due).toISOString(), title: exact, children: text })
+    }
+  );
+}
+var DEFAULT_ITEM_WIDTH = { xs: "78%", sm: "46%", md: "31%", lg: "23.5%" };
+function Chevron({ direction }) {
+  return direction === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" });
+}
+function Rail({
+  children,
+  "aria-label": ariaLabel,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  gap = 2,
+  labels,
+  sx
+}) {
+  const track = useRef(null);
+  const [reach, setReach] = useState({ back: false, forward: false });
+  const measure = useCallback(() => {
+    const el = track.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    setReach({ back: el.scrollLeft > 1, forward: el.scrollLeft < max - 1 });
+  }, []);
+  useEffect(() => {
+    measure();
+    const el = track.current;
+    if (!el || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [measure]);
+  const page = (direction) => {
+    const el = track.current;
+    if (el) el.scrollBy({ left: direction * el.clientWidth * 0.9, behavior: "smooth" });
+  };
+  const arrow = (direction, show, label) => show ? /* @__PURE__ */ jsx(
+    IconButton4,
+    {
+      size: "small",
+      "aria-label": label,
+      onClick: () => page(direction),
+      sx: {
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        [direction === 1 ? "right" : "left"]: -8,
+        zIndex: 1,
+        bgcolor: "background.paper",
+        boxShadow: 2,
+        "&:hover": { bgcolor: "background.paper" },
+        "@media (hover: none)": { display: "none" }
+      },
+      children: /* @__PURE__ */ jsx(Chevron, { direction: direction === 1 ? "right" : "left" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    Box19,
+    {
+      component: "section",
+      "aria-label": ariaLabel,
+      "data-testid": "prism-rail",
+      sx: [{ position: "relative" }, ...Array.isArray(sx) ? sx : [sx]],
+      children: [
+        arrow(-1, reach.back, labels?.previous ?? "Previous"),
+        /* @__PURE__ */ jsx(
+          Box19,
+          {
+            component: "ul",
+            ref: track,
+            tabIndex: 0,
+            onScroll: measure,
+            sx: {
+              display: "grid",
+              gridAutoFlow: "column",
+              gridAutoColumns: itemWidth,
+              gap,
+              m: 0,
+              p: 0,
+              listStyle: "none",
+              overflowX: "auto",
+              overscrollBehaviorX: "contain",
+              scrollSnapType: "x mandatory",
+              scrollbarWidth: "none",
+              "&::-webkit-scrollbar": { display: "none" },
+              "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
+            },
+            children: Children.map(
+              children,
+              (child) => child == null || child === false ? null : /* @__PURE__ */ jsx(Box19, { component: "li", sx: { scrollSnapAlign: "start", minWidth: 0 }, children: child })
+            )
+          }
+        ),
+        arrow(1, reach.forward, labels?.next ?? "Next")
+      ]
+    }
+  );
+}
 var LoadingContent = styled("div")(({ theme }) => ({
   flexGrow: 1,
   width: "100%",
@@ -2655,7 +2902,7 @@ function LoadingScreen({ portal, slots, slotProps, sx, ...other }) {
     }
   ) }) });
 }
-var SplashContainer = styled(Box20, {
+var SplashContainer = styled(Box19, {
   shouldForwardProp: (prop) => prop !== "fullScreen"
 })(({ theme, fullScreen }) => ({
   display: "flex",
@@ -2767,7 +3014,7 @@ function TagCloud({
   const theme = useTheme();
   const visible = maxItems ? tags.slice(0, maxItems) : tags;
   if (variant === "list") {
-    return /* @__PURE__ */ jsx(List2, { disablePadding: true, sx, children: visible.map((tag) => /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(List, { disablePadding: true, sx, children: visible.map((tag) => /* @__PURE__ */ jsxs(
       ListItemButton,
       {
         onClick: onTagClick ? () => onTagClick(tag) : void 0,
@@ -2782,10 +3029,10 @@ function TagCloud({
           /* @__PURE__ */ jsx(
             ListItemText,
             {
-              primary: /* @__PURE__ */ jsxs(Box20, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+              primary: /* @__PURE__ */ jsxs(Box19, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
                 /* @__PURE__ */ jsx("span", { children: `#${tag.name}` }),
                 tag.trending && /* @__PURE__ */ jsx(
-                  Box20,
+                  Box19,
                   {
                     component: "span",
                     sx: {
@@ -2851,7 +3098,7 @@ function TagCloud({
         return /* @__PURE__ */ jsx(
           Chip,
           {
-            label: /* @__PURE__ */ jsxs(Box20, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+            label: /* @__PURE__ */ jsxs(Box19, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
               /* @__PURE__ */ jsx("span", { children: `#${tag.name}` }),
               renderAdornment?.(tag)
             ] }),
@@ -2880,84 +3127,6 @@ function TagCloud({
     }
   );
 }
-var ScrollbarRoot = styled(Box20, {
-  shouldForwardProp: (prop) => prop !== "ownerState"
-})(({ theme, ownerState }) => {
-  const { fillContent, hideScrollbar, axis } = ownerState;
-  const scrollbarColor = alpha(theme.palette.text.disabled, 0.4);
-  const scrollbarHoverColor = alpha(theme.palette.text.disabled, 0.6);
-  const scrollbarTrackColor = alpha(theme.palette.grey[500], 0.08);
-  const getOverflow = () => {
-    if (axis === "x") return { overflowX: "auto", overflowY: "hidden" };
-    if (axis === "y") return { overflowX: "hidden", overflowY: "auto" };
-    return { overflow: "auto" };
-  };
-  return {
-    minWidth: 0,
-    minHeight: 0,
-    ...getOverflow(),
-    ...fillContent && {
-      flexGrow: 1,
-      display: "flex",
-      flexDirection: "column"
-    },
-    // Custom scrollbar styles
-    ...!hideScrollbar && {
-      scrollbarWidth: "thin",
-      scrollbarColor: `${scrollbarColor} ${scrollbarTrackColor}`,
-      // Webkit browsers
-      "&::-webkit-scrollbar": {
-        width: 8,
-        height: 8
-      },
-      "&::-webkit-scrollbar-track": {
-        backgroundColor: scrollbarTrackColor,
-        borderRadius: 4
-      },
-      "&::-webkit-scrollbar-thumb": {
-        backgroundColor: scrollbarColor,
-        borderRadius: 4,
-        "&:hover": {
-          backgroundColor: scrollbarHoverColor
-        }
-      },
-      "&::-webkit-scrollbar-corner": {
-        backgroundColor: "transparent"
-      }
-    },
-    ...hideScrollbar && {
-      scrollbarWidth: "none",
-      msOverflowStyle: "none",
-      "&::-webkit-scrollbar": {
-        display: "none"
-      }
-    }
-  };
-});
-var Scrollbar = forwardRef(function Scrollbar2({ children, sx, fillContent = false, hideScrollbar = false, axis = "y", maxHeight, minHeight, className, ...other }, ref) {
-  const ownerState = {
-    fillContent,
-    hideScrollbar,
-    axis
-  };
-  return /* @__PURE__ */ jsx(
-    ScrollbarRoot,
-    {
-      ref,
-      ownerState,
-      className,
-      sx: [
-        {
-          ...maxHeight !== void 0 && { maxHeight },
-          ...minHeight !== void 0 && { minHeight }
-        },
-        ...Array.isArray(sx) ? sx : [sx]
-      ],
-      ...other,
-      children
-    }
-  );
-});
 var SnackbarContext = createContext(null);
 function useSnackbar() {
   const context = useContext(SnackbarContext);
@@ -3061,7 +3230,7 @@ function SnackbarProvider({
             severity: state.severity,
             variant: "filled",
             onClose: handleClose,
-            action: state.action || /* @__PURE__ */ jsx(IconButton3, { size: "small", "aria-label": "close", color: "inherit", onClick: close, children: /* @__PURE__ */ jsx(CloseIcon3, { fontSize: "small" }) }),
+            action: state.action || /* @__PURE__ */ jsx(IconButton4, { size: "small", "aria-label": "close", color: "inherit", onClick: close, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }),
             sx: { width: "100%", alignItems: "center" },
             children: state.message
           }
@@ -3091,7 +3260,7 @@ var SvgRoot = styled("span")(() => ({
   display: "inline-flex",
   backgroundColor: "currentColor"
 }));
-var SvgColor = forwardRef(function SvgColor2({ src, color, size = 24, width, height, className, sx }, ref) {
+function SvgColor({ src, color, size = 24, width, height, className, sx, ref }) {
   const computedWidth = width ?? size;
   const computedHeight = height ?? size;
   return /* @__PURE__ */ jsx(
@@ -3111,7 +3280,7 @@ var SvgColor = forwardRef(function SvgColor2({ src, color, size = 24, width, hei
       ]
     }
   );
-});
+}
 function createIconComponent(basePath) {
   function Icon({ name, ...props }) {
     return /* @__PURE__ */ jsx(SvgColor, { src: `${basePath}/${name}.svg`, ...props });
@@ -3141,7 +3310,7 @@ var StyledTableRow2 = styled(TableRow)(({ theme }) => ({
     }
   }
 }));
-function TableInner({
+function Table({
   columns,
   data,
   rowKey = "id",
@@ -3161,14 +3330,16 @@ function TableInner({
   rowsPerPageOptions = [5, 10, 25, 50],
   emptyContent,
   loading = false,
+  loadingRows = 5,
   dense = false,
   stickyHeader = false,
   maxHeight,
   onRowClick,
   containerSx,
   sx,
+  ref,
   ...other
-}, ref) {
+}) {
   const getRowKey = useCallback(
     (row, index) => {
       if (typeof rowKey === "function") {
@@ -3233,7 +3404,7 @@ function TableInner({
     return data;
   }, [data, paginated, page, rowsPerPage, totalRows]);
   if (!loading && data.length === 0) {
-    return /* @__PURE__ */ jsx(StyledTableContainer2, { sx: containerSx, children: /* @__PURE__ */ jsx(Box20, { sx: { p: 4, textAlign: "center" }, children: emptyContent || /* @__PURE__ */ jsx(Typography5, { sx: {
+    return /* @__PURE__ */ jsx(StyledTableContainer2, { sx: containerSx, children: /* @__PURE__ */ jsx(Box19, { sx: { p: 4, textAlign: "center" }, children: emptyContent || /* @__PURE__ */ jsx(Typography5, { sx: {
       color: "text.secondary"
     }, children: "No data available" }) }) });
   }
@@ -3267,34 +3438,40 @@ function TableInner({
               String(column.id)
             ))
           ] }) }),
-          /* @__PURE__ */ jsx(TableBody, { children: displayData.map((row, index) => {
-            const key = getRowKey(row, index);
-            const isSelected = selected.includes(key);
-            return /* @__PURE__ */ jsxs(
-              StyledTableRow2,
-              {
-                hover: true,
-                selected: isSelected,
-                onClick: () => onRowClick?.(row, index),
-                sx: { cursor: onRowClick ? "pointer" : "default" },
-                children: [
-                  selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      checked: isSelected,
-                      onClick: (e) => e.stopPropagation(),
-                      onChange: () => handleSelectRow(key)
-                    }
-                  ) }),
-                  columns.map((column) => {
-                    const value = row[column.id];
-                    return /* @__PURE__ */ jsx(TableCell, { align: column.align || "left", children: column.render ? column.render(row, index) : column.format ? column.format(value) : String(value ?? "") }, String(column.id));
-                  })
-                ]
-              },
-              key
-            );
-          }) })
+          /* @__PURE__ */ jsxs(TableBody, { children: [
+            loading && Array.from({ length: Math.max(1, loadingRows) }, (_, rowIndex) => /* @__PURE__ */ jsxs(TableRow, { children: [
+              selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(Skeleton3, { variant: "rectangular", width: 18, height: 18 }) }),
+              columns.map((column) => /* @__PURE__ */ jsx(TableCell, { align: column.align || "left", children: /* @__PURE__ */ jsx(Skeleton3, { variant: "text", width: column.width ?? "80%" }) }, String(column.id)))
+            ] }, `loading-${rowIndex}`)),
+            !loading && displayData.map((row, index) => {
+              const key = getRowKey(row, index);
+              const isSelected = selected.includes(key);
+              return /* @__PURE__ */ jsxs(
+                StyledTableRow2,
+                {
+                  hover: true,
+                  selected: isSelected,
+                  onClick: () => onRowClick?.(row, index),
+                  sx: { cursor: onRowClick ? "pointer" : "default" },
+                  children: [
+                    selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: isSelected,
+                        onClick: (e) => e.stopPropagation(),
+                        onChange: () => handleSelectRow(key)
+                      }
+                    ) }),
+                    columns.map((column) => {
+                      const value = row[column.id];
+                      return /* @__PURE__ */ jsx(TableCell, { align: column.align || "left", children: column.render ? column.render(row, index) : column.format ? column.format(value) : String(value ?? "") }, String(column.id));
+                    })
+                  ]
+                },
+                key
+              );
+            })
+          ] })
         ] }),
         paginated && /* @__PURE__ */ jsx(
           TablePagination,
@@ -3312,7 +3489,6 @@ function TableInner({
     }
   );
 }
-var Table = forwardRef(TableInner);
 function useTable({
   data,
   defaultPage = 0,
@@ -3367,26 +3543,26 @@ function useTable({
     reset
   };
 }
-function Skeleton3({ variant = "text", ...props }) {
-  return /* @__PURE__ */ jsx(Skeleton, { variant, ...props });
+function Skeleton5({ variant = "text", ...props }) {
+  return /* @__PURE__ */ jsx(Skeleton3, { variant, ...props });
 }
 function CardSkeleton({ hasAvatar = true, lines = 2, width = "100%" }) {
-  return /* @__PURE__ */ jsxs(Box20, { sx: { width, p: 2 }, children: [
-    hasAvatar && /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", mb: 2 }, children: [
-      /* @__PURE__ */ jsx(Skeleton3, { variant: "circular", width: 40, height: 40 }),
-      /* @__PURE__ */ jsxs(Box20, { sx: { ml: 1, flex: 1 }, children: [
-        /* @__PURE__ */ jsx(Skeleton3, { variant: "text", width: "60%" }),
-        /* @__PURE__ */ jsx(Skeleton3, { variant: "text", width: "40%" })
+  return /* @__PURE__ */ jsxs(Box19, { sx: { width, p: 2 }, children: [
+    hasAvatar && /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", mb: 2 }, children: [
+      /* @__PURE__ */ jsx(Skeleton5, { variant: "circular", width: 40, height: 40 }),
+      /* @__PURE__ */ jsxs(Box19, { sx: { ml: 1, flex: 1 }, children: [
+        /* @__PURE__ */ jsx(Skeleton5, { variant: "text", width: "60%" }),
+        /* @__PURE__ */ jsx(Skeleton5, { variant: "text", width: "40%" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Skeleton3, { variant: "rectangular", width: "100%", height: 118, sx: { borderRadius: 1 } }),
-    /* @__PURE__ */ jsx(Box20, { sx: { mt: 1 }, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton3, { variant: "text", width: i === lines - 1 ? "80%" : "100%" }, i)) })
+    /* @__PURE__ */ jsx(Skeleton5, { variant: "rectangular", width: "100%", height: 118, sx: { borderRadius: 1 } }),
+    /* @__PURE__ */ jsx(Box19, { sx: { mt: 1 }, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Skeleton5, { variant: "text", width: i === lines - 1 ? "80%" : "100%" }, i)) })
   ] });
 }
 function TableSkeleton({ rows = 5, columns = 4, hasHeader = true }) {
-  return /* @__PURE__ */ jsxs(Box20, { sx: { width: "100%" }, children: [
-    hasHeader && /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", gap: 2, mb: 1, pb: 1, borderBottom: 1, borderColor: "divider" }, children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(Skeleton3, { variant: "text", sx: { flex: 1 }, height: 24 }, i)) }),
-    Array.from({ length: rows }, (_row, rowIndex) => /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", gap: 2, py: 1 }, children: Array.from({ length: columns }, (_col, colIndex) => /* @__PURE__ */ jsx(Skeleton3, { variant: "text", sx: { flex: 1 } }, colIndex)) }, rowIndex))
+  return /* @__PURE__ */ jsxs(Box19, { sx: { width: "100%" }, children: [
+    hasHeader && /* @__PURE__ */ jsx(Box19, { sx: { display: "flex", gap: 2, mb: 1, pb: 1, borderBottom: 1, borderColor: "divider" }, children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(Skeleton5, { variant: "text", sx: { flex: 1 }, height: 24 }, i)) }),
+    Array.from({ length: rows }, (_row, rowIndex) => /* @__PURE__ */ jsx(Box19, { sx: { display: "flex", gap: 2, py: 1 }, children: Array.from({ length: columns }, (_col, colIndex) => /* @__PURE__ */ jsx(Skeleton5, { variant: "text", sx: { flex: 1 } }, colIndex)) }, rowIndex))
   ] });
 }
 function LinearProgress3({
@@ -3404,7 +3580,7 @@ function LinearProgress3({
     return /* @__PURE__ */ jsx(MuiLinearProgress, { variant, value, color, sx: { borderRadius: 1, ...sx }, ...props });
   }
   if (labelPosition === "below") {
-    return /* @__PURE__ */ jsxs(Box20, { sx: { width: "100%" }, children: [
+    return /* @__PURE__ */ jsxs(Box19, { sx: { width: "100%" }, children: [
       /* @__PURE__ */ jsx(MuiLinearProgress, { variant, value, color, sx: { borderRadius: 1, ...sx }, ...props }),
       /* @__PURE__ */ jsx(
         Typography5,
@@ -3421,8 +3597,8 @@ function LinearProgress3({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-    /* @__PURE__ */ jsx(Box20, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(MuiLinearProgress, { variant, value, color, sx: { borderRadius: 1, ...sx }, ...props }) }),
+  return /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(Box19, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(MuiLinearProgress, { variant, value, color, sx: { borderRadius: 1, ...sx }, ...props }) }),
     /* @__PURE__ */ jsx(
       Typography5,
       {
@@ -3449,10 +3625,10 @@ function CircularProgress2({
     return /* @__PURE__ */ jsx(CircularProgress, { variant, value, color, size, ...props });
   }
   const label = formatLabel2 ? formatLabel2(value ?? 0) : `${Math.round(value ?? 0)}%`;
-  return /* @__PURE__ */ jsxs(Box20, { sx: { position: "relative", display: "inline-flex" }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { position: "relative", display: "inline-flex" }, children: [
     /* @__PURE__ */ jsx(CircularProgress, { variant, value, color, size, ...props }),
     /* @__PURE__ */ jsx(
-      Box20,
+      Box19,
       {
         sx: {
           position: "absolute",
@@ -3489,9 +3665,9 @@ function ProgressBar({ segments, height = 8, showLabels = false }) {
     info: "info.main",
     inherit: "text.primary"
   };
-  return /* @__PURE__ */ jsxs(Box20, { sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsx(
-      Box20,
+      Box19,
       {
         sx: {
           display: "flex",
@@ -3501,7 +3677,7 @@ function ProgressBar({ segments, height = 8, showLabels = false }) {
           bgcolor: "action.hover"
         },
         children: segments.map((segment, index) => /* @__PURE__ */ jsx(
-          Box20,
+          Box19,
           {
             sx: {
               width: `${segment.value}%`,
@@ -3513,9 +3689,9 @@ function ProgressBar({ segments, height = 8, showLabels = false }) {
         ))
       }
     ),
-    showLabels && /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", gap: 2, mt: 1 }, children: segments.map((segment, index) => /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+    showLabels && /* @__PURE__ */ jsx(Box19, { sx: { display: "flex", gap: 2, mt: 1 }, children: segments.map((segment, index) => /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
       /* @__PURE__ */ jsx(
-        Box20,
+        Box19,
         {
           sx: {
             width: 8,
@@ -3615,7 +3791,7 @@ function VirtualList({
     }
   }, [lastItem, virtualizer, items.length, loadMoreThreshold, onEndReached]);
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       ref: parentRef,
       sx: {
@@ -3626,7 +3802,7 @@ function VirtualList({
         ...sx
       },
       children: /* @__PURE__ */ jsx(
-        Box20,
+        Box19,
         {
           sx: {
             height: virtualizer.getTotalSize() + paddingY * 2,
@@ -3637,7 +3813,7 @@ function VirtualList({
             const item = items[virtualRow.index];
             if (item === void 0) return null;
             return /* @__PURE__ */ jsx(
-              Box20,
+              Box19,
               {
                 "data-index": virtualRow.index,
                 ref: virtualizer.measureElement,
@@ -3748,7 +3924,7 @@ function CommandPalette({
         }
       },
       children: /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0 }, children: [
-        /* @__PURE__ */ jsx(Box20, { sx: { p: 2, pb: 1 }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box19, { sx: { p: 2, pb: 1 }, children: /* @__PURE__ */ jsx(
           TextField2,
           {
             inputRef,
@@ -3764,23 +3940,23 @@ function CommandPalette({
             slotProps: {
               input: {
                 disableUnderline: true,
-                startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { ml: 0.5, mr: 1 }, children: /* @__PURE__ */ jsx(Box20, { component: "span", sx: { fontSize: 18, opacity: 0.6 }, children: "\u2318" }) })
+                startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { ml: 0.5, mr: 1 }, children: /* @__PURE__ */ jsx(Box19, { component: "span", sx: { fontSize: 18, opacity: 0.6 }, children: "\u2318" }) })
               }
             }
           }
         ) }),
         /* @__PURE__ */ jsx(Divider3, {}),
         /* @__PURE__ */ jsx(
-          Box20,
+          Box19,
           {
             sx: {
               maxHeight: 360,
               overflowY: "auto",
               py: 0.5
             },
-            children: filtered.length === 0 ? /* @__PURE__ */ jsx(Box20, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: {
+            children: filtered.length === 0 ? /* @__PURE__ */ jsx(Box19, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: {
               color: "text.secondary"
-            }, children: emptyMessage }) }) : grouped.map((g) => /* @__PURE__ */ jsxs(Box20, { children: [
+            }, children: emptyMessage }) }) : grouped.map((g) => /* @__PURE__ */ jsxs(Box19, { children: [
               g.label ? /* @__PURE__ */ jsx(
                 Typography5,
                 {
@@ -3826,7 +4002,7 @@ function Row({
     }
   }, [selected]);
   return /* @__PURE__ */ jsxs(
-    Box20,
+    Box19,
     {
       ref,
       onMouseEnter: onHover,
@@ -3845,8 +4021,8 @@ function Row({
         }
       }),
       children: [
-        action.icon ? /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", alignItems: "center", width: 20, opacity: 0.8 }, children: action.icon }) : null,
-        /* @__PURE__ */ jsx(Box20, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: {
+        action.icon ? /* @__PURE__ */ jsx(Box19, { sx: { display: "flex", alignItems: "center", width: 20, opacity: 0.8 }, children: action.icon }) : null,
+        /* @__PURE__ */ jsx(Box19, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: {
           alignItems: "baseline"
         }, children: [
           /* @__PURE__ */ jsx(Typography5, { variant: "body2", sx: { fontWeight: 500 }, noWrap: true, children: action.title }),
@@ -3945,9 +4121,9 @@ function Tabs({
     return items;
   }, [tabs, children]);
   const hasAction = action !== void 0 && action !== null && action !== false;
-  return /* @__PURE__ */ jsxs(Box20, { sx: { width: "100%" }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsxs(
-      Box20,
+      Box19,
       {
         sx: {
           display: "flex",
@@ -3968,7 +4144,7 @@ function Tabs({
             tab.value
           )) }),
           hasAction && /* @__PURE__ */ jsx(
-            Box20,
+            Box19,
             {
               sx: {
                 display: "flex",
@@ -3987,7 +4163,7 @@ function Tabs({
       if (!isActive && !keepMounted) return null;
       if (tab.content === void 0) return null;
       return /* @__PURE__ */ jsx(
-        Box20,
+        Box19,
         {
           role: "tabpanel",
           hidden: !isActive,
@@ -4060,7 +4236,6 @@ function Accordion({
         return {
           border: 1,
           borderColor: "divider",
-          "&:not(:last-child)": { borderBottom: 0 },
           "&::before": { display: "none" },
           boxShadow: "none"
         };
@@ -4086,7 +4261,7 @@ function Accordion({
         /* @__PURE__ */ jsxs(
           MuiAccordionSummary,
           {
-            expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}),
+            expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
             "aria-controls": `${item.id}-content`,
             id: `${item.id}-header`,
             children: [
@@ -4114,7 +4289,7 @@ function Accordion({
 }
 function SimpleAccordion({ title, subtitle, children, icon, ...props }) {
   return /* @__PURE__ */ jsxs(MuiAccordion, { ...props, children: [
-    /* @__PURE__ */ jsxs(MuiAccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: [
+    /* @__PURE__ */ jsxs(MuiAccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}), children: [
       icon && /* @__PURE__ */ jsx(Typography5, { component: "span", sx: { mr: 1, display: "flex", alignItems: "center" }, children: icon }),
       /* @__PURE__ */ jsx(Typography5, { component: "span", sx: { fontWeight: 500 }, children: title }),
       subtitle && /* @__PURE__ */ jsx(
@@ -4455,281 +4630,6 @@ function ScrollToTop({ pathname }) {
   }, [pathname]);
   return null;
 }
-function parseStackFrame(line) {
-  const patterns = [
-    // Named function with file: at functionName (file:line:col)
-    /at\s+(?:async\s+)?([^\s(]+)\s+\((.+?):(\d+):(\d+)\)/,
-    // Anonymous at file: at file:line:col
-    /at\s+(.+?):(\d+):(\d+)/,
-    // Webpack/Vite transformed: at Module.functionName (file?xxx:line:col)
-    /at\s+(?:async\s+)?(?:Module\.)?([^\s(]+)\s+\((.+?)\?[^:]*:(\d+):(\d+)\)/
-  ];
-  for (const pattern of patterns) {
-    const match = line.match(pattern);
-    if (match) {
-      const [, funcOrFile, file, lineStr, colStr] = match;
-      const hasFile = file !== void 0;
-      const functionName = hasFile ? funcOrFile : null;
-      const filePath = hasFile ? file : funcOrFile;
-      const lineNumber = parseInt(hasFile ? lineStr : file, 10);
-      const columnNumber = parseInt(hasFile ? colStr : lineStr, 10);
-      const isAppCode = filePath.includes("/src/") || filePath.includes("src/") && !filePath.includes("node_modules");
-      return {
-        functionName: functionName || null,
-        filePath: cleanFilePath(filePath),
-        lineNumber: isNaN(lineNumber) ? null : lineNumber,
-        columnNumber: isNaN(columnNumber) ? null : columnNumber,
-        isAppCode
-      };
-    }
-  }
-  return null;
-}
-function cleanFilePath(path) {
-  const cleaned = path.replace(/\?.*$/, "");
-  const srcIndex = cleaned.indexOf("/src/");
-  if (srcIndex !== -1) {
-    return cleaned.slice(srcIndex + 1);
-  }
-  const parts = cleaned.split("/");
-  if (parts.length > 3) {
-    return parts.slice(-3).join("/");
-  }
-  return cleaned;
-}
-function parseStackTrace(stack) {
-  if (!stack) {
-    return { primary: null, frames: [], raw: "" };
-  }
-  const lines = stack.split("\n");
-  const frames = [];
-  for (const line of lines) {
-    const frame = parseStackFrame(line.trim());
-    if (frame) {
-      frames.push(frame);
-    }
-  }
-  const primary = frames.find((f) => f.isAppCode) ?? frames[0] ?? null;
-  return { primary, frames, raw: stack };
-}
-function getErrorLocation(error) {
-  const parsed = parseStackTrace(error.stack);
-  const { primary } = parsed;
-  if (!primary) {
-    return "Unknown location";
-  }
-  const parts = [];
-  if (primary.functionName) {
-    parts.push(`in ${primary.functionName}`);
-  }
-  if (primary.filePath) {
-    const location = primary.lineNumber ? `${primary.filePath}:${primary.lineNumber}` : primary.filePath;
-    parts.push(`(${location})`);
-  }
-  return parts.join(" ") || "Unknown location";
-}
-function DefaultErrorFallback({
-  error,
-  parsedStack,
-  resetErrorBoundary,
-  sx,
-  showDetails
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const shouldShowDetails = showDetails ?? (typeof process !== "undefined" && process.env.NODE_ENV === "development");
-  const handleCopyStack = async () => {
-    try {
-      const text = [
-        `Error: ${error.message}`,
-        `Location: ${getErrorLocation(error)}`,
-        "",
-        "Stack Trace:",
-        parsedStack.raw
-      ].join("\n");
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Box20,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: 200,
-        p: 3,
-        textAlign: "center",
-        ...sx
-      },
-      children: [
-        /* @__PURE__ */ jsx(Typography5, { variant: "h6", color: "error", gutterBottom: true, children: "Something went wrong" }),
-        /* @__PURE__ */ jsx(
-          Typography5,
-          {
-            variant: "body2",
-            sx: {
-              color: "text.secondary",
-              mb: 1,
-              maxWidth: 400
-            },
-            children: error.message || "An unexpected error occurred"
-          }
-        ),
-        shouldShowDetails && parsedStack.primary && /* @__PURE__ */ jsxs(
-          Typography5,
-          {
-            variant: "caption",
-            sx: {
-              color: "text.secondary",
-              mb: 2,
-              fontFamily: "monospace"
-            },
-            children: [
-              parsedStack.primary.filePath,
-              parsedStack.primary.lineNumber && `:${parsedStack.primary.lineNumber}`,
-              parsedStack.primary.functionName && ` (${parsedStack.primary.functionName})`
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", gap: 1, mb: 2 }, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: resetErrorBoundary, children: "Try Again" }),
-          shouldShowDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              IconButton3,
-              {
-                size: "small",
-                onClick: () => setExpanded(!expanded),
-                sx: {
-                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                  transition: "transform 0.2s"
-                },
-                children: /* @__PURE__ */ jsx(ExpandMoreIcon, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(IconButton3, { size: "small", onClick: handleCopyStack, title: "Copy error details", children: /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" }) }),
-            copied && /* @__PURE__ */ jsx(
-              Typography5,
-              {
-                variant: "caption",
-                sx: {
-                  color: "success.main",
-                  alignSelf: "center"
-                },
-                children: "Copied!"
-              }
-            )
-          ] })
-        ] }),
-        shouldShowDetails && /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsx(
-          Box20,
-          {
-            sx: {
-              mt: 1,
-              p: 2,
-              bgcolor: "grey.100",
-              borderRadius: 1,
-              maxWidth: 600,
-              maxHeight: 300,
-              overflow: "auto",
-              textAlign: "left"
-            },
-            children: /* @__PURE__ */ jsx(Typography5, { variant: "caption", component: "pre", sx: { fontFamily: "monospace", m: 0 }, children: parsedStack.frames.map((frame, i) => /* @__PURE__ */ jsxs(
-              Box20,
-              {
-                component: "span",
-                sx: {
-                  display: "block",
-                  color: frame.isAppCode ? "error.main" : "text.secondary",
-                  fontWeight: frame.isAppCode ? 600 : 400
-                },
-                children: [
-                  frame.functionName || "(anonymous)",
-                  " at ",
-                  frame.filePath || "unknown",
-                  frame.lineNumber && `:${frame.lineNumber}`
-                ]
-              },
-              i
-            )) })
-          }
-        ) })
-      ]
-    }
-  );
-}
-var ErrorBoundary = class extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false,
-      error: null,
-      errorInfo: null
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true,
-      error
-    };
-  }
-  componentDidCatch(error, errorInfo) {
-    const parsedStack = parseStackTrace(error.stack);
-    this.setState({ errorInfo });
-    this.props.onError?.(error, errorInfo, parsedStack);
-  }
-  componentDidUpdate(prevProps) {
-    const { resetKeys } = this.props;
-    const { hasError } = this.state;
-    if (hasError && resetKeys && prevProps.resetKeys) {
-      const hasKeyChanged = resetKeys.some((key, index) => key !== prevProps.resetKeys?.[index]);
-      if (hasKeyChanged) {
-        this.resetErrorBoundary();
-      }
-    }
-  }
-  resetErrorBoundary = () => {
-    this.props.onReset?.();
-    this.setState({
-      hasError: false,
-      error: null,
-      errorInfo: null
-    });
-  };
-  render() {
-    const { hasError, error, errorInfo } = this.state;
-    const { children, fallback, sx, showDetails } = this.props;
-    if (hasError && error) {
-      const parsedStack = parseStackTrace(error.stack);
-      const fallbackProps = {
-        error,
-        errorInfo,
-        parsedStack,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof fallback === "function") {
-        return fallback(fallbackProps);
-      }
-      if (fallback) {
-        return fallback;
-      }
-      return /* @__PURE__ */ jsx(DefaultErrorFallback, { ...fallbackProps, sx, showDetails });
-    }
-    return children;
-  }
-};
-function useErrorBoundary() {
-  const [, setError] = useState(null);
-  return (error) => {
-    setError(() => {
-      throw error;
-    });
-  };
-}
 var SettingsContext = createContext(null);
 function SettingsProvider({ children, defaultOpen = false }) {
   const [open, setOpen] = useState(defaultOpen);
@@ -4846,7 +4746,7 @@ var PRESET_COLORS = {
   minimal: "#64748B"
 };
 function Section({ title, children }) {
-  return /* @__PURE__ */ jsxs(Box20, { sx: { mb: 3 }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { mb: 3 }, children: [
     /* @__PURE__ */ jsx(
       Typography5,
       {
@@ -4990,7 +4890,7 @@ function PresetsSection() {
   const { settings, actions } = useSettings();
   const theme = useTheme();
   return /* @__PURE__ */ jsx(Section, { title: "Presets", children: /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       sx: {
         display: "grid",
@@ -5000,8 +4900,8 @@ function PresetsSection() {
       children: PRESET_NAMES.map((preset) => {
         const isSelected = settings.preset === preset;
         const color = PRESET_COLORS[preset] || "#666";
-        return /* @__PURE__ */ jsx(Tooltip, { title: PRESET_DISPLAY_NAMES[preset], placement: "top", children: /* @__PURE__ */ jsx(
-          Box20,
+        return /* @__PURE__ */ jsx(Tooltip2, { title: PRESET_DISPLAY_NAMES[preset], placement: "top", children: /* @__PURE__ */ jsx(
+          Box19,
           {
             onClick: () => actions.setPreset(preset),
             sx: {
@@ -5021,7 +4921,7 @@ function PresetsSection() {
               }
             },
             children: isSelected && /* @__PURE__ */ jsx(
-              Box20,
+              Box19,
               {
                 sx: {
                   width: 8,
@@ -5050,11 +4950,11 @@ var COLOR_OPTIONS = [
 function PrimaryColorSection() {
   const { settings, actions } = useSettings();
   const theme = useTheme();
-  return /* @__PURE__ */ jsx(Section, { title: "Primary Color", children: /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: [
+  return /* @__PURE__ */ jsx(Section, { title: "Primary Color", children: /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: [
     COLOR_OPTIONS.map((option) => {
       const isSelected = settings.primaryColor === option.value;
-      return /* @__PURE__ */ jsx(Tooltip, { title: option.label, placement: "top", children: /* @__PURE__ */ jsx(
-        Box20,
+      return /* @__PURE__ */ jsx(Tooltip2, { title: option.label, placement: "top", children: /* @__PURE__ */ jsx(
+        Box19,
         {
           onClick: () => actions.setPrimaryColor(option.value),
           sx: {
@@ -5073,7 +4973,7 @@ function PrimaryColorSection() {
             }
           },
           children: isSelected && /* @__PURE__ */ jsx(
-            Box20,
+            Box19,
             {
               sx: {
                 width: 6,
@@ -5086,8 +4986,8 @@ function PrimaryColorSection() {
         }
       ) }, option.value);
     }),
-    settings.primaryColor && /* @__PURE__ */ jsx(Tooltip, { title: "Reset to default", placement: "top", children: /* @__PURE__ */ jsx(
-      Box20,
+    settings.primaryColor && /* @__PURE__ */ jsx(Tooltip2, { title: "Reset to default", placement: "top", children: /* @__PURE__ */ jsx(
+      Box19,
       {
         onClick: () => actions.setPrimaryColor(null),
         sx: {
@@ -5177,10 +5077,10 @@ function NavLayoutSection() {
     { value: "horizontal", label: "Horizontal", icon: "\u25AC" },
     { value: "mini", label: "Mini", icon: "\u2502" }
   ];
-  return /* @__PURE__ */ jsx(Section, { title: "Navigation Layout", children: /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", gap: 1.5 }, children: layoutOptions.map((option) => {
+  return /* @__PURE__ */ jsx(Section, { title: "Navigation Layout", children: /* @__PURE__ */ jsx(Box19, { sx: { display: "flex", gap: 1.5 }, children: layoutOptions.map((option) => {
     const isSelected = settings.navLayout === option.value;
     return /* @__PURE__ */ jsxs(
-      Box20,
+      Box19,
       {
         onClick: () => actions.setNavLayout(option.value),
         sx: {
@@ -5248,7 +5148,7 @@ function SettingsDrawer({ width = 300, sections = DEFAULT_SECTIONS }) {
       },
       children: [
         /* @__PURE__ */ jsxs(
-          Box20,
+          Box19,
           {
             sx: {
               display: "flex",
@@ -5260,22 +5160,22 @@ function SettingsDrawer({ width = 300, sections = DEFAULT_SECTIONS }) {
             children: [
               /* @__PURE__ */ jsx(Typography5, { variant: "h6", sx: { fontWeight: 600 }, children: "Settings" }),
               /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
-                canReset && /* @__PURE__ */ jsx(Tooltip, { title: "Reset to defaults", children: /* @__PURE__ */ jsx(IconButton3, { size: "small", onClick: actions.reset, "aria-label": "Reset settings to defaults", children: /* @__PURE__ */ jsx(RefreshIcon, {}) }) }),
-                /* @__PURE__ */ jsx(IconButton3, { size: "small", onClick: drawer.onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsx(CloseIcon2, {}) })
+                canReset && /* @__PURE__ */ jsx(Tooltip2, { title: "Reset to defaults", children: /* @__PURE__ */ jsx(IconButton4, { size: "small", onClick: actions.reset, "aria-label": "Reset settings to defaults", children: /* @__PURE__ */ jsx(RefreshIcon, {}) }) }),
+                /* @__PURE__ */ jsx(IconButton4, { size: "small", onClick: drawer.onClose, "aria-label": "Close settings", children: /* @__PURE__ */ jsx(CloseIcon2, {}) })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Box20, { sx: { p: 2.5, flex: 1, overflowY: "auto" }, children: sections.map((section) => {
+        /* @__PURE__ */ jsx(Box19, { sx: { p: 2.5, flex: 1, overflowY: "auto" }, children: sections.map((section) => {
           const SectionComponent = SECTION_COMPONENTS[section];
           return SectionComponent ? /* @__PURE__ */ jsx(SectionComponent, {}, section) : null;
         }) }),
-        /* @__PURE__ */ jsx(Box20, { sx: { p: 2, borderTop: `1px solid ${theme.palette.divider}` }, children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "soft", color: "primary", onClick: drawer.onClose, children: "Close" }) })
+        /* @__PURE__ */ jsx(Box19, { sx: { p: 2, borderTop: `1px solid ${theme.palette.divider}` }, children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "soft", color: "primary", onClick: drawer.onClose, children: "Close" }) })
       ]
     }
   );
 }
-function Tooltip2({
+function Tooltip3({
   title,
   children,
   arrow = true,
@@ -5287,7 +5187,7 @@ function Tooltip2({
     return children;
   }
   return /* @__PURE__ */ jsx(
-    Tooltip,
+    Tooltip2,
     {
       title,
       arrow,
@@ -5305,6 +5205,9 @@ function Tooltip2({
     }
   );
 }
+function mergeSx(own, sx) {
+  return [own, ...Array.isArray(sx) ? sx : sx ? [sx] : []];
+}
 function Alert2({
   severity = "info",
   variant = "standard",
@@ -5314,27 +5217,31 @@ function Alert2({
   closable = false,
   icon,
   action,
-  sx
+  sx,
+  ref,
+  ...other
 }) {
   const muiVariant = variant === "soft" ? "standard" : variant;
   return /* @__PURE__ */ jsxs(
     MuiAlert,
     {
+      ref,
+      ...other,
       severity,
       variant: muiVariant,
       onClose: closable ? onClose : void 0,
       icon,
       action,
-      sx: {
-        ...variant === "soft" && {
+      sx: mergeSx(
+        variant === "soft" ? {
           backgroundColor: (theme) => alpha(theme.palette[severity].main, theme.palette.mode === "light" ? 0.12 : 0.16),
           color: (theme) => theme.palette.mode === "light" ? theme.palette[severity].dark : theme.palette[severity].light,
           "& .MuiAlert-icon": {
             color: "inherit"
           }
-        },
-        ...sx
-      },
+        } : {},
+        sx
+      ),
       children: [
         title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
         children
@@ -5342,19 +5249,24 @@ function Alert2({
     }
   );
 }
-function InlineAlert({ severity = "info", message, icon }) {
+function InlineAlert({ severity = "info", message, icon, sx, ref, ...other }) {
   return /* @__PURE__ */ jsx(
     MuiAlert,
     {
+      ref,
+      ...other,
       severity,
       icon,
-      sx: {
-        py: 0,
-        px: 1,
-        "& .MuiAlert-message": {
-          py: 0.5
-        }
-      },
+      sx: mergeSx(
+        {
+          py: 0,
+          px: 1,
+          "& .MuiAlert-message": {
+            py: 0.5
+          }
+        },
+        sx
+      ),
       children: message
     }
   );
@@ -5365,11 +5277,14 @@ function FormAlert({
   children,
   onClose,
   autoScroll = true,
-  sx
+  sx,
+  ref: outerRef,
+  ...other
 }) {
   const ref = useRef(null);
+  const handleRef = useForkRef(ref, outerRef);
   useEffect(() => {
-    if (!autoScroll) return;
+    if (!autoScroll) return void 0;
     const id = requestAnimationFrame(() => {
       ref.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     });
@@ -5378,17 +5293,20 @@ function FormAlert({
   return /* @__PURE__ */ jsxs(
     MuiAlert,
     {
-      ref,
+      ref: handleRef,
+      ...other,
       severity,
       onClose,
       role: "alert",
       "aria-live": "assertive",
       "aria-atomic": "true",
-      sx: {
-        alignItems: "flex-start",
-        mb: 2,
-        ...sx
-      },
+      sx: mergeSx(
+        {
+          alignItems: "flex-start",
+          mb: 2
+        },
+        sx
+      ),
       children: [
         title && /* @__PURE__ */ jsx(AlertTitle, { sx: { mb: 0.5 }, children: title }),
         children
@@ -5443,7 +5361,12 @@ var ItemRoot = styled("div", {
 }));
 var ItemIcon = styled("span")({
   display: "inherit",
-  "& > :first-of-type:not(style):not(:first-of-type ~ *)": {
+  // Constrain the icon (first real child) to 20×20. The previous
+  // selector chain `:first-of-type:not(style):not(:first-of-type ~ *)`
+  // was an obscure way to say "the first child that isn't a <style>
+  // tag" — replaced with the modern `:first-child:not(style)` for
+  // both readability and v9 lint compliance.
+  "& > :first-child:not(style)": {
     width: 20,
     height: 20
   }
@@ -5510,8 +5433,18 @@ function BreadcrumbLink({
   }
   return content;
 }
+var SAFE_LINK_SCHEMES = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+function isSafeExternalLink(href) {
+  const trimmed = href.trim();
+  if (trimmed.startsWith("/") || trimmed.startsWith("#")) return true;
+  try {
+    return SAFE_LINK_SCHEMES.has(new URL(trimmed, "https://placeholder.invalid").protocol);
+  } catch {
+    return false;
+  }
+}
 function MoreLinks({ links, sx, ...other }) {
-  return /* @__PURE__ */ jsx(MoreLinksRoot, { sx, ...other, children: links?.map((href) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href, variant: "body2", target: "_blank", rel: "noopener noreferrer", children: href }) }, href)) });
+  return /* @__PURE__ */ jsx(MoreLinksRoot, { sx, ...other, children: links?.filter(isSafeExternalLink).map((href) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href, variant: "body2", target: "_blank", rel: "noopener noreferrer", children: href }) }, href)) });
 }
 function Breadcrumbs({
   sx,
@@ -5573,7 +5506,7 @@ function NavCard({
   const label = ariaLabel ?? (typeof title === "string" && typeof description === "string" ? `${title} \u2014 ${description}` : void 0);
   const isVertical = orientation === "vertical";
   return /* @__PURE__ */ jsx(
-    MuiCard,
+    Card2,
     {
       variant: "outlined",
       ...linkProps,
@@ -5643,7 +5576,7 @@ function NavCard({
             // arrow into a narrow tile just steals text space).
             /* @__PURE__ */ jsxs(Fragment, { children: [
               icon && /* @__PURE__ */ jsx(
-                Box20,
+                Box19,
                 {
                   sx: {
                     width: 40,
@@ -5659,7 +5592,7 @@ function NavCard({
                   children: icon
                 }
               ),
-              /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
                 /* @__PURE__ */ jsx(
                   Typography5,
                   {
@@ -5699,10 +5632,10 @@ function NavCard({
                 }
               )
             ] })
-          ) : /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", gap: 1 }, children: [
-            /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 2, minWidth: 0 }, children: [
+          ) : /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", gap: 1 }, children: [
+            /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 2, minWidth: 0 }, children: [
               icon && /* @__PURE__ */ jsx(
-                Box20,
+                Box19,
                 {
                   sx: {
                     width: iconSize,
@@ -5718,8 +5651,8 @@ function NavCard({
                   children: icon
                 }
               ),
-              /* @__PURE__ */ jsxs(Box20, { sx: { minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+              /* @__PURE__ */ jsxs(Box19, { sx: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
                   /* @__PURE__ */ jsx(
                     Typography5,
                     {
@@ -5754,7 +5687,7 @@ function NavCard({
                 )
               ] })
             ] }),
-            arrow !== false && /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", alignItems: "center", flexShrink: 0, color: "text.secondary" }, children: arrow === true ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : arrow })
+            arrow !== false && /* @__PURE__ */ jsx(Box19, { sx: { display: "flex", alignItems: "center", flexShrink: 0, color: "text.secondary" }, children: arrow === true ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : arrow })
           ] })
         }
       )
@@ -5768,7 +5701,7 @@ function NavCardGrid({
   sx
 }) {
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       sx: {
         display: "grid",
@@ -5830,7 +5763,7 @@ function Drawer2({
       children: [
         (title || showCloseButton || headerActions) && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
-            Box20,
+            Box19,
             {
               sx: {
                 display: "flex",
@@ -5841,9 +5774,9 @@ function Drawer2({
               },
               children: [
                 title && /* @__PURE__ */ jsx(Typography5, { variant: "h6", component: "div", children: title }),
-                /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 1, ml: "auto" }, children: [
+                /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 1, ml: "auto" }, children: [
                   headerActions,
-                  showCloseButton && onClose && /* @__PURE__ */ jsx(IconButton3, { onClick: onClose, edge: "end", size: "small", "aria-label": "Close drawer", children: closeIcon ?? /* @__PURE__ */ jsx(DefaultCloseIcon, {}) })
+                  showCloseButton && onClose && /* @__PURE__ */ jsx(IconButton4, { onClick: onClose, edge: "end", size: "small", "aria-label": "Close drawer", children: closeIcon ?? /* @__PURE__ */ jsx(DefaultCloseIcon, {}) })
                 ] })
               ]
             }
@@ -5851,7 +5784,7 @@ function Drawer2({
           /* @__PURE__ */ jsx(Divider3, {})
         ] }),
         /* @__PURE__ */ jsx(
-          Box20,
+          Box19,
           {
             sx: {
               flex: 1,
@@ -5863,7 +5796,7 @@ function Drawer2({
         ),
         footer && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Divider3, {}),
-          /* @__PURE__ */ jsx(Box20, { sx: { p: 2 }, children: footer })
+          /* @__PURE__ */ jsx(Box19, { sx: { p: 2 }, children: footer })
         ] })
       ]
     }
@@ -5963,9 +5896,9 @@ function StepperActions({
   disableNext = false,
   actions
 }) {
-  return /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", gap: 2, mt: 3 }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", gap: 2, mt: 3 }, children: [
     /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: stepper.prevStep, disabled: stepper.isFirstStep, children: backLabel }),
-    /* @__PURE__ */ jsx(Box20, { sx: { flex: 1 } }),
+    /* @__PURE__ */ jsx(Box19, { sx: { flex: 1 } }),
     actions,
     /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: stepper.nextStep, disabled: disableNext, children: stepper.isLastStep ? finishLabel : nextLabel })
   ] });
@@ -6007,7 +5940,7 @@ var CIRCULAR_TYPES = ["donut", "radialBar", "pie", "polarArea"];
 function ChartLoading({ sx, className, type, ...other }) {
   const isCircular = type && CIRCULAR_TYPES.includes(type);
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       className: cn(chartClasses.loading, className),
       sx: [
@@ -6029,7 +5962,7 @@ function ChartLoading({ sx, className, type, ...other }) {
       ],
       ...other,
       children: /* @__PURE__ */ jsx(
-        Skeleton,
+        Skeleton3,
         {
           variant: "circular",
           sx: {
@@ -6378,6 +6311,17 @@ function deepMerge(target, source) {
   return output;
 }
 
+// src/components/lightbox/types.ts
+var DEFAULT_LIGHTBOX_LABELS = {
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  download: "Download",
+  share: "Share",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
+};
+
 // src/components/lightbox/classes.ts
 var lightboxClasses = {
   root: createClasses("lightbox__root"),
@@ -6428,12 +6372,14 @@ function Lightbox({
   closeOnBackdropClick = true,
   closeOnEsc = true,
   toolbar = { show: true, position: "top" },
+  labels: labelOverrides,
   sx,
   slotProps,
   className,
   ...dialogProps
 }) {
   const theme = useTheme();
+  const labels = useMemo(() => ({ ...DEFAULT_LIGHTBOX_LABELS, ...labelOverrides }), [labelOverrides]);
   const [currentIndex, setCurrentIndex] = useState(controlledIndex);
   const [zoomLevel, setZoomLevel] = useState(MIN_ZOOM);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -6502,14 +6448,11 @@ function Lightbox({
     setZoomLevel((prevZoom) => Math.min(prevZoom + ZOOM_STEP, MAX_ZOOM));
   }, []);
   const zoomOut = useCallback(() => {
-    setZoomLevel((prevZoom) => {
-      const newZoom = Math.max(prevZoom - ZOOM_STEP, MIN_ZOOM);
-      if (newZoom === MIN_ZOOM) {
-        setPosition({ x: 0, y: 0 });
-      }
-      return newZoom;
-    });
+    setZoomLevel((prevZoom) => Math.max(prevZoom - ZOOM_STEP, MIN_ZOOM));
   }, []);
+  useEffect(() => {
+    if (zoomLevel === MIN_ZOOM) setPosition({ x: 0, y: 0 });
+  }, [zoomLevel]);
   const zoomReset = useCallback(() => {
     setZoomLevel(MIN_ZOOM);
     setPosition({ x: 0, y: 0 });
@@ -6710,14 +6653,14 @@ function Lightbox({
                 /* @__PURE__ */ jsx(Typography5, { component: "span", sx: { mx: 0.5, opacity: 0.5 }, children: "/" }),
                 totalSlides
               ] }),
-              /* @__PURE__ */ jsx(Box20, { sx: { flex: 1 } }),
-              zoom && /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: 0.25 }, children: [
+              /* @__PURE__ */ jsx(Box19, { sx: { flex: 1 } }),
+              zoom && /* @__PURE__ */ jsxs(Box19, { sx: { display: "flex", alignItems: "center", gap: 0.25 }, children: [
                 /* @__PURE__ */ jsx(
                   GlassButton,
                   {
                     onClick: zoomOut,
                     disabled: zoomLevel <= MIN_ZOOM,
-                    "aria-label": "Zoom out",
+                    "aria-label": labels.zoomOut,
                     className: lightboxClasses.toolbarButton,
                     size: "small",
                     children: /* @__PURE__ */ jsx(ZoomOutIcon, { fontSize: "small" })
@@ -6745,7 +6688,7 @@ function Lightbox({
                   {
                     onClick: zoomIn,
                     disabled: zoomLevel >= MAX_ZOOM,
-                    "aria-label": "Zoom in",
+                    "aria-label": labels.zoomIn,
                     className: lightboxClasses.toolbarButton,
                     size: "small",
                     children: /* @__PURE__ */ jsx(ZoomInIcon, { fontSize: "small" })
@@ -6766,7 +6709,7 @@ function Lightbox({
                 GlassButton,
                 {
                   onClick: handleDownload,
-                  "aria-label": "Download",
+                  "aria-label": labels.download,
                   className: lightboxClasses.toolbarButton,
                   size: "small",
                   children: /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" })
@@ -6776,14 +6719,23 @@ function Lightbox({
                 GlassButton,
                 {
                   onClick: handleShare,
-                  "aria-label": "Share",
+                  "aria-label": labels.share,
                   className: lightboxClasses.toolbarButton,
                   size: "small",
                   children: /* @__PURE__ */ jsx(ShareIcon, { fontSize: "small" })
                 }
               ),
               toolbar?.buttons,
-              /* @__PURE__ */ jsx(GlassButton, { onClick: onClose, "aria-label": "Close", className: lightboxClasses.toolbarButton, size: "small", children: /* @__PURE__ */ jsx(CloseIcon3, { fontSize: "small" }) })
+              /* @__PURE__ */ jsx(
+                GlassButton,
+                {
+                  onClick: onClose,
+                  "aria-label": labels.close,
+                  className: lightboxClasses.toolbarButton,
+                  size: "small",
+                  children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+                }
+              )
             ]
           }
         ),
@@ -6897,7 +6849,7 @@ function Lightbox({
             className: cn(lightboxClasses.navButton, lightboxClasses.navPrev),
             side: "left",
             onClick: prev,
-            "aria-label": "Previous",
+            "aria-label": labels.previous,
             sx: slotProps?.navButton,
             children: /* @__PURE__ */ jsx(ChevronLeftIcon, { sx: { fontSize: 28 } })
           }
@@ -6908,7 +6860,7 @@ function Lightbox({
             className: cn(lightboxClasses.navButton, lightboxClasses.navNext),
             side: "right",
             onClick: next,
-            "aria-label": "Next",
+            "aria-label": labels.next,
             sx: slotProps?.navButton,
             children: /* @__PURE__ */ jsx(ChevronRightIcon, { sx: { fontSize: 28 } })
           }
@@ -6933,7 +6885,7 @@ function Lightbox({
                   }
                 ),
                 isThumbVideo && /* @__PURE__ */ jsx(
-                  Box20,
+                  Box19,
                   {
                     sx: {
                       position: "absolute",
@@ -6943,7 +6895,7 @@ function Lightbox({
                       justifyContent: "center",
                       bgcolor: alpha(theme.palette.common.black, 0.35)
                     },
-                    children: /* @__PURE__ */ jsx(PlayArrowIcon, { sx: { fontSize: 18, color: "common.white", opacity: 0.9 } })
+                    children: /* @__PURE__ */ jsx(PlayIcon, { sx: { fontSize: 18, color: "common.white", opacity: 0.9 } })
                   }
                 )
               ]
@@ -6963,8 +6915,8 @@ function Lightbox({
                 /* @__PURE__ */ jsx(Typography5, { component: "span", sx: { mx: 0.5, opacity: 0.5 }, children: "/" }),
                 totalSlides
               ] }),
-              /* @__PURE__ */ jsx(Box20, { sx: { flex: 1 } }),
-              /* @__PURE__ */ jsx(GlassButton, { onClick: onClose, "aria-label": "Close", size: "small", children: /* @__PURE__ */ jsx(CloseIcon3, { fontSize: "small" }) })
+              /* @__PURE__ */ jsx(Box19, { sx: { flex: 1 } }),
+              /* @__PURE__ */ jsx(GlassButton, { onClick: onClose, "aria-label": labels.close, size: "small", children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
             ]
           }
         )
@@ -6986,7 +6938,7 @@ var StyledDialog = styled(Dialog)(({ theme }) => ({
     backdropFilter: "blur(8px)"
   }
 }));
-var LightboxContainer = styled(Box20)({
+var LightboxContainer = styled(Box19)({
   display: "flex",
   flexDirection: "column",
   width: "100vw",
@@ -6995,7 +6947,7 @@ var LightboxContainer = styled(Box20)({
   overflow: "hidden",
   userSelect: "none"
 });
-var GlassToolbar = styled(Box20)(({ theme, placement }) => ({
+var GlassToolbar = styled(Box19)(({ theme, placement }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5),
@@ -7009,7 +6961,7 @@ var GlassToolbar = styled(Box20)(({ theme, placement }) => ({
   background: `linear-gradient(${placement === "top" ? "to bottom" : "to top"}, ${alpha(theme.palette.common.black, 0.55)} 0%, ${alpha(theme.palette.common.black, 0.2)} 60%, transparent 100%)`,
   transition: "opacity 0.3s ease"
 }));
-var GlassButton = styled(IconButton3)(({ theme }) => ({
+var GlassButton = styled(IconButton4)(({ theme }) => ({
   color: alpha(theme.palette.common.white, 0.85),
   borderRadius: Number(theme.shape.borderRadius) * 1.5,
   padding: 6,
@@ -7042,7 +6994,7 @@ var CounterChip = styled(Typography5)(({ theme }) => ({
   alignItems: "center",
   letterSpacing: "0.02em"
 }));
-var SlideContainer = styled(Box20)({
+var SlideContainer = styled(Box19)({
   flex: 1,
   display: "flex",
   alignItems: "center",
@@ -7050,7 +7002,7 @@ var SlideContainer = styled(Box20)({
   position: "relative",
   overflow: "hidden"
 });
-var SlideLayer = styled(Box20)({
+var SlideLayer = styled(Box19)({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -7058,7 +7010,7 @@ var SlideLayer = styled(Box20)({
   justifyContent: "center",
   willChange: "opacity, transform"
 });
-var LoadingOverlay = styled(Box20)({
+var LoadingOverlay = styled(Box19)({
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -7072,7 +7024,7 @@ var StyledImage = styled("img")({
   willChange: "transform, opacity",
   borderRadius: 2
 });
-var VideoWrapper = styled(Box20)({
+var VideoWrapper = styled(Box19)({
   position: "relative",
   display: "flex",
   alignItems: "center",
@@ -7096,7 +7048,7 @@ var StyledVideo = styled("video")(({ theme }) => ({
     fontSize: 12
   }
 }));
-var GlassCaption = styled(Box20)(({ theme }) => ({
+var GlassCaption = styled(Box19)(({ theme }) => ({
   position: "absolute",
   bottom: theme.spacing(2.5),
   left: "50%",
@@ -7116,7 +7068,7 @@ var GlassCaption = styled(Box20)(({ theme }) => ({
     to: { opacity: 1, transform: "translateX(-50%) translateY(0)" }
   }
 }));
-var NavArrow = styled(IconButton3)(({ theme, side }) => ({
+var NavArrow = styled(IconButton4)(({ theme, side }) => ({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
@@ -7143,7 +7095,7 @@ var NavArrow = styled(IconButton3)(({ theme, side }) => ({
     transform: "translateY(-50%) scale(0.95)"
   }
 }));
-var ThumbnailStrip = styled(Box20)(({ theme }) => ({
+var ThumbnailStrip = styled(Box19)(({ theme }) => ({
   display: "flex",
   gap: theme.spacing(0.75),
   padding: theme.spacing(1, 2),
@@ -7158,7 +7110,7 @@ var ThumbnailStrip = styled(Box20)(({ theme }) => ({
     display: "none"
   }
 }));
-var ThumbItem = styled(Box20)(({ theme, active }) => ({
+var ThumbItem = styled(Box19)(({ theme, active }) => ({
   flexShrink: 0,
   width: 56,
   height: 56,
@@ -7187,18 +7139,14 @@ var ThumbItem = styled(Box20)(({ theme, active }) => ({
     borderColor: active ? theme.palette.primary.main : alpha(theme.palette.common.white, 0.25)
   }
 }));
-var MIN_ZOOM2 = 1;
-var MAX_ZOOM2 = 4;
-var ZOOM_STEP2 = 0.5;
 function useLightbox(options = {}) {
   const { defaultOpen = false, defaultIndex = 0, totalSlides = 0, loop = false } = options;
   const [open, setOpen] = useState(defaultOpen);
   const [index, setIndex] = useState(defaultIndex);
-  const [zoomLevel, setZoomLevel] = useState(MIN_ZOOM2);
   const goTo = useCallback(
     (newIndex) => {
       if (totalSlides === 0) {
-        setIndex(newIndex);
+        setIndex(0);
         return;
       }
       if (loop) {
@@ -7206,7 +7154,6 @@ function useLightbox(options = {}) {
       } else {
         setIndex(Math.max(0, Math.min(newIndex, totalSlides - 1)));
       }
-      setZoomLevel(MIN_ZOOM2);
     },
     [totalSlides, loop]
   );
@@ -7218,21 +7165,10 @@ function useLightbox(options = {}) {
   }, [index, goTo]);
   const onOpen = useCallback((slideIndex = 0) => {
     setIndex(slideIndex);
-    setZoomLevel(MIN_ZOOM2);
     setOpen(true);
   }, []);
   const onClose = useCallback(() => {
     setOpen(false);
-    setZoomLevel(MIN_ZOOM2);
-  }, []);
-  const zoomIn = useCallback(() => {
-    setZoomLevel((prevZoom) => Math.min(prevZoom + ZOOM_STEP2, MAX_ZOOM2));
-  }, []);
-  const zoomOut = useCallback(() => {
-    setZoomLevel((prevZoom) => Math.max(prevZoom - ZOOM_STEP2, MIN_ZOOM2));
-  }, []);
-  const zoomReset = useCallback(() => {
-    setZoomLevel(MIN_ZOOM2);
   }, []);
   const onIndexChange = useCallback(
     (newIndex) => {
@@ -7257,10 +7193,6 @@ function useLightbox(options = {}) {
     goTo,
     next,
     prev,
-    zoomLevel,
-    zoomIn,
-    zoomOut,
-    zoomReset,
     getLightboxProps
   };
 }
@@ -7579,7 +7511,7 @@ function Carousel({
               isHorizontal,
               direction: "prev",
               sx: slotProps?.arrow,
-              children: isHorizontal ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {})
+              children: isHorizontal ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {})
             }
           ),
           /* @__PURE__ */ jsx(
@@ -7594,7 +7526,7 @@ function Carousel({
               isHorizontal,
               direction: "next",
               sx: slotProps?.arrow,
-              children: isHorizontal ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {})
+              children: isHorizontal ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {})
             }
           )
         ] }),
@@ -7628,31 +7560,31 @@ function Carousel({
     }
   );
 }
-var CarouselRoot = styled(Box20)({
+var CarouselRoot = styled(Box19)({
   position: "relative",
   width: "100%",
   overflow: "hidden",
   outline: "none"
 });
-var CarouselContainer = styled(Box20)({
+var CarouselContainer = styled(Box19)({
   position: "relative",
   width: "100%",
   overflow: "hidden"
 });
-var CarouselTrack = styled(Box20)({
+var CarouselTrack = styled(Box19)({
   display: "flex",
   width: "100%",
   willChange: "transform",
   userSelect: "none"
 });
-var CarouselSlide = styled(Box20)({
+var CarouselSlide = styled(Box19)({
   flexShrink: 0,
   "& > *": {
     width: "100%",
     height: "100%"
   }
 });
-var ArrowButton = styled(IconButton3)(
+var ArrowButton = styled(IconButton4)(
   ({ theme, isHorizontal, direction }) => ({
     position: "absolute",
     zIndex: 10,
@@ -7675,7 +7607,7 @@ var ArrowButton = styled(IconButton3)(
     }
   })
 );
-var DotsContainer = styled(Box20)(({ theme, dotsPosition }) => ({
+var DotsContainer = styled(Box19)(({ theme, dotsPosition }) => ({
   display: "flex",
   gap: theme.spacing(1),
   position: "absolute",
@@ -7736,6 +7668,7 @@ function useCarousel(options) {
   const [isPlaying, setIsPlaying] = useState(autoplay);
   const carouselRef = useRef(null);
   const autoplayRef = useRef(null);
+  const currentIndexRef = useRef(currentIndex);
   const maxIndex = Math.max(0, totalSlides - slidesToShow);
   const canPrev = loop || currentIndex > 0;
   const canNext = loop || currentIndex < maxIndex;
@@ -7751,6 +7684,8 @@ function useCarousel(options) {
       } else {
         newIndex = Math.max(0, Math.min(index, maxIndex));
       }
+      if (newIndex === currentIndexRef.current) return;
+      currentIndexRef.current = newIndex;
       setCurrentIndex(newIndex);
       onSlideChange?.(newIndex);
     },
@@ -7779,7 +7714,7 @@ function useCarousel(options) {
   useEffect(() => {
     if (isPlaying && totalSlides > slidesToShow) {
       autoplayRef.current = setInterval(() => {
-        goTo(currentIndex + slidesToScroll);
+        goTo(currentIndexRef.current + slidesToScroll);
       }, autoplayInterval);
       return () => {
         if (autoplayRef.current) {
@@ -7789,7 +7724,7 @@ function useCarousel(options) {
       };
     }
     return void 0;
-  }, [isPlaying, currentIndex, slidesToScroll, autoplayInterval, totalSlides, slidesToShow, goTo]);
+  }, [isPlaying, slidesToScroll, autoplayInterval, totalSlides, slidesToShow, goTo]);
   useEffect(
     () => () => {
       if (autoplayRef.current) {
@@ -7866,11 +7801,17 @@ var navSectionCssVars = {
     "--nav-icon-active-color": theme.palette.primary.main,
     // Colors - disabled
     "--nav-item-disabled-color": theme.palette.text.disabled,
-    // Subheader
+    // Subheader. Asymmetric vertical padding (top < bottom) tightens
+    // the gap to the previous section's last item while preserving
+    // the visual grouping with the items belonging to THIS section.
+    // Pre-fix `8px 8px 8px 12px` summed with the parent `gap: 4px`
+    // and the previous item's `padding-bottom: 4px` to ~16px above
+    // the title, which read as a disconnect rather than a section
+    // boundary.
     "--nav-subheader-font-size": "0.6875rem",
     "--nav-subheader-font-weight": "700",
     "--nav-subheader-color": theme.palette.text.disabled,
-    "--nav-subheader-padding": "8px 8px 8px 12px",
+    "--nav-subheader-padding": "4px 8px 8px 12px",
     // Sub-item adjustments
     "--nav-sub-item-padding": "4px 8px 4px 12px",
     "--nav-sub-item-margin-left": "40px",
@@ -7949,9 +7890,9 @@ function getNavCssVars(theme, variant) {
       return navSectionCssVars.vertical(theme);
   }
 }
-var Nav = forwardRef(function Nav2({ className, sx, ...other }, ref) {
+function Nav({ className, sx, ref, ...other }) {
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       component: "nav",
       ref,
@@ -7967,10 +7908,10 @@ var Nav = forwardRef(function Nav2({ className, sx, ...other }, ref) {
       ...other
     }
   );
-});
-var NavUl = forwardRef(function NavUl2({ className, sx, ...other }, ref) {
+}
+function NavUl({ className, sx, ref, ...other }) {
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       component: "ul",
       ref,
@@ -7988,10 +7929,10 @@ var NavUl = forwardRef(function NavUl2({ className, sx, ...other }, ref) {
       ...other
     }
   );
-});
-var NavLi = forwardRef(function NavLi2({ className, ...other }, ref) {
+}
+function NavLi({ className, ref, ...other }) {
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       component: "li",
       ref,
@@ -8003,7 +7944,7 @@ var NavLi = forwardRef(function NavLi2({ className, ...other }, ref) {
       ...other
     }
   );
-});
+}
 var StyledSubheader = styled(ButtonBase)(({ theme }) => ({
   width: "100%",
   cursor: "pointer",
@@ -8043,12 +7984,12 @@ var ArrowIcon = styled("span")(({ open }) => ({
     transform: "rotate(-45deg)"
   }
 }));
-var NavSubheader = forwardRef(function NavSubheader2({ className, open, onClick, children, ...other }, ref) {
+function NavSubheader({ className, open, onClick, children, ref, ...other }) {
   return /* @__PURE__ */ jsxs(StyledSubheader, { ref, className: cn(navSectionClasses.subheader, className), onClick, ...other, children: [
     children,
     onClick && /* @__PURE__ */ jsx(ArrowIcon, { open })
   ] });
-});
+}
 var StyledNavItem = styled(ButtonBase, {
   shouldForwardProp: (prop) => !["active", "open", "depth", "hasChild"].includes(prop)
 })(
@@ -8087,7 +8028,7 @@ var StyledNavItem = styled(ButtonBase, {
     }
   })
 );
-var NavItemBase = forwardRef(function NavItemBase2({ className, active, disabled, open, depth, hasChild, ...other }, ref) {
+function NavItemBase({ className, active, disabled, open, depth, hasChild, ref, ...other }) {
   return /* @__PURE__ */ jsx(
     StyledNavItem,
     {
@@ -8107,8 +8048,8 @@ var NavItemBase = forwardRef(function NavItemBase2({ className, active, disabled
       ...other
     }
   );
-});
-var IconWrapper2 = styled("span")({
+}
+var IconWrapper = styled("span")({
   width: "var(--nav-icon-size, 24px)",
   height: "var(--nav-icon-size, 24px)",
   flexShrink: 0,
@@ -8124,7 +8065,7 @@ var IconWrapper2 = styled("span")({
 });
 function NavIcon({ icon, className }) {
   if (!icon) return null;
-  return /* @__PURE__ */ jsx(IconWrapper2, { className: cn("nav-icon", navSectionClasses.icon, className), children: icon });
+  return /* @__PURE__ */ jsx(IconWrapper, { className: cn("nav-icon", navSectionClasses.icon, className), children: icon });
 }
 var TextsWrapper = styled("span")({
   flex: "1 1 auto",
@@ -8351,11 +8292,12 @@ function resolveInfo(info, render) {
   if (!info) return void 0;
   if (Array.isArray(info) && render?.navInfo) {
     const infoComponents = info.map((key) => render.navInfo?.(key));
-    return /* @__PURE__ */ jsx(Fragment, { children: infoComponents.map((comp, idx) => /* @__PURE__ */ jsx(Box20, { component: "span", children: comp && Object.values(comp)[0] }, idx)) });
+    return /* @__PURE__ */ jsx(Fragment, { children: infoComponents.map((comp, idx) => /* @__PURE__ */ jsx(Box19, { component: "span", children: comp && Object.values(comp)[0] }, idx)) });
   }
   return info;
 }
-var NavItem = forwardRef(function NavItem2(props, ref) {
+function NavItem(props) {
+  const { ref } = props;
   const {
     // Data props
     path,
@@ -8411,10 +8353,10 @@ var NavItem = forwardRef(function NavItem2(props, ref) {
     }
   );
   if (caption && depth === 1) {
-    return /* @__PURE__ */ jsx(Tooltip, { title: caption, placement: "right", arrow: true, children: content });
+    return /* @__PURE__ */ jsx(Tooltip2, { title: caption, placement: "right", arrow: true, children: content });
   }
   return content;
-});
+}
 var NavContext = createContext(void 0);
 function useNavPathname() {
   const context = useContext(NavContext);
@@ -8875,7 +8817,7 @@ function MiniNavList({
         )
       }
     )
-  ] }) : /* @__PURE__ */ jsx(Tooltip, { title: data.title, placement: "right", arrow: true, children: content }) });
+  ] }) : /* @__PURE__ */ jsx(Tooltip2, { title: data.title, placement: "right", arrow: true, children: content }) });
 }
 function MiniDropdown({
   data,
@@ -9033,17 +8975,17 @@ function megaMenuCssVars(theme, variant) {
       return commonVars;
   }
 }
-var Nav3 = styled("nav")({
+var Nav2 = styled("nav")({
   display: "flex",
   flexShrink: 0
 });
-var NavUl3 = styled("ul")({
+var NavUl2 = styled("ul")({
   display: "flex",
   listStyle: "none",
   padding: 0,
   margin: 0
 });
-var NavLi3 = styled("li")({
+var NavLi2 = styled("li")({
   display: "flex"
 });
 var NavButton = styled("button")(({ theme, active, open }) => ({
@@ -9077,7 +9019,7 @@ var NavButton = styled("button")(({ theme, active, open }) => ({
     cursor: "not-allowed"
   }
 }));
-var IconWrapper3 = styled("span")({
+var IconWrapper2 = styled("span")({
   width: "var(--nav-icon-size)",
   height: "var(--nav-icon-size)",
   marginRight: 8,
@@ -9145,7 +9087,7 @@ var SubItemLink = styled(Link, {
     color: theme.palette.text.primary
   }
 }));
-var TagsContainer = styled(Box20)(({ theme }) => ({
+var TagsContainer = styled(Box19)(({ theme }) => ({
   display: "flex",
   flexWrap: "wrap",
   gap: 8,
@@ -9209,7 +9151,7 @@ function MegaMenuList({ data, render, slotProps, slots, enabledRootRedirect }) {
     handleClose();
   }, [pathname, handleClose]);
   const icon = typeof data.icon === "string" && render?.navIcon ? render.navIcon[data.icon] : data.icon;
-  return /* @__PURE__ */ jsxs(NavLi3, { className: megaMenuClasses.li, children: [
+  return /* @__PURE__ */ jsxs(NavLi2, { className: megaMenuClasses.li, children: [
     /* @__PURE__ */ jsxs(
       NavButton,
       {
@@ -9225,7 +9167,7 @@ function MegaMenuList({ data, render, slotProps, slots, enabledRootRedirect }) {
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose,
         children: [
-          icon && /* @__PURE__ */ jsx(IconWrapper3, { className: megaMenuClasses.icon, children: icon }),
+          icon && /* @__PURE__ */ jsx(IconWrapper2, { className: megaMenuClasses.icon, children: icon }),
           /* @__PURE__ */ jsx("span", { className: megaMenuClasses.title, children: data.title }),
           hasChild && /* @__PURE__ */ jsx(ArrowIcon2, { open, className: megaMenuClasses.arrow })
         ]
@@ -9279,9 +9221,9 @@ function MegaMenuList({ data, render, slotProps, slots, enabledRootRedirect }) {
                 item.title
               );
             }) }),
-            idx === 0 && data.moreLink && /* @__PURE__ */ jsx(Box20, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(MoreLink, { href: data.moreLink.path, className: megaMenuClasses.moreLink, sx: slotProps?.moreLink, children: data.moreLink.title }) })
+            idx === 0 && data.moreLink && /* @__PURE__ */ jsx(Box19, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(MoreLink, { href: data.moreLink.path, className: megaMenuClasses.moreLink, sx: slotProps?.moreLink, children: data.moreLink.title }) })
           ] }, section.subheader ?? idx)) }),
-          data.tags && data.tags.length > 0 && /* @__PURE__ */ jsx(Box20, { sx: { px: "var(--nav-dropdown-padding)", pb: "var(--nav-dropdown-padding)" }, children: /* @__PURE__ */ jsx(TagsContainer, { className: megaMenuClasses.tags, sx: slotProps?.tags, children: data.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { href: tag.path, children: tag.title }, tag.title)) }) }),
+          data.tags && data.tags.length > 0 && /* @__PURE__ */ jsx(Box19, { sx: { px: "var(--nav-dropdown-padding)", pb: "var(--nav-dropdown-padding)" }, children: /* @__PURE__ */ jsx(TagsContainer, { className: megaMenuClasses.tags, sx: slotProps?.tags, children: data.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { href: tag.path, children: tag.title }, tag.title)) }) }),
           slots?.bottomArea
         ]
       }
@@ -9302,12 +9244,12 @@ function MegaMenuHorizontal({
   const theme = useTheme();
   const cssVars = { ...megaMenuCssVars(theme, "horizontal"), ...overridesVars };
   return /* @__PURE__ */ jsx(
-    Nav3,
+    Nav2,
     {
       className: cn(megaMenuClasses.root, megaMenuClasses.horizontal, className),
       sx: [{ ...cssVars }, ...Array.isArray(sx) ? sx : [sx]],
       ...other,
-      children: /* @__PURE__ */ jsx(NavUl3, { className: megaMenuClasses.ul, sx: { gap: "var(--nav-item-gap)" }, children: data.map((item) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(NavUl2, { className: megaMenuClasses.ul, sx: { gap: "var(--nav-item-gap)" }, children: data.map((item) => /* @__PURE__ */ jsx(
         MegaMenuList,
         {
           data: item,
@@ -9321,19 +9263,19 @@ function MegaMenuHorizontal({
     }
   );
 }
-var Nav4 = styled("nav")({
+var Nav3 = styled("nav")({
   display: "flex",
   flexDirection: "column",
   flexShrink: 0
 });
-var NavUl4 = styled("ul")({
+var NavUl3 = styled("ul")({
   display: "flex",
   flexDirection: "column",
   listStyle: "none",
   padding: 0,
   margin: 0
 });
-var NavLi4 = styled("li")({
+var NavLi3 = styled("li")({
   display: "flex",
   flexDirection: "column"
 });
@@ -9369,7 +9311,7 @@ var NavButton2 = styled("button")(({ theme, active, open }) => ({
     cursor: "not-allowed"
   }
 }));
-var IconWrapper4 = styled("span")({
+var IconWrapper3 = styled("span")({
   width: "var(--nav-icon-size)",
   height: "var(--nav-icon-size)",
   marginRight: 12,
@@ -9415,7 +9357,10 @@ var SectionHeader2 = styled(Typography5)(({ theme }) => ({
   letterSpacing: "0.08em",
   marginBottom: 8,
   marginTop: 16,
-  "&:first-of-type": {
+  // `:first-child` — homogeneous list of subheaders; child-position
+  // selector is equivalent to of-type but doesn't tie correctness
+  // to tag-name uniqueness.
+  "&:first-child": {
     marginTop: 0
   }
 }));
@@ -9459,7 +9404,7 @@ function MegaMenuList2({ data, render, slotProps, slots, enabledRootRedirect })
     handleClose();
   }, [pathname, handleClose]);
   const icon = typeof data.icon === "string" && render?.navIcon ? render.navIcon[data.icon] : data.icon;
-  return /* @__PURE__ */ jsxs(NavLi4, { className: megaMenuClasses.li, children: [
+  return /* @__PURE__ */ jsxs(NavLi3, { className: megaMenuClasses.li, children: [
     /* @__PURE__ */ jsxs(
       NavButton2,
       {
@@ -9475,7 +9420,7 @@ function MegaMenuList2({ data, render, slotProps, slots, enabledRootRedirect })
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose,
         children: [
-          icon && /* @__PURE__ */ jsx(IconWrapper4, { className: megaMenuClasses.icon, children: icon }),
+          icon && /* @__PURE__ */ jsx(IconWrapper3, { className: megaMenuClasses.icon, children: icon }),
           /* @__PURE__ */ jsx("span", { className: megaMenuClasses.title, children: data.title }),
           hasChild && /* @__PURE__ */ jsx(ArrowIcon3, { open, className: megaMenuClasses.arrow })
         ]
@@ -9511,7 +9456,7 @@ function MegaMenuList2({ data, render, slotProps, slots, enabledRootRedirect })
         disableRestoreFocus: true,
         children: [
           slots?.topArea,
-          /* @__PURE__ */ jsx(DropdownContent2, { elevation: 0, className: megaMenuClasses.dropdown, children: data.children?.map((section, idx) => /* @__PURE__ */ jsxs(Box20, { children: [
+          /* @__PURE__ */ jsx(DropdownContent2, { elevation: 0, className: megaMenuClasses.dropdown, children: data.children?.map((section, idx) => /* @__PURE__ */ jsxs(Box19, { children: [
             section.subheader && /* @__PURE__ */ jsx(SectionHeader2, { className: megaMenuClasses.subheader, children: section.subheader }),
             /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: section.items.map((item) => {
               const itemActive = isActiveLink(pathname, item.path);
@@ -9551,12 +9496,12 @@ function MegaMenuVertical({
   const theme = useTheme();
   const cssVars = { ...megaMenuCssVars(theme, "vertical"), ...overridesVars };
   return /* @__PURE__ */ jsx(
-    Nav4,
+    Nav3,
     {
       className: cn(megaMenuClasses.root, megaMenuClasses.vertical, className),
       sx: [{ ...cssVars }, ...Array.isArray(sx) ? sx : [sx]],
       ...other,
-      children: /* @__PURE__ */ jsx(NavUl4, { className: megaMenuClasses.ul, sx: { gap: "var(--nav-item-gap)" }, children: data.map((item) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(NavUl3, { className: megaMenuClasses.ul, sx: { gap: "var(--nav-item-gap)" }, children: data.map((item) => /* @__PURE__ */ jsx(
         MegaMenuList2,
         {
           data: item,
@@ -9570,13 +9515,13 @@ function MegaMenuVertical({
     }
   );
 }
-var Nav5 = styled("nav")({
+var Nav4 = styled("nav")({
   display: "flex",
   flexDirection: "column",
   flexShrink: 0,
   width: "100%"
 });
-var NavUl5 = styled("ul")({
+var NavUl4 = styled("ul")({
   display: "flex",
   flexDirection: "column",
   listStyle: "none",
@@ -9584,7 +9529,7 @@ var NavUl5 = styled("ul")({
   margin: 0,
   width: "100%"
 });
-var NavLi5 = styled("li")({
+var NavLi4 = styled("li")({
   display: "flex",
   flexDirection: "column",
   width: "100%"
@@ -9621,7 +9566,7 @@ var NavButton3 = styled("button")(({ theme, active }) => ({
   }
 }));
 var NavLink = styled("a")(({ theme, active }) => navItemStyles(theme, active));
-var IconWrapper5 = styled("span")({
+var IconWrapper4 = styled("span")({
   width: "var(--nav-icon-size)",
   height: "var(--nav-icon-size)",
   marginRight: 12,
@@ -9653,7 +9598,7 @@ var ArrowIcon4 = styled("span")(({ open }) => ({
     transform: "rotate(-45deg)"
   }
 }));
-var CollapseContent = styled(Box20)(({ theme }) => ({
+var CollapseContent = styled(Box19)(({ theme }) => ({
   padding: "8px 0",
   paddingLeft: 40,
   backgroundColor: theme.palette.background.neutral
@@ -9701,7 +9646,7 @@ function MegaMenuList3({ data, render, slotProps, enabledRootRedirect }) {
   const icon = typeof data.icon === "string" && render?.navIcon ? render.navIcon[data.icon] : data.icon;
   if (!hasChild) {
     const isExternal = isExternalLink(data.path);
-    return /* @__PURE__ */ jsx(NavLi5, { className: megaMenuClasses.li, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(NavLi4, { className: megaMenuClasses.li, children: /* @__PURE__ */ jsxs(
       NavLink,
       {
         href: data.path,
@@ -9710,13 +9655,13 @@ function MegaMenuList3({ data, render, slotProps, enabledRootRedirect }) {
         target: isExternal ? "_blank" : void 0,
         rel: isExternal ? "noopener noreferrer" : void 0,
         children: [
-          icon && /* @__PURE__ */ jsx(IconWrapper5, { className: megaMenuClasses.icon, children: icon }),
+          icon && /* @__PURE__ */ jsx(IconWrapper4, { className: megaMenuClasses.icon, children: icon }),
           /* @__PURE__ */ jsx("span", { className: megaMenuClasses.title, children: data.title })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs(NavLi5, { className: megaMenuClasses.li, children: [
+  return /* @__PURE__ */ jsxs(NavLi4, { className: megaMenuClasses.li, children: [
     /* @__PURE__ */ jsxs(
       NavButton3,
       {
@@ -9730,13 +9675,13 @@ function MegaMenuList3({ data, render, slotProps, enabledRootRedirect }) {
         disabled: data.disabled,
         onClick: handleToggle,
         children: [
-          icon && /* @__PURE__ */ jsx(IconWrapper5, { className: megaMenuClasses.icon, children: icon }),
+          icon && /* @__PURE__ */ jsx(IconWrapper4, { className: megaMenuClasses.icon, children: icon }),
           /* @__PURE__ */ jsx("span", { className: megaMenuClasses.title, children: data.title }),
           /* @__PURE__ */ jsx(ArrowIcon4, { open, className: megaMenuClasses.arrow })
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Collapse, { in: open, unmountOnExit: true, children: /* @__PURE__ */ jsx(CollapseContent, { children: data.children?.map((section, idx) => /* @__PURE__ */ jsxs(Box20, { children: [
+    /* @__PURE__ */ jsx(Collapse, { in: open, unmountOnExit: true, children: /* @__PURE__ */ jsx(CollapseContent, { children: data.children?.map((section, idx) => /* @__PURE__ */ jsxs(Box19, { children: [
       section.subheader && /* @__PURE__ */ jsx(SectionHeader3, { className: megaMenuClasses.subheader, children: section.subheader }),
       /* @__PURE__ */ jsx(Stack, { children: section.items.map((item) => {
         const itemActive = isActiveLink(pathname, item.path);
@@ -9771,12 +9716,12 @@ function MegaMenuMobile({
   const theme = useTheme();
   const cssVars = { ...megaMenuCssVars(theme, "mobile"), ...overridesVars };
   return /* @__PURE__ */ jsx(
-    Nav5,
+    Nav4,
     {
       className: cn(megaMenuClasses.root, megaMenuClasses.mobile, className),
       sx: [{ ...cssVars }, ...Array.isArray(sx) ? sx : [sx]],
       ...other,
-      children: /* @__PURE__ */ jsx(NavUl5, { className: megaMenuClasses.ul, children: data.map((item) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(NavUl4, { className: megaMenuClasses.ul, children: data.map((item) => /* @__PURE__ */ jsx(
         MegaMenuList3,
         {
           data: item,
@@ -9789,1101 +9734,6 @@ function MegaMenuMobile({
     }
   );
 }
-var ScrollSpyContext = createContext({
-  activeId: null,
-  registerSection: () => {
-  },
-  unregisterSection: () => {
-  }
-});
-function useScrollSpy() {
-  return useContext(ScrollSpyContext);
-}
-function ScrollSpyProvider({
-  children,
-  offset = 80,
-  root = null,
-  headingSelector = "h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]",
-  containerRef
-}) {
-  const [activeId, setActiveId] = useState(null);
-  const sectionsRef = useRef(/* @__PURE__ */ new Map());
-  const observerRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const createObserver = useCallback(() => {
-    observerRef.current?.disconnect();
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
-        if (visible.length > 0) {
-          setActiveId(visible[0].target.id);
-        }
-      },
-      {
-        root,
-        rootMargin: `-${offset}px 0px -60% 0px`,
-        threshold: 0
-      }
-    );
-    sectionsRef.current.forEach((element) => observer.observe(element));
-    observerRef.current = observer;
-  }, [offset, root]);
-  useEffect(() => {
-    if (!headingSelector) return void 0;
-    const timer = setTimeout(() => {
-      const container = containerRef?.current ?? wrapperRef.current;
-      if (!container) return;
-      const headings = container.querySelectorAll(headingSelector);
-      headings.forEach((heading) => {
-        if (heading.id) {
-          sectionsRef.current.set(heading.id, heading);
-        }
-      });
-      createObserver();
-    }, 100);
-    return () => {
-      clearTimeout(timer);
-      observerRef.current?.disconnect();
-    };
-  }, [headingSelector, containerRef, createObserver]);
-  useEffect(() => {
-    if (!headingSelector) return void 0;
-    const container = containerRef?.current ?? wrapperRef.current;
-    if (!container) return void 0;
-    const mutationObserver = new MutationObserver(() => {
-      const headings = container.querySelectorAll(headingSelector);
-      let changed = false;
-      headings.forEach((heading) => {
-        if (heading.id && !sectionsRef.current.has(heading.id)) {
-          sectionsRef.current.set(heading.id, heading);
-          changed = true;
-        }
-      });
-      if (changed) {
-        createObserver();
-      }
-    });
-    mutationObserver.observe(container, { childList: true, subtree: true });
-    return () => mutationObserver.disconnect();
-  }, [headingSelector, containerRef, createObserver]);
-  const registerSection = useCallback((id, element) => {
-    sectionsRef.current.set(id, element);
-    observerRef.current?.observe(element);
-  }, []);
-  const unregisterSection = useCallback((id) => {
-    const element = sectionsRef.current.get(id);
-    if (element) observerRef.current?.unobserve(element);
-    sectionsRef.current.delete(id);
-  }, []);
-  return /* @__PURE__ */ jsx(ScrollSpyContext.Provider, { value: { activeId, registerSection, unregisterSection }, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, children }) });
-}
-function ScrollSpySection({ id, children, sx }) {
-  const ref = useRef(null);
-  const { registerSection, unregisterSection } = useScrollSpy();
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return void 0;
-    registerSection(id, element);
-    return () => unregisterSection(id);
-  }, [id, registerSection, unregisterSection]);
-  return /* @__PURE__ */ jsx(Box20, { ref, id, sx, children });
-}
-function DocLayout({ sidebar, sectionNav, children, sx }) {
-  return /* @__PURE__ */ jsxs(
-    Box20,
-    {
-      sx: {
-        display: "flex",
-        width: "100%",
-        ...sx
-      },
-      children: [
-        sidebar && /* @__PURE__ */ jsx(
-          Box20,
-          {
-            component: "nav",
-            sx: {
-              width: 272,
-              flexShrink: 0,
-              display: { xs: "none", md: "block" },
-              position: "sticky",
-              top: 80,
-              alignSelf: "flex-start",
-              maxHeight: "calc(100vh - 100px)",
-              overflowY: "auto",
-              pr: 3,
-              borderRight: 1,
-              borderColor: "divider"
-            },
-            children: sidebar
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box20,
-          {
-            component: "main",
-            sx: {
-              flex: 1,
-              minWidth: 0,
-              px: { xs: 2, md: 4 }
-            },
-            children
-          }
-        ),
-        sectionNav && /* @__PURE__ */ jsx(
-          Box20,
-          {
-            component: "aside",
-            sx: {
-              width: 240,
-              flexShrink: 0,
-              display: { xs: "none", lg: "block" },
-              position: "sticky",
-              top: 80,
-              alignSelf: "flex-start",
-              maxHeight: "calc(100vh - 100px)",
-              overflowY: "auto",
-              pl: 3
-            },
-            children: sectionNav
-          }
-        )
-      ]
-    }
-  );
-}
-function DocSidebar({ items, activeId, onItemClick, title }) {
-  return /* @__PURE__ */ jsxs(Box20, { children: [
-    title && /* @__PURE__ */ jsx(
-      Typography5,
-      {
-        variant: "subtitle2",
-        sx: {
-          px: 1.5,
-          pt: 0.5,
-          pb: 2,
-          fontWeight: 700,
-          fontSize: "0.8125rem",
-          color: "text.secondary",
-          letterSpacing: "0.01em"
-        },
-        children: title
-      }
-    ),
-    /* @__PURE__ */ jsx(List2, { dense: true, disablePadding: true, children: items.map((item) => /* @__PURE__ */ jsx(SidebarNode, { item, activeId, onItemClick, depth: 0 }, item.id)) })
-  ] });
-}
-function SidebarNode({
-  item,
-  activeId,
-  onItemClick,
-  depth
-}) {
-  const hasChildren = item.children && item.children.length > 0;
-  const isActive = activeId === item.id;
-  const [open, setOpen] = useState(true);
-  const isCategory = hasChildren && !item.href;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ListItemButton,
-      {
-        selected: isActive,
-        onClick: () => {
-          if (hasChildren) setOpen(!open);
-          onItemClick?.(item);
-        },
-        sx: {
-          pl: 1.5 + depth * 1.5,
-          pr: 1,
-          py: isCategory ? 0.75 : 0.5,
-          borderRadius: 1,
-          mx: 0.5,
-          mb: 0.25,
-          minHeight: 0,
-          ...isCategory && {
-            mt: depth === 0 ? 1 : 0.5
-          },
-          ...isActive && {
-            bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08),
-            color: "primary.main"
-          }
-        },
-        children: /* @__PURE__ */ jsx(
-          ListItemText,
-          {
-            primary: item.label,
-            slotProps: {
-              primary: {
-                variant: "body2",
-                noWrap: true,
-                sx: {
-                  fontWeight: isCategory ? 600 : isActive ? 600 : 400,
-                  fontSize: "0.8125rem",
-                  ...isCategory && { color: "text.primary" }
-                }
-              }
-            }
-          }
-        )
-      }
-    ),
-    hasChildren && /* @__PURE__ */ jsx(Collapse, { in: open, children: /* @__PURE__ */ jsx(List2, { dense: true, disablePadding: true, children: item.children.map((child) => /* @__PURE__ */ jsx(
-      SidebarNode,
-      {
-        item: child,
-        activeId,
-        onItemClick,
-        depth: depth + 1
-      },
-      child.id
-    )) }) })
-  ] });
-}
-function DocSectionNav({ headings, title = "On this page" }) {
-  const { activeId } = useScrollSpy();
-  const handleClick = useCallback((e, id) => {
-    e.preventDefault();
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
-      window.history.replaceState(null, "", `#${id}`);
-    }
-  }, []);
-  if (headings.length === 0) return null;
-  return /* @__PURE__ */ jsxs(Box20, { children: [
-    /* @__PURE__ */ jsx(
-      Typography5,
-      {
-        variant: "overline",
-        sx: {
-          display: "block",
-          mb: 2,
-          color: "text.secondary",
-          fontSize: "0.6875rem",
-          fontWeight: 700,
-          letterSpacing: "0.08em"
-        },
-        children: title
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box20,
-      {
-        component: "nav",
-        sx: {
-          position: "relative",
-          borderLeft: 1,
-          borderColor: "divider"
-        },
-        children: headings.map((heading) => {
-          const isActive = activeId === heading.id;
-          const indent = (heading.level - 2) * 1.5;
-          return /* @__PURE__ */ jsx(
-            Box20,
-            {
-              component: "a",
-              href: `#${heading.id}`,
-              onClick: (e) => handleClick(e, heading.id),
-              sx: {
-                display: "block",
-                py: 0.75,
-                pl: indent + 2,
-                pr: 1,
-                ml: "-1px",
-                fontSize: "0.8125rem",
-                lineHeight: 1.5,
-                textDecoration: "none",
-                color: isActive ? "primary.main" : "text.disabled",
-                fontWeight: isActive ? 600 : 400,
-                borderLeft: 2,
-                borderColor: isActive ? "primary.main" : "transparent",
-                transition: "color 0.2s ease, border-color 0.2s ease",
-                cursor: "pointer",
-                "&:hover": {
-                  color: isActive ? "primary.main" : "text.primary",
-                  backgroundColor: (theme) => alpha(theme.palette.action.hover, 0.04),
-                  borderRadius: "0 6px 6px 0"
-                }
-              },
-              children: heading.text
-            },
-            heading.id
-          );
-        })
-      }
-    )
-  ] });
-}
-
-// src/components/content-renderer/classes.ts
-var PREFIX = "prism-content";
-var contentClasses = {
-  root: `${PREFIX}__root`,
-  compact: `${PREFIX}__compact`,
-  tiptap: `${PREFIX}__tiptap`,
-  markdown: `${PREFIX}__markdown`,
-  image: `${PREFIX}__image`,
-  link: `${PREFIX}__link`,
-  checkbox: `${PREFIX}__checkbox`,
-  codeBlock: `${PREFIX}__code-block`,
-  codeBlockTitle: `${PREFIX}__code-block-title`,
-  codeBlockCopy: `${PREFIX}__code-block-copy`,
-  codeBlockHighlight: `${PREFIX}__code-block-highlight`,
-  codeInline: `${PREFIX}__code-inline`,
-  spoiler: `${PREFIX}__spoiler`,
-  admonition: `${PREFIX}__admonition`,
-  admonitionNote: `${PREFIX}__admonition-note`,
-  admonitionTip: `${PREFIX}__admonition-tip`,
-  admonitionWarning: `${PREFIX}__admonition-warning`,
-  admonitionDanger: `${PREFIX}__admonition-danger`,
-  admonitionInfo: `${PREFIX}__admonition-info`,
-  admonitionCaution: `${PREFIX}__admonition-caution`,
-  admonitionTitle: `${PREFIX}__admonition-title`,
-  admonitionContent: `${PREFIX}__admonition-content`,
-  tabs: `${PREFIX}__tabs`,
-  tabsHeader: `${PREFIX}__tabs-header`,
-  tabsTab: `${PREFIX}__tabs-tab`,
-  tabsTabActive: `${PREFIX}__tabs-tab-active`,
-  tabsPanel: `${PREFIX}__tabs-panel`,
-  figure: `${PREFIX}__figure`,
-  figcaption: `${PREFIX}__figcaption`,
-  kbd: `${PREFIX}__kbd`
-};
-
-// src/components/content-renderer/styles.ts
-var MARGIN = "0.75em";
-var CODE_FONT = "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace";
-var ContentRoot = styled("div")(({ theme }) => ({
-  // General spacing between adjacent elements
-  "> * + *": {
-    marginTop: 0,
-    marginBottom: MARGIN
-  },
-  // ─── Headings ───────────────────────────────────────────────
-  "& h1, & h2, & h3, & h4, & h5, & h6": {
-    scrollMarginTop: 100
-    // Account for sticky header on anchor jump
-  },
-  // First heading in content should not have excessive top margin
-  "& > h1:first-of-type, & > h2:first-of-type, & > h3:first-of-type": {
-    marginTop: 0
-  },
-  h1: { ...theme.typography.h1, marginTop: 40, marginBottom: 12 },
-  h2: { ...theme.typography.h2, marginTop: 40, marginBottom: 12 },
-  h3: { ...theme.typography.h3, marginTop: 32, marginBottom: 8 },
-  h4: { ...theme.typography.h4, marginTop: 24, marginBottom: 8 },
-  h5: { ...theme.typography.h5, marginTop: 24, marginBottom: 8 },
-  h6: { ...theme.typography.h6, marginTop: 24, marginBottom: 8 },
-  // ─── Paragraph ──────────────────────────────────────────────
-  p: {
-    ...theme.typography.body1,
-    marginBottom: "1.25rem",
-    lineHeight: 1.8
-  },
-  // ─── Horizontal rule ───────────────────────────────────────
-  hr: {
-    flexShrink: 0,
-    borderWidth: 0,
-    margin: "2em 0",
-    borderStyle: "solid",
-    borderBottomWidth: "thin",
-    borderColor: theme.palette.divider
-  },
-  // ─── Images ─────────────────────────────────────────────────
-  [`& .${contentClasses.image}`]: {
-    width: "100%",
-    height: "auto",
-    maxWidth: "100%",
-    margin: "auto auto 1.25em",
-    borderRadius: Number(theme.shape.borderRadius) * 2
-  },
-  // Plain img fallback
-  "& img:not([class])": {
-    maxWidth: "100%",
-    height: "auto",
-    borderRadius: Number(theme.shape.borderRadius) * 2,
-    marginBottom: "1.25em"
-  },
-  // ─── Links ──────────────────────────────────────────────────
-  "& a": {
-    color: theme.palette.primary.main,
-    textDecoration: "none",
-    "&:hover": {
-      textDecoration: "underline"
-    }
-  },
-  // ─── Lists ──────────────────────────────────────────────────
-  "& ul": {
-    listStyleType: "disc"
-  },
-  "& ul, & ol": {
-    paddingLeft: 24,
-    marginBottom: "1.25rem",
-    "& > li": {
-      lineHeight: 2,
-      // Markdown wraps every list-item body in a `<p>`. With
-      // `display: inline-block` (the previous setting), Chromium
-      // refuses to render the `<li>`'s ::marker at all — the
-      // disc/decimal vanishes and the list looks like a series of
-      // bullet-less paragraphs. `display: inline` collapses the
-      // `<p>` into inline flow so the marker positions normally;
-      // `margin: 0` keeps the LI height tight against the marker
-      // baseline. Multi-paragraph list items (rare here, but
-      // possible) still render — subsequent `<p>` siblings get a
-      // line break by the inline-flow rules.
-      "& > p": {
-        margin: 0,
-        display: "inline"
-      }
-    }
-  },
-  // Nested lists
-  "& ul ul, & ol ol, & ul ol, & ol ul": {
-    marginBottom: 0
-  },
-  // ─── Task list (TipTap taskList / GFM checkboxes) ──────────
-  '& ul[data-type="taskList"]': {
-    listStyle: "none",
-    paddingLeft: 4,
-    "& li": {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: 8,
-      "& > label": {
-        marginTop: 4
-      }
-    }
-  },
-  // ─── Blockquote ─────────────────────────────────────────────
-  "& blockquote": {
-    lineHeight: 1.6,
-    fontSize: "1em",
-    margin: "24px 0",
-    position: "relative",
-    padding: theme.spacing(2.5, 3, 2.5, 7),
-    color: theme.palette.text.secondary,
-    borderLeft: `4px solid ${theme.palette.primary.main}`,
-    borderRadius: Number(theme.shape.borderRadius) * 2,
-    backgroundColor: alpha(theme.palette.primary.main, 0.04),
-    "& p": {
-      margin: 0,
-      fontSize: "inherit"
-    },
-    "& p + p": {
-      marginTop: 8
-    },
-    "&::before": {
-      left: 16,
-      top: 8,
-      display: "block",
-      fontSize: "2.5em",
-      content: '"\\201C"',
-      position: "absolute",
-      color: alpha(theme.palette.primary.main, 0.3),
-      lineHeight: 1
-    }
-  },
-  // ─── Inline code ────────────────────────────────────────────
-  [`& .${contentClasses.codeInline}`]: {
-    padding: theme.spacing(0.25, 0.75),
-    color: theme.palette.text.secondary,
-    fontSize: theme.typography.body2.fontSize,
-    borderRadius: Number(theme.shape.borderRadius) / 2,
-    backgroundColor: alpha(theme.palette.grey[500], 0.2),
-    fontFamily: CODE_FONT
-  },
-  // Fallback for code not inside pre
-  "& :not(pre) > code:not([class])": {
-    padding: theme.spacing(0.25, 0.75),
-    color: theme.palette.text.secondary,
-    fontSize: theme.typography.body2.fontSize,
-    borderRadius: Number(theme.shape.borderRadius) / 2,
-    backgroundColor: alpha(theme.palette.grey[500], 0.2),
-    fontFamily: CODE_FONT
-  },
-  // ─── Code block ─────────────────────────────────────────────
-  [`& .${contentClasses.codeBlock}`]: {
-    position: "relative",
-    marginBottom: "1.25rem",
-    "& pre": {
-      overflowX: "auto",
-      padding: theme.spacing(3),
-      color: theme.palette.common.white,
-      borderRadius: Number(theme.shape.borderRadius) * 1.5,
-      fontFamily: CODE_FONT,
-      fontSize: theme.typography.body2.fontSize,
-      lineHeight: 1.7,
-      backgroundColor: theme.palette.grey[900],
-      ...theme.palette.mode === "dark" && {
-        backgroundColor: alpha(theme.palette.grey[800], 0.9)
-      },
-      "& code": {
-        fontSize: "inherit",
-        fontFamily: "inherit",
-        backgroundColor: "transparent",
-        padding: 0,
-        borderRadius: 0,
-        color: "inherit"
-      }
-    }
-  },
-  // Fallback for bare pre blocks
-  "& pre:not([class])": {
-    overflowX: "auto",
-    padding: theme.spacing(3),
-    color: theme.palette.common.white,
-    borderRadius: Number(theme.shape.borderRadius) * 1.5,
-    fontFamily: CODE_FONT,
-    fontSize: theme.typography.body2.fontSize,
-    lineHeight: 1.7,
-    backgroundColor: theme.palette.grey[900],
-    marginBottom: "1.25rem",
-    ...theme.palette.mode === "dark" && {
-      backgroundColor: alpha(theme.palette.grey[800], 0.9)
-    },
-    "& code": {
-      fontSize: "inherit",
-      fontFamily: "inherit",
-      backgroundColor: "transparent",
-      padding: 0,
-      color: "inherit"
-    }
-  },
-  // ─── Table ──────────────────────────────────────────────────
-  "& table": {
-    width: "100%",
-    borderCollapse: "collapse",
-    fontSize: theme.typography.body2.fontSize,
-    border: `1px solid ${theme.palette.divider}`,
-    marginBottom: "1.25rem",
-    "& th, & td": {
-      padding: theme.spacing(1, 1.5),
-      border: `1px solid ${theme.palette.divider}`,
-      verticalAlign: "top"
-    },
-    "& th": {
-      fontWeight: 700,
-      backgroundColor: alpha(theme.palette.grey[500], 0.08)
-    },
-    "& tbody tr:nth-of-type(odd)": {
-      backgroundColor: alpha(theme.palette.grey[500], 0.04)
-    }
-  },
-  // ─── Checkbox (GFM task lists) ──────────────────────────────
-  [`& .${contentClasses.checkbox}`]: {
-    cursor: "pointer",
-    position: "relative",
-    "&:before": {
-      content: '""',
-      top: -2,
-      left: -2,
-      width: 17,
-      height: 17,
-      borderRadius: 3,
-      position: "absolute",
-      backgroundColor: theme.palette.grey[300],
-      ...theme.palette.mode === "dark" && {
-        backgroundColor: theme.palette.grey[700]
-      }
-    },
-    "&:checked": {
-      "&:before": {
-        backgroundColor: theme.palette.primary.main
-      },
-      "&:after": {
-        top: 1,
-        left: 5,
-        width: 4,
-        height: 9,
-        content: '""',
-        position: "absolute",
-        borderStyle: "solid",
-        transform: "rotate(45deg)",
-        borderWidth: "0 2px 2px 0",
-        borderColor: theme.palette.common.white
-      }
-    }
-  },
-  // ─── Details / Summary ──────────────────────────────────────
-  "& details": {
-    marginBottom: "1rem",
-    "& summary": {
-      cursor: "pointer",
-      fontWeight: 600,
-      marginBottom: 8
-    }
-  },
-  // ─── Definition list ────────────────────────────────────────
-  "& dl": {
-    marginBottom: "1.25rem",
-    "& dt": {
-      fontWeight: 700,
-      marginTop: 12
-    },
-    "& dd": {
-      marginLeft: 24,
-      marginBottom: 4
-    }
-  },
-  // ─── Kbd (keyboard shortcut) ────────────────────────────────
-  "& kbd": {
-    display: "inline-block",
-    padding: theme.spacing(0.25, 0.5),
-    fontSize: "0.8em",
-    fontFamily: CODE_FONT,
-    borderRadius: 4,
-    border: `1px solid ${theme.palette.divider}`,
-    boxShadow: `0 1px 0 ${alpha(theme.palette.grey[500], 0.1)}`,
-    backgroundColor: alpha(theme.palette.grey[500], 0.06)
-  },
-  // ─── Mark (highlight) ──────────────────────────────────────
-  "& mark": {
-    padding: theme.spacing(0, 0.5),
-    borderRadius: 2,
-    backgroundColor: alpha(theme.palette.warning.main, 0.3)
-  },
-  // ─── Sup / Sub ──────────────────────────────────────────────
-  "& sup, & sub": {
-    fontSize: "0.75em"
-  },
-  // ─── Spoiler (||hidden text||) ────────────────────────────
-  [`& .${contentClasses.spoiler}`]: {
-    backgroundColor: theme.palette.text.primary,
-    color: theme.palette.text.primary,
-    borderRadius: 4,
-    padding: theme.spacing(0, 0.5),
-    cursor: "pointer",
-    transition: "all 0.15s ease",
-    userSelect: "none",
-    '&:hover, &[data-revealed="true"]': {
-      backgroundColor: "transparent",
-      color: "inherit",
-      userSelect: "auto"
-    }
-  },
-  // ─── Admonition (callout) ─────────────────────────────────
-  [`& .${contentClasses.admonition}`]: {
-    margin: theme.spacing(2, 0),
-    padding: theme.spacing(1.5, 2),
-    borderRadius: theme.shape.borderRadius,
-    borderLeft: `4px solid ${theme.palette.divider}`,
-    backgroundColor: alpha(theme.palette.text.primary, 0.04),
-    "& > :last-child": { marginBottom: 0 }
-  },
-  [`& .${contentClasses.admonitionTitle}`]: {
-    fontWeight: 600,
-    textTransform: "uppercase",
-    fontSize: "0.75rem",
-    letterSpacing: "0.05em",
-    marginBottom: theme.spacing(0.75),
-    opacity: 0.85
-  },
-  [`& .${contentClasses.admonitionContent}`]: {
-    "& p:last-child": { marginBottom: 0 }
-  },
-  [`& .${contentClasses.admonitionNote}`]: {
-    borderLeftColor: theme.palette.text.secondary,
-    backgroundColor: alpha(theme.palette.text.primary, 0.04)
-  },
-  [`& .${contentClasses.admonitionTip}`]: {
-    borderLeftColor: theme.palette.success.main,
-    backgroundColor: alpha(theme.palette.success.main, 0.08)
-  },
-  [`& .${contentClasses.admonitionWarning}`]: {
-    borderLeftColor: theme.palette.warning.main,
-    backgroundColor: alpha(theme.palette.warning.main, 0.08)
-  },
-  [`& .${contentClasses.admonitionDanger}`]: {
-    borderLeftColor: theme.palette.error.main,
-    backgroundColor: alpha(theme.palette.error.main, 0.08)
-  },
-  [`& .${contentClasses.admonitionInfo}`]: {
-    borderLeftColor: theme.palette.info.main,
-    backgroundColor: alpha(theme.palette.info.main, 0.08)
-  },
-  [`& .${contentClasses.admonitionCaution}`]: {
-    borderLeftColor: theme.palette.warning.dark,
-    backgroundColor: alpha(theme.palette.warning.dark, 0.08)
-  },
-  // ─── Tabs ───────────────────────────────────────────────────
-  [`& .${contentClasses.tabs}`]: {
-    margin: theme.spacing(2, 0),
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    overflow: "hidden"
-  },
-  [`& .${contentClasses.tabsHeader}`]: {
-    display: "flex",
-    gap: 0,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: alpha(theme.palette.text.primary, 0.03)
-  },
-  [`& .${contentClasses.tabsTab}`]: {
-    appearance: "none",
-    background: "transparent",
-    border: "none",
-    padding: theme.spacing(1, 2),
-    fontFamily: "inherit",
-    fontSize: "0.8125rem",
-    fontWeight: 500,
-    color: theme.palette.text.secondary,
-    cursor: "pointer",
-    borderBottom: "2px solid transparent",
-    transition: "all 0.15s ease",
-    "&:hover": { color: theme.palette.text.primary }
-  },
-  [`& .${contentClasses.tabsTabActive}`]: {
-    color: theme.palette.text.primary,
-    borderBottomColor: theme.palette.primary.main
-  },
-  [`& .${contentClasses.tabsPanel}`]: {
-    padding: theme.spacing(2),
-    "& > :first-of-type": { marginTop: 0 },
-    "& > :last-child": { marginBottom: 0 }
-  },
-  // ─── Code block — title + copy button ───────────────────────
-  [`& .${contentClasses.codeBlockTitle}`]: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.spacing(1),
-    padding: theme.spacing(0.75, 1.5),
-    fontSize: "0.75rem",
-    fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
-    color: theme.palette.text.secondary,
-    backgroundColor: alpha(theme.palette.text.primary, 0.06),
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
-  },
-  [`& .${contentClasses.codeBlockCopy}`]: {
-    appearance: "none",
-    background: "transparent",
-    border: "none",
-    color: "inherit",
-    cursor: "pointer",
-    padding: theme.spacing(0.25, 0.75),
-    fontSize: "0.875rem",
-    borderRadius: theme.shape.borderRadius,
-    "&:hover": { backgroundColor: alpha(theme.palette.text.primary, 0.08) }
-  },
-  // ─── Figure ─────────────────────────────────────────────────
-  [`& .${contentClasses.figure}`]: {
-    margin: theme.spacing(2, 0),
-    textAlign: "center"
-  },
-  [`& .${contentClasses.figcaption}`]: {
-    fontSize: "0.8125rem",
-    color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.75)
-  },
-  // ─── kbd ────────────────────────────────────────────────────
-  [`& .${contentClasses.kbd}`]: {
-    display: "inline-block",
-    padding: theme.spacing(0, 0.5),
-    fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
-    fontSize: "0.8em",
-    color: theme.palette.text.primary,
-    border: `1px solid ${theme.palette.divider}`,
-    borderBottomWidth: 2,
-    borderRadius: 4,
-    backgroundColor: alpha(theme.palette.text.primary, 0.04),
-    boxShadow: `0 1px 0 ${alpha(theme.palette.text.primary, 0.15)}`,
-    minWidth: "1.5em",
-    textAlign: "center"
-  },
-  // ─── Compact mode (chat messages, comments, etc.) ─────────
-  [`&.${contentClasses.compact}`]: {
-    "> * + *": { marginTop: 0, marginBottom: 2 },
-    "& > :first-of-type:not(p)": { marginTop: 4 },
-    "& h1, & h2, & h3, & h4, & h5, & h6": { marginTop: 0, marginBottom: 2 },
-    h1: { fontSize: "1.25rem", fontWeight: 600, marginTop: 0, marginBottom: 2 },
-    h2: { fontSize: "1.125rem", fontWeight: 600, marginTop: 0, marginBottom: 2 },
-    h3: { fontSize: "1rem", fontWeight: 600, marginTop: 0, marginBottom: 2 },
-    "h4, h5, h6": { fontSize: "0.875rem", fontWeight: 600, marginTop: 0, marginBottom: 2 },
-    p: {
-      fontSize: "0.8125rem",
-      lineHeight: 1.5,
-      marginBottom: 2,
-      "&:last-child": { marginBottom: 0 }
-    },
-    hr: { margin: "4px 0" },
-    "& blockquote": {
-      margin: "4px 0",
-      padding: theme.spacing(0.5, 0, 0.5, 1.5),
-      borderRadius: 0,
-      backgroundColor: "transparent",
-      "&::before": { display: "none" }
-    },
-    "& ul, & ol": {
-      paddingLeft: 20,
-      marginBottom: 2,
-      "& > li": { lineHeight: 1.5, fontSize: "0.8125rem" }
-    },
-    "& img:not([class])": { marginBottom: 4 },
-    [`& .${contentClasses.codeBlock}`]: { marginBottom: 4 },
-    [`& .${contentClasses.codeBlock} pre, & pre:not([class])`]: {
-      padding: theme.spacing(1.5),
-      fontSize: "0.75rem",
-      lineHeight: 1.5,
-      marginBottom: 4
-    },
-    [`& .${contentClasses.codeInline}, & :not(pre) > code:not([class])`]: {
-      fontSize: "0.75rem"
-    },
-    "& table": {
-      fontSize: "0.75rem",
-      marginBottom: 4
-    }
-  }
-}));
-var customNodeRegistry = /* @__PURE__ */ new Map();
-function registerTipTapNode(type, component) {
-  customNodeRegistry.set(type, component);
-}
-var TipTapContext = createContext({});
-function renderMarks(text, marks = [], ctx) {
-  return marks.reduce((acc, mark) => {
-    switch (mark.type) {
-      case "bold":
-        return /* @__PURE__ */ jsx("strong", { children: acc });
-      case "italic":
-        return /* @__PURE__ */ jsx("em", { children: acc });
-      case "code":
-        return /* @__PURE__ */ jsx("code", { className: contentClasses.codeInline, children: acc });
-      case "underline":
-        return /* @__PURE__ */ jsx("u", { children: acc });
-      case "strike":
-        return /* @__PURE__ */ jsx("s", { children: acc });
-      case "link":
-        return /* @__PURE__ */ jsx("a", { href: mark.attrs?.href, target: mark.attrs?.target ?? "_blank", rel: "noopener noreferrer", children: acc });
-      case "internalLink": {
-        const to = String(mark.attrs?.to ?? mark.attrs?.href ?? "#");
-        const Link6 = ctx?.linkComponent;
-        return Link6 ? /* @__PURE__ */ jsx(Link6, { to, className: contentClasses.link, children: acc }) : /* @__PURE__ */ jsx("a", { href: to, children: acc });
-      }
-      case "highlight":
-        return /* @__PURE__ */ jsx("mark", { style: mark.attrs?.color ? { backgroundColor: mark.attrs.color } : void 0, children: acc });
-      case "subscript":
-        return /* @__PURE__ */ jsx("sub", { children: acc });
-      case "superscript":
-        return /* @__PURE__ */ jsx("sup", { children: acc });
-      case "textStyle":
-        return /* @__PURE__ */ jsx("span", { style: { color: mark.attrs?.color }, children: acc });
-      case "kbd":
-        return /* @__PURE__ */ jsx("kbd", { className: contentClasses.kbd, children: acc });
-      default:
-        return acc;
-    }
-  }, text);
-}
-function slugify(nodes) {
-  if (!nodes) return void 0;
-  const text = nodes.map((n) => n.text ?? "").join("");
-  if (!text) return void 0;
-  return text.toLowerCase().replace(/[^a-z0-9а-яё]+/gi, "-").replace(/^-|-$/g, "");
-}
-function CodeBlock({ node }) {
-  const language = node.attrs?.language;
-  const title = node.attrs?.title;
-  const html = node.attrs?.html;
-  const code = node.content?.map((n) => n.text ?? "").join("\n") ?? "";
-  const [copied, setCopied] = useState(false);
-  const onCopy = useCallback(() => {
-    navigator.clipboard?.writeText(code).then(
-      () => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-      },
-      () => {
-      }
-    );
-  }, [code]);
-  return /* @__PURE__ */ jsxs("div", { className: contentClasses.codeBlock, "data-language": language ?? void 0, children: [
-    (title || language) && /* @__PURE__ */ jsxs("div", { className: contentClasses.codeBlockTitle, children: [
-      /* @__PURE__ */ jsx("span", { children: title ?? language }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: onCopy, className: contentClasses.codeBlockCopy, "aria-label": "Copy code", children: copied ? "\u2713" : "\u29C9" })
-    ] }),
-    html ? (
-      // Shiki-rendered HTML is pre-sanitised at build time and contains only
-      // <pre>/<code>/<span> tags with style attributes. Safe to inject.
-      /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } })
-    ) : /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: code }) })
-  ] });
-}
-var ADMONITION_LABEL = {
-  note: "Note",
-  tip: "Tip",
-  warning: "Warning",
-  danger: "Danger",
-  info: "Info",
-  caution: "Caution"
-};
-var ADMONITION_CLASS = {
-  note: contentClasses.admonitionNote,
-  tip: contentClasses.admonitionTip,
-  warning: contentClasses.admonitionWarning,
-  danger: contentClasses.admonitionDanger,
-  info: contentClasses.admonitionInfo,
-  caution: contentClasses.admonitionCaution
-};
-function Admonition({ node }) {
-  const kind = String(node.attrs?.kind ?? "note");
-  const title = node.attrs?.title ?? ADMONITION_LABEL[kind] ?? kind;
-  const variantClass = ADMONITION_CLASS[kind] ?? contentClasses.admonitionNote;
-  return /* @__PURE__ */ jsxs("aside", { className: `${contentClasses.admonition} ${variantClass}`, "data-kind": kind, children: [
-    /* @__PURE__ */ jsx("div", { className: contentClasses.admonitionTitle, children: title }),
-    /* @__PURE__ */ jsx("div", { className: contentClasses.admonitionContent, children: node.content?.map(renderNode) })
-  ] });
-}
-function Tabs2({ node }) {
-  const items = (node.content ?? []).filter((c) => c.type === "tabItem");
-  const [active, setActive] = useState(0);
-  if (items.length === 0) return null;
-  const safeActive = Math.min(active, items.length - 1);
-  return /* @__PURE__ */ jsxs("div", { className: contentClasses.tabs, children: [
-    /* @__PURE__ */ jsx("div", { className: contentClasses.tabsHeader, role: "tablist", children: items.map((item, i) => {
-      const label = item.attrs?.label ?? item.attrs?.value ?? `Tab ${i + 1}`;
-      const isActive = i === safeActive;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          "aria-selected": isActive,
-          className: `${contentClasses.tabsTab} ${isActive ? contentClasses.tabsTabActive : ""}`,
-          onClick: () => setActive(i),
-          children: label
-        },
-        i
-      );
-    }) }),
-    /* @__PURE__ */ jsx("div", { className: contentClasses.tabsPanel, role: "tabpanel", children: items[safeActive]?.content?.map(renderNode) })
-  ] });
-}
-function renderNode(node, index) {
-  const CustomRenderer = customNodeRegistry.get(node.type);
-  if (CustomRenderer) return /* @__PURE__ */ jsx(CustomRenderer, { node }, index);
-  switch (node.type) {
-    case "text":
-      return /* @__PURE__ */ jsx(TextNode, { node }, index);
-    case "paragraph":
-      return /* @__PURE__ */ jsx("p", { children: node.content?.map(renderNode) }, index);
-    case "heading": {
-      const level = Math.min(Math.max(node.attrs?.level ?? 2, 1), 6);
-      const Tag2 = `h${level}`;
-      const id = node.attrs?.id ?? slugify(node.content);
-      return /* @__PURE__ */ jsx(Tag2, { id, children: node.content?.map(renderNode) }, index);
-    }
-    case "bulletList":
-      return /* @__PURE__ */ jsx("ul", { children: node.content?.map(renderNode) }, index);
-    case "orderedList":
-      return /* @__PURE__ */ jsx("ol", { start: node.attrs?.start ?? 1, children: node.content?.map(renderNode) }, index);
-    case "listItem":
-      return /* @__PURE__ */ jsx("li", { children: node.content?.map(renderNode) }, index);
-    case "taskList":
-      return /* @__PURE__ */ jsx("ul", { "data-type": "taskList", children: node.content?.map(renderNode) }, index);
-    case "taskItem": {
-      const checked = node.attrs?.checked ?? false;
-      return /* @__PURE__ */ jsxs("li", { "data-type": "taskItem", "data-checked": checked, children: [
-        /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsx("input", { type: "checkbox", checked, readOnly: true, className: contentClasses.checkbox }) }),
-        /* @__PURE__ */ jsx("div", { children: node.content?.map(renderNode) })
-      ] }, index);
-    }
-    case "blockquote":
-      return /* @__PURE__ */ jsx("blockquote", { children: node.content?.map(renderNode) }, index);
-    case "codeBlock":
-      return /* @__PURE__ */ jsx(CodeBlock, { node }, index);
-    case "horizontalRule":
-      return /* @__PURE__ */ jsx("hr", {}, index);
-    case "image":
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: node.attrs?.src,
-          alt: node.attrs?.alt ?? "",
-          title: node.attrs?.title,
-          className: contentClasses.image,
-          loading: "lazy"
-        },
-        index
-      );
-    case "figure":
-      return /* @__PURE__ */ jsx("figure", { className: contentClasses.figure, children: node.content?.map(renderNode) }, index);
-    case "figcaption":
-      return /* @__PURE__ */ jsx("figcaption", { className: contentClasses.figcaption, children: node.content?.map(renderNode) }, index);
-    case "hardBreak":
-      return /* @__PURE__ */ jsx("br", {}, index);
-    // ─── Admonition / Tabs ──────────────────────────────────
-    case "admonition":
-      return /* @__PURE__ */ jsx(Admonition, { node }, index);
-    case "tabs":
-      return /* @__PURE__ */ jsx(Tabs2, { node }, index);
-    case "tabItem":
-      return /* @__PURE__ */ jsx("section", { "data-type": "tabItem", children: node.content?.map(renderNode) }, index);
-    // ─── Table ──────────────────────────────────────────────
-    case "table":
-      return /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx("table", { children: node.content?.map(renderNode) }) }, index);
-    case "tableRow":
-      return /* @__PURE__ */ jsx("tr", { children: node.content?.map(renderNode) }, index);
-    case "tableCell":
-      return /* @__PURE__ */ jsx("td", { colSpan: node.attrs?.colspan ?? 1, rowSpan: node.attrs?.rowspan ?? 1, children: node.content?.map(renderNode) }, index);
-    case "tableHeader":
-      return /* @__PURE__ */ jsx("th", { colSpan: node.attrs?.colspan ?? 1, rowSpan: node.attrs?.rowspan ?? 1, children: node.content?.map(renderNode) }, index);
-    // ─── Details / Summary (collapsible) ────────────────────
-    case "details":
-      return /* @__PURE__ */ jsx("details", { open: node.attrs?.open, children: node.content?.map(renderNode) }, index);
-    case "detailsSummary":
-      return /* @__PURE__ */ jsx("summary", { children: node.content?.map(renderNode) }, index);
-    case "detailsContent":
-      return /* @__PURE__ */ jsx("div", { children: node.content?.map(renderNode) }, index);
-    // ─── YouTube embed ──────────────────────────────────────
-    case "youtube": {
-      const src = node.attrs?.src;
-      if (!src) return null;
-      return /* @__PURE__ */ jsx("div", { style: { position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: "1.25rem" }, children: /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          src,
-          title: "YouTube video",
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-          allowFullScreen: true,
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            border: "none",
-            borderRadius: 8
-          }
-        }
-      ) }, index);
-    }
-    default:
-      if (node.content) {
-        return /* @__PURE__ */ jsx(Fragment$1, { children: node.content.map(renderNode) }, index);
-      }
-      return null;
-  }
-}
-function TextNode({ node }) {
-  const ctx = useContext(TipTapContext);
-  return /* @__PURE__ */ jsx(Fragment$1, { children: renderMarks(node.text ?? "", node.marks, ctx) });
-}
-function TipTapRenderer({ content, className, sx, compact, linkComponent }) {
-  if (!content || !("content" in content) || !Array.isArray(content.content)) {
-    return null;
-  }
-  const ctxValue = linkComponent ? { linkComponent } : {};
-  return /* @__PURE__ */ jsx(TipTapContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
-    ContentRoot,
-    {
-      className: [contentClasses.root, contentClasses.tiptap, compact && contentClasses.compact, className].filter(Boolean).join(" "),
-      sx,
-      children: content.content.map(renderNode)
-    }
-  ) });
-}
 
 // src/components/content-renderer/html-tags.ts
 var htmlTags = [
@@ -11139,7 +9989,21 @@ function escapeHtml(str) {
 function isExternalLink2(href) {
   return /^https?:\/\//.test(href) || href.startsWith("//");
 }
-var defaultRehypePlugins = [rehypeRaw, rehypeHighlight];
+var SAFE_CLASS_RE = /^(prism-content__[a-z0-9_-]+|hljs(-[a-z0-9-]+)?|language-[a-z0-9+#-]+)$/i;
+var spoilerSanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    span: [...defaultSchema.attributes?.["span"] ?? [], ["className", SAFE_CLASS_RE]],
+    code: [...defaultSchema.attributes?.["code"] ?? [], ["className", SAFE_CLASS_RE]],
+    div: [...defaultSchema.attributes?.["div"] ?? [], ["className", SAFE_CLASS_RE]]
+  }
+};
+var defaultRehypePlugins = [
+  rehypeRaw,
+  [rehypeSanitize, spoilerSanitizeSchema],
+  rehypeHighlight
+];
 var defaultRemarkPlugins = [
   [remarkGfm, { singleTilde: false }],
   remarkSpoiler
@@ -11205,6 +10069,16 @@ function CheckboxInput(props) {
 function isTipTapDoc(value) {
   return typeof value === "object" && value !== null && "type" in value && value.type === "doc" && "content" in value && Array.isArray(value.content);
 }
+function tryParseTipTapJson(value) {
+  const trimmed = value.trimStart();
+  if (!trimmed.startsWith("{")) return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    return isTipTapDoc(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
 function ContentRenderer({
   content,
   className,
@@ -11222,6 +10096,10 @@ function ContentRenderer({
   }
   if (typeof content === "string") {
     if (!content.trim()) return null;
+    const docFromJson = tryParseTipTapJson(content);
+    if (docFromJson) {
+      return /* @__PURE__ */ jsx(TipTapRenderer, { content: docFromJson, className, sx, compact });
+    }
     return /* @__PURE__ */ jsx(
       Markdown,
       {
@@ -11236,20 +10114,20 @@ function ContentRenderer({
   }
   return null;
 }
-var HOUR = 3600;
-var DAY = 86400;
+var HOUR2 = 3600;
+var DAY2 = 86400;
 var WEEK = 604800;
 var PRESETS = [
-  { label: "1h", value: HOUR, key: "1h" },
-  { label: "6h", value: 6 * HOUR, key: "6h" },
-  { label: "1d", value: DAY, key: "1d" },
-  { label: "7d", value: 7 * DAY, key: "7d" },
-  { label: "30d", value: 30 * DAY, key: "30d" },
+  { label: "1h", value: HOUR2, key: "1h" },
+  { label: "6h", value: 6 * HOUR2, key: "6h" },
+  { label: "1d", value: DAY2, key: "1d" },
+  { label: "7d", value: 7 * DAY2, key: "7d" },
+  { label: "30d", value: 30 * DAY2, key: "30d" },
   { label: "\u221E", value: null, key: "permanent" }
 ];
 var UNIT_SECONDS = {
-  hours: HOUR,
-  days: DAY,
+  hours: HOUR2,
+  days: DAY2,
   weeks: WEEK
 };
 var CUSTOM_KEY = "custom";
@@ -11259,12 +10137,14 @@ function resolveActiveKey(value) {
 }
 function decomposeSeconds(seconds) {
   if (seconds > 0 && seconds % WEEK === 0) return { amount: seconds / WEEK, unit: "weeks" };
-  if (seconds > 0 && seconds % DAY === 0) return { amount: seconds / DAY, unit: "days" };
-  return { amount: Math.max(1, Math.round(seconds / HOUR)), unit: "hours" };
+  if (seconds > 0 && seconds % DAY2 === 0) return { amount: seconds / DAY2, unit: "days" };
+  return { amount: Math.max(1, Math.round(seconds / HOUR2)), unit: "hours" };
 }
 function DurationPicker({ value, onChange, size = "small", disabled = false, labels }) {
   const theme = useTheme();
-  const activeKey = useMemo(() => resolveActiveKey(value), [value]);
+  const presetKey = useMemo(() => resolveActiveKey(value), [value]);
+  const [customChosen, setCustomChosen] = useState(() => presetKey === CUSTOM_KEY);
+  const activeKey = customChosen || presetKey === CUSTOM_KEY ? CUSTOM_KEY : presetKey;
   const [customAmount, setCustomAmount] = useState(() => {
     if (activeKey === CUSTOM_KEY && value !== null && value > 0) {
       return decomposeSeconds(value).amount;
@@ -11277,28 +10157,38 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
     }
     return "hours";
   });
+  const [customText, setCustomText] = useState(() => String(customAmount));
   const isCustom = activeKey === CUSTOM_KEY;
   const handlePresetChange = useCallback(
     (_, newKey) => {
       if (newKey === null) return;
       if (newKey === CUSTOM_KEY) {
+        setCustomChosen(true);
         onChange(customAmount * UNIT_SECONDS[customUnit]);
         return;
       }
       const preset = PRESETS.find((p) => p.key === newKey);
-      if (preset) onChange(preset.value);
+      if (preset) {
+        setCustomChosen(false);
+        onChange(preset.value);
+      }
     },
     [onChange, customAmount, customUnit]
   );
   const handleCustomAmountChange = useCallback(
     (e) => {
-      const raw = parseInt(e.target.value, 10);
-      const clamped = Number.isFinite(raw) && raw > 0 ? raw : 1;
-      setCustomAmount(clamped);
-      onChange(clamped * UNIT_SECONDS[customUnit]);
+      const text = e.target.value;
+      setCustomText(text);
+      const parsed = parseInt(text, 10);
+      if (!Number.isFinite(parsed) || parsed <= 0) return;
+      setCustomAmount(parsed);
+      onChange(parsed * UNIT_SECONDS[customUnit]);
     },
     [onChange, customUnit]
   );
+  const handleCustomAmountBlur = useCallback(() => {
+    setCustomText(String(customAmount));
+  }, [customAmount]);
   const handleCustomUnitChange = useCallback(
     (e) => {
       const unit = e.target.value;
@@ -11330,7 +10220,7 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
       }
     }
   };
-  return /* @__PURE__ */ jsxs(Box20, { children: [
+  return /* @__PURE__ */ jsxs(Box19, { children: [
     /* @__PURE__ */ jsx(
       Typography5,
       {
@@ -11348,7 +10238,7 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
       ToggleButtonGroup,
       {
         exclusive: true,
-        value: isCustom ? CUSTOM_KEY : activeKey,
+        value: activeKey,
         onChange: handlePresetChange,
         size,
         disabled,
@@ -11360,7 +10250,14 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
             border: "1px solid",
             borderRadius: "8px !important",
             borderColor: alpha(theme.palette.divider, 0.2),
-            "&:not(:first-of-type)": {
+            // Position-class selectors replace the deprecated
+            // `:not(:first-of-type)` sibling pattern (MUI v9 tags
+            // children with firstButton/middleButton/lastButton via
+            // ToggleButtonGroupButtonContext). gap:0.5 above means
+            // we want INDEPENDENT borders on every button (no
+            // overlap/collapse), so restore left border + zero out
+            // MUI's default `margin-left: -1px` on middle/last.
+            "&.MuiToggleButtonGroup-middleButton, &.MuiToggleButtonGroup-lastButton": {
               borderLeft: "1px solid",
               borderColor: alpha(theme.palette.divider, 0.2),
               marginLeft: 0
@@ -11374,7 +10271,7 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
       }
     ),
     isCustom && /* @__PURE__ */ jsxs(
-      Box20,
+      Box19,
       {
         sx: {
           mt: 1.25,
@@ -11387,8 +10284,9 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
             TextField2,
             {
               type: "number",
-              value: customAmount,
+              value: customText,
               onChange: handleCustomAmountChange,
+              onBlur: handleCustomAmountBlur,
               disabled,
               size,
               slotProps: {
@@ -11419,7 +10317,7 @@ function DurationPicker({ value, onChange, size = "small", disabled = false, lab
 }
 function ChangelogTimeline({ children, sx }) {
   return /* @__PURE__ */ jsx(
-    Box20,
+    Box19,
     {
       sx: {
         position: "relative",
@@ -11439,9 +10337,9 @@ function ChangelogTimeline({ children, sx }) {
   );
 }
 function ChangelogEntry({ version, date, badge, children }) {
-  return /* @__PURE__ */ jsxs(Box20, { sx: { position: "relative", pl: { xs: 5, sm: 7 }, pb: 4 }, children: [
+  return /* @__PURE__ */ jsxs(Box19, { sx: { position: "relative", pl: { xs: 5, sm: 7 }, pb: 4 }, children: [
     /* @__PURE__ */ jsx(
-      Box20,
+      Box19,
       {
         sx: {
           position: "absolute",
@@ -11457,7 +10355,7 @@ function ChangelogEntry({ version, date, badge, children }) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs(MuiCard, { variant: "outlined", sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsxs(Card2, { variant: "outlined", sx: { p: 3 }, children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {
@@ -11491,6 +10389,6 @@ function ChangelogEntry({ version, date, badge, children }) {
   ] });
 }
 
-export { Accordion, AdminDataTable, Alert2 as Alert, AmountCell, AnimateBorder, Avatar, Badge2 as Badge, BooleanLabel, Breadcrumbs, Card, CardGrid, CardSection, CardSkeleton, Carousel, ChangelogEntry, ChangelogTimeline, Chart, ChartLegends, ChartLoading, CircularProgress2 as CircularProgress, CommandPalette, ConfirmDialog, ContentRenderer, ContentRoot, ContextMenu, CountBadge, CountdownRing, CountrySelect, CustomAvatarGroup, DEFAULT_CLASS_PREFIX, DateRangeInput, DateRangePicker, DeleteDialog, DocLayout, DocSectionNav, DocSidebar, Drawer2 as Drawer, DurationPicker, EmptyContent, ErrorBoundary, FilterToolbar, FlagIcon, FormAlert, Image, ImageWithDefault, InlineAlert, Label, Lightbox, LinearProgress3 as LinearProgress, LoadingEmptyContent, LoadingScreen, Markdown, MegaMenuHorizontal, MegaMenuMobile, MegaMenuVertical, Menu, MotionLazy, Nav, NavArrow2 as NavArrow, NavCard, NavCardGrid, NavIcon, NavInfo, NavItem, NavItemBase, NavLi, NavList, NavSectionHorizontal, NavSectionMini, NavSectionVertical, NavSubList, NavSubheader, NavTexts, NavUl, NavigationProgress, PageContent, ProgressBar, ScrollSpyProvider, ScrollSpySection, ScrollToTop, Scrollbar, SearchEmptyContent, SettingsDrawer, SettingsProvider, SimpleAccordion, SimpleSnackbar, Skeleton3 as Skeleton, SnackbarProvider, Spinner, SplashScreen, StatCard, StatusChip, StatusDot, StatusLabel, Stepper, StepperActions, SvgColor, TabPanel, Table, TableSkeleton, Tabs, TagCloud, TipTapRenderer, Tooltip2 as Tooltip, VirtualList, animateBorderClasses, buildUrl, carouselClasses, chartClasses, cn, contentClasses, createClasses, createClassesObject, createComponentClasses, createIconComponent, formatDateString, getClassPrefix, getErrorLocation, getNavCssVars, getQueryParam, hasParams, htmlToMarkdown, isActiveLink, isEqualPath, isExternalLink, isExternalUrl, isMarkdownContent, lightboxClasses, megaMenuClasses, megaMenuCssVars, mergeClasses, navSectionClasses, navSectionCssVars, parseDateString, parseQueryParams, parseStackTrace, registerTipTapNode, removeLastSlash, removeParams, safeReturnUrl, setClassPrefix, useAccordion, useCarousel, useChart, useDateRangePicker, useErrorBoundary, useLightbox, useMenu, useScrollSpy, useSettings, useSettingsDrawer, useSnackbar, useStepper, useTable, useTabs };
-//# sourceMappingURL=chunk-A2Z7NVGL.js.map
-//# sourceMappingURL=chunk-A2Z7NVGL.js.map
+export { Accordion, AdminDataTable, Alert2 as Alert, AmountCell, AnimateBorder, Avatar, Badge2 as Badge, BooleanLabel, Breadcrumbs, COIN_DISPLAY_DECIMALS, COIN_WIRE_DECIMALS, Card, CardGrid, CardSection, CardSkeleton, Carousel, ChangelogEntry, ChangelogTimeline, Chart, ChartLegends, ChartLoading, CircularProgress2 as CircularProgress, CommandPalette, ConfirmDialog, ContentRenderer, ContextMenu, CountBadge, CountdownRing, CountrySelect, CustomAvatarGroup, DEFAULT_CLASS_PREFIX, DEFAULT_LIGHTBOX_LABELS, DEFAULT_SPONSORED_SLOT_LABELS, DateRangeInput, DateRangePicker, DeadlineChip, DeleteDialog, Drawer2 as Drawer, DurationPicker, FilterToolbar, FlagIcon, FormAlert, Image, ImageWithDefault, InlineAlert, Label, Lightbox, LinearProgress3 as LinearProgress, LoadingScreen, Markdown, MegaMenuHorizontal, MegaMenuMobile, MegaMenuVertical, Menu, MotionLazy, Nav, NavArrow2 as NavArrow, NavCard, NavCardGrid, NavIcon, NavInfo, NavItem, NavItemBase, NavLi, NavList, NavSectionHorizontal, NavSectionMini, NavSectionVertical, NavSubList, NavSubheader, NavTexts, NavUl, NavigationProgress, PageContent, ProgressBar, Rail, ScrollToTop, SettingsDrawer, SettingsProvider, SimpleAccordion, SimpleSnackbar, Skeleton5 as Skeleton, SnackbarProvider, Spinner, SplashScreen, SponsoredSlot, StatCard, StatusChip, StatusDot, StatusLabel, Stepper, StepperActions, SvgColor, TabPanel, Table, TableSkeleton, Tabs, TagCloud, Tooltip3 as Tooltip, VirtualList, animateBorderClasses, buildUrl, carouselClasses, chartClasses, cn, createClasses, createClassesObject, createComponentClasses, createIconComponent, deadlineUrgency, formatCoinAmount, formatCoinAmountList, formatDateString, formatDecimalString, fromScaledInteger, getClassPrefix, getCoinDecimals, getCoinWireDecimals, getNavCssVars, getQueryParam, hasParams, htmlToMarkdown, isActiveLink, isEqualPath, isExternalLink, isExternalUrl, isMarkdownContent, lightboxClasses, megaMenuClasses, megaMenuCssVars, mergeClasses, navSectionClasses, navSectionCssVars, parseDateString, parseQueryParams, relativeTimeLeft, removeLastSlash, removeParams, safeReturnUrl, setClassPrefix, subtractDecimalStrings, sumDecimalStrings, toScaledInteger, useAccordion, useCarousel, useChart, useDateRangePicker, useLightbox, useMenu, useSettings, useSettingsDrawer, useSnackbar, useStepper, useTable, useTabs };
+//# sourceMappingURL=chunk-LSPFFEJT.js.map
+//# sourceMappingURL=chunk-LSPFFEJT.js.map