@jogak/ui 0.1.0-alpha.8 → 0.1.0-alpha.9.1

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 x, useRef as A, useMemo as R, useCallback as _ } from "react";
-import { defaultActionChannel as $, ComponentRegistry as X, defaultRegistry as z } from "@jogak/core";
-import { useRegistryMeta as Y, useEntry as Z, reactAdapter as S, JogakProvider as K, useRegistry as T } from "@jogak/react";
-import { themes as D, Highlight as oo } from "prism-react-renderer";
-import { createPortal as ao } from "react-dom";
-function H(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 s = o.length;
-    for (a = 0; a < s; a++) o[a] && (r = H(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 w() {
-  for (var o, a, r = 0, t = "", s = arguments.length; r < s; r++) (o = arguments[r]) && (a = H(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 eo({
+function ro({
   selectedEntryId: o,
   selectedJogakName: a,
   onSelect: r
 }) {
-  const [t, s] = m(""), { metaTree: n, searchMeta: g } = Y(), l = t.trim().length > 0 ? g(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 eo({
             type: "search",
             placeholder: "Search components...",
             value: t,
-            onChange: (k) => {
-              s(k.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(
-          ro,
+          to,
           {
             metas: l,
             selectedEntryId: o,
@@ -51,7 +51,7 @@ function eo({
             onSelect: r
           }
         ) : /* @__PURE__ */ e(
-          q,
+          G,
           {
             node: n,
             selectedEntryId: o,
@@ -63,107 +63,107 @@ function eo({
     }
   );
 }
-function ro({
+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((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-    G,
+  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: s,
+      meta: g,
       selectedEntryId: a,
       selectedJogakName: r,
       onSelect: t,
       indent: 0
     }
-  ) }, s.id)) });
+  ) }, g.id)) });
 }
-function q({
+function G({
   node: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  depth: s = 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": `${s * 12}px` },
-      children: Object.entries(o).map(([n, g]) => /* @__PURE__ */ e("li", { children: "id" in g ? /* @__PURE__ */ e(
-        G,
+      style: { "--jogak-tree-pl": `${g * 12}px` },
+      children: Object.entries(o).map(([n, s]) => /* @__PURE__ */ e("li", { children: "id" in s ? /* @__PURE__ */ e(
+        I,
         {
-          meta: g,
+          meta: s,
           selectedEntryId: a,
           selectedJogakName: r,
           onSelect: t,
           indent: 0
         }
       ) : /* @__PURE__ */ e(
-        to,
+        no,
         {
           label: n,
-          node: g,
+          node: s,
           selectedEntryId: a,
           selectedJogakName: r,
           onSelect: t,
-          depth: s + 1
+          depth: g + 1
         }
       ) }, n))
     }
   );
 }
-function to({
+function no({
   label: o,
   node: a,
   selectedEntryId: r,
   selectedJogakName: t,
-  onSelect: s,
+  onSelect: g,
   depth: n
 }) {
-  const [g, l] = m(!0);
+  const [s, l] = b(!0);
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          l((k) => !k);
+          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": g,
+        "aria-expanded": s,
         children: [
-          /* @__PURE__ */ e("span", { children: g ? "▾" : "▸" }),
+          /* @__PURE__ */ e("span", { children: s ? "▾" : "▸" }),
           o
         ]
       }
     ),
-    g && /* @__PURE__ */ e(
-      q,
+    s && /* @__PURE__ */ e(
+      G,
       {
         node: a,
         selectedEntryId: r,
         selectedJogakName: t,
-        onSelect: s,
+        onSelect: g,
         depth: n
       }
     )
   ] });
 }
-function G({
+function I({
   meta: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  indent: s
+  indent: g
 }) {
-  const n = o.id === a, [g, l] = m(n);
-  x(() => {
+  const n = o.id === a, [s, l] = b(n);
+  h(() => {
     n && l(!0);
   }, [n]);
-  const k = o.title.split("/").pop() ?? o.title, c = 16 + s * 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 G({
         type: "button",
         onClick: () => {
           if (n)
-            l((i) => !i);
+            l((k) => !k);
           else {
             l(!0);
-            const i = o.jogakNames[0];
-            i !== void 0 && t(o.id, i);
+            const k = o.jogakNames[0];
+            k !== void 0 && t(o.id, k);
           }
         },
-        className: w(
+        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": `${c}px` },
-        "aria-expanded": g,
+        style: { "--jogak-entry-pl": `${d}px` },
+        "aria-expanded": s,
         children: [
-          /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: g ? "▾" : "▸" }),
-          k
+          /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: s ? "▾" : "▸" }),
+          i
         ]
       }
     ),
-    g && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
-      const p = n && i === 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, i);
+            t(o.id, k);
           },
-          className: w(
+          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": `${c + 18}px` },
-          "aria-current": p ? "true" : void 0,
-          children: i
+          style: { "--jogak-jogak-pl": `${d + 18}px` },
+          "aria-current": c ? "true" : void 0,
+          children: k
         }
-      ) }, i);
+      ) }, k);
     }) })
   ] });
 }
-function no(o, a) {
-  const r = a == null ? void 0 : a.control, t = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, s = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
-  return t || s ? "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 E = "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)]", M = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
-function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
-  switch (no(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 go({ argKey: o, value: a, argType: r, onArgChange: t }) {
           onChange: (n) => {
             t(o, n.target.valueAsNumber);
           },
-          className: E
+          className: M
         }
       );
     case "select": {
@@ -252,11 +252,11 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
         "select",
         {
           value: String(a ?? ""),
-          onChange: (g) => {
-            t(o, g.target.value);
+          onChange: (s) => {
+            t(o, s.target.value);
           },
-          className: E,
-          children: n.map((g) => /* @__PURE__ */ e("option", { value: String(g), children: String(g) }, String(g)))
+          className: M,
+          children: n.map((s) => /* @__PURE__ */ e("option", { value: String(s), children: String(s) }, String(s)))
         }
       );
     }
@@ -269,7 +269,7 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
           onChange: (n) => {
             t(o, n.target.value);
           },
-          className: E
+          className: M
         }
       );
     case "action":
@@ -278,45 +278,45 @@ function go({ 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 so({ args: o, argTypes: a, onArgChange: r }) {
-  const s = 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" }),
-    s.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: s.map(([n, g]) => {
+      /* @__PURE__ */ e("tbody", { children: g.map(([n, s]) => {
         const l = a[n];
         return /* @__PURE__ */ j("tr", { children: [
           /* @__PURE__ */ e(
             "td",
             {
-              className: w(
-                M,
+              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: M, children: /* @__PURE__ */ e(
-            go,
+          /* @__PURE__ */ e("td", { className: P, children: /* @__PURE__ */ e(
+            so,
             {
               argKey: n,
-              value: g,
+              value: s,
               argType: l,
               onArgChange: r
             }
           ) }),
-          /* @__PURE__ */ e("td", { className: w(M, "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 lo(o) {
+function ko(o) {
   if (o.length === 0) return "()";
   try {
     return o.map((a) => {
@@ -334,13 +334,13 @@ function lo(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"), s = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
-  return `${r}:${t}:${s}.${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 io() {
-  const [o, a] = m(() => $.getLogs());
-  x(() => $.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 io() {
         {
           type: "button",
           onClick: () => {
-            $.clear();
+            L.clear();
           },
           disabled: r,
-          className: w(
+          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 io() {
       {
         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: [
             "(",
-            lo(t.args),
+            ko(t.args),
             ")"
           ] })
         ]
@@ -382,83 +382,84 @@ function io() {
     )) }) })
   ] });
 }
-function jo({
+function co({
   children: o,
   className: a,
   style: r,
   "data-testid": t
 }) {
-  const s = A(null), [n, g] = m(null);
-  return x(() => {
-    const l = s.current;
+  const g = E(null), [n, s] = b(null);
+  return h(() => {
+    const l = g.current;
     if (l === null) return;
-    const k = l.shadowRoot ?? l.attachShadow({ mode: "open" });
-    g(k);
+    const i = l.shadowRoot ?? l.attachShadow({ mode: "open" });
+    s(i);
   }, []), /* @__PURE__ */ e(
     "div",
     {
-      ref: s,
+      ref: g,
       className: a,
       "data-testid": t,
       style: r,
-      children: n !== null ? ao(o, n) : null
+      children: n !== null ? eo(o, n) : null
     }
   );
 }
-function co({
+function uo({
   entry: o,
   args: a,
-  userViteUrl: r,
-  className: t,
-  "data-testid": s
+  userPreviewUrl: r,
+  previewEntryPath: t,
+  className: g,
+  "data-testid": n
 }) {
-  const n = A(null), [g, l] = m(!1), k = r !== "" ? `${r}/__jogak_preview__/index.html` : "/preview-frame.html";
-  return x(() => {
-    const c = (i) => {
-      const p = n.current;
-      if (p === null || i.source !== p.contentWindow) return;
-      const f = i.data;
-      f == null || typeof f != "object" || f.type === "jogak:ready" && l(!0);
+  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 window.addEventListener("message", c), () => {
-      window.removeEventListener("message", c);
+    return window.addEventListener("message", k), () => {
+      window.removeEventListener("message", k);
     };
-  }, []), x(() => {
-    var i;
-    if (!g) return;
-    const c = n.current;
-    c !== null && ((i = c.contentWindow) == null || i.postMessage(
+  }, []), 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 },
       "*"
     ));
-  }, [g, o, a]), x(() => {
-    const c = n.current;
+  }, [l, o, a]), h(() => {
+    const k = s.current;
     return () => {
-      c !== null && queueMicrotask(() => {
-        var i;
-        (i = c.contentWindow) == null || i.postMessage({ type: "jogak:unmount" }, "*");
+      k !== null && queueMicrotask(() => {
+        var c;
+        (c = k.contentWindow) == null || c.postMessage({ type: "jogak:unmount" }, "*");
       });
     };
   }, []), /* @__PURE__ */ e(
     "iframe",
     {
-      ref: n,
-      src: k,
+      ref: s,
+      src: d,
       title: "Preview",
-      className: t,
-      "data-testid": s
+      className: g,
+      "data-testid": n
     }
   );
 }
-const I = {
+const Q = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, uo = {
+}, po = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
-}, P = {
+}, V = {
   white: {
     "--jogak-canvas-bg": "#ffffff",
     "--jogak-canvas-bg-image": "none",
@@ -477,23 +478,24 @@ const I = {
     "--jogak-canvas-bg-size": "16px 16px",
     "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
   }
-}, J = "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 po(o) {
-  return D[o] ?? D.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 fo({
+function mo({
   entryId: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: s,
+  onReset: g,
   codeTheme: n,
-  onResolveJogak: g,
+  onResolveJogak: s,
   previewIsolation: l = "iframe",
-  userViteUrl: k = ""
+  userPreviewUrl: i = "",
+  previewEntryPath: d = "/__jogak_preview__/index.html"
 }) {
-  const c = Z(o), [i, p] = m("desktop"), [f, N] = m("white"), [C, h] = m("controls"), v = po(n);
-  return c.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",
@@ -503,7 +505,7 @@ function fo({
         o
       ]
     }
-  ) : c.status === "error" ? /* @__PURE__ */ j(
+  ) : k.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
@@ -513,49 +515,50 @@ function fo({
           "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: c.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 })
       ]
     }
-  ) : c.status === "loading" ? /* @__PURE__ */ e(
-    mo,
+  ) : k.status === "loading" ? /* @__PURE__ */ e(
+    bo,
     {
-      meta: c.meta,
+      meta: k.meta,
       jogakName: a,
-      viewport: i,
-      bgMode: f,
-      onViewportChange: p,
-      onBgModeChange: N
+      viewport: c,
+      bgMode: p,
+      onViewportChange: x,
+      onBgModeChange: S
     }
   ) : /* @__PURE__ */ e(
-    bo,
+    xo,
     {
-      entry: c.entry,
+      entry: k.entry,
       jogakName: a,
       overrideArgs: r,
       onArgChange: t,
-      onReset: s,
-      onResolveJogak: g,
-      viewport: i,
-      bgMode: f,
-      bottomTab: C,
-      onViewportChange: p,
-      onBgModeChange: N,
-      onBottomTabChange: h,
-      prismTheme: v,
+      onReset: g,
+      onResolveJogak: s,
+      viewport: c,
+      bgMode: p,
+      bottomTab: y,
+      onViewportChange: x,
+      onBgModeChange: S,
+      onBottomTabChange: v,
+      prismTheme: w,
       previewIsolation: l,
-      userViteUrl: k
+      userPreviewUrl: i,
+      previewEntryPath: d
     }
   );
 }
-function mo({
+function bo({
   meta: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: s,
+  onViewportChange: g,
   onBgModeChange: n
 }) {
-  const g = a ?? o.jogakNames[0] ?? "...", l = I[r];
+  const s = a ?? o.jogakNames[0] ?? "...", l = Q[r];
   return /* @__PURE__ */ j(
     "div",
     {
@@ -563,13 +566,13 @@ function mo({
       className: "jogak:flex jogak:flex-col jogak:h-full",
       children: [
         /* @__PURE__ */ e(
-          U,
+          X,
           {
             title: o.title,
-            jogakName: g,
+            jogakName: s,
             viewport: r,
             bgMode: t,
-            onViewportChange: s,
+            onViewportChange: g,
             onBgModeChange: n,
             showReset: !1,
             onReset: () => {
@@ -579,8 +582,8 @@ function mo({
         /* @__PURE__ */ e(
           "div",
           {
-            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${J}`,
-            style: P[t],
+            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
+            style: V[t],
             children: /* @__PURE__ */ e(
               "div",
               {
@@ -601,80 +604,82 @@ function mo({
     }
   );
 }
-function bo({
+function xo({
   entry: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: s,
+  onReset: g,
   onResolveJogak: n,
-  viewport: g,
+  viewport: s,
   bgMode: l,
-  bottomTab: k,
-  onViewportChange: c,
-  onBgModeChange: i,
-  onBottomTabChange: p,
-  prismTheme: f,
-  previewIsolation: N,
-  userViteUrl: C
+  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 (x(() => {
-    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 v = o.jogaks.find((y) => y.name === h);
-  if (v === 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 = { ...v.args ?? {}, ...r }, b = {
+  const A = { ...w.args ?? {}, ...r }, u = {
     ...o.meta.argTypes ?? {},
-    ...v.argTypes ?? {}
-  }, Q = Object.keys(r).length > 0, B = I[g];
+    ...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(
-      U,
+      X,
       {
         title: o.title,
-        jogakName: v.name,
-        viewport: g,
+        jogakName: w.name,
+        viewport: s,
         bgMode: l,
-        onViewportChange: c,
-        onBgModeChange: i,
-        showReset: Q,
-        onReset: s
+        onViewportChange: d,
+        onBgModeChange: k,
+        showReset: f,
+        onReset: g
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
-        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${J}`,
-        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": B === "none" ? "100%" : `${B}px`
+              "--jogak-canvas-mw": m === "none" ? "100%" : `${m}px`
             },
             children: /* @__PURE__ */ e(
-              xo,
+              ho,
               {
                 entry: o,
-                args: u,
+                args: A,
                 source: o.source,
-                theme: f,
-                previewIsolation: N,
-                userViteUrl: C
+                theme: x,
+                previewIsolation: p,
+                userPreviewUrl: S,
+                previewEntryPath: y
               },
-              `${o.id}/${v.name}`
+              `${o.id}/${w.name}`
             )
           }
         )
@@ -691,49 +696,49 @@ function bo({
             {
               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 W = k === y;
+              children: ["controls", "actions"].map((C) => {
+                const D = i === C;
                 return /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     role: "tab",
-                    "aria-selected": W,
+                    "aria-selected": D,
                     onClick: () => {
-                      p(y);
+                      c(C);
                     },
-                    className: w(
+                    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",
-                      W ? "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: k === "controls" ? /* @__PURE__ */ e(
-            so,
+          /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: i === "controls" ? /* @__PURE__ */ e(
+            lo,
             {
-              args: u,
-              argTypes: b,
+              args: A,
+              argTypes: u,
               onArgChange: t
             }
-          ) : /* @__PURE__ */ e(io, {}) })
+          ) : /* @__PURE__ */ e(jo, {}) })
         ]
       }
     )
   ] });
 }
-function U({
+function X({
   title: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: s,
+  onViewportChange: g,
   onBgModeChange: n,
-  showReset: g,
+  showReset: s,
   onReset: l
 }) {
   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: [
@@ -742,41 +747,41 @@ function U({
       /* @__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((k) => /* @__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: () => {
-          s(k);
+          g(i);
         },
-        "aria-pressed": r === k,
-        className: w(
+        "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 === 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"
+          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: uo[k]
+        children: po[i]
       },
-      k
+      i
     )) }),
-    /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((k) => /* @__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(k);
+          n(i);
         },
-        "aria-pressed": t === k,
-        "aria-label": `${k} background`,
-        className: w(
+        "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",
-          J,
-          t === k ? "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[k]
+        style: V[i]
       },
-      k
+      i
     )) }),
-    g && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
@@ -787,15 +792,16 @@ function U({
     )
   ] });
 }
-function xo({ entry: o, args: a, source: r, theme: t, previewIsolation: s, userViteUrl: n }) {
-  const [g, l] = m(!1), k = /* @__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: s,
-        userViteUrl: n
+        previewIsolation: g,
+        userPreviewUrl: n,
+        previewEntryPath: s
       }
     ),
     /* @__PURE__ */ e(
@@ -803,90 +809,91 @@ function xo({ entry: o, args: a, source: r, theme: t, previewIsolation: s, userV
       {
         type: "button",
         onClick: () => {
-          l((c) => !c);
+          i((k) => !k);
         },
-        "aria-pressed": g,
-        "aria-label": g ? "Hide source code" : "Show source code",
-        className: w(
+        "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",
-          g ? "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: [
-    k,
-    g && /* @__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(No, { 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, userViteUrl: t }) {
+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(wo, { entry: o, args: a })
+      className: J,
+      children: /* @__PURE__ */ e(No, { entry: o, args: a })
     }
   ) : r === "iframe" ? /* @__PURE__ */ e(
-    co,
+    uo,
     {
       entry: o,
       args: a,
-      userViteUrl: t,
+      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(vo, { entry: o, args: a });
+  ) : /* @__PURE__ */ e(wo, { entry: o, args: a });
 }
-function vo({ entry: o, args: a }) {
-  const r = A(null);
-  return x(() => {
+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]), x(() => {
+  }, [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 wo({ entry: o, args: a }) {
-  const r = A(null);
-  return x(() => {
+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]), x(() => {
+  }, [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 No({ source: o, theme: a }) {
-  const [r, t] = m(!1), s = 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": s },
+      style: { "--jogak-source-bg": g },
       children: "Source not available"
     }
   ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
@@ -905,128 +912,131 @@ function No({ source: o, theme: a }) {
         children: r ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ e(oo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: g, tokens: l, getLineProps: k, getTokenProps: c }) => /* @__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: g,
-        children: l.map((i, p) => /* @__PURE__ */ j(
+        style: s,
+        children: l.map((k, c) => /* @__PURE__ */ j(
           "div",
           {
-            ...k({ line: i }),
+            ...i({ line: k }),
             className: "jogak:flex jogak:pr-6",
-            style: k({ line: i }).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: i.map((f, N) => /* @__PURE__ */ e("span", { ...c({ token: f }) }, 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 F() {
+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 yo(o, a) {
+function So(o, a) {
   const r = new URLSearchParams();
   r.set("entry", o), r.set("jogak", a), window.history.pushState({}, "", `?${r.toString()}`);
 }
-function Eo({
+function Lo({
   entries: o,
   metas: a,
   codeTheme: r = "vsDark",
   previewIsolation: t = "iframe",
-  userViteUrl: s = ""
+  userPreviewUrl: g = "",
+  previewEntryPath: n = "/__jogak_preview__/index.html",
+  userViteUrl: s
 } = {}) {
-  const n = R(() => {
+  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 X();
-      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) z.registerMeta(d);
-    return z;
-  }, [o, a]), g = R(() => F(), []), [l, k] = m(
-    (g == null ? void 0 : g.entryId) ?? null
-  ), [c, i] = m(
-    (g == null ? void 0 : g.jogakName) ?? null
-  ), [p, f] = m({});
-  x(() => {
-    const d = () => {
-      const u = F();
-      u !== null ? (k(u.entryId), i(u.jogakName), f({})) : (k(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 N = _((d, u) => {
-    k(d), i(u), f({}), yo(d, u);
-  }, []), C = _((d, u) => {
-    if (k((b) => b === d ? d : b), i((b) => b ?? u), typeof window < "u") {
-      const b = new URLSearchParams(window.location.search);
-      b.get("entry") === d && b.get("jogak") === null && (b.set("jogak", u), window.history.replaceState({}, "", `?${b.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 = _((d, u) => {
-    f((b) => ({ ...b, [d]: u }));
-  }, []), v = _(() => {
-    f({});
+  }, []), W = $((u, f) => {
+    y((m) => ({ ...m, [u]: f }));
+  }, []), A = $(() => {
+    y({});
   }, []);
-  return /* @__PURE__ */ e(K, { registry: n, 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(
-          eo,
+          ro,
           {
-            selectedEntryId: l,
-            selectedJogakName: c,
-            onSelect: N
+            selectedEntryId: k,
+            selectedJogakName: x,
+            onSelect: v
           }
         ),
-        /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: l !== null ? /* @__PURE__ */ e(
-          fo,
+        /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: k !== null ? /* @__PURE__ */ e(
+          mo,
           {
-            entryId: l,
-            jogakName: c,
-            overrideArgs: p,
-            onArgChange: h,
-            onReset: v,
+            entryId: k,
+            jogakName: x,
+            overrideArgs: S,
+            onArgChange: W,
+            onReset: A,
             codeTheme: r,
-            onResolveJogak: C,
+            onResolveJogak: w,
             previewIsolation: t,
-            userViteUrl: s
+            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 = T(), a = R(() => o.getAll(), [o]), r = R(() => o.getTree(), [o]), t = R(
-    () => (s) => o.search(s),
+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 {
-  io as Actions,
-  so as Controls,
-  Eo as JogakApp,
-  fo as Preview,
-  eo as Sidebar,
-  Lo as useRegistry
+  jo as Actions,
+  lo as Controls,
+  Lo as JogakApp,
+  mo as Preview,
+  ro as Sidebar,
+  Mo as useRegistry
 };