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

package/dist/index.mjs

@@ -1,29 +1,29 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+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 X, defaultRegistry as W } 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 z, Highlight as oo } from "prism-react-renderer";
-import { createPortal as ao } from "react-dom";
+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 l = o.length;
-    for (a = 0; a < l; a++) o[a] && (r = F(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 v() {
-  for (var o, a, r = 0, t = "", l = arguments.length; r < l; r++) (o = arguments[r]) && (a = F(o)) && (t && (t += " "), t += a);
+  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 eo({
+function ao({
   selectedEntryId: o,
   selectedJogakName: a,
   onSelect: r
 }) {
-  const [t, l] = m(""), { metaTree: n, searchMeta: s } = Y(), k = t.trim().length > 0 ? s(t) : null;
-  return /* @__PURE__ */ c(
+  const [t, k] = m(""), { metaTree: n, searchMeta: s } = X(), l = t.trim().length > 0 ? s(t) : null;
+  return /* @__PURE__ */ j(
     "aside",
     {
       "data-testid": "sidebar",
@@ -36,16 +36,16 @@ function eo({
             placeholder: "Search components...",
             value: t,
             onChange: (g) => {
-              l(g.target.value);
+              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: k !== null ? /* @__PURE__ */ e(
-          ro,
+        /* @__PURE__ */ e("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: l !== null ? /* @__PURE__ */ e(
+          eo,
           {
-            metas: k,
+            metas: l,
             selectedEntryId: o,
             selectedJogakName: a,
             onSelect: r
@@ -63,35 +63,35 @@ function eo({
     }
   );
 }
-function ro({
+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((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+  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: l,
+      meta: k,
       selectedEntryId: a,
       selectedJogakName: r,
       onSelect: t,
       indent: 0
     }
-  ) }, l.id)) });
+  ) }, k.id)) });
 }
 function H({
   node: o,
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  depth: l = 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": `${l * 12}px` },
+      style: { "--jogak-tree-pl": `${k * 12}px` },
       children: Object.entries(o).map(([n, s]) => /* @__PURE__ */ e("li", { children: "id" in s ? /* @__PURE__ */ e(
         U,
         {
@@ -102,35 +102,35 @@ function H({
           indent: 0
         }
       ) : /* @__PURE__ */ e(
-        to,
+        ro,
         {
           label: n,
           node: s,
           selectedEntryId: a,
           selectedJogakName: r,
           onSelect: t,
-          depth: l + 1
+          depth: k + 1
         }
       ) }, n))
     }
   );
 }
-function to({
+function ro({
   label: o,
   node: a,
   selectedEntryId: r,
   selectedJogakName: t,
-  onSelect: l,
+  onSelect: k,
   depth: n
 }) {
-  const [s, k] = m(!0);
-  return /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ c(
+  const [s, l] = m(!0);
+  return /* @__PURE__ */ j("div", { children: [
+    /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          k((g) => !g);
+          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": s,
@@ -146,7 +146,7 @@ function to({
         node: a,
         selectedEntryId: r,
         selectedJogakName: t,
-        onSelect: l,
+        onSelect: k,
         depth: n
       }
     )
@@ -157,25 +157,25 @@ function U({
   selectedEntryId: a,
   selectedJogakName: r,
   onSelect: t,
-  indent: l
+  indent: k
 }) {
-  const n = o.id === a, [s, k] = m(n);
+  const n = o.id === a, [s, l] = m(n);
   b(() => {
-    n && k(!0);
+    n && l(!0);
   }, [n]);
-  const g = o.title.split("/").pop() ?? o.title, j = 16 + l * 12;
-  return /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ c(
+  const g = o.title.split("/").pop() ?? o.title, i = 16 + k * 12;
+  return /* @__PURE__ */ j("div", { children: [
+    /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
           if (n)
-            k((i) => !i);
+            l((c) => !c);
           else {
-            k(!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: v(
@@ -184,7 +184,7 @@ function U({
           "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": `${j}px` },
+        style: { "--jogak-entry-pl": `${i}px` },
         "aria-expanded": s,
         children: [
           /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: s ? "▾" : "▸" }),
@@ -192,14 +192,14 @@ function U({
         ]
       }
     ),
-    s && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
-      const p = n && i === r;
+    s && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((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: v(
             "jogak:block jogak:w-full jogak:text-left jogak:pr-3 jogak:py-1",
@@ -207,21 +207,21 @@ function U({
             "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": `${j + 18}px` },
+          style: { "--jogak-jogak-pl": `${i + 18}px` },
           "aria-current": p ? "true" : void 0,
-          children: i
+          children: c
         }
-      ) }, i);
+      ) }, c);
     }) })
   ] });
 }
-function no(o, a) {
-  const r = a == null ? void 0 : a.control, t = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, l = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
-  return t || l ? "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 $ = "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)]", O = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
-function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
-  switch (no(a, r)) {
+const $ = "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",
@@ -278,45 +278,45 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
       return /* @__PURE__ */ e("code", { className: "jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]", children: JSON.stringify(a) });
   }
 }
-function so({ args: o, argTypes: a, onArgChange: r }) {
-  const l = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
-  return /* @__PURE__ */ c("div", { className: "jogak:border-t-2 jogak:border-[var(--jogak-color-border)]", children: [
+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" }),
-    l.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__ */ c("table", { className: "jogak:w-full jogak:border-collapse jogak:text-[13px]", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ c("tr", { 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: L, children: "Name" }),
         /* @__PURE__ */ e("th", { className: L, children: "Control" }),
         /* @__PURE__ */ e("th", { className: L, children: "Description" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: l.map(([n, s]) => {
-        const k = a[n];
-        return /* @__PURE__ */ c("tr", { children: [
+      /* @__PURE__ */ e("tbody", { children: k.map(([n, s]) => {
+        const l = a[n];
+        return /* @__PURE__ */ j("tr", { children: [
           /* @__PURE__ */ e(
             "td",
             {
               className: v(
-                O,
+                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: O, children: /* @__PURE__ */ e(
-            go,
+          /* @__PURE__ */ e("td", { className: E, children: /* @__PURE__ */ e(
+            no,
             {
               argKey: n,
               value: s,
-              argType: k,
+              argType: l,
               onArgChange: r
             }
           ) }),
-          /* @__PURE__ */ e("td", { className: v(O, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (k == null ? void 0 : k.description) ?? "" })
+          /* @__PURE__ */ e("td", { className: v(E, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
         ] }, n);
       }) })
     ] })
   ] });
 }
-function lo(o) {
+function so(o) {
   if (o.length === 0) return "()";
   try {
     return o.map((a) => {
@@ -335,16 +335,16 @@ function lo(o) {
   }
 }
 function ko(o) {
-  const a = new Date(o), r = a.getHours().toString().padStart(2, "0"), t = a.getMinutes().toString().padStart(2, "0"), l = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
-  return `${r}:${t}:${l}.${n}`;
+  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 co() {
+function lo() {
   const [o, a] = m(() => A.getLogs());
   b(() => A.subscribe(a), []);
   const r = o.length === 0;
-  return /* @__PURE__ */ c("div", { className: "jogak:h-full jogak:flex jogak:flex-col", children: [
-    /* @__PURE__ */ c("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)] jogak:flex jogak:items-center jogak:justify-between jogak:shrink-0", children: [
-      /* @__PURE__ */ c("span", { children: [
+  return /* @__PURE__ */ j("div", { className: "jogak:h-full jogak:flex jogak:flex-col", children: [
+    /* @__PURE__ */ j("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)] jogak:flex jogak:items-center jogak:justify-between jogak:shrink-0", children: [
+      /* @__PURE__ */ j("span", { children: [
         "Actions ",
         o.length > 0 && `(${o.length.toString()})`
       ] }),
@@ -364,16 +364,16 @@ function co() {
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:overflow-auto", children: r ? /* @__PURE__ */ e("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none", children: "함수 prop이 호출되면 여기에 기록됩니다" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]", children: o.map((t) => /* @__PURE__ */ c(
+    /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:overflow-auto", children: r ? /* @__PURE__ */ e("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none", children: "함수 prop이 호출되면 여기에 기록됩니다" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]", children: o.map((t) => /* @__PURE__ */ j(
       "li",
       {
         className: "jogak:flex jogak:items-baseline jogak:gap-[10px] jogak:px-5 jogak:py-1.5 jogak:border-b jogak:border-[var(--jogak-color-border-muted)]",
         children: [
           /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: ko(t.timestamp) }),
           /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: t.name }),
-          /* @__PURE__ */ c("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
+          /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
             "(",
-            lo(t.args),
+            so(t.args),
             ")"
           ] })
         ]
@@ -388,69 +388,50 @@ function jo({
   style: r,
   "data-testid": t
 }) {
-  const l = _(null), [n, s] = m(null);
+  const k = _(null), [n, s] = m(null);
   return b(() => {
-    const k = l.current;
-    if (k === null) return;
-    let g;
-    k.shadowRoot !== null ? g = k.shadowRoot : g = k.attachShadow({ mode: "open" }), s(g), G(g);
-    const j = io(g);
-    return () => {
-      j.disconnect();
-    };
+    const l = k.current;
+    if (l === null) return;
+    const g = l.shadowRoot ?? l.attachShadow({ mode: "open" });
+    s(g);
   }, []), /* @__PURE__ */ e(
     "div",
     {
-      ref: l,
+      ref: k,
       className: a,
       "data-testid": t,
       style: r,
-      children: n !== null ? ao(o, n) : null
+      children: n !== null ? oo(o, n) : null
     }
   );
 }
-function G(o) {
-  const a = [];
-  for (const r of Array.from(document.styleSheets))
-    try {
-      const t = r.cssRules, l = new CSSStyleSheet(), n = Array.from(t).map((s) => s.cssText).join(`
-`);
-      l.replaceSync(n), a.push(l);
-    } catch {
-    }
-  o.adoptedStyleSheets = a;
-}
-function io(o) {
-  const a = new MutationObserver(() => {
-    G(o);
-  });
-  return a.observe(document.head, { childList: !0, subtree: !0 }), a;
-}
-function uo({
+function io({
   entry: o,
   args: a,
   className: r,
   "data-testid": t
 }) {
-  const l = _(null), n = _(!1);
+  const k = _(null), n = _(!1);
   return b(() => {
-    const s = l.current;
+    const s = k.current;
     if (s === null) return;
-    const k = () => {
-      var g, j;
-      n.current = !0, (j = (g = s.contentWindow) == null ? void 0 : g.__jogak_setProps__) == null || j.call(g, { entry: o, args: a });
+    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", k), () => {
-      var g, j;
-      s.removeEventListener("load", k), (j = (g = s.contentWindow) == null ? void 0 : g.__jogak_unmount__) == null || j.call(g);
+    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, k, g;
-    n.current && ((g = (k = (s = l.current) == null ? void 0 : s.contentWindow) == null ? void 0 : k.__jogak_setProps__) == null || g.call(k, { entry: o, args: a }));
+    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: l,
+      ref: k,
       src: "/preview-frame.html",
       title: "Preview",
       className: r,
@@ -458,11 +439,11 @@ function uo({
     }
   );
 }
-const I = {
+const q = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, po = {
+}, co = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
@@ -486,21 +467,21 @@ const I = {
     "--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 fo(o) {
+function uo(o) {
   return z[o] ?? z.vsDark;
 }
-function mo({
+function po({
   entryId: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: l,
+  onReset: k,
   codeTheme: n,
   onResolveJogak: s,
-  previewIsolation: k = "none"
+  previewIsolation: l = "shadow"
 }) {
-  const g = Z(o), [j, i] = m("desktop"), [p, w] = m("white"), [N, h] = m("controls"), x = fo(n);
-  return g.status === "unknown" ? /* @__PURE__ */ c(
+  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",
@@ -510,13 +491,13 @@ function mo({
         o
       ]
     }
-  ) : g.status === "error" ? /* @__PURE__ */ c(
+  ) : g.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
       className: "jogak:p-6 jogak:text-[var(--jogak-color-error-fg)] jogak:bg-[var(--jogak-color-bg-error)] jogak:h-full jogak:flex jogak:flex-col jogak:gap-3 jogak:items-start",
       children: [
-        /* @__PURE__ */ c("div", { className: "jogak:font-semibold", children: [
+        /* @__PURE__ */ j("div", { className: "jogak:font-semibold", children: [
           "Failed to load entry: ",
           o
         ] }),
@@ -524,58 +505,58 @@ function mo({
       ]
     }
   ) : g.status === "loading" ? /* @__PURE__ */ e(
-    bo,
+    fo,
     {
       meta: g.meta,
       jogakName: a,
-      viewport: j,
+      viewport: i,
       bgMode: p,
-      onViewportChange: i,
+      onViewportChange: c,
       onBgModeChange: w
     }
   ) : /* @__PURE__ */ e(
-    ho,
+    mo,
     {
       entry: g.entry,
       jogakName: a,
       overrideArgs: r,
       onArgChange: t,
-      onReset: l,
+      onReset: k,
       onResolveJogak: s,
-      viewport: j,
+      viewport: i,
       bgMode: p,
       bottomTab: N,
-      onViewportChange: i,
+      onViewportChange: c,
       onBgModeChange: w,
       onBottomTabChange: h,
       prismTheme: x,
-      previewIsolation: k
+      previewIsolation: l
     }
   );
 }
-function bo({
+function fo({
   meta: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: l,
+  onViewportChange: k,
   onBgModeChange: n
 }) {
-  const s = a ?? o.jogakNames[0] ?? "...", k = I[r];
-  return /* @__PURE__ */ c(
+  const s = a ?? o.jogakNames[0] ?? "...", l = q[r];
+  return /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-loading",
       className: "jogak:flex jogak:flex-col jogak:h-full",
       children: [
         /* @__PURE__ */ e(
-          q,
+          G,
           {
             title: o.title,
             jogakName: s,
             viewport: r,
             bgMode: t,
-            onViewportChange: l,
+            onViewportChange: k,
             onBgModeChange: n,
             showReset: !1,
             onReset: () => {
@@ -592,9 +573,9 @@ function bo({
               {
                 className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
                 style: {
-                  "--jogak-canvas-mw": k === "none" ? "100%" : `${k}px`
+                  "--jogak-canvas-mw": l === "none" ? "100%" : `${l}px`
                 },
-                children: /* @__PURE__ */ c("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: [
+                children: /* @__PURE__ */ j("div", { className: "jogak-skeleton-shimmer jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:flex jogak:items-center jogak:justify-center jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:min-h-[256px]", children: [
                   "Loading ",
                   o.title,
                   "…"
@@ -607,18 +588,18 @@ function bo({
     }
   );
 }
-function ho({
+function mo({
   entry: o,
   jogakName: a,
   overrideArgs: r,
   onArgChange: t,
-  onReset: l,
+  onReset: k,
   onResolveJogak: n,
   viewport: s,
-  bgMode: k,
+  bgMode: l,
   bottomTab: g,
-  onViewportChange: j,
-  onBgModeChange: i,
+  onViewportChange: i,
+  onBgModeChange: c,
   onBottomTabChange: p,
   prismTheme: w,
   previewIsolation: N
@@ -628,39 +609,39 @@ function ho({
   if (b(() => {
     a === null && h !== null && n !== void 0 && n(o.id, h);
   }, [a, h, o.id, n]), h === null)
-    return /* @__PURE__ */ c("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
+    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)
-    return /* @__PURE__ */ c("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
+    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 = {
     ...o.meta.argTypes ?? {},
     ...x.argTypes ?? {}
-  }, Q = Object.keys(r).length > 0, J = I[s];
-  return /* @__PURE__ */ c("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
+  }, 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(
-      q,
+      G,
       {
         title: o.title,
         jogakName: x.name,
         viewport: s,
-        bgMode: k,
-        onViewportChange: j,
-        onBgModeChange: i,
-        showReset: Q,
-        onReset: l
+        bgMode: l,
+        onViewportChange: i,
+        onBgModeChange: c,
+        showReset: I,
+        onReset: k
       }
     ),
     /* @__PURE__ */ e(
       "div",
       {
         className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
-        style: P[k],
+        style: P[l],
         children: /* @__PURE__ */ e(
           "div",
           {
@@ -670,7 +651,7 @@ function ho({
               "--jogak-canvas-mw": J === "none" ? "100%" : `${J}px`
             },
             children: /* @__PURE__ */ e(
-              xo,
+              bo,
               {
                 entry: o,
                 args: u,
@@ -684,7 +665,7 @@ function ho({
         )
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ j(
       "div",
       {
         "data-testid": "bottom-panel",
@@ -718,30 +699,30 @@ function ho({
             }
           ),
           /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: g === "controls" ? /* @__PURE__ */ e(
-            so,
+            go,
             {
               args: u,
               argTypes: f,
               onArgChange: t
             }
-          ) : /* @__PURE__ */ e(co, {}) })
+          ) : /* @__PURE__ */ e(lo, {}) })
         ]
       }
     )
   ] });
 }
-function q({
+function G({
   title: o,
   jogakName: a,
   viewport: r,
   bgMode: t,
-  onViewportChange: l,
+  onViewportChange: k,
   onBgModeChange: n,
   showReset: s,
-  onReset: k
+  onReset: l
 }) {
-  return /* @__PURE__ */ c("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__ */ c("div", { className: "jogak:flex-1 jogak:text-[13px]", children: [
+  return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:items-center jogak:gap-[10px] jogak:px-[14px] jogak:py-[7px] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg)] jogak:shrink-0", children: [
+    /* @__PURE__ */ j("div", { className: "jogak:flex-1 jogak:text-[13px]", children: [
       /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)]", children: o }),
       /* @__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 })
@@ -751,14 +732,14 @@ function q({
       {
         type: "button",
         onClick: () => {
-          l(g);
+          k(g);
         },
         "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 === 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: po[g]
+        children: co[g]
       },
       g
     )) }),
@@ -784,21 +765,21 @@ function q({
       "button",
       {
         type: "button",
-        onClick: k,
+        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 xo({ entry: o, args: a, source: r, theme: t, previewIsolation: l }) {
-  const [n, s] = m(!1), k = /* @__PURE__ */ c("div", { className: "jogak:relative", children: [
+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(
-      vo,
+      ho,
       {
         entry: o,
         args: a,
-        previewIsolation: l
+        previewIsolation: k
       }
     ),
     /* @__PURE__ */ e(
@@ -821,37 +802,39 @@ function xo({ entry: o, args: a, source: r, theme: t, previewIsolation: l }) {
       }
     )
   ] });
-  return /* @__PURE__ */ c("div", { children: [
-    k,
-    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(yo, { source: r, theme: t }) })
+  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 }) })
   ] });
 }
-const E = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
-function vo({ entry: o, args: a, previewIsolation: r }) {
+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: E,
-      children: /* @__PURE__ */ e(No, { entry: o, args: a })
+      className: O,
+      children: /* @__PURE__ */ e(vo, { entry: o, args: a })
     }
   ) : r === "iframe" ? /* @__PURE__ */ e(
-    uo,
+    io,
     {
       entry: o,
       args: a,
       "data-testid": "preview-content",
-      className: `${E} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
+      className: `${O} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
     }
-  ) : /* @__PURE__ */ e(wo, { entry: o, args: a });
+  ) : /* @__PURE__ */ e(xo, { entry: o, args: a });
 }
-function wo({ 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), () => {
-        S.unmount(t);
+        queueMicrotask(() => {
+          S.unmount(t);
+        });
       };
   }, [o]), b(() => {
     const t = r.current;
@@ -861,33 +844,35 @@ function wo({ entry: o, args: a }) {
     {
       ref: r,
       "data-testid": "preview-content",
-      className: E
+      className: O
     }
   );
 }
-function No({ entry: o, args: a }) {
+function vo({ entry: o, args: a }) {
   const r = _(null);
   return b(() => {
     const t = r.current;
     if (t !== null)
       return S.render(o, a, t), () => {
-        S.unmount(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 yo({ source: o, theme: a }) {
-  const [r, t] = m(!1), l = a.plain.backgroundColor ?? "#1e293b";
+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": l },
+      style: { "--jogak-source-bg": k },
       children: "Source not available"
     }
-  ) : /* @__PURE__ */ c("div", { className: "jogak:relative jogak:h-full", children: [
+  ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
     /* @__PURE__ */ e(
       "button",
       {
@@ -903,20 +888,20 @@ function yo({ source: o, theme: a }) {
         children: r ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ e(oo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: s, tokens: k, getLineProps: g, getTokenProps: j }) => /* @__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: s,
-        children: k.map((i, p) => /* @__PURE__ */ c(
+        children: l.map((c, p) => /* @__PURE__ */ j(
           "div",
           {
-            ...g({ line: i }),
+            ...g({ line: c }),
             className: "jogak:flex jogak:pr-6",
-            style: g({ 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: p + 1 }),
-              /* @__PURE__ */ e("span", { children: i.map((w, N) => /* @__PURE__ */ e("span", { ...j({ token: w }) }, N)) })
+              /* @__PURE__ */ e("span", { children: c.map((w, N) => /* @__PURE__ */ e("span", { ...i({ token: w }) }, N)) })
             ]
           },
           p
@@ -932,46 +917,46 @@ function D() {
   const r = o.get("jogak");
   return { entryId: a, jogakName: r };
 }
-function So(o, a) {
+function No(o, a) {
   const r = new URLSearchParams();
   r.set("entry", o), r.set("jogak", a), window.history.pushState({}, "", `?${r.toString()}`);
 }
-function Oo({
+function $o({
   entries: o,
   metas: a,
   codeTheme: r = "vsDark",
-  previewIsolation: t = "none"
+  previewIsolation: t = "shadow"
 } = {}) {
-  const l = C(() => {
+  const k = C(() => {
     if (o !== void 0) {
       a !== void 0 && console.warn(
         "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
       );
-      const d = new X();
+      const d = new Q();
       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, k] = m(
+  }, [o, a]), n = C(() => D(), []), [s, l] = m(
     (n == null ? void 0 : n.entryId) ?? null
-  ), [g, j] = m(
+  ), [g, i] = m(
     (n == null ? void 0 : n.jogakName) ?? null
-  ), [i, p] = m({});
+  ), [c, p] = m({});
   b(() => {
     const d = () => {
       const u = D();
-      u !== null ? (k(u.entryId), j(u.jogakName), p({})) : (k(null), j(null));
+      u !== null ? (l(u.entryId), i(u.jogakName), p({})) : (l(null), i(null));
     };
     return window.addEventListener("popstate", d), () => {
       window.removeEventListener("popstate", d);
     };
   }, []);
   const w = R((d, u) => {
-    k(d), j(u), p({}), So(d, u);
+    l(d), i(u), p({}), No(d, u);
   }, []), N = R((d, u) => {
-    if (k((f) => f === d ? d : f), j((f) => f ?? u), typeof window < "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()}`));
     }
@@ -980,14 +965,14 @@ function Oo({
   }, []), x = R(() => {
     p({});
   }, []);
-  return /* @__PURE__ */ e(K, { registry: l, children: /* @__PURE__ */ c(
+  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(
-          eo,
+          ao,
           {
             selectedEntryId: s,
             selectedJogakName: g,
@@ -995,11 +980,11 @@ function Oo({
           }
         ),
         /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: s !== null ? /* @__PURE__ */ e(
-          mo,
+          po,
           {
             entryId: s,
             jogakName: g,
-            overrideArgs: i,
+            overrideArgs: c,
             onArgChange: h,
             onReset: x,
             codeTheme: r,
@@ -1011,18 +996,18 @@ function Oo({
     }
   ) });
 }
-function Eo() {
-  const o = T(), a = C(() => o.getAll(), [o]), r = C(() => o.getTree(), [o]), t = C(
-    () => (l) => o.search(l),
+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 {
-  co as Actions,
-  so as Controls,
-  Oo as JogakApp,
-  mo as Preview,
-  eo as Sidebar,
-  Eo as useRegistry
+  lo as Actions,
+  go as Controls,
+  $o as JogakApp,
+  po as Preview,
+  ao as Sidebar,
+  Lo as useRegistry
 };