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

package/dist/index.mjs

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