mui-atelier 0.1.0

package/dist/lib/navLock.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState } from "react";
+const NavLockedContext = createContext(false);
+const SetNavLockContext = createContext(() => {
+});
+function NavLockProvider({ children }) {
+  const [locked, setLocked] = useState(false);
+  const value = useMemo(() => setLocked, []);
+  return /* @__PURE__ */ jsx(SetNavLockContext.Provider, { value, children: /* @__PURE__ */ jsx(NavLockedContext.Provider, { value: locked, children }) });
+}
+function useNavLock() {
+  return useContext(SetNavLockContext);
+}
+function useNavLocked() {
+  return useContext(NavLockedContext);
+}
+export {
+  NavLockProvider,
+  useNavLock,
+  useNavLocked
+};

package/dist/lib/navTabSx.js

@@ -0,0 +1,78 @@
+const WELL_PAD = 4;
+function wellSx(theme) {
+  const radius = theme.rt?.radii?.button ?? 8;
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    maxWidth: "100%",
+    p: `${WELL_PAD}px`,
+    gap: `${WELL_PAD}px`,
+    borderRadius: `${radius + WELL_PAD}px`,
+    bgcolor: "rgba(0, 0, 0, 0.05)",
+    ...theme.applyStyles?.("dark", { backgroundColor: "rgba(0, 0, 0, 0.32)" }),
+    border: "1px solid",
+    borderColor: "divider"
+  };
+}
+function wellTabSx(theme, active) {
+  const radius = theme.rt?.radii?.button ?? 8;
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 0.5,
+    minHeight: 34,
+    px: 1.75,
+    borderRadius: `${radius}px`,
+    // Always a border, so activation changes colour and never width.
+    border: "1px solid transparent",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    fontSize: "0.9rem",
+    fontWeight: 600,
+    lineHeight: 1,
+    color: "text.secondary",
+    cursor: "pointer",
+    transition: "color 150ms ease, background-color 150ms ease, box-shadow 150ms ease",
+    "&:hover": { color: "text.primary" },
+    ...active ? {
+      color: "primary.main",
+      bgcolor: "background.paper",
+      borderColor: "divider",
+      boxShadow: theme.rt?.lift?.rest ?? theme.shadows[1],
+      ...theme.applyStyles?.("dark", { boxShadow: theme.rt?.lift?.restDark ?? theme.shadows[1] }),
+      "&:hover": { color: "primary.main" }
+    } : null,
+    "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+  };
+}
+function underlineRowSx() {
+  return { display: "flex", alignItems: "stretch", columnGap: 3 };
+}
+function underlineTabSx(active) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 0.5,
+    py: 1.5,
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: active ? "secondary.main" : "text.secondary",
+    borderBottom: "2px solid",
+    borderColor: active ? "secondary.main" : "transparent",
+    mb: "-1px",
+    // sit the indicator on the bar's own bottom border
+    cursor: "pointer",
+    transition: "color 150ms ease, border-color 150ms ease",
+    "&:hover": { color: active ? "secondary.main" : "text.primary" },
+    "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+  };
+}
+export {
+  WELL_PAD,
+  underlineRowSx,
+  underlineTabSx,
+  wellSx,
+  wellTabSx
+};

package/dist/lib/orgTime.js

@@ -0,0 +1,243 @@
+const MONTHS_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const MONTHS_LONG = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+const pad = (n) => String(n).padStart(2, "0");
+const DEFAULT_DATE_FORMAT = "medium";
+const DEFAULT_TIME_FORMAT = "24h";
+const RENDERERS = {
+  medium: (p) => `${p.d} ${MONTHS_SHORT[p.m - 1]} ${p.y}`,
+  medium_us: (p) => `${MONTHS_SHORT[p.m - 1]} ${p.d}, ${p.y}`,
+  long: (p) => `${p.d} ${MONTHS_LONG[p.m - 1]} ${p.y}`,
+  dmy: (p) => `${pad(p.d)}/${pad(p.m)}/${p.y}`,
+  mdy: (p) => `${pad(p.m)}/${pad(p.d)}/${p.y}`,
+  iso: (p) => `${p.y}-${pad(p.m)}-${pad(p.d)}`
+};
+const DATE_FORMATS = [
+  { key: "medium", label: "Day Month Year" },
+  { key: "medium_us", label: "Month Day, Year" },
+  { key: "long", label: "Day Month Year (full)" },
+  { key: "dmy", label: "Numeric, day first" },
+  { key: "mdy", label: "Numeric, month first" },
+  { key: "iso", label: "ISO 8601" }
+].map((f) => ({ ...f, example: RENDERERS[f.key]({ y: 2026, m: 9, d: 30 }) }));
+const CLOCKS = { "24h": "24h", "12h": "12h" };
+const TIME_FORMATS = [
+  { key: "24h", label: "24-hour", clock: "24h", zone: null },
+  { key: "12h", label: "12-hour", clock: "12h", zone: null },
+  { key: "24h_zone", label: "24-hour with timezone", clock: "24h", zone: "abbr" },
+  { key: "12h_zone", label: "12-hour with timezone", clock: "12h", zone: "abbr" },
+  { key: "24h_offset", label: "24-hour with UTC offset", clock: "24h", zone: "offset" },
+  { key: "12h_offset", label: "12-hour with UTC offset", clock: "12h", zone: "offset" },
+  { key: "24h_zone_offset", label: "24-hour with timezone and UTC offset", clock: "24h", zone: "both" },
+  { key: "12h_zone_offset", label: "12-hour with timezone and UTC offset", clock: "12h", zone: "both" }
+];
+const timeSpec = (key) => TIME_FORMATS.find((f) => f.key === key) ?? TIME_FORMATS[0];
+function timeFormatOptions(timezone, sample = "2026-09-30T17:00") {
+  return TIME_FORMATS.map((f) => ({
+    ...f,
+    example: formatOrgTime(sample, { timezone, time_format: f.key })
+  }));
+}
+function partsOf(value, tz) {
+  const raw = String(value ?? "");
+  if (raw === "") return null;
+  const local = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2}))?$/.exec(raw);
+  if (local) {
+    return {
+      y: Number(local[1]),
+      m: Number(local[2]),
+      d: Number(local[3]),
+      hh: local[4] === void 0 ? 0 : Number(local[4]),
+      mm: local[5] === void 0 ? 0 : Number(local[5]),
+      hasTime: local[4] !== void 0,
+      // No instant yet: a wall-clock string names a time in the org's zone, and
+      // which instant that is depends on the zone's offset on that very date.
+      // Resolved on demand in instantOf, only when a zone marker is wanted.
+      instant: null
+    };
+  }
+  const dt = new Date(raw);
+  if (Number.isNaN(dt.getTime())) return null;
+  let f;
+  try {
+    f = new Intl.DateTimeFormat("en-CA", {
+      timeZone: tz || "UTC",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    }).formatToParts(dt);
+  } catch {
+    return partsOf(raw, "UTC");
+  }
+  const p = Object.fromEntries(f.map((x) => [x.type, x.value]));
+  return {
+    y: Number(p.year),
+    m: Number(p.month),
+    d: Number(p.day),
+    // en-CA renders midnight as "24" rather than "00" in some engines.
+    hh: Number(p.hour) % 24,
+    mm: Number(p.minute),
+    hasTime: true,
+    instant: dt
+  };
+}
+function offsetMinutesAt(date, tz) {
+  const f = new Intl.DateTimeFormat("en-CA", {
+    timeZone: tz,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }).formatToParts(date);
+  const p = Object.fromEntries(f.map((x) => [x.type, x.value]));
+  const asUtc = Date.UTC(
+    Number(p.year),
+    Number(p.month) - 1,
+    Number(p.day),
+    Number(p.hour) % 24,
+    Number(p.minute),
+    Number(p.second)
+  );
+  return (asUtc - date.getTime()) / 6e4;
+}
+function instantOf(p, tz) {
+  if (p.instant) return p.instant;
+  const guess = Date.UTC(p.y, p.m - 1, p.d, p.hh, p.mm);
+  const first = offsetMinutesAt(new Date(guess), tz);
+  const corrected = guess - first * 6e4;
+  return new Date(guess - offsetMinutesAt(new Date(corrected), tz) * 6e4);
+}
+function zoneMarker(p, tz, spec) {
+  if (!spec.zone) return "";
+  const zone = tz || "UTC";
+  const named = (style) => new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: style, year: "numeric" }).formatToParts(instantOf(p, zone)).find((x) => x.type === "timeZoneName")?.value;
+  try {
+    if (spec.zone === "abbr") return named("short") ?? "";
+    const offset = named("longOffset");
+    if (!offset) return "";
+    const utc = `(UTC${normalizeOffset(offset)})`;
+    if (spec.zone === "offset") return utc;
+    const abbr = named("short");
+    return abbr ? `${abbr} ${utc}` : utc;
+  } catch {
+    return "";
+  }
+}
+function clock(p, spec) {
+  if (CLOCKS[spec.clock] === "12h") {
+    const h = p.hh % 12 === 0 ? 12 : p.hh % 12;
+    return `${h}:${pad(p.mm)} ${p.hh < 12 ? "AM" : "PM"}`;
+  }
+  return `${pad(p.hh)}:${pad(p.mm)}`;
+}
+function formatOrgTime(value, org = {}, { zone = true } = {}) {
+  const p = partsOf(value, org.timezone);
+  if (!p) return null;
+  const spec = timeSpec(org.time_format ?? DEFAULT_TIME_FORMAT);
+  const marker = zone ? zoneMarker(p, org.timezone, spec) : null;
+  return marker ? `${clock(p, spec)} ${marker}` : clock(p, spec);
+}
+function formatOrgDate(value, org = {}, { withTime = "auto" } = {}) {
+  const p = partsOf(value, org.timezone);
+  if (!p) return null;
+  const render = RENDERERS[org.date_format] ?? RENDERERS[DEFAULT_DATE_FORMAT];
+  const date = render(p);
+  const show = withTime === "auto" ? p.hasTime && !(p.hh === 0 && p.mm === 0) : withTime;
+  if (!show) return date;
+  return `${date}, ${formatOrgTime(value, org)}`;
+}
+function formatOrgDateTimeShort(value, org = {}) {
+  return formatOrgDate(value, org, { withTime: true });
+}
+function orgDay(value, org = {}) {
+  const p = partsOf(value, org.timezone);
+  if (!p) return null;
+  return `${String(p.y).padStart(4, "0")}-${String(p.m).padStart(2, "0")}-${String(p.d).padStart(2, "0")}`;
+}
+function normalizeOffset(name) {
+  const raw = String(name || "").replace(/^GMT/, "").trim();
+  if (raw === "") return "+00:00";
+  const m = raw.match(/^([+-])(\d{1,2})(?::?(\d{2}))?$/);
+  return m ? `${m[1]}${m[2].padStart(2, "0")}:${m[3] || "00"}` : "+00:00";
+}
+function formatOrgDateTime(iso, org = {}) {
+  const p = partsOf(iso, org.timezone);
+  if (!p) return null;
+  const render = RENDERERS[org.date_format] ?? RENDERERS[DEFAULT_DATE_FORMAT];
+  const stamp = `${render(p)}, ${formatOrgTime(iso, org)}`;
+  if (timeSpec(org.time_format ?? DEFAULT_TIME_FORMAT).zone) return stamp;
+  const zone = zoneSuffix(iso, org.timezone);
+  return zone ? `${stamp} ${zone}` : stamp;
+}
+function orgZoneMark(value, org = {}) {
+  if (timeSpec(org.time_format ?? DEFAULT_TIME_FORMAT).zone) return "";
+  if (!partsOf(value, org.timezone)?.hasTime) return "";
+  return zoneSuffix(value, org.timezone);
+}
+function zoneSuffix(value, tz) {
+  const d = new Date(String(value ?? ""));
+  if (Number.isNaN(d.getTime())) return "";
+  try {
+    const zone = tz || "UTC";
+    const short = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: "shortGeneric", year: "numeric" }).formatToParts(d).find((x) => x.type === "timeZoneName")?.value;
+    const long = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: "longOffset", year: "numeric" }).formatToParts(d).find((x) => x.type === "timeZoneName")?.value;
+    return `${short} (GMT/UTC ${normalizeOffset(long)})`;
+  } catch {
+    return "";
+  }
+}
+function timeLeftToSubmit(endIso) {
+  const left = timeLeftParts(endIso);
+  if (!left) return null;
+  return `${left.count} ${left.unit}${left.count === 1 ? "" : "s"} left to submit`;
+}
+function timeLeftParts(endIso) {
+  if (!endIso) return null;
+  const end = new Date(endIso);
+  if (Number.isNaN(end.getTime())) return null;
+  const ms = end.getTime() - Date.now();
+  if (ms <= 0) return null;
+  const mins = Math.floor(ms / 6e4);
+  const days = Math.floor(mins / 1440);
+  const hours = Math.floor(mins % 1440 / 60);
+  if (days >= 1) return { count: days, unit: "day" };
+  if (hours >= 1) return { count: hours, unit: "hour" };
+  return { count: Math.max(1, mins), unit: "minute" };
+}
+function timeLeftKey(unit) {
+  return { day: "timeLeftDays", hour: "timeLeftHours", minute: "timeLeftMinutes" }[unit];
+}
+export {
+  DATE_FORMATS,
+  DEFAULT_DATE_FORMAT,
+  DEFAULT_TIME_FORMAT,
+  TIME_FORMATS,
+  formatOrgDate,
+  formatOrgDateTime,
+  formatOrgDateTimeShort,
+  formatOrgTime,
+  orgDay,
+  orgZoneMark,
+  timeFormatOptions,
+  timeLeftKey,
+  timeLeftParts,
+  timeLeftToSubmit
+};

package/dist/lib/pageHtml.js

@@ -0,0 +1,139 @@
+const HEADINGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const SAFE_STYLES = {
+  color: [/^#(?:[0-9a-fA-F]{3,4}){1,2}$/, /^rgba?\([\d.,%\s]+\)$/, /^[a-z]+$/i],
+  "background-color": [/^#(?:[0-9a-fA-F]{3,4}){1,2}$/, /^rgba?\([\d.,%\s]+\)$/, /^[a-z]+$/i],
+  "text-align": [/^(?:left|right|center|justify)$/],
+  "font-weight": [/^(?:normal|bold|[1-9]00)$/],
+  "font-style": [/^(?:normal|italic|oblique)$/],
+  "text-decoration": [/^(?:none|underline|line-through|overline)$/]
+};
+const PAGE_SANITIZE_OPTIONS = {
+  allowedTags: [
+    ...HEADINGS,
+    "p",
+    "br",
+    "hr",
+    "blockquote",
+    "pre",
+    "code",
+    "strong",
+    "em",
+    "b",
+    "i",
+    "u",
+    "s",
+    "sub",
+    "sup",
+    "span",
+    "ul",
+    "ol",
+    "li",
+    "a",
+    "img",
+    "figure",
+    "figcaption",
+    // Tables, including the parts a real table needs: a caption, a footer, and
+    // column groups.
+    //
+    // colgroup/col are kept for STRUCTURE, not for widths — an earlier comment
+    // here claimed the opposite. Column widths never survive: `width` is not in
+    // SAFE_STYLES, so a <col style="width:220px"> arrives as a bare <col />.
+    // The tags stay because dropping them would leave orphaned <col> elements
+    // for the parser to relocate inside the table, rearranging markup an author
+    // wrote by hand.
+    "table",
+    "thead",
+    "tbody",
+    "tfoot",
+    "caption",
+    "colgroup",
+    "col",
+    "tr",
+    "th",
+    "td"
+  ],
+  allowedAttributes: {
+    a: ["href", "title", "target", "rel"],
+    img: ["src", "alt", "title", "width", "height"],
+    // Alignment is emitted as an inline style on the BLOCK, not on a span, so
+    // the tags a block can be need to carry `style` — constrained to
+    // SAFE_STYLES above, which is what keeps that widening harmless.
+    span: ["style"],
+    p: ["style"],
+    ...Object.fromEntries(HEADINGS.map((h) => [h, ["style"]])),
+    // colspan/rowspan are how merged cells survive; without them a merged table
+    // silently reflows into the wrong shape.
+    td: ["style", "colspan", "rowspan"],
+    th: ["style", "colspan", "rowspan", "scope"],
+    col: ["span", "style"],
+    "*": ["class"]
+  },
+  allowedStyles: { "*": SAFE_STYLES },
+  allowedSchemes: ["http", "https", "mailto"],
+  /*
+   * Images are SAME-ORIGIN ONLY: no scheme is allowed for <img>, which leaves
+   * relative sources — e.g. `/images/{key}`, served from the site's own domain
+   * by a route handler.
+   *
+   * Refusing remote images is what lets a public page's `img-src` close to
+   * 'self' data:. A page that renders administrator-authored HTML may share a
+   * registrable parent domain with an authenticated app, so an <img> pointing
+   * anywhere it likes is an exfiltration channel for anything that survives
+   * this sanitiser. Hotlinking is also the worse feature: the image rots when
+   * the far end moves it, and it leaks every reader's IP to a third party.
+   *
+   * `data:` stays for <img> alone — the editor can produce one while an upload
+   * is in flight, and a data: URL on any OTHER tag is a script-execution vector.
+   */
+  allowedSchemesByTag: { img: ["data"] },
+  // `//evil.test/x.png` has no scheme, so a scheme allow-list does not stop it —
+  // the browser resolves it against the page's protocol and fetches it. Without
+  // this, every restriction above is one slash away from being bypassed.
+  allowProtocolRelative: false,
+  transformTags: {
+    // Any link that opens a new tab must not hand the opener over.
+    a: (tagName, attribs) => ({
+      tagName,
+      attribs: { ...attribs, ...attribs.target === "_blank" ? { rel: "noopener noreferrer" } : {} }
+    })
+  }
+};
+const NO_IMAGES = ["img", "figure", "figcaption"];
+const EMAIL_TABLE_ATTRS = {
+  table: ["align", "width", "border", "cellpadding", "cellspacing", "bgcolor"],
+  thead: ["align", "bgcolor"],
+  tbody: ["align", "bgcolor"],
+  tfoot: ["align", "bgcolor"],
+  tr: ["align", "valign", "bgcolor"],
+  td: ["align", "valign", "bgcolor", "width", "height", "nowrap"],
+  th: ["align", "valign", "bgcolor", "width", "height", "nowrap"],
+  col: ["align", "valign", "width"]
+};
+const EMAIL_SANITIZE_OPTIONS = {
+  ...PAGE_SANITIZE_OPTIONS,
+  allowedTags: PAGE_SANITIZE_OPTIONS.allowedTags.filter((t) => !NO_IMAGES.includes(t)),
+  /*
+   * Derived by ADDITION, the mirror of the subtraction above: each widened tag
+   * is the PAGE list plus the email-only extras, so a tag that gains an
+   * attribute on the page side gains it here automatically. Restating the lists
+   * would be the second copy this file's opening comment warns about.
+   */
+  allowedAttributes: {
+    ...PAGE_SANITIZE_OPTIONS.allowedAttributes,
+    ...Object.fromEntries(
+      Object.entries(EMAIL_TABLE_ATTRS).map(([tag, extra]) => [
+        tag,
+        [...PAGE_SANITIZE_OPTIONS.allowedAttributes[tag] ?? [], ...extra]
+      ])
+    )
+  }
+};
+const GUIDELINES_SANITIZE_OPTIONS = {
+  ...PAGE_SANITIZE_OPTIONS,
+  allowedTags: PAGE_SANITIZE_OPTIONS.allowedTags.filter((t) => !NO_IMAGES.includes(t))
+};
+export {
+  EMAIL_SANITIZE_OPTIONS,
+  GUIDELINES_SANITIZE_OPTIONS,
+  PAGE_SANITIZE_OPTIONS
+};

package/dist/lib/safeNext.js

@@ -0,0 +1,13 @@
+function safeNext(next, fallback = "/", prefix = null) {
+  if (typeof next !== "string" || next === "") return fallback;
+  if (!next.startsWith("/") || next[1] === "/" || next[1] === "\\") return fallback;
+  if (/^\/[^/]*:/.test(next)) return fallback;
+  if (prefix !== null) {
+    const inside = next === prefix || next.startsWith(`${prefix}/`) || next.startsWith(`${prefix}?`) || next.startsWith(`${prefix}#`);
+    if (!inside) return fallback;
+  }
+  return next;
+}
+export {
+  safeNext as default
+};

package/dist/lib/sanitizeHtml.js

@@ -0,0 +1,36 @@
+import DOMPurify from "dompurify";
+import { GUIDELINES_SANITIZE_OPTIONS } from "./pageHtml.js";
+const INLINE_TAGS = ["strong", "b", "em", "i", "u", "a", "br"];
+const BLOCK_TAGS = ["p", ...INLINE_TAGS];
+const RICH_TAGS = GUIDELINES_SANITIZE_OPTIONS.allowedTags;
+const RICH_ATTR = [
+  ...new Set(Object.values(GUIDELINES_SANITIZE_OPTIONS.allowedAttributes).flat())
+].filter((attr) => attr !== "style");
+let hooked = false;
+function ensureLinkHook() {
+  if (hooked || typeof window === "undefined" || typeof DOMPurify.addHook !== "function") return;
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A") {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer nofollow");
+    }
+  });
+  hooked = true;
+}
+function sanitizeHtml(html, { block = false, rich = false } = {}) {
+  if (!html) return "";
+  if (typeof window === "undefined") return "";
+  ensureLinkHook();
+  let input = String(html);
+  if (!block && !rich) {
+    input = input.replace(/<\/p\s*>\s*<p\b[^>]*>/gi, "<br>").replace(/<\/?p\b[^>]*>/gi, "");
+  }
+  return DOMPurify.sanitize(input, {
+    ALLOWED_TAGS: rich ? RICH_TAGS : block ? BLOCK_TAGS : INLINE_TAGS,
+    ALLOWED_ATTR: rich ? RICH_ATTR : ["href", "target", "rel"],
+    ALLOWED_URI_REGEXP: /^(?:https?:|mailto:|\/)/i
+  });
+}
+export {
+  sanitizeHtml
+};

package/dist/lib/slugify.js

@@ -0,0 +1,7 @@
+function slugify(name) {
+  const slug = String(name ?? "").normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 63).replace(/-+$/g, "");
+  return slug.length >= 3 ? slug : "";
+}
+export {
+  slugify as default
+};