mui-atelier 0.1.0

package/dist/components/SafeHtml.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Box from "@mui/material/Box";
+import { sanitizeHtml } from "../lib/sanitizeHtml.js";
+const RICH_SX = {
+  "& > :first-of-type": { mt: 0 },
+  "& > :last-child": { mb: 0 },
+  "& h1, & h2, & h3, & h4, & h5, & h6": { mt: 2, mb: 1, lineHeight: 1.3 },
+  "& p, & ul, & ol, & blockquote, & pre": { mt: 0, mb: 1.5 },
+  "& p, & ul, & ol, & blockquote": { maxWidth: "68ch" },
+  "& ul, & ol": { pl: 3 },
+  "& li": { mb: 0.5 },
+  "& blockquote": {
+    m: 0,
+    pl: 2,
+    borderLeft: 3,
+    borderColor: "divider",
+    color: "text.secondary"
+  },
+  "& pre": { p: 1.5, borderRadius: (t) => `${t.rt?.radii?.base ?? 8}px`, bgcolor: "action.hover", overflowX: "auto" },
+  "& code": { fontFamily: "monospace", fontSize: "0.875em" },
+  "& hr": { border: 0, borderTop: 1, borderColor: "divider", my: 2 },
+  "& table": {
+    display: "block",
+    width: "100%",
+    overflowX: "auto",
+    borderCollapse: "collapse",
+    mb: 1.5
+  },
+  "& th, & td": { border: 1, borderColor: "divider", px: 1, py: 0.5, textAlign: "left" },
+  "& th": { bgcolor: "action.hover", fontWeight: 600 },
+  "& caption": { captionSide: "bottom", pt: 1, color: "text.secondary", fontSize: "0.8125rem" }
+};
+function SafeHtml({ html, block = false, rich = false, sx, ...rest }) {
+  const clean = useMemo(() => sanitizeHtml(html, { block, rich }), [html, block, rich]);
+  if (!clean) return null;
+  const asBlock = block || rich;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: asBlock ? "div" : "span",
+      suppressHydrationWarning: true,
+      sx: {
+        "& a": { color: "primary.main", textDecoration: "underline" },
+        ...asBlock ? { "& p": { m: 0 }, "& p:not(:last-child)": { mb: 0.5 } } : {},
+        ...rich ? RICH_SX : {},
+        ...sx
+      },
+      ...rest,
+      dangerouslySetInnerHTML: { __html: clean }
+    }
+  );
+}
+export {
+  SafeHtml as default
+};

package/dist/components/SaveState.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTranslations } from "next-intl";
+import StatusChip from "./StatusChip.js";
+function SaveState({ dirty, saving }) {
+  const t = useTranslations("uikit");
+  return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, role: "status", "aria-live": "polite", children: saving ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: t("save.saving") }) : dirty ? /* @__PURE__ */ jsx(StatusChip, { size: "small", role: "caution", variant: "outlined", label: t("save.unsaved") }) : null });
+}
+export {
+  SaveState as default
+};

package/dist/components/SectionPanel.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Card from "@mui/material/Card";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import HeadingHelp from "./HeadingHelp.js";
+import HeadingLevel, { useHeadingLevel, useNestedHeadingLevel } from "./HeadingLevel.js";
+function SectionPanel({ title, subtitle, help, action, component, children, sx }) {
+  const hasHeader = title || action;
+  const level = useHeadingLevel();
+  const headingComponent = component ?? level;
+  const nested = useNestedHeadingLevel();
+  const berry = useTheme().rt?.ui?.surface === "berry";
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      sx: [
+        berry ? { p: 3 } : { p: { xs: 2, sm: 2.5 } },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 1.5,
+            sx: berry && children ? { alignItems: "center", mx: -3, px: 3, pb: 3, mb: 3, borderBottom: "1px solid", borderColor: "divider", "& .MuiTypography-h6": { fontSize: "1.125rem", fontWeight: 500 } } : { alignItems: "center", mb: children ? 2 : 0 },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                title ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.25, sx: { alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "h6", component: headingComponent, children: title }),
+                  /* @__PURE__ */ jsx(HeadingHelp, { text: help, label: typeof title === "string" ? title : void 0 })
+                ] }) : null,
+                subtitle ? /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: subtitle }) : null
+              ] }),
+              action
+            ]
+          }
+        ) : null,
+        title ? /* @__PURE__ */ jsx(HeadingLevel, { level: nested, children }) : children
+      ]
+    }
+  );
+}
+export {
+  SectionPanel as default
+};

package/dist/components/SectionTabs.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import Box from "@mui/material/Box";
+import Tabs from "@mui/material/Tabs";
+import { useTheme } from "@mui/material/styles";
+const SIZES = {
+  medium: { pad: 4, minHeight: 38, px: 2, fontSize: "0.9375rem" },
+  small: { pad: 3, minHeight: 30, px: 1.25, fontSize: "0.8125rem" }
+};
+function SectionTabs({ size = "medium", children, sx, ...rest }) {
+  const { rt } = useTheme();
+  const radius = rt?.radii?.button ?? 8;
+  const { pad, minHeight, px, fontSize } = SIZES[size] ?? SIZES.medium;
+  if (rt?.ui?.tabs === "underline") {
+    const tabs = Children.map(children, (child) => isValidElement(child) && child.props?.value !== void 0 ? cloneElement(child, {
+      id: tabId(child.props.value),
+      "aria-controls": tabPanelId(child.props.value)
+    }) : child);
+    return /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        variant: "scrollable",
+        scrollButtons: "auto",
+        sx: [{ minHeight: 0, "& .MuiTab-root": { minHeight: size === "small" ? 36 : 48, fontSize, px: 2 } }, ...Array.isArray(sx) ? sx : [sx]],
+        ...rest,
+        children: tabs
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      variant: "scrollable",
+      scrollButtons: "auto",
+      sx: [
+        (theme) => ({
+          minHeight: 0,
+          // inline-flex so the strip hugs its tabs. Stretched full-width it
+          // would read as a toolbar, and the ground would run out past the
+          // last tab to the edge of the page.
+          display: "inline-flex",
+          maxWidth: "100%",
+          p: `${pad}px`,
+          borderRadius: `${radius + pad}px`,
+          /*
+           * The WELL: a BLACK wash, in both modes, closed with a hairline.
+           *
+           * `action.hover` was the obvious choice and it is wrong here, because
+           * MUI flips it to a WHITE overlay in dark mode. That made the track
+           * lighter than the page while the chip stayed at `background.paper`,
+           * so on every dark theme the current tab was DARKER than the track it
+           * sat in — the depth cue exactly inverted, a chip that reads as a
+           * hole. Measured on `editorial` dark: chip #1B1D24 inside a #292722
+           * track.
+           *
+           * Darkening in both modes keeps one rule true everywhere: the track
+           * is below the page, the chip is at page level, so the chip is always
+           * the thing standing up.
+           */
+          bgcolor: "rgba(0, 0, 0, 0.05)",
+          ...theme.applyStyles?.("dark", { backgroundColor: "rgba(0, 0, 0, 0.32)" }),
+          border: 1,
+          borderColor: "divider",
+          "& .MuiTabs-list": { gap: `${pad}px` },
+          /*
+           * The indicator IS the chip: full height, behind the labels. It is
+           * painted after the tabs in the DOM, so the tabs need the z-index —
+           * without it the chip covers its own label.
+           *
+           * `background.paper` over `action.hover` is the whole illusion: the
+           * chip is the one thing here at page level, so it looks lifted OUT of
+           * the well rather than painted onto it.
+           *
+           * PAPER + A `divider` HAIRLINE + `rt.lift.rest` — the same three
+           * things a raised input and a raised page button are made of, so the
+           * current tab, a search field and an outlined action all read as one
+           * kind of surface. It used to carry a flat grey shadow and a fake 1px
+           * ring painted as a second box-shadow layer, which is a hardcoded
+           * approximation of both: the ring did not follow `divider` when a
+           * theme changed its hairline, and the shadow was neutral grey under
+           * every palette while everything beside it was tinted.
+           *
+           * `lift.rest` and not `raised`: the chip is at page level, not
+           * floating above it, and a tab is not an action — the pages this sits
+           * on already argue that at length above.
+           */
+          "& .MuiTabs-indicator": {
+            height: "100%",
+            borderRadius: `${radius}px`,
+            bgcolor: "background.paper",
+            border: "1px solid",
+            borderColor: "divider",
+            // Fallbacks for a bare MUI theme, which carries no `rt`.
+            boxShadow: rt?.lift?.rest ?? theme.shadows[1],
+            ...theme.applyStyles?.("dark", { boxShadow: rt?.lift?.restDark ?? theme.shadows[1] })
+          },
+          "& .MuiTab-root": {
+            zIndex: 1,
+            minWidth: 0,
+            // MUI's 90px floor makes "Body" a pill wider than its word
+            minHeight,
+            px,
+            borderRadius: `${radius}px`,
+            textTransform: "none",
+            fontSize,
+            fontWeight: 600,
+            color: "text.secondary",
+            transition: "color 150ms",
+            "&:hover": { color: "text.primary" },
+            /*
+             * The accent lands HERE — on the label of the raised chip, over
+             * paper. `primary.main` is guaranteed readable on `background.paper`
+             * (it is what every link and text Button in the app already does);
+             * `contrastText` would be the pairing for an accent FILL, which is
+             * exactly the button look this control is avoiding.
+             */
+            "&.Mui-selected": { color: "primary.main" }
+          }
+        }),
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...rest,
+      children
+    }
+  );
+}
+const tabId = (value) => `rt-tab-${value}`;
+const tabPanelId = (value) => `rt-tabpanel-${value}`;
+function SectionTabPanel({ value, active, children }) {
+  if (value !== active) return null;
+  return /* @__PURE__ */ jsx(Box, { role: "tabpanel", id: tabPanelId(value), "aria-labelledby": tabId(value), tabIndex: 0, children });
+}
+export {
+  SectionTabPanel,
+  SectionTabs as default,
+  tabId,
+  tabPanelId
+};

package/dist/components/SiteNav.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import NextLink from "next/link";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import Container from "@mui/material/Container";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import { useTheme } from "@mui/material/styles";
+import { useTranslations } from "next-intl";
+import useOverflowTabs from "../hooks/useOverflowTabs.js";
+import { WELL_PAD, underlineRowSx, underlineTabSx, wellSx, wellTabSx } from "../lib/navTabSx.js";
+function SiteNav({ items, label, moreLabel, hideBelow = "md", sx }) {
+  const theme = useTheme();
+  const t = useTranslations("uikit");
+  const barH = theme.rt?.barHeight ?? null;
+  const navH = theme.rt?.navHeight ?? 48;
+  const underline = theme.rt?.ui?.tabs === "underline";
+  const navLabel = label ?? t("nav.sections");
+  const more = moreLabel ?? t("nav.more");
+  const activeIndex = items.findIndex((i) => i.active);
+  const { containerRef, measureRef, visibleCount } = useOverflowTabs(items.length, activeIndex);
+  let shown = items.slice(0, visibleCount);
+  let hidden = items.slice(visibleCount);
+  if (activeIndex >= visibleCount) {
+    const active = items[activeIndex];
+    shown = [...items.slice(0, Math.max(0, visibleCount - 1)), active];
+    hidden = items.filter((i) => !shown.includes(i));
+  }
+  const hiddenActive = hidden.some((i) => i.active);
+  const [anchor, setAnchor] = useState(null);
+  const menuId = useId();
+  const tabSx = (active) => underline ? underlineTabSx(active) : wellTabSx(theme, active);
+  const rowSx = underline ? underlineRowSx() : wellSx(theme);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "nav",
+      "aria-label": navLabel,
+      "data-tabs": underline ? "underline" : "well",
+      sx: [
+        {
+          display: hideBelow ? { xs: "none", [hideBelow]: "block" } : "block",
+          position: "sticky",
+          top: barH && barH !== 64 ? barH : { xs: 56, sm: 64 },
+          zIndex: (th) => th.zIndex.appBar - 1,
+          bgcolor: "background.paper",
+          borderBottom: "1px solid",
+          borderColor: "divider"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(Container, { maxWidth: false, sx: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(Box, { ref: containerRef, sx: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: navH }, children: /* @__PURE__ */ jsxs(Box, { sx: rowSx, children: [
+            shown.map((i) => /* @__PURE__ */ jsx(Box, { component: NextLink, href: i.href, "aria-current": i.active ? "page" : void 0, sx: tabSx(i.active), children: i.label }, i.key ?? i.href)),
+            hidden.length > 0 ? /* @__PURE__ */ jsxs(
+              ButtonBase,
+              {
+                onClick: (e) => setAnchor(e.currentTarget),
+                "aria-haspopup": "menu",
+                "aria-expanded": anchor ? "true" : "false",
+                "aria-controls": anchor ? menuId : void 0,
+                "aria-current": hiddenActive ? "page" : void 0,
+                sx: { ...tabSx(hiddenActive), pr: 1.25 },
+                children: [
+                  more,
+                  /* @__PURE__ */ jsx(ExpandMoreRoundedIcon, { sx: { fontSize: 18, ml: -0.25 } })
+                ]
+              }
+            ) : null
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              ref: measureRef,
+              "aria-hidden": "true",
+              sx: {
+                ...rowSx,
+                position: "absolute",
+                top: 0,
+                left: 0,
+                height: 0,
+                overflow: "hidden",
+                visibility: "hidden",
+                pointerEvents: "none",
+                maxWidth: "none",
+                ...underline ? null : { gap: `${WELL_PAD}px` }
+              },
+              children: [
+                items.map((i) => /* @__PURE__ */ jsx(Box, { component: "span", sx: tabSx(false), children: i.label }, i.key ?? i.href)),
+                /* @__PURE__ */ jsxs(Box, { component: "span", sx: { ...tabSx(false), pr: 1.25 }, children: [
+                  more,
+                  /* @__PURE__ */ jsx(ExpandMoreRoundedIcon, { sx: { fontSize: 18, ml: -0.25 } })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        hidden.length > 0 ? /* @__PURE__ */ jsx(
+          Menu,
+          {
+            id: menuId,
+            anchorEl: anchor,
+            open: Boolean(anchor),
+            onClose: () => setAnchor(null),
+            slotProps: { list: { "aria-label": more } },
+            children: hidden.map((i) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                component: NextLink,
+                href: i.href,
+                selected: i.active,
+                "aria-current": i.active ? "page" : void 0,
+                onClick: () => setAnchor(null),
+                children: i.label
+              },
+              i.key ?? i.href
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  SiteNav as default
+};

package/dist/components/Skeletons.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+function TableSkeleton({ rows = 8, columns = 5 }) {
+  return /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { borderRadius: (t) => `${t.rt?.radii?.card ?? 10}px`, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1.5, borderBottom: 1, borderColor: "divider", display: "flex", gap: 1.5, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "rounded", width: 320, height: 36 }),
+      /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "rounded", width: 90, height: 30 })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 2, sx: { alignItems: "center" }, children: Array.from({ length: columns }).map((_2, col) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        animation: "wave",
+        height: 20,
+        sx: { flex: col === 0 ? 2 : 1 }
+      },
+      col
+    )) }, row)) }) })
+  ] });
+}
+function CardListSkeleton({ count = 4, height = 84 }) {
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "rounded", height, sx: { borderRadius: (t) => `${t.rt?.radii?.card ?? 10}px` } }, i)) });
+}
+function FormSkeleton({ fields = 4 }) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 3, children: [
+    /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", width: 200, height: 36 }),
+    Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", width: 120, height: 18, sx: { mb: 0.75 } }),
+      /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "rounded", height: 40 })
+    ] }, i))
+  ] });
+}
+function ShellSkeleton() {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", minHeight: "100dvh" }, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { width: { xs: 0, md: 260 }, flexShrink: 0, borderRight: { md: 1 }, borderColor: "divider", p: 2, display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ jsx(Stack, { spacing: 1.5, sx: { mt: 9 }, children: Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "rounded", height: 34 }, i)) }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { height: 64, borderBottom: 1, borderColor: "divider", display: "flex", alignItems: "center", px: 2, gap: 2 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "circular", width: 28, height: 28 }),
+        /* @__PURE__ */ jsx(Skeleton, { animation: "wave", variant: "text", width: 180, height: 24 })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { sx: { p: 3 }, children: /* @__PURE__ */ jsx(CardListSkeleton, { count: 3, height: 120 }) })
+    ] })
+  ] });
+}
+const PAGE_SHAPES = {
+  cards: (props) => /* @__PURE__ */ jsx(CardListSkeleton, { count: 3, height: 120, ...props }),
+  table: (props) => /* @__PURE__ */ jsx(TableSkeleton, { rows: 8, columns: 5, ...props }),
+  form: (props) => /* @__PURE__ */ jsx(FormSkeleton, { fields: 5, ...props })
+};
+function PageSkeleton({ shape = "cards", ...props }) {
+  const Render = PAGE_SHAPES[shape] ?? PAGE_SHAPES.cards;
+  return /* @__PURE__ */ jsx(Box, { sx: { py: 1 }, children: Render(props) });
+}
+export {
+  CardListSkeleton,
+  FormSkeleton,
+  PageSkeleton,
+  ShellSkeleton,
+  TableSkeleton
+};

package/dist/components/Sortable.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { DndContext, DragOverlay, closestCenter, PointerSensor, KeyboardSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy, useSortable, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { useOrgThemeScope } from "../theme/OrgThemeRegistry.js";
+const overlayHandle = /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    size: "small",
+    "aria-hidden": true,
+    tabIndex: -1,
+    sx: { cursor: "grabbing", color: "text.disabled", flexShrink: 0 },
+    children: /* @__PURE__ */ jsx(DragIndicatorIcon, { fontSize: "small" })
+  }
+);
+function SortableList({ ids, onMove, children, renderOverlay }) {
+  const [activeId, setActiveId] = useState(null);
+  const themeScope = useOrgThemeScope();
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  function onDragEnd(e) {
+    setActiveId(null);
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    const from = ids.indexOf(active.id);
+    const to = ids.indexOf(over.id);
+    if (from !== -1 && to !== -1) onMove(from, to);
+  }
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: (e) => setActiveId(e.active.id),
+      onDragEnd,
+      onDragCancel: () => setActiveId(null),
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children }),
+        /* @__PURE__ */ jsx(DragOverlay, { children: activeId != null && renderOverlay ? /* @__PURE__ */ jsx("div", { className: themeScope, children: renderOverlay(activeId) }) : null })
+      ]
+    }
+  );
+}
+function SortableItem({ id, disabled, children }) {
+  const t = useTranslations("uikit");
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+  const style = {
+    // Translate only — never scale. Shifting siblings should slide, not stretch.
+    transform: CSS.Translate.toString(transform),
+    transition,
+    // The row the user picked up is drawn by the DragOverlay; leave a dimmed
+    // placeholder in the flow so the drop target stays visible.
+    opacity: isDragging ? 0.4 : 1
+  };
+  const handle = /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      "aria-label": t("sortable.drag"),
+      disabled,
+      sx: { cursor: disabled ? "default" : "grab", touchAction: "none", color: "text.disabled", flexShrink: 0 },
+      ...attributes,
+      ...listeners,
+      children: /* @__PURE__ */ jsx(DragIndicatorIcon, { fontSize: "small" })
+    }
+  );
+  return /* @__PURE__ */ jsx(Box, { ref: setNodeRef, style, children: children(handle) });
+}
+export {
+  SortableItem,
+  SortableList,
+  overlayHandle
+};

package/dist/components/StatTile.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+const GRAD = "linear-gradient(135deg, var(--rt-grad-from), var(--rt-grad-to))";
+const SIZES = {
+  medium: { p: 2.5, minHeight: 132, gap: 1.5, value: 30, label: "subtitle2" },
+  compact: { p: 2, minHeight: 88, gap: 0.75, value: 24, label: "body2" }
+};
+function StatTile({ label, value, caption, icon, chart, size = "medium", sx, ...rest }) {
+  const theme = useTheme();
+  const m = SIZES[size] ?? SIZES.medium;
+  const gradient = theme.rt?.ui?.stat === "gradient";
+  const pc = theme.vars?.palette?.primary?.mainChannel ?? theme.palette.primary.mainChannel;
+  const gradientSx = gradient ? {
+    backgroundImage: GRAD,
+    color: theme.vars?.palette?.primary?.contrastText ?? theme.palette.primary.contrastText,
+    border: "none",
+    boxShadow: `0 6px 18px -8px rgba(${pc} / 0.45)`
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      "data-treatment": gradient ? "gradient" : "plain",
+      "data-size": size,
+      sx: { p: m.p, display: "flex", flexDirection: "column", gap: m.gap, minHeight: m.minHeight, ...gradientSx, ...sx },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-start" }, children: [
+          icon ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              "aria-hidden": true,
+              sx: {
+                width: 40,
+                height: 40,
+                borderRadius: 2,
+                flexShrink: 0,
+                display: "grid",
+                placeItems: "center",
+                // On the gradient, a translucent chip in the tile's own text colour;
+                // on the plain surface, a soft accent-tinted chip with the accent icon.
+                ...gradient ? { backgroundColor: "rgba(255,255,255,0.20)", color: "inherit" } : { backgroundColor: `rgba(${pc} / 0.12)`, color: "primary.main" }
+              },
+              children: icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: m.label, sx: { fontWeight: 600, lineHeight: 1.25 }, children: label }),
+            caption ? /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: gradient ? { opacity: 0.82 } : { color: "text.secondary" }, children: caption }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 1, mt: "auto" }, children: [
+          /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontSize: m.value, fontWeight: 700, lineHeight: 1, letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }, children: value }),
+          chart ? /* @__PURE__ */ jsx(Box, { sx: { flexShrink: 0, opacity: gradient ? 0.9 : 1 }, children: chart }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  StatTile as default
+};

package/dist/components/StatusChip.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import { useTheme } from "@mui/material/styles";
+import { chipColor, tagStyle } from "../lib/chipTone.js";
+function StatusChip({ role = "idle", tagKey, tagIndex, ...rest }) {
+  const theme = useTheme();
+  const secondaryIsOwnColour = theme.palette.secondary?.main !== theme.palette.info?.main && theme.palette.secondary?.main !== theme.palette.text?.secondary;
+  if (role === "tag") {
+    const { color, variant } = tagStyle(tagKey ?? rest.label, secondaryIsOwnColour, tagIndex);
+    return /* @__PURE__ */ jsx(Chip, { color, variant, ...rest });
+  }
+  return /* @__PURE__ */ jsx(Chip, { color: chipColor(role, tagKey ?? rest.label, secondaryIsOwnColour), ...rest });
+}
+export {
+  StatusChip as default
+};

package/dist/components/StatusDot.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { chipColor } from "../lib/chipTone.js";
+function StatusDot({ role = "idle", label, size = 8, sx, ...rest }) {
+  const theme = useTheme();
+  const palette = chipColor(role, label);
+  const hidden = rest["aria-hidden"] === true || rest["aria-hidden"] === "true";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      role: hidden ? void 0 : "img",
+      "aria-label": hidden ? void 0 : label,
+      title: hidden ? void 0 : label,
+      ...rest,
+      sx: [
+        {
+          display: "inline-block",
+          flexShrink: 0,
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          /*
+           * `default` is the one role with no palette entry of its own — it is
+           * the absence of a colour owed, which reads as the muted mark a
+           * disabled control uses rather than as a hue.
+           */
+          bgcolor: palette === "default" ? "text.disabled" : `${palette}.main`,
+          // A pale theme's success on a pale ground is a dot you have to look
+          // for; the ring is what makes it land at 8px.
+          boxShadow: palette === "default" ? "none" : `0 0 0 2px rgba(${theme.vars.palette[palette].mainChannel} / 0.18)`
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ]
+    }
+  );
+}
+export {
+  StatusDot as default
+};