@jogak/ui 0.1.0-alpha.0

package/dist/index.mjs

@@ -0,0 +1,1217 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useState as x, useEffect as v, useRef as V, useMemo as w, useCallback as R } from "react";
+import { defaultActionChannel as z, ComponentRegistry as U, defaultRegistry as F } from "@jogak/core";
+import { useRegistryMeta as _, useEntry as G, reactAdapter as j, JogakProvider as T, useRegistry as q } from "@jogak/react";
+import { themes as L, Highlight as Q } from "prism-react-renderer";
+function Y({
+  selectedEntryId: e,
+  selectedJogakName: t,
+  onSelect: o
+}) {
+  const [i, d] = x(""), { metaTree: r, searchMeta: s } = _(), l = i.trim().length > 0 ? s(i) : null;
+  return /* @__PURE__ */ c(
+    "aside",
+    {
+      "data-testid": "sidebar",
+      style: {
+        borderRight: "1px solid #e5e7eb",
+        height: "100%",
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ n("div", { style: { padding: "12px", borderBottom: "1px solid #e5e7eb" }, children: /* @__PURE__ */ n(
+          "input",
+          {
+            type: "search",
+            placeholder: "Search components...",
+            value: i,
+            onChange: (a) => {
+              d(a.target.value);
+            },
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              border: "1px solid #d1d5db",
+              borderRadius: 4
+            },
+            "aria-label": "Search components"
+          }
+        ) }),
+        /* @__PURE__ */ n("nav", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: l !== null ? /* @__PURE__ */ n(
+          X,
+          {
+            metas: l,
+            selectedEntryId: e,
+            selectedJogakName: t,
+            onSelect: o
+          }
+        ) : /* @__PURE__ */ n(
+          H,
+          {
+            node: r,
+            selectedEntryId: e,
+            selectedJogakName: t,
+            onSelect: o
+          }
+        ) })
+      ]
+    }
+  );
+}
+function X({
+  metas: e,
+  selectedEntryId: t,
+  selectedJogakName: o,
+  onSelect: i
+}) {
+  return e.length === 0 ? /* @__PURE__ */ n("p", { style: { padding: "0 12px", color: "#9ca3af", fontSize: 13 }, children: "No results" }) : /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: e.map((d) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+    D,
+    {
+      meta: d,
+      selectedEntryId: t,
+      selectedJogakName: o,
+      onSelect: i,
+      indent: 0
+    }
+  ) }, d.id)) });
+}
+function H({
+  node: e,
+  selectedEntryId: t,
+  selectedJogakName: o,
+  onSelect: i,
+  depth: d = 0
+}) {
+  return /* @__PURE__ */ n(
+    "ul",
+    {
+      style: {
+        listStyle: "none",
+        margin: 0,
+        padding: `0 0 0 ${d * 12}px`
+      },
+      children: Object.entries(e).map(([r, s]) => /* @__PURE__ */ n("li", { children: "id" in s ? /* @__PURE__ */ n(
+        D,
+        {
+          meta: s,
+          selectedEntryId: t,
+          selectedJogakName: o,
+          onSelect: i,
+          indent: 0
+        }
+      ) : /* @__PURE__ */ n(
+        Z,
+        {
+          label: r,
+          node: s,
+          selectedEntryId: t,
+          selectedJogakName: o,
+          onSelect: i,
+          depth: d + 1
+        }
+      ) }, r))
+    }
+  );
+}
+function Z({
+  label: e,
+  node: t,
+  selectedEntryId: o,
+  selectedJogakName: i,
+  onSelect: d,
+  depth: r
+}) {
+  const [s, l] = x(!0);
+  return /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          l((a) => !a);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          width: "100%",
+          padding: "4px 12px",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 12,
+          fontWeight: 600,
+          color: "#6b7280",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        "aria-expanded": s,
+        children: [
+          /* @__PURE__ */ n("span", { children: s ? "▾" : "▸" }),
+          e
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ n(
+      H,
+      {
+        node: t,
+        selectedEntryId: o,
+        selectedJogakName: i,
+        onSelect: d,
+        depth: r
+      }
+    )
+  ] });
+}
+function D({
+  meta: e,
+  selectedEntryId: t,
+  selectedJogakName: o,
+  onSelect: i,
+  indent: d
+}) {
+  const r = e.id === t, [s, l] = x(r);
+  v(() => {
+    r && l(!0);
+  }, [r]);
+  const a = e.title.split("/").pop() ?? e.title, m = 16 + d * 12;
+  return /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (r)
+            l((p) => !p);
+          else {
+            l(!0);
+            const p = e.jogakNames[0];
+            p !== void 0 && i(e.id, p);
+          }
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "100%",
+          padding: `5px 12px 5px ${m}px`,
+          background: r ? "#eff6ff" : "none",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 13,
+          color: r ? "#2563eb" : "#374151",
+          fontWeight: r ? 500 : 400,
+          textAlign: "left"
+        },
+        "aria-expanded": s,
+        children: [
+          /* @__PURE__ */ n("span", { style: { fontSize: 10, flexShrink: 0, lineHeight: 1 }, children: s ? "▾" : "▸" }),
+          a
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: e.jogakNames.map((p) => {
+      const h = r && p === o;
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            i(e.id, p);
+          },
+          style: {
+            display: "block",
+            width: "100%",
+            textAlign: "left",
+            padding: `4px 12px 4px ${m + 18}px`,
+            background: h ? "#dbeafe" : "none",
+            border: "none",
+            cursor: "pointer",
+            fontSize: 12,
+            color: h ? "#1d4ed8" : "#6b7280",
+            fontWeight: h ? 500 : 400
+          },
+          "aria-current": h ? "true" : void 0,
+          children: p
+        }
+      ) }, p);
+    }) })
+  ] });
+}
+function K(e, t) {
+  const o = t == null ? void 0 : t.control, i = (t == null ? void 0 : t.action) !== void 0 && t.action !== !1, d = (t == null ? void 0 : t.type) === "function" || typeof e == "function";
+  return i || d ? "action" : o === "boolean" || typeof e == "boolean" ? "boolean" : o === "number" || o === "range" || typeof e == "number" ? "number" : o === "select" || o === "radio" || (t == null ? void 0 : t.options) !== void 0 && t.options.length > 0 ? "select" : o === "text" || o === "color" || typeof e == "string" ? "text" : "json";
+}
+function ee({ argKey: e, value: t, argType: o, onArgChange: i }) {
+  switch (K(t, o)) {
+    case "boolean":
+      return /* @__PURE__ */ n(
+        "input",
+        {
+          type: "checkbox",
+          checked: t === !0,
+          onChange: (r) => {
+            i(e, r.target.checked);
+          },
+          style: { cursor: "pointer", width: 16, height: 16, accentColor: "#2563eb" }
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ n(
+        "input",
+        {
+          type: "number",
+          value: typeof t == "number" ? t : "",
+          onChange: (r) => {
+            i(e, r.target.valueAsNumber);
+          },
+          style: W
+        }
+      );
+    case "select": {
+      const r = (o == null ? void 0 : o.options) ?? [];
+      return /* @__PURE__ */ n(
+        "select",
+        {
+          value: String(t ?? ""),
+          onChange: (s) => {
+            i(e, s.target.value);
+          },
+          style: W,
+          children: r.map((s) => /* @__PURE__ */ n("option", { value: String(s), children: String(s) }, String(s)))
+        }
+      );
+    }
+    case "text":
+      return /* @__PURE__ */ n(
+        "input",
+        {
+          type: "text",
+          value: typeof t == "string" ? t : String(t ?? ""),
+          onChange: (r) => {
+            i(e, r.target.value);
+          },
+          style: W
+        }
+      );
+    case "action":
+      return /* @__PURE__ */ n(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            padding: "2px 8px",
+            fontSize: 11,
+            fontWeight: 600,
+            color: "#7c3aed",
+            background: "#f5f3ff",
+            border: "1px solid #ddd6fe",
+            borderRadius: 4,
+            fontFamily: "monospace"
+          },
+          children: "(action)"
+        }
+      );
+    case "json":
+      return /* @__PURE__ */ n("code", { style: { fontSize: 12, color: "#6b7280", fontFamily: "monospace" }, children: JSON.stringify(t) });
+  }
+}
+const W = {
+  padding: "4px 8px",
+  border: "1px solid #d1d5db",
+  borderRadius: 4,
+  fontSize: 13,
+  width: "100%",
+  maxWidth: 280
+}, A = {
+  padding: "6px 20px",
+  textAlign: "left",
+  color: "#6b7280",
+  fontWeight: 500,
+  fontSize: 12,
+  borderBottom: "1px solid #e5e7eb"
+}, B = {
+  padding: "8px 20px",
+  verticalAlign: "middle",
+  borderBottom: "1px solid #f3f4f6"
+};
+function te({ args: e, argTypes: t, onArgChange: o }) {
+  const d = Array.from(/* @__PURE__ */ new Set([...Object.keys(e), ...Object.keys(t)])).map((r) => [r, e[r]]);
+  return /* @__PURE__ */ c("div", { style: { borderTop: "2px solid #e5e7eb" }, children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          padding: "6px 20px",
+          fontSize: 11,
+          fontWeight: 700,
+          color: "#9ca3af",
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          borderBottom: "1px solid #e5e7eb",
+          background: "#f9fafb"
+        },
+        children: "Controls"
+      }
+    ),
+    d.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "12px 20px", color: "#9ca3af", fontSize: 13 }, children: "No args defined" }) : /* @__PURE__ */ c("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
+      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ c("tr", { children: [
+        /* @__PURE__ */ n("th", { style: A, children: "Name" }),
+        /* @__PURE__ */ n("th", { style: A, children: "Control" }),
+        /* @__PURE__ */ n("th", { style: A, children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ n("tbody", { children: d.map(([r, s]) => {
+        const l = t[r];
+        return /* @__PURE__ */ c("tr", { children: [
+          /* @__PURE__ */ n(
+            "td",
+            {
+              style: {
+                ...B,
+                fontFamily: "monospace",
+                fontSize: 12,
+                color: "#374151",
+                whiteSpace: "nowrap"
+              },
+              children: r
+            }
+          ),
+          /* @__PURE__ */ n("td", { style: B, children: /* @__PURE__ */ n(
+            ee,
+            {
+              argKey: r,
+              value: s,
+              argType: l,
+              onArgChange: o
+            }
+          ) }),
+          /* @__PURE__ */ n("td", { style: { ...B, color: "#9ca3af" }, children: (l == null ? void 0 : l.description) ?? "" })
+        ] }, r);
+      }) })
+    ] })
+  ] });
+}
+function ne(e) {
+  if (e.length === 0) return "()";
+  try {
+    return e.map((t) => {
+      var o;
+      if (t === null) return "null";
+      if (t === void 0) return "undefined";
+      if (typeof t == "function") return "[Function]";
+      if (typeof t == "object") {
+        const i = ((o = t.constructor) == null ? void 0 : o.name) ?? "Object";
+        return i !== "Object" && i !== "Array" ? `[${i}]` : JSON.stringify(t);
+      }
+      return JSON.stringify(t);
+    }).join(", ");
+  } catch {
+    return "[unserializable]";
+  }
+}
+function oe(e) {
+  const t = new Date(e), o = t.getHours().toString().padStart(2, "0"), i = t.getMinutes().toString().padStart(2, "0"), d = t.getSeconds().toString().padStart(2, "0"), r = t.getMilliseconds().toString().padStart(3, "0");
+  return `${o}:${i}:${d}.${r}`;
+}
+function re() {
+  const [e, t] = x(() => z.getLogs());
+  return v(() => z.subscribe(t), []), /* @__PURE__ */ c("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        style: {
+          padding: "6px 20px",
+          fontSize: 11,
+          fontWeight: 700,
+          color: "#9ca3af",
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          borderBottom: "1px solid #e5e7eb",
+          background: "#f9fafb",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexShrink: 0
+        },
+        children: [
+          /* @__PURE__ */ c("span", { children: [
+            "Actions ",
+            e.length > 0 && `(${e.length.toString()})`
+          ] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                z.clear();
+              },
+              disabled: e.length === 0,
+              style: {
+                fontSize: 10,
+                fontWeight: 600,
+                padding: "2px 8px",
+                border: "1px solid #d1d5db",
+                borderRadius: 3,
+                background: "#fff",
+                color: e.length === 0 ? "#9ca3af" : "#374151",
+                cursor: e.length === 0 ? "default" : "pointer",
+                textTransform: "none",
+                letterSpacing: 0
+              },
+              children: "Clear"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n("div", { style: { flex: 1, overflow: "auto" }, children: e.length === 0 ? /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          padding: "12px 20px",
+          color: "#9ca3af",
+          fontSize: 13
+        },
+        children: "함수 prop이 호출되면 여기에 기록됩니다"
+      }
+    ) : /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0, fontFamily: "monospace", fontSize: 12 }, children: e.map((o) => /* @__PURE__ */ c(
+      "li",
+      {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          gap: 10,
+          padding: "6px 20px",
+          borderBottom: "1px solid #f3f4f6"
+        },
+        children: [
+          /* @__PURE__ */ n("span", { style: { color: "#9ca3af", fontSize: 11, minWidth: 92 }, children: oe(o.timestamp) }),
+          /* @__PURE__ */ n("span", { style: { color: "#7c3aed", fontWeight: 600 }, children: o.name }),
+          /* @__PURE__ */ c("span", { style: { color: "#374151", wordBreak: "break-all", flex: 1 }, children: [
+            "(",
+            ne(o.args),
+            ")"
+          ] })
+        ]
+      },
+      o.id
+    )) }) })
+  ] });
+}
+const N = {
+  mobile: 375,
+  tablet: 768,
+  desktop: "none"
+}, ie = {
+  mobile: "Mobile",
+  tablet: "Tablet",
+  desktop: "Desktop"
+}, M = {
+  white: { background: "#ffffff" },
+  dark: { background: "#1f2937" },
+  transparent: {
+    backgroundImage: [
+      "linear-gradient(45deg, #e2e8f0 25%, transparent 25%)",
+      "linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)",
+      "linear-gradient(45deg, transparent 75%, #e2e8f0 75%)",
+      "linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)"
+    ].join(", "),
+    backgroundSize: "16px 16px",
+    backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
+    backgroundColor: "#ffffff"
+  }
+}, I = 320;
+function de(e) {
+  return L[e] ?? L.vsDark;
+}
+function le({
+  entryId: e,
+  jogakName: t,
+  overrideArgs: o,
+  onArgChange: i,
+  onReset: d,
+  codeTheme: r,
+  onResolveJogak: s
+}) {
+  const l = G(e), [a, m] = x("desktop"), [p, h] = x("white"), [S, b] = x("controls"), y = de(r);
+  return l.status === "unknown" ? /* @__PURE__ */ c("div", { "data-testid": "preview-not-found", style: { padding: 24, color: "#ef4444" }, children: [
+    "Entry not found: ",
+    e
+  ] }) : l.status === "error" ? /* @__PURE__ */ c(
+    "div",
+    {
+      "data-testid": "preview-error",
+      style: {
+        padding: 24,
+        color: "#b91c1c",
+        background: "#fef2f2",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        alignItems: "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ c("div", { style: { fontWeight: 600 }, children: [
+          "Failed to load entry: ",
+          e
+        ] }),
+        /* @__PURE__ */ n(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              padding: 12,
+              background: "#fff",
+              border: "1px solid #fecaca",
+              borderRadius: 6,
+              fontSize: 12,
+              whiteSpace: "pre-wrap",
+              maxWidth: "100%"
+            },
+            children: l.error.message
+          }
+        )
+      ]
+    }
+  ) : l.status === "loading" ? /* @__PURE__ */ n(
+    se,
+    {
+      meta: l.meta,
+      jogakName: t,
+      viewport: a,
+      bgMode: p,
+      onViewportChange: m,
+      onBgModeChange: h
+    }
+  ) : /* @__PURE__ */ n(
+    ae,
+    {
+      entry: l.entry,
+      jogakName: t,
+      overrideArgs: o,
+      onArgChange: i,
+      onReset: d,
+      onResolveJogak: s,
+      viewport: a,
+      bgMode: p,
+      bottomTab: S,
+      onViewportChange: m,
+      onBgModeChange: h,
+      onBottomTabChange: b,
+      prismTheme: y
+    }
+  );
+}
+function se({
+  meta: e,
+  jogakName: t,
+  viewport: o,
+  bgMode: i,
+  onViewportChange: d,
+  onBgModeChange: r
+}) {
+  const s = t ?? e.jogakNames[0] ?? "...", l = N[o];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-testid": "preview-loading",
+      style: { display: "flex", flexDirection: "column", height: "100%" },
+      children: [
+        /* @__PURE__ */ n(
+          J,
+          {
+            title: e.title,
+            jogakName: s,
+            viewport: o,
+            bgMode: i,
+            onViewportChange: d,
+            onBgModeChange: r,
+            showReset: !1,
+            onReset: () => {
+            }
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: I,
+              overflow: "auto",
+              ...M[i]
+            },
+            children: /* @__PURE__ */ n(
+              "div",
+              {
+                style: {
+                  maxWidth: l === "none" ? "100%" : l,
+                  margin: "0 auto",
+                  padding: 24
+                },
+                children: /* @__PURE__ */ c(
+                  "div",
+                  {
+                    style: {
+                      border: "1px dashed #e5e7eb",
+                      borderRadius: 8,
+                      padding: 16,
+                      minHeight: I - 64,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#9ca3af",
+                      fontSize: 13,
+                      background: "linear-gradient(90deg, rgba(229,231,235,0) 0%, rgba(229,231,235,0.45) 50%, rgba(229,231,235,0) 100%)",
+                      backgroundSize: "200% 100%",
+                      animation: "jogakSkeleton 1.4s ease-in-out infinite"
+                    },
+                    children: [
+                      "Loading ",
+                      e.title,
+                      "…"
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n("style", { children: "@keyframes jogakSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }" })
+      ]
+    }
+  );
+}
+function ae({
+  entry: e,
+  jogakName: t,
+  overrideArgs: o,
+  onArgChange: i,
+  onReset: d,
+  onResolveJogak: r,
+  viewport: s,
+  bgMode: l,
+  bottomTab: a,
+  onViewportChange: m,
+  onBgModeChange: p,
+  onBottomTabChange: h,
+  prismTheme: S
+}) {
+  var $;
+  const b = t ?? (($ = e.jogaks[0]) == null ? void 0 : $.name) ?? null;
+  if (v(() => {
+    t === null && b !== null && r !== void 0 && r(e.id, b);
+  }, [t, b, e.id, r]), b === null)
+    return /* @__PURE__ */ c("div", { style: { padding: 24, color: "#ef4444" }, children: [
+      "Entry has no jogaks: ",
+      e.id
+    ] });
+  const y = e.jogaks.find((k) => k.name === b);
+  if (y === void 0)
+    return /* @__PURE__ */ c("div", { style: { padding: 24, color: "#ef4444" }, children: [
+      "Jogak not found: ",
+      b
+    ] });
+  const u = { ...y.args ?? {}, ...o }, g = {
+    ...e.meta.argTypes ?? {},
+    ...y.argTypes ?? {}
+  }, P = Object.keys(o).length > 0, O = N[s];
+  return /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ n(
+      J,
+      {
+        title: e.title,
+        jogakName: y.name,
+        viewport: s,
+        bgMode: l,
+        onViewportChange: m,
+        onBgModeChange: p,
+        showReset: P,
+        onReset: d
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: I,
+          overflow: "auto",
+          ...M[l]
+        },
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              maxWidth: O === "none" ? "100%" : O,
+              margin: "0 auto",
+              padding: 24
+            },
+            children: /* @__PURE__ */ n(
+              ce,
+              {
+                entry: e,
+                args: u,
+                source: e.source,
+                theme: S
+              },
+              `${e.id}/${y.name}`
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        style: {
+          height: 260,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          borderTop: "2px solid #e5e7eb"
+        },
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              role: "tablist",
+              style: {
+                display: "flex",
+                gap: 4,
+                padding: "4px 12px 0",
+                background: "#fff",
+                borderBottom: "1px solid #e5e7eb",
+                flexShrink: 0
+              },
+              children: ["controls", "actions"].map((k) => {
+                const C = a === k;
+                return /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": C,
+                    onClick: () => {
+                      h(k);
+                    },
+                    style: {
+                      padding: "6px 14px",
+                      fontSize: 12,
+                      fontWeight: C ? 600 : 500,
+                      color: C ? "#111827" : "#6b7280",
+                      background: "transparent",
+                      border: "none",
+                      borderBottom: C ? "2px solid #2563eb" : "2px solid transparent",
+                      marginBottom: -1,
+                      cursor: "pointer",
+                      textTransform: "capitalize"
+                    },
+                    children: k
+                  },
+                  k
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ n("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: a === "controls" ? /* @__PURE__ */ n(
+            te,
+            {
+              args: u,
+              argTypes: g,
+              onArgChange: i
+            }
+          ) : /* @__PURE__ */ n(re, {}) })
+        ]
+      }
+    )
+  ] });
+}
+function J({
+  title: e,
+  jogakName: t,
+  viewport: o,
+  bgMode: i,
+  onViewportChange: d,
+  onBgModeChange: r,
+  showReset: s,
+  onReset: l
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "7px 14px",
+        borderBottom: "1px solid #e5e7eb",
+        background: "#fff",
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ c("div", { style: { flex: 1, fontSize: 13 }, children: [
+          /* @__PURE__ */ n("span", { style: { color: "#9ca3af" }, children: e }),
+          /* @__PURE__ */ n("span", { style: { color: "#d1d5db", margin: "0 6px" }, children: "/" }),
+          /* @__PURE__ */ n("span", { style: { color: "#111827", fontWeight: 600 }, children: t })
+        ] }),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 2,
+              background: "#f3f4f6",
+              borderRadius: 6,
+              padding: 2
+            },
+            children: ["mobile", "tablet", "desktop"].map((a) => /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  d(a);
+                },
+                "aria-pressed": o === a,
+                style: {
+                  padding: "3px 9px",
+                  fontSize: 12,
+                  border: "none",
+                  borderRadius: 4,
+                  cursor: "pointer",
+                  background: o === a ? "#fff" : "transparent",
+                  color: o === a ? "#111827" : "#6b7280",
+                  fontWeight: o === a ? 600 : 400,
+                  boxShadow: o === a ? "0 1px 2px rgba(0,0,0,0.08)" : "none",
+                  transition: "all 0.1s"
+                },
+                children: ie[a]
+              },
+              a
+            ))
+          }
+        ),
+        /* @__PURE__ */ n("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: ["white", "dark", "transparent"].map((a) => /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              r(a);
+            },
+            "aria-pressed": i === a,
+            "aria-label": `${a} background`,
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: 4,
+              border: i === a ? "2px solid #2563eb" : "2px solid #d1d5db",
+              cursor: "pointer",
+              padding: 0,
+              flexShrink: 0,
+              ...M[a]
+            }
+          },
+          a
+        )) }),
+        s && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: l,
+            style: {
+              padding: "3px 10px",
+              fontSize: 12,
+              border: "1px solid #d1d5db",
+              borderRadius: 4,
+              background: "#fff",
+              cursor: "pointer",
+              color: "#374151"
+            },
+            children: "Reset"
+          }
+        )
+      ]
+    }
+  );
+}
+function ce({ entry: e, args: t, source: o, theme: i }) {
+  const d = V(null), [r, s] = x(!1);
+  return v(() => {
+    const l = d.current;
+    if (l !== null)
+      return j.render(e, t, l), () => {
+        j.unmount(l);
+      };
+  }, [e]), v(() => {
+    const l = d.current;
+    l !== null && j.render(e, t, l);
+  }, [e, t]), /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          ref: d,
+          "data-testid": "preview-content",
+          style: {
+            border: "1px dashed #e5e7eb",
+            borderRadius: 8,
+            padding: 16,
+            paddingBottom: 36
+          }
+        }
+      ),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            s((l) => !l);
+          },
+          "aria-pressed": r,
+          "aria-label": r ? "Hide source code" : "Show source code",
+          style: {
+            position: "absolute",
+            bottom: 8,
+            right: 8,
+            padding: "4px 9px",
+            fontSize: 11,
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            fontWeight: 600,
+            letterSpacing: "0.02em",
+            background: r ? "#2563eb" : "#1e293b",
+            color: "#fff",
+            border: "none",
+            borderRadius: 5,
+            cursor: "pointer",
+            boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
+            transition: "background 0.15s"
+          },
+          children: "</>"
+        }
+      )
+    ] }),
+    r && /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          marginTop: 8,
+          borderRadius: 8,
+          overflow: "hidden",
+          height: 320,
+          boxShadow: "0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.12)"
+        },
+        children: /* @__PURE__ */ n(pe, { source: o, theme: i })
+      }
+    )
+  ] });
+}
+function pe({ source: e, theme: t }) {
+  const [o, i] = x(!1), d = t.plain.backgroundColor ?? "#1e293b";
+  return e === void 0 ? /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: d,
+        color: "#94a3b8",
+        fontSize: 13
+      },
+      children: "Source not available"
+    }
+  ) : /* @__PURE__ */ c("div", { style: { position: "relative", height: "100%" }, children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          navigator.clipboard.writeText(e).then(() => {
+            i(!0), setTimeout(() => {
+              i(!1);
+            }, 2e3);
+          });
+        },
+        style: {
+          position: "absolute",
+          top: 10,
+          right: 12,
+          zIndex: 1,
+          padding: "3px 9px",
+          fontSize: 11,
+          background: "rgba(255,255,255,0.1)",
+          color: "#e2e8f0",
+          border: "1px solid rgba(255,255,255,0.18)",
+          borderRadius: 4,
+          cursor: "pointer"
+        },
+        children: o ? "✓ Copied" : "Copy"
+      }
+    ),
+    /* @__PURE__ */ n(Q, { code: e.trim(), language: "tsx", theme: t, children: ({ style: s, tokens: l, getLineProps: a, getTokenProps: m }) => /* @__PURE__ */ n(
+      "pre",
+      {
+        style: {
+          ...s,
+          margin: 0,
+          padding: "12px 0",
+          fontSize: 12.5,
+          lineHeight: 1.7,
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          height: "100%",
+          boxSizing: "border-box",
+          overflow: "auto"
+        },
+        children: l.map((p, h) => /* @__PURE__ */ c(
+          "div",
+          {
+            ...a({ line: p }),
+            style: {
+              ...a({ line: p }).style,
+              display: "flex",
+              paddingRight: 24
+            },
+            children: [
+              /* @__PURE__ */ n(
+                "span",
+                {
+                  style: {
+                    userSelect: "none",
+                    minWidth: 40,
+                    paddingLeft: 14,
+                    paddingRight: 14,
+                    textAlign: "right",
+                    color: "rgba(148,163,184,0.45)",
+                    flexShrink: 0
+                  },
+                  children: h + 1
+                }
+              ),
+              /* @__PURE__ */ n("span", { children: p.map((S, b) => /* @__PURE__ */ n("span", { ...m({ token: S }) }, b)) })
+            ]
+          },
+          h
+        ))
+      }
+    ) })
+  ] });
+}
+function E() {
+  if (typeof window > "u") return null;
+  const e = new URLSearchParams(window.location.search), t = e.get("entry");
+  if (t === null) return null;
+  const o = e.get("jogak");
+  return { entryId: t, jogakName: o };
+}
+function fe(e, t) {
+  const o = new URLSearchParams();
+  o.set("entry", e), o.set("jogak", t), window.history.pushState({}, "", `?${o.toString()}`);
+}
+function me({
+  entries: e,
+  metas: t,
+  codeTheme: o = "vsDark"
+} = {}) {
+  const i = w(() => {
+    if (e !== void 0) {
+      t !== void 0 && console.warn(
+        "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
+      );
+      const f = new U();
+      for (const u of e) f.register(u);
+      return f;
+    }
+    if (t !== void 0)
+      for (const f of t) F.registerMeta(f);
+    return F;
+  }, [e, t]), d = w(() => E(), []), [r, s] = x(
+    (d == null ? void 0 : d.entryId) ?? null
+  ), [l, a] = x(
+    (d == null ? void 0 : d.jogakName) ?? null
+  ), [m, p] = x({});
+  v(() => {
+    const f = () => {
+      const u = E();
+      u !== null ? (s(u.entryId), a(u.jogakName), p({})) : (s(null), a(null));
+    };
+    return window.addEventListener("popstate", f), () => {
+      window.removeEventListener("popstate", f);
+    };
+  }, []);
+  const h = R((f, u) => {
+    s(f), a(u), p({}), fe(f, u);
+  }, []), S = R((f, u) => {
+    if (s((g) => g === f ? f : g), a((g) => g ?? u), typeof window < "u") {
+      const g = new URLSearchParams(window.location.search);
+      g.get("entry") === f && g.get("jogak") === null && (g.set("jogak", u), window.history.replaceState({}, "", `?${g.toString()}`));
+    }
+  }, []), b = R((f, u) => {
+    p((g) => ({ ...g, [f]: u }));
+  }, []), y = R(() => {
+    p({});
+  }, []);
+  return /* @__PURE__ */ n(T, { registry: i, children: /* @__PURE__ */ c(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "260px 1fr",
+        height: "100dvh",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ n(
+          Y,
+          {
+            selectedEntryId: r,
+            selectedJogakName: l,
+            onSelect: h
+          }
+        ),
+        /* @__PURE__ */ n("main", { style: { overflow: "hidden", minHeight: 0 }, children: r !== null ? /* @__PURE__ */ n(
+          le,
+          {
+            entryId: r,
+            jogakName: l,
+            overrideArgs: m,
+            onArgChange: b,
+            onReset: y,
+            codeTheme: o,
+            onResolveJogak: S
+          }
+        ) : /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              color: "#9ca3af"
+            },
+            children: "Select a component from the sidebar"
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function ye() {
+  const e = q(), t = w(() => e.getAll(), [e]), o = w(() => e.getTree(), [e]), i = w(
+    () => (d) => e.search(d),
+    [e]
+  );
+  return { entries: t, tree: o, search: i };
+}
+export {
+  re as Actions,
+  te as Controls,
+  me as JogakApp,
+  le as Preview,
+  Y as Sidebar,
+  ye as useRegistry
+};