tutuca 0.15.0 → 1.0.0-beta.2

package/dist/tutuca-storybook.js

@@ -1,970 +0,0 @@
-// src/storybook/components.js
-import { component, dispatchPhase, html } from "tutuca";
-var Storybook = component({
-  name: "Storybook",
-  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: {
-    // 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 intent 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[this.selectedSectionIndex];
-      return {
-        section: section?.id ?? "",
-        example: this.exampleId ?? "",
-        sectionFilter: this.filter ?? "",
-        exampleFilter: section?.filter ?? "",
-        ...overrides
-      };
-    }
-  },
-  receive: {
-    onApplyFilter(draft, value, ctx) {
-      ctx.intent("persistState", [this.toUrlState({ sectionFilter: value }), this, false], {
-        route: ["lex"]
-      });
-      draft.filter = value;
-      applyFilterToSidebar(draft, value);
-    },
-    onClearFilter(draft, ctx) {
-      ctx.intent("persistState", [this.toUrlState({ sectionFilter: "" }), this, false], {
-        route: ["lex"]
-      });
-      draft.filter = "";
-      applyFilterToSidebar(draft, "");
-    },
-    onFocusClose(draft, ctx) {
-      ctx.intent("persistState", [this.toUrlState({ example: "" }), this, true], {
-        route: ["lex"]
-      });
-      draft.sectionId = null;
-      draft.exampleId = null;
-      draft.focusExample = null;
-    },
-    // Switching a palette is a DOM effect (set data-theme, load the stylesheet), so it
-    // goes out as an intent — the host handler in mountStorybook owns the document.
-    // Unregistered (no `themes` option), the intent no-ops via the 404 path and the
-    // switcher isn't rendered anyway.
-    onSelectTheme(draft, value, ctx) {
-      ctx.intent("applyTheme", [value, this], { route: ["lex"] });
-      ctx.intent("persistState", [this.toUrlState({ theme: value }), this, false], {
-        route: ["lex"]
-      });
-      draft.theme = value;
-    },
-    init(draft, ctx) {
-      ctx.intent("loadState", [], { route: ["lex"] });
-    },
-    // The answer to the `loadState` intent, arriving as an ordinary message. There is
-    // no `err` to branch on: a failure reaches `loadStateError` instead, and nothing
-    // that ran out of route reaches here at all.
-    loadStateOk(draft, state, ctx) {
-      if (!state) return;
-      selectSectionWithId(draft, state.section);
-      draft.theme = state.theme ?? "";
-      draft.filter = state.sectionFilter ?? "";
-      applyFilterToSidebar(draft, draft.filter);
-      setSelectedSectionFilter(draft, state.exampleFilter ?? "");
-      if (state.example) focusExampleByIds(draft, state.section, state.example);
-      else {
-        draft.sectionId = null;
-        draft.exampleId = null;
-        draft.focusExample = null;
-      }
-      transitionSections(ctx, draft, this.selectedSectionIndex, draft.selectedSectionIndex);
-    },
-    toggleSidebarCollapsed(draft) {
-      draft.sidebarCollapsed = !draft.sidebarCollapsed;
-    }
-  },
-  intent: {
-    // A sidebar entry was clicked; it bubbles its section id. Resolve to the content
-    // index and select. Sidebar highlight is updated by selectSectionAtIndex.
-    sectionSelected(draft, sectionId, ctx) {
-      ctx.stop();
-      const section = this.sections.find((s) => s.id === sectionId);
-      ctx.intent(
-        "persistState",
-        [this.toUrlState({ section: sectionId, exampleFilter: section?.filter ?? "" }), this, true],
-        { route: ["lex"] }
-      );
-      const oldIndex = this.selectedSectionIndex;
-      selectSectionAtIndex(
-        draft,
-        this.sections.findIndex((s) => s.id === sectionId)
-      );
-      transitionSections(ctx, draft, oldIndex, draft.selectedSectionIndex);
-    },
-    // Toggle a group open/closed in place — the collapse lives on the SidebarGroup.
-    groupToggled(draft, name, ctx) {
-      ctx.stop();
-      toggleSidebarGroup(draft, name);
-    },
-    exampleFocusRequested(draft, example, ctx) {
-      ctx.stop();
-      const section = this.sections[this.selectedSectionIndex];
-      const sectionId = section?.id ?? null;
-      ctx.intent("persistState", [this.toUrlState({ example: example.id }), this, true], {
-        route: ["lex"]
-      });
-      draft.sectionId = sectionId;
-      draft.exampleId = example.id;
-      draft.focusExample = example.value;
-    },
-    exampleFilterChanged(draft, value, ctx) {
-      ctx.stop();
-      ctx.intent("persistState", [this.toUrlState({ exampleFilter: value }), this, false], {
-        route: ["lex"]
-      });
-      setSelectedSectionFilter(draft, value);
-    }
-  },
-  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;
-    }
-  },
-  view: html`<div>
-    <div class="flex flex-col gap-3 p-3 h-screen" @show="truthy? .focusExample">
-      <div class="flex justify-end">
-        <button class="btn btn-ghost btn-sm" @on.click="onFocusClose">
-          close
-        </button>
-      </div>
-      <div class="flex-1 overflow-y-auto">
-        <x render=".focusExample"></x>
-      </div>
-    </div>
-    <div class="flex gap-3 p-3 h-screen" @hide="truthy? .focusExample">
-      <button
-        class="btn btn-ghost btn-sm self-start"
-        title="Show sections"
-        @show=".sidebarCollapsed"
-        @on.click="toggleSidebarCollapsed"
-      >
-        »
-      </button>
-      <div
-        class="w-1/4 flex flex-col gap-3 bg-base-100 shadow-md h-full overflow-hidden"
-        @hide=".sidebarCollapsed"
-      >
-        <div class="flex gap-2 items-center">
-          <button
-            class="btn btn-ghost btn-sm"
-            title="Hide sections"
-            @on.click="toggleSidebarCollapsed"
-          >
-            «
-          </button>
-          <input
-            class="input flex-1 focus:outline-none focus-within:outline-none focus:bg-base-200"
-            type="search"
-            placeholder="Filter sections"
-            :value=".filter"
-            @on.input="onApplyFilter e.value"
-            @on.keydown.cancel="onClearFilter"
-          />
-          <select
-            class="select w-auto"
-            title="Theme"
-            @hide="empty? .themes"
-            :value=".theme"
-            @on.input="onSelectTheme e.value"
-          >
-            <option @each=".themes" :value="@value" @text="@value"></option>
-          </select>
-        </div>
-        <div class="list h-full flex-1 overflow-y-auto">
-          <x render-each=".sidebar" @when="groupVisible"></x>
-        </div>
-      </div>
-      <div class="w-full h-full overflow-y-auto">
-        <x render=".sections[.selectedSectionIndex]"></x>
-      </div>
-    </div>
-  </div>`
-});
-var Section = component({
-  name: "Section",
-  fields: {
-    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: "",
-    initialized: false
-  },
-  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.`
-        );
-      }
-      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.fromData(v))
-      });
-    }
-  },
-  receive: {
-    onApplyFilter(draft, value, ctx) {
-      ctx.intent("exampleFilterChanged", [value], { route: ["dyn"] });
-      draft.filter = value;
-    },
-    onClearFilter(draft, ctx) {
-      ctx.intent("exampleFilterChanged", [""], { route: ["dyn"] });
-      draft.filter = this.constructor.getMetaClass().fields.filter.defaultValue;
-    },
-    // First display of this section: run each example's `on.init`, mark shown.
-    init(draft, ctx) {
-      fanoutLifecycle(ctx, this.items, "init");
-      draft.initialized = true;
-    },
-    resume(draft, ctx) {
-      fanoutLifecycle(ctx, this.items, "resume");
-      return this;
-    },
-    suspend(draft, ctx) {
-      fanoutLifecycle(ctx, this.items, "suspend");
-      return this;
-    }
-  },
-  alter: {
-    filterItem(_key, item) {
-      return this.filter === "" || fuzzyMatch(this.filter, `${item.title} ${item.description}`);
-    }
-  },
-  view: html`<section class="flex flex-col gap-3">
-    <div class="sticky top-0 z-10 bg-base-100 pt-1 pb-2 shadow-sm">
-      <h2 class="text-lg font-bold" @text=".title"></h2>
-      <p class="text-md italic opacity-60" @text=".description"></p>
-    </div>
-    <input
-      class="input w-full outline-0 focus:bg-base-200"
-      type="search"
-      placeholder="Filter examples"
-      :value=".filter"
-      @on.input="onApplyFilter e.value"
-      @on.keydown.cancel="onClearFilter"
-    />
-    <div class="flex flex-col gap-3">
-      <x render-each=".items" @when="filterItem"></x>
-    </div>
-  </section>`
-});
-var SidebarEntry = component({
-  name: "SidebarEntry",
-  fields: { sectionId: "?", title: "", description: "", selected: false, visible: true },
-  receive: {
-    onClick(draft, ctx) {
-      ctx.intent("sectionSelected", [this.sectionId], { route: ["dyn"] });
-      return this;
-    }
-  },
-  view: html`<div
-    @if.class=".selected"
-    @then="'list-row cursor-pointer text-blue-400 hover:text-blue-500 font-semibold'"
-    @else="'list-row cursor-pointer hover:bg-base-200'"
-    :title=".description"
-    @on.click="onClick"
-  >
-    <div @text=".title" class="list-col-grow"></div>
-    <p class="text-xs opacity-60 list-col-wrap truncate" @text=".description"></p>
-  </div>`
-});
-var SidebarGroup = component({
-  name: "SidebarGroup",
-  fields: { name: "", collapsed: false, visible: true, rows: [] },
-  receive: {
-    onToggle(draft, ctx) {
-      ctx.intent("groupToggled", [this.name], { route: ["dyn"] });
-      return this;
-    }
-  },
-  // 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;
-    }
-  },
-  view: html`<div class="flex flex-col">
-    <div
-      class="list-row cursor-pointer hover:bg-base-200 font-semibold flex items-center gap-1"
-      @show="truthy? .name"
-      @on.click="onToggle"
-    >
-      <span @show=".collapsed">▸</span>
-      <span @hide=".collapsed">▾</span>
-      <span @text=".name" class="list-col-grow"></span>
-    </div>
-    <div
-      @if.class="truthy? .name"
-      @then="'flex flex-col pl-3'"
-      @else="'flex flex-col'"
-    >
-      <x render-each=".rows" @when="rowVisible"></x>
-    </div>
-  </div>`
-});
-var Example = component({
-  name: "Example",
-  fields: {
-    id: "?",
-    title: "?",
-    description: "",
-    value: null,
-    view: "main",
-    intentHandlers: 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,
-    hasLint: false,
-    hasTest: false,
-    componentView: null,
-    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 intent-handler mocks.
-  intentOverridesField: "intentHandlers",
-  statics: {
-    fromData({
-      id,
-      title = "No Title Example",
-      description = "",
-      value = null,
-      view = "main",
-      intentHandlers = null,
-      on = null
-    }) {
-      id ??= slugify(title);
-      return this.make({
-        id,
-        title,
-        description,
-        value,
-        view,
-        intentHandlers,
-        on
-      });
-    }
-  },
-  methods: {
-    // An `intent` on the `dyn` leg leaves the example and walks into the storybook
-    // engine's own components. Nothing to warn about: if nothing answers, the walk
-    // runs out and the example hears `<name>Unhandled`.
-    runPhase(ctx, phase) {
-      dispatchPhase(ctx, ctx.at.field("value").buildPath(), phase, this.value);
-    }
-  },
-  // 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(draft, ctx) {
-      this.runPhase(ctx, this.on?.init);
-      return this;
-    },
-    resume(draft, ctx) {
-      this.runPhase(ctx, this.on?.resume);
-      return this;
-    },
-    suspend(draft, ctx) {
-      this.runPhase(ctx, 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(draft, entry) {
-      draft.activityLog.events.unshift(entry);
-      if (draft.activityLog.events.length > 50) draft.activityLog.events.length = 50;
-      draft.activityLog.hasEvents = true;
-      draft.hasActivity = true;
-    },
-    onLogSelected(draft) {
-      console.log(this.value);
-      return this;
-    },
-    onFocusSelected(draft, ctx) {
-      ctx.intent("exampleFocusRequested", [this], { route: ["dyn"] });
-    },
-    setActiveTab(draft, value) {
-      draft.activeTab = value;
-    }
-  },
-  view: html`<div class="card card-border bg-base-100 shadow-md">
-    <div class="card-body">
-      <h2 class="card-title flex justify-between">
-        <a :href="$'#example-{.id}'" :id="$'example-{.id}'" @text=".title"></a>
-        <div class="flex gap-2">
-          <button class="btn btn-ghost btn-sm" @on.click="onFocusSelected">
-            focus
-          </button>
-          <button class="btn btn-ghost btn-sm" @on.click="onLogSelected">
-            log
-          </button>
-        </div>
-      </h2>
-      <p class="text-md italic opacity-60" @text=".description"></p>
-      <div role="tablist" class="tabs tabs-border" @show=".hasInspect">
-        <a
-          role="tab"
-          @if.class="equals? .activeTab 'preview'"
-          @then="'tab tab-active'"
-          @else="'tab'"
-          @on.click="setActiveTab 'preview'"
-        >
-          Preview
-        </a>
-        <a
-          role="tab"
-          @show=".hasComponent"
-          @if.class="equals? .activeTab 'component'"
-          @then="'tab tab-active'"
-          @else="'tab'"
-          @on.click="setActiveTab 'component'"
-        >
-          Component
-        </a>
-        <a
-          role="tab"
-          @if.class="equals? .activeTab 'instance'"
-          @then="'tab tab-active'"
-          @else="'tab'"
-          @on.click="setActiveTab 'instance'"
-        >
-          Instance
-        </a>
-        <a
-          role="tab"
-          @show=".hasLint"
-          @if.class="equals? .activeTab 'lint'"
-          @then="'tab tab-active'"
-          @else="'tab'"
-          @on.click="setActiveTab 'lint'"
-        >
-          Lint
-        </a>
-        <a
-          role="tab"
-          @show=".hasTest"
-          @if.class="equals? .activeTab 'test'"
-          @then="'tab tab-active'"
-          @else="'tab'"
-          @on.click="setActiveTab 'test'"
-        >
-          Test
-        </a>
-        <a
-          role="tab"
-          @show=".hasActivity"
-          @if.class="equals? .activeTab 'activity'"
-          @then="'tab tab-active'"
-          @else="'tab'"
-          @on.click="setActiveTab 'activity'"
-        >
-          Activity
-        </a>
-      </div>
-      <div @show="equals? .activeTab 'preview'">
-        <div class="bg-base-100 p-3" @push-view=".view">
-          <x render=".value"></x>
-        </div>
-      </div>
-      <div class="p-3" @show="equals? .activeTab 'component'">
-        <x render=".componentView"></x>
-      </div>
-      <div class="p-3" @show="equals? .activeTab 'instance'">
-        <x render=".instanceView"></x>
-      </div>
-      <div class="p-3" @show="equals? .activeTab 'lint'">
-        <x render=".lintView"></x>
-      </div>
-      <div class="p-3" @show="equals? .activeTab 'test'">
-        <x render=".testView"></x>
-      </div>
-      <div class="p-3" @show="equals? .activeTab 'activity'">
-        <x render=".activityLog"></x>
-      </div>
-    </div>
-  </div>`
-});
-function markSidebarSelected(storybook, id) {
-  for (const group of storybook.sidebar) {
-    for (const entry of group.rows) entry.selected = entry.sectionId === id;
-  }
-}
-function selectSectionAtIndex(storybook, index) {
-  if (storybook.sections.length === 0) return;
-  const safeIndex = index >= 0 && index < storybook.sections.length ? index : 0;
-  storybook.selectedSectionIndex = safeIndex;
-  markSidebarSelected(storybook, storybook.sections[safeIndex]?.id);
-}
-function applyFilterToSidebar(storybook, filter) {
-  const active = (filter ?? "") !== "";
-  for (const group of storybook.sidebar) {
-    let anyMatch = false;
-    for (const entry of group.rows) {
-      const match = !active || fuzzyMatch(filter, `${entry.title} ${entry.description}`);
-      if (match) anyMatch = true;
-      entry.visible = match && !group.collapsed;
-    }
-    group.visible = active ? anyMatch : true;
-  }
-}
-function toggleSidebarGroup(storybook, name) {
-  const active = storybook.filter !== "";
-  const group = storybook.sidebar.find((candidate) => candidate.name === name);
-  if (!group) return;
-  group.collapsed = !group.collapsed;
-  for (const entry of group.rows) {
-    const match = !active || fuzzyMatch(storybook.filter, `${entry.title} ${entry.description}`);
-    entry.visible = match && !group.collapsed;
-  }
-}
-function selectSectionWithId(storybook, id) {
-  const index = id ? storybook.sections.findIndex((section) => section.id === id) : storybook.selectedSectionIndex;
-  selectSectionAtIndex(storybook, index);
-}
-function focusExampleByIds(storybook, sectionId, exampleId) {
-  if (!sectionId || !exampleId) return;
-  const section = storybook.sections.find((candidate) => candidate.id === sectionId);
-  const example = section?.items.find((candidate) => candidate.id === exampleId);
-  if (!example) return;
-  storybook.sectionId = sectionId;
-  storybook.exampleId = exampleId;
-  storybook.focusExample = example.value;
-}
-function setSelectedSectionFilter(storybook, value) {
-  const section = storybook.sections[storybook.selectedSectionIndex];
-  if (section) section.filter = value ?? "";
-}
-function transitionSections(ctx, sb, oldIndex, newIndex) {
-  const changed = oldIndex !== newIndex;
-  if (changed && sb.sections[oldIndex]?.initialized)
-    ctx.at.index("sections", oldIndex).send("suspend", []);
-  const target = sb.sections[newIndex];
-  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) => {
-    ctx.at.index("items", j).send(name, []);
-  });
-}
-function fuzzyMatch(query, target) {
-  const q = query.toLowerCase().trim();
-  if (q === "") return true;
-  const t = target.toLowerCase();
-  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;
-    let qi = 1;
-    let ti = start + 1;
-    for (; ti < t.length && qi < q.length; ti++) {
-      if (t[ti] === q[qi]) qi++;
-    }
-    if (qi === q.length && ti - start <= budget) return true;
-  }
-  return false;
-}
-function slugify(str) {
-  return String(str).normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-}
-function buildSidebar(sections) {
-  const groups = /* @__PURE__ */ new Map();
-  const singles = [];
-  sections.forEach((s) => {
-    const name = s.group ?? "";
-    if (name === "") singles.push(s);
-    else {
-      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] });
-  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
-        })
-      )
-    })
-  );
-}
-
-// src/storybook/build.js
-import { PASS } from "tutuca";
-import { getComponents as getInspectorComponents } from "tutuca/components";
-function buildStorybook(modules) {
-  const rawSections = modules.flatMap((m) => {
-    const raw = m.getExamples?.();
-    if (raw == null) return [];
-    return Array.isArray(raw) ? raw : [raw];
-  });
-  const sections = rawSections.map((s) => Section.fromData(s)).sort((a, b) => a.title.localeCompare(b.title));
-  const engineComponents = [
-    Storybook,
-    Section,
-    Example,
-    SidebarGroup,
-    SidebarEntry,
-    // ActivityLog + ActivityEntry arrive via getInspectorComponents() (tutuca/components).
-    ...getInspectorComponents()
-  ];
-  const engineSet = new Set(engineComponents);
-  const moduleComponents = modules.map((m) => {
-    const seen = /* @__PURE__ */ new Set();
-    const out = [];
-    for (const c of m.getComponents?.() ?? []) {
-      if (!c || engineSet.has(c) || seen.has(c)) continue;
-      seen.add(c);
-      out.push(c);
-    }
-    return out;
-  });
-  const macros = {};
-  const intentHandlers = {};
-  const overrideNames = /* @__PURE__ */ new Set();
-  for (const s of rawSections) {
-    for (const it of s?.items ?? []) {
-      for (const name in it?.intentHandlers ?? {}) overrideNames.add(name);
-    }
-  }
-  for (const m of modules) {
-    if (m.getMacros) Object.assign(macros, m.getMacros());
-    if (m.getIntentHandlers) Object.assign(intentHandlers, m.getIntentHandlers());
-  }
-  const components = [.../* @__PURE__ */ new Set([...engineComponents, ...moduleComponents.flat()])];
-  return {
-    root: Storybook.withSections(sections),
-    components,
-    engineComponents,
-    moduleComponents,
-    macros,
-    intentHandlers,
-    overrideNames
-  };
-}
-function buildExampleIntentHandlers({ intentHandlers: 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?.intentOverridesField;
-      if (!field) return;
-      const map = inst[field] ?? null;
-      if (map && name in map) {
-        override = map[name];
-        return false;
-      }
-    });
-    const fn = override ?? reals[name];
-    if (!fn) return PASS;
-    return await fn(...args, ctx);
-  };
-  const handlers = {};
-  for (const name of names) handlers[name] = makeMeta(name);
-  return handlers;
-}
-
-// src/storybook/mount.js
-import { injectCss, tutuca } from "tutuca";
-import { produce as produce2 } from "tutuca/immer";
-
-// src/storybook/activity.js
-import { rootDispatcher } from "tutuca";
-import { makeInspect, pathKeysLabel, recordToEntry } from "tutuca/components";
-function storybookPathLabel(pathKeys) {
-  return pathKeysLabel(pathKeys.slice(2));
-}
-function subscribeExampleActivity(app) {
-  const inspect = makeInspect(app);
-  return app.observe((record) => {
-    const keys = record.pathKeys;
-    if (keys.length < 3 || keys[0].field !== "sections" || keys[1].field !== "items" || keys[2].field !== "value")
-      return;
-    const si = keys[0].key;
-    const ii = keys[1].key;
-    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]);
-  });
-}
-
-// src/storybook/inspect.js
-import { ActivityLog, buildInspectorViews, isComponentInstance } from "tutuca/components";
-import { produce } from "tutuca/immer";
-function buildTestIndex(modules) {
-  const index = /* @__PURE__ */ new Map();
-  for (const m of modules) {
-    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 });
-    }
-  }
-  return index;
-}
-async function buildExampleInspectors(example, scope, testIndex, dev) {
-  const value = example.value;
-  const comp = isComponentInstance(value) ? scope.getCompFor(value) : null;
-  const entry = comp ? testIndex.get(comp.name) : null;
-  const views = await buildInspectorViews(value, scope, {
-    getTests: entry?.getTests ?? null,
-    components: entry?.components ?? [],
-    dev
-  });
-  return {
-    ...views,
-    activityLog: ActivityLog.make({})
-  };
-}
-async function attachInspectorViews(root, scope, modules, dev = null) {
-  const testIndex = buildTestIndex(modules);
-  const updates = [];
-  for (let si = 0; si < root.sections.length; si++) {
-    for (let ii = 0; ii < root.sections[si].items.length; ii++) {
-      updates.push({
-        si,
-        ii,
-        values: await buildExampleInspectors(root.sections[si].items[ii], scope, testIndex, dev)
-      });
-    }
-  }
-  return produce(root, (draft) => {
-    for (const { si, ii, values } of updates) Object.assign(draft.sections[si].items[ii], values);
-  });
-}
-
-// src/storybook/themes.js
-var MARGAUI_THEMES = [
-  "light",
-  "dark",
-  "abyss",
-  "acid",
-  "aqua",
-  "autumn",
-  "black",
-  "bumblebee",
-  "business",
-  "caramellatte",
-  "cmyk",
-  "coffee",
-  "corporate",
-  "cupcake",
-  "cyberpunk",
-  "dim",
-  "dracula",
-  "emerald",
-  "fantasy",
-  "forest",
-  "garden",
-  "halloween",
-  "lemonade",
-  "lofi",
-  "luxury",
-  "night",
-  "nord",
-  "pastel",
-  "retro",
-  "silk",
-  "sunset",
-  "synthwave",
-  "valentine",
-  "winter",
-  "wireframe"
-];
-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 } = {}) {
-  const app = tutuca(selector);
-  const built = buildStorybook(modules);
-  const themeBaseUrl = themes?.baseUrl ?? null;
-  const base = root ?? built.root;
-  app.state.set(
-    themeBaseUrl ? produce2(base, (draft) => {
-      draft.themes = MARGAUI_THEMES;
-    }) : base
-  );
-  const rootScope = app.registerComponents(built.engineComponents);
-  rootScope.registerMacros(built.macros);
-  rootScope.registerIntentHandlers(buildExampleIntentHandlers(built));
-  rootScope.registerIntentHandlers({ loadState: persistUrl ? loadState : loadStateBlank });
-  if (persistUrl) {
-    rootScope.registerIntentHandlers({ persistState });
-  }
-  if (themeBaseUrl) {
-    rootScope.registerIntentHandlers({ applyTheme });
-  }
-  const moduleScopes = built.moduleComponents.map((comps) => {
-    const scope = rootScope.enter();
-    scope.registerComponents(comps);
-    return scope;
-  });
-  if (dev && app.state.val?.sections) {
-    app.state.set(await attachInspectorViews(app.state.val, rootScope, modules, dev));
-  }
-  if (compileCss) {
-    injectCss("tutuca-storybook", await compileCss(app));
-  }
-  app.start({ noCache });
-  if (dev) subscribeExampleActivity(app);
-  app.sendAtRoot("init", []);
-  if (persistUrl) {
-    window.addEventListener("popstate", () => app.sendAtRoot("init", []));
-  }
-  app.scopes = { root: rootScope, modules: moduleScopes };
-  return app;
-  function persistState(state, instance, push) {
-    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));
-    }
-    window.history[push ? "pushState" : "replaceState"](null, "", url);
-  }
-  function applyTheme(name, instance) {
-    if (instance !== app.state.val) return;
-    ensureThemeLink(name);
-    document.documentElement.dataset.theme = name;
-  }
-  function loadState() {
-    const p = new URLSearchParams(window.location.search);
-    return {
-      section: p.get("section"),
-      example: p.get("example"),
-      sectionFilter: p.get("sectionFilter") ?? "",
-      exampleFilter: p.get("exampleFilter") ?? "",
-      theme: resolveTheme(p.get("theme"))
-    };
-  }
-  function loadStateBlank() {
-    return {
-      section: null,
-      example: null,
-      sectionFilter: "",
-      exampleFilter: "",
-      theme: resolveTheme(null)
-    };
-  }
-  function resolveTheme(fromUrl) {
-    if (!themeBaseUrl) return "";
-    const name = MARGAUI_THEMES.includes(fromUrl) ? fromUrl : osTheme();
-    ensureThemeLink(name);
-    document.documentElement.dataset.theme = name;
-    return name;
-  }
-  function osTheme() {
-    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  function ensureThemeLink(name) {
-    if (BUNDLED_THEMES.has(name) || document.getElementById(themeLinkId(name))) return;
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.id = themeLinkId(name);
-    link.href = `${themeBaseUrl}${name}.css`;
-    document.head.append(link);
-  }
-  function themeLinkId(name) {
-    return `tutuca-theme-${name}`;
-  }
-}
-
-// src/storybook/index.js
-function getComponents() {
-  return [Storybook, Section, Example, SidebarGroup, SidebarEntry];
-}
-export {
-  BUNDLED_THEMES,
-  Example,
-  MARGAUI_THEMES,
-  Section,
-  Storybook,
-  buildExampleIntentHandlers,
-  buildStorybook,
-  fuzzyMatch,
-  getComponents,
-  mountStorybook,
-  slugify
-};