mui-atelier 0.1.0

package/dist/components/BrandHeader.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import MenuIcon from "@mui/icons-material/Menu";
+import Link from "next/link";
+import { useTheme } from "@mui/material/styles";
+import { useTranslations } from "next-intl";
+import ModeToggle from "./ModeToggle.js";
+import LanguageSwitcher from "./LanguageSwitcher.js";
+import { useBrand } from "./BrandProvider.js";
+import BrandLink from "./BrandLink.js";
+function BrandHeader({ siteName: siteNameProp, href = "/", logoUrl = null, navItems = [], actions = null }) {
+  const brand = useBrand();
+  const siteName = siteNameProp === void 0 ? brand.siteName : siteNameProp;
+  const { rt } = useTheme();
+  const t = useTranslations("uikit");
+  const barH = rt?.barHeight ?? null;
+  const [open, setOpen] = useState(false);
+  const hasNav = navItems.length > 0;
+  return /* @__PURE__ */ jsxs(AppBar, { position: "sticky", children: [
+    /* @__PURE__ */ jsxs(Toolbar, { sx: barH && barH !== 64 ? { gap: 2, minHeight: `${barH}px !important`, px: 2 } : { gap: 2 }, children: [
+      hasNav ? /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          edge: "start",
+          onClick: () => setOpen(true),
+          sx: { display: { md: "none" }, mr: -1 },
+          "aria-label": t("nav.open"),
+          children: /* @__PURE__ */ jsx(MenuIcon, {})
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(BrandLink, { siteName, href, logoUrl }),
+      /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+      actions ? /* @__PURE__ */ jsx(Box, { sx: { flexShrink: 0, display: "flex", alignItems: "center" }, children: actions }) : null,
+      /* @__PURE__ */ jsxs(Box, { sx: { display: hasNav ? { xs: "none", md: "contents" } : "contents" }, children: [
+        /* @__PURE__ */ jsx(LanguageSwitcher, {}),
+        /* @__PURE__ */ jsx(ModeToggle, {})
+      ] })
+    ] }),
+    hasNav ? /* @__PURE__ */ jsxs(
+      Drawer,
+      {
+        anchor: "right",
+        open,
+        onClose: () => setOpen(false),
+        sx: { display: { md: "none" } },
+        slotProps: { paper: { sx: { width: "min(78vw, 320px)" } } },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, p: 1.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: { color: "text.secondary" }, noWrap: true, children: siteName }),
+            /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpen(false), size: "small", "aria-label": t("nav.close"), children: /* @__PURE__ */ jsx(CloseRoundedIcon, { fontSize: "small" }) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(List, { onClick: (e) => {
+            if (e.target.closest("a")) setOpen(false);
+          }, children: navItems.map((item) => /* @__PURE__ */ jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsx(ListItemButton, { component: Link, href: item.href, children: /* @__PURE__ */ jsx(ListItemText, { primary: item.label }) }) }, item.href)) }),
+          /* @__PURE__ */ jsx(Divider, { sx: { mt: "auto" } }),
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, p: 1.5 }, children: [
+            /* @__PURE__ */ jsx(LanguageSwitcher, {}),
+            /* @__PURE__ */ jsx(ModeToggle, {})
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  BrandHeader as default
+};

package/dist/components/BrandLink.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Skeleton from "@mui/material/Skeleton";
+import Link from "next/link";
+import BrandMark from "./BrandMark.js";
+import { useBrand } from "./BrandProvider.js";
+function BrandLink({ siteName: siteNameProp, href = "/", logoUrl = null }) {
+  const brand = useBrand();
+  const siteName = siteNameProp === void 0 ? brand.siteName : siteNameProp;
+  if (!siteName && !logoUrl) return null;
+  const external = /^https?:\/\//.test(href);
+  const linkProps = external ? { component: "a", href, target: "_blank", rel: "noopener noreferrer" } : { component: Link, href };
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.2, ...linkProps, sx: { alignItems: "center", textDecoration: "none", color: "inherit", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(BrandMark, { size: 28, logoUrl, alt: "" }),
+    siteName ? /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", className: "rt-wordmark", noWrap: true, sx: { minWidth: 0 }, children: siteName }) : /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 104, sx: { fontSize: "1.25rem" } })
+  ] });
+}
+export {
+  BrandLink as default
+};

package/dist/components/BrandMark.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+function BrandMark({ size = 32, logoUrl = null, alt = "", sx }) {
+  const radius = Math.round(size * 0.3);
+  const frame = {
+    width: size,
+    height: size,
+    flexShrink: 0,
+    borderRadius: `var(--rt-mark-radius, ${radius}px)`,
+    display: "grid",
+    placeItems: "center"
+  };
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "img",
+        src: logoUrl,
+        alt,
+        sx: [
+          {
+            ...frame,
+            /*
+             * A logo is sized by HEIGHT, not forced into the glyph's square.
+             * Most org logos are wordmarks — wide, not square — and a 3:1
+             * wordmark contained in a 28x28 box renders as an unreadable 28x9
+             * sliver. Fixing the height and letting the width follow gives a
+             * square logo exactly the glyph's footprint and a wordmark room to
+             * be legible, up to a cap so a very wide one can't push the nav off
+             * the header.
+             */
+            width: "auto",
+            maxWidth: size * 4,
+            // contain, never cover — a logo cropped to fill its box is a
+            // mangled logo.
+            objectFit: "contain",
+            objectPosition: "left center",
+            // No gradient and no glow behind a real logo: an org's own mark
+            // shouldn't be made to sit on our brand colour.
+            backgroundColor: "transparent"
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "aria-hidden": true,
+      sx: [
+        {
+          ...frame,
+          backgroundImage: "linear-gradient(135deg, var(--rt-grad-from), var(--rt-grad-to))",
+          boxShadow: (theme) => `var(--rt-mark-shadow, 0 3px 9px -2px rgba(${theme.vars.palette.primary.mainChannel} / 0.34))`
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: /* @__PURE__ */ jsxs(Box, { component: "svg", viewBox: "0 0 24 24", sx: { width: size * 0.58, height: size * 0.58 }, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("rect", { x: "5", y: "6", width: "14", height: "2.8", rx: "1.4", fill: "#fff", opacity: "0.95" }),
+        /* @__PURE__ */ jsx("rect", { x: "5", y: "10.6", width: "14", height: "2.8", rx: "1.4", fill: "#fff", opacity: "0.7" }),
+        /* @__PURE__ */ jsx("rect", { x: "5", y: "15.2", width: "9", height: "2.8", rx: "1.4", fill: "#fff", opacity: "0.5" })
+      ] })
+    }
+  );
+}
+export {
+  BrandMark as default
+};

package/dist/components/BrandProvider.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const BrandContext = createContext({ siteName: null, copyright: null });
+function BrandProvider({ siteName = null, copyright = null, children }) {
+  return /* @__PURE__ */ jsx(BrandContext.Provider, { value: { siteName, copyright }, children });
+}
+function useBrand() {
+  return useContext(BrandContext);
+}
+export {
+  BrandProvider as default,
+  useBrand
+};

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import NextLink from "next/link";
+import { useTheme } from "@mui/material/styles";
+import { useTranslations } from "next-intl";
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
+function Breadcrumbs({ items, sx }) {
+  const t = useTranslations("uikit");
+  const { rt } = useTheme();
+  const shown = (items ?? []).filter((it) => it && it.label);
+  const glass = rt?.ui?.surface === "glass";
+  const fontFamily = glass ? rt?.mono : rt?.headingFont ?? void 0;
+  const separator = glass ? "/" : "\u203A";
+  const berry = rt?.ui?.chrome === "berry";
+  const firstHref = shown.find((it) => it.href)?.href ?? "";
+  const orgSlug = firstHref.split("/")[1];
+  const orgHome = orgSlug ? `/${orgSlug}` : null;
+  if (berry) {
+    return /* @__PURE__ */ jsxs(
+      MuiBreadcrumbs,
+      {
+        "aria-label": t("breadcrumb.aria"),
+        separator: /* @__PURE__ */ jsx(ChevronRightRoundedIcon, { sx: { fontSize: 16 } }),
+        sx: [
+          { mb: 2, fontSize: "0.75rem", "& .MuiBreadcrumbs-separator": { color: "text.secondary", mx: 0.5 }, "& .MuiBreadcrumbs-li": { minWidth: 0, display: "flex" } },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        children: [
+          berry && orgHome ? /* @__PURE__ */ jsx(Link, { component: NextLink, href: orgHome, sx: { display: "flex", color: "primary.main" }, "aria-label": t("route.dashboard"), children: /* @__PURE__ */ jsx(HomeOutlinedIcon, { sx: { fontSize: 16 } }) }) : null,
+          shown.map((it, i) => it.href && i !== shown.length - 1 ? /* @__PURE__ */ jsx(Link, { component: NextLink, href: it.href, underline: "hover", sx: { color: "text.secondary", fontSize: "0.75rem", fontWeight: 500 }, children: it.label }, i) : /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontSize: "0.75rem", fontWeight: 500, minWidth: 0, overflowWrap: "anywhere" }, "aria-current": i === shown.length - 1 ? "page" : void 0, children: it.label }, i))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MuiBreadcrumbs,
+    {
+      "aria-label": t("breadcrumb.aria"),
+      separator,
+      sx: [
+        { mb: 2, fontFamily, fontSize: "1rem", "& .MuiBreadcrumbs-separator": { color: "text.secondary", fontWeight: 600 }, "& .MuiBreadcrumbs-li": { minWidth: 0 } },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: shown.map((it, i) => it.href && i !== shown.length - 1 ? (
+        // Ancestors carry the org ACCENT so they read as live navigation, not
+        // muted chrome — the accent is the theme's, so this stays on-brand
+        // under every palette (navigation, not status: green stays reserved).
+        /* @__PURE__ */ jsx(Link, { component: NextLink, href: it.href, underline: "hover", color: "primary", variant: "body1", sx: { fontFamily, fontWeight: 600 }, children: it.label }, i)
+      ) : (
+        // The current page is the loudest thing in the trail: full weight, ink.
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { color: "text.primary", fontFamily, fontWeight: 700, minWidth: 0, overflowWrap: "anywhere" }, "aria-current": i === shown.length - 1 ? "page" : void 0, children: it.label }, i)
+      ))
+    }
+  );
+}
+export {
+  Breadcrumbs as default
+};

package/dist/components/CardHead.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useHeadingLevel } from "./HeadingLevel.js";
+function CardHead({ title, action = null, component }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        rowGap: 1.5,
+        px: { xs: 2, sm: 3 },
+        py: 2,
+        borderBottom: 1,
+        borderColor: "divider"
+      },
+      children: [
+        title ? /* @__PURE__ */ jsx(CardHeadTitle, { component, children: title }) : /* @__PURE__ */ jsx("span", {}),
+        action
+      ]
+    }
+  );
+}
+function CardHeadTitle({ children, component }) {
+  const level = useHeadingLevel();
+  return (
+    // Matches SectionPanel's heading: 1.125rem/500 under a berry chrome.
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "h6",
+        component: component ?? level,
+        sx: (t) => ({ minWidth: 0, ...t.rt?.ui?.surface === "berry" ? { fontSize: "1.125rem", fontWeight: 500 } : null }),
+        children
+      }
+    )
+  );
+}
+export {
+  CardHeadTitle,
+  CardHead as default
+};

package/dist/components/ConfirmProvider.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useId, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { useOrgThemeScope } from "../theme/OrgThemeRegistry.js";
+const TONES = {
+  default: { color: "primary", focus: "confirm" },
+  caution: { color: "warning", focus: "cancel" },
+  destructive: { color: "error", focus: "cancel" }
+};
+const ConfirmContext = createContext(() => Promise.resolve(false));
+function useConfirm() {
+  return useContext(ConfirmContext);
+}
+function ConfirmProvider({ children }) {
+  const t = useTranslations("uikit");
+  const [opts, setOpts] = useState(null);
+  const resolver = useRef(null);
+  const themeScope = useOrgThemeScope();
+  const titleId = useId();
+  const bodyId = useId();
+  const confirm = useCallback((options) => new Promise((resolve) => {
+    resolver.current = resolve;
+    setOpts(options ?? {});
+  }), []);
+  const settle = (result) => {
+    resolver.current?.(result);
+    resolver.current = null;
+    setOpts(null);
+  };
+  const tone = TONES[opts?.tone] ?? TONES.default;
+  const message = opts?.message ?? opts?.body ?? null;
+  const confirmLabel = opts?.confirmLabel ?? (opts?.tone === "destructive" ? t("confirm.delete") : t("confirm.confirm"));
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: confirm, children: [
+    children,
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: opts !== null,
+        onClose: () => settle(false),
+        maxWidth: "xs",
+        fullWidth: true,
+        className: themeScope,
+        "aria-labelledby": titleId,
+        "aria-describedby": message ? bodyId : void 0,
+        slotProps: { paper: { "data-tone": opts?.tone ?? "default" } },
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { id: titleId, children: opts?.title ?? t("confirm.title") }),
+          message ? /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(DialogContentText, { id: bodyId, children: message }) }) : null,
+          /* @__PURE__ */ jsxs(DialogActions, { children: [
+            /* @__PURE__ */ jsx(Button, { onClick: () => settle(false), color: "inherit", autoFocus: tone.focus === "cancel", children: opts?.cancelLabel ?? t("confirm.cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => settle(true),
+                color: tone.color,
+                variant: "contained",
+                autoFocus: tone.focus === "confirm",
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ConfirmProvider as default,
+  useConfirm
+};