@jogak/ui 0.1.0-alpha.7.1 → 0.1.0-alpha.9

package/dist/index.mjs

@@ -1,28 +1,28 @@
 import { jsxs as j, jsx as e } from "react/jsx-runtime";
-import { useState as m, useEffect as b, useRef as _, useMemo as C, useCallback as R } from "react";
-import { defaultActionChannel as A, ComponentRegistry as Q, defaultRegistry as W } from "@jogak/core";
-import { useRegistryMeta as X, useEntry as Y, reactAdapter as S, JogakProvider as Z, useRegistry as K } from "@jogak/react";
-import { themes as z, Highlight as T } from "prism-react-renderer";
-import { createPortal as oo } from "react-dom";
-function F(o) {
+import { useState as b, useEffect as h, useRef as E, useMemo as R, useCallback as $ } from "react";
+import { defaultActionChannel as L, ComponentRegistry as Y, defaultRegistry as F } from "@jogak/core";
+import { useRegistryMeta as Z, useEntry as K, reactAdapter as _, JogakProvider as T, useRegistry as oo } from "@jogak/react";
+import { themes as H, Highlight as ao } from "prism-react-renderer";
+import { createPortal as eo } from "react-dom";
+function q(o) {
   var a, r, t = "";
   if (typeof o == "string" || typeof o == "number") t += o;
   else if (typeof o == "object") if (Array.isArray(o)) {
-    var k = o.length;
-    for (a = 0; a < k; a++) o[a] && (r = F(o[a])) && (t && (t += " "), t += r);
+    var g = o.length;
+    for (a = 0; a < g; a++) o[a] && (r = q(o[a])) && (t && (t += " "), t += r);
   } else for (r in o) o[r] && (t && (t += " "), t += r);
   return t;
 }
-function v() {
-  for (var o, a, r = 0, t = "", k = arguments.length; r < k; r++) (o = arguments[r]) && (a = F(o)) && (t && (t += " "), t += a);
+function N() {
+  for (var o, a, r = 0, t = "", g = arguments.length; r < g; r++) (o = arguments[r]) && (a = q(o)) && (t && (t += " "), t += a);
   return t;
 }
-function ao({
+function ro({
   selectedEntryId: o,
   selectedJogakName: a,
   onSelect: r
 }) {
-  const [t, k] = m(""), { metaTree: n, searchMeta: s } = X(), l = t.trim().length > 0 ? s(t) : null;
+  const [t, g] = b(""), { metaTree: n, searchMeta: s } = Z(), l = t.trim().length > 0 ? s(t) : null;
   return /* @__PURE__ */ j(
     "aside",
     {
@@ -35,15 +35,15 @@ function ao({
             type: "search",
             placeholder: "Search components...",
             value: t,
-            onChange: (g) => {
-              k(g.target.value);
+            onChange: (i) => {
+              g(i.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__ */ e("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: l !== null ? /* @__PURE__ */ e(
-          eo,
+          to,
           {
             metas: l,
             selectedEntryId: o,
@@ -51,7 +51,7 @@ function ao({
             onSelect: r
           }
         ) : /* @__PURE__ */ e(
-          H,
+          G,
           {
             node: n,
             selectedEntryId: o,
@@ -63,37 +63,37 @@ function ao({
     }
   );
 }
-function eo({
+function to({
   metas: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t
 }) {
-  return o.length === 0 ? /* @__PURE__ */ e("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((k) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-    U,
+  return o.length === 0 ? /* @__PURE__ */ e("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((g) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+    I,
     {
-      meta: k,
+      meta: g,
       selectedEntryId: a,
       selectedJogakName: r,
       onSelect: t,
       indent: 0
     }
-  ) }, k.id)) });
+  ) }, g.id)) });
 }
-function H({
+function G({
   node: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  depth: k = 0
+  depth: g = 0
 }) {
   return /* @__PURE__ */ e(
     "ul",
     {
       className: "jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",
-      style: { "--jogak-tree-pl": `${k * 12}px` },
+      style: { "--jogak-tree-pl": `${g * 12}px` },
       children: Object.entries(o).map(([n, s]) => /* @__PURE__ */ e("li", { children: "id" in s ? /* @__PURE__ */ e(
-        U,
+        I,
         {
           meta: s,
           selectedEntryId: a,
@@ -102,35 +102,35 @@ function H({
           indent: 0
         }
       ) : /* @__PURE__ */ e(
-        ro,
+        no,
         {
           label: n,
           node: s,
           selectedEntryId: a,
           selectedJogakName: r,
           onSelect: t,
-          depth: k + 1
+          depth: g + 1
         }
       ) }, n))
     }
   );
 }
-function ro({
+function no({
   label: o,
   node: a,
   selectedEntryId: r,
   selectedJogakName: t,
-  onSelect: k,
+  onSelect: g,
   depth: n
 }) {
-  const [s, l] = m(!0);
+  const [s, l] = b(!0);
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          l((g) => !g);
+          l((i) => !i);
         },
         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": s,
@@ -141,29 +141,29 @@ function ro({
       }
     ),
     s && /* @__PURE__ */ e(
-      H,
+      G,
       {
         node: a,
         selectedEntryId: r,
         selectedJogakName: t,
-        onSelect: k,
+        onSelect: g,
         depth: n
       }
     )
   ] });
 }
-function U({
+function I({
   meta: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  indent: k
+  indent: g
 }) {
-  const n = o.id === a, [s, l] = m(n);
-  b(() => {
+  const n = o.id === a, [s, l] = b(n);
+  h(() => {
     n && l(!0);
   }, [n]);
-  const g = o.title.split("/").pop() ?? o.title, i = 16 + k * 12;
+  const i = o.title.split("/").pop() ?? o.title, d = 16 + g * 12;
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
@@ -171,57 +171,57 @@ function U({
         type: "button",
         onClick: () => {
           if (n)
-            l((c) => !c);
+            l((k) => !k);
           else {
             l(!0);
-            const c = o.jogakNames[0];
-            c !== void 0 && t(o.id, c);
+            const k = o.jogakNames[0];
+            k !== void 0 && t(o.id, k);
           }
         },
-        className: v(
+        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": `${i}px` },
+        style: { "--jogak-entry-pl": `${d}px` },
         "aria-expanded": s,
         children: [
           /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: s ? "▾" : "▸" }),
-          g
+          i
         ]
       }
     ),
-    s && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((c) => {
-      const p = n && c === r;
+    s && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((k) => {
+      const c = n && k === r;
       return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: () => {
-            t(o.id, c);
+            t(o.id, k);
           },
-          className: v(
+          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]",
-            p ? "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"
+            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": `${i + 18}px` },
-          "aria-current": p ? "true" : void 0,
-          children: c
+          style: { "--jogak-jogak-pl": `${d + 18}px` },
+          "aria-current": c ? "true" : void 0,
+          children: k
         }
-      ) }, c);
+      ) }, k);
     }) })
   ] });
 }
-function to(o, a) {
-  const r = a == null ? void 0 : a.control, t = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, k = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
-  return t || k ? "action" : r === "boolean" || typeof o == "boolean" ? "boolean" : r === "number" || r === "range" || typeof o == "number" ? "number" : r === "select" || r === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : r === "text" || r === "color" || typeof o == "string" ? "text" : "json";
+function go(o, a) {
+  const r = a == null ? void 0 : a.control, t = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, g = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
+  return t || g ? "action" : r === "boolean" || typeof o == "boolean" ? "boolean" : r === "number" || r === "range" || typeof o == "number" ? "number" : r === "select" || r === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : r === "text" || r === "color" || typeof o == "string" ? "text" : "json";
 }
-const $ = "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]", L = "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)]", E = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
-function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
-  switch (to(a, r)) {
+const M = "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]", O = "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)]", P = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
+function so({ argKey: o, value: a, argType: r, onArgChange: t }) {
+  switch (go(a, r)) {
     case "boolean":
       return /* @__PURE__ */ e(
         "input",
@@ -243,7 +243,7 @@ function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
           onChange: (n) => {
             t(o, n.target.valueAsNumber);
           },
-          className: $
+          className: M
         }
       );
     case "select": {
@@ -255,7 +255,7 @@ function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
           onChange: (s) => {
             t(o, s.target.value);
           },
-          className: $,
+          className: M,
           children: n.map((s) => /* @__PURE__ */ e("option", { value: String(s), children: String(s) }, String(s)))
         }
       );
@@ -269,7 +269,7 @@ function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
           onChange: (n) => {
             t(o, n.target.value);
           },
-          className: $
+          className: M
         }
       );
     case "action":
@@ -278,31 +278,31 @@ function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
       return /* @__PURE__ */ e("code", { className: "jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]", children: JSON.stringify(a) });
   }
 }
-function go({ args: o, argTypes: a, onArgChange: r }) {
-  const k = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
+function lo({ args: o, argTypes: a, onArgChange: r }) {
+  const g = 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__ */ e("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" }),
-    k.length === 0 ? /* @__PURE__ */ e("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: [
+    g.length === 0 ? /* @__PURE__ */ e("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__ */ e("thead", { children: /* @__PURE__ */ j("tr", { children: [
-        /* @__PURE__ */ e("th", { className: L, children: "Name" }),
-        /* @__PURE__ */ e("th", { className: L, children: "Control" }),
-        /* @__PURE__ */ e("th", { className: L, children: "Description" })
+        /* @__PURE__ */ e("th", { className: O, children: "Name" }),
+        /* @__PURE__ */ e("th", { className: O, children: "Control" }),
+        /* @__PURE__ */ e("th", { className: O, children: "Description" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: k.map(([n, s]) => {
+      /* @__PURE__ */ e("tbody", { children: g.map(([n, s]) => {
         const l = a[n];
         return /* @__PURE__ */ j("tr", { children: [
           /* @__PURE__ */ e(
             "td",
             {
-              className: v(
-                E,
+              className: N(
+                P,
                 "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"
               ),
               children: n
             }
           ),
-          /* @__PURE__ */ e("td", { className: E, children: /* @__PURE__ */ e(
-            no,
+          /* @__PURE__ */ e("td", { className: P, children: /* @__PURE__ */ e(
+            so,
             {
               argKey: n,
               value: s,
@@ -310,13 +310,13 @@ function go({ args: o, argTypes: a, onArgChange: r }) {
               onArgChange: r
             }
           ) }),
-          /* @__PURE__ */ e("td", { className: v(E, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
+          /* @__PURE__ */ e("td", { className: N(P, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
         ] }, n);
       }) })
     ] })
   ] });
 }
-function so(o) {
+function ko(o) {
   if (o.length === 0) return "()";
   try {
     return o.map((a) => {
@@ -334,13 +334,13 @@ function so(o) {
     return "[unserializable]";
   }
 }
-function ko(o) {
-  const a = new Date(o), r = a.getHours().toString().padStart(2, "0"), t = a.getMinutes().toString().padStart(2, "0"), k = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
-  return `${r}:${t}:${k}.${n}`;
+function io(o) {
+  const a = new Date(o), r = a.getHours().toString().padStart(2, "0"), t = a.getMinutes().toString().padStart(2, "0"), g = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
+  return `${r}:${t}:${g}.${n}`;
 }
-function lo() {
-  const [o, a] = m(() => A.getLogs());
-  b(() => A.subscribe(a), []);
+function jo() {
+  const [o, a] = b(() => L.getLogs());
+  h(() => L.subscribe(a), []);
   const r = 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: [
@@ -353,10 +353,10 @@ function lo() {
         {
           type: "button",
           onClick: () => {
-            A.clear();
+            L.clear();
           },
           disabled: r,
-          className: v(
+          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",
             r ? "jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default" : "jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"
           ),
@@ -369,11 +369,11 @@ function lo() {
       {
         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__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: ko(t.timestamp) }),
+          /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: io(t.timestamp) }),
           /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: t.name }),
           /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
             "(",
-            so(t.args),
+            ko(t.args),
             ")"
           ] })
         ]
@@ -382,72 +382,84 @@ function lo() {
     )) }) })
   ] });
 }
-function jo({
+function co({
   children: o,
   className: a,
   style: r,
   "data-testid": t
 }) {
-  const k = _(null), [n, s] = m(null);
-  return b(() => {
-    const l = k.current;
+  const g = E(null), [n, s] = b(null);
+  return h(() => {
+    const l = g.current;
     if (l === null) return;
-    const g = l.shadowRoot ?? l.attachShadow({ mode: "open" });
-    s(g);
+    const i = l.shadowRoot ?? l.attachShadow({ mode: "open" });
+    s(i);
   }, []), /* @__PURE__ */ e(
     "div",
     {
-      ref: k,
+      ref: g,
       className: a,
       "data-testid": t,
       style: r,
-      children: n !== null ? oo(o, n) : null
+      children: n !== null ? eo(o, n) : null
     }
   );
 }
-function io({
+function uo({
   entry: o,
   args: a,
-  className: r,
-  "data-testid": t
+  userPreviewUrl: r,
+  previewEntryPath: t,
+  className: g,
+  "data-testid": n
 }) {
-  const k = _(null), n = _(!1);
-  return b(() => {
-    const s = k.current;
-    if (s === null) return;
-    const l = () => {
-      var g, i;
-      n.current = !0, (i = (g = s.contentWindow) == null ? void 0 : g.__jogak_setProps__) == null || i.call(g, { entry: o, args: a });
+  const s = E(null), [l, i] = b(!1), d = r !== "" ? `${r}${t}` : "/preview-frame.html";
+  return h(() => {
+    const k = (c) => {
+      const x = s.current;
+      if (x === null || c.source !== x.contentWindow) return;
+      const p = c.data;
+      p == null || typeof p != "object" || p.type === "jogak:ready" && i(!0);
     };
-    return s.addEventListener("load", l), () => {
-      s.removeEventListener("load", l), queueMicrotask(() => {
-        var g, i;
-        (i = (g = s.contentWindow) == null ? void 0 : g.__jogak_unmount__) == null || i.call(g);
+    return window.addEventListener("message", k), () => {
+      window.removeEventListener("message", k);
+    };
+  }, []), h(() => {
+    var c;
+    if (!l) return;
+    const k = s.current;
+    k !== null && ((c = k.contentWindow) == null || c.postMessage(
+      { type: "jogak:setProps", entryId: o.id, args: a },
+      "*"
+    ));
+  }, [l, o, a]), h(() => {
+    const k = s.current;
+    return () => {
+      k !== null && queueMicrotask(() => {
+        var c;
+        (c = k.contentWindow) == null || c.postMessage({ type: "jogak:unmount" }, "*");
       });
     };
-  }, []), b(() => {
-    var s, l, g;
-    n.current && ((g = (l = (s = k.current) == null ? void 0 : s.contentWindow) == null ? void 0 : l.__jogak_setProps__) == null || g.call(l, { entry: o, args: a }));
-  }, [o, a]), /* @__PURE__ */ e(
+  }, []), /* @__PURE__ */ e(
     "iframe",
     {
-      ref: k,
-      src: "/preview-frame.html",
+      ref: s,
+      src: d,
       title: "Preview",
-      className: r,
-      "data-testid": t
+      className: g,
+      "data-testid": n
     }
   );
 }
-const q = {
+const Q = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, co = {
+}, po = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
-}, P = {
+}, V = {
   white: {
     "--jogak-canvas-bg": "#ffffff",
     "--jogak-canvas-bg-image": "none",
@@ -466,22 +478,24 @@ const q = {
     "--jogak-canvas-bg-size": "16px 16px",
     "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
   }
-}, M = "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 uo(o) {
-  return z[o] ?? z.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 fo(o) {
+  return H[o] ?? H.vsDark;
 }
-function po({
+function mo({
   entryId: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: k,
+  onReset: g,
   codeTheme: n,
   onResolveJogak: s,
-  previewIsolation: l = "shadow"
+  previewIsolation: l = "iframe",
+  userPreviewUrl: i = "",
+  previewEntryPath: d = "/__jogak_preview__/index.html"
 }) {
-  const g = Y(o), [i, c] = m("desktop"), [p, w] = m("white"), [N, h] = m("controls"), x = uo(n);
-  return g.status === "unknown" ? /* @__PURE__ */ j(
+  const k = K(o), [c, x] = b("desktop"), [p, S] = b("white"), [y, v] = b("controls"), w = fo(n);
+  return k.status === "unknown" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-not-found",
@@ -491,7 +505,7 @@ function po({
         o
       ]
     }
-  ) : g.status === "error" ? /* @__PURE__ */ j(
+  ) : k.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
@@ -501,48 +515,50 @@ function po({
           "Failed to load entry: ",
           o
         ] }),
-        /* @__PURE__ */ e("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: g.error.message })
+        /* @__PURE__ */ e("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: k.error.message })
       ]
     }
-  ) : g.status === "loading" ? /* @__PURE__ */ e(
-    fo,
+  ) : k.status === "loading" ? /* @__PURE__ */ e(
+    bo,
     {
-      meta: g.meta,
+      meta: k.meta,
       jogakName: a,
-      viewport: i,
+      viewport: c,
       bgMode: p,
-      onViewportChange: c,
-      onBgModeChange: w
+      onViewportChange: x,
+      onBgModeChange: S
     }
   ) : /* @__PURE__ */ e(
-    mo,
+    xo,
     {
-      entry: g.entry,
+      entry: k.entry,
       jogakName: a,
       overrideArgs: r,
       onArgChange: t,
-      onReset: k,
+      onReset: g,
       onResolveJogak: s,
-      viewport: i,
+      viewport: c,
       bgMode: p,
-      bottomTab: N,
-      onViewportChange: c,
-      onBgModeChange: w,
-      onBottomTabChange: h,
-      prismTheme: x,
-      previewIsolation: l
+      bottomTab: y,
+      onViewportChange: x,
+      onBgModeChange: S,
+      onBottomTabChange: v,
+      prismTheme: w,
+      previewIsolation: l,
+      userPreviewUrl: i,
+      previewEntryPath: d
     }
   );
 }
-function fo({
+function bo({
   meta: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: k,
+  onViewportChange: g,
   onBgModeChange: n
 }) {
-  const s = a ?? o.jogakNames[0] ?? "...", l = q[r];
+  const s = a ?? o.jogakNames[0] ?? "...", l = Q[r];
   return /* @__PURE__ */ j(
     "div",
     {
@@ -550,13 +566,13 @@ function fo({
       className: "jogak:flex jogak:flex-col jogak:h-full",
       children: [
         /* @__PURE__ */ e(
-          G,
+          X,
           {
             title: o.title,
             jogakName: s,
             viewport: r,
             bgMode: t,
-            onViewportChange: k,
+            onViewportChange: g,
             onBgModeChange: n,
             showReset: !1,
             onReset: () => {
@@ -566,8 +582,8 @@ function fo({
         /* @__PURE__ */ e(
           "div",
           {
-            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
-            style: P[t],
+            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
+            style: V[t],
             children: /* @__PURE__ */ e(
               "div",
               {
@@ -588,78 +604,82 @@ function fo({
     }
   );
 }
-function mo({
+function xo({
   entry: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: k,
+  onReset: g,
   onResolveJogak: n,
   viewport: s,
   bgMode: l,
-  bottomTab: g,
-  onViewportChange: i,
-  onBgModeChange: c,
-  onBottomTabChange: p,
-  prismTheme: w,
-  previewIsolation: N
+  bottomTab: i,
+  onViewportChange: d,
+  onBgModeChange: k,
+  onBottomTabChange: c,
+  prismTheme: x,
+  previewIsolation: p,
+  userPreviewUrl: S,
+  previewEntryPath: y
 }) {
-  var V;
-  const h = a ?? ((V = o.jogaks[0]) == null ? void 0 : V.name) ?? null;
-  if (b(() => {
-    a === null && h !== null && n !== void 0 && n(o.id, h);
-  }, [a, h, o.id, n]), h === null)
+  var z;
+  const v = a ?? ((z = o.jogaks[0]) == null ? void 0 : z.name) ?? null;
+  if (h(() => {
+    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: ",
       o.id
     ] });
-  const x = o.jogaks.find((y) => y.name === h);
-  if (x === void 0)
+  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: ",
-      h
+      v
     ] });
-  const u = { ...x.args ?? {}, ...r }, f = {
+  const A = { ...w.args ?? {}, ...r }, u = {
     ...o.meta.argTypes ?? {},
-    ...x.argTypes ?? {}
-  }, I = Object.keys(r).length > 0, J = q[s];
+    ...w.argTypes ?? {}
+  }, f = Object.keys(r).length > 0, m = Q[s];
   return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
     /* @__PURE__ */ e(
-      G,
+      X,
       {
         title: o.title,
-        jogakName: x.name,
+        jogakName: w.name,
         viewport: s,
         bgMode: l,
-        onViewportChange: i,
-        onBgModeChange: c,
-        showReset: I,
-        onReset: k
+        onViewportChange: d,
+        onBgModeChange: k,
+        showReset: f,
+        onReset: g
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
-        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
-        style: P[l],
+        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
+        style: V[l],
         children: /* @__PURE__ */ e(
           "div",
           {
             "data-jogak-content": !0,
             className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
             style: {
-              "--jogak-canvas-mw": J === "none" ? "100%" : `${J}px`
+              "--jogak-canvas-mw": m === "none" ? "100%" : `${m}px`
             },
             children: /* @__PURE__ */ e(
-              bo,
+              ho,
               {
                 entry: o,
-                args: u,
+                args: A,
                 source: o.source,
-                theme: w,
-                previewIsolation: N
+                theme: x,
+                previewIsolation: p,
+                userPreviewUrl: S,
+                previewEntryPath: y
               },
-              `${o.id}/${x.name}`
+              `${o.id}/${w.name}`
             )
           }
         )
@@ -676,47 +696,47 @@ function mo({
             {
               role: "tablist",
               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((y) => {
-                const B = g === y;
+              children: ["controls", "actions"].map((C) => {
+                const D = i === C;
                 return /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     role: "tab",
-                    "aria-selected": B,
+                    "aria-selected": D,
                     onClick: () => {
-                      p(y);
+                      c(C);
                     },
-                    className: v(
+                    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",
-                      B ? "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"
+                      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: y
+                    children: C
                   },
-                  y
+                  C
                 );
               })
             }
           ),
-          /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: g === "controls" ? /* @__PURE__ */ e(
-            go,
+          /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: i === "controls" ? /* @__PURE__ */ e(
+            lo,
             {
-              args: u,
-              argTypes: f,
+              args: A,
+              argTypes: u,
               onArgChange: t
             }
-          ) : /* @__PURE__ */ e(lo, {}) })
+          ) : /* @__PURE__ */ e(jo, {}) })
         ]
       }
     )
   ] });
 }
-function G({
+function X({
   title: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: k,
+  onViewportChange: g,
   onBgModeChange: n,
   showReset: s,
   onReset: l
@@ -727,39 +747,39 @@ function G({
       /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none", children: "/" }),
       /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold", children: a })
     ] }),
-    /* @__PURE__ */ e("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((g) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("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((i) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          k(g);
+          g(i);
         },
-        "aria-pressed": r === g,
-        className: v(
+        "aria-pressed": r === i,
+        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",
-          r === g ? "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"
+          r === i ? "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: co[g]
+        children: po[i]
       },
-      g
+      i
     )) }),
-    /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((g) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((i) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          n(g);
+          n(i);
         },
-        "aria-pressed": t === g,
-        "aria-label": `${g} background`,
-        className: v(
+        "aria-pressed": t === i,
+        "aria-label": `${i} 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",
-          M,
-          t === g ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
+          B,
+          t === i ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
         ),
-        style: P[g]
+        style: V[i]
       },
-      g
+      i
     )) }),
     s && /* @__PURE__ */ e(
       "button",
@@ -772,14 +792,16 @@ function G({
     )
   ] });
 }
-function bo({ entry: o, args: a, source: r, theme: t, previewIsolation: k }) {
-  const [n, s] = m(!1), l = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
+function ho({ entry: o, args: a, source: r, theme: t, previewIsolation: g, userPreviewUrl: n, previewEntryPath: s }) {
+  const [l, i] = b(!1), d = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
     /* @__PURE__ */ e(
-      ho,
+      vo,
       {
         entry: o,
         args: a,
-        previewIsolation: k
+        previewIsolation: g,
+        userPreviewUrl: n,
+        previewEntryPath: s
       }
     ),
     /* @__PURE__ */ e(
@@ -787,89 +809,91 @@ function bo({ entry: o, args: a, source: r, theme: t, previewIsolation: k }) {
       {
         type: "button",
         onClick: () => {
-          s((g) => !g);
+          i((k) => !k);
         },
-        "aria-pressed": n,
-        "aria-label": n ? "Hide source code" : "Show source code",
-        className: v(
+        "aria-pressed": l,
+        "aria-label": l ? "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",
-          n ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
+          l ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
         ),
         children: "</>"
       }
     )
   ] });
   return /* @__PURE__ */ j("div", { children: [
-    l,
-    n && /* @__PURE__ */ e("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__ */ e(wo, { source: r, theme: t }) })
+    d,
+    l && /* @__PURE__ */ e("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__ */ e(yo, { source: r, theme: t }) })
   ] });
 }
-const O = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
-function ho({ entry: o, args: a, previewIsolation: r }) {
+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 vo({ entry: o, args: a, previewIsolation: r, userPreviewUrl: t, previewEntryPath: g }) {
   return r === "shadow" ? /* @__PURE__ */ e(
-    jo,
+    co,
     {
       "data-testid": "preview-content",
-      className: O,
-      children: /* @__PURE__ */ e(vo, { entry: o, args: a })
+      className: J,
+      children: /* @__PURE__ */ e(No, { entry: o, args: a })
     }
   ) : r === "iframe" ? /* @__PURE__ */ e(
-    io,
+    uo,
     {
       entry: o,
       args: a,
+      userPreviewUrl: t,
+      previewEntryPath: g,
       "data-testid": "preview-content",
-      className: `${O} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
+      className: `${J} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
     }
-  ) : /* @__PURE__ */ e(xo, { entry: o, args: a });
+  ) : /* @__PURE__ */ e(wo, { entry: o, args: a });
 }
-function xo({ entry: o, args: a }) {
-  const r = _(null);
-  return b(() => {
+function wo({ entry: o, args: a }) {
+  const r = E(null);
+  return h(() => {
     const t = r.current;
     if (t !== null)
-      return S.render(o, a, t), () => {
+      return _.render(o, a, t), () => {
         queueMicrotask(() => {
-          S.unmount(t);
+          _.unmount(t);
         });
       };
-  }, [o]), b(() => {
+  }, [o]), h(() => {
     const t = r.current;
-    t !== null && S.render(o, a, t);
+    t !== null && _.render(o, a, t);
   }, [o, a]), /* @__PURE__ */ e(
     "div",
     {
       ref: r,
       "data-testid": "preview-content",
-      className: O
+      className: J
     }
   );
 }
-function vo({ entry: o, args: a }) {
-  const r = _(null);
-  return b(() => {
+function No({ entry: o, args: a }) {
+  const r = E(null);
+  return h(() => {
     const t = r.current;
     if (t !== null)
-      return S.render(o, a, t), () => {
+      return _.render(o, a, t), () => {
         queueMicrotask(() => {
-          S.unmount(t);
+          _.unmount(t);
         });
       };
-  }, [o]), b(() => {
+  }, [o]), h(() => {
     const t = r.current;
-    t !== null && S.render(o, a, t);
+    t !== null && _.render(o, a, t);
   }, [o, a]), /* @__PURE__ */ e("div", { ref: r, "data-testid": "preview-content-shadow" });
 }
-function wo({ source: o, theme: a }) {
-  const [r, t] = m(!1), k = a.plain.backgroundColor ?? "#1e293b";
+function yo({ source: o, theme: a }) {
+  const [r, t] = b(!1), g = a.plain.backgroundColor ?? "#1e293b";
   return o === void 0 ? /* @__PURE__ */ e(
     "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": k },
+      style: { "--jogak-source-bg": g },
       children: "Source not available"
     }
   ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
@@ -888,126 +912,131 @@ function wo({ source: o, theme: a }) {
         children: r ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ e(T, { code: o.trim(), language: "tsx", theme: a, children: ({ style: s, tokens: l, getLineProps: g, getTokenProps: i }) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e(ao, { code: o.trim(), language: "tsx", theme: a, children: ({ style: s, tokens: l, getLineProps: i, getTokenProps: d }) => /* @__PURE__ */ e(
       "pre",
       {
         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: s,
-        children: l.map((c, p) => /* @__PURE__ */ j(
+        children: l.map((k, c) => /* @__PURE__ */ j(
           "div",
           {
-            ...g({ line: c }),
+            ...i({ line: k }),
             className: "jogak:flex jogak:pr-6",
-            style: g({ line: c }).style,
+            style: i({ line: k }).style,
             children: [
-              /* @__PURE__ */ e("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: p + 1 }),
-              /* @__PURE__ */ e("span", { children: c.map((w, N) => /* @__PURE__ */ e("span", { ...i({ token: w }) }, N)) })
+              /* @__PURE__ */ e("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__ */ e("span", { children: k.map((x, p) => /* @__PURE__ */ e("span", { ...d({ token: x }) }, p)) })
             ]
           },
-          p
+          c
         ))
       }
     ) })
   ] });
 }
-function D() {
+function U() {
   if (typeof window > "u") return null;
   const o = new URLSearchParams(window.location.search), a = o.get("entry");
   if (a === null) return null;
   const r = o.get("jogak");
   return { entryId: a, jogakName: r };
 }
-function No(o, a) {
+function So(o, a) {
   const r = new URLSearchParams();
   r.set("entry", o), r.set("jogak", a), window.history.pushState({}, "", `?${r.toString()}`);
 }
-function $o({
+function Lo({
   entries: o,
   metas: a,
   codeTheme: r = "vsDark",
-  previewIsolation: t = "shadow"
+  previewIsolation: t = "iframe",
+  userPreviewUrl: g = "",
+  previewEntryPath: n = "/__jogak_preview__/index.html",
+  userViteUrl: s
 } = {}) {
-  const k = C(() => {
+  const l = g !== "" ? g : s ?? "", i = R(() => {
     if (o !== void 0) {
       a !== void 0 && console.warn(
         "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
       );
-      const d = new Q();
-      for (const u of o) d.register(u);
-      return d;
+      const u = new Y();
+      for (const f of o) u.register(f);
+      return u;
     }
     if (a !== void 0)
-      for (const d of a) W.registerMeta(d);
-    return W;
-  }, [o, a]), n = C(() => D(), []), [s, l] = m(
-    (n == null ? void 0 : n.entryId) ?? null
-  ), [g, i] = m(
-    (n == null ? void 0 : n.jogakName) ?? null
-  ), [c, p] = m({});
-  b(() => {
-    const d = () => {
-      const u = D();
-      u !== null ? (l(u.entryId), i(u.jogakName), p({})) : (l(null), i(null));
+      for (const u of a) F.registerMeta(u);
+    return F;
+  }, [o, a]), d = R(() => U(), []), [k, c] = b(
+    (d == null ? void 0 : d.entryId) ?? null
+  ), [x, p] = b(
+    (d == null ? void 0 : d.jogakName) ?? null
+  ), [S, y] = b({});
+  h(() => {
+    const u = () => {
+      const f = U();
+      f !== null ? (c(f.entryId), p(f.jogakName), y({})) : (c(null), p(null));
     };
-    return window.addEventListener("popstate", d), () => {
-      window.removeEventListener("popstate", d);
+    return window.addEventListener("popstate", u), () => {
+      window.removeEventListener("popstate", u);
     };
   }, []);
-  const w = R((d, u) => {
-    l(d), i(u), p({}), No(d, u);
-  }, []), N = R((d, u) => {
-    if (l((f) => f === d ? d : f), i((f) => f ?? u), typeof window < "u") {
-      const f = new URLSearchParams(window.location.search);
-      f.get("entry") === d && f.get("jogak") === null && (f.set("jogak", u), window.history.replaceState({}, "", `?${f.toString()}`));
+  const v = $((u, f) => {
+    c(u), p(f), y({}), So(u, f);
+  }, []), w = $((u, f) => {
+    if (c((m) => m === u ? u : m), p((m) => m ?? f), typeof window < "u") {
+      const m = new URLSearchParams(window.location.search);
+      m.get("entry") === u && m.get("jogak") === null && (m.set("jogak", f), window.history.replaceState({}, "", `?${m.toString()}`));
     }
-  }, []), h = R((d, u) => {
-    p((f) => ({ ...f, [d]: u }));
-  }, []), x = R(() => {
-    p({});
+  }, []), W = $((u, f) => {
+    y((m) => ({ ...m, [u]: f }));
+  }, []), A = $(() => {
+    y({});
   }, []);
-  return /* @__PURE__ */ e(Z, { registry: k, children: /* @__PURE__ */ j(
+  return /* @__PURE__ */ e(T, { registry: i, children: /* @__PURE__ */ j(
     "div",
     {
       "data-jogak-shell": !0,
       className: "jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",
       children: [
         /* @__PURE__ */ e(
-          ao,
+          ro,
           {
-            selectedEntryId: s,
-            selectedJogakName: g,
-            onSelect: w
+            selectedEntryId: k,
+            selectedJogakName: x,
+            onSelect: v
           }
         ),
-        /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: s !== null ? /* @__PURE__ */ e(
-          po,
+        /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: k !== null ? /* @__PURE__ */ e(
+          mo,
           {
-            entryId: s,
-            jogakName: g,
-            overrideArgs: c,
-            onArgChange: h,
-            onReset: x,
+            entryId: k,
+            jogakName: x,
+            overrideArgs: S,
+            onArgChange: W,
+            onReset: A,
             codeTheme: r,
-            onResolveJogak: N,
-            previewIsolation: t
+            onResolveJogak: w,
+            previewIsolation: t,
+            userPreviewUrl: l,
+            previewEntryPath: n
           }
         ) : /* @__PURE__ */ e("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 Lo() {
-  const o = K(), a = C(() => o.getAll(), [o]), r = C(() => o.getTree(), [o]), t = C(
-    () => (k) => o.search(k),
+function Mo() {
+  const o = oo(), a = R(() => o.getAll(), [o]), r = R(() => o.getTree(), [o]), t = R(
+    () => (g) => o.search(g),
     [o]
   );
   return { entries: a, tree: r, search: t };
 }
 export {
-  lo as Actions,
-  go as Controls,
-  $o as JogakApp,
-  po as Preview,
-  ao as Sidebar,
-  Lo as useRegistry
+  jo as Actions,
+  lo as Controls,
+  Lo as JogakApp,
+  mo as Preview,
+  ro as Sidebar,
+  Mo as useRegistry
 };