@jogak/ui 0.1.0-alpha.1 → 0.1.0-alpha.10.3

package/dist/index.mjs

@@ -1,1217 +1,1096 @@
-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
+import { jsxs as j, jsx as t } from "react/jsx-runtime";
+import { useState as h, useEffect as x, useRef as L, useMemo as _, useCallback as A } from "react";
+import { defaultActionChannel as E, ComponentRegistry as Z, defaultRegistry as H } from "@jogak/core";
+import { useRegistryMeta as K, useEntry as T, reactAdapter as $, JogakProvider as oo, useRegistry as ao } from "@jogak/core/renderers/react";
+import { themes as F, Highlight as eo } from "prism-react-renderer";
+import { createPortal as to } from "react-dom";
+function U(o) {
+  var a, e, r = "";
+  if (typeof o == "string" || typeof o == "number") r += o;
+  else if (typeof o == "object") if (Array.isArray(o)) {
+    var s = o.length;
+    for (a = 0; a < s; a++) o[a] && (e = U(o[a])) && (r && (r += " "), r += e);
+  } else for (e in o) o[e] && (r && (r += " "), r += e);
+  return r;
+}
+function N() {
+  for (var o, a, e = 0, r = "", s = arguments.length; e < s; e++) (o = arguments[e]) && (a = U(o)) && (r && (r += " "), r += a);
+  return r;
+}
+function ro({
+  selectedEntryId: o,
+  selectedJogakName: a,
+  onSelect: e
 }) {
-  const [i, d] = x(""), { metaTree: r, searchMeta: s } = _(), l = i.trim().length > 0 ? s(i) : null;
-  return /* @__PURE__ */ c(
+  const [r, s] = h(""), { metaTree: n, searchMeta: g } = K(), i = r.trim().length > 0 ? g(r) : null;
+  return /* @__PURE__ */ j(
     "aside",
     {
       "data-testid": "sidebar",
-      style: {
-        borderRight: "1px solid #e5e7eb",
-        height: "100%",
-        overflow: "auto",
-        display: "flex",
-        flexDirection: "column"
-      },
+      className: "jogak:flex jogak:flex-col jogak:h-full jogak:overflow-auto jogak:border-r jogak:border-[var(--jogak-color-border)]",
       children: [
-        /* @__PURE__ */ n("div", { style: { padding: "12px", borderBottom: "1px solid #e5e7eb" }, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ t("div", { className: "jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]", children: /* @__PURE__ */ t(
           "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
+            value: r,
+            onChange: (k) => {
+              s(k.target.value);
             },
+            className: "jogak:w-full jogak:px-2 jogak:py-1.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)]",
             "aria-label": "Search components"
           }
         ) }),
-        /* @__PURE__ */ n("nav", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: l !== null ? /* @__PURE__ */ n(
-          X,
+        /* @__PURE__ */ t("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: i !== null ? /* @__PURE__ */ t(
+          no,
           {
-            metas: l,
-            selectedEntryId: e,
-            selectedJogakName: t,
-            onSelect: o
+            metas: i,
+            selectedEntryId: o,
+            selectedJogakName: a,
+            onSelect: e
           }
-        ) : /* @__PURE__ */ n(
-          H,
+        ) : /* @__PURE__ */ t(
+          q,
           {
-            node: r,
-            selectedEntryId: e,
-            selectedJogakName: t,
-            onSelect: o
+            node: n,
+            selectedEntryId: o,
+            selectedJogakName: a,
+            onSelect: e
           }
         ) })
       ]
     }
   );
 }
-function X({
-  metas: e,
-  selectedEntryId: t,
-  selectedJogakName: o,
-  onSelect: i
+function no({
+  metas: o,
+  selectedEntryId: a,
+  selectedJogakName: e,
+  onSelect: r
 }) {
-  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,
+  return o.length === 0 ? /* @__PURE__ */ t("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((s) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+    G,
     {
-      meta: d,
-      selectedEntryId: t,
-      selectedJogakName: o,
-      onSelect: i,
+      meta: s,
+      selectedEntryId: a,
+      selectedJogakName: e,
+      onSelect: r,
       indent: 0
     }
-  ) }, d.id)) });
+  ) }, s.id)) });
 }
-function H({
-  node: e,
-  selectedEntryId: t,
-  selectedJogakName: o,
-  onSelect: i,
-  depth: d = 0
+function q({
+  node: o,
+  selectedEntryId: a,
+  selectedJogakName: e,
+  onSelect: r,
+  depth: s = 0
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     "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,
+      className: "jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",
+      style: { "--jogak-tree-pl": `${s * 12}px` },
+      children: Object.entries(o).map(([n, g]) => /* @__PURE__ */ t("li", { children: "id" in g ? /* @__PURE__ */ t(
+        G,
         {
-          meta: s,
-          selectedEntryId: t,
-          selectedJogakName: o,
-          onSelect: i,
+          meta: g,
+          selectedEntryId: a,
+          selectedJogakName: e,
+          onSelect: r,
           indent: 0
         }
-      ) : /* @__PURE__ */ n(
-        Z,
+      ) : /* @__PURE__ */ t(
+        go,
         {
-          label: r,
-          node: s,
-          selectedEntryId: t,
-          selectedJogakName: o,
-          onSelect: i,
-          depth: d + 1
+          label: n,
+          node: g,
+          selectedEntryId: a,
+          selectedJogakName: e,
+          onSelect: r,
+          depth: s + 1
         }
-      ) }, r))
+      ) }, n))
     }
   );
 }
-function Z({
-  label: e,
-  node: t,
-  selectedEntryId: o,
-  selectedJogakName: i,
-  onSelect: d,
-  depth: r
+function go({
+  label: o,
+  node: a,
+  selectedEntryId: e,
+  selectedJogakName: r,
+  onSelect: s,
+  depth: n
 }) {
-  const [s, l] = x(!0);
-  return /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ c(
+  const [g, i] = h(!0);
+  return /* @__PURE__ */ j("div", { children: [
+    /* @__PURE__ */ j(
       "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"
+          i((k) => !k);
         },
-        "aria-expanded": s,
+        className: "jogak:flex jogak:items-center jogak:gap-1 jogak:w-full jogak:px-3 jogak:py-1 jogak:bg-transparent jogak:border-none jogak:cursor-pointer jogak:text-[12px] jogak:font-semibold jogak:text-[var(--jogak-color-fg-muted)] jogak:uppercase jogak:tracking-wider",
+        "aria-expanded": g,
         children: [
-          /* @__PURE__ */ n("span", { children: s ? "▾" : "▸" }),
-          e
+          /* @__PURE__ */ t("span", { children: g ? "▾" : "▸" }),
+          o
         ]
       }
     ),
-    s && /* @__PURE__ */ n(
-      H,
+    g && /* @__PURE__ */ t(
+      q,
       {
-        node: t,
-        selectedEntryId: o,
-        selectedJogakName: i,
-        onSelect: d,
-        depth: r
+        node: a,
+        selectedEntryId: e,
+        selectedJogakName: r,
+        onSelect: s,
+        depth: n
       }
     )
   ] });
 }
-function D({
-  meta: e,
-  selectedEntryId: t,
-  selectedJogakName: o,
-  onSelect: i,
-  indent: d
+function G({
+  meta: o,
+  selectedEntryId: a,
+  selectedJogakName: e,
+  onSelect: r,
+  indent: s
 }) {
-  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(
+  const n = o.id === a, [g, i] = h(n);
+  x(() => {
+    n && i(!0);
+  }, [n]);
+  const k = o.title.split("/").pop() ?? o.title, d = 16 + s * 12;
+  return /* @__PURE__ */ j("div", { children: [
+    /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          if (r)
-            l((p) => !p);
+          if (n)
+            i((l) => !l);
           else {
-            l(!0);
-            const p = e.jogakNames[0];
-            p !== void 0 && i(e.id, p);
+            i(!0);
+            const l = o.jogakNames[0];
+            l !== void 0 && r(o.id, l);
           }
         },
-        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,
+        className: N(
+          "jogak:flex jogak:items-center jogak:gap-1.5 jogak:w-full jogak:pr-3 jogak:py-[5px]",
+          "jogak:pl-[var(--jogak-entry-pl)]",
+          "jogak:border-none jogak:cursor-pointer jogak:text-left jogak:text-[13px]",
+          n ? "jogak:bg-[var(--jogak-color-accent-bg)] jogak:text-[var(--jogak-color-accent)] jogak:font-medium" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg)] jogak:font-normal"
+        ),
+        style: { "--jogak-entry-pl": `${d}px` },
+        "aria-expanded": g,
         children: [
-          /* @__PURE__ */ n("span", { style: { fontSize: 10, flexShrink: 0, lineHeight: 1 }, children: s ? "▾" : "▸" }),
-          a
+          /* @__PURE__ */ t("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: g ? "▾" : "▸" }),
+          k
         ]
       }
     ),
-    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(
+    g && /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((l) => {
+      const c = n && l === e;
+      return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
         "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
+            r(o.id, l);
           },
-          "aria-current": h ? "true" : void 0,
-          children: p
+          className: N(
+            "jogak:block jogak:w-full jogak:text-left jogak:pr-3 jogak:py-1",
+            "jogak:pl-[var(--jogak-jogak-pl)]",
+            "jogak:border-none jogak:cursor-pointer jogak:text-[12px]",
+            c ? "jogak:bg-[var(--jogak-color-accent-bg-soft)] jogak:text-[var(--jogak-color-accent-fg)] jogak:font-medium" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal"
+          ),
+          style: { "--jogak-jogak-pl": `${d + 18}px` },
+          "aria-current": c ? "true" : void 0,
+          children: l
         }
-      ) }, p);
+      ) }, l);
     }) })
   ] });
 }
-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 so(o, a) {
+  const e = a == null ? void 0 : a.control, r = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, s = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
+  return r || s ? "action" : e === "boolean" || typeof o == "boolean" ? "boolean" : e === "number" || e === "range" || typeof o == "number" ? "number" : e === "select" || e === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : e === "text" || e === "color" || typeof o == "string" ? "text" : "json";
 }
-function ee({ argKey: e, value: t, argType: o, onArgChange: i }) {
-  switch (K(t, o)) {
+const O = "jogak:px-2 jogak:py-1 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:text-[13px] jogak:w-full jogak:max-w-[280px]", P = "jogak:px-5 jogak:py-1.5 jogak:text-left jogak:text-[var(--jogak-color-fg-muted)] jogak:font-medium jogak:text-[12px] jogak:border-b jogak:border-[var(--jogak-color-border)]", M = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
+function lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
+  switch (so(a, e)) {
     case "boolean":
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ t(
         "input",
         {
           type: "checkbox",
-          checked: t === !0,
-          onChange: (r) => {
-            i(e, r.target.checked);
+          checked: a === !0,
+          onChange: (n) => {
+            r(o, n.target.checked);
           },
-          style: { cursor: "pointer", width: 16, height: 16, accentColor: "#2563eb" }
+          className: "jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"
         }
       );
     case "number":
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ t(
         "input",
         {
           type: "number",
-          value: typeof t == "number" ? t : "",
-          onChange: (r) => {
-            i(e, r.target.valueAsNumber);
+          value: typeof a == "number" ? a : "",
+          onChange: (n) => {
+            r(o, n.target.valueAsNumber);
           },
-          style: W
+          className: O
         }
       );
     case "select": {
-      const r = (o == null ? void 0 : o.options) ?? [];
-      return /* @__PURE__ */ n(
+      const n = (e == null ? void 0 : e.options) ?? [];
+      return /* @__PURE__ */ t(
         "select",
         {
-          value: String(t ?? ""),
-          onChange: (s) => {
-            i(e, s.target.value);
+          value: String(a ?? ""),
+          onChange: (g) => {
+            r(o, g.target.value);
           },
-          style: W,
-          children: r.map((s) => /* @__PURE__ */ n("option", { value: String(s), children: String(s) }, String(s)))
+          className: O,
+          children: n.map((g) => /* @__PURE__ */ t("option", { value: String(g), children: String(g) }, String(g)))
         }
       );
     }
     case "text":
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ t(
         "input",
         {
           type: "text",
-          value: typeof t == "string" ? t : String(t ?? ""),
-          onChange: (r) => {
-            i(e, r.target.value);
+          value: typeof a == "string" ? a : String(a ?? ""),
+          onChange: (n) => {
+            r(o, n.target.value);
           },
-          style: W
+          className: O
         }
       );
     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)"
-        }
-      );
+      return /* @__PURE__ */ t("span", { className: "jogak:inline-block jogak:px-2 jogak:py-0.5 jogak:text-[11px] jogak:font-semibold jogak:text-[var(--jogak-color-violet)] jogak:bg-[var(--jogak-color-violet-bg)] jogak:border jogak:border-[var(--jogak-color-violet-border)] jogak:rounded-[var(--jogak-radius-md)] jogak:font-[family-name:var(--jogak-font-mono)] jogak:leading-none", children: "(action)" });
     case "json":
-      return /* @__PURE__ */ n("code", { style: { fontSize: 12, color: "#6b7280", fontFamily: "monospace" }, children: JSON.stringify(t) });
+      return /* @__PURE__ */ t("code", { className: "jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]", children: JSON.stringify(a) });
   }
 }
-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" })
+function io({ args: o, argTypes: a, onArgChange: e }) {
+  const s = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
+  return /* @__PURE__ */ j("div", { className: "jogak:border-t-2 jogak:border-[var(--jogak-color-border)]", children: [
+    /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)]", children: "Controls" }),
+    s.length === 0 ? /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No args defined" }) : /* @__PURE__ */ j("table", { className: "jogak:w-full jogak:border-collapse jogak:text-[13px]", children: [
+      /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ j("tr", { children: [
+        /* @__PURE__ */ t("th", { className: P, children: "Name" }),
+        /* @__PURE__ */ t("th", { className: P, children: "Control" }),
+        /* @__PURE__ */ t("th", { className: P, children: "Description" })
       ] }) }),
-      /* @__PURE__ */ n("tbody", { children: d.map(([r, s]) => {
-        const l = t[r];
-        return /* @__PURE__ */ c("tr", { children: [
-          /* @__PURE__ */ n(
+      /* @__PURE__ */ t("tbody", { children: s.map(([n, g]) => {
+        const i = a[n];
+        return /* @__PURE__ */ j("tr", { children: [
+          /* @__PURE__ */ t(
             "td",
             {
-              style: {
-                ...B,
-                fontFamily: "monospace",
-                fontSize: 12,
-                color: "#374151",
-                whiteSpace: "nowrap"
-              },
-              children: r
+              className: N(
+                M,
+                "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"
+              ),
+              children: n
             }
           ),
-          /* @__PURE__ */ n("td", { style: B, children: /* @__PURE__ */ n(
-            ee,
+          /* @__PURE__ */ t("td", { className: M, children: /* @__PURE__ */ t(
+            lo,
             {
-              argKey: r,
-              value: s,
-              argType: l,
-              onArgChange: o
+              argKey: n,
+              value: g,
+              argType: i,
+              onArgChange: e
             }
           ) }),
-          /* @__PURE__ */ n("td", { style: { ...B, color: "#9ca3af" }, children: (l == null ? void 0 : l.description) ?? "" })
-        ] }, r);
+          /* @__PURE__ */ t("td", { className: N(M, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (i == null ? void 0 : i.description) ?? "" })
+        ] }, n);
       }) })
     ] })
   ] });
 }
-function ne(e) {
-  if (e.length === 0) return "()";
+function ko(o) {
+  if (o.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 o.map((a) => {
+      var e;
+      if (a === null) return "null";
+      if (a === void 0) return "undefined";
+      if (typeof a == "function") return "[Function]";
+      if (typeof a == "object") {
+        const r = ((e = a.constructor) == null ? void 0 : e.name) ?? "Object";
+        return r !== "Object" && r !== "Array" ? `[${r}]` : JSON.stringify(a);
       }
-      return JSON.stringify(t);
+      return JSON.stringify(a);
     }).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 co(o) {
+  const a = new Date(o), e = a.getHours().toString().padStart(2, "0"), r = a.getMinutes().toString().padStart(2, "0"), s = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
+  return `${e}:${r}:${s}.${n}`;
 }
-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(
+function jo() {
+  const [o, a] = h(() => E.getLogs());
+  x(() => E.subscribe(a), []);
+  const e = o.length === 0;
+  return /* @__PURE__ */ j("div", { className: "jogak:h-full jogak:flex jogak:flex-col", children: [
+    /* @__PURE__ */ j("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)] jogak:flex jogak:items-center jogak:justify-between jogak:shrink-0", children: [
+      /* @__PURE__ */ j("span", { children: [
+        "Actions ",
+        o.length > 0 && `(${o.length.toString()})`
+      ] }),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            E.clear();
+          },
+          disabled: e,
+          className: N(
+            "jogak:text-[10px] jogak:font-semibold jogak:px-2 jogak:py-0.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-sm)] jogak:bg-[var(--jogak-color-bg)] jogak:normal-case jogak:tracking-normal",
+            e ? "jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default" : "jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"
+          ),
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "jogak:flex-1 jogak:overflow-auto", children: e ? /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none", children: "함수 prop이 호출되면 여기에 기록됩니다" }) : /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]", children: o.map((r) => /* @__PURE__ */ j(
       "li",
       {
-        style: {
-          display: "flex",
-          alignItems: "baseline",
-          gap: 10,
-          padding: "6px 20px",
-          borderBottom: "1px solid #f3f4f6"
-        },
+        className: "jogak:flex jogak:items-baseline jogak:gap-[10px] jogak:px-5 jogak:py-1.5 jogak:border-b jogak:border-[var(--jogak-color-border-muted)]",
         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: [
+          /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: co(r.timestamp) }),
+          /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: r.name }),
+          /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
             "(",
-            ne(o.args),
+            ko(r.args),
             ")"
           ] })
         ]
       },
-      o.id
+      r.id
     )) }) })
   ] });
 }
-const N = {
+function uo({
+  children: o,
+  className: a,
+  style: e,
+  "data-testid": r
+}) {
+  const s = L(null), [n, g] = h(null);
+  return x(() => {
+    const i = s.current;
+    if (i === null) return;
+    const k = i.shadowRoot ?? i.attachShadow({ mode: "open" });
+    g(k);
+  }, []), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: s,
+      className: a,
+      "data-testid": r,
+      style: e,
+      children: n !== null ? to(o, n) : null
+    }
+  );
+}
+function po({
+  entry: o,
+  args: a,
+  userPreviewUrl: e,
+  previewEntryPath: r,
+  className: s,
+  "data-testid": n
+}) {
+  const g = L(null), [i, k] = h(!1), d = e !== "" ? `${e}${r}` : "/preview-frame.html";
+  return x(() => {
+    const l = (c) => {
+      const p = g.current;
+      if (p === null || c.source !== p.contentWindow) return;
+      const f = c.data;
+      f == null || typeof f != "object" || f.type === "jogak:ready" && k(!0);
+    };
+    return window.addEventListener("message", l), () => {
+      window.removeEventListener("message", l);
+    };
+  }, []), x(() => {
+    var c;
+    if (!i) return;
+    const l = g.current;
+    l !== null && ((c = l.contentWindow) == null || c.postMessage(
+      { type: "jogak:setProps", entryId: o.id, args: a },
+      "*"
+    ));
+  }, [i, o, a]), x(() => {
+    const l = g.current;
+    return () => {
+      l !== null && queueMicrotask(() => {
+        var c;
+        (c = l.contentWindow) == null || c.postMessage({ type: "jogak:unmount" }, "*");
+      });
+    };
+  }, []), /* @__PURE__ */ t(
+    "iframe",
+    {
+      ref: g,
+      src: d,
+      title: "Preview",
+      className: s,
+      "data-testid": n
+    }
+  );
+}
+const fo = 60;
+function mo(o, a) {
+  const e = bo(o), { children: r, restProps: s } = ho(a), n = Object.entries(s).filter(([, c]) => c !== void 0).map(([c, p]) => vo(c, p)), g = xo(r), i = g !== null, k = n.length === 0 ? "" : " " + n.join(" "), d = i ? `<${e}${k}>${g ?? ""}</${e}>` : `<${e}${k} />`;
+  if (d.length <= fo && !d.includes(`
+`))
+    return d;
+  const l = n.length === 0 ? "" : `
+  ` + n.join(`
+  `) + `
+`;
+  if (i) {
+    const c = (g ?? "").split(`
+`).map((p) => `  ${p}`).join(`
+`);
+    return `<${e}${l}>
+${c}
+</${e}>`;
+  }
+  return `<${e}${l}/>`;
+}
+function bo(o) {
+  const a = o.meta.component;
+  if (a !== void 0) {
+    if (typeof a.displayName == "string" && a.displayName.length > 0)
+      return a.displayName;
+    if (typeof a.name == "string" && a.name.length > 0)
+      return a.name;
+  }
+  const e = o.title.split("/").pop();
+  return e !== void 0 && e.length > 0 ? e : "Component";
+}
+function ho(o) {
+  const { children: a, ...e } = o;
+  return { children: a, restProps: e };
+}
+function xo(o) {
+  return o == null ? null : typeof o == "string" ? o.length === 0 ? null : o : typeof o == "number" || typeof o == "bigint" ? `{${o.toString()}}` : typeof o == "boolean" ? null : `{${Q(o)}}`;
+}
+function vo(o, a) {
+  if (a === !0) return o;
+  if (a === !1) return `${o}={false}`;
+  if (a === null) return `${o}={null}`;
+  if (typeof a == "string") {
+    const e = a.replace(/"/gu, "&quot;");
+    return `${o}="${e}"`;
+  }
+  return typeof a == "number" || typeof a == "bigint" ? `${o}={${a.toString()}}` : typeof a == "function" ? `${o}={fn}` : `${o}={${Q(a)}}`;
+}
+function Q(o) {
+  try {
+    return JSON.stringify(o);
+  } catch {
+    return String(o);
+  }
+}
+const X = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, ie = {
+}, wo = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
-}, M = {
-  white: { background: "#ffffff" },
-  dark: { background: "#1f2937" },
+}, V = {
+  white: {
+    "--jogak-canvas-bg": "#ffffff",
+    "--jogak-canvas-bg-image": "none",
+    "--jogak-canvas-bg-size": "auto",
+    "--jogak-canvas-bg-position": "0 0"
+  },
+  dark: {
+    "--jogak-canvas-bg": "#1f2937",
+    "--jogak-canvas-bg-image": "none",
+    "--jogak-canvas-bg-size": "auto",
+    "--jogak-canvas-bg-position": "0 0"
+  },
   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"
+    "--jogak-canvas-bg": "#ffffff",
+    "--jogak-canvas-bg-image": "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%)",
+    "--jogak-canvas-bg-size": "16px 16px",
+    "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
   }
-}, I = 320;
-function de(e) {
-  return L[e] ?? L.vsDark;
+}, B = "jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";
+function No(o) {
+  return F[o] ?? F.vsDark;
 }
-function le({
-  entryId: e,
-  jogakName: t,
-  overrideArgs: o,
-  onArgChange: i,
-  onReset: d,
-  codeTheme: r,
-  onResolveJogak: s
+function yo({
+  entryId: o,
+  jogakName: a,
+  overrideArgs: e,
+  onArgChange: r,
+  onReset: s,
+  codeTheme: n,
+  onResolveJogak: g,
+  previewIsolation: i = "iframe",
+  userPreviewUrl: k = "",
+  previewEntryPath: d = "/__jogak_preview__/index.html"
 }) {
-  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(
+  const l = T(o), [c, p] = h("desktop"), [f, S] = h("white"), [y, v] = h("controls"), w = No(n);
+  return l.status === "unknown" ? /* @__PURE__ */ j(
+    "div",
+    {
+      "data-testid": "preview-not-found",
+      className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]",
+      children: [
+        "Entry not found: ",
+        o
+      ]
+    }
+  ) : l.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
-      style: {
-        padding: 24,
-        color: "#b91c1c",
-        background: "#fef2f2",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        gap: 12,
-        alignItems: "flex-start"
-      },
+      className: "jogak:p-6 jogak:text-[var(--jogak-color-error-fg)] jogak:bg-[var(--jogak-color-bg-error)] jogak:h-full jogak:flex jogak:flex-col jogak:gap-3 jogak:items-start",
       children: [
-        /* @__PURE__ */ c("div", { style: { fontWeight: 600 }, children: [
+        /* @__PURE__ */ j("div", { className: "jogak:font-semibold", children: [
           "Failed to load entry: ",
-          e
+          o
         ] }),
-        /* @__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
-          }
-        )
+        /* @__PURE__ */ t("pre", { className: "jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full", children: l.error.message })
       ]
     }
-  ) : l.status === "loading" ? /* @__PURE__ */ n(
-    se,
+  ) : l.status === "loading" ? /* @__PURE__ */ t(
+    So,
     {
       meta: l.meta,
-      jogakName: t,
-      viewport: a,
-      bgMode: p,
-      onViewportChange: m,
-      onBgModeChange: h
+      jogakName: a,
+      viewport: c,
+      bgMode: f,
+      onViewportChange: p,
+      onBgModeChange: S
     }
-  ) : /* @__PURE__ */ n(
-    ae,
+  ) : /* @__PURE__ */ t(
+    Co,
     {
       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
+      jogakName: a,
+      overrideArgs: e,
+      onArgChange: r,
+      onReset: s,
+      onResolveJogak: g,
+      viewport: c,
+      bgMode: f,
+      bottomTab: y,
+      onViewportChange: p,
+      onBgModeChange: S,
+      onBottomTabChange: v,
+      prismTheme: w,
+      previewIsolation: i,
+      userPreviewUrl: k,
+      previewEntryPath: d
     }
   );
 }
-function se({
-  meta: e,
-  jogakName: t,
-  viewport: o,
-  bgMode: i,
-  onViewportChange: d,
-  onBgModeChange: r
+function So({
+  meta: o,
+  jogakName: a,
+  viewport: e,
+  bgMode: r,
+  onViewportChange: s,
+  onBgModeChange: n
 }) {
-  const s = t ?? e.jogakNames[0] ?? "...", l = N[o];
-  return /* @__PURE__ */ c(
+  const g = a ?? o.jogakNames[0] ?? "...", i = X[e];
+  return /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-loading",
-      style: { display: "flex", flexDirection: "column", height: "100%" },
+      className: "jogak:flex jogak:flex-col jogak:h-full",
       children: [
-        /* @__PURE__ */ n(
-          J,
+        /* @__PURE__ */ t(
+          Y,
           {
-            title: e.title,
-            jogakName: s,
-            viewport: o,
-            bgMode: i,
-            onViewportChange: d,
-            onBgModeChange: r,
+            title: o.title,
+            jogakName: g,
+            viewport: e,
+            bgMode: r,
+            onViewportChange: s,
+            onBgModeChange: n,
             showReset: !1,
             onReset: () => {
             }
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "div",
           {
-            style: {
-              flex: 1,
-              minHeight: I,
-              overflow: "auto",
-              ...M[i]
-            },
-            children: /* @__PURE__ */ n(
+            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
+            style: V[r],
+            children: /* @__PURE__ */ t(
               "div",
               {
+                className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
                 style: {
-                  maxWidth: l === "none" ? "100%" : l,
-                  margin: "0 auto",
-                  padding: 24
+                  "--jogak-canvas-mw": i === "none" ? "100%" : `${i}px`
                 },
-                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,
-                      "…"
-                    ]
-                  }
-                )
+                children: /* @__PURE__ */ j("div", { className: "jogak-skeleton-shimmer jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:flex jogak:items-center jogak:justify-center jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:min-h-[256px]", children: [
+                  "Loading ",
+                  o.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
+function Co({
+  entry: o,
+  jogakName: a,
+  overrideArgs: e,
+  onArgChange: r,
+  onReset: s,
+  onResolveJogak: n,
+  viewport: g,
+  bgMode: i,
+  bottomTab: k,
+  onViewportChange: d,
+  onBgModeChange: l,
+  onBottomTabChange: c,
+  prismTheme: p,
+  previewIsolation: f,
+  userPreviewUrl: S,
+  previewEntryPath: y
 }) {
-  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: [
+  var z;
+  const v = a ?? ((z = o.jogaks[0]) == null ? void 0 : z.name) ?? null;
+  if (x(() => {
+    a === null && v !== null && n !== void 0 && n(o.id, v);
+  }, [a, v, o.id, n]), v === null)
+    return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Entry has no jogaks: ",
-      e.id
+      o.id
     ] });
-  const y = e.jogaks.find((k) => k.name === b);
-  if (y === void 0)
-    return /* @__PURE__ */ c("div", { style: { padding: 24, color: "#ef4444" }, children: [
+  const w = o.jogaks.find((C) => C.name === v);
+  if (w === void 0)
+    return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Jogak not found: ",
-      b
+      v
     ] });
-  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,
+  const R = { ...w.args ?? {}, ...e }, u = {
+    ...o.meta.argTypes ?? {},
+    ...w.argTypes ?? {}
+  }, m = Object.keys(e).length > 0, b = X[g];
+  return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
+    /* @__PURE__ */ t(
+      Y,
       {
-        title: e.title,
-        jogakName: y.name,
-        viewport: s,
-        bgMode: l,
-        onViewportChange: m,
-        onBgModeChange: p,
-        showReset: P,
-        onReset: d
+        title: o.title,
+        jogakName: w.name,
+        viewport: g,
+        bgMode: i,
+        onViewportChange: d,
+        onBgModeChange: l,
+        showReset: m,
+        onReset: s
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "div",
       {
-        style: {
-          flex: 1,
-          minHeight: I,
-          overflow: "auto",
-          ...M[l]
-        },
-        children: /* @__PURE__ */ n(
+        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
+        style: V[i],
+        children: /* @__PURE__ */ t(
           "div",
           {
+            "data-jogak-content": !0,
+            className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
             style: {
-              maxWidth: O === "none" ? "100%" : O,
-              margin: "0 auto",
-              padding: 24
+              "--jogak-canvas-mw": b === "none" ? "100%" : `${b}px`
             },
-            children: /* @__PURE__ */ n(
-              ce,
+            children: /* @__PURE__ */ t(
+              $o,
               {
-                entry: e,
-                args: u,
-                source: e.source,
-                theme: S
+                entry: o,
+                args: R,
+                theme: p,
+                previewIsolation: f,
+                userPreviewUrl: S,
+                previewEntryPath: y
               },
-              `${e.id}/${y.name}`
+              `${o.id}/${w.name}`
             )
           }
         )
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ j(
       "div",
       {
-        style: {
-          height: 260,
-          flexShrink: 0,
-          display: "flex",
-          flexDirection: "column",
-          borderTop: "2px solid #e5e7eb"
-        },
+        "data-testid": "bottom-panel",
+        className: "jogak:h-[260px] jogak:shrink-0 jogak:flex jogak:flex-col jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             "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(
+              className: "jogak:flex jogak:gap-1 jogak:pt-1 jogak:px-3 jogak:pb-0 jogak:bg-[var(--jogak-color-bg)] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:shrink-0",
+              children: ["controls", "actions"].map((C) => {
+                const D = k === C;
+                return /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
                     role: "tab",
-                    "aria-selected": C,
+                    "aria-selected": D,
                     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"
+                      c(C);
                     },
-                    children: k
+                    className: N(
+                      "jogak:px-[14px] jogak:py-[6px] jogak:text-[12px] jogak:bg-transparent jogak:border-x-0 jogak:border-t-0 jogak:border-b-2 jogak:border-solid jogak:-mb-px jogak:cursor-pointer jogak:capitalize",
+                      D ? "jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]" : "jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"
+                    ),
+                    children: C
                   },
-                  k
+                  C
                 );
               })
             }
           ),
-          /* @__PURE__ */ n("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: a === "controls" ? /* @__PURE__ */ n(
-            te,
+          /* @__PURE__ */ t("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: k === "controls" ? /* @__PURE__ */ t(
+            io,
             {
-              args: u,
-              argTypes: g,
-              onArgChange: i
+              args: R,
+              argTypes: u,
+              onArgChange: r
             }
-          ) : /* @__PURE__ */ n(re, {}) })
+          ) : /* @__PURE__ */ t(jo, {}) })
         ]
       }
     )
   ] });
 }
-function J({
-  title: e,
-  jogakName: t,
-  viewport: o,
-  bgMode: i,
-  onViewportChange: d,
-  onBgModeChange: r,
-  showReset: s,
-  onReset: l
+function Y({
+  title: o,
+  jogakName: a,
+  viewport: e,
+  bgMode: r,
+  onViewportChange: s,
+  onBgModeChange: n,
+  showReset: g,
+  onReset: i
 }) {
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-        padding: "7px 14px",
-        borderBottom: "1px solid #e5e7eb",
-        background: "#fff",
-        flexShrink: 0
+  return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:items-center jogak:gap-[10px] jogak:px-[14px] jogak:py-[7px] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg)] jogak:shrink-0", children: [
+    /* @__PURE__ */ j("div", { className: "jogak:flex-1 jogak:text-[13px]", children: [
+      /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)]", children: o }),
+      /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none", children: "/" }),
+      /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold", children: a })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "jogak:flex jogak:gap-0.5 jogak:bg-[var(--jogak-color-bg-subtle)] jogak:rounded-[var(--jogak-radius-lg)] jogak:p-0.5", children: ["mobile", "tablet", "desktop"].map((k) => /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          s(k);
+        },
+        "aria-pressed": e === k,
+        className: N(
+          "jogak:px-[9px] jogak:py-[3px] jogak:text-[12px] jogak:border-none jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:transition-all jogak:duration-100",
+          e === k ? "jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"
+        ),
+        children: wo[k]
       },
-      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
-            ))
-          }
+      k
+    )) }),
+    /* @__PURE__ */ t("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((k) => /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          n(k);
+        },
+        "aria-pressed": r === k,
+        "aria-label": `${k} background`,
+        className: N(
+          "jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",
+          B,
+          r === k ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
         ),
-        /* @__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"
-          }
-        )
-      ]
-    }
-  );
+        style: V[k]
+      },
+      k
+    )) }),
+    g && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: i,
+        className: "jogak:px-[10px] jogak:py-[3px] jogak:text-[12px] jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:bg-[var(--jogak-color-bg)] jogak:cursor-pointer jogak:text-[var(--jogak-color-fg)] jogak:leading-none",
+        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",
+function $o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl: s, previewEntryPath: n }) {
+  const [g, i] = h(!1), k = mo(o, a), d = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
+    /* @__PURE__ */ t(
+      _o,
       {
-        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)"
+        entry: o,
+        args: a,
+        previewIsolation: r,
+        userPreviewUrl: s,
+        previewEntryPath: n
+      }
+    ),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          i((l) => !l);
         },
-        children: /* @__PURE__ */ n(pe, { source: o, theme: i })
+        "aria-pressed": g,
+        "aria-label": g ? "Hide source code" : "Show source code",
+        className: N(
+          "jogak:absolute jogak:bottom-2 jogak:right-2 jogak:px-[9px] jogak:py-1",
+          "jogak:text-[11px] jogak:font-[family-name:var(--jogak-font-mono)] jogak:font-semibold jogak:tracking-[0.02em]",
+          "jogak:text-[var(--jogak-color-bg)] jogak:border-none jogak:rounded-[5px] jogak:cursor-pointer",
+          "jogak:shadow-[0_1px_4px_rgba(0,0,0,0.2)] jogak:transition-[background-color] jogak:duration-150 jogak:leading-none",
+          g ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
+        ),
+        children: "</>"
       }
     )
   ] });
+  return /* @__PURE__ */ j("div", { children: [
+    d,
+    g && /* @__PURE__ */ t("div", { className: "jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]", children: /* @__PURE__ */ t(Lo, { source: k, theme: e }) })
+  ] });
 }
-function pe({ source: e, theme: t }) {
-  const [o, i] = x(!1), d = t.plain.backgroundColor ?? "#1e293b";
-  return e === void 0 ? /* @__PURE__ */ n(
+const J = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
+function _o({ entry: o, args: a, previewIsolation: e, userPreviewUrl: r, previewEntryPath: s }) {
+  return e === "shadow" ? /* @__PURE__ */ t(
+    uo,
+    {
+      "data-testid": "preview-content",
+      className: J,
+      children: /* @__PURE__ */ t(Ao, { entry: o, args: a })
+    }
+  ) : e === "iframe" ? /* @__PURE__ */ t(
+    po,
+    {
+      entry: o,
+      args: a,
+      userPreviewUrl: r,
+      previewEntryPath: s,
+      "data-testid": "preview-content",
+      className: `${J} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
+    }
+  ) : /* @__PURE__ */ t(Ro, { entry: o, args: a });
+}
+function Ro({ entry: o, args: a }) {
+  const e = L(null);
+  return x(() => {
+    const r = e.current;
+    if (r !== null)
+      return $.render(o, a, r), () => {
+        queueMicrotask(() => {
+          $.unmount(r);
+        });
+      };
+  }, [o]), x(() => {
+    const r = e.current;
+    r !== null && $.render(o, a, r);
+  }, [o, a]), /* @__PURE__ */ t(
     "div",
     {
-      style: {
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background: d,
-        color: "#94a3b8",
-        fontSize: 13
-      },
+      ref: e,
+      "data-testid": "preview-content",
+      className: J
+    }
+  );
+}
+function Ao({ entry: o, args: a }) {
+  const e = L(null);
+  return x(() => {
+    const r = e.current;
+    if (r !== null)
+      return $.render(o, a, r), () => {
+        queueMicrotask(() => {
+          $.unmount(r);
+        });
+      };
+  }, [o]), x(() => {
+    const r = e.current;
+    r !== null && $.render(o, a, r);
+  }, [o, a]), /* @__PURE__ */ t("div", { ref: e, "data-testid": "preview-content-shadow" });
+}
+function Lo({ source: o, theme: a }) {
+  const [e, r] = h(!1), s = a.plain.backgroundColor ?? "#1e293b";
+  return o === void 0 ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: "jogak:h-full jogak:flex jogak:items-center jogak:justify-center jogak:bg-[var(--jogak-source-bg)] jogak:text-[#94a3b8] jogak:text-[13px]",
+      style: { "--jogak-source-bg": s },
       children: "Source not available"
     }
-  ) : /* @__PURE__ */ c("div", { style: { position: "relative", height: "100%" }, children: [
-    /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
+    /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         onClick: () => {
-          navigator.clipboard.writeText(e).then(() => {
-            i(!0), setTimeout(() => {
-              i(!1);
+          navigator.clipboard.writeText(o).then(() => {
+            r(!0), setTimeout(() => {
+              r(!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"
+        className: "jogak:absolute jogak:top-[10px] jogak:right-3 jogak:z-[1] jogak:px-[9px] jogak:py-[3px] jogak:text-[11px] jogak:bg-[rgba(255,255,255,0.1)] jogak:text-[#e2e8f0] jogak:border jogak:border-[rgba(255,255,255,0.18)] jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:leading-none",
+        children: e ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ n(Q, { code: e.trim(), language: "tsx", theme: t, children: ({ style: s, tokens: l, getLineProps: a, getTokenProps: m }) => /* @__PURE__ */ n(
+    /* @__PURE__ */ t(eo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: g, tokens: i, getLineProps: k, getTokenProps: d }) => /* @__PURE__ */ t(
       "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(
+        className: "jogak:m-0 jogak:py-3 jogak:px-0 jogak:text-[12.5px] jogak:leading-[1.7] jogak:font-[family-name:var(--jogak-font-mono)] jogak:h-full jogak:box-border jogak:overflow-auto",
+        style: g,
+        children: i.map((l, c) => /* @__PURE__ */ j(
           "div",
           {
-            ...a({ line: p }),
-            style: {
-              ...a({ line: p }).style,
-              display: "flex",
-              paddingRight: 24
-            },
+            ...k({ line: l }),
+            className: "jogak:flex jogak:pr-6",
+            style: k({ line: l }).style,
             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)) })
+              /* @__PURE__ */ t("span", { className: "jogak:select-none jogak:min-w-10 jogak:pl-[14px] jogak:pr-[14px] jogak:text-right jogak:text-[rgba(148,163,184,0.45)] jogak:shrink-0 jogak:leading-[1.7]", children: c + 1 }),
+              /* @__PURE__ */ t("span", { children: l.map((p, f) => /* @__PURE__ */ t("span", { ...d({ token: p }) }, f)) })
             ]
           },
-          h
+          c
         ))
       }
     ) })
   ] });
 }
-function E() {
+function I() {
   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 };
+  const o = new URLSearchParams(window.location.search), a = o.get("entry");
+  if (a === null) return null;
+  const e = o.get("jogak");
+  return { entryId: a, jogakName: e };
 }
-function fe(e, t) {
-  const o = new URLSearchParams();
-  o.set("entry", e), o.set("jogak", t), window.history.pushState({}, "", `?${o.toString()}`);
+function Eo(o, a) {
+  const e = new URLSearchParams();
+  e.set("entry", o), e.set("jogak", a), window.history.pushState({}, "", `?${e.toString()}`);
 }
-function me({
-  entries: e,
-  metas: t,
-  codeTheme: o = "vsDark"
+function Wo({
+  entries: o,
+  metas: a,
+  codeTheme: e = "vsDark",
+  previewIsolation: r = "iframe",
+  userPreviewUrl: s = "",
+  previewEntryPath: n = "/__jogak_preview__/index.html",
+  userViteUrl: g
 } = {}) {
-  const i = w(() => {
-    if (e !== void 0) {
-      t !== void 0 && console.warn(
+  const i = s !== "" ? s : g ?? "", k = _(() => {
+    if (o !== void 0) {
+      a !== 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;
+      const u = new Z();
+      for (const m of o) u.register(m);
+      return u;
     }
-    if (t !== void 0)
-      for (const f of t) F.registerMeta(f);
-    return F;
-  }, [e, t]), d = w(() => E(), []), [r, s] = x(
+    if (a !== void 0)
+      for (const u of a) H.registerMeta(u);
+    return H;
+  }, [o, a]), d = _(() => I(), []), [l, c] = h(
     (d == null ? void 0 : d.entryId) ?? null
-  ), [l, a] = x(
+  ), [p, f] = h(
     (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));
+  ), [S, y] = h({});
+  x(() => {
+    const u = () => {
+      const m = I();
+      m !== null ? (c(m.entryId), f(m.jogakName), y({})) : (c(null), f(null));
     };
-    return window.addEventListener("popstate", f), () => {
-      window.removeEventListener("popstate", f);
+    return window.addEventListener("popstate", u), () => {
+      window.removeEventListener("popstate", u);
     };
   }, []);
-  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()}`));
+  const v = A((u, m) => {
+    c(u), f(m), y({}), Eo(u, m);
+  }, []), w = A((u, m) => {
+    if (c((b) => b === u ? u : b), f((b) => b ?? m), typeof window < "u") {
+      const b = new URLSearchParams(window.location.search);
+      b.get("entry") === u && b.get("jogak") === null && (b.set("jogak", m), window.history.replaceState({}, "", `?${b.toString()}`));
     }
-  }, []), b = R((f, u) => {
-    p((g) => ({ ...g, [f]: u }));
-  }, []), y = R(() => {
-    p({});
+  }, []), W = A((u, m) => {
+    y((b) => ({ ...b, [u]: m }));
+  }, []), R = A(() => {
+    y({});
   }, []);
-  return /* @__PURE__ */ n(T, { registry: i, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ t(oo, { registry: k, children: /* @__PURE__ */ j(
     "div",
     {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "260px 1fr",
-        height: "100dvh",
-        overflow: "hidden"
-      },
+      "data-jogak-shell": !0,
+      className: "jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",
       children: [
-        /* @__PURE__ */ n(
-          Y,
+        /* @__PURE__ */ t(
+          ro,
           {
-            selectedEntryId: r,
-            selectedJogakName: l,
-            onSelect: h
+            selectedEntryId: l,
+            selectedJogakName: p,
+            onSelect: v
           }
         ),
-        /* @__PURE__ */ n("main", { style: { overflow: "hidden", minHeight: 0 }, children: r !== null ? /* @__PURE__ */ n(
-          le,
+        /* @__PURE__ */ t("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: l !== null ? /* @__PURE__ */ t(
+          yo,
           {
-            entryId: r,
-            jogakName: l,
-            overrideArgs: m,
-            onArgChange: b,
-            onReset: y,
-            codeTheme: o,
-            onResolveJogak: S
+            entryId: l,
+            jogakName: p,
+            overrideArgs: S,
+            onArgChange: W,
+            onReset: R,
+            codeTheme: e,
+            onResolveJogak: w,
+            previewIsolation: r,
+            userPreviewUrl: i,
+            previewEntryPath: n
           }
-        ) : /* @__PURE__ */ n(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100%",
-              color: "#9ca3af"
-            },
-            children: "Select a component from the sidebar"
-          }
-        ) })
+        ) : /* @__PURE__ */ t("div", { className: "jogak:flex jogak:items-center jogak:justify-center jogak:h-full jogak:text-[var(--jogak-color-fg-subtle)]", 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]
+function zo() {
+  const o = ao(), a = _(() => o.getAll(), [o]), e = _(() => o.getTree(), [o]), r = _(
+    () => (s) => o.search(s),
+    [o]
   );
-  return { entries: t, tree: o, search: i };
+  return { entries: a, tree: e, search: r };
 }
 export {
-  re as Actions,
-  te as Controls,
-  me as JogakApp,
-  le as Preview,
-  Y as Sidebar,
-  ye as useRegistry
+  jo as Actions,
+  io as Controls,
+  Wo as JogakApp,
+  yo as Preview,
+  ro as Sidebar,
+  zo as useRegistry
 };