@adieyal/catalogue-core 0.1.0

package/dist/index.js

@@ -0,0 +1,1567 @@
+var le = Object.defineProperty;
+var ie = (t, e, a) => e in t ? le(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a;
+var V = (t, e, a) => ie(t, typeof e != "symbol" ? e + "" : e, a);
+import { z as l } from "zod";
+import { marked as de } from "marked";
+const ue = l.object({
+  /** Element tag name (e.g., 'div', 'my-component') */
+  element: l.string().min(1),
+  /** DOM attributes (set via setAttribute) */
+  attrs: l.record(l.union([l.string(), l.number(), l.boolean(), l.null()])).optional(),
+  /** DOM properties (set directly on element, for objects/arrays) */
+  props: l.record(l.unknown()).optional(),
+  /** Text content (mutually exclusive with children) */
+  text: l.string().optional()
+}), R = ue.extend({
+  /** Named slots - content to render with slot attribute */
+  slots: l.record(l.union([
+    l.string(),
+    l.lazy(() => R),
+    l.array(l.lazy(() => R))
+  ])).optional(),
+  /** Child elements */
+  children: l.array(l.lazy(() => R)).optional()
+});
+function ut(t) {
+  const e = R.safeParse(t);
+  return e.success ? { success: !0, data: e.data } : {
+    success: !1,
+    errors: e.error.errors.map((a) => `${a.path.join(".")}: ${a.message}`)
+  };
+}
+const pe = l.object({
+  type: l.literal("text"),
+  label: l.string().optional(),
+  defaultValue: l.string().optional(),
+  placeholder: l.string().optional()
+}), me = l.object({
+  type: l.literal("number"),
+  label: l.string().optional(),
+  defaultValue: l.number().optional(),
+  min: l.number().optional(),
+  max: l.number().optional(),
+  step: l.number().optional()
+}), he = l.object({
+  type: l.literal("boolean"),
+  label: l.string().optional(),
+  defaultValue: l.boolean().optional()
+}), ge = l.object({
+  type: l.literal("select"),
+  label: l.string().optional(),
+  defaultValue: l.string().optional(),
+  options: l.array(l.union([
+    l.string(),
+    l.object({
+      label: l.string(),
+      value: l.string()
+    })
+  ]))
+}), fe = l.object({
+  type: l.literal("radio"),
+  label: l.string().optional(),
+  defaultValue: l.string().optional(),
+  options: l.array(l.union([
+    l.string(),
+    l.object({
+      label: l.string(),
+      value: l.string()
+    })
+  ]))
+}), Ce = l.object({
+  type: l.literal("color"),
+  label: l.string().optional(),
+  defaultValue: l.string().optional()
+}), be = l.object({
+  type: l.literal("range"),
+  label: l.string().optional(),
+  defaultValue: l.number().optional(),
+  min: l.number(),
+  max: l.number(),
+  step: l.number().optional()
+}), ve = l.object({
+  type: l.literal("json"),
+  label: l.string().optional(),
+  defaultValue: l.unknown().optional()
+}), Z = l.discriminatedUnion("type", [
+  pe,
+  me,
+  he,
+  ge,
+  fe,
+  Ce,
+  be,
+  ve
+]);
+function pt(t) {
+  const e = Z.safeParse(t);
+  return e.success ? { success: !0, data: e.data } : {
+    success: !1,
+    errors: e.error.errors.map((a) => `${a.path.join(".")}: ${a.message}`)
+  };
+}
+const ye = l.enum(["stable", "beta", "deprecated"]), Ee = l.enum(["standalone", "subcomponent", "feature"]), xe = l.object({
+  /** Custom element tag name (must be kebab-case with at least one hyphen) */
+  customElement: l.string().regex(/^[a-z][a-z0-9]*-[a-z0-9-]+$/, {
+    message: 'Custom element name must be kebab-case with at least one hyphen (e.g., "my-button")'
+  }),
+  /** npm package name (optional, defaults to consumer's package) */
+  package: l.string().optional(),
+  /** Entry point path (optional, defaults to main entry) */
+  entry: l.string().optional()
+}), we = l.object({
+  /** ID of the primary scenario to use as default in playground */
+  primaryScenarioId: l.string().min(1),
+  /** Control definitions keyed by property name */
+  controls: l.record(Z)
+}), Ne = l.object({
+  /** Unique identifier for the component (kebab-case) */
+  id: l.string().min(1).regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Component ID must be kebab-case starting with a letter"
+  }),
+  /** Human-readable title */
+  title: l.string().min(1),
+  /** Component maturity status */
+  status: ye,
+  /** Component kind */
+  kind: Ee,
+  /** Optional description */
+  description: l.string().optional(),
+  /** Tags for search and filtering */
+  tags: l.array(l.string()).optional(),
+  /** Category ID (must match a category defined in config) */
+  category: l.string().regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Category must be kebab-case starting with a letter"
+  }).optional(),
+  /** Export configuration */
+  exports: xe,
+  /** Playground configuration */
+  playground: we,
+  /** Parent component ID (required when kind is 'subcomponent') */
+  parentId: l.string().optional(),
+  /** List of subcomponent IDs */
+  subcomponents: l.array(l.string()).optional()
+}).refine(
+  (t) => !(t.kind === "subcomponent" && !t.parentId),
+  {
+    message: "Subcomponents must have a parentId",
+    path: ["parentId"]
+  }
+);
+function $e(t) {
+  const e = Ne.safeParse(t);
+  return e.success ? { success: !0, data: e.data } : {
+    success: !1,
+    errors: e.error.errors.map((a) => ({
+      path: a.path.join(".") || "(root)",
+      message: a.message
+    }))
+  };
+}
+function mt(t, e) {
+  const a = e ? `${e}: ` : "";
+  return t.map((o) => `${a}${o.path}: ${o.message}`).join(`
+`);
+}
+const ee = l.object({
+  /** Unique identifier for the scenario (kebab-case) */
+  id: l.string().min(1).regex(/^[a-z][a-z0-9-]*$/, {
+    message: "Scenario ID must be kebab-case starting with a letter"
+  }),
+  /** Human-readable title */
+  title: l.string().min(1),
+  /** Optional description explaining the scenario */
+  description: l.string().optional(),
+  /** Component ID this scenario belongs to */
+  componentId: l.string().min(1),
+  /** Tags for search and filtering */
+  tags: l.array(l.string()).optional(),
+  /** The RenderNode tree that defines the DOM structure */
+  render: R,
+  /** Optional viewport configuration for screenshots */
+  viewport: l.object({
+    width: l.number().positive().optional(),
+    height: l.number().positive().optional()
+  }).optional(),
+  /** Optional background color override */
+  background: l.string().optional(),
+  /** Whether this is the primary scenario (shown first) */
+  primary: l.boolean().optional()
+}), ht = ee;
+function te(t) {
+  const e = ee.safeParse(t);
+  return e.success ? { success: !0, data: e.data } : {
+    success: !1,
+    errors: e.error.errors.map((a) => ({
+      path: a.path.join(".") || "(root)",
+      message: a.message
+    }))
+  };
+}
+function Se(t) {
+  return te(t);
+}
+function gt(t, e) {
+  const a = e ? `${e}: ` : "";
+  return t.map((o) => `${a}${o.path}: ${o.message}`).join(`
+`);
+}
+function ft(t) {
+  const e = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+  for (const { filePath: s, data: i, docs: c } of t.components) {
+    const d = $e(i);
+    if (d.success) {
+      if (d.data) {
+        const u = d.data;
+        a.set(u.id, {
+          ...u,
+          filePath: s,
+          docs: c,
+          scenarios: []
+        });
+      }
+    } else for (const u of d.errors || [])
+      e.push({
+        file: s,
+        path: u.path,
+        message: u.message
+      });
+  }
+  for (const { filePath: s, data: i } of t.scenarios) {
+    const c = te(i);
+    if (c.success) {
+      if (c.data) {
+        const d = c.data, u = {
+          ...d,
+          filePath: s
+        };
+        o.set(d.id, u);
+        const h = a.get(d.componentId);
+        h && h.scenarios.push(u);
+      }
+    } else for (const d of c.errors || [])
+      e.push({
+        file: s,
+        path: d.path,
+        message: d.message
+      });
+  }
+  for (const { filePath: s, data: i } of t.examples) {
+    const c = Se(i);
+    if (c.success) {
+      if (c.data) {
+        const d = c.data;
+        n.set(d.id, {
+          ...d,
+          filePath: s
+        });
+      }
+    } else for (const d of c.errors || [])
+      e.push({
+        file: s,
+        path: d.path,
+        message: d.message
+      });
+  }
+  const r = t.categories ?? {
+    items: [],
+    uncategorisedLabel: "Other"
+  };
+  return {
+    registry: { components: a, scenarios: o, examples: n, categories: r },
+    errors: e
+  };
+}
+function Ct() {
+  return {
+    components: /* @__PURE__ */ new Map(),
+    scenarios: /* @__PURE__ */ new Map(),
+    examples: /* @__PURE__ */ new Map(),
+    categories: { items: [], uncategorisedLabel: "Other" }
+  };
+}
+function ke(t) {
+  return Array.from(t.components.values()).filter((e) => e.kind !== "subcomponent");
+}
+function Le(t, e) {
+  return Array.from(t.components.values()).filter((a) => a.parentId === e);
+}
+function Ae(t, e, a) {
+  const o = e.toLowerCase();
+  return Array.from(t.components.values()).filter((n) => {
+    var r, s, i, c, d, u;
+    if (n.kind === "subcomponent")
+      return !1;
+    if (e) {
+      const h = n.id.toLowerCase().includes(o), p = n.title.toLowerCase().includes(o), g = (r = n.tags) == null ? void 0 : r.some(
+        ($) => $.toLowerCase().includes(o)
+      ), N = (s = n.description) == null ? void 0 : s.toLowerCase().includes(o);
+      if (!h && !p && !g && !N)
+        return !1;
+    }
+    return !((i = a == null ? void 0 : a.status) != null && i.length && !a.status.includes(n.status) || (c = a == null ? void 0 : a.kind) != null && c.length && !a.kind.includes(n.kind) || (d = a == null ? void 0 : a.tags) != null && d.length && !((u = n.tags) == null ? void 0 : u.some(
+      (p) => a.tags.includes(p)
+    )));
+  });
+}
+function Y(t) {
+  const e = ke(t), a = /* @__PURE__ */ new Map(), o = [];
+  for (const r of e)
+    r.category ? (a.has(r.category) || a.set(r.category, []), a.get(r.category).push(r)) : o.push(r);
+  const n = [];
+  for (const r of t.categories.items) {
+    const s = a.get(r.id) || [];
+    s.length > 0 && n.push({ category: r, components: s });
+  }
+  return o.length > 0 && n.push({ category: null, components: o }), n;
+}
+function bt(t) {
+  const e = [], a = [], o = /* @__PURE__ */ new Map();
+  for (const [n, r] of t.components)
+    o.has(n) || o.set(n, []), o.get(n).push(r.filePath);
+  for (const [n, r] of t.scenarios)
+    o.has(n) || o.set(n, []), o.get(n).push(r.filePath);
+  for (const [n, r] of t.examples)
+    o.has(n) || o.set(n, []), o.get(n).push(r.filePath);
+  for (const [n, r] of o)
+    r.length > 1 && e.push({
+      file: r.join(", "),
+      path: "id",
+      message: `Duplicate ID "${n}" found in multiple files`
+    });
+  for (const [n, r] of t.components) {
+    const s = r.playground.primaryScenarioId;
+    if (r.scenarios.some((c) => c.id === s) || e.push({
+      file: r.filePath,
+      path: "playground.primaryScenarioId",
+      message: `Primary scenario "${s}" not found for component "${n}"`
+    }), r.parentId && (t.components.has(r.parentId) || e.push({
+      file: r.filePath,
+      path: "parentId",
+      message: `Parent component "${r.parentId}" not found for component "${n}"`
+    })), r.subcomponents)
+      for (const c of r.subcomponents)
+        if (!t.components.has(c))
+          e.push({
+            file: r.filePath,
+            path: "subcomponents",
+            message: `Subcomponent "${c}" not found for component "${n}"`
+          });
+        else {
+          const d = t.components.get(c);
+          d.parentId !== n && a.push({
+            file: r.filePath,
+            path: "subcomponents",
+            message: `Subcomponent "${c}" has different parentId "${d.parentId}" than expected "${n}"`
+          });
+        }
+    r.scenarios.length === 0 && e.push({
+      file: r.filePath,
+      path: "scenarios",
+      message: `Component "${n}" has no scenarios`
+    });
+  }
+  for (const [n, r] of t.scenarios)
+    t.components.has(r.componentId) || e.push({
+      file: r.filePath,
+      path: "componentId",
+      message: `Component "${r.componentId}" not found for scenario "${n}"`
+    });
+  for (const [n, r] of t.examples)
+    t.components.has(r.componentId) || e.push({
+      file: r.filePath,
+      path: "componentId",
+      message: `Component "${r.componentId}" not found for example "${n}"`
+    });
+  return {
+    valid: e.length === 0,
+    errors: e,
+    warnings: a
+  };
+}
+function vt(t) {
+  const e = [];
+  if (t.errors.length > 0) {
+    e.push("Errors:");
+    for (const a of t.errors)
+      e.push(`  ${a.file}: ${a.path}: ${a.message}`);
+  }
+  if (t.warnings.length > 0) {
+    e.push("Warnings:");
+    for (const a of t.warnings)
+      e.push(`  ${a.file}: ${a.path}: ${a.message}`);
+  }
+  return e.join(`
+`);
+}
+function D(t) {
+  const e = document.createElement(t.element);
+  if (t.attrs)
+    for (const [a, o] of Object.entries(t.attrs))
+      o != null && (typeof o == "boolean" ? o && e.setAttribute(a, "") : e.setAttribute(a, String(o)));
+  if (t.props)
+    for (const [a, o] of Object.entries(t.props))
+      e[a] = o;
+  if (t.text !== void 0 && (e.textContent = t.text), t.slots)
+    for (const [a, o] of Object.entries(t.slots))
+      Ie(e, a, o);
+  if (t.children)
+    for (const a of t.children) {
+      const o = D(a);
+      e.appendChild(o);
+    }
+  return e;
+}
+function Ie(t, e, a) {
+  if (typeof a == "string") {
+    const o = document.createElement("span");
+    e !== "default" && o.setAttribute("slot", e), o.textContent = a, t.appendChild(o);
+  } else if (Array.isArray(a))
+    for (const o of a) {
+      const n = D(o);
+      e !== "default" && n.setAttribute("slot", e), t.appendChild(n);
+    }
+  else {
+    const o = D(a);
+    e !== "default" && o.setAttribute("slot", e), t.appendChild(o);
+  }
+}
+function ne(t, e) {
+  var o;
+  const a = [];
+  e.clear && (e.container.innerHTML = "");
+  try {
+    const n = D(t);
+    return e.container.appendChild(n), { element: n, errors: a };
+  } catch (n) {
+    const r = n instanceof Error ? n : new Error(String(n));
+    a.push({ node: t, error: r }), (o = e.onError) == null || o.call(e, r, t);
+    const s = document.createElement("div");
+    return s.setAttribute("data-catalogue-error", ""), s.textContent = `Render error: ${r.message}`, s.style.cssText = "color: red; padding: 1em; border: 1px solid red; font-family: monospace;", e.container.appendChild(s), { element: s, errors: a };
+  }
+}
+function ae(t, e, a) {
+  if (e) {
+    const o = t.getAttributeNames();
+    for (const n of o)
+      n in e || t.removeAttribute(n);
+    for (const [n, r] of Object.entries(e))
+      r == null ? t.removeAttribute(n) : typeof r == "boolean" ? r ? t.setAttribute(n, "") : t.removeAttribute(n) : t.setAttribute(n, String(r));
+  }
+  if (a)
+    for (const [o, n] of Object.entries(a))
+      t[o] = n;
+}
+function yt(t, e) {
+  ae(t, e.attrs, e.props), e.text !== void 0 && (t.textContent = e.text);
+}
+const oe = "catalogue-theme";
+function Pe() {
+  const t = localStorage.getItem(oe);
+  return t === "dark" || t === "light" ? t : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function J(t) {
+  localStorage.setItem(oe, t), document.documentElement.setAttribute("data-theme", t), document.querySelectorAll("[data-catalogue-container]").forEach((e) => {
+    e.setAttribute("data-theme", t);
+  });
+}
+function Te() {
+  const e = (document.documentElement.getAttribute("data-theme") || "light") === "light" ? "dark" : "light";
+  return J(e), e;
+}
+function re() {
+  const t = Pe();
+  return J(t), t;
+}
+function se() {
+  const t = document.createElement("button");
+  t.className = "catalogue-theme-toggle", t.setAttribute("type", "button"), t.setAttribute("aria-label", "Toggle theme"), t.setAttribute("title", "Toggle light/dark theme");
+  const e = () => {
+    const a = document.documentElement.getAttribute("data-theme") || "light";
+    t.innerHTML = a === "light" ? '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>' : '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
+  };
+  return e(), t.addEventListener("click", () => {
+    Te(), e();
+  }), t;
+}
+const Me = [
+  { name: "Mobile S", width: 320, height: 568 },
+  { name: "Mobile M", width: 375, height: 667 },
+  { name: "Mobile L", width: 425, height: 812 },
+  { name: "Tablet", width: 768, height: 1024 },
+  { name: "Laptop", width: 1024, height: 768 },
+  { name: "Desktop", width: 1440, height: 900 },
+  { name: "Full", width: 0, height: 0, fullScreen: !0 }
+], je = "width 0.3s ease, height 0.3s ease";
+function ze(t = {}) {
+  const {
+    initialWidth: e = "100%",
+    initialHeight: a = "auto",
+    minWidth: o = 200,
+    minHeight: n = 100,
+    maxWidth: r = 2e3,
+    maxHeight: s = 2e3,
+    onResize: i,
+    onFullScreenChange: c,
+    animatePresets: d = !0
+  } = t;
+  let u = !1;
+  const h = document.createElement("div");
+  h.className = "catalogue-resizer-wrapper";
+  const p = document.createElement("div");
+  p.className = "catalogue-resizer", p.setAttribute("data-catalogue-container", ""), p.style.width = e, p.style.height = a, p.style.minWidth = `${o}px`, p.style.minHeight = `${n}px`;
+  const g = document.createElement("div");
+  g.className = "catalogue-resizer-content", g.style.cssText = "container-type: inline-size; width: 100%; height: 100%;", p.appendChild(g);
+  const N = document.createElement("div");
+  N.className = "catalogue-resizer-handle catalogue-resizer-handle-right";
+  const $ = document.createElement("div");
+  $.className = "catalogue-resizer-handle catalogue-resizer-handle-bottom";
+  const I = document.createElement("div");
+  I.className = "catalogue-resizer-handle catalogue-resizer-handle-corner", p.appendChild(N), p.appendChild($), p.appendChild(I);
+  const b = document.createElement("div");
+  b.className = "catalogue-resizer-dimensions", p.appendChild(b);
+  const S = () => {
+    if (u)
+      b.textContent = "Full Screen";
+    else {
+      const y = p.getBoundingClientRect();
+      b.textContent = `${Math.round(y.width)} × ${Math.round(y.height)}`;
+    }
+  }, E = (y) => {
+    p.style.transition = y ? je : "none";
+  };
+  let T = !1, L = 0, m = 0, f = 0, v = 0, k = "corner";
+  const j = (y, C) => {
+    u && (u = !1, p.classList.remove("catalogue-resizer-fullscreen"), c == null || c(!1)), T = !0, k = C, L = y.clientX, m = y.clientY;
+    const x = p.getBoundingClientRect();
+    f = x.width, v = x.height, E(!1), document.body.style.cursor = C === "corner" ? "nwse-resize" : C === "right" ? "ew-resize" : "ns-resize", document.body.style.userSelect = "none", y.preventDefault();
+  }, w = (y) => {
+    if (!T) return;
+    const C = y.clientX - L, x = y.clientY - m;
+    let A = f, P = v;
+    (k === "right" || k === "corner") && (A = Math.max(o, Math.min(r, f + C))), (k === "bottom" || k === "corner") && (P = Math.max(n, Math.min(s, v + x))), p.style.width = `${A}px`, p.style.height = `${P}px`, S(), i == null || i(A, P);
+  }, M = () => {
+    T && (T = !1, document.body.style.cursor = "", document.body.style.userSelect = "");
+  };
+  return N.addEventListener("mousedown", (y) => j(y, "right")), $.addEventListener("mousedown", (y) => j(y, "bottom")), I.addEventListener("mousedown", (y) => j(y, "corner")), document.addEventListener("mousemove", w), document.addEventListener("mouseup", M), h.appendChild(p), p.addEventListener("transitionend", S), requestAnimationFrame(S), {
+    wrapper: h,
+    container: p,
+    content: g,
+    handleRight: N,
+    handleBottom: $,
+    handleCorner: I,
+    dimensionLabel: b,
+    setSize: (y, C, x = d) => {
+      const A = u;
+      y === "full" || C === "full" ? (u = !0, p.classList.add("catalogue-resizer-fullscreen"), E(x), p.style.width = "100%", p.style.height = "100%", S(), A || c == null || c(!0), requestAnimationFrame(() => {
+        const P = p.getBoundingClientRect();
+        i == null || i(P.width, P.height);
+      })) : (u = !1, p.classList.remove("catalogue-resizer-fullscreen"), E(x), p.style.width = `${y}px`, p.style.height = `${C}px`, S(), i == null || i(y, C), A && (c == null || c(!1)));
+    },
+    isFullScreen: () => u
+  };
+}
+function He(t, e = Me, a) {
+  const o = document.createElement("div");
+  o.className = "catalogue-breakpoint-presets";
+  let n = null;
+  for (const r of e) {
+    const s = document.createElement("button");
+    s.className = "catalogue-breakpoint-button", s.textContent = r.name, s.title = r.fullScreen ? "Fill available space" : `${r.width} × ${r.height}`, s.type = "button", s.addEventListener("click", () => {
+      n == null || n.classList.remove("active"), s.classList.add("active"), n = s, r.fullScreen ? t.setSize("full", "full", !0) : (t.setSize(r.width, r.height, !0), t.dimensionLabel.textContent = `${r.width} × ${r.height}`), a == null || a(r);
+    }), o.appendChild(s);
+  }
+  return o;
+}
+function Et(t, e, a, o = !0) {
+  t.setSize(e, a, o);
+}
+function Re(t) {
+  const {
+    code: e,
+    language: a = "html",
+    collapsible: o = !0,
+    collapsed: n = !1,
+    title: r = "Code"
+  } = t, s = document.createElement("div");
+  s.className = "catalogue-code-panel", s.setAttribute("data-language", a), n && s.setAttribute("data-collapsed", "");
+  const i = document.createElement("div");
+  i.className = "catalogue-code-panel-header";
+  const c = document.createElement("span");
+  c.className = "catalogue-code-panel-title", c.textContent = r, o && (c.style.cursor = "pointer", c.addEventListener("click", () => {
+    s.hasAttribute("data-collapsed") ? s.removeAttribute("data-collapsed") : s.setAttribute("data-collapsed", "");
+  }));
+  const d = document.createElement("button");
+  d.className = "catalogue-code-panel-copy", d.type = "button", d.textContent = "Copy", d.title = "Copy to clipboard", d.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(e), d.textContent = "Copied!", d.classList.add("copied"), setTimeout(() => {
+        d.textContent = "Copy", d.classList.remove("copied");
+      }, 2e3);
+    } catch {
+      d.textContent = "Failed", setTimeout(() => {
+        d.textContent = "Copy";
+      }, 2e3);
+    }
+  }), i.appendChild(c), i.appendChild(d);
+  const u = document.createElement("pre");
+  u.className = "catalogue-code-panel-content";
+  const h = document.createElement("code");
+  return h.className = `language-${a}`, h.textContent = e, u.appendChild(h), s.appendChild(i), s.appendChild(u), {
+    wrapper: s,
+    header: i,
+    content: u,
+    copyButton: d
+  };
+}
+function De(t, e) {
+  const a = t.content.querySelector("code");
+  a && (a.textContent = e);
+  const o = t.copyButton.cloneNode(!0);
+  o.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(e), o.textContent = "Copied!", o.classList.add("copied"), setTimeout(() => {
+        o.textContent = "Copy", o.classList.remove("copied");
+      }, 2e3);
+    } catch {
+      o.textContent = "Failed", setTimeout(() => {
+        o.textContent = "Copy";
+      }, 2e3);
+    }
+  }), t.copyButton.replaceWith(o), t.copyButton = o;
+}
+function xt(t, e = 2) {
+  const a = t.split(`
+`);
+  let o = 0;
+  const n = " ".repeat(e);
+  return a.map((r) => {
+    const s = r.trim();
+    if (!s) return "";
+    s.startsWith("</") && (o = Math.max(0, o - 1));
+    const i = n.repeat(o) + s;
+    return s.startsWith("<") && !s.startsWith("</") && !s.endsWith("/>") && !s.includes("</") && o++, i;
+  }).filter((r) => r.length > 0).join(`
+`);
+}
+class Oe {
+  constructor(e) {
+    V(this, "routes", []);
+    V(this, "options");
+    this.options = e, this.setupListeners();
+  }
+  /**
+   * Add a route.
+   */
+  route(e, a) {
+    const o = e.replace(/\//g, "\\/").replace(/:([a-zA-Z]+)/g, "(?<$1>[^/]+)");
+    return this.routes.push({
+      pattern: new RegExp(`^${o}$`),
+      handler: a
+    }), this;
+  }
+  /**
+   * Navigate to a path.
+   */
+  navigate(e) {
+    window.location.hash = e;
+  }
+  /**
+   * Get current path from hash.
+   */
+  getCurrentPath() {
+    return window.location.hash.slice(1) || "/";
+  }
+  /**
+   * Get query parameters from current URL.
+   */
+  getQueryParams() {
+    const e = window.location.hash.slice(1), a = e.indexOf("?");
+    return a === -1 ? new URLSearchParams() : new URLSearchParams(e.slice(a + 1));
+  }
+  /**
+   * Resolve the current route.
+   */
+  resolve() {
+    var r, s;
+    const e = window.location.hash.slice(1) || "/", a = e.indexOf("?"), o = a === -1 ? e : e.slice(0, a), n = this.getQueryParams();
+    for (const i of this.routes) {
+      const c = o.match(i.pattern);
+      if (c) {
+        const d = c.groups || {};
+        i.handler(d, n);
+        return;
+      }
+    }
+    (s = (r = this.options).onNotFound) == null || s.call(r, o);
+  }
+  /**
+   * Start listening for route changes.
+   */
+  setupListeners() {
+    window.addEventListener("hashchange", () => this.resolve()), window.addEventListener("DOMContentLoaded", () => this.resolve());
+  }
+  /**
+   * Manually trigger route resolution.
+   */
+  start() {
+    this.resolve();
+  }
+}
+function H(t, e, a) {
+  const o = document.createElement("a");
+  return o.href = `#${t}`, o.textContent = e, a && (o.className = a), o;
+}
+function wt(t, e) {
+  const a = t.replace(/\//g, "\\/").replace(/:([a-zA-Z]+)/g, "(?<$1>[^/]+)"), o = new RegExp(`^${a}$`), n = e.match(o);
+  return n ? n.groups || {} : null;
+}
+function Be(t) {
+  const { registry: e, onNavigate: a } = t, o = document.createElement("div");
+  o.className = "catalogue-landing", o.setAttribute("data-catalogue-root", "");
+  const n = document.createElement("header");
+  n.className = "catalogue-landing-header";
+  const r = document.createElement("h1");
+  r.className = "catalogue-landing-title", r.textContent = "Component Catalogue", n.appendChild(r), o.appendChild(n);
+  const s = document.createElement("div");
+  s.className = "catalogue-landing-controls";
+  const i = document.createElement("input");
+  i.type = "search", i.className = "catalogue-search-input", i.placeholder = "Search components...", i.setAttribute("aria-label", "Search components"), s.appendChild(i);
+  const c = document.createElement("div");
+  c.className = "catalogue-filters";
+  const d = K("Status", [
+    { value: "stable", label: "Stable" },
+    { value: "beta", label: "Beta" },
+    { value: "deprecated", label: "Deprecated" }
+  ]);
+  c.appendChild(d.container);
+  const u = K("Kind", [
+    { value: "standalone", label: "Standalone" },
+    { value: "feature", label: "Feature" }
+  ]);
+  c.appendChild(u.container), s.appendChild(c);
+  const h = e.categories.items.length > 0;
+  let p = null;
+  h && (p = document.createElement("button"), p.className = "catalogue-expand-toggle", p.textContent = "Collapse All", p.setAttribute("data-expanded", "true"), s.appendChild(p)), o.appendChild(s);
+  const g = document.createElement("div");
+  g.className = "catalogue-component-list", o.appendChild(g);
+  const N = d.container.querySelectorAll('input[type="checkbox"]'), $ = u.container.querySelectorAll('input[type="checkbox"]'), I = () => {
+    const b = i.value, S = Array.from(N).filter((m) => m.checked).map((m) => m.value), E = Array.from($).filter((m) => m.checked).map((m) => m.value), T = {
+      status: S.length > 0 ? S : void 0,
+      kind: E.length > 0 ? E : void 0
+    }, L = !!(b || T.status || T.kind);
+    if (g.innerHTML = "", h && !L) {
+      g.classList.remove("catalogue-component-list--flat");
+      const m = Y(e);
+      if (m.length === 0) {
+        const f = document.createElement("div");
+        f.className = "catalogue-empty-state", f.textContent = "No components found", g.appendChild(f);
+        return;
+      }
+      for (const f of m) {
+        const v = Fe(f, e.categories.uncategorisedLabel, a);
+        g.appendChild(v);
+      }
+    } else {
+      g.classList.add("catalogue-component-list--flat");
+      const m = L ? Ae(e, b, T) : Y(e).flatMap((f) => f.components);
+      if (m.length === 0) {
+        const f = document.createElement("div");
+        f.className = "catalogue-empty-state", f.textContent = "No components found", g.appendChild(f);
+        return;
+      }
+      for (const f of m) {
+        const v = ce(f, a);
+        g.appendChild(v);
+      }
+    }
+  };
+  return i.addEventListener("input", () => {
+    I();
+  }), N.forEach((b) => {
+    b.addEventListener("change", I);
+  }), $.forEach((b) => {
+    b.addEventListener("change", I);
+  }), p && p.addEventListener("click", () => {
+    const b = p.getAttribute("data-expanded") === "true";
+    g.querySelectorAll(".catalogue-category-section").forEach((E) => {
+      E.open = !b;
+    }), p.setAttribute("data-expanded", String(!b)), p.textContent = b ? "Expand All" : "Collapse All";
+  }), I(), {
+    root: o,
+    searchInput: i,
+    filterContainer: c,
+    componentList: g
+  };
+}
+function Fe(t, e, a) {
+  var d, u;
+  const o = document.createElement("details");
+  o.className = "catalogue-category-section", o.open = !0;
+  const n = document.createElement("summary");
+  n.className = "catalogue-category-header";
+  const r = ((d = t.category) == null ? void 0 : d.label) ?? e, s = document.createElement("span");
+  s.className = "catalogue-category-label", s.textContent = r;
+  const i = document.createElement("span");
+  i.className = "catalogue-category-count", i.textContent = `(${t.components.length})`, n.appendChild(s), n.appendChild(i), (u = t.category) != null && u.description && (n.title = t.category.description), o.appendChild(n);
+  const c = document.createElement("div");
+  c.className = "catalogue-category-content";
+  for (const h of t.components) {
+    const p = ce(h, a);
+    c.appendChild(p);
+  }
+  return o.appendChild(c), o;
+}
+function K(t, e) {
+  const a = document.createElement("div");
+  a.className = "catalogue-filter-group";
+  const o = document.createElement("span");
+  o.className = "catalogue-filter-label", o.textContent = t, a.appendChild(o);
+  for (const n of e) {
+    const r = document.createElement("label");
+    r.className = "catalogue-filter-option";
+    const s = document.createElement("input");
+    s.type = "checkbox", s.value = n.value;
+    const i = document.createElement("span");
+    i.textContent = n.label, r.appendChild(s), r.appendChild(i), a.appendChild(r);
+  }
+  return { container: a };
+}
+function ce(t, e) {
+  const a = document.createElement("div");
+  a.className = "catalogue-component-card", a.setAttribute("data-status", t.status), a.setAttribute("data-kind", t.kind);
+  const o = document.createElement("div");
+  o.className = "catalogue-component-card-header";
+  const n = document.createElement("h3");
+  n.className = "catalogue-component-card-title";
+  const r = H(`/component/${t.id}`, t.title);
+  r.addEventListener("click", (c) => {
+    c.preventDefault(), e(`/component/${t.id}`);
+  }), n.appendChild(r);
+  const s = document.createElement("span");
+  if (s.className = "catalogue-status-badge", s.setAttribute("data-status", t.status), s.textContent = t.status, o.appendChild(n), o.appendChild(s), a.appendChild(o), t.description) {
+    const c = document.createElement("p");
+    c.className = "catalogue-component-card-description", c.textContent = t.description, a.appendChild(c);
+  }
+  if (t.tags && t.tags.length > 0) {
+    const c = document.createElement("div");
+    c.className = "catalogue-component-card-tags";
+    for (const d of t.tags) {
+      const u = document.createElement("span");
+      u.className = "catalogue-tag", u.textContent = d, c.appendChild(u);
+    }
+    a.appendChild(c);
+  }
+  const i = document.createElement("div");
+  return i.className = "catalogue-component-card-meta", i.textContent = `${t.scenarios.length} scenario${t.scenarios.length !== 1 ? "s" : ""}`, a.appendChild(i), a;
+}
+function qe(t, e) {
+  t.innerHTML = "";
+  const a = Be(e);
+  return t.appendChild(a.root), a;
+}
+function Ve(t) {
+  const { registry: e, componentId: a, onNavigate: o } = t, n = e.components.get(a);
+  if (!n)
+    return null;
+  const r = document.createElement("div");
+  r.className = "catalogue-component-page", r.setAttribute("data-catalogue-root", "");
+  const s = document.createElement("nav");
+  s.className = "catalogue-breadcrumb", s.setAttribute("aria-label", "Breadcrumb");
+  const i = H("/", "Components");
+  i.addEventListener("click", (m) => {
+    m.preventDefault(), o("/");
+  }), s.appendChild(i);
+  const c = document.createElement("span");
+  if (c.className = "catalogue-breadcrumb-separator", c.textContent = "/", s.appendChild(c), n.parentId) {
+    const m = e.components.get(n.parentId);
+    if (m) {
+      const f = H(`/component/${m.id}`, m.title);
+      f.addEventListener("click", (k) => {
+        k.preventDefault(), o(`/component/${m.id}`);
+      }), s.appendChild(f);
+      const v = document.createElement("span");
+      v.className = "catalogue-breadcrumb-separator", v.textContent = "/", s.appendChild(v);
+    }
+  }
+  const d = document.createElement("span");
+  d.className = "catalogue-breadcrumb-current", d.textContent = n.title, s.appendChild(d), r.appendChild(s);
+  const u = document.createElement("header");
+  u.className = "catalogue-component-header";
+  const h = document.createElement("div");
+  h.className = "catalogue-component-title-row";
+  const p = document.createElement("h1");
+  p.className = "catalogue-component-title", p.textContent = n.title, h.appendChild(p);
+  const g = document.createElement("span");
+  if (g.className = "catalogue-status-badge", g.setAttribute("data-status", n.status), g.textContent = n.status, h.appendChild(g), u.appendChild(h), n.description) {
+    const m = document.createElement("p");
+    m.className = "catalogue-component-description", m.textContent = n.description, u.appendChild(m);
+  }
+  if (n.tags && n.tags.length > 0) {
+    const m = document.createElement("div");
+    m.className = "catalogue-component-tags";
+    for (const f of n.tags) {
+      const v = document.createElement("span");
+      v.className = "catalogue-tag", v.textContent = f, m.appendChild(v);
+    }
+    u.appendChild(m);
+  }
+  const N = document.createElement("div");
+  N.className = "catalogue-component-actions";
+  const $ = document.createElement("a");
+  $.href = `#/playground/${n.id}`, $.className = "catalogue-button catalogue-button-primary", $.textContent = "Open Playground", $.addEventListener("click", (m) => {
+    m.preventDefault(), o(`/playground/${n.id}`);
+  }), N.appendChild($), u.appendChild(N), r.appendChild(u);
+  const I = Le(e, a);
+  if (I.length > 0) {
+    const m = document.createElement("section");
+    m.className = "catalogue-subcomponents-section";
+    const f = document.createElement("h2");
+    f.textContent = "Subcomponents", m.appendChild(f);
+    const v = document.createElement("div");
+    v.className = "catalogue-subcomponents-list";
+    for (const k of I) {
+      const j = document.createElement("div");
+      j.className = "catalogue-subcomponent-card";
+      const w = H(`/component/${k.id}`, k.title);
+      if (w.addEventListener("click", (M) => {
+        M.preventDefault(), o(`/component/${k.id}`);
+      }), j.appendChild(w), k.description) {
+        const M = document.createElement("p");
+        M.textContent = k.description, j.appendChild(M);
+      }
+      v.appendChild(j);
+    }
+    m.appendChild(v), r.appendChild(m);
+  }
+  const b = document.createElement("section");
+  b.className = "catalogue-variants-section";
+  const S = document.createElement("h2");
+  S.textContent = "Variants", b.appendChild(S);
+  const E = document.createElement("div");
+  E.className = "catalogue-variants-grid";
+  const T = [...n.scenarios].sort((m, f) => m.id === n.playground.primaryScenarioId ? -1 : f.id === n.playground.primaryScenarioId ? 1 : 0);
+  for (const m of T) {
+    const f = We(m, n, o);
+    E.appendChild(f);
+  }
+  b.appendChild(E), r.appendChild(b);
+  let L = null;
+  if (n.docs) {
+    L = document.createElement("div"), L.className = "catalogue-docs-section";
+    const m = document.createElement("h2");
+    m.textContent = "Documentation", L.appendChild(m);
+    const f = document.createElement("div");
+    f.className = "catalogue-docs-content", f.innerHTML = de.parse(n.docs), L.appendChild(f), r.appendChild(L);
+  }
+  return {
+    root: r,
+    header: u,
+    variantsGrid: E,
+    docsSection: L
+  };
+}
+function We(t, e, a) {
+  const o = document.createElement("div");
+  o.className = "catalogue-scenario-card";
+  const n = t.id === e.playground.primaryScenarioId;
+  n && o.classList.add("catalogue-scenario-card-primary");
+  const r = document.createElement("div");
+  r.className = "catalogue-scenario-preview", r.setAttribute("data-catalogue-container", "");
+  try {
+    ne(t.render, { container: r, clear: !0 });
+  } catch (h) {
+    const p = document.createElement("div");
+    p.className = "catalogue-scenario-error", p.textContent = `Render error: ${h instanceof Error ? h.message : "Unknown error"}`, r.appendChild(p);
+  }
+  o.appendChild(r);
+  const s = document.createElement("div");
+  s.className = "catalogue-scenario-info";
+  const i = document.createElement("div");
+  i.className = "catalogue-scenario-title-row";
+  const c = document.createElement("h3");
+  if (c.className = "catalogue-scenario-title", c.textContent = t.title, i.appendChild(c), n) {
+    const h = document.createElement("span");
+    h.className = "catalogue-primary-badge", h.textContent = "Primary", i.appendChild(h);
+  }
+  if (s.appendChild(i), t.description) {
+    const h = document.createElement("p");
+    h.className = "catalogue-scenario-description", h.textContent = t.description, s.appendChild(h);
+  }
+  const d = document.createElement("div");
+  d.className = "catalogue-scenario-links";
+  const u = document.createElement("a");
+  return u.href = `#/harness/${t.id}`, u.className = "catalogue-link", u.textContent = "Harness", u.addEventListener("click", (h) => {
+    h.preventDefault(), a(`/harness/${t.id}`);
+  }), d.appendChild(u), s.appendChild(d), o.appendChild(s), o;
+}
+function Ue(t, e) {
+  t.innerHTML = "";
+  const a = Ve(e);
+  if (!a) {
+    const o = document.createElement("div");
+    return o.className = "catalogue-not-found", o.textContent = `Component "${e.componentId}" not found`, t.appendChild(o), null;
+  }
+  return t.appendChild(a.root), a;
+}
+function W(t, e = {}) {
+  const { indent: a = "  ", includeScript: o = !0, elementId: n } = e, r = [], s = [];
+  if (B(t, r, s, "", a, n), o && s.length > 0) {
+    r.push(""), r.push('<script type="module">');
+    const i = n ? `#${n}` : t.element;
+    r.push(`${a}const el = document.querySelector('${i}');`);
+    for (const { key: c, value: d } of s) {
+      const u = JSON.stringify(d);
+      r.push(`${a}el.${c} = ${u};`);
+    }
+    r.push("<\/script>");
+  }
+  return r.join(`
+`);
+}
+function B(t, e, a, o, n, r) {
+  var u, h;
+  let s = `<${t.element}`;
+  if (r && (s += ` id="${U(r)}"`), t.attrs)
+    for (const [p, g] of Object.entries(t.attrs))
+      g != null && (typeof g == "boolean" ? g && (s += ` ${p}`) : s += ` ${p}="${U(String(g))}"`);
+  if (t.props)
+    for (const [p, g] of Object.entries(t.props))
+      a.push({ key: p, value: g });
+  if (!(t.text !== void 0 || ((u = t.children) == null ? void 0 : u.length) || t.slots && Object.keys(t.slots).length > 0) && (/* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ])).has(t.element)) {
+    e.push(`${o}${s} />`);
+    return;
+  }
+  if (s += ">", t.text !== void 0 && !((h = t.children) != null && h.length) && !t.slots) {
+    e.push(`${o}${s}${F(t.text)}</${t.element}>`);
+    return;
+  }
+  e.push(`${o}${s}`);
+  const d = o + n;
+  if (t.text !== void 0 && e.push(`${d}${F(t.text)}`), t.slots)
+    for (const [p, g] of Object.entries(t.slots))
+      Je(g, p, e, a, d, n);
+  if (t.children)
+    for (const p of t.children)
+      B(p, e, a, d, n);
+  e.push(`${o}</${t.element}>`);
+}
+function Je(t, e, a, o, n, r) {
+  if (typeof t == "string")
+    e === "default" ? a.push(`${n}${F(t)}`) : a.push(`${n}<span slot="${U(e)}">${F(t)}</span>`);
+  else if (Array.isArray(t))
+    for (const s of t) {
+      const i = e === "default" ? s : X(s, e);
+      B(i, a, o, n, r);
+    }
+  else {
+    const s = e === "default" ? t : X(t, e);
+    B(s, a, o, n, r);
+  }
+}
+function X(t, e) {
+  return {
+    ...t,
+    attrs: {
+      ...t.attrs,
+      slot: e
+    }
+  };
+}
+function F(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function U(t) {
+  return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function Nt(t, e = {}) {
+  return W(t, { ...e, includeScript: !1 });
+}
+function $t(t, e, a = {}) {
+  const { indent: o = "  " } = a;
+  if (!t.props || Object.keys(t.props).length === 0)
+    return null;
+  const n = [];
+  n.push(`const el = document.querySelector('${e}');`);
+  for (const [r, s] of Object.entries(t.props)) {
+    const i = JSON.stringify(s);
+    n.push(`el.${r} = ${i};`);
+  }
+  return n.map((r) => `${o}${r}`).join(`
+`);
+}
+function Ye(t) {
+  const { component: e, values: a, onChange: o } = t, n = document.createElement("div");
+  n.className = "catalogue-controls";
+  const r = /* @__PURE__ */ new Map();
+  for (const [s, i] of Object.entries(e.playground.controls)) {
+    const c = Ke(s, i, a[s], (d) => {
+      o(s, d);
+    });
+    r.set(s, c.wrapper), n.appendChild(c.wrapper);
+  }
+  return { container: n, controls: r };
+}
+function Ke(t, e, a, o) {
+  const n = document.createElement("div");
+  n.className = "catalogue-control", n.setAttribute("data-control-type", e.type);
+  const r = document.createElement("label");
+  r.className = "catalogue-control-label", r.textContent = e.label || t, n.appendChild(r);
+  let s;
+  switch (e.type) {
+    case "text":
+      s = Xe(t, e, a, o);
+      break;
+    case "number":
+      s = Ge(t, e, a, o);
+      break;
+    case "boolean":
+      s = _e(t, e, a, o);
+      break;
+    case "select":
+      s = Qe(t, e, a, o);
+      break;
+    case "radio":
+      s = Ze(t, e, a, o);
+      break;
+    case "color":
+      s = et(t, e, a, o);
+      break;
+    case "range":
+      s = tt(t, e, a, o);
+      break;
+    case "json":
+      s = nt(t, e, a, o);
+      break;
+    default:
+      s = document.createElement("span"), s.textContent = "Unknown control type";
+  }
+  return n.appendChild(s), { wrapper: n, input: s };
+}
+function Xe(t, e, a, o) {
+  const n = document.createElement("input");
+  return n.type = "text", n.className = "catalogue-control-input", n.name = t, n.value = a ?? e.defaultValue ?? "", e.placeholder && (n.placeholder = e.placeholder), n.addEventListener("input", () => {
+    o(n.value);
+  }), n;
+}
+function Ge(t, e, a, o) {
+  const n = document.createElement("input");
+  return n.type = "number", n.className = "catalogue-control-input", n.name = t, n.value = String(a ?? e.defaultValue ?? 0), e.min !== void 0 && (n.min = String(e.min)), e.max !== void 0 && (n.max = String(e.max)), e.step !== void 0 && (n.step = String(e.step)), n.addEventListener("input", () => {
+    o(parseFloat(n.value) || 0);
+  }), n;
+}
+function _e(t, e, a, o) {
+  const n = document.createElement("div");
+  n.className = "catalogue-control-checkbox";
+  const r = document.createElement("input");
+  return r.type = "checkbox", r.className = "catalogue-control-checkbox-input", r.name = t, r.checked = a ?? e.defaultValue ?? !1, r.addEventListener("change", () => {
+    o(r.checked);
+  }), n.appendChild(r), n;
+}
+function Qe(t, e, a, o) {
+  const n = document.createElement("select");
+  n.className = "catalogue-control-select", n.name = t;
+  for (const r of e.options) {
+    const s = document.createElement("option");
+    typeof r == "string" ? (s.value = r, s.textContent = r) : (s.value = r.value, s.textContent = r.label), n.appendChild(s);
+  }
+  return n.value = a ?? e.defaultValue ?? "", n.addEventListener("change", () => {
+    o(n.value);
+  }), n;
+}
+function Ze(t, e, a, o) {
+  const n = document.createElement("div");
+  n.className = "catalogue-control-radio-group";
+  const r = a ?? e.defaultValue;
+  for (const s of e.options) {
+    const i = document.createElement("label");
+    i.className = "catalogue-control-radio";
+    const c = document.createElement("input");
+    c.type = "radio", c.name = t;
+    const d = typeof s == "string" ? s : s.value, u = typeof s == "string" ? s : s.label;
+    c.value = d, c.checked = d === r, c.addEventListener("change", () => {
+      c.checked && o(c.value);
+    });
+    const h = document.createElement("span");
+    h.textContent = u, i.appendChild(c), i.appendChild(h), n.appendChild(i);
+  }
+  return n;
+}
+function et(t, e, a, o) {
+  const n = document.createElement("input");
+  return n.type = "color", n.className = "catalogue-control-color", n.name = t, n.value = a ?? e.defaultValue ?? "#000000", n.addEventListener("input", () => {
+    o(n.value);
+  }), n;
+}
+function tt(t, e, a, o) {
+  const n = document.createElement("div");
+  n.className = "catalogue-control-range-wrapper";
+  const r = document.createElement("input");
+  r.type = "range", r.className = "catalogue-control-range", r.name = t, r.min = String(e.min), r.max = String(e.max), e.step !== void 0 && (r.step = String(e.step)), r.value = String(a ?? e.defaultValue ?? e.min);
+  const s = document.createElement("span");
+  return s.className = "catalogue-control-range-value", s.textContent = r.value, r.addEventListener("input", () => {
+    s.textContent = r.value, o(parseFloat(r.value));
+  }), n.appendChild(r), n.appendChild(s), n;
+}
+function nt(t, e, a, o) {
+  const n = document.createElement("textarea");
+  n.className = "catalogue-control-json", n.name = t, n.rows = 4;
+  const r = a ?? e.defaultValue;
+  return n.value = r !== void 0 ? JSON.stringify(r, null, 2) : "", n.addEventListener("input", () => {
+    try {
+      const s = JSON.parse(n.value);
+      n.classList.remove("invalid"), o(s);
+    } catch {
+      n.classList.add("invalid");
+    }
+  }), n;
+}
+function at(t) {
+  const { registry: e, componentId: a, onNavigate: o } = t, n = e.components.get(a);
+  if (!n)
+    return null;
+  const r = n.scenarios.find(
+    (C) => C.id === n.playground.primaryScenarioId
+  );
+  if (!r)
+    return null;
+  re();
+  const s = document.createElement("div");
+  s.className = "catalogue-playground", s.setAttribute("data-catalogue-root", "");
+  const i = document.createElement("header");
+  i.className = "catalogue-playground-header";
+  const c = document.createElement("nav");
+  c.className = "catalogue-breadcrumb";
+  const d = H("/", "Components");
+  d.addEventListener("click", (C) => {
+    C.preventDefault(), o("/");
+  }), c.appendChild(d);
+  const u = document.createElement("span");
+  u.className = "catalogue-breadcrumb-separator", u.textContent = "/", c.appendChild(u);
+  const h = H(`/component/${n.id}`, n.title);
+  h.addEventListener("click", (C) => {
+    C.preventDefault(), o(`/component/${n.id}`);
+  }), c.appendChild(h);
+  const p = document.createElement("span");
+  p.className = "catalogue-breadcrumb-separator", p.textContent = "/", c.appendChild(p);
+  const g = document.createElement("span");
+  g.className = "catalogue-breadcrumb-current", g.textContent = "Playground", c.appendChild(g), i.appendChild(c);
+  const N = document.createElement("div");
+  N.className = "catalogue-playground-title-row";
+  const $ = document.createElement("h1");
+  $.textContent = `${n.title} Playground`, N.appendChild($);
+  const I = se();
+  N.appendChild(I), i.appendChild(N), s.appendChild(i);
+  const b = document.createElement("div");
+  b.className = "catalogue-playground-main";
+  const S = document.createElement("div");
+  if (S.className = "catalogue-playground-preview-section", n.scenarios.length > 1) {
+    const C = document.createElement("div");
+    C.className = "catalogue-scenario-selector";
+    const x = document.createElement("label");
+    x.textContent = "Scenario: ";
+    const A = document.createElement("select");
+    A.className = "catalogue-scenario-select";
+    for (const P of n.scenarios) {
+      const z = document.createElement("option");
+      z.value = P.id, z.textContent = P.title, P.id === r.id && (z.selected = !0), A.appendChild(z);
+    }
+    x.appendChild(A), C.appendChild(x), S.appendChild(C), A.addEventListener("change", () => {
+      const P = n.scenarios.find((z) => z.id === A.value);
+      P && (w = structuredClone(P.render), O(), q());
+    });
+  }
+  const E = ze({
+    initialWidth: "100%",
+    initialHeight: "400px",
+    onResize: (C, x) => {
+    },
+    onFullScreenChange: (C) => {
+      s.classList.toggle("catalogue-playground-fullscreen", C);
+    }
+  }), T = He(E);
+  S.appendChild(T), S.appendChild(E.wrapper), b.appendChild(S);
+  const L = document.createElement("div");
+  L.className = "catalogue-playground-sidebar";
+  const m = document.createElement("div");
+  m.className = "catalogue-playground-controls-section";
+  const f = document.createElement("h2");
+  f.textContent = "Controls", m.appendChild(f);
+  const v = document.createElement("div");
+  v.className = "catalogue-controls-container", m.appendChild(v), L.appendChild(m);
+  const k = document.createElement("div");
+  k.className = "catalogue-playground-code-section";
+  const j = Re({
+    code: W(r.render),
+    title: "HTML",
+    collapsible: !0,
+    collapsed: !1
+  });
+  k.appendChild(j.wrapper), L.appendChild(k), b.appendChild(L), s.appendChild(b);
+  let w = structuredClone(r.render), M = null;
+  const O = () => {
+    E.content.innerHTML = "";
+    try {
+      M = D(w), E.content.appendChild(M);
+    } catch (C) {
+      const x = document.createElement("div");
+      x.className = "catalogue-render-error", x.textContent = `Error: ${C instanceof Error ? C.message : "Unknown error"}`, E.content.appendChild(x), M = null;
+    }
+  }, q = () => {
+    const C = W(w);
+    De(j, C);
+  }, y = Ye({
+    component: n,
+    values: ot(n, w),
+    onChange: (C, x) => {
+      w.attrs || (w.attrs = {});
+      const A = n.playground.controls[C];
+      A && (A.type === "json" ? (w.props || (w.props = {}), w.props[C] = x) : A.type === "boolean" ? x ? w.attrs[C] = !0 : delete w.attrs[C] : w.attrs[C] = x), M ? ae(M, w.attrs, w.props) : O(), q();
+    }
+  });
+  return v.appendChild(y.container), O(), {
+    root: s,
+    preview: E.content,
+    controls: v,
+    codePanel: k
+  };
+}
+function ot(t, e) {
+  const a = {};
+  for (const [o, n] of Object.entries(t.playground.controls))
+    e.attrs && o in e.attrs ? a[o] = e.attrs[o] : e.props && o in e.props ? a[o] = e.props[o] : "defaultValue" in n && (a[o] = n.defaultValue);
+  return a;
+}
+function rt(t, e) {
+  t.innerHTML = "";
+  const a = at(e);
+  if (!a) {
+    const o = document.createElement("div");
+    return o.className = "catalogue-not-found", o.textContent = `Component "${e.componentId}" not found or missing primary scenario`, t.appendChild(o), null;
+  }
+  return t.appendChild(a.root), a;
+}
+function st(t) {
+  const { registry: e, scenarioId: a, query: o } = t, n = e.scenarios.get(a);
+  if (!n)
+    return null;
+  const r = o.get("theme") || "light", s = o.get("w") ? parseInt(o.get("w"), 10) : void 0, i = o.get("h") ? parseInt(o.get("h"), 10) : void 0, c = o.get("bg") || n.background;
+  J(r);
+  const d = document.createElement("div");
+  d.className = "catalogue-harness", d.setAttribute("data-catalogue-root", ""), d.setAttribute("data-theme", r);
+  const u = document.createElement("div");
+  u.className = "catalogue-harness-container", u.setAttribute("data-catalogue-container", ""), u.setAttribute("data-theme", r), s !== void 0 && (u.style.width = `${s}px`), i !== void 0 && (u.style.height = `${i}px`), c && (u.style.backgroundColor = c), !s && !i && n.viewport && (n.viewport.width && (u.style.width = `${n.viewport.width}px`), n.viewport.height && (u.style.height = `${n.viewport.height}px`));
+  try {
+    ne(n.render, { container: u, clear: !0 });
+  } catch (h) {
+    const p = document.createElement("div");
+    p.setAttribute("data-catalogue-error", ""), p.style.cssText = "color: red; padding: 1em; font-family: monospace;", p.textContent = `Render error: ${h instanceof Error ? h.message : "Unknown error"}`, u.appendChild(p);
+  }
+  return d.appendChild(u), {
+    root: d,
+    container: u
+  };
+}
+function G(t, e) {
+  t.innerHTML = "", document.body.classList.add("catalogue-harness-body");
+  const a = st(e);
+  if (!a) {
+    const o = document.createElement("div");
+    return o.className = "catalogue-not-found", o.setAttribute("data-catalogue-error", ""), o.textContent = `Scenario "${e.scenarioId}" not found`, t.appendChild(o), null;
+  }
+  return t.appendChild(a.root), a;
+}
+function _(t, e) {
+  const a = new URLSearchParams();
+  e != null && e.theme && a.set("theme", e.theme), (e == null ? void 0 : e.width) !== void 0 && a.set("w", String(e.width)), (e == null ? void 0 : e.height) !== void 0 && a.set("h", String(e.height)), e != null && e.background && a.set("bg", e.background);
+  const o = a.toString();
+  return `/harness/${t}${o ? `?${o}` : ""}`;
+}
+function St(t, e) {
+  const a = [], o = ["light", "dark"], n = e || [
+    { width: 375, height: 667 },
+    // Mobile
+    { width: 1024, height: 768 }
+    // Desktop
+  ];
+  for (const [r, s] of t.scenarios) {
+    for (const i of o)
+      a.push({
+        scenarioId: r,
+        componentId: s.componentId,
+        url: _(r, { theme: i }),
+        theme: i
+      });
+    for (const i of n)
+      for (const c of o)
+        a.push({
+          scenarioId: r,
+          componentId: s.componentId,
+          url: _(r, {
+            theme: c,
+            width: i.width,
+            height: i.height
+          }),
+          theme: c,
+          width: i.width,
+          height: i.height
+        });
+  }
+  return a;
+}
+function ct(t) {
+  const { container: e, registry: a, basePath: o = "" } = t;
+  re();
+  const n = new Oe({
+    basePath: o,
+    root: e,
+    onNotFound: (s) => {
+      e.innerHTML = "";
+      const i = document.createElement("div");
+      i.className = "catalogue-not-found", i.innerHTML = `
+        <h1>Page Not Found</h1>
+        <p>The page "${s}" does not exist.</p>
+        <a href="#/">Back to Components</a>
+      `, e.appendChild(i);
+    }
+  }), r = (s) => {
+    n.navigate(s);
+  };
+  return n.route("/", () => {
+    qe(e, { registry: a, onNavigate: r }), Q(e, r);
+  }), n.route("/component/:componentId", (s) => {
+    Ue(e, {
+      registry: a,
+      componentId: s.componentId,
+      onNavigate: r
+    }), Q(e, r);
+  }), n.route("/playground/:componentId", (s) => {
+    rt(e, {
+      registry: a,
+      componentId: s.componentId,
+      onNavigate: r
+    });
+  }), n.route("/harness/:scenarioId", (s, i) => {
+    G(e, {
+      registry: a,
+      scenarioId: s.scenarioId,
+      query: i
+    });
+  }), n.route("/example/:exampleId", (s, i) => {
+    const c = a.examples.get(s.exampleId);
+    c ? G(e, {
+      registry: {
+        ...a,
+        scenarios: /* @__PURE__ */ new Map([[c.id, { ...c, filePath: c.filePath }]])
+      },
+      scenarioId: s.exampleId,
+      query: i
+    }) : n.navigate("/");
+  }), {
+    router: n,
+    start: () => n.start(),
+    navigate: r,
+    registry: a
+  };
+}
+function Q(t, e) {
+  if (t.querySelector(".catalogue-global-header"))
+    return;
+  const o = t.querySelector("[data-catalogue-root]");
+  if (!o)
+    return;
+  const n = document.createElement("div");
+  n.className = "catalogue-global-header";
+  const r = document.createElement("a");
+  r.href = "#/", r.className = "catalogue-home-link", r.textContent = "Component Catalogue", r.addEventListener("click", (i) => {
+    i.preventDefault(), e("/");
+  }), n.appendChild(r);
+  const s = se();
+  n.appendChild(s), o.insertBefore(n, o.firstChild);
+}
+function kt(t, e, a) {
+  const o = document.querySelector(t);
+  if (!o)
+    throw new Error(`Container element not found: ${t}`);
+  const n = ct({
+    container: o,
+    registry: e,
+    ...a
+  });
+  return n.start(), n;
+}
+export {
+  xe as ComponentExportsSchema,
+  Ee as ComponentKindSchema,
+  Ne as ComponentSchema,
+  ye as ComponentStatusSchema,
+  Z as ControlSpecSchema,
+  Me as DEFAULT_BREAKPOINTS,
+  ht as ExampleSchema,
+  we as PlaygroundConfigSchema,
+  R as RenderNodeSchema,
+  Oe as Router,
+  ee as ScenarioSchema,
+  yt as applyNodeToElement,
+  He as createBreakpointPresets,
+  ct as createCatalogueApp,
+  Re as createCodePanel,
+  Ve as createComponentPage,
+  Ye as createControls,
+  Ct as createEmptyRegistry,
+  st as createHarnessPage,
+  Be as createLandingPage,
+  H as createNavLink,
+  at as createPlaygroundPage,
+  ze as createResizer,
+  se as createThemeToggle,
+  mt as formatComponentErrors,
+  xt as formatHtml,
+  gt as formatScenarioErrors,
+  vt as formatValidationErrors,
+  W as generateHtml,
+  Nt as generateHtmlOnly,
+  $t as generatePropsScript,
+  St as getAllHarnessUrls,
+  Y as getComponentsByCategory,
+  _ as getHarnessUrl,
+  Pe as getInitialTheme,
+  ke as getStandaloneComponents,
+  Le as getSubcomponents,
+  re as initTheme,
+  ft as loadRegistry,
+  kt as mountCatalogueApp,
+  wt as parseRouteParams,
+  ne as render,
+  Ue as renderComponentPage,
+  G as renderHarnessPage,
+  qe as renderLandingPage,
+  D as renderNode,
+  rt as renderPlaygroundPage,
+  Ae as searchComponents,
+  Et as setResizerDimensions,
+  J as setTheme,
+  Te as toggleTheme,
+  De as updateCodePanel,
+  ae as updateElement,
+  $e as validateComponent,
+  pt as validateControlSpec,
+  Se as validateExample,
+  bt as validateRegistry,
+  ut as validateRenderNode,
+  te as validateScenario
+};
+//# sourceMappingURL=index.js.map