@obvi/blueprint 1.1.2 → 1.2.0

package/dist/vendor/blueprint/blueprint.js

@@ -0,0 +1,2932 @@
+// blueprint-choices.js
+var choiceSeq = 0;
+function nextId(prefix) {
+  choiceSeq += 1;
+  return `${prefix}-${choiceSeq}`;
+}
+function extractRationale(root) {
+  const node = root.querySelector(":scope > bp-rationale");
+  if (!node) return null;
+  const wrap = node.ownerDocument.createElement("div");
+  wrap.className = "bp-choice-rationale";
+  wrap.append(...node.childNodes);
+  return wrap;
+}
+function bodyWithoutRationale(root) {
+  const frag = root.ownerDocument.createDocumentFragment();
+  for (const child of root.childNodes) {
+    if (child instanceof Element && child.tagName === "BP-RATIONALE") continue;
+    if (child instanceof Element && child.getAttribute("slot") === "frame") continue;
+    frag.append(child.cloneNode(true));
+  }
+  return frag;
+}
+function frameContent(root) {
+  const slotted = root.querySelector(':scope > [slot="frame"]');
+  if (slotted) {
+    const frame = slotted.cloneNode(true);
+    frame.removeAttribute("slot");
+    return frame;
+  }
+  return null;
+}
+function el(doc, tag, className) {
+  const node = doc.createElement(tag);
+  if (className) node.className = className;
+  return node;
+}
+function label(doc, text, className) {
+  const node = el(doc, "span", className ?? "bp-label");
+  node.textContent = text;
+  return node;
+}
+function buildVerdict(doc, kicker, options, meta = "You · just now") {
+  const verdict = el(doc, "div", "bp-choice__verdict");
+  verdict.append(label(doc, kicker));
+  for (const opt of options) {
+    const pick = el(doc, "p", "bp-choice__verdict-pick");
+    pick.dataset.for = opt.value;
+    pick.textContent = opt.title;
+    verdict.append(pick);
+  }
+  if (meta) {
+    const metaEl = el(doc, "span", "bp-choice__verdict-meta");
+    metaEl.textContent = meta;
+    verdict.append(metaEl);
+  }
+  return verdict;
+}
+function buildFooter(doc, hint, reconsider) {
+  const actions = el(doc, "div", "bp-choice__actions");
+  if (hint) {
+    const hintEl = el(doc, "span", "bp-choice__hint");
+    hintEl.textContent = hint;
+    actions.append(hintEl);
+  }
+  const reset = el(doc, "button", "bp-choice__reset");
+  reset.type = "reset";
+  reset.textContent = reconsider;
+  actions.append(reset);
+  return actions;
+}
+function scopedTabRules(scope, viewName, pickName, options) {
+  const lines = options.map(
+    (opt) => `${scope}:has([name="${viewName}"][value="${opt.value}"]:checked) .bp-choice__panel[data-value="${opt.value}"]{display:block}${scope}:has([name="${pickName}"][value="${opt.value}"]:checked) .bp-choice__verdict-pick[data-for="${opt.value}"]{display:block}`
+  );
+  return lines.join("\n");
+}
+function readOptions(host) {
+  return [...host.querySelectorAll(":scope > bp-choice-option")].map((node) => ({
+    el: node,
+    value: node.getAttribute("value") ?? "",
+    tab: node.getAttribute("tab") ?? node.getAttribute("label") ?? node.getAttribute("value") ?? "",
+    title: node.getAttribute("title") ?? node.getAttribute("caption") ?? node.getAttribute("tab") ?? "",
+    optionLabel: node.getAttribute("label") ?? node.getAttribute("tab") ?? "",
+    caption: node.getAttribute("caption") ?? node.getAttribute("title") ?? ""
+  }));
+}
+function buildResolvedChoice(doc, { options, verdictKicker, resolvedValue }) {
+  const root = el(doc, "div", "bp-choice bp-choice--resolved");
+  const winner = options.find((o) => o.value === resolvedValue) ?? options[0];
+  const verdict = buildVerdict(
+    doc,
+    verdictKicker,
+    options.map((o) => ({ value: o.value, title: o.title })),
+    ""
+  );
+  const winnerPick = winner && verdict.querySelector(`.bp-choice__verdict-pick[data-for="${winner.value}"]`);
+  if (winnerPick) winnerPick.setAttribute("data-resolved", "");
+  root.append(verdict);
+  const stack = el(doc, "div", "bp-choice__stack");
+  for (const opt of options) {
+    const card = el(doc, "div", "bp-choice__card");
+    if (winner && opt.value === winner.value) card.setAttribute("data-resolved", "");
+    const head = el(doc, "div", "bp-choice__card-head");
+    if (opt.optionLabel) head.append(label(doc, opt.optionLabel));
+    const chosen = el(doc, "span", "bp-choice__tag bp-choice__tag--ink bp-choice__card-chosen");
+    chosen.textContent = `✓ ${verdictKicker}`;
+    const rejected = el(doc, "span", "bp-choice__tag bp-choice__tag--out bp-choice__card-rejected");
+    rejected.textContent = "Not chosen";
+    head.append(chosen, rejected);
+    card.append(head);
+    const h4 = el(doc, "h4");
+    h4.textContent = opt.title;
+    card.append(h4);
+    card.append(bodyWithoutRationale(opt.el));
+    const rationale = extractRationale(opt.el);
+    if (rationale) card.append(rationale);
+    stack.append(card);
+  }
+  root.append(stack);
+  return root;
+}
+var BlueprintRationaleElement = class extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return;
+    this.dataset.bpRendered = "1";
+    this.classList.add("bp-choice-rationale");
+  }
+};
+var BlueprintChoiceOptionElement = class extends HTMLElement {
+};
+var BlueprintChoiceElement = class extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return;
+    this.dataset.bpRendered = "1";
+    const doc = this.ownerDocument;
+    const layout = (this.getAttribute("layout") || "stack").toLowerCase();
+    const verdictKicker = this.getAttribute("verdict") ?? "Chosen";
+    const adoptLabel = this.getAttribute("adopt") ?? "Adopt this direction";
+    const hint = this.getAttribute("hint") ?? "";
+    const reconsider = this.getAttribute("reconsider") ?? "Reconsider";
+    const compareSummary = this.getAttribute("compare");
+    const compareBody = this.querySelector(':scope > [slot="compare"]');
+    const options = readOptions(this);
+    const resolvedValue = this.getAttribute("resolved");
+    if (resolvedValue !== null) {
+      this.replaceChildren(buildResolvedChoice(doc, { options, verdictKicker, resolvedValue }));
+      return;
+    }
+    const scopeId = nextId("bp-choice");
+    const viewName = `${scopeId}-view`;
+    const pickName = `${scopeId}-pick`;
+    const form = el(doc, "form", `bp-choice bp-choice--${layout}`);
+    form.dataset.bpChoice = scopeId;
+    const titleOpts = options.map((o) => ({ value: o.value, title: o.title }));
+    form.append(buildVerdict(doc, verdictKicker, titleOpts));
+    if (layout === "tabs") {
+      const seg = el(doc, "div", "bp-choice__seg");
+      seg.setAttribute("role", "tablist");
+      for (const [index, opt] of options.entries()) {
+        const segOpt = el(doc, "label", "bp-choice__seg-opt");
+        const input = doc.createElement("input");
+        input.type = "radio";
+        input.name = viewName;
+        input.value = opt.value;
+        input.className = "bp-choice__view";
+        if (index === 0) {
+          input.defaultChecked = true;
+          input.checked = true;
+        }
+        segOpt.append(input, doc.createTextNode(opt.tab));
+        seg.append(segOpt);
+      }
+      form.append(seg);
+      const panels = el(doc, "div", "bp-choice__panels");
+      for (const opt of options) {
+        const panel = el(doc, "div", "bp-choice__panel");
+        panel.dataset.value = opt.value;
+        const h3 = el(doc, "h3");
+        h3.textContent = opt.title;
+        panel.append(h3);
+        panel.append(bodyWithoutRationale(opt.el));
+        const rationale = extractRationale(opt.el);
+        if (rationale) panel.append(rationale);
+        const actions = el(doc, "div", "bp-choice__actions");
+        const adopt = el(doc, "label", "bp-choice__adopt");
+        const commit = doc.createElement("input");
+        commit.type = "radio";
+        commit.name = pickName;
+        commit.value = opt.value;
+        commit.className = "bp-choice__commit";
+        adopt.append(commit, doc.createTextNode(adoptLabel));
+        actions.append(adopt);
+        panel.append(actions);
+        panels.append(panel);
+      }
+      form.append(panels);
+      const style = el(doc, "style");
+      style.textContent = scopedTabRules(`[data-bp-choice="${scopeId}"]`, viewName, pickName, titleOpts);
+      form.prepend(style);
+      form.append(
+        buildFooter(
+          doc,
+          hint || "Switch tabs to preview · adopt to commit",
+          reconsider
+        )
+      );
+    }
+    if (layout === "stack") {
+      const stack = el(doc, "div", "bp-choice__stack");
+      for (const opt of options) {
+        const card = el(doc, "label", "bp-choice__card");
+        const input = doc.createElement("input");
+        input.type = "radio";
+        input.name = pickName;
+        input.value = opt.value;
+        input.className = "bp-choice__pick";
+        card.append(input);
+        const head = el(doc, "div", "bp-choice__card-head");
+        if (opt.optionLabel) head.append(label(doc, opt.optionLabel));
+        const chosen = el(doc, "span", "bp-choice__tag bp-choice__tag--ink bp-choice__card-chosen");
+        chosen.textContent = "✓ Chosen";
+        const rejected = el(doc, "span", "bp-choice__tag bp-choice__tag--out bp-choice__card-rejected");
+        rejected.textContent = "Not chosen";
+        head.append(chosen, rejected);
+        card.append(head);
+        const h4 = el(doc, "h4");
+        h4.textContent = opt.title;
+        card.append(h4);
+        card.append(bodyWithoutRationale(opt.el));
+        const rationale = extractRationale(opt.el);
+        if (rationale) card.append(rationale);
+        stack.append(card);
+      }
+      form.append(stack);
+      form.append(
+        buildFooter(
+          doc,
+          hint || "Select a card to commit · rejected drafts stay readable below",
+          reconsider
+        )
+      );
+    }
+    if (layout === "gallery") {
+      const gallery = el(doc, "div", "bp-choice__gallery");
+      for (const opt of options) {
+        const mock = el(doc, "label", "bp-choice__mock");
+        const input = doc.createElement("input");
+        input.type = "radio";
+        input.name = pickName;
+        input.value = opt.value;
+        input.className = "bp-choice__pick";
+        mock.append(input);
+        const frame = el(doc, "div", "bp-choice__mock-frame");
+        const frameInner = frameContent(opt.el);
+        if (frameInner) frame.append(frameInner);
+        mock.append(frame);
+        const cap = el(doc, "div", "bp-choice__mock-cap");
+        const h4 = el(doc, "h4");
+        h4.textContent = opt.caption;
+        cap.append(h4);
+        const chosen = el(doc, "span", "bp-choice__tag bp-choice__tag--ink bp-choice__mock-pick bp-choice__mock-chosen");
+        chosen.textContent = "✓ Chosen";
+        const rejected = el(doc, "span", "bp-choice__tag bp-choice__tag--out bp-choice__mock-pick bp-choice__mock-rejected");
+        rejected.textContent = "Not chosen";
+        cap.append(chosen, rejected);
+        mock.append(cap);
+        gallery.append(mock);
+      }
+      form.append(gallery);
+      if (compareSummary && compareBody) {
+        const details = el(doc, "details", "bp-choice__compare");
+        const summary = el(doc, "summary");
+        summary.textContent = compareSummary;
+        details.append(summary);
+        const body = el(doc, "div", "bp-choice__compare-body");
+        body.append(compareBody.cloneNode(true));
+        details.append(body);
+        form.append(details);
+      }
+      form.append(
+        buildFooter(doc, hint || "Select a mockup to track the decision", reconsider)
+      );
+    }
+    this.replaceChildren(form);
+  }
+};
+var BlueprintPreflightAElement = class extends HTMLElement {
+};
+var BlueprintPreflightQElement = class extends HTMLElement {
+};
+var BlueprintPreflightElement = class extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return;
+    this.dataset.bpRendered = "1";
+    const doc = this.ownerDocument;
+    const title = this.getAttribute("title") ?? "Before drafting";
+    const draftName = this.getAttribute("draft") ?? "section";
+    const hint = this.getAttribute("hint") ?? "Answer all questions to unlock · choices stay editable";
+    const reconsider = this.getAttribute("reconsider") ?? "Reset answers";
+    const scopeId = nextId("bp-preflight");
+    const questions = [...this.querySelectorAll(":scope > bp-preflight-q")];
+    const form = el(doc, "form");
+    const panel = el(doc, "div", "bp-preflight");
+    panel.dataset.bpPreflight = scopeId;
+    const bar = el(doc, "div", "bp-preflight__bar");
+    bar.append(label(doc, title));
+    const count = el(doc, "span", "bp-preflight__count");
+    count.textContent = `${questions.length} required`;
+    bar.append(count);
+    panel.append(bar);
+    const list = el(doc, "div", "bp-preflight__questions");
+    const gateSelectors = [];
+    for (const qNode of questions) {
+      const qName = qNode.getAttribute("name") ?? nextId("q");
+      const kind = (qNode.getAttribute("kind") || "one").toLowerCase();
+      const prompt = qNode.getAttribute("prompt") ?? "";
+      const answers = [...qNode.querySelectorAll(":scope > bp-preflight-a")];
+      const q = el(doc, "div", "bp-preflight__q");
+      const promptEl = el(doc, "p", "bp-preflight__prompt");
+      promptEl.append(doc.createTextNode(prompt));
+      const kindEl = el(doc, "span", "bp-preflight__kind");
+      kindEl.textContent = kind === "many" ? "· choose any" : "· choose one";
+      promptEl.append(kindEl);
+      const resolved = el(doc, "span", "bp-choice__tag bp-choice__tag--ink bp-preflight__resolved");
+      resolved.textContent = "✓ Resolved";
+      promptEl.append(resolved);
+      q.append(promptEl);
+      const chips = el(doc, "div", "bp-preflight__chips");
+      for (const aNode of answers) {
+        const chip = el(doc, "label", "bp-preflight__chip");
+        const input = doc.createElement("input");
+        input.type = kind === "many" ? "checkbox" : "radio";
+        input.name = qName;
+        input.value = aNode.getAttribute("value") ?? aNode.textContent?.trim() ?? "";
+        chip.append(input, doc.createTextNode(aNode.textContent?.trim() ?? ""));
+        chips.append(chip);
+      }
+      q.append(chips);
+      const rationale = extractRationale(qNode);
+      if (rationale) q.append(rationale);
+      list.append(q);
+      gateSelectors.push(`[name="${qName}"]:checked`);
+    }
+    panel.append(list);
+    const gateWrap = el(doc, "div");
+    gateWrap.style.padding = "var(--bp-space-3)";
+    const gate = el(doc, "div", "bp-preflight__gate");
+    const locked = el(doc, "div", "bp-preflight__gate-locked");
+    const lockedTag = el(doc, "span", "bp-choice__tag");
+    lockedTag.textContent = `⌧ Section fenced — resolve the ${questions.length} decisions above to draft`;
+    locked.append(lockedTag);
+    const ready = el(doc, "div", "bp-preflight__gate-ready");
+    const readyP = el(doc, "p");
+    readyP.style.margin = "0 0 var(--bp-space-1)";
+    readyP.textContent = "All decisions resolved.";
+    const draftBtn = el(doc, "span", "bp-preflight__draft");
+    draftBtn.textContent = `Draft “${draftName}” →`;
+    ready.append(readyP, draftBtn);
+    gate.append(locked, ready);
+    gateWrap.append(gate);
+    panel.append(gateWrap);
+    const style = el(doc, "style");
+    const gateRule = gateSelectors.map((sel) => `:has(${sel})`).join("");
+    style.textContent = `[data-bp-preflight="${scopeId}"]${gateRule}{--bp-preflight-ready:1}[data-bp-preflight="${scopeId}"]${gateRule}{border-color:var(--bp-ink-line)}[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate{background-image:none;border-style:solid}[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate-locked{display:none}[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate-ready{display:block}`;
+    panel.prepend(style);
+    const footer = el(doc, "div", "bp-preflight__footer");
+    const hintEl = el(doc, "span", "bp-choice__hint");
+    hintEl.textContent = hint;
+    const reset = el(doc, "button", "bp-choice__reset");
+    reset.type = "reset";
+    reset.textContent = reconsider;
+    footer.append(hintEl, reset);
+    form.append(panel, footer);
+    this.replaceChildren(form);
+  }
+};
+var BlueprintChoiceRecordRowElement = class extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return;
+    this.dataset.bpRendered = "1";
+    const doc = this.ownerDocument;
+    const rowLabel = this.getAttribute("label") ?? "";
+    const value = this.getAttribute("value") ?? "";
+    const alts = this.getAttribute("alts") ?? "";
+    const dl = el(doc, "dl", "bp-choice-record__row");
+    const dt = el(doc, "dt");
+    dt.textContent = rowLabel;
+    const dd = el(doc, "dd");
+    dd.textContent = value;
+    dl.append(dt, dd);
+    if (alts) {
+      const tag = el(doc, "span", "bp-choice__tag bp-choice__tag--out");
+      tag.textContent = alts;
+      dl.append(tag);
+    }
+    const considered = this.querySelector(':scope > [slot="considered"]');
+    const nodes = [dl];
+    if (considered) {
+      const details = el(doc, "details", "bp-choice__compare");
+      const summary = el(doc, "summary");
+      summary.textContent = "Show the options considered";
+      details.append(summary);
+      const body = el(doc, "div", "bp-choice__compare-body");
+      body.append(considered.cloneNode(true));
+      details.append(body);
+      nodes.push(details);
+    }
+    this.replaceChildren(...nodes);
+  }
+};
+var BlueprintChoiceRecordElement = class extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return;
+    this.dataset.bpRendered = "1";
+    const wrap = this.ownerDocument.createElement("div");
+    wrap.className = "bp-choice-record";
+    wrap.append(...this.childNodes);
+    this.replaceChildren(wrap);
+  }
+};
+function define(name, ctor) {
+  if (typeof customElements !== "undefined" && !customElements.get(name)) {
+    customElements.define(name, ctor);
+  }
+}
+function registerBlueprintChoiceElements() {
+  define("bp-rationale", BlueprintRationaleElement);
+  define("bp-choice-option", BlueprintChoiceOptionElement);
+  define("bp-choice", BlueprintChoiceElement);
+  define("bp-preflight-a", BlueprintPreflightAElement);
+  define("bp-preflight-q", BlueprintPreflightQElement);
+  define("bp-preflight", BlueprintPreflightElement);
+  define("bp-choice-record-row", BlueprintChoiceRecordRowElement);
+  define("bp-choice-record", BlueprintChoiceRecordElement);
+}
+registerBlueprintChoiceElements();
+
+// blueprint.js
+var SIDEBAR_COLLAPSE_ICON = [
+  "M19 21L5 21C3.89543 21 3 20.1046 3 19L3 5C3 3.89543 3.89543 3 5 3L19 3C20.1046 3 21 3.89543 21 5L21 19C21 20.1046 20.1046 21 19 21Z",
+  "M7.25 10L5.5 12L7.25 14",
+  "M9.5 21V3"
+];
+var SIDEBAR_EXPAND_ICON = [
+  "M19 21L5 21C3.89543 21 3 20.1046 3 19L3 5C3 3.89543 3.89543 3 5 3L19 3C20.1046 3 21 3.89543 21 5L21 19C21 20.1046 20.1046 21 19 21Z",
+  "M9.5 21V3",
+  "M5.5 10L7.25 12L5.5 14"
+];
+var SEARCH_ICON = [
+  "M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z",
+  "M17 17L21 21"
+];
+var DOC_CHEVRON_ICON = "M6 9L12 15L18 9";
+var THEME_MOON_ICON = "M3 11.5066C3 16.7497 7.25034 21 12.4934 21C16.2209 21 19.4466 18.8518 21 15.7259C12.4934 15.7259 8.27411 11.5066 8.27411 3C5.14821 4.55344 3 7.77915 3 11.5066Z";
+var THEME_BULB_ICON = [
+  "M9 18H15",
+  "M10 21H14",
+  "M9.00082 15C9.00098 13 8.50098 12.5 7.50082 11.5C6.50067 10.5 6.02422 9.48689 6.00082 8C5.95284 4.95029 8.00067 3 12.0008 3C16.001 3 18.0488 4.95029 18.0008 8C17.9774 9.48689 17.5007 10.5 16.5008 11.5C15.501 12.5 15.001 13 15.0008 15"
+];
+var BLUEPRINT_LOGO_OUTLINE = "M7.3 19H12.7C14.3802 19 15.2202 19 15.862 18.673C16.4265 18.3854 16.8854 17.9265 17.173 17.362C17.5 16.7202 17.5 15.8802 17.5 14.2V9.1075C17.5 8.3982 17.5 8.04355 17.4222 7.70852C17.3531 7.41144 17.2392 7.12663 17.0843 6.86389C16.9096 6.56761 16.665 6.31078 16.1759 5.79716L13.0259 2.48966C12.5028 1.94045 12.2413 1.66585 11.9324 1.46921C11.6585 1.29489 11.3582 1.16618 11.0431 1.08809C10.6876 1 10.3084 1 9.55 1H7.3C5.61984 1 4.77976 1 4.13803 1.32698C3.57354 1.6146 3.1146 2.07354 2.82698 2.63803C2.5 3.27976 2.5 4.11984 2.5 5.8V14.2C2.5 15.8802 2.5 16.7202 2.82698 17.362C3.1146 17.9265 3.57354 18.3854 4.13803 18.673C4.77976 19 5.61984 19 7.3 19Z";
+var BLUEPRINT_LOGO_FILL = "M16 16H5V6L16 16ZM6.5 14.5H11.5L6.5 9.5V14.5Z";
+function metaSelector({ name, property } = {}) {
+  if (property) return `meta[property="${property}"]`;
+  if (name) return `meta[name="${name}"]`;
+  return null;
+}
+function readMetaContent(doc, target) {
+  const selector = metaSelector(target);
+  return selector ? doc.querySelector(selector)?.content?.trim() ?? "" : "";
+}
+function readMetaContentAll(doc, target) {
+  const selector = metaSelector(target);
+  if (!selector) return [];
+  return [...doc.querySelectorAll(selector)].map((meta) => meta.content?.trim()).filter(Boolean);
+}
+function readMetaJson(doc, name) {
+  const raw = readMetaContent(doc, { name });
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function formatPublishedDate(iso) {
+  if (!iso) return null;
+  const day = iso.includes("T") ? iso.split("T")[0] : iso;
+  const date = new Date(day.includes("T") ? day : `${day}T12:00:00`);
+  if (Number.isNaN(date.getTime())) return null;
+  return {
+    iso: day,
+    label: date.toLocaleDateString(void 0, {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+      timeZone: "UTC"
+    })
+  };
+}
+function pageBasename(href, win) {
+  try {
+    return new URL(href, win.location.href).pathname.split("/").pop() || "index.html";
+  } catch {
+    return href.split("/").pop() || "index.html";
+  }
+}
+function isCurrentHref(href, win) {
+  const current = win.location.pathname.split("/").pop() || "index.html";
+  return pageBasename(href, win) === current;
+}
+function createChromeSvg(doc, pathD, size = 16) {
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("aria-hidden", "true");
+  for (const d of Array.isArray(pathD) ? pathD : [pathD]) {
+    const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+  }
+  return svg;
+}
+function createBlueprintLogo(doc) {
+  const svg = createChromeSvg(doc, BLUEPRINT_LOGO_OUTLINE, 20);
+  svg.setAttribute("viewBox", "0 0 20 20");
+  svg.classList.add("site-nav__logo");
+  const fill = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+  fill.setAttribute("d", BLUEPRINT_LOGO_FILL);
+  fill.setAttribute("fill", "currentColor");
+  fill.setAttribute("stroke", "none");
+  svg.append(fill);
+  return svg;
+}
+function injectScrollProgress(doc) {
+  if (doc.querySelector(".scroll-progress")) return null;
+  const bar = doc.createElement("div");
+  bar.className = "scroll-progress";
+  bar.setAttribute("aria-hidden", "true");
+  return bar;
+}
+function injectSiteNav(doc, win) {
+  if (doc.querySelector(".site-nav")) return null;
+  const links = readMetaJson(doc, "bp:site-nav");
+  if (!links?.length) return null;
+  const nav = doc.createElement("nav");
+  nav.className = "site-nav";
+  nav.setAttribute("aria-label", "Site");
+  const brandLabel = readMetaContent(doc, { property: "og:site_name" }) || doc.title.split("—")[0]?.trim() || "Home";
+  const brandHref = readMetaContent(doc, { name: "bp:site-home" }) || "index.html";
+  const brand = doc.createElement("a");
+  brand.className = "site-nav__brand";
+  brand.href = brandHref;
+  brand.setAttribute("aria-label", `${brandLabel} home`);
+  const logo = createBlueprintLogo(doc);
+  const wordmark = doc.createElement("span");
+  wordmark.className = "site-nav__wordmark";
+  wordmark.textContent = brandLabel;
+  brand.append(logo, wordmark);
+  const list = doc.createElement("ul");
+  list.className = "site-nav__links";
+  for (const item of links) {
+    const li = doc.createElement("li");
+    const link = doc.createElement("a");
+    link.href = item.href;
+    link.textContent = item.label;
+    if (item.current || isCurrentHref(item.href, win)) {
+      link.setAttribute("aria-current", "page");
+    }
+    li.append(link);
+    list.append(li);
+  }
+  nav.append(brand, list);
+  if (readMetaContent(doc, { name: "bp:site-theme" }) === "nav") {
+    const theme = doc.createElement("button");
+    theme.className = "toggle site-nav__theme";
+    theme.type = "button";
+    theme.id = "themeToggle";
+    theme.setAttribute("aria-label", "Toggle light and dark theme");
+    theme.textContent = "Theme";
+    nav.append(theme);
+  }
+  return nav;
+}
+function injectSidebarToggle(doc) {
+  if (doc.querySelector(".sidebar-toggle")) return null;
+  const toggle = doc.createElement("button");
+  toggle.className = "sidebar-toggle";
+  toggle.type = "button";
+  toggle.setAttribute("aria-controls", "bp-contents-rail");
+  toggle.setAttribute("aria-expanded", "true");
+  toggle.setAttribute("aria-label", "Hide contents sidebar");
+  const icons = doc.createElement("span");
+  icons.className = "sidebar-toggle__icons";
+  icons.setAttribute("aria-hidden", "true");
+  const collapse = doc.createElement("span");
+  collapse.className = "sidebar-toggle__icon sidebar-toggle__icon--collapse bp-transition-opacity bp-duration-slow bp-ease-in-out";
+  collapse.append(createChromeSvg(doc, SIDEBAR_COLLAPSE_ICON));
+  const expand = doc.createElement("span");
+  expand.className = "sidebar-toggle__icon sidebar-toggle__icon--expand bp-transition-opacity bp-duration-slow bp-ease-in-out";
+  expand.append(createChromeSvg(doc, SIDEBAR_EXPAND_ICON));
+  icons.append(collapse, expand);
+  toggle.append(icons);
+  return toggle;
+}
+function buildDocSwitcher(doc, win) {
+  const collections = readMetaJson(doc, "bp:collections");
+  if (!collections?.length) return null;
+  const details = doc.createElement("details");
+  details.className = "doc-switcher";
+  const summary = doc.createElement("summary");
+  summary.className = "doc-switcher__current sidebar-field";
+  summary.setAttribute("aria-label", "Switch blueprint collection");
+  const current = collections.find((item) => item.current || isCurrentHref(item.href, win)) ?? collections[0];
+  const collectionMeta = readMetaContent(doc, { name: "bp:collection-meta" });
+  const label2 = doc.createElement("span");
+  label2.className = "doc-switcher__label";
+  const title = doc.createElement("span");
+  title.className = "doc-switcher__title";
+  title.textContent = current.title;
+  const meta = doc.createElement("span");
+  meta.className = "doc-switcher__meta";
+  meta.textContent = collectionMeta || current.desc || "";
+  label2.append(title);
+  if (meta.textContent) label2.append(meta);
+  const chevron = doc.createElement("span");
+  chevron.className = "doc-switcher__chevron bp-transition-transform bp-duration-normal bp-ease-in-out";
+  chevron.setAttribute("aria-hidden", "true");
+  chevron.append(createChromeSvg(doc, DOC_CHEVRON_ICON));
+  summary.append(label2, chevron);
+  const menu = doc.createElement("div");
+  menu.className = "doc-switcher__menu";
+  menu.setAttribute("role", "menu");
+  for (const item of collections) {
+    const link = doc.createElement("a");
+    link.href = item.href;
+    link.setAttribute("role", "menuitem");
+    if (item.current || isCurrentHref(item.href, win)) {
+      link.className = "is-current";
+      link.setAttribute("aria-current", "page");
+    }
+    const option = doc.createElement("span");
+    option.className = "doc-switcher__option";
+    const name = doc.createElement("span");
+    name.className = "doc-switcher__name";
+    name.textContent = item.title;
+    option.append(name);
+    if (item.desc) {
+      const desc = doc.createElement("span");
+      desc.className = "doc-switcher__desc";
+      desc.textContent = item.desc;
+      option.append(desc);
+    }
+    const go = doc.createElement("span");
+    go.className = "doc-switcher__go bp-transition-opacity";
+    go.setAttribute("aria-hidden", "true");
+    go.append(createChromeSvg(doc, DOC_CHEVRON_ICON, 14));
+    link.append(option, go);
+    menu.append(link);
+  }
+  details.append(summary, menu);
+  return details;
+}
+function buildSidebarFooter(doc) {
+  const footer = doc.createElement("div");
+  footer.className = "sidebar-footer";
+  const theme = doc.createElement("button");
+  theme.className = "theme-toggle";
+  theme.type = "button";
+  theme.setAttribute("role", "switch");
+  theme.setAttribute("aria-checked", "false");
+  theme.setAttribute("aria-label", "Switch to dark theme");
+  const thumb = doc.createElement("span");
+  thumb.className = "theme-toggle__thumb bp-transition-transform bp-duration-normal bp-ease-in-out";
+  thumb.setAttribute("aria-hidden", "true");
+  const moon = doc.createElement("span");
+  moon.className = "theme-toggle__icon theme-toggle__icon--moon";
+  moon.setAttribute("aria-hidden", "true");
+  moon.append(createChromeSvg(doc, THEME_MOON_ICON, 14));
+  const bulb = doc.createElement("span");
+  bulb.className = "theme-toggle__icon theme-toggle__icon--bulb";
+  bulb.setAttribute("aria-hidden", "true");
+  bulb.append(createChromeSvg(doc, THEME_BULB_ICON, 14));
+  theme.append(thumb, moon, bulb);
+  const meta = doc.createElement("div");
+  meta.className = "sidebar-meta";
+  const authors = readMetaContentAll(doc, { property: "article:author" });
+  const published = formatPublishedDate(
+    readMetaContent(doc, { property: "article:published_time" })
+  );
+  if (authors.length) {
+    const item = doc.createElement("div");
+    item.className = "sidebar-meta__item";
+    const label2 = doc.createElement("p");
+    label2.className = "bp-meta";
+    label2.textContent = authors.length > 1 ? "Authors" : "Author";
+    const value = doc.createElement("p");
+    value.className = "bp-note";
+    value.textContent = authors.join(", ");
+    item.append(label2, value);
+    meta.append(item);
+  }
+  if (published) {
+    const item = doc.createElement("div");
+    item.className = "sidebar-meta__item";
+    const label2 = doc.createElement("p");
+    label2.className = "bp-meta";
+    label2.textContent = "Date";
+    const value = doc.createElement("p");
+    value.className = "bp-note";
+    const time = doc.createElement("time");
+    time.dateTime = published.iso;
+    time.textContent = published.label;
+    value.append(time);
+    item.append(label2, value);
+    meta.append(item);
+  }
+  footer.append(theme);
+  if (meta.childNodes.length) footer.append(meta);
+  return footer;
+}
+function injectSidebar(doc, win) {
+  if (doc.querySelector(".bp-sidebar")) return null;
+  const nav = doc.createElement("nav");
+  nav.className = "bp-sidebar";
+  nav.id = "bp-contents-rail";
+  nav.setAttribute("aria-label", "Contents");
+  const panel = doc.createElement("div");
+  panel.className = "bp-sidebar__panel";
+  const search = doc.createElement("div");
+  search.className = "sidebar-search";
+  const searchField = doc.createElement("button");
+  searchField.type = "button";
+  searchField.className = "sidebar-search__field sidebar-field bp-transition-colors bp-ease";
+  searchField.setAttribute("aria-haspopup", "dialog");
+  searchField.setAttribute("aria-keyshortcuts", "Meta+K Control+K");
+  searchField.setAttribute("aria-label", "Search (⌘K)");
+  const searchIcon = createChromeSvg(doc, SEARCH_ICON, 14);
+  searchIcon.classList.add("sidebar-search__icon");
+  const searchLabel = doc.createElement("span");
+  searchLabel.className = "sidebar-search__label";
+  searchLabel.textContent = "Search";
+  const searchHint = doc.createElement("span");
+  searchHint.className = "sidebar-search__hint";
+  searchHint.setAttribute("aria-hidden", "true");
+  const searchHintCmd = doc.createElement("kbd");
+  searchHintCmd.textContent = "⌘";
+  const searchHintKey = doc.createElement("kbd");
+  searchHintKey.textContent = "K";
+  searchHint.append(searchHintCmd, searchHintKey);
+  searchField.append(searchIcon, searchLabel, searchHint);
+  search.append(searchField);
+  const switcher = buildDocSwitcher(doc, win);
+  const tocSwitcher = doc.createElement("details");
+  tocSwitcher.className = "bp-toc-switcher";
+  tocSwitcher.open = true;
+  const tocSummary = doc.createElement("summary");
+  tocSummary.className = "bp-toc-switcher__current sidebar-field";
+  tocSummary.setAttribute("aria-label", "Jump to section");
+  const tocLabel = doc.createElement("span");
+  tocLabel.className = "bp-toc-switcher__label";
+  const tocTitle = doc.createElement("span");
+  tocTitle.className = "bp-toc-switcher__title";
+  tocTitle.textContent = "Contents";
+  tocLabel.append(tocTitle);
+  const tocChevron = doc.createElement("span");
+  tocChevron.className = "bp-toc-switcher__chevron bp-transition-transform bp-duration-normal bp-ease-in-out";
+  tocChevron.setAttribute("aria-hidden", "true");
+  tocChevron.append(createChromeSvg(doc, DOC_CHEVRON_ICON));
+  tocSummary.append(tocLabel, tocChevron);
+  const list = doc.createElement("ul");
+  tocSwitcher.append(tocSummary, list);
+  const mobileHead = doc.createElement("div");
+  mobileHead.className = "sidebar-mobile-head";
+  mobileHead.append(tocSwitcher, search);
+  panel.append(mobileHead);
+  if (switcher) panel.append(switcher);
+  nav.append(panel, buildSidebarFooter(doc));
+  return nav;
+}
+function syncThemeSwitch(doc, button) {
+  const dark = doc.documentElement.dataset.obviousTheme === "dark";
+  button.setAttribute("aria-checked", String(dark));
+  button.setAttribute(
+    "aria-label",
+    dark ? "Switch to light theme" : "Switch to dark theme"
+  );
+}
+var THEME_KEY = "bp-theme";
+function readStoredTheme(win) {
+  try {
+    const value = win.localStorage.getItem(THEME_KEY);
+    return value === "dark" || value === "light" ? value : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredTheme(win, value) {
+  try {
+    win.localStorage.setItem(THEME_KEY, value);
+  } catch {
+  }
+}
+function systemPrefersDark(win) {
+  try {
+    return win.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+  } catch {
+    return false;
+  }
+}
+function followsSystemTheme(doc) {
+  return readMetaContent(doc, { name: "bp:theme" }).toLowerCase() === "auto";
+}
+function themePrefersReducedMotion(win) {
+  try {
+    return win.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function setTheme(doc, theme) {
+  doc.documentElement.dataset.obviousTheme = theme;
+  for (const button of doc.querySelectorAll(".theme-toggle")) {
+    syncThemeSwitch(doc, button);
+  }
+}
+function setThemeAnimated(doc, win, theme) {
+  const apply = () => setTheme(doc, theme);
+  if (themePrefersReducedMotion(win) || typeof doc.startViewTransition !== "function") {
+    apply();
+    return;
+  }
+  const root = doc.documentElement;
+  let applied = false;
+  const clearSwitching = () => {
+    delete root.dataset.bpThemeSwitching;
+  };
+  const runUpdate = () => {
+    applied = true;
+    apply();
+  };
+  root.dataset.bpThemeSwitching = "";
+  try {
+    let transition;
+    try {
+      transition = doc.startViewTransition({ update: runUpdate, types: ["bp-theme"] });
+    } catch {
+      transition = doc.startViewTransition(runUpdate);
+    }
+    if (!applied) runUpdate();
+    transition?.ready?.catch(clearSwitching);
+    if (transition?.finished) {
+      transition.finished.finally(clearSwitching).catch(clearSwitching);
+    } else {
+      clearSwitching();
+    }
+  } catch {
+    clearSwitching();
+    apply();
+  }
+}
+function resolveInitialTheme(doc, win) {
+  const stored = readStoredTheme(win);
+  if (stored) {
+    setTheme(doc, stored);
+    return;
+  }
+  if (followsSystemTheme(doc)) {
+    setTheme(doc, systemPrefersDark(win) ? "dark" : "light");
+  }
+}
+function wireThemeToggle(doc, win) {
+  const root = doc.documentElement;
+  const toggleTheme = () => {
+    const next = root.dataset.obviousTheme === "dark" ? "light" : "dark";
+    setThemeAnimated(doc, win, next);
+    writeStoredTheme(win, next);
+  };
+  for (const button of doc.querySelectorAll(".theme-toggle")) {
+    if (button.dataset.bpThemeWired) continue;
+    button.dataset.bpThemeWired = "true";
+    syncThemeSwitch(doc, button);
+    button.addEventListener("click", toggleTheme);
+  }
+  const navTheme = doc.getElementById("themeToggle");
+  if (navTheme && !navTheme.dataset.bpThemeWired) {
+    navTheme.dataset.bpThemeWired = "true";
+    navTheme.addEventListener("click", toggleTheme);
+  }
+  if (followsSystemTheme(doc) && win.matchMedia) {
+    const query = win.matchMedia("(prefers-color-scheme: dark)");
+    query.addEventListener?.("change", (event) => {
+      if (readStoredTheme(win)) return;
+      setThemeAnimated(doc, win, event.matches ? "dark" : "light");
+    });
+  }
+}
+function wireSidebarCollapse(doc, win) {
+  const root = doc.documentElement;
+  const toggle = doc.querySelector(".sidebar-toggle");
+  if (!toggle || toggle.dataset.bpSidebarWired) return;
+  toggle.dataset.bpSidebarWired = "true";
+  const KEY = "bp-sidebar";
+  const read = () => {
+    try {
+      return win.localStorage.getItem(KEY);
+    } catch {
+      return null;
+    }
+  };
+  const write = (value) => {
+    try {
+      win.localStorage.setItem(KEY, value);
+    } catch {
+    }
+  };
+  const apply = (collapsed) => {
+    root.dataset.sidebar = collapsed ? "collapsed" : "open";
+    toggle.setAttribute("aria-expanded", String(!collapsed));
+    toggle.setAttribute(
+      "aria-label",
+      collapsed ? "Show contents sidebar" : "Hide contents sidebar"
+    );
+  };
+  apply(read() === "collapsed");
+  win.requestAnimationFrame(() => {
+    root.classList.add("bp-sidebar-animate");
+  });
+  toggle.addEventListener("click", () => {
+    const collapsed = root.dataset.sidebar !== "collapsed";
+    apply(collapsed);
+    write(collapsed ? "collapsed" : "open");
+  });
+}
+function wireSearchPalette(doc, win) {
+  const trigger = doc.querySelector(".sidebar-search__field");
+  if (!trigger || trigger.dataset.bpSearchWired) return;
+  trigger.dataset.bpSearchWired = "true";
+  const isMacLike = /Mac|iPhone|iPad/.test(win.navigator?.platform || "");
+  if (!isMacLike) {
+    const cmd = trigger.querySelector(".sidebar-search__hint kbd");
+    if (cmd) cmd.textContent = "Ctrl";
+    trigger.setAttribute("aria-label", "Search (Ctrl+K)");
+  }
+  let overlay = null;
+  let panel = null;
+  let input = null;
+  let results = null;
+  let actionDefs = [];
+  let entries = [];
+  let visible = [];
+  let selected = 0;
+  let returnFocus = null;
+  let prevOverflow = "";
+  const collectEntries = () => {
+    const list = doc.querySelector(".bp-sidebar .bp-sidebar__panel .bp-toc-switcher > ul") ?? doc.querySelector(".bp-sidebar .bp-sidebar__panel > ul") ?? doc.querySelector(".bp-toc > ul");
+    if (!list) return [];
+    const out = [];
+    let group = "";
+    for (const li of list.children) {
+      if (li.classList.contains("bp-nav-group")) {
+        group = (li.textContent || "").trim();
+        continue;
+      }
+      const link = li.querySelector(':scope > a[href^="#"]');
+      if (!link) continue;
+      const title = (link.textContent || "").trim();
+      out.push({ href: link.getAttribute("href") || "", title, crumb: group });
+      for (const sub of li.querySelectorAll(':scope > ul > li > a[href^="#"]')) {
+        out.push({
+          href: sub.getAttribute("href") || "",
+          title: (sub.textContent || "").trim(),
+          crumb: [group, title].filter(Boolean).join(" › ")
+        });
+      }
+    }
+    return out;
+  };
+  const modGlyph = isMacLike ? "⌘" : "⌃";
+  const matchesShortcut = (event, key) => {
+    const mod = isMacLike ? event.metaKey : event.ctrlKey;
+    if (!mod || !event.shiftKey) return false;
+    return event.key.toLowerCase() === key.toLowerCase();
+  };
+  const buildActionDefs = () => {
+    const defs = [];
+    if (doc.querySelector(".theme-toggle")) {
+      defs.push({
+        label: "Toggle theme",
+        icon: THEME_MOON_ICON,
+        chip: `${modGlyph}⇧L`,
+        shortcut: "l",
+        run: () => doc.querySelector(".theme-toggle")?.click()
+      });
+    }
+    if (doc.querySelector(".sidebar-toggle")) {
+      defs.push({
+        label: "Toggle sidebar",
+        icon: SIDEBAR_COLLAPSE_ICON,
+        chip: `${modGlyph}⇧B`,
+        shortcut: "b",
+        run: () => doc.querySelector(".sidebar-toggle")?.click()
+      });
+    }
+    return defs;
+  };
+  const buildAction = (def) => {
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.className = "docs-search__action bp-transition-colors bp-ease";
+    const icon = createChromeSvg(doc, def.icon, 16);
+    icon.classList.add("docs-search__action-icon");
+    const label2 = doc.createElement("span");
+    label2.className = "docs-search__action-label";
+    label2.textContent = def.label;
+    button.append(icon, label2);
+    if (def.chip) {
+      const chip = doc.createElement("kbd");
+      chip.className = "docs-search__chip";
+      for (const glyph of Array.from(def.chip)) {
+        const key = doc.createElement("span");
+        key.textContent = glyph;
+        chip.append(key);
+      }
+      button.append(chip);
+    }
+    button.addEventListener("click", () => def.run(button));
+    def.button = button;
+    return button;
+  };
+  const highlight = (text, q) => {
+    if (!q) return [doc.createTextNode(text)];
+    const idx = text.toLowerCase().indexOf(q);
+    if (idx < 0) return [doc.createTextNode(text)];
+    const mark = doc.createElement("mark");
+    mark.textContent = text.slice(idx, idx + q.length);
+    return [
+      doc.createTextNode(text.slice(0, idx)),
+      mark,
+      doc.createTextNode(text.slice(idx + q.length))
+    ];
+  };
+  const buildRow = (entry, index, q) => {
+    const row = doc.createElement("a");
+    row.className = "docs-search__row";
+    row.id = `docs-search-row-${index}`;
+    row.setAttribute("role", "option");
+    row.href = entry.href;
+    row.dataset.index = String(index);
+    row.addEventListener("click", () => close());
+    row.addEventListener("mousemove", () => {
+      if (selected !== index) {
+        selected = index;
+        applySelection();
+      }
+    });
+    const mainCol = doc.createElement("span");
+    mainCol.className = "docs-search__row-main";
+    const iconBox = doc.createElement("span");
+    iconBox.className = "docs-search__icon-box";
+    iconBox.setAttribute("aria-hidden", "true");
+    iconBox.textContent = "#";
+    mainCol.append(iconBox);
+    if (entry.crumb) {
+      const crumb = doc.createElement("span");
+      crumb.className = "docs-search__crumb";
+      crumb.textContent = entry.crumb;
+      mainCol.append(crumb);
+    }
+    const title = doc.createElement("span");
+    title.className = "docs-search__title";
+    title.append(...highlight(entry.title, q));
+    mainCol.append(title);
+    const enter = doc.createElement("kbd");
+    enter.className = "docs-search__enter";
+    enter.textContent = "↵";
+    row.append(mainCol, enter);
+    return row;
+  };
+  const buildEmpty = () => {
+    const wrap = doc.createElement("div");
+    wrap.className = "docs-search__empty";
+    const center = doc.createElement("div");
+    center.className = "docs-search__empty-center";
+    const copy = doc.createElement("div");
+    copy.className = "docs-search__empty-copy";
+    const title = doc.createElement("p");
+    title.className = "docs-search__empty-title";
+    title.textContent = "No results found";
+    const note = doc.createElement("p");
+    note.className = "docs-search__empty-note";
+    note.textContent = "Try searching with different keywords";
+    copy.append(title, note);
+    center.append(copy);
+    wrap.append(center);
+    return wrap;
+  };
+  const applySelection = () => {
+    const rows = results.querySelectorAll('.docs-search__row[role="option"]');
+    let activeId = "";
+    rows.forEach((row, index) => {
+      const isSel = index === selected;
+      row.setAttribute("aria-selected", String(isSel));
+      if (isSel) {
+        activeId = row.id;
+        row.scrollIntoView({ block: "nearest" });
+      }
+    });
+    if (activeId) input.setAttribute("aria-activedescendant", activeId);
+    else input.removeAttribute("aria-activedescendant");
+  };
+  const move = (delta) => {
+    if (!visible.length) return;
+    selected = (selected + delta + visible.length) % visible.length;
+    applySelection();
+  };
+  const render = (query) => {
+    const q = (query || "").trim().toLowerCase();
+    visible = q ? entries.filter((entry) => entry.title.toLowerCase().includes(q)) : entries;
+    selected = 0;
+    results.replaceChildren();
+    if (visible.length === 0) {
+      results.append(buildEmpty());
+      input.removeAttribute("aria-activedescendant");
+      return;
+    }
+    const group = doc.createElement("div");
+    group.className = "docs-search__group";
+    group.append(doc.createTextNode(q ? "Results" : "On this page"));
+    const count = doc.createElement("span");
+    count.className = "docs-search__group-count";
+    count.textContent = String(visible.length);
+    group.append(count);
+    results.append(group);
+    visible.forEach((entry, index) => results.append(buildRow(entry, index, q)));
+    applySelection();
+  };
+  const onKeydown = (event) => {
+    const action = actionDefs.find((def) => matchesShortcut(event, def.shortcut));
+    if (action) {
+      event.preventDefault();
+      action.run(action.button);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "Enter") {
+      if (event.target?.closest?.(".docs-search__action")) return;
+      const row = results.querySelector(
+        `.docs-search__row[data-index="${selected}"]`
+      );
+      if (row) {
+        event.preventDefault();
+        row.click();
+      }
+    } else if (event.key === "Tab") {
+      const focusable = panel.querySelectorAll(
+        'a[href], button, input, [tabindex]:not([tabindex="-1"])'
+      );
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (first && last && (event.shiftKey ? doc.activeElement === first : doc.activeElement === last)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      }
+    }
+  };
+  const build = () => {
+    overlay = doc.createElement("div");
+    overlay.className = "docs-search-overlay";
+    overlay.addEventListener("click", (event) => {
+      if (event.target === overlay) close();
+    });
+    panel = doc.createElement("div");
+    panel.className = "docs-search";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
+    panel.setAttribute("aria-label", "Search");
+    const field = doc.createElement("div");
+    field.className = "docs-search__field";
+    const icon = createChromeSvg(doc, SEARCH_ICON, 16);
+    icon.classList.add("docs-search__icon");
+    input = doc.createElement("input");
+    input.className = "docs-search__input";
+    input.type = "search";
+    input.placeholder = "Search the blueprint…";
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-controls", "docs-search-listbox");
+    input.setAttribute("aria-expanded", "false");
+    input.setAttribute("aria-label", "Search the blueprint");
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    const esc = doc.createElement("span");
+    esc.className = "docs-search__esc";
+    esc.textContent = "esc";
+    field.append(icon, input, esc);
+    results = doc.createElement("div");
+    results.className = "docs-search__results";
+    results.id = "docs-search-listbox";
+    results.setAttribute("role", "listbox");
+    results.setAttribute("aria-label", "Search results");
+    const foot = doc.createElement("div");
+    foot.className = "docs-search__foot";
+    const actions = doc.createElement("div");
+    actions.className = "docs-search__actions";
+    actionDefs = buildActionDefs();
+    for (const def of actionDefs) actions.append(buildAction(def));
+    foot.append(actions);
+    panel.append(field, results, foot);
+    overlay.append(panel);
+    (doc.body || doc.documentElement).append(overlay);
+    input.addEventListener("input", () => render(input.value));
+  };
+  const open = () => {
+    if (!overlay) build();
+    if (overlay.classList.contains("is-open")) return;
+    entries = collectEntries();
+    returnFocus = doc.activeElement;
+    prevOverflow = doc.documentElement.style.overflow;
+    doc.documentElement.style.overflow = "hidden";
+    input.value = "";
+    render("");
+    overlay.classList.add("is-open");
+    input.setAttribute("aria-expanded", "true");
+    doc.addEventListener("keydown", onKeydown);
+    input.focus({ preventScroll: true });
+    win.requestAnimationFrame(() => input.focus({ preventScroll: true }));
+  };
+  function close() {
+    if (!overlay || !overlay.classList.contains("is-open")) return;
+    overlay.classList.remove("is-open");
+    input.setAttribute("aria-expanded", "false");
+    input.removeAttribute("aria-activedescendant");
+    doc.documentElement.style.overflow = prevOverflow ?? "";
+    doc.removeEventListener("keydown", onKeydown);
+    if (returnFocus && typeof returnFocus.focus === "function") returnFocus.focus();
+  }
+  trigger.addEventListener("click", open);
+  doc.addEventListener("keydown", (event) => {
+    if ((event.metaKey || event.ctrlKey) && (event.key === "k" || event.key === "K")) {
+      event.preventDefault();
+      if (overlay && overlay.classList.contains("is-open")) close();
+      else open();
+    }
+  });
+}
+function injectDocumentChrome(doc, win = doc.defaultView, navigationTree = []) {
+  if (doc.body?.dataset.bpChromeReady === "true") return;
+  const main = doc.querySelector("main");
+  if (!main) return;
+  const hasNavigation = navigationTree.length > 0;
+  const sidebar = hasNavigation ? injectSidebar(doc, win) : null;
+  const chrome = [
+    injectSiteNav(doc, win),
+    hasNavigation ? injectScrollProgress(doc) : null,
+    sidebar ? injectSidebarToggle(doc) : null,
+    sidebar
+  ].filter(Boolean);
+  if (chrome.length > 0) {
+    main.before(...chrome);
+  }
+  if (sidebar) {
+    doc.documentElement.dataset.bpDocument = "";
+  }
+  wireThemeToggle(doc, win);
+  wireSidebarCollapse(doc, win);
+  doc.body.dataset.bpChromeReady = "true";
+}
+var CITE_PANE_CLOSE_ICON = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
+function buildCitePane(doc) {
+  const port = doc.createElement("div");
+  port.className = "bp-cite-pane-port";
+  const pane = doc.createElement("div");
+  pane.className = "bp-cite-pane";
+  pane.setAttribute("role", "complementary");
+  pane.setAttribute("aria-label", "Cited source");
+  pane.tabIndex = -1;
+  const head = doc.createElement("div");
+  head.className = "bp-cite-pane__head";
+  const heading = doc.createElement("div");
+  heading.className = "bp-cite-pane__heading";
+  const eyebrow = doc.createElement("span");
+  eyebrow.className = "bp-cite-pane__eyebrow";
+  const loc = doc.createElement("button");
+  loc.type = "button";
+  loc.className = "bp-cite-pane__loc";
+  heading.append(eyebrow, loc);
+  const close = doc.createElement("button");
+  close.type = "button";
+  close.className = "bp-cite-pane__close";
+  close.setAttribute("aria-label", "Close cited source");
+  close.append(createChromeSvg(doc, CITE_PANE_CLOSE_ICON));
+  head.append(heading, close);
+  const body = doc.createElement("div");
+  body.className = "bp-cite-pane__body";
+  const swap = doc.createElement("div");
+  swap.className = "bp-cite-pane__swap";
+  const source = doc.createElement("div");
+  source.className = "bp-cite-pane__source";
+  swap.append(source);
+  body.append(swap);
+  pane.append(head, body);
+  port.append(pane);
+  doc.body.append(port);
+  return { port, pane, eyebrow, loc, source, swap, close };
+}
+function wireCitePane(doc, win) {
+  const root = doc.documentElement;
+  root.dataset.bpCitePane = "";
+  let ui = null;
+  let lastTrigger = null;
+  let citeEl = null;
+  const reduced = () => themePrefersReducedMotion(win);
+  const resolveScroller = () => {
+    const main = doc.querySelector("main");
+    return main && root.dataset.bpDocument !== void 0 && win.getComputedStyle(main).position === "fixed" ? main : null;
+  };
+  const scrollBy = (scroller, dy) => {
+    if (!dy) return;
+    if (scroller) scroller.scrollTop += dy;
+    else win.scrollBy(0, dy);
+  };
+  const pinCitation = (anchor) => {
+    if (!anchor || !doc.contains(anchor)) return;
+    const scroller = resolveScroller();
+    const anchorTop = anchor.getBoundingClientRect().top;
+    const durationMs = reduced() ? 0 : (parseFloat(
+      win.getComputedStyle(root).getPropertyValue("--bp-duration-slow")
+    ) || 300) + 60;
+    const start = win.performance.now();
+    const keep = () => {
+      scrollBy(scroller, anchor.getBoundingClientRect().top - anchorTop);
+      if (win.performance.now() - start < durationMs) {
+        win.requestAnimationFrame(keep);
+      }
+    };
+    win.requestAnimationFrame(keep);
+  };
+  const ensure = () => {
+    if (ui) return ui;
+    ui = buildCitePane(doc);
+    ui.close.addEventListener("click", () => closePane());
+    ui.loc.addEventListener("click", () => {
+      if (citeEl && doc.contains(citeEl)) {
+        citeEl.scrollIntoView({
+          behavior: reduced() ? "auto" : "smooth",
+          block: "center"
+        });
+      }
+    });
+    return ui;
+  };
+  const paint = (detail) => {
+    ui.eyebrow.textContent = detail.language || "Cited source";
+    ui.loc.textContent = detail.loc || "";
+    ui.loc.hidden = !detail.loc;
+    ui.source.replaceChildren();
+    if (detail.source instanceof Node) {
+      const node = detail.source.cloneNode(true);
+      node.removeAttribute?.("tabindex");
+      ui.source.append(node);
+    } else {
+      const pre = doc.createElement("pre");
+      const code = doc.createElement("code");
+      code.textContent = detail.code || "";
+      pre.append(code);
+      ui.source.append(pre);
+    }
+  };
+  const openPane = (detail, trigger, el2) => {
+    ensure();
+    const wasOpen = ui.pane.classList.contains("is-open");
+    if (lastTrigger && lastTrigger !== trigger) {
+      lastTrigger.setAttribute("aria-expanded", "false");
+    }
+    if (trigger) lastTrigger = trigger;
+    citeEl = el2 || null;
+    if (wasOpen && !reduced()) {
+      ui.swap.classList.add("is-leaving");
+      const swapMs = (parseFloat(
+        win.getComputedStyle(root).getPropertyValue("--bp-duration-normal")
+      ) || 200) * 0.9;
+      win.setTimeout(() => {
+        paint(detail);
+        win.requestAnimationFrame(() => ui.swap.classList.remove("is-leaving"));
+      }, swapMs);
+    } else {
+      paint(detail);
+    }
+    ui.pane.classList.add("is-open");
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+    if (!wasOpen) {
+      pinCitation(citeEl || trigger);
+      win.requestAnimationFrame(() => ui.pane.focus({ preventScroll: true }));
+    }
+  };
+  const closePane = () => {
+    if (!ui || !ui.pane.classList.contains("is-open")) return;
+    ui.pane.classList.remove("is-open");
+    const trigger = lastTrigger;
+    const anchor = citeEl || trigger;
+    lastTrigger = null;
+    citeEl = null;
+    pinCitation(anchor);
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false");
+      if (doc.contains(trigger)) trigger.focus({ preventScroll: true });
+    }
+  };
+  doc.addEventListener("bp-cite-open", (event) => {
+    const detail = event.detail || {};
+    const el2 = event.target;
+    const trigger = el2 && el2.querySelector && el2.querySelector(".bp-cite-trigger") || el2;
+    openPane(detail, trigger, el2);
+  });
+  doc.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && ui && ui.pane.classList.contains("is-open")) {
+      event.stopPropagation();
+      closePane();
+    }
+  });
+}
+registerBlueprintChoiceElements();
+function initializeBlueprintRuntime(doc = document, win = window) {
+  const root = doc.documentElement;
+  if (root.dataset.blueprintRuntime === "ready") return;
+  root.dataset.blueprintRuntime = "ready";
+  resolveInitialTheme(doc, win);
+  const navigationTree = ensureDocumentNavTree(doc);
+  injectDocumentChrome(doc, win, navigationTree);
+  generateNavigationFromHeadings(doc, navigationTree);
+  wireSectionHeadingLinks(doc, win);
+  wireSearchPalette(doc, win);
+  wireCitePane(doc, win);
+  wireFigureDiagramSize(doc);
+  const main = doc.querySelector("main");
+  const resolveScroller = () => main && root.dataset.bpDocument !== void 0 && win.getComputedStyle(main).position === "fixed" ? main : null;
+  let shellScroller = resolveScroller();
+  const scrollTop = () => shellScroller ? shellScroller.scrollTop : win.scrollY;
+  const scrollHeight = () => shellScroller ? shellScroller.scrollHeight : root.scrollHeight;
+  const clientHeight = () => shellScroller ? shellScroller.clientHeight : win.innerHeight;
+  const progress = doc.querySelector(".scroll-progress");
+  const isPrimaryNavLink = (link) => {
+    const listItem = link.closest("li");
+    const list = listItem?.parentElement;
+    if (!list || !listItem) return true;
+    const container = link.closest(".bp-sidebar, .bp-toc, .sidebar");
+    if (!container) return true;
+    const topList = container.querySelector(":scope > .bp-sidebar__panel .bp-toc-switcher > ul") ?? container.querySelector(":scope > .bp-sidebar__panel > ul") ?? container.querySelector(":scope > ul");
+    return list === topList;
+  };
+  const entries = [...doc.querySelectorAll('.bp-sidebar a[href^="#"], .bp-toc a[href^="#"], .sidebar a[href^="#"]')].filter(isPrimaryNavLink).map((link) => ({
+    link,
+    section: doc.getElementById(decodeURIComponent(link.hash.slice(1)))
+  })).filter(({ section }) => section);
+  const sections = [...new Set(entries.map(({ section }) => section))].sort(
+    (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  );
+  let scheduled = false;
+  let scrollingTo = null;
+  const tocSwitchers = [...doc.querySelectorAll(".bp-toc-switcher")];
+  const tocSwitcherTitles = [...doc.querySelectorAll(".bp-toc-switcher__title")];
+  const railColumnQuery = win.matchMedia("(min-width: 861px)");
+  const syncTocSwitcherOpen = () => {
+    for (const sw of tocSwitchers) sw.open = railColumnQuery.matches;
+  };
+  syncTocSwitcherOpen();
+  railColumnQuery.addEventListener("change", syncTocSwitcherOpen);
+  const placeMarker = (link) => {
+    const container = link.closest(".bp-sidebar, .bp-toc, .sidebar");
+    const list = container?.querySelector(":scope > ul") ?? container?.querySelector("ul");
+    if (!list) return;
+    list.style.setProperty("--bp-toc-y", `${link.offsetTop}px`);
+    list.style.setProperty("--bp-toc-h", `${link.offsetHeight}px`);
+  };
+  const revealInRail = (link) => {
+    const panel = link.closest(".bp-sidebar__panel");
+    if (!panel || panel.scrollHeight <= panel.clientHeight) return;
+    const style = win.getComputedStyle(panel);
+    const padTop = Number.parseFloat(style.scrollPaddingTop) || 0;
+    const padBottom = Number.parseFloat(style.scrollPaddingBottom) || 0;
+    const panelRect = panel.getBoundingClientRect();
+    const linkRect = link.getBoundingClientRect();
+    const safeTop = panelRect.top + padTop;
+    const safeBottom = panelRect.bottom - padBottom;
+    let delta = 0;
+    if (linkRect.top < safeTop) delta = linkRect.top - safeTop;
+    else if (linkRect.bottom > safeBottom) delta = linkRect.bottom - safeBottom;
+    if (delta === 0) return;
+    panel.scrollBy({
+      top: delta,
+      behavior: prefersReducedMotion() ? "auto" : "smooth"
+    });
+  };
+  let lastCurrent = null;
+  const setCurrent = (section) => {
+    const changed = section !== lastCurrent;
+    let activeLabel = "";
+    for (const item of entries) {
+      if (section && item.section === section) {
+        item.link.setAttribute("aria-current", "location");
+        placeMarker(item.link);
+        if (changed) revealInRail(item.link);
+        if (!activeLabel) activeLabel = item.link.textContent.trim();
+      } else {
+        item.link.removeAttribute("aria-current");
+      }
+    }
+    lastCurrent = section;
+    if (changed) {
+      const summaryLabel = activeLabel || "Contents";
+      for (const title of tocSwitcherTitles) title.textContent = summaryLabel;
+    }
+  };
+  const mobileHead = doc.querySelector(".sidebar-mobile-head");
+  const contentsRail = doc.querySelector("#bp-contents-rail");
+  const syncHeadDivider = () => {
+    if (!mobileHead || !contentsRail) return;
+    if (win.getComputedStyle(mobileHead).position !== "fixed") {
+      mobileHead.removeAttribute("data-bp-head-stuck");
+      return;
+    }
+    const stuck = contentsRail.getBoundingClientRect().bottom <= mobileHead.getBoundingClientRect().bottom + 0.5;
+    mobileHead.toggleAttribute("data-bp-head-stuck", stuck);
+  };
+  const update = () => {
+    scheduled = false;
+    syncHeadDivider();
+    if (progress) {
+      const max = scrollHeight() - clientHeight();
+      progress.style.transform = `scaleX(${max > 0 ? scrollTop() / max : 0})`;
+    }
+    if (sections.length === 0) return;
+    const threshold = win.innerHeight * 0.35;
+    if (scrollingTo) {
+      const rect = scrollingTo.getBoundingClientRect();
+      const top = rect.top;
+      const visible = rect.bottom > 0 && top < win.innerHeight;
+      if (top <= threshold && top >= -8) {
+        scrollingTo = null;
+      } else if (visible) {
+        setCurrent(scrollingTo);
+        return;
+      } else {
+        scrollingTo = null;
+      }
+    }
+    if (scrollTop() + clientHeight() >= scrollHeight() - 2) {
+      setCurrent(sections.at(-1));
+      return;
+    }
+    setCurrent(
+      sections.reduce(
+        (current, section) => section.getBoundingClientRect().top <= threshold ? section : current,
+        sections[0]
+      )
+    );
+  };
+  const scheduleUpdate = () => {
+    if (scheduled) return;
+    scheduled = true;
+    win.requestAnimationFrame(update);
+  };
+  const prefersReducedMotion = () => themePrefersReducedMotion(win);
+  const updateFromHash = () => {
+    const match = entries.find(({ link }) => link.hash === win.location.hash);
+    if (match) {
+      scrollingTo = match.section;
+      setCurrent(match.section);
+      const top = match.section.getBoundingClientRect().top;
+      const threshold = win.innerHeight * 0.35;
+      if (top > threshold || top < -8) {
+        match.section.scrollIntoView({ block: "start" });
+      }
+      scheduleUpdate();
+      return;
+    }
+    scrollingTo = null;
+    scheduleUpdate();
+  };
+  const navLinkSelector = '.bp-sidebar a[href^="#"], .bp-toc a[href^="#"], .sidebar a[href^="#"], .bp-contents a[href^="#"]';
+  const scrollToSection = (section) => {
+    scrollingTo = section;
+    section.scrollIntoView({
+      behavior: prefersReducedMotion() ? "auto" : "smooth",
+      block: "start"
+    });
+    const finish = () => {
+      if (scrollingTo === section) scrollingTo = null;
+    };
+    if ("onscrollend" in win) {
+      const scrollTarget = shellScroller ?? win;
+      scrollTarget.addEventListener("scrollend", finish, { once: true });
+    } else {
+      win.setTimeout(finish, prefersReducedMotion() ? 0 : 800);
+    }
+    scheduleUpdate();
+  };
+  doc.addEventListener("click", (event) => {
+    const link = event.target.closest?.(navLinkSelector);
+    if (!link?.hash) return;
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    const section = doc.getElementById(decodeURIComponent(link.hash.slice(1)));
+    if (!section) return;
+    event.preventDefault();
+    if (win.location.hash !== link.hash) win.history.pushState(null, "", link.hash);
+    if (entries.some(({ section: target }) => target === section)) setCurrent(section);
+    if (!railColumnQuery.matches) {
+      for (const sw of tocSwitchers) sw.open = false;
+    }
+    scrollToSection(section);
+  });
+  let scrollSource = shellScroller ?? win;
+  scrollSource.addEventListener("scroll", scheduleUpdate, { passive: true });
+  const syncScrollSource = () => {
+    shellScroller = resolveScroller();
+    const nextSource = shellScroller ?? win;
+    if (nextSource !== scrollSource) {
+      scrollSource.removeEventListener("scroll", scheduleUpdate, { passive: true });
+      nextSource.addEventListener("scroll", scheduleUpdate, { passive: true });
+      scrollSource = nextSource;
+    }
+  };
+  win.addEventListener("hashchange", updateFromHash);
+  win.addEventListener("popstate", updateFromHash);
+  win.addEventListener("resize", () => {
+    syncScrollSource();
+    scheduleUpdate();
+  }, { passive: true });
+  updateFromHash();
+}
+var HEADING_LINK_ICON = [
+  "M14 11.9976C14 9.5059 11.683 7 8.85714 7C8.52241 7 7.41904 7.00001 7.14286 7.00001C4.30254 7.00001 2 9.23752 2 11.9976C2 14.376 3.70973 16.3664 6 16.8714C6.36756 16.9525 6.75006 16.9952 7.14286 16.9952",
+  "M10 11.9976C10 14.4893 12.317 16.9952 15.1429 16.9952C15.4776 16.9952 16.581 16.9952 16.8571 16.9952C19.6975 16.9952 22 14.7577 22 11.9976C22 9.6192 20.2903 7.62884 18 7.12383C17.6324 7.04278 17.2499 6.99999 16.8571 6.99999"
+];
+var HEADING_COPY_ICON = [
+  "M19.4 20H9.6C9.26863 20 9 19.7314 9 19.4V9.6C9 9.26863 9.26863 9 9.6 9H19.4C19.7314 9 20 9.26863 20 9.6V19.4C20 19.7314 19.7314 20 19.4 20Z",
+  "M15 9V4.6C15 4.26863 14.7314 4 14.4 4H4.6C4.26863 4 4 4.26863 4 4.6V14.4C4 14.7314 4.26863 15 4.6 15H9"
+];
+var HEADING_CHECK_ICON = "M5 13L9 17L19 7";
+var headingLinkTimers = /* @__PURE__ */ new WeakMap();
+function createHeadingPixelIcon(doc, name, pathD) {
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "16");
+  svg.setAttribute("height", "16");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.classList.add("bp-heading-link__icon", `bp-heading-link__icon--${name}`);
+  for (const d of Array.isArray(pathD) ? pathD : [pathD]) {
+    const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+  }
+  return svg;
+}
+function createHeadingLinkButton(doc, label2) {
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "bp-heading-link";
+  button.setAttribute("aria-label", `Copy link to ${label2}`);
+  const icons = doc.createElement("span");
+  icons.className = "bp-heading-link__icons";
+  icons.append(
+    createHeadingPixelIcon(doc, "link", HEADING_LINK_ICON),
+    createHeadingPixelIcon(doc, "copy", HEADING_COPY_ICON),
+    createHeadingPixelIcon(doc, "check", HEADING_CHECK_ICON)
+  );
+  button.append(icons);
+  return button;
+}
+async function copySectionUrl(url) {
+  if (!globalThis.isSecureContext || !navigator.clipboard?.writeText) {
+    throw new Error("The Clipboard API requires a secure context");
+  }
+  await navigator.clipboard.writeText(url);
+}
+function showHeadingLinkState(button, state, label2) {
+  const previousTimer = headingLinkTimers.get(button);
+  if (previousTimer) clearTimeout(previousTimer);
+  const heading = button.closest("h1, h2, h3, h4, h5, h6");
+  if (state === "idle") {
+    delete button.dataset.bpCopyState;
+    button.setAttribute("aria-label", `Copy link to ${label2}`);
+    headingLinkTimers.delete(button);
+    if (heading && !heading.matches(":hover") && !heading.matches(":focus-within")) {
+      delete heading.dataset.headingLink;
+    }
+    return;
+  }
+  button.dataset.bpCopyState = state;
+  button.setAttribute(
+    "aria-label",
+    state === "copied" ? "Link copied" : "Copy failed"
+  );
+  if (heading) heading.dataset.headingLink = "visible";
+  headingLinkTimers.set(
+    button,
+    setTimeout(() => showHeadingLinkState(button, "idle", label2), 1800)
+  );
+}
+function wireFigureDiagramSize(doc) {
+  for (const svg of doc.querySelectorAll("figure svg[viewBox]")) {
+    const { width } = svg.viewBox.baseVal;
+    if (width > 0) svg.style.setProperty("--bp-diagram-w", `${width}px`);
+  }
+}
+var SIDEBAR_HEADING_SELECTOR = "h2[data-sidebar], h3[data-sidebar], h4[data-sidebar], h5[data-sidebar], h6[data-sidebar]";
+var NAV_CONTENT_ROOT = "main, [data-bp-nav-root]";
+function slugifyHeadingId(value) {
+  return value.trim().toLowerCase().replace(/['']/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function isSectionLeadHeading(heading) {
+  const section = heading.closest("section");
+  if (!section) return false;
+  return heading === section.querySelector(":scope > h2:first-child") || heading === section.querySelector(":scope > hgroup:first-child > h2");
+}
+function ensureUniqueHeadingId(doc, base, heading) {
+  let candidate = base || "section";
+  let suffix = 2;
+  while (doc.getElementById(candidate) && doc.getElementById(candidate) !== heading) {
+    candidate = `${base}-${suffix}`;
+    suffix += 1;
+  }
+  return candidate;
+}
+function resolveHeadingId(doc, heading) {
+  if (heading.id) return heading.id;
+  const section = heading.closest("section[id]");
+  if (section && isSectionLeadHeading(heading)) {
+    return section.id;
+  }
+  const base = slugifyHeadingId(
+    heading.getAttribute("data-sidebar") || heading.textContent || "section"
+  );
+  heading.id = ensureUniqueHeadingId(doc, base, heading);
+  return heading.id;
+}
+function getSidebarLabel(heading) {
+  return heading.getAttribute("data-sidebar")?.trim() || heading.textContent.trim();
+}
+function findNavMasthead(root) {
+  return root.querySelector(":scope > header");
+}
+function getGroupLabel(header) {
+  const explicit = header.getAttribute("data-sidebar")?.trim();
+  if (explicit) return explicit;
+  const heading = header.querySelector("h1, h2, h3, h4, h5, h6");
+  if (heading?.textContent.trim()) return heading.textContent.trim();
+  const eyebrow = header.querySelector("bp-eyebrow");
+  if (eyebrow?.textContent.trim()) return eyebrow.textContent.trim();
+  return header.textContent.trim() || "Section";
+}
+function resolveGroupId(doc, header) {
+  if (header.id) return header.id;
+  const base = slugifyHeadingId(getGroupLabel(header));
+  header.id = ensureUniqueHeadingId(doc, base, header);
+  return header.id;
+}
+function collectNavNodes(doc) {
+  const root = doc.querySelector(NAV_CONTENT_ROOT) ?? doc.body;
+  const masthead = findNavMasthead(root);
+  const selector = `:scope > header, ${SIDEBAR_HEADING_SELECTOR}`;
+  return [...root.querySelectorAll(selector)].filter((node) => node !== masthead);
+}
+function buildSidebarTree(nodes, doc) {
+  const tree = [];
+  let currentGroup = null;
+  let currentPrimary = null;
+  for (const node of nodes) {
+    if (node.tagName === "HEADER") {
+      currentGroup = {
+        type: "group",
+        label: getGroupLabel(node),
+        id: resolveGroupId(doc, node),
+        children: []
+      };
+      currentPrimary = null;
+      tree.push(currentGroup);
+      continue;
+    }
+    const level = Number(node.tagName.slice(1));
+    const item = {
+      type: "section",
+      heading: node,
+      label: getSidebarLabel(node),
+      id: node.id || resolveHeadingId(doc, node),
+      children: []
+    };
+    if (level === 2) {
+      currentPrimary = item;
+      (currentGroup ? currentGroup.children : tree).push(item);
+      continue;
+    }
+    if (currentPrimary) {
+      currentPrimary.children.push(item);
+      continue;
+    }
+    ;
+    (currentGroup ? currentGroup.children : tree).push(item);
+  }
+  return tree;
+}
+function createNavLink(doc, { id, label: label2 }) {
+  const link = doc.createElement("a");
+  link.href = `#${id}`;
+  link.textContent = label2;
+  return link;
+}
+function createNavGroupRow(doc, group, labelClass) {
+  const li = doc.createElement("li");
+  li.className = "bp-nav-group";
+  const label2 = doc.createElement("span");
+  label2.className = labelClass;
+  label2.textContent = group.label;
+  li.append(label2);
+  return li;
+}
+function renderNavTree(doc, tree) {
+  const fragment = doc.createDocumentFragment();
+  const appendSection = (section) => {
+    const li = doc.createElement("li");
+    li.append(createNavLink(doc, section));
+    if (section.children?.length > 0) {
+      const subList = doc.createElement("ul");
+      for (const child of section.children) {
+        const subItem = doc.createElement("li");
+        subItem.append(createNavLink(doc, child));
+        subList.append(subItem);
+      }
+      li.append(subList);
+    }
+    fragment.append(li);
+  };
+  for (const item of tree) {
+    if (item.type === "group") {
+      fragment.append(createNavGroupRow(doc, item, "bp-nav-group__label"));
+      item.children.forEach(appendSection);
+      continue;
+    }
+    appendSection(item);
+  }
+  return fragment;
+}
+function renderContentsTree(doc, tree) {
+  const fragment = doc.createDocumentFragment();
+  const appendSection = (section) => {
+    const li = doc.createElement("li");
+    li.append(createNavLink(doc, section));
+    fragment.append(li);
+  };
+  for (const item of tree) {
+    if (item.type === "group") {
+      const li = createNavGroupRow(doc, item, "bp-contents-group__label");
+      li.className = "bp-contents-group";
+      fragment.append(li);
+      item.children.forEach(appendSection);
+      continue;
+    }
+    appendSection(item);
+  }
+  return fragment;
+}
+function findSidebarNavLists(doc) {
+  const lists = [];
+  for (const nav of doc.querySelectorAll(".bp-sidebar:not([data-bp-nav-manual])")) {
+    const list = nav.querySelector(":scope > .bp-sidebar__panel .bp-toc-switcher > ul") ?? nav.querySelector(":scope > .bp-sidebar__panel > ul") ?? nav.querySelector(":scope > ul");
+    if (list) lists.push(list);
+  }
+  for (const nav of doc.querySelectorAll(".bp-toc:not([data-bp-nav-manual])")) {
+    const list = nav.querySelector(":scope > ul");
+    if (list) lists.push(list);
+  }
+  return lists;
+}
+function ensureDocumentNavTree(doc) {
+  const nodes = collectNavNodes(doc);
+  if (nodes.length === 0) return [];
+  for (const node of nodes) {
+    if (node.tagName === "HEADER") resolveGroupId(doc, node);
+    else resolveHeadingId(doc, node);
+  }
+  return buildSidebarTree(nodes, doc);
+}
+function populateBpTocElement(element, doc, tree) {
+  if (element.dataset.bpTocReady === "true") return;
+  if (!tree?.length) return;
+  element.dataset.bpTocReady = "true";
+  const label2 = element.getAttribute("label")?.trim() || element.textContent.trim() || "Contents";
+  const ariaLabel = element.getAttribute("aria-label")?.trim() || label2;
+  const nav = doc.createElement("nav");
+  nav.className = "bp-contents";
+  nav.setAttribute("aria-label", ariaLabel);
+  const eyebrow = doc.createElement("p");
+  eyebrow.className = "bp-eyebrow";
+  eyebrow.textContent = label2;
+  const list = doc.createElement("ol");
+  list.append(renderContentsTree(doc, tree));
+  nav.append(eyebrow, list);
+  element.replaceChildren(nav);
+}
+function populateAllBpToc(doc, tree) {
+  for (const element of doc.querySelectorAll("bp-toc")) {
+    populateBpTocElement(element, doc, tree);
+  }
+}
+function generateNavigationFromHeadings(doc, tree = ensureDocumentNavTree(doc)) {
+  if (tree.length === 0) return;
+  const navFragment = renderNavTree(doc, tree);
+  for (const list of findSidebarNavLists(doc)) {
+    list.replaceChildren(navFragment.cloneNode(true));
+  }
+  populateAllBpToc(doc, tree);
+}
+function formatHeadingEyebrow(number) {
+  return String(number).padStart(2, "0");
+}
+function wireSectionHeadingLinks(doc, win = doc.defaultView) {
+  const root = doc.querySelector(NAV_CONTENT_ROOT) ?? doc.body;
+  let primaryNumber = 0;
+  for (const heading of root.querySelectorAll(SIDEBAR_HEADING_SELECTOR)) {
+    if (heading.querySelector(":scope > .bp-heading-row")) continue;
+    const level = Number(heading.tagName.slice(1));
+    const label2 = getSidebarLabel(heading);
+    const titleNodes = [...heading.childNodes];
+    const id = resolveHeadingId(doc, heading);
+    heading.replaceChildren();
+    if (level === 2) {
+      primaryNumber += 1;
+      const eyebrow = doc.createElement("span");
+      eyebrow.className = "bp-heading-eyebrow";
+      eyebrow.textContent = formatHeadingEyebrow(primaryNumber);
+      heading.append(eyebrow);
+    }
+    const row = doc.createElement("span");
+    row.className = "bp-heading-row";
+    const button = createHeadingLinkButton(doc, label2);
+    const title = doc.createElement("span");
+    title.className = "bp-heading-title";
+    title.append(...titleNodes);
+    row.append(button, title);
+    heading.append(row);
+    let hideTimer = 0;
+    const showLink = () => {
+      win.clearTimeout(hideTimer);
+      heading.dataset.headingLink = "visible";
+    };
+    const scheduleHide = (event) => {
+      const next = event?.relatedTarget;
+      if (next instanceof Node && heading.contains(next)) return;
+      hideTimer = win.setTimeout(() => {
+        if (button.dataset.bpCopyState) return;
+        if (heading.matches(":hover") || button.matches(":hover")) return;
+        delete heading.dataset.headingLink;
+      }, 120);
+    };
+    heading.addEventListener("mouseenter", showLink);
+    heading.addEventListener("mouseleave", scheduleHide);
+    button.addEventListener("mouseenter", showLink);
+    button.addEventListener("mouseleave", scheduleHide);
+    heading.addEventListener("focusin", showLink);
+    heading.addEventListener("focusout", (event) => {
+      const next = event.relatedTarget;
+      if (next instanceof Node && heading.contains(next)) return;
+      if (!button.dataset.bpCopyState) scheduleHide(event);
+    });
+    button.addEventListener("click", (event) => {
+      event.preventDefault();
+      const url = new URL(`#${id}`, win?.location.href ?? "").href;
+      copySectionUrl(url).then(() => showHeadingLinkState(button, "copied", label2)).catch(() => showHeadingLinkState(button, "error", label2));
+    });
+  }
+}
+var CALLOUT_ICONS = {
+  locked: "M5 8h14v2H5zm0 12h14v2H5zM3 10h2v10H3zm16 0h2v10h-2zM7 4h2v4H7zm2-2h6v2H9zm6 2h2v4h-2z",
+  invariant: "M4 2h16v2H4zM2 4h2v10H2zm18 0h2v10h-2zM4 14h2v2H4zm2 2h2v2H6zm4 4h4v2h-4zm10-6h-2v2h2zm-2 2h-2v2h2zm-2 2h-2v2h2zm-6 0H8v2h2z",
+  ref: "M4 2h16v2H4zm2 5h2v2H6zm4 0h8v2h-8zm-4 4h2v2H6zm4 0h8v2h-8zm-4 4h2v2H6zm4 0h8v2h-8zm-6 5h16v2H4zM2 4h2v16H2zm18 0h2v16h-2z"
+};
+var CALLOUT_TYPES = {
+  locked: { mod: "locked", label: "Locked", icon: "locked" },
+  invariant: { mod: "invariant", label: "Invariant", icon: "invariant" },
+  ref: { mod: "ref", label: "Reference", icon: "ref" },
+  reference: { mod: "ref", label: "Reference", icon: "ref" }
+};
+var CALLOUT_BLOCK = /* @__PURE__ */ new Set([
+  "P",
+  "UL",
+  "OL",
+  "DL",
+  "DIV",
+  "PRE",
+  "BLOCKQUOTE",
+  "TABLE",
+  "FIGURE",
+  "SECTION",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "BP-SOURCE",
+  "BP-CITE"
+]);
+function createCalloutIcon(doc, pathD) {
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "currentColor");
+  svg.setAttribute("aria-hidden", "true");
+  const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", pathD);
+  svg.append(path);
+  return svg;
+}
+var BlueprintTocElement = class extends HTMLElement {
+  connectedCallback() {
+    const doc = this.ownerDocument;
+    if (doc.documentElement.dataset.blueprintRuntime !== "ready") return;
+    populateBpTocElement(this, doc, ensureDocumentNavTree(doc));
+  }
+};
+var BlueprintCalloutElement = class extends HTMLElement {
+  #rendered = false;
+  connectedCallback() {
+    if (this.#rendered) return;
+    this.#rendered = true;
+    const doc = this.ownerDocument;
+    const key = (this.getAttribute("type") || "locked").toLowerCase();
+    const spec = CALLOUT_TYPES[key] ?? CALLOUT_TYPES.locked;
+    const label2 = this.getAttribute("label") ?? spec.label;
+    const aside = doc.createElement("aside");
+    aside.className = `bp-callout bp-callout--${spec.mod}`;
+    const tag = doc.createElement("span");
+    tag.className = "bp-ctag";
+    const iconPath = CALLOUT_ICONS[spec.icon];
+    if (iconPath && this.getAttribute("icon") !== "none") {
+      tag.append(createCalloutIcon(doc, iconPath));
+    }
+    if (label2) tag.append(doc.createTextNode(label2));
+    aside.append(tag);
+    const body = [...this.childNodes];
+    const hasBlock = body.some(
+      (node) => node.nodeType === 1 && CALLOUT_BLOCK.has(node.tagName)
+    );
+    if (hasBlock) {
+      aside.append(...body);
+    } else {
+      const p = doc.createElement("p");
+      p.append(...body);
+      if (p.childNodes.length) aside.append(p);
+    }
+    this.replaceChildren(aside);
+  }
+};
+var MOCK_EXPAND_ICON = [
+  "M9 9L4 4M4 4V8M4 4H8",
+  "M15 9L20 4M20 4V8M20 4H16",
+  "M9 15L4 20M4 20V16M4 20H8",
+  "M15 15L20 20M20 20V16M20 20H16"
+];
+var MOCK_COLLAPSE_ICON = [
+  "M20 20L15 15M15 15V19M15 15H19",
+  "M4 20L9 15M9 15V19M9 15H5",
+  "M20 4L15 9M15 9V5M15 9H19",
+  "M4 4L9 9M9 9V5M9 9H5"
+];
+var BlueprintMockElement = class extends HTMLElement {
+  #rendered = false;
+  #ro = null;
+  #wrap = null;
+  #stage = null;
+  #canvas = null;
+  #btn = null;
+  #naturalWidth = 0;
+  #onKeydown = null;
+  #returnFocus = null;
+  #prevOverflow = "";
+  connectedCallback() {
+    if (this.#rendered) return;
+    this.#rendered = true;
+    this.dataset.bpRendered = "1";
+    const doc = this.ownerDocument;
+    const label2 = this.getAttribute("label") || "";
+    const vw = Number.parseInt(this.getAttribute("viewport") || "", 10);
+    this.#naturalWidth = Number.isFinite(vw) && vw > 0 ? vw : 0;
+    const expandable = this.getAttribute("expandable") !== "false";
+    const wrap = doc.createElement("div");
+    wrap.className = "bp-mock";
+    wrap.setAttribute("role", "group");
+    if (label2) wrap.setAttribute("aria-label", `Mockup: ${label2}`);
+    const frame = doc.createElement("div");
+    frame.className = "bp-mock__frame";
+    const bar = doc.createElement("div");
+    bar.className = "bp-mock__bar";
+    const ticks = doc.createElement("span");
+    ticks.className = "bp-mock__ticks";
+    ticks.setAttribute("aria-hidden", "true");
+    ticks.append(doc.createElement("i"), doc.createElement("i"), doc.createElement("i"));
+    bar.append(ticks);
+    const cap = doc.createElement("span");
+    cap.className = "bp-mock__label";
+    cap.textContent = label2;
+    bar.append(cap);
+    if (expandable) {
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.className = "bp-mock__btn";
+      btn.setAttribute("aria-expanded", "false");
+      btn.setAttribute("aria-label", "Expand mockup");
+      btn.append(createChromeSvg(doc, MOCK_EXPAND_ICON, 14));
+      btn.addEventListener("click", () => this.#toggle());
+      bar.append(btn);
+      this.#btn = btn;
+    }
+    const stage = doc.createElement("div");
+    stage.className = "bp-mock__stage";
+    const canvas = doc.createElement("div");
+    canvas.className = "bp-mock__canvas";
+    if (this.#naturalWidth) canvas.style.width = `${this.#naturalWidth}px`;
+    canvas.append(...this.childNodes);
+    stage.append(canvas);
+    frame.append(bar, stage);
+    wrap.append(frame);
+    this.replaceChildren(wrap);
+    this.#wrap = wrap;
+    this.#stage = stage;
+    this.#canvas = canvas;
+    if (this.#naturalWidth && typeof ResizeObserver !== "undefined") {
+      this.#ro = new ResizeObserver(() => this.#relayout());
+      this.#ro.observe(stage);
+      this.#ro.observe(canvas);
+      this.#relayout();
+    }
+  }
+  disconnectedCallback() {
+    this.#ro?.disconnect();
+    if (this.#onKeydown) this.ownerDocument.removeEventListener("keydown", this.#onKeydown);
+  }
+  // Scale the fixed-width canvas down to whatever width the stage offers,
+  // then collapse the stage to the scaled height so there is no dead space.
+  #relayout() {
+    if (!this.#naturalWidth || !this.#stage) return;
+    const avail = this.#stage.clientWidth;
+    if (!avail) return;
+    const scale = Math.min(1, avail / this.#naturalWidth);
+    this.#canvas.style.setProperty("--bp-mock-scale", String(scale));
+    this.#stage.style.height = `${Math.round(this.#canvas.offsetHeight * scale)}px`;
+  }
+  #toggle() {
+    const doc = this.ownerDocument;
+    const expanded = this.#wrap.classList.toggle("is-expanded");
+    if (this.#btn) {
+      this.#btn.setAttribute("aria-expanded", String(expanded));
+      this.#btn.setAttribute("aria-label", expanded ? "Collapse mockup" : "Expand mockup");
+      this.#btn.replaceChildren(
+        createChromeSvg(doc, expanded ? MOCK_COLLAPSE_ICON : MOCK_EXPAND_ICON, 14)
+      );
+    }
+    if (expanded) {
+      this.#returnFocus = doc.activeElement;
+      this.#prevOverflow = doc.documentElement.style.overflow;
+      doc.documentElement.style.overflow = "hidden";
+      this.#onKeydown = (event) => {
+        if (event.key === "Escape") this.#toggle();
+      };
+      doc.addEventListener("keydown", this.#onKeydown);
+      this.#btn?.focus();
+    } else {
+      doc.documentElement.style.overflow = this.#prevOverflow ?? "";
+      if (this.#onKeydown) {
+        doc.removeEventListener("keydown", this.#onKeydown);
+        this.#onKeydown = null;
+      }
+      if (this.#returnFocus && typeof this.#returnFocus.focus === "function") {
+        this.#returnFocus.focus();
+      }
+    }
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => this.#relayout());
+    } else {
+      this.#relayout();
+    }
+  }
+};
+var GALLERY_ZOOM_ICON = [
+  "M8 11H11M14 11H11M11 11V8M11 11V14",
+  "M17 17L21 21",
+  "M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z"
+];
+var GALLERY_CLOSE_ICON = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
+var GALLERY_PREV_ICON = "M15 6L9 12L15 18";
+var GALLERY_NEXT_ICON = "M9 6L15 12L9 18";
+var BlueprintGalleryElement = class extends HTMLElement {
+  #rendered = false;
+  /** @type {{ src: string, alt: string, caption: string }[]} */
+  #slides = [];
+  #label = "";
+  #box = null;
+  #boxImg = null;
+  #boxCaption = null;
+  #boxCounter = null;
+  #boxKicker = null;
+  #index = 0;
+  #onKeydown = null;
+  #returnFocus = null;
+  #prevOverflow = "";
+  connectedCallback() {
+    if (this.#rendered) return;
+    this.#rendered = true;
+    this.dataset.bpRendered = "1";
+    const doc = this.ownerDocument;
+    this.#label = this.getAttribute("label") || "";
+    for (const img of this.querySelectorAll("img")) {
+      const figure = img.closest("figure");
+      const cap = figure?.querySelector("figcaption");
+      const caption = (cap?.textContent || img.getAttribute("alt") || "").trim();
+      this.#slides.push({
+        src: img.getAttribute("src") || "",
+        alt: (img.getAttribute("alt") || caption || "").trim(),
+        caption
+      });
+    }
+    const wrap = doc.createElement("div");
+    wrap.className = "bp-gallery";
+    wrap.setAttribute("role", "group");
+    if (this.#label) wrap.setAttribute("aria-label", `Gallery: ${this.#label}`);
+    const grid = doc.createElement("div");
+    grid.className = "bp-gallery__grid";
+    this.#slides.forEach((slide, index) => {
+      const item = doc.createElement("button");
+      item.type = "button";
+      item.className = "bp-gallery__item";
+      item.setAttribute(
+        "aria-label",
+        slide.caption ? `View image: ${slide.caption}` : `View image ${index + 1}`
+      );
+      item.addEventListener("click", () => this.#open(index));
+      const thumb = doc.createElement("span");
+      thumb.className = "bp-gallery__thumb";
+      const img = doc.createElement("img");
+      img.className = "bp-gallery__img";
+      img.src = slide.src;
+      img.alt = slide.alt;
+      img.loading = "lazy";
+      img.decoding = "async";
+      const wash = doc.createElement("span");
+      wash.className = "bp-gallery__wash";
+      wash.setAttribute("aria-hidden", "true");
+      const zoom = doc.createElement("span");
+      zoom.className = "bp-gallery__zoom";
+      zoom.setAttribute("aria-hidden", "true");
+      zoom.append(createChromeSvg(doc, GALLERY_ZOOM_ICON, 16));
+      thumb.append(img, wash, zoom);
+      item.append(thumb);
+      if (slide.caption) {
+        const cap = doc.createElement("span");
+        cap.className = "bp-gallery__caption";
+        cap.textContent = slide.caption;
+        item.append(cap);
+      }
+      grid.append(item);
+    });
+    wrap.append(grid);
+    this.replaceChildren(wrap);
+  }
+  disconnectedCallback() {
+    if (this.#onKeydown) this.ownerDocument.removeEventListener("keydown", this.#onKeydown);
+    this.#box?.remove();
+    this.#box = null;
+  }
+  #ensureBox() {
+    if (this.#box) return;
+    const doc = this.ownerDocument;
+    const box = doc.createElement("div");
+    box.className = "bp-lightbox";
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "true");
+    box.setAttribute("aria-label", this.#label ? `${this.#label} — image viewer` : "Image viewer");
+    box.addEventListener("click", (event) => {
+      if (event.target === box) this.#close();
+    });
+    const close = doc.createElement("button");
+    close.type = "button";
+    close.className = "bp-lightbox__close";
+    close.setAttribute("aria-label", "Close image viewer");
+    close.append(createChromeSvg(doc, GALLERY_CLOSE_ICON, 18));
+    close.addEventListener("click", () => this.#close());
+    const prev = doc.createElement("button");
+    prev.type = "button";
+    prev.className = "bp-lightbox__nav bp-lightbox__nav--prev";
+    prev.setAttribute("aria-label", "Previous image");
+    prev.append(createChromeSvg(doc, GALLERY_PREV_ICON, 22));
+    prev.addEventListener("click", () => this.#step(-1));
+    const next = doc.createElement("button");
+    next.type = "button";
+    next.className = "bp-lightbox__nav bp-lightbox__nav--next";
+    next.setAttribute("aria-label", "Next image");
+    next.append(createChromeSvg(doc, GALLERY_NEXT_ICON, 22));
+    next.addEventListener("click", () => this.#step(1));
+    const figure = doc.createElement("figure");
+    figure.className = "bp-lightbox__figure";
+    const img = doc.createElement("img");
+    img.className = "bp-lightbox__img";
+    img.alt = "";
+    const meta = doc.createElement("figcaption");
+    meta.className = "bp-lightbox__meta";
+    const kicker = doc.createElement("span");
+    kicker.className = "bp-lightbox__kicker";
+    kicker.textContent = this.#label;
+    const counter = doc.createElement("span");
+    counter.className = "bp-lightbox__counter";
+    const caption = doc.createElement("span");
+    caption.className = "bp-lightbox__caption";
+    meta.append(kicker, counter, caption);
+    figure.append(img, meta);
+    box.append(close, prev, figure, next);
+    const host = doc.body || doc.documentElement;
+    host.append(box);
+    this.#box = box;
+    this.#boxImg = img;
+    this.#boxCaption = caption;
+    this.#boxCounter = counter;
+    this.#boxKicker = kicker;
+  }
+  #render() {
+    const slide = this.#slides[this.#index];
+    if (!slide) return;
+    this.#boxImg.src = slide.src;
+    this.#boxImg.alt = slide.alt;
+    this.#boxCaption.textContent = slide.caption;
+    this.#boxCaption.hidden = !slide.caption;
+    this.#boxKicker.hidden = !this.#label;
+    const many = this.#slides.length > 1;
+    this.#boxCounter.textContent = many ? `${this.#index + 1} / ${this.#slides.length}` : "";
+    this.#boxCounter.hidden = !many;
+    this.#box.classList.toggle("is-single", !many);
+  }
+  #open(index) {
+    if (!this.#slides.length) return;
+    this.#ensureBox();
+    this.#index = index;
+    this.#render();
+    const doc = this.ownerDocument;
+    this.#returnFocus = doc.activeElement;
+    this.#prevOverflow = doc.documentElement.style.overflow;
+    doc.documentElement.style.overflow = "hidden";
+    this.#box.classList.add("is-open");
+    this.#onKeydown = (event) => {
+      if (event.key === "Escape") this.#close();
+      else if (event.key === "ArrowRight") this.#step(1);
+      else if (event.key === "ArrowLeft") this.#step(-1);
+    };
+    doc.addEventListener("keydown", this.#onKeydown);
+    this.#box.querySelector(".bp-lightbox__close")?.focus();
+  }
+  #step(delta) {
+    if (this.#slides.length < 2) return;
+    const count = this.#slides.length;
+    this.#index = (this.#index + delta + count) % count;
+    this.#render();
+  }
+  #close() {
+    if (!this.#box) return;
+    const doc = this.ownerDocument;
+    this.#box.classList.remove("is-open");
+    doc.documentElement.style.overflow = this.#prevOverflow ?? "";
+    if (this.#onKeydown) {
+      doc.removeEventListener("keydown", this.#onKeydown);
+      this.#onKeydown = null;
+    }
+    if (this.#returnFocus && typeof this.#returnFocus.focus === "function") {
+      this.#returnFocus.focus();
+    }
+  }
+};
+var BlueprintSubheaderElement = class extends HTMLElement {
+};
+var BlueprintNoteElement = class extends HTMLElement {
+};
+var BlueprintEyebrowElement = class extends HTMLElement {
+};
+var TABLE_NUMERIC = /^[+-]?[$€£¥]?\s?\d[\d,]*(\.\d+)?\s?%?$/;
+var TABLE_BLANK = /^(—|–|-|n\/?a)$/i;
+var BlueprintTableElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["numeric"];
+  }
+  #observer = null;
+  #applying = false;
+  connectedCallback() {
+    this.#ensureScrollShell();
+    this.#apply();
+    if (typeof MutationObserver !== "undefined" && !this.#observer) {
+      this.#observer = new MutationObserver(() => {
+        if (!this.#applying) this.#apply();
+      });
+      this.#observer.observe(this, { childList: true, subtree: true, characterData: true });
+    }
+  }
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) {
+      this.#ensureScrollShell();
+      this.#apply();
+    }
+  }
+  // Wrap the author's <table> in a horizontal scroll shell. Sticky header
+  // cells must stick to the page scrollport, not to <bp-table> — so overflow-x
+  // lives here, on .bp-table-x, instead of on the host.
+  #ensureScrollShell() {
+    const table = this.querySelector(":scope > table");
+    if (!table) return;
+    let shell = this.querySelector(":scope > .bp-table-x");
+    if (!shell) {
+      shell = document.createElement("div");
+      shell.className = "bp-table-x";
+      this.insertBefore(shell, table);
+    }
+    if (table.parentElement !== shell) shell.append(table);
+  }
+  // Resolve which 1-based columns end-align, then stamp .bp-col-num on the
+  // matching cells across thead / tbody / tfoot.
+  #apply() {
+    const table = this.querySelector("table");
+    if (!table) return;
+    this.#applying = true;
+    try {
+      for (const el2 of this.querySelectorAll(".bp-col-num")) {
+        el2.classList.remove("bp-col-num");
+      }
+      const attr = (this.getAttribute("numeric") || "").trim().toLowerCase();
+      if (attr === "off") return;
+      let columns;
+      if (attr) {
+        columns = new Set(
+          attr.split(",").map((n) => Number.parseInt(n, 10)).filter((n) => n > 0)
+        );
+        if (!columns.size) columns = this.#detect(table);
+      } else {
+        columns = this.#detect(table);
+      }
+      if (columns.size) this.#mark(table, columns);
+    } finally {
+      this.#applying = false;
+    }
+  }
+  // A column is numeric when every non-blank <td> in it parses as a number.
+  // <th> cells (the key column) are skipped but still advance the column
+  // index so it stays aligned with the header row.
+  #detect(table) {
+    const tally = /* @__PURE__ */ new Map();
+    for (const body of table.tBodies) {
+      for (const row of body.rows) {
+        let col = 0;
+        for (const cell of row.cells) {
+          const span = cell.colSpan || 1;
+          col += 1;
+          if (cell.tagName === "TH") {
+            col += span - 1;
+            continue;
+          }
+          const text = cell.textContent.trim();
+          if (!text || TABLE_BLANK.test(text)) continue;
+          const rec = tally.get(col) || { total: 0, numeric: 0 };
+          rec.total += 1;
+          if (TABLE_NUMERIC.test(text)) rec.numeric += 1;
+          tally.set(col, rec);
+          col += span - 1;
+        }
+      }
+    }
+    const columns = /* @__PURE__ */ new Set();
+    for (const [col, rec] of tally) {
+      if (rec.total > 0 && rec.numeric === rec.total) columns.add(col);
+    }
+    return columns;
+  }
+  // Stamp .bp-col-num on every cell whose 1-based column index is numeric.
+  #mark(table, columns) {
+    const stamp = (rows) => {
+      for (const row of rows) {
+        let col = 0;
+        for (const cell of row.cells) {
+          const span = cell.colSpan || 1;
+          col += 1;
+          for (let i = 0; i < span; i += 1) {
+            if (columns.has(col + i)) {
+              cell.classList.add("bp-col-num");
+              break;
+            }
+          }
+          col += span - 1;
+        }
+      }
+    };
+    if (table.tHead) stamp(table.tHead.rows);
+    for (const body of table.tBodies) stamp(body.rows);
+    if (table.tFoot) stamp(table.tFoot.rows);
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("bp-toc")) {
+  customElements.define("bp-toc", BlueprintTocElement);
+}
+if (typeof customElements !== "undefined" && !customElements.get("bp-callout")) {
+  customElements.define("bp-callout", BlueprintCalloutElement);
+}
+if (typeof customElements !== "undefined" && !customElements.get("bp-mock")) {
+  customElements.define("bp-mock", BlueprintMockElement);
+}
+if (typeof customElements !== "undefined" && !customElements.get("bp-gallery")) {
+  customElements.define("bp-gallery", BlueprintGalleryElement);
+}
+if (typeof customElements !== "undefined" && !customElements.get("bp-table")) {
+  customElements.define("bp-table", BlueprintTableElement);
+}
+if (typeof customElements !== "undefined") {
+  for (const [name, ctor] of [
+    ["bp-subheader", BlueprintSubheaderElement],
+    ["bp-note", BlueprintNoteElement],
+    ["bp-eyebrow", BlueprintEyebrowElement]
+  ]) {
+    if (!customElements.get(name)) customElements.define(name, ctor);
+  }
+}
+(() => {
+  const VIEW_OPTIONS = [
+    ["list", "List"],
+    ["gantt", "Gantt"],
+    ["kanban", "Kanban"],
+    ["swimlanes", "Swimlanes"]
+  ];
+  function derive(plan) {
+    const byId = new Map(plan.tasks.map((t) => [t.id, t]));
+    const waveMemo = /* @__PURE__ */ new Map();
+    const startMemo = /* @__PURE__ */ new Map();
+    const wave = (id, trail = /* @__PURE__ */ new Set()) => {
+      if (waveMemo.has(id)) return waveMemo.get(id);
+      const deps = byId.get(id)?.dependsOn ?? [];
+      let w = 0;
+      for (const d of deps) {
+        if (!byId.has(d) || trail.has(d)) continue;
+        w = Math.max(w, wave(d, /* @__PURE__ */ new Set([...trail, id])) + 1);
+      }
+      waveMemo.set(id, w);
+      return w;
+    };
+    const start = (id, trail = /* @__PURE__ */ new Set()) => {
+      if (startMemo.has(id)) return startMemo.get(id);
+      const deps = byId.get(id)?.dependsOn ?? [];
+      let s = 0;
+      for (const d of deps) {
+        const dep = byId.get(d);
+        if (!dep || trail.has(d)) continue;
+        s = Math.max(s, start(d, /* @__PURE__ */ new Set([...trail, id])) + (dep.effort ?? 1));
+      }
+      startMemo.set(id, s);
+      return s;
+    };
+    return plan.tasks.map((t) => {
+      const deps = t.dependsOn ?? [];
+      const blockedBy = deps.filter((d) => byId.get(d)?.status !== "done");
+      const ready = blockedBy.length === 0;
+      const s = start(t.id);
+      return {
+        ...t,
+        wave: wave(t.id),
+        ready,
+        locked: !ready && t.status !== "done",
+        start: s,
+        finish: s + (t.effort ?? 1),
+        blockedBy
+      };
+    });
+  }
+  function phase(t) {
+    if (t.status === "done") return "done";
+    if (t.locked) return "blocked";
+    if (t.status === "active") return "active";
+    return "ready";
+  }
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  const TYPE_LABEL = {
+    research: "Research",
+    write: "Write",
+    review: "Review",
+    design: "Design",
+    code: "Code"
+  };
+  const CI_LABEL = {
+    running: "Tests running",
+    failed: "CI failed",
+    passed: "CI passed",
+    approved: "Approved"
+  };
+  const UNIT_SUFFIX = { hours: "h", days: "d" };
+  const UNIT_AXIS = { hours: "Hours", days: "Days" };
+  const TYPE_ICON = {
+    research: '<circle cx="7" cy="7" r="4.2"/><path d="M10 10l4 4"/>',
+    write: '<path d="M3 13l8.5-8.5 2.5 2.5L5.5 15.5 2.5 16z"/><path d="M11 5l2.5 2.5"/>',
+    review: '<path d="M2 8s2.4-4 6-4 6 4 6 4-2.4 4-6 4-6-4-6-4z"/><circle cx="8" cy="8" r="1.8"/>',
+    design: '<path d="M8 2v12"/><path d="M8 2l4.5 10.5a5 5 0 01-9 0z"/>',
+    code: '<path d="M6 4L2 8l4 4"/><path d="M10 4l4 4-4 4"/>'
+  };
+  const CI_ICON = {
+    running: '<circle cx="8" cy="8" r="5.4" stroke-dasharray="3 3"/>',
+    failed: '<circle cx="8" cy="8" r="6"/><path d="M5.5 5.5l5 5M10.5 5.5l-5 5"/>',
+    passed: '<circle cx="8" cy="8" r="6"/><path d="M5 8.2l2 2 4-4.4"/>',
+    approved: '<path d="M3 8.4l2.2 2.2 4.4-4.8"/><path d="M7 8.4l2.2 2.2 4.4-4.8"/>'
+  };
+  const AGENT_ICON = '<path d="M8 1.5v13M1.5 8h13M3.7 3.7l8.6 8.6M12.3 3.7l-8.6 8.6"/>';
+  const svgMark = (paths, cls) => `<svg class="${cls}" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+  const typeBadge = (t) => `<span class="wp-type wp-type--${t}">${svgMark(TYPE_ICON[t], "wp-type__glyph")}<span class="wp-type__label">${TYPE_LABEL[t]}</span></span>`;
+  const phaseDot = (p) => `<span class="wp-dot wp-dot--${p}" role="img" aria-label="${p}"></span>`;
+  function prStatus(pr, compact = false) {
+    const needsGlyph = pr.ci === "running" || pr.ci === "failed";
+    const diff = !compact && pr.additions != null ? `<span class="wp-pr__diff"><span class="wp-pr__add">+${pr.additions}</span> <span class="wp-pr__del">−${pr.deletions ?? 0}</span></span>` : "";
+    return `<span class="wp-pr wp-pr--${pr.ci}" title="${esc(`PR #${pr.number} — ${CI_LABEL[pr.ci]}`)}">` + (needsGlyph ? svgMark(CI_ICON[pr.ci], "wp-pr__glyph") : "") + `<span class="wp-pr__num">#${pr.number}</span><span class="wp-pr__ci">${esc(CI_LABEL[pr.ci])}</span>` + diff + `</span>`;
+  }
+  function initials(name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  function ownerMark(owner) {
+    if (!owner) return "";
+    if (owner.kind === "agent") {
+      return `<span class="wp-owner wp-owner--agent" title="${esc(owner.name)} (agent)">${svgMark(AGENT_ICON, "wp-owner__glyph")}</span>`;
+    }
+    return `<span class="wp-owner wp-owner--human" title="${esc(owner.name)}">${esc(initials(owner.name))}</span>`;
+  }
+  function waitLabel(t, byId) {
+    const names = t.blockedBy.map((d) => byId.get(d)?.name ?? d);
+    return `Waiting on ${names.join(", ")}`;
+  }
+  function waitNote(t, byId) {
+    if (!t.locked) return "";
+    const label2 = waitLabel(t, byId);
+    return `<span class="wp-wait" title="${esc(label2)}">${esc(label2)}</span>`;
+  }
+  function groupByWave(tasks) {
+    const map = /* @__PURE__ */ new Map();
+    for (const t of tasks) {
+      const arr = map.get(t.wave) ?? [];
+      arr.push(t);
+      map.set(t.wave, arr);
+    }
+    return [...map.entries()].sort((a, b) => a[0] - b[0]);
+  }
+  function renderList(tasks, byId) {
+    const blocks = groupByWave(tasks).map(
+      ([w, items]) => `
+        <div class="wp-wave">
+          <div class="wp-wave__head">
+            <span class="wp-wave__no">Wave ${w + 1}</span>
+            <span class="wp-wave__count">${items.length} task${items.length === 1 ? "" : "s"}</span>
+          </div>
+          <div class="wp-list">
+            ${items.map((t) => {
+        const p = phase(t);
+        return `
+                <div class="wp-row wp-row--${p}" data-locked="${t.locked}">
+                  ${phaseDot(p)}
+                  ${typeBadge(t.type)}
+                  <span class="wp-row__main">
+                    <span class="wp-row__name">${esc(t.name)}</span>
+                    ${waitNote(t, byId)}
+                  </span>
+                  <span class="wp-row__pr">${t.pr ? prStatus(t.pr) : ""}</span>
+                  ${ownerMark(t.owner)}
+                </div>`;
+      }).join("")}
+          </div>
+        </div>`
+    ).join("");
+    return `<div class="wp-view wp-view--list">${blocks}</div>`;
+  }
+  function renderKanban(tasks, byId) {
+    const cols = [
+      { key: "blocked", title: "Blocked" },
+      { key: "ready", title: "Ready" },
+      { key: "active", title: "In progress" },
+      { key: "done", title: "Done" }
+    ];
+    const columns = cols.map(({ key, title }) => {
+      const items = tasks.filter((t) => phase(t) === key);
+      return `
+        <div class="wp-col wp-col--${key}">
+          <div class="wp-col__head">
+            <span class="wp-col__title">${title}</span>
+            <span class="wp-col__count">${items.length}</span>
+          </div>
+          <div class="wp-col__body">
+            ${items.length === 0 ? '<div class="wp-col__empty">No tasks</div>' : items.map(
+        (t) => `
+              <div class="wp-card wp-card--${key}" data-locked="${t.locked}"${t.locked ? ` title="${esc(waitLabel(t, byId))}"` : ""}>
+                <div class="wp-card__top">
+                  ${typeBadge(t.type)}
+                  ${phaseDot(phase(t))}
+                </div>
+                <div class="wp-card__name">${esc(t.name)}</div>
+                ${t.pr ? `<div class="wp-card__pr">${prStatus(t.pr, true)}</div>` : ""}
+                <div class="wp-card__foot">
+                  <span class="wp-card__wave">Wave ${t.wave + 1}</span>
+                  ${ownerMark(t.owner)}
+                </div>
+              </div>`
+      ).join("")}
+          </div>
+        </div>`;
+    }).join("");
+    return `<div class="wp-view wp-view--kanban">${columns}</div>`;
+  }
+  function renderSwimlanes(tasks) {
+    const order = ["research", "design", "write", "code", "review"];
+    const maxWave = Math.max(0, ...tasks.map((t) => t.wave));
+    const header = `<div class="wp-swim__corner">Type × wave</div>` + Array.from({ length: maxWave + 1 }, (_, w) => `<div class="wp-swim__whead">Wave ${w + 1}</div>`).join("");
+    const lanes = order.filter((type) => tasks.some((t) => t.type === type)).map((type) => {
+      const cells = Array.from({ length: maxWave + 1 }, (_, w) => {
+        const items = tasks.filter((t) => t.type === type && t.wave === w);
+        return `<div class="wp-swim__cell">${items.map((t) => {
+          const p = phase(t);
+          return `<div class="wp-chip wp-chip--${p}" data-locked="${t.locked}" title="${esc(t.name)}">
+                <div class="wp-chip__head">
+                  ${phaseDot(p)}
+                  <span class="wp-chip__name">${esc(t.name)}</span>
+                  ${ownerMark(t.owner)}
+                </div>
+                ${t.pr ? `<div class="wp-chip__pr">${prStatus(t.pr, true)}</div>` : ""}
+              </div>`;
+        }).join("")}</div>`;
+      }).join("");
+      return `<div class="wp-swim__lanehead">${typeBadge(type)}</div>${cells}`;
+    }).join("");
+    return `<div class="wp-view wp-view--swim" style="--wp-waves:${maxWave + 1}">${header}${lanes}</div>`;
+  }
+  function renderGantt(tasks, unit) {
+    const span = Math.max(1, ...tasks.map((t) => t.finish));
+    const suffix = UNIT_SUFFIX[unit];
+    const axis = Array.from(
+      { length: span + 1 },
+      (_, d) => `<span class="wp-gantt__tick" style="--at:${d}">${d}</span>`
+    ).join("");
+    const rows = [...tasks].sort((a, b) => a.start - b.start || a.wave - b.wave).map((t) => {
+      const p = phase(t);
+      const pct = (n) => n / span * 100;
+      return `
+        <div class="wp-gantt__row wp-gantt__row--${p}" data-locked="${t.locked}">
+          <div class="wp-gantt__label">
+            ${typeBadge(t.type)}
+            <span class="wp-gantt__name">${esc(t.name)}</span>
+            ${ownerMark(t.owner)}
+          </div>
+          <div class="wp-gantt__track">
+            <div class="wp-gantt__bar wp-gantt__bar--${p}" style="left:${pct(t.start)}%;width:${pct(t.finish - t.start)}%">
+              ${phaseDot(p)}
+              <span class="wp-gantt__bar-label">${t.pr ? `#${t.pr.number}` : `${t.effort ?? 1}${suffix}`}</span>
+            </div>
+          </div>
+        </div>`;
+    }).join("");
+    return `<div class="wp-view wp-view--gantt">
+      <div class="wp-gantt__row wp-gantt__row--axis">
+        <div class="wp-gantt__label wp-gantt__label--axis">${UNIT_AXIS[unit]} →</div>
+        <div class="wp-gantt__track wp-gantt__track--axis" style="--span:${span}">${axis}</div>
+      </div>
+      ${rows}
+    </div>`;
+  }
+  function summarize(tasks) {
+    return {
+      total: tasks.length,
+      done: tasks.filter((t) => t.status === "done").length,
+      active: tasks.filter((t) => phase(t) === "active").length,
+      blocked: tasks.filter((t) => t.locked).length,
+      waves: new Set(tasks.map((t) => t.wave)).size
+    };
+  }
+  function renderEmpty() {
+    return `<div class="wp-empty" role="status">
+      <svg viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="wp-empty__art">
+        <rect x="7" y="9" width="34" height="30" rx="2"/>
+        <path d="M7 17h34"/>
+        <path d="M13 24h10M13 30h16" stroke-dasharray="2 3"/>
+        <circle cx="33" cy="29" r="6"/>
+        <path d="M33 26v3l2 2"/>
+      </svg>
+      <div class="wp-empty__title">Waiting for a plan</div>
+      <div class="wp-empty__hint">No work plan has been received yet. The host frame will post one over <span class="wp-mono">postMessage</span>.</div>
+    </div>`;
+  }
+  const MESSAGE_TYPE = "workplan:update";
+  const GLOBAL_KEY = "__WORKPLAN__";
+  const MODES = /* @__PURE__ */ new Set(["list", "gantt", "kanban", "swimlanes"]);
+  class BlueprintWorkplanElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["mode", "unit", "header", "subheader"];
+    }
+    #plan = null;
+    #root = null;
+    #activeView = "list";
+    #onMessage = (e) => this.#handleMessage(e);
+    #onClick = (e) => this.#handleClick(e);
+    set plan(value) {
+      this.#plan = value;
+      this.#render();
+    }
+    get plan() {
+      return this.#plan;
+    }
+    get mode() {
+      const m = this.getAttribute("mode");
+      return MODES.has(m) ? m : null;
+    }
+    get unit() {
+      return this.getAttribute("unit") === "days" ? "days" : "hours";
+    }
+    connectedCallback() {
+      if (!this.#root) {
+        this.#root = this.ownerDocument.createElement("div");
+        this.#root.className = "bp-workplan";
+        this.#root.addEventListener("click", this.#onClick);
+        this.replaceChildren(this.#root);
+      }
+      if (!this.#plan && !this.hasAttribute("ignore-global")) {
+        const fromGlobal = this.ownerDocument.defaultView?.[GLOBAL_KEY];
+        if (fromGlobal) this.#plan = fromGlobal;
+      }
+      this.ownerDocument.defaultView?.addEventListener("message", this.#onMessage);
+      this.#render();
+    }
+    disconnectedCallback() {
+      this.ownerDocument.defaultView?.removeEventListener("message", this.#onMessage);
+    }
+    attributeChangedCallback() {
+      this.#render();
+    }
+    #handleMessage(e) {
+      const data = e.data;
+      if (!data || data.type !== MESSAGE_TYPE || !data.plan) return;
+      this.#plan = data.plan;
+      this.#render();
+    }
+    // Delegated: the toolbar's buttons live in re-rendered markup, so we
+    // listen on the persistent root and read intent off data-attributes.
+    #handleClick(e) {
+      const target = e.target;
+      const btn = target instanceof Element ? target.closest("[data-wp-view],[data-wp-unit]") : null;
+      if (!btn || !this.#root?.contains(btn)) return;
+      const view = btn.getAttribute("data-wp-view");
+      if (view) {
+        this.#activeView = view;
+        this.#render();
+        return;
+      }
+      const unit = btn.getAttribute("data-wp-unit");
+      if (unit) this.setAttribute("unit", unit);
+    }
+    get #view() {
+      return this.mode ?? this.#activeView;
+    }
+    #toolbar(view, showModes) {
+      const modes = showModes ? `<div class="wp-modes" role="tablist" aria-label="Choose a view">` + VIEW_OPTIONS.map(
+        ([v, label2]) => `<button class="wp-modes__btn" type="button" role="tab" aria-selected="${v === view}" data-wp-view="${v}">${label2}</button>`
+      ).join("") + `</div>` : "";
+      const unit = view === "gantt" ? `<div class="wp-modes wp-modes--unit" role="group" aria-label="Time unit">` + ["hours", "days"].map(
+        (u) => `<button class="wp-modes__btn" type="button" aria-selected="${u === this.unit}" data-wp-unit="${u}">${UNIT_AXIS[u]}</button>`
+      ).join("") + `</div>` : "";
+      return modes || unit ? `<div class="wp-toolbar">${modes}${unit}</div>` : "";
+    }
+    #render() {
+      if (!this.#root) return;
+      const plan = this.#plan;
+      const hasData = !!plan && Array.isArray(plan.tasks) && plan.tasks.length > 0;
+      const view = this.#view;
+      const showModes = this.mode === null;
+      const title = this.getAttribute("header") ?? plan?.title ?? "";
+      const subtitle = this.getAttribute("subheader") ?? plan?.subtitle ?? "";
+      let stats = "";
+      let body = "";
+      if (hasData) {
+        this.#root.dataset.state = "ready";
+        const derived = derive(plan);
+        const byId = new Map(plan.tasks.map((t) => [t.id, t]));
+        const counts = summarize(derived);
+        stats = `<div class="wp-stats"><div class="wp-stat"><span class="wp-stat__k">Done</span><span class="wp-stat__v">${counts.done}/${counts.total}</span></div><div class="wp-stat"><span class="wp-stat__k">Active</span><span class="wp-stat__v">${counts.active}</span></div><div class="wp-stat"><span class="wp-stat__k">Blocked</span><span class="wp-stat__v">${counts.blocked}</span></div><div class="wp-stat"><span class="wp-stat__k">Waves</span><span class="wp-stat__v">${counts.waves}</span></div></div>`;
+        body = view === "gantt" ? renderGantt(derived, this.unit) : view === "kanban" ? renderKanban(derived, byId) : view === "swimlanes" ? renderSwimlanes(derived) : renderList(derived, byId);
+      } else {
+        this.#root.dataset.state = "empty";
+        body = renderEmpty();
+      }
+      const head = title || subtitle || stats ? `<div class="wp-head"><div class="wp-head__title">` + (title ? `<div class="wp-head__name">${esc(title)}</div>` : "") + (subtitle ? `<div class="wp-head__sub">${esc(subtitle)}</div>` : "") + `</div>` + stats + `</div>` : "";
+      const toolbar = hasData ? this.#toolbar(view, showModes) : "";
+      this.#root.innerHTML = head + toolbar + `<div class="wp-canvas">${body}</div>`;
+    }
+  }
+  if (typeof customElements !== "undefined" && !customElements.get("bp-workplan")) {
+    customElements.define("bp-workplan", BlueprintWorkplanElement);
+  }
+})();
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => initializeBlueprintRuntime(), { once: true });
+  } else {
+    initializeBlueprintRuntime();
+  }
+}
+export {
+  initializeBlueprintRuntime
+};