mui-atelier 0.1.0

package/dist/lib/tableFilter.js

@@ -0,0 +1,147 @@
+const BLANK = "\0blank";
+const isEmpty = (v) => v === null || v === void 0 || v === "";
+const valuesOf = (v) => Array.isArray(v) ? v : [v];
+const keysOf = (raw) => {
+  const values = valuesOf(raw).filter((v) => !isEmpty(v));
+  return values.length === 0 ? [BLANK] : values.map((v) => String(v));
+};
+function filterableColumns(columns) {
+  return (columns ?? []).map((c) => {
+    if (c.filter === false) return null;
+    if (c.filter === void 0 && !c.value) return null;
+    const spec = typeof c.filter === "string" ? { kind: c.filter } : c.filter ?? {};
+    const of = spec.of ?? ((row) => c.value?.(row));
+    const label = spec.label ?? ((row) => {
+      const v = of(row);
+      return isEmpty(v) ? "" : String(v);
+    });
+    return {
+      id: c.id,
+      /*
+       * THE HEADER AS TEXT, because the chips build a string out of it.
+       *
+       * A column's `header` may be a NODE — the report viewer clamps a long
+       * question to two lines with a Box, and the submissions queue draws an
+       * icon beside one. That renders fine as a label and stringifies to
+       * "[object Object]" the moment a chip interpolates it, which is what the
+       * report filters have been showing. `filterHeader` is the plain words for
+       * a column that has any; every other column already is its own.
+       */
+      header: c.filterHeader ?? c.header,
+      kind: spec.kind ?? "text",
+      of,
+      label,
+      blankLabel: spec.blankLabel ?? "\u2014",
+      /*
+       * The declared value set, for a column whose values are CONFIGURED rather
+       * than intrinsic — review statuses are defined per org under Settings, so
+       * the vocabulary is a fact about the org, not about the rows on screen.
+       * Given, it is used verbatim; omitted, the options are derived from the
+       * rows (see optionsFor).
+       */
+      options: spec.options ?? null,
+      match: spec.match ?? "contains",
+      // Ordering for the dropdown: the column's sort value if it has one, so a
+      // review pipeline lists in pipeline order rather than alphabetically.
+      order: c.value
+    };
+  }).filter(Boolean);
+}
+function optionsFor(column, rows) {
+  const seen = /* @__PURE__ */ new Map();
+  if (column.options) {
+    for (const o of column.options) {
+      seen.set(String(o.value), {
+        value: String(o.value),
+        label: o.label,
+        order: o.order ?? null,
+        // Offered but unselectable — a bucket the product will have and does
+        // not yet. See TableFilters.
+        disabled: Boolean(o.disabled)
+      });
+    }
+  }
+  for (const row of rows ?? []) {
+    const raw = column.of(row);
+    const keys = keysOf(raw);
+    const labels = valuesOf(column.label(row));
+    keys.forEach((key, i) => {
+      if (seen.has(key)) return;
+      seen.set(key, {
+        value: key,
+        label: key === BLANK ? column.blankLabel : labels[i] ?? String(key),
+        order: column.order ? column.order(row) : null
+      });
+    });
+  }
+  const options = [...seen.values()];
+  return options.sort((a, b) => {
+    if (a.value === BLANK !== (b.value === BLANK)) return a.value === BLANK ? 1 : -1;
+    if (a.order !== null && b.order !== null && a.order !== b.order) return a.order < b.order ? -1 : 1;
+    return String(a.label).localeCompare(String(b.label));
+  });
+}
+function matchesQuery(row, columns, query, searchAlso) {
+  const terms = termsOf(query).map((t) => t.toLowerCase());
+  if (terms.length === 0) return true;
+  const hay = [
+    ...columns.map((c) => c.label(row)),
+    ...searchAlso?.(row) ?? []
+  ].filter((v) => !isEmpty(v)).join(" ").toLowerCase();
+  return terms.every((t) => hay.includes(t));
+}
+function termsOf(value) {
+  return String(value ?? "").split(/[,\s]+/).map((t) => t.trim()).filter(Boolean);
+}
+const isRange = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function isSet(value) {
+  if (isRange(value)) return !isEmpty(value.from) || !isEmpty(value.to);
+  return Array.isArray(value) ? value.length > 0 : !isEmpty(value);
+}
+function matchesColumn(row, column, wanted) {
+  if (column.kind === "number") {
+    const n = Number(column.of(row));
+    if (!Number.isFinite(n)) return false;
+    if (!isEmpty(wanted.from) && n < Number(wanted.from)) return false;
+    if (!isEmpty(wanted.to) && n > Number(wanted.to)) return false;
+    return true;
+  }
+  if (column.kind === "daterange") {
+    const on = String(column.of(row) ?? "").slice(0, 10);
+    if (on === "") return false;
+    if (!isEmpty(wanted.from) && on < wanted.from) return false;
+    if (!isEmpty(wanted.to) && on > wanted.to) return false;
+    return true;
+  }
+  if (column.kind === "select") {
+    const keys = keysOf(column.of(row));
+    const want = Array.isArray(wanted) ? wanted : [wanted];
+    return keys.some((key) => want.includes(key));
+  }
+  const hay = String(column.label(row) ?? "").toLowerCase();
+  const terms = termsOf(wanted).map((t) => t.toLowerCase());
+  if (terms.length === 0) return true;
+  return terms.some((t) => column.match === "exact" ? hay === t : hay.includes(t));
+}
+function applyFilters(rows, columns, { query = "", byColumn = {} } = {}, searchAlso) {
+  const filterable = filterableColumns(columns);
+  return (rows ?? []).filter((row) => {
+    for (const column of filterable) {
+      const wanted = byColumn[column.id];
+      if (!isSet(wanted)) continue;
+      if (!matchesColumn(row, column, wanted)) return false;
+    }
+    return matchesQuery(row, filterable, query, searchAlso);
+  });
+}
+function activeCount({ query = "", byColumn = {} } = {}) {
+  return (String(query).trim() === "" ? 0 : 1) + Object.values(byColumn).filter(isSet).length;
+}
+export {
+  BLANK,
+  activeCount,
+  applyFilters,
+  filterableColumns,
+  optionsFor,
+  termsOf
+};

package/dist/lib/tableStyle.js

@@ -0,0 +1,87 @@
+const PREFIX = "rt-tbl";
+const TABLE_STYLE_OPTIONS = {
+  borders: {
+    label: "Borders",
+    default: "all",
+    choices: [
+      { value: "all", label: "All cells", attrs: { border: "1" } },
+      { value: "outer", label: "Outline only", attrs: { border: "1" } },
+      { value: "none", label: "None", attrs: { border: "0" } }
+    ]
+  },
+  padding: {
+    label: "Cell padding",
+    default: "normal",
+    choices: [
+      { value: "compact", label: "Compact", attrs: { cellpadding: "4" } },
+      { value: "normal", label: "Normal", attrs: { cellpadding: "8" } },
+      { value: "roomy", label: "Roomy", attrs: { cellpadding: "14" } }
+    ]
+  },
+  width: {
+    label: "Width",
+    default: "full",
+    choices: [
+      { value: "full", label: "Full width", attrs: { width: "100%" } },
+      { value: "auto", label: "Fit content", attrs: null }
+    ]
+  }
+};
+const TABLE_STYLE_KEYS = Object.keys(TABLE_STYLE_OPTIONS);
+function tableStyleClass(attrs = {}) {
+  return TABLE_STYLE_KEYS.filter((key) => attrs[key] && attrs[key] !== TABLE_STYLE_OPTIONS[key].default).map((key) => `${PREFIX}-${key}-${attrs[key]}`).join(" ");
+}
+function tableStyleAttrs(attrs = {}) {
+  return TABLE_STYLE_KEYS.reduce((out, key) => {
+    const spec = TABLE_STYLE_OPTIONS[key];
+    const chosen = spec.choices.find((c) => c.value === (attrs[key] ?? spec.default));
+    return chosen?.attrs ? { ...out, ...chosen.attrs } : out;
+  }, { cellspacing: "0" });
+}
+function tableSx(theme) {
+  const line = `1px solid ${theme.vars?.palette?.divider ?? theme.palette.divider}`;
+  return {
+    "& table": {
+      borderCollapse: "collapse",
+      width: "100%",
+      my: 3,
+      // A wide table scrolls itself rather than the page. `display: block` is
+      // what makes overflow work on a table element — and it is also why the
+      // fit-content rule below needs `max-content` rather than `width: auto`:
+      // a block box fills its container whatever `auto` says.
+      display: "block",
+      overflowX: "auto"
+    },
+    "& table th, & table td": {
+      border: line,
+      px: 1.5,
+      py: 1,
+      verticalAlign: "top",
+      textAlign: "left"
+    },
+    "& table th": {
+      backgroundColor: theme.vars?.palette?.action?.hover ?? theme.palette.action.hover,
+      fontWeight: 700
+    },
+    "& table caption": {
+      captionSide: "bottom",
+      paddingTop: theme.spacing(1),
+      color: theme.vars?.palette?.text?.secondary ?? theme.palette.text.secondary,
+      fontSize: "0.875rem"
+    },
+    // Author overrides.
+    [`& table.${PREFIX}-borders-none th, & table.${PREFIX}-borders-none td`]: { border: 0 },
+    [`& table.${PREFIX}-borders-outer`]: { border: line },
+    [`& table.${PREFIX}-borders-outer th, & table.${PREFIX}-borders-outer td`]: { border: 0 },
+    [`& table.${PREFIX}-padding-compact th, & table.${PREFIX}-padding-compact td`]: { px: 0.75, py: 0.5 },
+    [`& table.${PREFIX}-padding-roomy th, & table.${PREFIX}-padding-roomy td`]: { px: 2.5, py: 1.75 },
+    [`& table.${PREFIX}-width-auto`]: { width: "max-content", maxWidth: "100%" }
+  };
+}
+export {
+  TABLE_STYLE_KEYS,
+  TABLE_STYLE_OPTIONS,
+  tableStyleAttrs,
+  tableStyleClass,
+  tableSx
+};

package/dist/test/jsdomShims.js

@@ -0,0 +1,53 @@
+if (typeof globalThis.ResizeObserver === "undefined") {
+  globalThis.ResizeObserver = class {
+    observe() {
+    }
+    unobserve() {
+    }
+    disconnect() {
+    }
+  };
+}
+if (typeof globalThis.localStorage === "undefined") {
+  const store = /* @__PURE__ */ new Map();
+  globalThis.localStorage = {
+    get length() {
+      return store.size;
+    },
+    key: (i) => [...store.keys()][i] ?? null,
+    getItem: (k) => store.has(String(k)) ? store.get(String(k)) : null,
+    setItem: (k, v) => {
+      store.set(String(k), String(v));
+    },
+    removeItem: (k) => {
+      store.delete(String(k));
+    },
+    clear: () => {
+      store.clear();
+    }
+  };
+}
+if (typeof Range !== "undefined") {
+  if (typeof Range.prototype.getClientRects !== "function") {
+    Range.prototype.getClientRects = function getClientRects() {
+      return Object.assign([], { item: () => null });
+    };
+  }
+  if (typeof Range.prototype.getBoundingClientRect !== "function") {
+    Range.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      return {
+        x: 0,
+        y: 0,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+        toJSON() {
+          return this;
+        }
+      };
+    };
+  }
+}

package/dist/test/themeContract.js

@@ -0,0 +1,178 @@
+import { describe, expect, it } from "vitest";
+import createSiteTheme from "../theme/createSiteTheme.js";
+function describeThemeContract(themes, { aa = true } = {}) {
+  const ORG_THEMES = themes;
+  const getOrgTheme = (id) => (themes.find((t) => t.id === id) ?? themes[0]).def;
+  const SCHEME_KEYS = ["textPrimary", "textSecondary", "divider", "bgDefault", "bgPaper", "secondary", "data", "success", "warning", "error"];
+  const RADII_KEYS = ["base", "card", "button", "buttonLarge", "chip", "input", "dialog", "menu"];
+  describe.each(ORG_THEMES.map((t) => [t.id, t.def]))("the %s theme", (id, def) => {
+    it("builds", () => {
+      const theme = createSiteTheme(def);
+      expect(theme.colorSchemes.light).toBeTruthy();
+      expect(theme.colorSchemes.dark).toBeTruthy();
+      expect(theme.rt.ui).toEqual(def.ui);
+    });
+    it("carries both colour schemes in full", () => {
+      SCHEME_KEYS.forEach((key) => {
+        expect(def.palette.light[key], `${id}.palette.light.${key}`).toBeTruthy();
+        expect(def.palette.dark[key], `${id}.palette.dark.${key}`).toBeTruthy();
+      });
+    });
+    it("carries an accent with both schemes, both contrasts and a gradient", () => {
+      ["light", "dark", "contrastLight", "contrastDark"].forEach((key) => {
+        expect(def.accent[key], `${id}.accent.${key}`).toBeTruthy();
+      });
+      expect(def.accent.gradient.light, `${id}.accent.gradient.light`).toHaveLength(2);
+      expect(def.accent.gradient.dark, `${id}.accent.gradient.dark`).toHaveLength(2);
+    });
+    it("carries every radius the components ask for", () => {
+      RADII_KEYS.forEach((key) => {
+        expect(typeof def.radii[key], `${id}.radii.${key}`).toBe("number");
+      });
+    });
+    it("carries a rail surface when its nav owns the column", () => {
+      if (def.ui.nav !== "rail") return;
+      expect(def.rail?.bg, `${id}.rail.bg`).toBeTruthy();
+      expect(def.rail?.fg, `${id}.rail.fg`).toBeTruthy();
+    });
+  });
+  describe("the set as a whole", () => {
+    it("has no duplicate ids or labels", () => {
+      const ids = ORG_THEMES.map((t) => t.id);
+      const labels = ORG_THEMES.map((t) => t.label);
+      expect(new Set(ids).size).toBe(ids.length);
+      expect(new Set(labels).size).toBe(labels.length);
+    });
+  });
+  const relativeLuminance = (hex) => {
+    const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((x) => x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  };
+  const contrast = (a, b) => {
+    const [x, y] = [relativeLuminance(a), relativeLuminance(b)];
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+  };
+  const flatten = (colour, over) => {
+    const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(colour);
+    if (short) return `#${short.slice(1).map((c) => c + c).join("")}`;
+    const rgba = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/.exec(colour);
+    if (!rgba) return colour;
+    const [r, g, b] = rgba.slice(1, 4).map(Number);
+    const alpha = rgba[4] === void 0 ? 1 : Number(rgba[4]);
+    const base = [1, 3, 5].map((i) => parseInt(over.slice(i, i + 2), 16));
+    const mix = [r, g, b].map((c, i) => Math.round(c * alpha + base[i] * (1 - alpha)));
+    return `#${mix.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+  };
+  describe("contrast", () => {
+    const AA = 4.5;
+    const measured = aa ? ORG_THEMES : [];
+    if (measured.length) it.each(measured.map((t) => [t.id, t.def]))("%s reads on its own paper", (id, def) => {
+      const paper = def.palette.light.bgPaper;
+      const inks = {
+        accent: def.accent.light,
+        ...def.accent2 ? { accent2: def.accent2.light } : {},
+        // The data hue is a chip label and an alert's text like the other three.
+        data: def.palette.light.data,
+        success: def.palette.light.success,
+        warning: def.palette.light.warning,
+        error: def.palette.light.error
+      };
+      Object.entries(inks).forEach(([role, hex]) => {
+        const ratio = contrast(hex, paper);
+        expect(ratio, `${id}.${role} is ${ratio.toFixed(2)}:1 on ${paper}`).toBeGreaterThanOrEqual(AA);
+      });
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s serves its data hue as info", (id, def) => {
+      const theme = createSiteTheme(def);
+      expect(theme.colorSchemes.light.palette.info.main).toBe(def.palette.light.data);
+      expect(theme.colorSchemes.dark.palette.info.main).toBe(def.palette.dark.data);
+      expect(def.palette.light.data).not.toBe(def.accent.light);
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s tints a filled info chip", (id, def) => {
+      const theme = createSiteTheme(def);
+      const variants = theme.components.MuiChip.variants.filter((v) => v.props.variant === "filled" && v.props.color === "info");
+      expect(variants.length, `${id} has no filled info chip variant`).toBeGreaterThan(0);
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s frees a large dialog on a phone", (id, def) => {
+      const theme = createSiteTheme(def);
+      const paper = theme.components.MuiDialog.styleOverrides.paper({ theme });
+      const phone = paper[theme.breakpoints.down("sm")];
+      expect(phone.margin, `${id} lost the phone gutter`).toBe(12);
+      const large = phone["&.MuiDialog-paperWidthMd, &.MuiDialog-paperWidthLg, &.MuiDialog-paperWidthXl"];
+      expect(large, `${id} does not free a large dialog`).toBeTruthy();
+      expect(large.margin).toBe(0);
+      expect(large.width).toBe("100%");
+      expect(large.height).toBe("100%");
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s emits the focus-visible rule", (id, def) => {
+      const theme = createSiteTheme(def);
+      const css = theme.components.MuiCssBaseline.styleOverrides(theme);
+      expect(css["html :focus-visible"]?.outline, `${id} has no html :focus-visible outline`).toBe("2px solid var(--rt-focus)");
+      expect(css["html :focus-visible"]?.outlineOffset).toBe("2px");
+      expect(css.body["--rt-focus"], `${id} sets no --rt-focus`).toBeTruthy();
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s draws a visible focus ring on both grounds", (id, def) => {
+      const NON_TEXT = 3;
+      const ring = def.focus ?? { light: def.accent.light, dark: def.accent.dark };
+      ["light", "dark"].forEach((scheme) => {
+        [["paper", def.palette[scheme].bgPaper], ["ground", def.palette[scheme].bgDefault]].forEach(([where, bg]) => {
+          const ratio = contrast(ring[scheme], bg);
+          expect(
+            ratio,
+            `${id} ${scheme}: focus ring ${ring[scheme]} on ${where} ${bg} is ${ratio.toFixed(2)}:1`
+          ).toBeGreaterThanOrEqual(NON_TEXT);
+        });
+      });
+    });
+    it.each(ORG_THEMES.filter((t) => t.def.ui.nav === "rail").map((t) => [t.id, t.def]))(
+      "%s rail focus ring reads on the rail",
+      (id, def) => {
+        const ratio = contrast(flatten(def.rail.fg, def.rail.bg), def.rail.bg);
+        expect(ratio, `${id} rail ring ${def.rail.fg} on ${def.rail.bg} is ${ratio.toFixed(2)}:1`).toBeGreaterThanOrEqual(3);
+      }
+    );
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s reads its caution button label on the fill", (id, def) => {
+      const theme = createSiteTheme(def);
+      ["light", "dark"].forEach((scheme) => {
+        const { main, contrastText } = theme.colorSchemes[scheme].palette.warning;
+        const ratio = contrast(flatten(contrastText, main), main);
+        expect(
+          ratio,
+          `${id} ${scheme}: warning label ${contrastText} on ${main} is ${ratio.toFixed(2)}:1`
+        ).toBeGreaterThanOrEqual(AA);
+      });
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s reads on its own page ground", (id, def) => {
+      const ground = def.palette.light.bgDefault;
+      const ratio = contrast(def.accent.light, ground);
+      expect(ratio, `${id} accent is ${ratio.toFixed(2)}:1 on ${ground}`).toBeGreaterThanOrEqual(AA);
+    });
+    it.each(ORG_THEMES.map((t) => [t.id, t.def]))("%s draws an outline you can see", (id, def) => {
+      const theme = createSiteTheme(def);
+      const ground = def.palette.light.bgDefault;
+      const painted = theme.components.MuiButton.styleOverrides.outlined({ theme }).borderColor;
+      const match = /primary-mainChannel[^)]*\)\s*\/\s*([\d.]+)\s*\)/.exec(painted);
+      expect(match, `${id} outlines with "${painted}" \u2014 expected the accent at an alpha, not a hairline`).not.toBeNull();
+      const alpha = Number(match[1]);
+      const hex = (c) => [0, 2, 4].map((i) => parseInt(c.replace("#", "").slice(i, i + 2), 16));
+      const [fg, bg] = [hex(def.accent.light), hex(ground)];
+      const composited = `#${fg.map((v, i) => Math.round(bg[i] + alpha * (v - bg[i])).toString(16).padStart(2, "0")).join("")}`;
+      const ratio = contrast(composited, ground);
+      expect(ratio, `${id} outline is ${ratio.toFixed(2)}:1 on ${ground} at alpha ${alpha}`).toBeGreaterThanOrEqual(3);
+    });
+    it.each(ORG_THEMES.filter((t) => t.def.ui?.solidChips).map((t) => [t.id]))(
+      "%s keeps its solid chip label legible in dark mode",
+      (id) => {
+        const theme = createSiteTheme(getOrgTheme(id));
+        const chip = theme.components.MuiChip.variants.filter((v) => v.props.variant === "filled" && v.props.color === "primary").at(-1);
+        const style = chip.style({ theme });
+        const dark = Object.entries(style).find(([k]) => k.includes("dark"))?.[1] ?? {};
+        expect(style.color).toBe(theme.vars.palette.primary.contrastText);
+        expect(dark.color, `${id} has no dark-scheme label colour to outrank softFill`).toBe(theme.vars.palette.primary.contrastText);
+      }
+    );
+  });
+}
+export {
+  describeThemeContract
+};

package/dist/theme/OrgThemeRegistry.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo } from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import createSiteTheme from "./createSiteTheme.js";
+import { getOrgTheme, resolveThemeId } from "./themes.js";
+const OrgThemeIdContext = createContext("default");
+function useOrgThemeId() {
+  return useContext(OrgThemeIdContext);
+}
+const OrgThemeScopeContext = createContext("");
+function useOrgThemeScope() {
+  return useContext(OrgThemeScopeContext);
+}
+function scopeSheets(theme, def, scope) {
+  const sheets = typeof theme.generateStyleSheets === "function" ? theme.generateStyleSheets() : [];
+  const rules = [];
+  for (const sheet of sheets) {
+    for (const rawSelector of Object.keys(sheet)) {
+      const vars = sheet[rawSelector];
+      if (!vars || typeof vars !== "object") continue;
+      const body = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
+      if (!body) continue;
+      const isDark = /\.dark\b/.test(rawSelector) || /color-scheme[:=]?\s*["']?dark/i.test(rawSelector);
+      const sel = isDark ? `:where(.dark) .${scope}` : `.${scope}`;
+      rules.push(`${sel}{${body}}`);
+    }
+  }
+  const g = def.accent.gradient;
+  const focus = def.focus ?? { light: def.accent.light, dark: def.accent.dark };
+  rules.push(`.${scope}{--rt-grad-from:${g.light[0]};--rt-grad-to:${g.light[1]};--rt-focus:${focus.light}}`);
+  rules.push(`:where(.dark) .${scope}{--rt-grad-from:${g.dark[0]};--rt-grad-to:${g.dark[1]};--rt-focus:${focus.dark}}`);
+  return rules.join("");
+}
+const PORTAL_COMPONENTS = ["MuiDialog", "MuiPopover", "MuiMenu", "MuiDrawer", "MuiTooltip", "MuiPopper"];
+function OrgThemeRegistry({ themeId, theme: themeDef = null, children }) {
+  const resolvedId = themeDef ? themeId ?? "custom" : resolveThemeId(themeId);
+  const def = themeDef ?? getOrgTheme(themeId);
+  const scope = `rt-org-${useId().replace(/[:]/g, "")}`;
+  const key = JSON.stringify(def);
+  const theme = useMemo(() => {
+    const t = createSiteTheme(def);
+    const components = { ...t.components };
+    for (const name of PORTAL_COMPONENTS) {
+      components[name] = { ...components[name], defaultProps: { ...components[name]?.defaultProps, className: scope } };
+    }
+    t.components = components;
+    return t;
+  }, [key, scope]);
+  const css = useMemo(() => scopeSheets(theme, def, scope), [key, theme, scope]);
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: scope,
+        style: {
+          minHeight: "100dvh",
+          backgroundColor: "var(--mui-palette-background-default)",
+          color: "var(--mui-palette-text-primary)"
+        },
+        children: /* @__PURE__ */ jsx(OrgThemeIdContext.Provider, { value: resolvedId, children: /* @__PURE__ */ jsx(OrgThemeScopeContext.Provider, { value: scope, children }) })
+      }
+    )
+  ] });
+}
+export {
+  OrgThemeRegistry as default,
+  useOrgThemeId,
+  useOrgThemeScope
+};

package/dist/theme/ThemeRegistry.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import createSiteTheme from "./createSiteTheme.js";
+function ThemeRegistry({ theme: def, children }) {
+  const key = JSON.stringify(def);
+  const muiTheme = useMemo(() => createSiteTheme(def), [key]);
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: muiTheme, defaultMode: "system", children: [
+    /* @__PURE__ */ jsx(CssBaseline, { enableColorScheme: true }),
+    children
+  ] });
+}
+export {
+  ThemeRegistry as default
+};

package/dist/theme/berryNavRow.js

@@ -0,0 +1,21 @@
+function berryNavRowSx(theme) {
+  const wash = `rgba(${theme.vars.palette.primary.mainChannel} / 0.12)`;
+  return {
+    borderRadius: "8px",
+    "&:hover": {
+      backgroundColor: wash,
+      color: theme.vars.palette.primary.dark,
+      "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.dark }
+    },
+    "&.Mui-selected": {
+      backgroundColor: wash,
+      color: theme.vars.palette.primary.dark,
+      "& .MuiListItemIcon-root": { color: theme.vars.palette.primary.main },
+      "& .MuiListItemText-primary": { fontWeight: 500 },
+      "&:hover": { backgroundColor: wash }
+    }
+  };
+}
+export {
+  berryNavRowSx as default
+};