tutuca 0.9.113 → 0.9.114

package/dist/tutuca-storybook.js

@@ -5,60 +5,88 @@ var Storybook = component({
   fields: {
     selectedSectionIndex: 0,
     sections: [],
+    // Retained navigation tree (SidebarGroup → SidebarEntry), built once from
+    // `sections` and then mutated in place: selection flips entry `selected`, the
+    // filter walk sets entry/group `visible`, a header click flips group `collapsed`.
+    // It owns its own UI state — never rebuilt or projected from `sections`.
     sidebar: [],
     filter: "",
     sectionId: null,
     exampleId: null,
     focusExample: null,
     sidebarCollapsed: false,
+    // The active margaui palette, and the names the switcher offers. `themes` is
+    // seeded by mountStorybook from its `themes` option and left EMPTY when no
+    // margaui theme CSS is on the page (`--no-margaui`) — an empty list hides the
+    // switcher, so nothing offers a theme that can't load.
     theme: "",
     themes: []
   },
   statics: {
+    // Build a storybook whose sidebar tree is derived from `sections` once. Use this
+    // instead of a bare `make` anywhere a Storybook is constructed by hand (the
+    // engine itself, the getRoot/Inception demo) so the sidebar is never empty.
     withSections(sections) {
       return this.make({ sections, sidebar: buildSidebar(sections) });
     }
   },
   methods: {
     selectSectionAtIndex(index) {
-      if (this.sections.size === 0)
-        return this;
+      if (this.sections.size === 0) return this;
       const safeIndex = index >= 0 && index < this.sections.size ? index : 0;
-      return this.setSelectedSectionIndex(safeIndex).markSidebarSelected(this.sections.get(safeIndex)?.id);
+      return this.setSelectedSectionIndex(safeIndex).markSidebarSelected(
+        this.sections.get(safeIndex)?.id
+      );
     },
+    // Flip the `selected` highlight to the entry for `id`, clearing the rest.
     markSidebarSelected(id) {
-      return this.setSidebar(this.sidebar.map((g) => g.setRows(g.rows.map((e) => e.setSelected(e.sectionId === id)))));
+      return this.setSidebar(
+        this.sidebar.map((g) => g.setRows(g.rows.map((e) => e.setSelected(e.sectionId === id))))
+      );
     },
+    // Walk the tree setting each row's `visible` from the filter AND the group's
+    // collapse: a row is visible iff it passes the filter (every row passes when the
+    // filter is empty) AND its group is open — collapse always wins, so a collapsed
+    // group shows no rows even while filtering. The group's own `visible` is set from
+    // whether any row MATCHES (ignoring collapse), so a collapsed group that still
+    // contains matches keeps its header and stays expandable; with no filter every
+    // group shows.
     applyFilterToSidebar(filter) {
       const active = (filter ?? "") !== "";
-      return this.setSidebar(this.sidebar.map((g) => {
-        let anyMatch = false;
-        const rows = g.rows.map((e) => {
-          const match = !active || fuzzyMatch(filter, `${e.title} ${e.description}`);
-          if (match)
-            anyMatch = true;
-          return e.setVisible(match && !g.collapsed);
-        });
-        return g.setRows(rows).setVisible(active ? anyMatch : true);
-      }));
+      return this.setSidebar(
+        this.sidebar.map((g) => {
+          let anyMatch = false;
+          const rows = g.rows.map((e) => {
+            const match = !active || fuzzyMatch(filter, `${e.title} ${e.description}`);
+            if (match) anyMatch = true;
+            return e.setVisible(match && !g.collapsed);
+          });
+          return g.setRows(rows).setVisible(active ? anyMatch : true);
+        })
+      );
     },
+    // Flip a named group's `collapsed`, recomputing its rows' visibility for the new
+    // state against the current filter. Collapsing always hides the rows (even while a
+    // filter is active — the reported chevron-flips-but-content-stays case); expanding
+    // re-reveals the rows that pass the filter. The group header's own `visible` is left
+    // as-is, so a collapsed group that matched the filter stays visible to be reopened.
     toggleSidebarGroup(name) {
       const filter = this.filter;
       const active = filter !== "";
-      return this.setSidebar(this.sidebar.map((g) => {
-        if (g.name !== name)
-          return g;
-        const collapsed = !g.collapsed;
-        const rows = g.rows.map((e) => {
-          const match = !active || fuzzyMatch(filter, `${e.title} ${e.description}`);
-          return e.setVisible(match && !collapsed);
-        });
-        return g.setCollapsed(collapsed).setRows(rows);
-      }));
+      return this.setSidebar(
+        this.sidebar.map((g) => {
+          if (g.name !== name) return g;
+          const collapsed = !g.collapsed;
+          const rows = g.rows.map((e) => {
+            const match = !active || fuzzyMatch(filter, `${e.title} ${e.description}`);
+            return e.setVisible(match && !collapsed);
+          });
+          return g.setCollapsed(collapsed).setRows(rows);
+        })
+      );
     },
     selectSectionWithId(id) {
-      if (!id)
-        return this.selectSectionAtIndex(this.selectedSectionIndex);
+      if (!id) return this.selectSectionAtIndex(this.selectedSectionIndex);
       const index = this.sections.findIndex((s) => s.id === id);
       return this.selectSectionAtIndex(index);
     },
@@ -74,12 +102,21 @@ var Storybook = component({
       return this.setSectionId(sectionId).setExampleId(exampleId).setFocusExample(example.value);
     },
     setSelectedSectionFilter(value) {
-      if (this.sections.size === 0)
-        return this;
+      if (this.sections.size === 0) return this;
       const i = this.selectedSectionIndex;
       const sections = this.sections.map((s, idx) => idx === i ? s.setFilter(value ?? "") : s);
       return this.setSections(sections);
     },
+    // Assemble the full URL snapshot from current state. `overrides` carries the
+    // change the calling handler is about to make, since `this` is still the
+    // pre-change state when the persistState request is issued.
+    //
+    // `theme` is deliberately NOT part of the base snapshot: it is resolved on load
+    // (from the OS preference when the URL says nothing), and writing that resolved
+    // value back would stamp `?theme=light` onto the URL the first time anyone types
+    // in the filter. persistState only touches the keys it is handed, so omitting it
+    // here leaves an already-chosen `?theme=` alone — onSelectTheme passes it as an
+    // override, which is the only way it enters the URL.
     toUrlState(overrides = {}) {
       const section = this.sections.get(this.selectedSectionIndex);
       return {
@@ -92,6 +129,8 @@ var Storybook = component({
     }
   },
   alter: {
+    // The sidebar render-each shows only visible groups (kept positional via `when`
+    // so a click resolves to the right group — see SidebarGroup.rowVisible).
     groupVisible(_key, group) {
       return group.visible;
     }
@@ -109,6 +148,10 @@ var Storybook = component({
       ctx.request("persistState", [this.toUrlState({ example: "" }), this, true]);
       return this.setSectionId(null).setExampleId(null).setFocusExample(null);
     },
+    // Switching a palette is a DOM effect (set data-theme, load the stylesheet), so it
+    // goes out as a request — the host handler in mountStorybook owns the document.
+    // Unregistered (no `themes` option), the request no-ops via the 404 path and the
+    // switcher isn't rendered anyway.
     onSelectTheme(value, ctx) {
       ctx.request("applyTheme", [value, this]);
       ctx.request("persistState", [this.toUrlState({ theme: value }), this, false]);
@@ -116,6 +159,8 @@ var Storybook = component({
     }
   },
   bubble: {
+    // A sidebar entry was clicked; it bubbles its section id. Resolve to the content
+    // index and select. Sidebar highlight is updated by selectSectionAtIndex.
     sectionSelected(sectionId, ctx) {
       ctx.stopPropagation();
       const section = this.sections.find((s) => s.id === sectionId);
@@ -129,6 +174,7 @@ var Storybook = component({
       transitionSections(ctx, next, oldIndex, next.selectedSectionIndex);
       return next;
     },
+    // Toggle a group open/closed in place — the collapse lives on the SidebarGroup.
     groupToggled(name, ctx) {
       ctx.stopPropagation();
       return this.toggleSidebarGroup(name);
@@ -154,8 +200,7 @@ var Storybook = component({
   },
   response: {
     loadState(state, err, ctx) {
-      if (err || !state)
-        return this;
+      if (err || !state) return this;
       const selected = this.selectSectionWithId(state.section).setTheme(state.theme ?? "").setFilter(state.sectionFilter ?? "").applyFilterToSidebar(state.sectionFilter ?? "").setSelectedSectionFilter(state.exampleFilter ?? "");
       const next = state.example ? selected.focusExampleByIds(state.section, state.example) : selected.setSectionId(null).setExampleId(null).setFocusExample(null);
       transitionSections(ctx, next, this.selectedSectionIndex, next.selectedSectionIndex);
@@ -228,6 +273,9 @@ var Section = component({
     id: "?",
     title: "No Title Section",
     description: "",
+    // Optional 2-level grouping: sections sharing a `group` name cluster under one
+    // collapsible sidebar header. Empty string = ungrouped (top-level, flat — the
+    // default and the backward-compatible behavior).
     group: "",
     items: [],
     filter: "",
@@ -236,13 +284,18 @@ var Section = component({
   statics: {
     fromData(raw) {
       if (!raw || typeof raw !== "object" || Array.isArray(raw) || raw.title == null) {
-        throw new Error(`Section.fromData: expected a section object { title, items }, got ${JSON.stringify(raw)}. ` + `getExamples() must return a section object or an array of section objects.`);
+        throw new Error(
+          `Section.fromData: expected a section object { title, items }, got ${JSON.stringify(raw)}. getExamples() must return a section object or an array of section objects.`
+        );
       }
       const { id, title, description = "", group, items = [] } = raw;
       return this.make({
         id: id ?? slugify(title),
         title,
         description,
+        // `group` is an optional string (single 2-level grouping). A non-string is
+        // ignored here (rendered ungrouped) rather than coerced; the normalize layer
+        // (tools/core/module.js) reports it as a shape error.
         group: typeof group === "string" ? group : "",
         items: items.map((v) => Example.Class.fromData(v))
       });
@@ -264,6 +317,7 @@ var Section = component({
     }
   },
   receive: {
+    // First display of this section: run each example's `on.init`, mark shown.
     init(ctx) {
       fanoutLifecycle(ctx, this.items, "init");
       return this.setInitialized(true);
@@ -318,6 +372,10 @@ var SidebarEntry = component({
 var SidebarGroup = component({
   name: "SidebarGroup",
   fields: { name: "", collapsed: false, visible: true, rows: [] },
+  // Visibility drives the render-each `when` predicates (not `@show` on the items):
+  // a `when` filter renders only visible rows while keeping each row's positional key,
+  // so an event's path resolves to the right row. `@show` on a render-each item would
+  // shift the rendered set and mis-map the click.
   alter: {
     rowVisible(_key, row) {
       return row.visible;
@@ -358,6 +416,9 @@ var Example = component({
     view: "main",
     requestHandlers: null,
     on: null,
+    // Inspector tabs. activeTab selects which body renders; the *View fields hold
+    // prebuilt inspector instances (attached by mountStorybook before start, via
+    // src/storybook/inspect.js); the has* flags gate which tabs appear.
     activeTab: "preview",
     hasInspect: false,
     hasComponent: false,
@@ -367,9 +428,15 @@ var Example = component({
     instanceView: null,
     lintView: null,
     testView: null,
+    // Live dispatch activity for this example's component (`.value`): an ActivityLog
+    // (baked empty by src/storybook/inspect.js) the core observer appends to via
+    // logActivity. `hasActivity` gates the Activity tab so it only appears once
+    // something has actually happened.
     activityLog: null,
     hasActivity: false
   },
+  // Storybook-only convention (read in mountStorybook, never by core): names the
+  // field on an example instance that holds its per-example request-handler mocks.
   requestOverridesField: "requestHandlers",
   statics: {
     fromData({
@@ -393,6 +460,8 @@ var Example = component({
       });
     }
   },
+  // Lifecycle hooks: the section forwards init/resume/suspend here; each runs the
+  // matching `on` phase's actions against this example's component (`.value`).
   receive: {
     init(ctx) {
       this.runPhase(ctx, "init", this.on?.init);
@@ -406,6 +475,9 @@ var Example = component({
       this.runPhase(ctx, "suspend", this.on?.suspend);
       return this;
     },
+    // Append one activity row to the example's ActivityLog. Dispatched by the storybook
+    // observer at this example's node — a path OUTSIDE `.value`, so the observer's own
+    // filter ignores it and this append is never itself logged (no loop).
     logActivity(entry) {
       return this.setActivityLog(this.activityLog.appendEntry(entry)).setHasActivity(true);
     }
@@ -413,7 +485,9 @@ var Example = component({
   methods: {
     runPhase(ctx, name, phase) {
       if (phaseHasBubble(phase))
-        console.warn(`storybook on.${name}: a \`bubble\` action leaves this example and is received by the storybook engine, so your component's bubble handler won't run. Use send/request/input to drive a preset state.`);
+        console.warn(
+          `storybook on.${name}: a \`bubble\` action leaves this example and is received by the storybook engine, so your component's bubble handler won't run. Use send/request/input to drive a preset state.`
+        );
       dispatchPhase(ctx, ctx.at.field("value").buildPath(), phase, this.value);
     }
   },
@@ -529,12 +603,9 @@ function transitionSections(ctx, sb, oldIndex, newIndex) {
   if (changed && sb.sections.get(oldIndex)?.initialized)
     ctx.at.index("sections", oldIndex).send("suspend", []);
   const target = sb.sections.get(newIndex);
-  if (!target)
-    return;
-  if (!target.initialized)
-    ctx.at.index("sections", newIndex).send("init", []);
-  else if (changed)
-    ctx.at.index("sections", newIndex).send("resume", []);
+  if (!target) return;
+  if (!target.initialized) ctx.at.index("sections", newIndex).send("init", []);
+  else if (changed) ctx.at.index("sections", newIndex).send("resume", []);
 }
 function fanoutLifecycle(ctx, items, name) {
   items.forEach((_item, j) => {
@@ -543,23 +614,18 @@ function fanoutLifecycle(ctx, items, name) {
 }
 function fuzzyMatch(query, target) {
   const q = query.toLowerCase().trim();
-  if (q === "")
-    return true;
+  if (q === "") return true;
   const t = target.toLowerCase();
-  if (t.includes(q))
-    return true;
+  if (t.includes(q)) return true;
   const budget = q.length + Math.max(1, Math.floor(q.length / 2));
-  for (let start = 0;start < t.length; start++) {
-    if (t[start] !== q[0])
-      continue;
+  for (let start = 0; start < t.length; start++) {
+    if (t[start] !== q[0]) continue;
     let qi = 1;
     let ti = start + 1;
-    for (;ti < t.length && qi < q.length; ti++) {
-      if (t[ti] === q[qi])
-        qi++;
+    for (; ti < t.length && qi < q.length; ti++) {
+      if (t[ti] === q[qi]) qi++;
     }
-    if (qi === q.length && ti - start <= budget)
-      return true;
+    if (qi === q.length && ti - start <= budget) return true;
   }
   return false;
 }
@@ -567,36 +633,37 @@ function slugify(str) {
   return String(str).normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
 function buildSidebar(sections) {
-  const groups = new Map;
+  const groups = /* @__PURE__ */ new Map();
   const singles = [];
   sections.forEach((s) => {
     const name = s.group ?? "";
-    if (name === "")
-      singles.push(s);
+    if (name === "") singles.push(s);
     else {
-      if (!groups.has(name))
-        groups.set(name, []);
+      if (!groups.has(name)) groups.set(name, []);
       groups.get(name).push(s);
     }
   });
   const buckets = [];
   for (const [name, secs] of groups)
     buckets.push({ key: name.toLowerCase(), name, sections: secs });
-  for (const s of singles)
-    buckets.push({ key: s.title.toLowerCase(), name: "", sections: [s] });
+  for (const s of singles) buckets.push({ key: s.title.toLowerCase(), name: "", sections: [s] });
   buckets.sort((a, b) => a.key.localeCompare(b.key));
-  return buckets.map((b) => SidebarGroup.make({
-    name: b.name,
-    collapsed: false,
-    visible: true,
-    rows: b.sections.map((s) => SidebarEntry.make({
-      sectionId: s.id,
-      title: s.title,
-      description: s.description,
-      selected: false,
-      visible: true
-    }))
-  }));
+  return buckets.map(
+    (b) => SidebarGroup.make({
+      name: b.name,
+      collapsed: false,
+      visible: true,
+      rows: b.sections.map(
+        (s) => SidebarEntry.make({
+          sectionId: s.id,
+          title: s.title,
+          description: s.description,
+          selected: false,
+          visible: true
+        })
+      )
+    })
+  );
 }
 
 // src/storybook/build.js
@@ -604,8 +671,7 @@ import { getComponents as getInspectorComponents } from "tutuca/components";
 function buildStorybook(modules) {
   const rawSections = modules.flatMap((m) => {
     const raw = m.getExamples?.();
-    if (raw == null)
-      return [];
+    if (raw == null) return [];
     return Array.isArray(raw) ? raw : [raw];
   });
   const sections = rawSections.map((s) => Section.Class.fromData(s)).sort((a, b) => a.title.localeCompare(b.title));
@@ -615,15 +681,15 @@ function buildStorybook(modules) {
     Example,
     SidebarGroup,
     SidebarEntry,
+    // ActivityLog + ActivityEntry arrive via getInspectorComponents() (tutuca/components).
     ...getInspectorComponents()
   ];
   const engineSet = new Set(engineComponents);
   const moduleComponents = modules.map((m) => {
-    const seen = new Set;
+    const seen = /* @__PURE__ */ new Set();
     const out = [];
     for (const c of m.getComponents?.() ?? []) {
-      if (!c || engineSet.has(c) || seen.has(c))
-        continue;
+      if (!c || engineSet.has(c) || seen.has(c)) continue;
       seen.add(c);
       out.push(c);
     }
@@ -631,20 +697,17 @@ function buildStorybook(modules) {
   });
   const macros = {};
   const requestHandlers = {};
-  const overrideNames = new Set;
+  const overrideNames = /* @__PURE__ */ new Set();
   for (const s of rawSections) {
     for (const it of s?.items ?? []) {
-      for (const name in it?.requestHandlers ?? {})
-        overrideNames.add(name);
+      for (const name in it?.requestHandlers ?? {}) overrideNames.add(name);
     }
   }
   for (const m of modules) {
-    if (m.getMacros)
-      Object.assign(macros, m.getMacros());
-    if (m.getRequestHandlers)
-      Object.assign(requestHandlers, m.getRequestHandlers());
+    if (m.getMacros) Object.assign(macros, m.getMacros());
+    if (m.getRequestHandlers) Object.assign(requestHandlers, m.getRequestHandlers());
   }
-  const components = [...new Set([...engineComponents, ...moduleComponents.flat()])];
+  const components = [.../* @__PURE__ */ new Set([...engineComponents, ...moduleComponents.flat()])];
   return {
     root: Storybook.Class.withSections(sections),
     components,
@@ -656,15 +719,14 @@ function buildStorybook(modules) {
   };
 }
 function buildExampleRequestHandlers({ requestHandlers: reals, overrideNames }) {
-  const names = new Set([...Object.keys(reals), ...overrideNames]);
+  const names = /* @__PURE__ */ new Set([...Object.keys(reals), ...overrideNames]);
   const makeMeta = (name) => async (...rest) => {
     const ctx = rest.at(-1);
     const args = rest.slice(0, -1);
     let override = null;
     ctx.walkPath((Comp, inst) => {
       const field = Comp.extra?.requestOverridesField;
-      if (!field)
-        return;
+      if (!field) return;
       const map = inst.get(field, null);
       if (map && name in map) {
         override = map[name];
@@ -672,15 +734,14 @@ function buildExampleRequestHandlers({ requestHandlers: reals, overrideNames })
       }
     });
     const fn = override ?? reals[name];
-    if (!fn)
-      throw new Error(`Request not found: ${name}`);
+    if (!fn) throw new Error(`Request not found: ${name}`);
     return await fn(...args, ctx);
   };
   const handlers = {};
-  for (const name of names)
-    handlers[name] = makeMeta(name);
+  for (const name of names) handlers[name] = makeMeta(name);
   return handlers;
 }
+
 // src/storybook/mount.js
 import { injectCss, tutuca } from "tutuca";
 
@@ -698,8 +759,7 @@ function subscribeExampleActivity(app) {
       return;
     const si = keys[0].key;
     const ii = keys[1].key;
-    if (si === undefined || ii === undefined)
-      return;
+    if (si === void 0 || ii === void 0) return;
     const entry = recordToEntry(record, { inspect, pathLabel: storybookPathLabel });
     rootDispatcher(app.transactor).at.index("sections", si).index("items", ii).send("logActivity", [entry]);
   });
@@ -708,14 +768,12 @@ function subscribeExampleActivity(app) {
 // src/storybook/inspect.js
 import { ActivityLog, buildInspectorViews, isComponentInstance } from "tutuca/components";
 function buildTestIndex(modules) {
-  const index = new Map;
+  const index = /* @__PURE__ */ new Map();
   for (const m of modules) {
-    if (typeof m.getTests !== "function")
-      continue;
+    if (typeof m.getTests !== "function") continue;
     const components = m.getComponents?.() ?? [];
     for (const c of components) {
-      if (!index.has(c.name))
-        index.set(c.name, { getTests: m.getTests, components });
+      if (!index.has(c.name)) index.set(c.name, { getTests: m.getTests, components });
     }
   }
   return index;
@@ -734,10 +792,10 @@ async function buildExampleInspectors(example, scope, testIndex, dev) {
 async function attachInspectorViews(root, scope, modules, dev = null) {
   const testIndex = buildTestIndex(modules);
   let sections = root.sections;
-  for (let si = 0;si < sections.size; si++) {
+  for (let si = 0; si < sections.size; si++) {
     const section = sections.get(si);
     let items = section.items;
-    for (let ii = 0;ii < items.size; ii++) {
+    for (let ii = 0; ii < items.size; ii++) {
       items = items.set(ii, await buildExampleInspectors(items.get(ii), scope, testIndex, dev));
     }
     sections = sections.set(si, section.setItems(items));
@@ -783,7 +841,7 @@ var MARGAUI_THEMES = [
   "winter",
   "wireframe"
 ];
-var BUNDLED_THEMES = new Set(["light", "dark"]);
+var BUNDLED_THEMES = /* @__PURE__ */ new Set(["light", "dark"]);
 
 // src/storybook/mount.js
 async function mountStorybook(selector, modules, { compileCss, root, persistUrl = true, dev = null, noCache = false, themes = null } = {}) {
@@ -814,8 +872,7 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
     injectCss("tutuca-storybook", await compileCss(app));
   }
   app.start({ noCache });
-  if (dev)
-    subscribeExampleActivity(app);
+  if (dev) subscribeExampleActivity(app);
   app.sendAtRoot("init", []);
   if (persistUrl) {
     window.addEventListener("popstate", () => app.sendAtRoot("init", []));
@@ -823,20 +880,16 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
   app.scopes = { root: rootScope, modules: moduleScopes };
   return app;
   function persistState(state, instance, push) {
-    if (instance !== app.state.val)
-      return;
+    if (instance !== app.state.val) return;
     const url = new URL(window.location.href);
     for (const [k, v] of Object.entries(state)) {
-      if (v === "" || v == null)
-        url.searchParams.delete(k);
-      else
-        url.searchParams.set(k, String(v));
+      if (v === "" || v == null) url.searchParams.delete(k);
+      else url.searchParams.set(k, String(v));
     }
     window.history[push ? "pushState" : "replaceState"](null, "", url);
   }
   function applyTheme(name, instance) {
-    if (instance !== app.state.val)
-      return;
+    if (instance !== app.state.val) return;
     ensureThemeLink(name);
     document.documentElement.dataset.theme = name;
   }
@@ -860,8 +913,7 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
     };
   }
   function resolveTheme(fromUrl) {
-    if (!themeBaseUrl)
-      return "";
+    if (!themeBaseUrl) return "";
     const name = MARGAUI_THEMES.includes(fromUrl) ? fromUrl : osTheme();
     ensureThemeLink(name);
     document.documentElement.dataset.theme = name;
@@ -871,8 +923,7 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
     return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   }
   function ensureThemeLink(name) {
-    if (BUNDLED_THEMES.has(name) || document.getElementById(themeLinkId(name)))
-      return;
+    if (BUNDLED_THEMES.has(name) || document.getElementById(themeLinkId(name))) return;
     const link = document.createElement("link");
     link.rel = "stylesheet";
     link.id = themeLinkId(name);
@@ -889,15 +940,15 @@ function getComponents() {
   return [Storybook, Section, Example, SidebarGroup, SidebarEntry];
 }
 export {
-  slugify,
-  mountStorybook,
-  getComponents,
-  fuzzyMatch,
-  buildStorybook,
-  buildExampleRequestHandlers,
-  Storybook,
-  Section,
-  MARGAUI_THEMES,
+  BUNDLED_THEMES,
   Example,
-  BUNDLED_THEMES
+  MARGAUI_THEMES,
+  Section,
+  Storybook,
+  buildExampleRequestHandlers,
+  buildStorybook,
+  fuzzyMatch,
+  getComponents,
+  mountStorybook,
+  slugify
 };