@jogak/ui 0.1.0-alpha.11 → 0.1.0-alpha.12

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { jsxs as j, jsx as t } from "react/jsx-runtime";
-import { useState as h, useEffect as x, useRef as L, useMemo as _, useCallback as A } from "react";
-import { defaultActionChannel as E, ComponentRegistry as Z, defaultRegistry as H } from "@jogak/core";
+import { useState as h, useEffect as x, useRef as E, useMemo as _, useCallback as A } from "react";
+import { defaultActionChannel as P, ComponentRegistry as Z, defaultRegistry as H } from "@jogak/core";
 import { useRegistryMeta as K, useEntry as T, reactAdapter as $, JogakProvider as oo, useRegistry as ao } from "@jogak/core/renderers/react";
 import { themes as F, Highlight as eo } from "prism-react-renderer";
 import { createPortal as to } from "react-dom";
@@ -13,7 +13,7 @@ function U(o) {
   } else for (e in o) o[e] && (r && (r += " "), r += e);
   return r;
 }
-function N() {
+function w() {
   for (var o, a, e = 0, r = "", s = arguments.length; e < s; e++) (o = arguments[e]) && (a = U(o)) && (r && (r += " "), r += a);
   return r;
 }
@@ -22,7 +22,7 @@ function ro({
   selectedJogakName: a,
   onSelect: e
 }) {
-  const [r, s] = h(""), { metaTree: n, searchMeta: g } = K(), i = r.trim().length > 0 ? g(r) : null;
+  const [r, s] = h(""), { metaTree: g, searchMeta: n } = K(), k = r.trim().length > 0 ? n(r) : null;
   return /* @__PURE__ */ j(
     "aside",
     {
@@ -35,17 +35,17 @@ function ro({
             type: "search",
             placeholder: "Search components...",
             value: r,
-            onChange: (k) => {
-              s(k.target.value);
+            onChange: (l) => {
+              s(l.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__ */ t("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: i !== null ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: k !== null ? /* @__PURE__ */ t(
           no,
           {
-            metas: i,
+            metas: k,
             selectedEntryId: o,
             selectedJogakName: a,
             onSelect: e
@@ -53,7 +53,7 @@ function ro({
         ) : /* @__PURE__ */ t(
           q,
           {
-            node: n,
+            node: g,
             selectedEntryId: o,
             selectedJogakName: a,
             onSelect: e
@@ -92,10 +92,10 @@ function q({
     {
       className: "jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",
       style: { "--jogak-tree-pl": `${s * 12}px` },
-      children: Object.entries(o).map(([n, g]) => /* @__PURE__ */ t("li", { children: "id" in g ? /* @__PURE__ */ t(
+      children: Object.entries(o).map(([g, n]) => /* @__PURE__ */ t("li", { children: "id" in n ? /* @__PURE__ */ t(
         G,
         {
-          meta: g,
+          meta: n,
           selectedEntryId: a,
           selectedJogakName: e,
           onSelect: r,
@@ -104,14 +104,14 @@ function q({
       ) : /* @__PURE__ */ t(
         go,
         {
-          label: n,
-          node: g,
+          label: g,
+          node: n,
           selectedEntryId: a,
           selectedJogakName: e,
           onSelect: r,
           depth: s + 1
         }
-      ) }, n))
+      ) }, g))
     }
   );
 }
@@ -121,33 +121,33 @@ function go({
   selectedEntryId: e,
   selectedJogakName: r,
   onSelect: s,
-  depth: n
+  depth: g
 }) {
-  const [g, i] = h(!0);
+  const [n, k] = h(!0);
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          i((k) => !k);
+          k((l) => !l);
         },
         className: "jogak:flex jogak:items-center jogak:gap-1 jogak:w-full jogak:px-3 jogak:py-1 jogak:bg-transparent jogak:border-none jogak:cursor-pointer jogak:text-[12px] jogak:font-semibold jogak:text-[var(--jogak-color-fg-muted)] jogak:uppercase jogak:tracking-wider",
-        "aria-expanded": g,
+        "aria-expanded": n,
         children: [
-          /* @__PURE__ */ t("span", { children: g ? "▾" : "▸" }),
+          /* @__PURE__ */ t("span", { children: n ? "▾" : "▸" }),
           o
         ]
       }
     ),
-    g && /* @__PURE__ */ t(
+    n && /* @__PURE__ */ t(
       q,
       {
         node: a,
         selectedEntryId: e,
         selectedJogakName: r,
         onSelect: s,
-        depth: n
+        depth: g
       }
     )
   ] });
@@ -159,49 +159,49 @@ function G({
   onSelect: r,
   indent: s
 }) {
-  const n = o.id === a, [g, i] = h(n);
+  const g = o.id === a, [n, k] = h(g);
   x(() => {
-    n && i(!0);
-  }, [n]);
-  const k = o.title.split("/").pop() ?? o.title, d = 16 + s * 12;
+    g && k(!0);
+  }, [g]);
+  const l = o.title.split("/").pop() ?? o.title, d = 16 + s * 12;
   return /* @__PURE__ */ j("div", { children: [
     /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          if (n)
-            i((l) => !l);
+          if (g)
+            k((i) => !i);
           else {
-            i(!0);
-            const l = o.jogakNames[0];
-            l !== void 0 && r(o.id, l);
+            k(!0);
+            const i = o.jogakNames[0];
+            i !== void 0 && r(o.id, i);
           }
         },
-        className: N(
+        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"
+          g ? "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": `${d}px` },
-        "aria-expanded": g,
+        "aria-expanded": n,
         children: [
-          /* @__PURE__ */ t("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: g ? "▾" : "▸" }),
-          k
+          /* @__PURE__ */ t("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: n ? "▾" : "▸" }),
+          l
         ]
       }
     ),
-    g && /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((l) => {
-      const c = n && l === e;
+    n && /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
+      const c = g && i === e;
       return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
         "button",
         {
           type: "button",
           onClick: () => {
-            r(o.id, l);
+            r(o.id, i);
           },
-          className: N(
+          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]",
@@ -209,9 +209,9 @@ function G({
           ),
           style: { "--jogak-jogak-pl": `${d + 18}px` },
           "aria-current": c ? "true" : void 0,
-          children: l
+          children: i
         }
-      ) }, l);
+      ) }, i);
     }) })
   ] });
 }
@@ -219,7 +219,7 @@ function so(o, a) {
   const e = a == null ? void 0 : a.control, r = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, s = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
   return r || s ? "action" : e === "boolean" || typeof o == "boolean" ? "boolean" : e === "number" || e === "range" || typeof o == "number" ? "number" : e === "select" || e === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : e === "text" || e === "color" || typeof o == "string" ? "text" : "json";
 }
-const O = "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]", P = "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)]";
+const M = "jogak:px-2 jogak:py-1 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:text-[13px] jogak:w-full jogak:max-w-[280px]", 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 lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
   switch (so(a, e)) {
     case "boolean":
@@ -228,8 +228,8 @@ function lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
         {
           type: "checkbox",
           checked: a === !0,
-          onChange: (n) => {
-            r(o, n.target.checked);
+          onChange: (g) => {
+            r(o, g.target.checked);
           },
           className: "jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"
         }
@@ -240,23 +240,23 @@ function lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
         {
           type: "number",
           value: typeof a == "number" ? a : "",
-          onChange: (n) => {
-            r(o, n.target.valueAsNumber);
+          onChange: (g) => {
+            r(o, g.target.valueAsNumber);
           },
-          className: O
+          className: M
         }
       );
     case "select": {
-      const n = (e == null ? void 0 : e.options) ?? [];
+      const g = (e == null ? void 0 : e.options) ?? [];
       return /* @__PURE__ */ t(
         "select",
         {
           value: String(a ?? ""),
-          onChange: (g) => {
-            r(o, g.target.value);
+          onChange: (n) => {
+            r(o, n.target.value);
           },
-          className: O,
-          children: n.map((g) => /* @__PURE__ */ t("option", { value: String(g), children: String(g) }, String(g)))
+          className: M,
+          children: g.map((n) => /* @__PURE__ */ t("option", { value: String(n), children: String(n) }, String(n)))
         }
       );
     }
@@ -266,10 +266,10 @@ function lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
         {
           type: "text",
           value: typeof a == "string" ? a : String(a ?? ""),
-          onChange: (n) => {
-            r(o, n.target.value);
+          onChange: (g) => {
+            r(o, g.target.value);
           },
-          className: O
+          className: M
         }
       );
     case "action":
@@ -279,44 +279,70 @@ function lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
   }
 }
 function io({ args: o, argTypes: a, onArgChange: e }) {
-  const s = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
+  const s = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]), g = s.some(
+    ([n]) => {
+      var k;
+      return ((k = a[n]) == null ? void 0 : k.defaultValue) !== void 0;
+    }
+  );
   return /* @__PURE__ */ j("div", { className: "jogak:border-t-2 jogak:border-[var(--jogak-color-border)]", children: [
     /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)]", children: "Controls" }),
     s.length === 0 ? /* @__PURE__ */ t("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__ */ t("thead", { children: /* @__PURE__ */ j("tr", { children: [
-        /* @__PURE__ */ t("th", { className: P, children: "Name" }),
-        /* @__PURE__ */ t("th", { className: P, children: "Control" }),
-        /* @__PURE__ */ t("th", { className: P, children: "Description" })
+        /* @__PURE__ */ t("th", { className: L, children: "Name" }),
+        /* @__PURE__ */ t("th", { className: L, children: "Control" }),
+        g && /* @__PURE__ */ t("th", { className: L, children: "Default" }),
+        /* @__PURE__ */ t("th", { className: L, children: "Description" })
       ] }) }),
-      /* @__PURE__ */ t("tbody", { children: s.map(([n, g]) => {
-        const i = a[n];
+      /* @__PURE__ */ t("tbody", { children: s.map(([n, k]) => {
+        const l = a[n];
         return /* @__PURE__ */ j("tr", { children: [
           /* @__PURE__ */ t(
             "td",
             {
-              className: N(
-                M,
+              className: w(
+                O,
                 "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"
               ),
               children: n
             }
           ),
-          /* @__PURE__ */ t("td", { className: M, children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t("td", { className: O, children: /* @__PURE__ */ t(
             lo,
             {
               argKey: n,
-              value: g,
-              argType: i,
+              value: k,
+              argType: l,
               onArgChange: e
             }
           ) }),
-          /* @__PURE__ */ t("td", { className: N(M, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (i == null ? void 0 : i.description) ?? "" })
+          g && /* @__PURE__ */ t(
+            "td",
+            {
+              className: w(
+                O,
+                "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:whitespace-nowrap"
+              ),
+              children: (l == null ? void 0 : l.defaultValue) !== void 0 ? ko(l.defaultValue) : ""
+            }
+          ),
+          /* @__PURE__ */ t("td", { className: w(O, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
         ] }, n);
       }) })
     ] })
   ] });
 }
 function ko(o) {
+  if (typeof o == "string") return `'${o}'`;
+  if (typeof o == "number" || typeof o == "boolean" || o === null)
+    return String(o);
+  try {
+    return JSON.stringify(o);
+  } catch {
+    return String(o);
+  }
+}
+function co(o) {
   if (o.length === 0) return "()";
   try {
     return o.map((a) => {
@@ -334,13 +360,13 @@ function ko(o) {
     return "[unserializable]";
   }
 }
-function co(o) {
-  const a = new Date(o), e = a.getHours().toString().padStart(2, "0"), r = a.getMinutes().toString().padStart(2, "0"), s = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
-  return `${e}:${r}:${s}.${n}`;
+function jo(o) {
+  const a = new Date(o), e = a.getHours().toString().padStart(2, "0"), r = a.getMinutes().toString().padStart(2, "0"), s = a.getSeconds().toString().padStart(2, "0"), g = a.getMilliseconds().toString().padStart(3, "0");
+  return `${e}:${r}:${s}.${g}`;
 }
-function jo() {
-  const [o, a] = h(() => E.getLogs());
-  x(() => E.subscribe(a), []);
+function uo() {
+  const [o, a] = h(() => P.getLogs());
+  x(() => P.subscribe(a), []);
   const e = 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 +379,10 @@ function jo() {
         {
           type: "button",
           onClick: () => {
-            E.clear();
+            P.clear();
           },
           disabled: e,
-          className: N(
+          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",
             e ? "jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default" : "jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"
           ),
@@ -369,11 +395,11 @@ function jo() {
       {
         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__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: co(r.timestamp) }),
+          /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: jo(r.timestamp) }),
           /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: r.name }),
           /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
             "(",
-            ko(r.args),
+            co(r.args),
             ")"
           ] })
         ]
@@ -382,18 +408,18 @@ function jo() {
     )) }) })
   ] });
 }
-function uo({
+function po({
   children: o,
   className: a,
   style: e,
   "data-testid": r
 }) {
-  const s = L(null), [n, g] = h(null);
+  const s = E(null), [g, n] = h(null);
   return x(() => {
-    const i = s.current;
-    if (i === null) return;
-    const k = i.shadowRoot ?? i.attachShadow({ mode: "open" });
-    g(k);
+    const k = s.current;
+    if (k === null) return;
+    const l = k.shadowRoot ?? k.attachShadow({ mode: "open" });
+    n(l);
   }, []), /* @__PURE__ */ t(
     "div",
     {
@@ -401,77 +427,77 @@ function uo({
       className: a,
       "data-testid": r,
       style: e,
-      children: n !== null ? to(o, n) : null
+      children: g !== null ? to(o, g) : null
     }
   );
 }
-function po({
+function fo({
   entry: o,
   args: a,
   userPreviewUrl: e,
   previewEntryPath: r,
   className: s,
-  "data-testid": n
+  "data-testid": g
 }) {
-  const g = L(null), [i, k] = h(!1), d = e !== "" ? `${e}${r}` : "/preview-frame.html";
+  const n = E(null), [k, l] = h(!1), d = e !== "" ? `${e}${r}` : "/preview-frame.html";
   return x(() => {
-    const l = (c) => {
-      const p = g.current;
+    const i = (c) => {
+      const p = n.current;
       if (p === null || c.source !== p.contentWindow) return;
       const f = c.data;
-      f == null || typeof f != "object" || f.type === "jogak:ready" && k(!0);
+      f == null || typeof f != "object" || f.type === "jogak:ready" && l(!0);
     };
-    return window.addEventListener("message", l), () => {
-      window.removeEventListener("message", l);
+    return window.addEventListener("message", i), () => {
+      window.removeEventListener("message", i);
     };
   }, []), x(() => {
     var c;
-    if (!i) return;
-    const l = g.current;
-    l !== null && ((c = l.contentWindow) == null || c.postMessage(
+    if (!k) return;
+    const i = n.current;
+    i !== null && ((c = i.contentWindow) == null || c.postMessage(
       { type: "jogak:setProps", entryId: o.id, args: a },
       "*"
     ));
-  }, [i, o, a]), x(() => {
-    const l = g.current;
+  }, [k, o, a]), x(() => {
+    const i = n.current;
     return () => {
-      l !== null && queueMicrotask(() => {
+      i !== null && queueMicrotask(() => {
         var c;
-        (c = l.contentWindow) == null || c.postMessage({ type: "jogak:unmount" }, "*");
+        (c = i.contentWindow) == null || c.postMessage({ type: "jogak:unmount" }, "*");
       });
     };
   }, []), /* @__PURE__ */ t(
     "iframe",
     {
-      ref: g,
+      ref: n,
       src: d,
       title: "Preview",
       className: s,
-      "data-testid": n
+      "data-testid": g
     }
   );
 }
-const fo = 60;
-function mo(o, a) {
-  const e = bo(o), { children: r, restProps: s } = ho(a), n = Object.entries(s).filter(([, c]) => c !== void 0).map(([c, p]) => vo(c, p)), g = xo(r), i = g !== null, k = n.length === 0 ? "" : " " + n.join(" "), d = i ? `<${e}${k}>${g ?? ""}</${e}>` : `<${e}${k} />`;
-  if (d.length <= fo && !d.includes(`
+const mo = 60;
+function bo(o, a) {
+  const e = ho(o), { children: r, restProps: s } = xo(a), g = Object.entries(s).filter(([, c]) => c !== void 0).map(([c, p]) => wo(c, p)), n = vo(r), k = n !== null, l = g.length === 0 ? "" : " " + g.join(" "), d = k ? `<${e}${l}>${n ?? ""}</${e}>` : `<${e}${l} />`;
+  if (d.length <= mo && !d.includes(`
 `))
     return d;
-  const l = n.length === 0 ? "" : `
-  ` + n.join(`
+  const i = g.length === 0 ? "" : `
+  ` + g.join(`
   `) + `
 `;
-  if (i) {
-    const c = (g ?? "").split(`
+  if (k) {
+    const c = (n ?? "").split(`
 `).map((p) => `  ${p}`).join(`
 `);
-    return `<${e}${l}>
+    return `<${e}${i}>
 ${c}
 </${e}>`;
   }
-  return `<${e}${l}/>`;
+  return `<${e}${i}/>`;
 }
-function bo(o) {
+function ho(o) {
   const a = o.meta.component;
   if (a !== void 0) {
     if (typeof a.displayName == "string" && a.displayName.length > 0)
@@ -482,14 +508,14 @@ function bo(o) {
   const e = o.title.split("/").pop();
   return e !== void 0 && e.length > 0 ? e : "Component";
 }
-function ho(o) {
+function xo(o) {
   const { children: a, ...e } = o;
   return { children: a, restProps: e };
 }
-function xo(o) {
+function vo(o) {
   return o == null ? null : typeof o == "string" ? o.length === 0 ? null : o : typeof o == "number" || typeof o == "bigint" ? `{${o.toString()}}` : typeof o == "boolean" ? null : `{${Q(o)}}`;
 }
-function vo(o, a) {
+function wo(o, a) {
   if (a === !0) return o;
   if (a === !1) return `${o}={false}`;
   if (a === null) return `${o}={null}`;
@@ -510,11 +536,11 @@ const X = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, wo = {
+}, No = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
-}, V = {
+}, J = {
   white: {
     "--jogak-canvas-bg": "#ffffff",
     "--jogak-canvas-bg-image": "none",
@@ -533,24 +559,24 @@ const X = {
     "--jogak-canvas-bg-size": "16px 16px",
     "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
   }
-}, B = "jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";
-function No(o) {
+}, D = "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 yo(o) {
   return F[o] ?? F.vsDark;
 }
-function yo({
+function So({
   entryId: o,
   jogakName: a,
   overrideArgs: e,
   onArgChange: r,
   onReset: s,
-  codeTheme: n,
-  onResolveJogak: g,
-  previewIsolation: i = "iframe",
-  userPreviewUrl: k = "",
+  codeTheme: g,
+  onResolveJogak: n,
+  previewIsolation: k = "iframe",
+  userPreviewUrl: l = "",
   previewEntryPath: d = "/__jogak_preview__/index.html"
 }) {
-  const l = T(o), [c, p] = h("desktop"), [f, S] = h("white"), [y, v] = h("controls"), w = No(n);
-  return l.status === "unknown" ? /* @__PURE__ */ j(
+  const i = T(o), [c, p] = h("desktop"), [f, S] = h("white"), [y, v] = h("controls"), N = yo(g);
+  return i.status === "unknown" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-not-found",
@@ -560,7 +586,7 @@ function yo({
         o
       ]
     }
-  ) : l.status === "error" ? /* @__PURE__ */ j(
+  ) : i.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
@@ -570,13 +596,13 @@ function yo({
           "Failed to load entry: ",
           o
         ] }),
-        /* @__PURE__ */ t("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: l.error.message })
+        /* @__PURE__ */ t("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: i.error.message })
       ]
     }
-  ) : l.status === "loading" ? /* @__PURE__ */ t(
-    So,
+  ) : i.status === "loading" ? /* @__PURE__ */ t(
+    Co,
     {
-      meta: l.meta,
+      meta: i.meta,
       jogakName: a,
       viewport: c,
       bgMode: f,
@@ -584,36 +610,36 @@ function yo({
       onBgModeChange: S
     }
   ) : /* @__PURE__ */ t(
-    Co,
+    $o,
     {
-      entry: l.entry,
+      entry: i.entry,
       jogakName: a,
       overrideArgs: e,
       onArgChange: r,
       onReset: s,
-      onResolveJogak: g,
+      onResolveJogak: n,
       viewport: c,
       bgMode: f,
       bottomTab: y,
       onViewportChange: p,
       onBgModeChange: S,
       onBottomTabChange: v,
-      prismTheme: w,
-      previewIsolation: i,
-      userPreviewUrl: k,
+      prismTheme: N,
+      previewIsolation: k,
+      userPreviewUrl: l,
       previewEntryPath: d
     }
   );
 }
-function So({
+function Co({
   meta: o,
   jogakName: a,
   viewport: e,
   bgMode: r,
   onViewportChange: s,
-  onBgModeChange: n
+  onBgModeChange: g
 }) {
-  const g = a ?? o.jogakNames[0] ?? "...", i = X[e];
+  const n = a ?? o.jogakNames[0] ?? "...", k = X[e];
   return /* @__PURE__ */ j(
     "div",
     {
@@ -624,11 +650,11 @@ function So({
           Y,
           {
             title: o.title,
-            jogakName: g,
+            jogakName: n,
             viewport: e,
             bgMode: r,
             onViewportChange: s,
-            onBgModeChange: n,
+            onBgModeChange: g,
             showReset: !1,
             onReset: () => {
             }
@@ -637,14 +663,14 @@ function So({
         /* @__PURE__ */ t(
           "div",
           {
-            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
-            style: V[r],
+            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${D}`,
+            style: J[r],
             children: /* @__PURE__ */ t(
               "div",
               {
                 className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
                 style: {
-                  "--jogak-canvas-mw": i === "none" ? "100%" : `${i}px`
+                  "--jogak-canvas-mw": k === "none" ? "100%" : `${k}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 ",
@@ -659,53 +685,53 @@ function So({
     }
   );
 }
-function Co({
+function $o({
   entry: o,
   jogakName: a,
   overrideArgs: e,
   onArgChange: r,
   onReset: s,
-  onResolveJogak: n,
-  viewport: g,
-  bgMode: i,
-  bottomTab: k,
+  onResolveJogak: g,
+  viewport: n,
+  bgMode: k,
+  bottomTab: l,
   onViewportChange: d,
-  onBgModeChange: l,
+  onBgModeChange: i,
   onBottomTabChange: c,
   prismTheme: p,
   previewIsolation: f,
   userPreviewUrl: S,
   previewEntryPath: y
 }) {
-  var z;
-  const v = a ?? ((z = o.jogaks[0]) == null ? void 0 : z.name) ?? null;
+  var W;
+  const v = a ?? ((W = o.jogaks[0]) == null ? void 0 : W.name) ?? null;
   if (x(() => {
-    a === null && v !== null && n !== void 0 && n(o.id, v);
-  }, [a, v, o.id, n]), v === null)
+    a === null && v !== null && g !== void 0 && g(o.id, v);
+  }, [a, v, o.id, g]), v === null)
     return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Entry has no jogaks: ",
       o.id
     ] });
-  const w = o.jogaks.find((C) => C.name === v);
-  if (w === void 0)
+  const N = o.jogaks.find((C) => C.name === v);
+  if (N === void 0)
     return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Jogak not found: ",
       v
     ] });
-  const R = { ...w.args ?? {}, ...e }, u = {
+  const R = { ...N.args ?? {}, ...e }, u = {
     ...o.meta.argTypes ?? {},
-    ...w.argTypes ?? {}
-  }, m = Object.keys(e).length > 0, b = X[g];
+    ...N.argTypes ?? {}
+  }, m = Object.keys(e).length > 0, b = X[n];
   return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
     /* @__PURE__ */ t(
       Y,
       {
         title: o.title,
-        jogakName: w.name,
-        viewport: g,
-        bgMode: i,
+        jogakName: N.name,
+        viewport: n,
+        bgMode: k,
         onViewportChange: d,
-        onBgModeChange: l,
+        onBgModeChange: i,
         showReset: m,
         onReset: s
       }
@@ -713,8 +739,8 @@ function Co({
     /* @__PURE__ */ t(
       "div",
       {
-        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
-        style: V[i],
+        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${D}`,
+        style: J[k],
         children: /* @__PURE__ */ t(
           "div",
           {
@@ -724,7 +750,7 @@ function Co({
               "--jogak-canvas-mw": b === "none" ? "100%" : `${b}px`
             },
             children: /* @__PURE__ */ t(
-              $o,
+              _o,
               {
                 entry: o,
                 args: R,
@@ -733,7 +759,7 @@ function Co({
                 userPreviewUrl: S,
                 previewEntryPath: y
               },
-              `${o.id}/${w.name}`
+              `${o.id}/${N.name}`
             )
           }
         )
@@ -751,19 +777,19 @@ function Co({
               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((C) => {
-                const D = k === C;
+                const z = l === C;
                 return /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
                     role: "tab",
-                    "aria-selected": D,
+                    "aria-selected": z,
                     onClick: () => {
                       c(C);
                     },
-                    className: N(
+                    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",
-                      D ? "jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]" : "jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"
+                      z ? "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: C
                   },
@@ -772,14 +798,14 @@ function Co({
               })
             }
           ),
-          /* @__PURE__ */ t("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: k === "controls" ? /* @__PURE__ */ t(
+          /* @__PURE__ */ t("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: l === "controls" ? /* @__PURE__ */ t(
             io,
             {
               args: R,
               argTypes: u,
               onArgChange: r
             }
-          ) : /* @__PURE__ */ t(jo, {}) })
+          ) : /* @__PURE__ */ t(uo, {}) })
         ]
       }
     )
@@ -791,9 +817,9 @@ function Y({
   viewport: e,
   bgMode: r,
   onViewportChange: s,
-  onBgModeChange: n,
-  showReset: g,
-  onReset: i
+  onBgModeChange: g,
+  showReset: n,
+  onReset: k
 }) {
   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: [
@@ -801,61 +827,61 @@ function Y({
       /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none", children: "/" }),
       /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold", children: a })
     ] }),
-    /* @__PURE__ */ t("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__ */ t(
+    /* @__PURE__ */ t("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__ */ t(
       "button",
       {
         type: "button",
         onClick: () => {
-          s(k);
+          s(l);
         },
-        "aria-pressed": e === k,
-        className: N(
+        "aria-pressed": e === l,
+        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",
-          e === 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"
+          e === 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"
         ),
-        children: wo[k]
+        children: No[l]
       },
-      k
+      l
     )) }),
-    /* @__PURE__ */ t("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((k) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((l) => /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         onClick: () => {
-          n(k);
+          g(l);
         },
-        "aria-pressed": r === k,
-        "aria-label": `${k} background`,
-        className: N(
+        "aria-pressed": r === l,
+        "aria-label": `${l} 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",
-          B,
-          r === k ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
+          D,
+          r === l ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
         ),
-        style: V[k]
+        style: J[l]
       },
-      k
+      l
     )) }),
-    g && /* @__PURE__ */ t(
+    n && /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        onClick: i,
+        onClick: k,
         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 $o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl: s, previewEntryPath: n }) {
-  const [g, i] = h(!1), k = mo(o, a), d = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
+function _o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl: s, previewEntryPath: g }) {
+  const [n, k] = h(!1), l = bo(o, a), d = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
     /* @__PURE__ */ t(
-      _o,
+      Ro,
       {
         entry: o,
         args: a,
         previewIsolation: r,
         userPreviewUrl: s,
-        previewEntryPath: n
+        previewEntryPath: g
       }
     ),
     /* @__PURE__ */ t(
@@ -863,16 +889,16 @@ function $o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl:
       {
         type: "button",
         onClick: () => {
-          i((l) => !l);
+          k((i) => !i);
         },
-        "aria-pressed": g,
-        "aria-label": g ? "Hide source code" : "Show source code",
-        className: N(
+        "aria-pressed": n,
+        "aria-label": n ? "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",
-          g ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
+          n ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
         ),
         children: "</>"
       }
@@ -880,32 +906,32 @@ function $o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl:
   ] });
   return /* @__PURE__ */ j("div", { children: [
     d,
-    g && /* @__PURE__ */ t("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__ */ t(Lo, { source: k, theme: e }) })
+    n && /* @__PURE__ */ t("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__ */ t(Oo, { source: l, theme: e }) })
   ] });
 }
-const J = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
-function _o({ entry: o, args: a, previewIsolation: e, userPreviewUrl: r, previewEntryPath: s }) {
+const V = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
+function Ro({ entry: o, args: a, previewIsolation: e, userPreviewUrl: r, previewEntryPath: s }) {
   return e === "shadow" ? /* @__PURE__ */ t(
-    uo,
+    po,
     {
       "data-testid": "preview-content",
-      className: J,
-      children: /* @__PURE__ */ t(Ao, { entry: o, args: a })
+      className: V,
+      children: /* @__PURE__ */ t(Lo, { entry: o, args: a })
     }
   ) : e === "iframe" ? /* @__PURE__ */ t(
-    po,
+    fo,
     {
       entry: o,
       args: a,
       userPreviewUrl: r,
       previewEntryPath: s,
       "data-testid": "preview-content",
-      className: `${J} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
+      className: `${V} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
     }
-  ) : /* @__PURE__ */ t(Ro, { entry: o, args: a });
+  ) : /* @__PURE__ */ t(Ao, { entry: o, args: a });
 }
-function Ro({ entry: o, args: a }) {
-  const e = L(null);
+function Ao({ entry: o, args: a }) {
+  const e = E(null);
   return x(() => {
     const r = e.current;
     if (r !== null)
@@ -922,12 +948,12 @@ function Ro({ entry: o, args: a }) {
     {
       ref: e,
       "data-testid": "preview-content",
-      className: J
+      className: V
     }
   );
 }
-function Ao({ entry: o, args: a }) {
-  const e = L(null);
+function Lo({ entry: o, args: a }) {
+  const e = E(null);
   return x(() => {
     const r = e.current;
     if (r !== null)
@@ -941,7 +967,7 @@ function Ao({ entry: o, args: a }) {
     r !== null && $.render(o, a, r);
   }, [o, a]), /* @__PURE__ */ t("div", { ref: e, "data-testid": "preview-content-shadow" });
 }
-function Lo({ source: o, theme: a }) {
+function Oo({ source: o, theme: a }) {
   const [e, r] = h(!1), s = a.plain.backgroundColor ?? "#1e293b";
   return o === void 0 ? /* @__PURE__ */ t(
     "div",
@@ -966,20 +992,20 @@ function Lo({ source: o, theme: a }) {
         children: e ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ t(eo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: g, tokens: i, getLineProps: k, getTokenProps: d }) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(eo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: n, tokens: k, getLineProps: l, getTokenProps: d }) => /* @__PURE__ */ t(
       "pre",
       {
         className: "jogak:m-0 jogak:py-3 jogak:px-0 jogak:text-[12.5px] jogak:leading-[1.7] jogak:font-[family-name:var(--jogak-font-mono)] jogak:h-full jogak:box-border jogak:overflow-auto",
-        style: g,
-        children: i.map((l, c) => /* @__PURE__ */ j(
+        style: n,
+        children: k.map((i, c) => /* @__PURE__ */ j(
           "div",
           {
-            ...k({ line: l }),
+            ...l({ line: i }),
             className: "jogak:flex jogak:pr-6",
-            style: k({ line: l }).style,
+            style: l({ line: i }).style,
             children: [
               /* @__PURE__ */ t("span", { className: "jogak:select-none jogak:min-w-10 jogak:pl-[14px] jogak:pr-[14px] jogak:text-right jogak:text-[rgba(148,163,184,0.45)] jogak:shrink-0 jogak:leading-[1.7]", children: c + 1 }),
-              /* @__PURE__ */ t("span", { children: l.map((p, f) => /* @__PURE__ */ t("span", { ...d({ token: p }) }, f)) })
+              /* @__PURE__ */ t("span", { children: i.map((p, f) => /* @__PURE__ */ t("span", { ...d({ token: p }) }, f)) })
             ]
           },
           c
@@ -1005,10 +1031,10 @@ function Wo({
   codeTheme: e = "vsDark",
   previewIsolation: r = "iframe",
   userPreviewUrl: s = "",
-  previewEntryPath: n = "/__jogak_preview__/index.html",
-  userViteUrl: g
+  previewEntryPath: g = "/__jogak_preview__/index.html",
+  userViteUrl: n
 } = {}) {
-  const i = s !== "" ? s : g ?? "", k = _(() => {
+  const k = s !== "" ? s : n ?? "", l = _(() => {
     if (o !== void 0) {
       a !== void 0 && console.warn(
         "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
@@ -1020,7 +1046,7 @@ function Wo({
     if (a !== void 0)
       for (const u of a) H.registerMeta(u);
     return H;
-  }, [o, a]), d = _(() => I(), []), [l, c] = h(
+  }, [o, a]), d = _(() => I(), []), [i, c] = h(
     (d == null ? void 0 : d.entryId) ?? null
   ), [p, f] = h(
     (d == null ? void 0 : d.jogakName) ?? null
@@ -1036,17 +1062,17 @@ function Wo({
   }, []);
   const v = A((u, m) => {
     c(u), f(m), y({}), Eo(u, m);
-  }, []), w = A((u, m) => {
+  }, []), N = A((u, m) => {
     if (c((b) => b === u ? u : b), f((b) => b ?? m), typeof window < "u") {
       const b = new URLSearchParams(window.location.search);
       b.get("entry") === u && b.get("jogak") === null && (b.set("jogak", m), window.history.replaceState({}, "", `?${b.toString()}`));
     }
-  }, []), W = A((u, m) => {
+  }, []), B = A((u, m) => {
     y((b) => ({ ...b, [u]: m }));
   }, []), R = A(() => {
     y({});
   }, []);
-  return /* @__PURE__ */ t(oo, { registry: k, children: /* @__PURE__ */ j(
+  return /* @__PURE__ */ t(oo, { registry: l, children: /* @__PURE__ */ j(
     "div",
     {
       "data-jogak-shell": !0,
@@ -1055,24 +1081,24 @@ function Wo({
         /* @__PURE__ */ t(
           ro,
           {
-            selectedEntryId: l,
+            selectedEntryId: i,
             selectedJogakName: p,
             onSelect: v
           }
         ),
-        /* @__PURE__ */ t("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: l !== null ? /* @__PURE__ */ t(
-          yo,
+        /* @__PURE__ */ t("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: i !== null ? /* @__PURE__ */ t(
+          So,
           {
-            entryId: l,
+            entryId: i,
             jogakName: p,
             overrideArgs: S,
-            onArgChange: W,
+            onArgChange: B,
             onReset: R,
             codeTheme: e,
-            onResolveJogak: w,
+            onResolveJogak: N,
             previewIsolation: r,
-            userPreviewUrl: i,
-            previewEntryPath: n
+            userPreviewUrl: k,
+            previewEntryPath: g
           }
         ) : /* @__PURE__ */ t("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" }) })
       ]
@@ -1087,10 +1113,10 @@ function zo() {
   return { entries: a, tree: e, search: r };
 }
 export {
-  jo as Actions,
+  uo as Actions,
   io as Controls,
   Wo as JogakApp,
-  yo as Preview,
+  So as Preview,
   ro as Sidebar,
   zo as useRegistry
 };