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

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 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) {
   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 s = o.length;
+    for (a = 0; a < s; a++) o[a] && (r = H(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 w() {
+  for (var o, a, r = 0, t = "", s = arguments.length; r < s; r++) (o = arguments[r]) && (a = H(o)) && (t && (t += " "), t += a);
   return t;
 }
-function ao({
+function eo({
   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, s] = m(""), { metaTree: n, searchMeta: g } = Y(), l = t.trim().length > 0 ? g(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: (k) => {
+              s(k.target.value);
             },
             className: "jogak:w-full jogak:px-2 jogak:py-1.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)]",
             "aria-label": "Search components"
           }
         ) }),
         /* @__PURE__ */ e("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: l !== null ? /* @__PURE__ */ e(
-          eo,
+          ro,
           {
             metas: l,
             selectedEntryId: o,
@@ -51,7 +51,7 @@ function ao({
             onSelect: r
           }
         ) : /* @__PURE__ */ e(
-          H,
+          q,
           {
             node: n,
             selectedEntryId: o,
@@ -63,107 +63,107 @@ function ao({
     }
   );
 }
-function eo({
+function ro({
   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((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+    G,
     {
-      meta: k,
+      meta: s,
       selectedEntryId: a,
       selectedJogakName: r,
       onSelect: t,
       indent: 0
     }
-  ) }, k.id)) });
+  ) }, s.id)) });
 }
-function H({
+function q({
   node: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  depth: k = 0
+  depth: s = 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` },
-      children: Object.entries(o).map(([n, s]) => /* @__PURE__ */ e("li", { children: "id" in s ? /* @__PURE__ */ e(
-        U,
+      style: { "--jogak-tree-pl": `${s * 12}px` },
+      children: Object.entries(o).map(([n, g]) => /* @__PURE__ */ e("li", { children: "id" in g ? /* @__PURE__ */ e(
+        G,
         {
-          meta: s,
+          meta: g,
           selectedEntryId: a,
           selectedJogakName: r,
           onSelect: t,
           indent: 0
         }
       ) : /* @__PURE__ */ e(
-        ro,
+        to,
         {
           label: n,
-          node: s,
+          node: g,
           selectedEntryId: a,
           selectedJogakName: r,
           onSelect: t,
-          depth: k + 1
+          depth: s + 1
         }
       ) }, n))
     }
   );
 }
-function ro({
+function to({
   label: o,
   node: a,
   selectedEntryId: r,
   selectedJogakName: t,
-  onSelect: k,
+  onSelect: s,
   depth: n
 }) {
-  const [s, l] = m(!0);
+  const [g, l] = m(!0);
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          l((g) => !g);
+          l((k) => !k);
         },
         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,
+        "aria-expanded": g,
         children: [
-          /* @__PURE__ */ e("span", { children: s ? "▾" : "▸" }),
+          /* @__PURE__ */ e("span", { children: g ? "▾" : "▸" }),
           o
         ]
       }
     ),
-    s && /* @__PURE__ */ e(
-      H,
+    g && /* @__PURE__ */ e(
+      q,
       {
         node: a,
         selectedEntryId: r,
         selectedJogakName: t,
-        onSelect: k,
+        onSelect: s,
         depth: n
       }
     )
   ] });
 }
-function U({
+function G({
   meta: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  indent: k
+  indent: s
 }) {
-  const n = o.id === a, [s, l] = m(n);
-  b(() => {
+  const n = o.id === a, [g, l] = m(n);
+  x(() => {
     n && l(!0);
   }, [n]);
-  const g = o.title.split("/").pop() ?? o.title, i = 16 + k * 12;
+  const k = o.title.split("/").pop() ?? o.title, c = 16 + s * 12;
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
@@ -171,57 +171,57 @@ function U({
         type: "button",
         onClick: () => {
           if (n)
-            l((c) => !c);
+            l((i) => !i);
           else {
             l(!0);
-            const c = o.jogakNames[0];
-            c !== void 0 && t(o.id, c);
+            const i = o.jogakNames[0];
+            i !== void 0 && t(o.id, i);
           }
         },
-        className: v(
+        className: w(
           "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` },
-        "aria-expanded": s,
+        style: { "--jogak-entry-pl": `${c}px` },
+        "aria-expanded": g,
         children: [
-          /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: s ? "▾" : "▸" }),
-          g
+          /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: g ? "▾" : "▸" }),
+          k
         ]
       }
     ),
-    s && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((c) => {
-      const p = n && c === r;
+    g && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
+      const p = n && i === r;
       return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: () => {
-            t(o.id, c);
+            t(o.id, i);
           },
-          className: v(
+          className: w(
             "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"
           ),
-          style: { "--jogak-jogak-pl": `${i + 18}px` },
+          style: { "--jogak-jogak-pl": `${c + 18}px` },
           "aria-current": p ? "true" : void 0,
-          children: c
+          children: i
         }
-      ) }, c);
+      ) }, i);
     }) })
   ] });
 }
-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 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";
 }
-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 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)) {
     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: E
         }
       );
     case "select": {
@@ -252,11 +252,11 @@ function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
         "select",
         {
           value: String(a ?? ""),
-          onChange: (s) => {
-            t(o, s.target.value);
+          onChange: (g) => {
+            t(o, g.target.value);
           },
-          className: $,
-          children: n.map((s) => /* @__PURE__ */ e("option", { value: String(s), children: String(s) }, String(s)))
+          className: E,
+          children: n.map((g) => /* @__PURE__ */ e("option", { value: String(g), children: String(g) }, String(g)))
         }
       );
     }
@@ -269,7 +269,7 @@ function no({ argKey: o, value: a, argType: r, onArgChange: t }) {
           onChange: (n) => {
             t(o, n.target.value);
           },
-          className: $
+          className: E
         }
       );
     case "action":
@@ -278,45 +278,45 @@ 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 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]]);
   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: [
+    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: [
       /* @__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("tbody", { children: k.map(([n, s]) => {
+      /* @__PURE__ */ e("tbody", { children: s.map(([n, g]) => {
         const l = a[n];
         return /* @__PURE__ */ j("tr", { children: [
           /* @__PURE__ */ e(
             "td",
             {
-              className: v(
-                E,
+              className: w(
+                M,
                 "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: M, children: /* @__PURE__ */ e(
+            go,
             {
               argKey: n,
-              value: s,
+              value: g,
               argType: l,
               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: w(M, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
         ] }, n);
       }) })
     ] })
   ] });
 }
-function so(o) {
+function lo(o) {
   if (o.length === 0) return "()";
   try {
     return o.map((a) => {
@@ -335,12 +335,12 @@ function so(o) {
   }
 }
 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}`;
+  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 lo() {
-  const [o, a] = m(() => A.getLogs());
-  b(() => A.subscribe(a), []);
+function io() {
+  const [o, a] = m(() => $.getLogs());
+  x(() => $.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();
+            $.clear();
           },
           disabled: r,
-          className: v(
+          className: w(
             "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"
           ),
@@ -373,7 +373,7 @@ function lo() {
           /* @__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),
+            lo(t.args),
             ")"
           ] })
         ]
@@ -388,62 +388,73 @@ function jo({
   style: r,
   "data-testid": t
 }) {
-  const k = _(null), [n, s] = m(null);
-  return b(() => {
-    const l = k.current;
+  const s = A(null), [n, g] = m(null);
+  return x(() => {
+    const l = s.current;
     if (l === null) return;
-    const g = l.shadowRoot ?? l.attachShadow({ mode: "open" });
-    s(g);
+    const k = l.shadowRoot ?? l.attachShadow({ mode: "open" });
+    g(k);
   }, []), /* @__PURE__ */ e(
     "div",
     {
-      ref: k,
+      ref: s,
       className: a,
       "data-testid": t,
       style: r,
-      children: n !== null ? oo(o, n) : null
+      children: n !== null ? ao(o, n) : null
     }
   );
 }
-function io({
+function co({
   entry: o,
   args: a,
-  className: r,
-  "data-testid": t
+  userViteUrl: r,
+  className: t,
+  "data-testid": s
 }) {
-  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 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);
+    };
+    return window.addEventListener("message", c), () => {
+      window.removeEventListener("message", c);
     };
-    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);
+  }, []), x(() => {
+    var i;
+    if (!g) return;
+    const c = n.current;
+    c !== null && ((i = c.contentWindow) == null || i.postMessage(
+      { type: "jogak:setProps", entryId: o.id, args: a },
+      "*"
+    ));
+  }, [g, o, a]), x(() => {
+    const c = n.current;
+    return () => {
+      c !== null && queueMicrotask(() => {
+        var i;
+        (i = c.contentWindow) == null || i.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: n,
+      src: k,
       title: "Preview",
-      className: r,
-      "data-testid": t
+      className: t,
+      "data-testid": s
     }
   );
 }
-const q = {
+const I = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, co = {
+}, uo = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
@@ -466,22 +477,23 @@ 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;
+}, 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;
 }
-function po({
+function fo({
   entryId: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: k,
+  onReset: s,
   codeTheme: n,
-  onResolveJogak: s,
-  previewIsolation: l = "shadow"
+  onResolveJogak: g,
+  previewIsolation: l = "iframe",
+  userViteUrl: k = ""
 }) {
-  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 c = Z(o), [i, p] = m("desktop"), [f, N] = m("white"), [C, h] = m("controls"), v = po(n);
+  return c.status === "unknown" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-not-found",
@@ -491,7 +503,7 @@ function po({
         o
       ]
     }
-  ) : g.status === "error" ? /* @__PURE__ */ j(
+  ) : c.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
@@ -501,48 +513,49 @@ 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: c.error.message })
       ]
     }
-  ) : g.status === "loading" ? /* @__PURE__ */ e(
-    fo,
+  ) : c.status === "loading" ? /* @__PURE__ */ e(
+    mo,
     {
-      meta: g.meta,
+      meta: c.meta,
       jogakName: a,
       viewport: i,
-      bgMode: p,
-      onViewportChange: c,
-      onBgModeChange: w
+      bgMode: f,
+      onViewportChange: p,
+      onBgModeChange: N
     }
   ) : /* @__PURE__ */ e(
-    mo,
+    bo,
     {
-      entry: g.entry,
+      entry: c.entry,
       jogakName: a,
       overrideArgs: r,
       onArgChange: t,
-      onReset: k,
-      onResolveJogak: s,
+      onReset: s,
+      onResolveJogak: g,
       viewport: i,
-      bgMode: p,
-      bottomTab: N,
-      onViewportChange: c,
-      onBgModeChange: w,
+      bgMode: f,
+      bottomTab: C,
+      onViewportChange: p,
+      onBgModeChange: N,
       onBottomTabChange: h,
-      prismTheme: x,
-      previewIsolation: l
+      prismTheme: v,
+      previewIsolation: l,
+      userViteUrl: k
     }
   );
 }
-function fo({
+function mo({
   meta: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: k,
+  onViewportChange: s,
   onBgModeChange: n
 }) {
-  const s = a ?? o.jogakNames[0] ?? "...", l = q[r];
+  const g = a ?? o.jogakNames[0] ?? "...", l = I[r];
   return /* @__PURE__ */ j(
     "div",
     {
@@ -550,13 +563,13 @@ function fo({
       className: "jogak:flex jogak:flex-col jogak:h-full",
       children: [
         /* @__PURE__ */ e(
-          G,
+          U,
           {
             title: o.title,
-            jogakName: s,
+            jogakName: g,
             viewport: r,
             bgMode: t,
-            onViewportChange: k,
+            onViewportChange: s,
             onBgModeChange: n,
             showReset: !1,
             onReset: () => {
@@ -566,7 +579,7 @@ function fo({
         /* @__PURE__ */ e(
           "div",
           {
-            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
+            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${J}`,
             style: P[t],
             children: /* @__PURE__ */ e(
               "div",
@@ -588,59 +601,60 @@ function fo({
     }
   );
 }
-function mo({
+function bo({
   entry: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: k,
+  onReset: s,
   onResolveJogak: n,
-  viewport: s,
+  viewport: g,
   bgMode: l,
-  bottomTab: g,
-  onViewportChange: i,
-  onBgModeChange: c,
+  bottomTab: k,
+  onViewportChange: c,
+  onBgModeChange: i,
   onBottomTabChange: p,
-  prismTheme: w,
-  previewIsolation: N
+  prismTheme: f,
+  previewIsolation: N,
+  userViteUrl: C
 }) {
   var V;
   const h = a ?? ((V = o.jogaks[0]) == null ? void 0 : V.name) ?? null;
-  if (b(() => {
+  if (x(() => {
     a === null && h !== null && n !== void 0 && n(o.id, h);
   }, [a, h, o.id, n]), h === 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 v = o.jogaks.find((y) => y.name === h);
+  if (v === void 0)
     return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Jogak not found: ",
       h
     ] });
-  const u = { ...x.args ?? {}, ...r }, f = {
+  const u = { ...v.args ?? {}, ...r }, b = {
     ...o.meta.argTypes ?? {},
-    ...x.argTypes ?? {}
-  }, I = Object.keys(r).length > 0, J = q[s];
+    ...v.argTypes ?? {}
+  }, Q = Object.keys(r).length > 0, B = I[g];
   return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
     /* @__PURE__ */ e(
-      G,
+      U,
       {
         title: o.title,
-        jogakName: x.name,
-        viewport: s,
+        jogakName: v.name,
+        viewport: g,
         bgMode: l,
-        onViewportChange: i,
-        onBgModeChange: c,
-        showReset: I,
-        onReset: k
+        onViewportChange: c,
+        onBgModeChange: i,
+        showReset: Q,
+        onReset: s
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
-        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
+        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${J}`,
         style: P[l],
         children: /* @__PURE__ */ e(
           "div",
@@ -648,18 +662,19 @@ function mo({
             "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": B === "none" ? "100%" : `${B}px`
             },
             children: /* @__PURE__ */ e(
-              bo,
+              xo,
               {
                 entry: o,
                 args: u,
                 source: o.source,
-                theme: w,
-                previewIsolation: N
+                theme: f,
+                previewIsolation: N,
+                userViteUrl: C
               },
-              `${o.id}/${x.name}`
+              `${o.id}/${v.name}`
             )
           }
         )
@@ -677,19 +692,19 @@ 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;
+                const W = k === y;
                 return /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     role: "tab",
-                    "aria-selected": B,
+                    "aria-selected": W,
                     onClick: () => {
                       p(y);
                     },
-                    className: v(
+                    className: w(
                       "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"
+                      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"
                     ),
                     children: y
                   },
@@ -698,27 +713,27 @@ function mo({
               })
             }
           ),
-          /* @__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: k === "controls" ? /* @__PURE__ */ e(
+            so,
             {
               args: u,
-              argTypes: f,
+              argTypes: b,
               onArgChange: t
             }
-          ) : /* @__PURE__ */ e(lo, {}) })
+          ) : /* @__PURE__ */ e(io, {}) })
         ]
       }
     )
   ] });
 }
-function G({
+function U({
   title: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: k,
+  onViewportChange: s,
   onBgModeChange: n,
-  showReset: s,
+  showReset: g,
   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: [
@@ -727,41 +742,41 @@ 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((k) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          k(g);
+          s(k);
         },
-        "aria-pressed": r === g,
-        className: v(
+        "aria-pressed": r === k,
+        className: w(
           "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 === k ? "jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"
         ),
-        children: co[g]
+        children: uo[k]
       },
-      g
+      k
     )) }),
-    /* @__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((k) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          n(g);
+          n(k);
         },
-        "aria-pressed": t === g,
-        "aria-label": `${g} background`,
-        className: v(
+        "aria-pressed": t === k,
+        "aria-label": `${k} background`,
+        className: w(
           "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)]"
+          J,
+          t === k ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
         ),
-        style: P[g]
+        style: P[k]
       },
-      g
+      k
     )) }),
-    s && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
@@ -772,14 +787,15 @@ 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 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: [
     /* @__PURE__ */ e(
       ho,
       {
         entry: o,
         args: a,
-        previewIsolation: k
+        previewIsolation: s,
+        userViteUrl: n
       }
     ),
     /* @__PURE__ */ e(
@@ -787,48 +803,49 @@ function bo({ entry: o, args: a, source: r, theme: t, previewIsolation: k }) {
       {
         type: "button",
         onClick: () => {
-          s((g) => !g);
+          l((c) => !c);
         },
-        "aria-pressed": n,
-        "aria-label": n ? "Hide source code" : "Show source code",
-        className: v(
+        "aria-pressed": g,
+        "aria-label": g ? "Hide source code" : "Show source code",
+        className: w(
           "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]"
+          g ? "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 }) })
+    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 }) })
   ] });
 }
 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 }) {
+function ho({ entry: o, args: a, previewIsolation: r, userViteUrl: t }) {
   return r === "shadow" ? /* @__PURE__ */ e(
     jo,
     {
       "data-testid": "preview-content",
       className: O,
-      children: /* @__PURE__ */ e(vo, { entry: o, args: a })
+      children: /* @__PURE__ */ e(wo, { entry: o, args: a })
     }
   ) : r === "iframe" ? /* @__PURE__ */ e(
-    io,
+    co,
     {
       entry: o,
       args: a,
+      userViteUrl: t,
       "data-testid": "preview-content",
       className: `${O} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
     }
-  ) : /* @__PURE__ */ e(xo, { entry: o, args: a });
+  ) : /* @__PURE__ */ e(vo, { entry: o, args: a });
 }
-function xo({ entry: o, args: a }) {
-  const r = _(null);
-  return b(() => {
+function vo({ entry: o, args: a }) {
+  const r = A(null);
+  return x(() => {
     const t = r.current;
     if (t !== null)
       return S.render(o, a, t), () => {
@@ -836,7 +853,7 @@ function xo({ entry: o, args: a }) {
           S.unmount(t);
         });
       };
-  }, [o]), b(() => {
+  }, [o]), x(() => {
     const t = r.current;
     t !== null && S.render(o, a, t);
   }, [o, a]), /* @__PURE__ */ e(
@@ -848,9 +865,9 @@ function xo({ entry: o, args: a }) {
     }
   );
 }
-function vo({ entry: o, args: a }) {
-  const r = _(null);
-  return b(() => {
+function wo({ entry: o, args: a }) {
+  const r = A(null);
+  return x(() => {
     const t = r.current;
     if (t !== null)
       return S.render(o, a, t), () => {
@@ -858,18 +875,18 @@ function vo({ entry: o, args: a }) {
           S.unmount(t);
         });
       };
-  }, [o]), b(() => {
+  }, [o]), x(() => {
     const t = r.current;
     t !== null && S.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 No({ source: o, theme: a }) {
+  const [r, t] = m(!1), s = 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": s },
       children: "Source not available"
     }
   ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
@@ -888,20 +905,20 @@ 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(oo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: g, tokens: l, getLineProps: k, getTokenProps: c }) => /* @__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(
+        style: g,
+        children: l.map((i, p) => /* @__PURE__ */ j(
           "div",
           {
-            ...g({ line: c }),
+            ...k({ line: i }),
             className: "jogak:flex jogak:pr-6",
-            style: g({ line: c }).style,
+            style: k({ line: i }).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", { children: i.map((f, N) => /* @__PURE__ */ e("span", { ...c({ token: f }) }, N)) })
             ]
           },
           p
@@ -910,86 +927,88 @@ function wo({ source: o, theme: a }) {
     ) })
   ] });
 }
-function D() {
+function F() {
   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 yo(o, a) {
   const r = new URLSearchParams();
   r.set("entry", o), r.set("jogak", a), window.history.pushState({}, "", `?${r.toString()}`);
 }
-function $o({
+function Eo({
   entries: o,
   metas: a,
   codeTheme: r = "vsDark",
-  previewIsolation: t = "shadow"
+  previewIsolation: t = "iframe",
+  userViteUrl: s = ""
 } = {}) {
-  const k = C(() => {
+  const n = 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();
+      const d = new X();
       for (const u of o) d.register(u);
       return d;
     }
     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(() => {
+      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 = D();
-      u !== null ? (l(u.entryId), i(u.jogakName), p({})) : (l(null), i(null));
+      const u = F();
+      u !== null ? (k(u.entryId), i(u.jogakName), f({})) : (k(null), i(null));
     };
     return window.addEventListener("popstate", d), () => {
       window.removeEventListener("popstate", d);
     };
   }, []);
-  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 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()}`));
     }
-  }, []), h = R((d, u) => {
-    p((f) => ({ ...f, [d]: u }));
-  }, []), x = R(() => {
-    p({});
+  }, []), h = _((d, u) => {
+    f((b) => ({ ...b, [d]: u }));
+  }, []), v = _(() => {
+    f({});
   }, []);
-  return /* @__PURE__ */ e(Z, { registry: k, children: /* @__PURE__ */ j(
+  return /* @__PURE__ */ e(K, { registry: n, 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,
+          eo,
           {
-            selectedEntryId: s,
-            selectedJogakName: g,
-            onSelect: w
+            selectedEntryId: l,
+            selectedJogakName: c,
+            onSelect: N
           }
         ),
-        /* @__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: l !== null ? /* @__PURE__ */ e(
+          fo,
           {
-            entryId: s,
-            jogakName: g,
-            overrideArgs: c,
+            entryId: l,
+            jogakName: c,
+            overrideArgs: p,
             onArgChange: h,
-            onReset: x,
+            onReset: v,
             codeTheme: r,
-            onResolveJogak: N,
-            previewIsolation: t
+            onResolveJogak: C,
+            previewIsolation: t,
+            userViteUrl: s
           }
         ) : /* @__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" }) })
       ]
@@ -997,17 +1016,17 @@ function $o({
   ) });
 }
 function Lo() {
-  const o = K(), a = C(() => o.getAll(), [o]), r = C(() => o.getTree(), [o]), t = C(
-    () => (k) => o.search(k),
+  const o = T(), a = R(() => o.getAll(), [o]), r = R(() => o.getTree(), [o]), t = R(
+    () => (s) => o.search(s),
     [o]
   );
   return { entries: a, tree: r, search: t };
 }
 export {
-  lo as Actions,
-  go as Controls,
-  $o as JogakApp,
-  po as Preview,
-  ao as Sidebar,
+  io as Actions,
+  so as Controls,
+  Eo as JogakApp,
+  fo as Preview,
+  eo as Sidebar,
   Lo as useRegistry
 };