@jogak/ui 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/index.mjs

@@ -1,1219 +1,902 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { useState as x, useEffect as v, useRef as V, useMemo as w, useCallback as R } from "react";
-import { defaultActionChannel as z, ComponentRegistry as U, defaultRegistry as F } from "@jogak/core";
-import { useRegistryMeta as _, useEntry as G, reactAdapter as j, JogakProvider as T, useRegistry as q } from "@jogak/react";
-import { themes as L, Highlight as Q } from "prism-react-renderer";
-function Y({
-  selectedEntryId: e,
-  selectedJogakName: t,
-  onSelect: o
+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) {
+  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);
+  } 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);
+  return t;
+}
+function K({
+  selectedEntryId: o,
+  selectedJogakName: a,
+  onSelect: r
 }) {
-  const [i, d] = x(""), { metaTree: r, searchMeta: a } = _(), l = i.trim().length > 0 ? a(i) : null;
-  return /* @__PURE__ */ c(
+  const [t, g] = f(""), { metaTree: n, searchMeta: k } = q(), s = t.trim().length > 0 ? k(t) : null;
+  return /* @__PURE__ */ j(
     "aside",
     {
       "data-testid": "sidebar",
-      style: {
-        borderRight: "1px solid #e5e7eb",
-        height: "100%",
-        overflow: "auto",
-        display: "flex",
-        flexDirection: "column"
-      },
+      className: "jogak:flex jogak:flex-col jogak:h-full jogak:overflow-auto jogak:border-r jogak:border-[var(--jogak-color-border)]",
       children: [
-        /* @__PURE__ */ n("div", { style: { padding: "12px", borderBottom: "1px solid #e5e7eb" }, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ e("div", { className: "jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]", children: /* @__PURE__ */ e(
           "input",
           {
             type: "search",
             placeholder: "Search components...",
-            value: i,
-            onChange: (s) => {
-              d(s.target.value);
-            },
-            style: {
-              width: "100%",
-              padding: "6px 8px",
-              border: "1px solid #d1d5db",
-              borderRadius: 4
+            value: t,
+            onChange: (l) => {
+              g(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__ */ n("nav", { style: { flex: 1, overflow: "auto", padding: "8px 0" }, children: l !== null ? /* @__PURE__ */ n(
-          X,
+        /* @__PURE__ */ e("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: s !== null ? /* @__PURE__ */ e(
+          T,
           {
-            metas: l,
-            selectedEntryId: e,
-            selectedJogakName: t,
-            onSelect: o
+            metas: s,
+            selectedEntryId: o,
+            selectedJogakName: a,
+            onSelect: r
           }
-        ) : /* @__PURE__ */ n(
-          H,
+        ) : /* @__PURE__ */ e(
+          D,
           {
-            node: r,
-            selectedEntryId: e,
-            selectedJogakName: t,
-            onSelect: o
+            node: n,
+            selectedEntryId: o,
+            selectedJogakName: a,
+            onSelect: r
           }
         ) })
       ]
     }
   );
 }
-function X({
-  metas: e,
-  selectedEntryId: t,
-  selectedJogakName: o,
-  onSelect: i
+function T({
+  metas: o,
+  selectedEntryId: a,
+  selectedJogakName: r,
+  onSelect: t
 }) {
-  return e.length === 0 ? /* @__PURE__ */ n("p", { style: { padding: "0 12px", color: "#9ca3af", fontSize: 13 }, children: "No results" }) : /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: e.map((d) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-    D,
+  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,
     {
-      meta: d,
-      selectedEntryId: t,
-      selectedJogakName: o,
-      onSelect: i,
+      meta: g,
+      selectedEntryId: a,
+      selectedJogakName: r,
+      onSelect: t,
       indent: 0
     }
-  ) }, d.id)) });
+  ) }, g.id)) });
 }
-function H({
-  node: e,
-  selectedEntryId: t,
-  selectedJogakName: o,
-  onSelect: i,
-  depth: d = 0
+function D({
+  node: o,
+  selectedEntryId: a,
+  selectedJogakName: r,
+  onSelect: t,
+  depth: g = 0
 }) {
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ e(
     "ul",
     {
-      style: {
-        listStyle: "none",
-        margin: 0,
-        padding: `0 0 0 ${d * 12}px`
-      },
-      children: Object.entries(e).map(([r, a]) => /* @__PURE__ */ n("li", { children: "id" in a ? /* @__PURE__ */ n(
-        D,
+      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,
         {
-          meta: a,
-          selectedEntryId: t,
-          selectedJogakName: o,
-          onSelect: i,
+          meta: k,
+          selectedEntryId: a,
+          selectedJogakName: r,
+          onSelect: t,
           indent: 0
         }
-      ) : /* @__PURE__ */ n(
-        Z,
+      ) : /* @__PURE__ */ e(
+        oo,
         {
-          label: r,
-          node: a,
-          selectedEntryId: t,
-          selectedJogakName: o,
-          onSelect: i,
-          depth: d + 1
+          label: n,
+          node: k,
+          selectedEntryId: a,
+          selectedJogakName: r,
+          onSelect: t,
+          depth: g + 1
         }
-      ) }, r))
+      ) }, n))
     }
   );
 }
-function Z({
-  label: e,
-  node: t,
-  selectedEntryId: o,
-  selectedJogakName: i,
-  onSelect: d,
-  depth: r
+function oo({
+  label: o,
+  node: a,
+  selectedEntryId: r,
+  selectedJogakName: t,
+  onSelect: g,
+  depth: n
 }) {
-  const [a, l] = x(!0);
-  return /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ c(
+  const [k, s] = f(!0);
+  return /* @__PURE__ */ j("div", { children: [
+    /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          l((s) => !s);
-        },
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 4,
-          width: "100%",
-          padding: "4px 12px",
-          background: "none",
-          border: "none",
-          cursor: "pointer",
-          fontSize: 12,
-          fontWeight: 600,
-          color: "#6b7280",
-          textTransform: "uppercase",
-          letterSpacing: "0.05em"
+          s((l) => !l);
         },
-        "aria-expanded": a,
+        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,
         children: [
-          /* @__PURE__ */ n("span", { children: a ? "▾" : "▸" }),
-          e
+          /* @__PURE__ */ e("span", { children: k ? "▾" : "▸" }),
+          o
         ]
       }
     ),
-    a && /* @__PURE__ */ n(
-      H,
+    k && /* @__PURE__ */ e(
+      D,
       {
-        node: t,
-        selectedEntryId: o,
-        selectedJogakName: i,
-        onSelect: d,
-        depth: r
+        node: a,
+        selectedEntryId: r,
+        selectedJogakName: t,
+        onSelect: g,
+        depth: n
       }
     )
   ] });
 }
-function D({
-  meta: e,
-  selectedEntryId: t,
-  selectedJogakName: o,
-  onSelect: i,
-  indent: d
+function F({
+  meta: o,
+  selectedEntryId: a,
+  selectedJogakName: r,
+  onSelect: t,
+  indent: g
 }) {
-  const r = e.id === t, [a, l] = x(r);
-  v(() => {
-    r && l(!0);
-  }, [r]);
-  const s = e.title.split("/").pop() ?? e.title, m = 16 + d * 12;
-  return /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ c(
+  const n = o.id === a, [k, s] = f(n);
+  w(() => {
+    n && s(!0);
+  }, [n]);
+  const l = o.title.split("/").pop() ?? o.title, b = 16 + g * 12;
+  return /* @__PURE__ */ j("div", { children: [
+    /* @__PURE__ */ j(
       "button",
       {
         type: "button",
         onClick: () => {
-          if (r)
-            l((p) => !p);
+          if (n)
+            s((i) => !i);
           else {
-            l(!0);
-            const p = e.jogakNames[0];
-            p !== void 0 && i(e.id, p);
+            s(!0);
+            const i = o.jogakNames[0];
+            i !== void 0 && t(o.id, i);
           }
         },
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          width: "100%",
-          padding: `5px 12px 5px ${m}px`,
-          background: r ? "#eff6ff" : "none",
-          border: "none",
-          cursor: "pointer",
-          fontSize: 13,
-          color: r ? "#2563eb" : "#374151",
-          fontWeight: r ? 500 : 400,
-          textAlign: "left"
-        },
-        "aria-expanded": a,
+        className: h(
+          "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,
         children: [
-          /* @__PURE__ */ n("span", { style: { fontSize: 10, flexShrink: 0, lineHeight: 1 }, children: a ? "▾" : "▸" }),
-          s
+          /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: k ? "▾" : "▸" }),
+          l
         ]
       }
     ),
-    a && /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: e.jogakNames.map((p) => {
-      const h = r && p === o;
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+    k && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
+      const u = n && i === r;
+      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: () => {
-            i(e.id, p);
+            t(o.id, i);
           },
-          style: {
-            display: "block",
-            width: "100%",
-            textAlign: "left",
-            padding: `4px 12px 4px ${m + 18}px`,
-            background: h ? "#dbeafe" : "none",
-            border: "none",
-            cursor: "pointer",
-            fontSize: 12,
-            color: h ? "#1d4ed8" : "#6b7280",
-            fontWeight: h ? 500 : 400
-          },
-          "aria-current": h ? "true" : void 0,
-          children: p
+          className: h(
+            "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"
+          ),
+          style: { "--jogak-jogak-pl": `${b + 18}px` },
+          "aria-current": u ? "true" : void 0,
+          children: i
         }
-      ) }, p);
+      ) }, i);
     }) })
   ] });
 }
-function K(e, t) {
-  const o = t == null ? void 0 : t.control, i = (t == null ? void 0 : t.action) !== void 0 && t.action !== !1, d = (t == null ? void 0 : t.type) === "function" || typeof e == "function";
-  return i || d ? "action" : o === "boolean" || typeof e == "boolean" ? "boolean" : o === "number" || o === "range" || typeof e == "number" ? "number" : o === "select" || o === "radio" || (t == null ? void 0 : t.options) !== void 0 && t.options.length > 0 ? "select" : o === "text" || o === "color" || typeof e == "string" ? "text" : "json";
+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 ee({ argKey: e, value: t, argType: o, onArgChange: i }) {
-  switch (K(t, o)) {
+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)) {
     case "boolean":
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ e(
         "input",
         {
           type: "checkbox",
-          checked: t === !0,
-          onChange: (r) => {
-            i(e, r.target.checked);
+          checked: a === !0,
+          onChange: (n) => {
+            t(o, n.target.checked);
           },
-          style: { cursor: "pointer", width: 16, height: 16, accentColor: "#2563eb" }
+          className: "jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"
         }
       );
     case "number":
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ e(
         "input",
         {
           type: "number",
-          value: typeof t == "number" ? t : "",
-          onChange: (r) => {
-            i(e, r.target.valueAsNumber);
+          value: typeof a == "number" ? a : "",
+          onChange: (n) => {
+            t(o, n.target.valueAsNumber);
           },
-          style: W
+          className: R
         }
       );
     case "select": {
-      const r = (o == null ? void 0 : o.options) ?? [];
-      return /* @__PURE__ */ n(
+      const n = (r == null ? void 0 : r.options) ?? [];
+      return /* @__PURE__ */ e(
         "select",
         {
-          value: String(t ?? ""),
-          onChange: (a) => {
-            i(e, a.target.value);
+          value: String(a ?? ""),
+          onChange: (k) => {
+            t(o, k.target.value);
           },
-          style: W,
-          children: r.map((a) => /* @__PURE__ */ n("option", { value: String(a), children: String(a) }, String(a)))
+          className: R,
+          children: n.map((k) => /* @__PURE__ */ e("option", { value: String(k), children: String(k) }, String(k)))
         }
       );
     }
     case "text":
-      return /* @__PURE__ */ n(
+      return /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: typeof t == "string" ? t : String(t ?? ""),
-          onChange: (r) => {
-            i(e, r.target.value);
+          value: typeof a == "string" ? a : String(a ?? ""),
+          onChange: (n) => {
+            t(o, n.target.value);
           },
-          style: W
+          className: R
         }
       );
     case "action":
-      return /* @__PURE__ */ n(
-        "span",
-        {
-          style: {
-            display: "inline-block",
-            padding: "2px 8px",
-            fontSize: 11,
-            fontWeight: 600,
-            color: "#7c3aed",
-            background: "#f5f3ff",
-            border: "1px solid #ddd6fe",
-            borderRadius: 4,
-            fontFamily: "monospace"
-          },
-          children: "(action)"
-        }
-      );
+      return /* @__PURE__ */ e("span", { className: "jogak:inline-block jogak:px-2 jogak:py-0.5 jogak:text-[11px] jogak:font-semibold jogak:text-[var(--jogak-color-violet)] jogak:bg-[var(--jogak-color-violet-bg)] jogak:border jogak:border-[var(--jogak-color-violet-border)] jogak:rounded-[var(--jogak-radius-md)] jogak:font-[family-name:var(--jogak-font-mono)] jogak:leading-none", children: "(action)" });
     case "json":
-      return /* @__PURE__ */ n("code", { style: { fontSize: 12, color: "#6b7280", fontFamily: "monospace" }, children: JSON.stringify(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) });
   }
 }
-const W = {
-  padding: "4px 8px",
-  border: "1px solid #d1d5db",
-  borderRadius: 4,
-  fontSize: 13,
-  width: "100%",
-  maxWidth: 280
-}, A = {
-  padding: "6px 20px",
-  textAlign: "left",
-  color: "#6b7280",
-  fontWeight: 500,
-  fontSize: 12,
-  borderBottom: "1px solid #e5e7eb"
-}, B = {
-  padding: "8px 20px",
-  verticalAlign: "middle",
-  borderBottom: "1px solid #f3f4f6"
-};
-function te({ args: e, argTypes: t, onArgChange: o }) {
-  const d = Array.from(/* @__PURE__ */ new Set([...Object.keys(e), ...Object.keys(t)])).map((r) => [r, e[r]]);
-  return /* @__PURE__ */ c("div", { style: { borderTop: "2px solid #e5e7eb" }, children: [
-    /* @__PURE__ */ n(
-      "div",
-      {
-        style: {
-          padding: "6px 20px",
-          fontSize: 11,
-          fontWeight: 700,
-          color: "#9ca3af",
-          textTransform: "uppercase",
-          letterSpacing: "0.08em",
-          borderBottom: "1px solid #e5e7eb",
-          background: "#f9fafb"
-        },
-        children: "Controls"
-      }
-    ),
-    d.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "12px 20px", color: "#9ca3af", fontSize: 13 }, children: "No args defined" }) : /* @__PURE__ */ c("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
-      /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ c("tr", { children: [
-        /* @__PURE__ */ n("th", { style: A, children: "Name" }),
-        /* @__PURE__ */ n("th", { style: A, children: "Control" }),
-        /* @__PURE__ */ n("th", { style: A, children: "Description" })
+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]]);
+  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: [
+      /* @__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__ */ n("tbody", { children: d.map(([r, a]) => {
-        const l = t[r];
-        return /* @__PURE__ */ c("tr", { children: [
-          /* @__PURE__ */ n(
+      /* @__PURE__ */ e("tbody", { children: g.map(([n, k]) => {
+        const s = a[n];
+        return /* @__PURE__ */ j("tr", { children: [
+          /* @__PURE__ */ e(
             "td",
             {
-              style: {
-                ...B,
-                fontFamily: "monospace",
-                fontSize: 12,
-                color: "#374151",
-                whiteSpace: "nowrap"
-              },
-              children: r
+              className: h(
+                $,
+                "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"
+              ),
+              children: n
             }
           ),
-          /* @__PURE__ */ n("td", { style: B, children: /* @__PURE__ */ n(
-            ee,
+          /* @__PURE__ */ e("td", { className: $, children: /* @__PURE__ */ e(
+            eo,
             {
-              argKey: r,
-              value: a,
-              argType: l,
-              onArgChange: o
+              argKey: n,
+              value: k,
+              argType: s,
+              onArgChange: r
             }
           ) }),
-          /* @__PURE__ */ n("td", { style: { ...B, color: "#9ca3af" }, children: (l == null ? void 0 : l.description) ?? "" })
-        ] }, r);
+          /* @__PURE__ */ e("td", { className: h($, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (s == null ? void 0 : s.description) ?? "" })
+        ] }, n);
       }) })
     ] })
   ] });
 }
-function ne(e) {
-  if (e.length === 0) return "()";
+function to(o) {
+  if (o.length === 0) return "()";
   try {
-    return e.map((t) => {
-      var o;
-      if (t === null) return "null";
-      if (t === void 0) return "undefined";
-      if (typeof t == "function") return "[Function]";
-      if (typeof t == "object") {
-        const i = ((o = t.constructor) == null ? void 0 : o.name) ?? "Object";
-        return i !== "Object" && i !== "Array" ? `[${i}]` : JSON.stringify(t);
+    return o.map((a) => {
+      var r;
+      if (a === null) return "null";
+      if (a === void 0) return "undefined";
+      if (typeof a == "function") return "[Function]";
+      if (typeof a == "object") {
+        const t = ((r = a.constructor) == null ? void 0 : r.name) ?? "Object";
+        return t !== "Object" && t !== "Array" ? `[${t}]` : JSON.stringify(a);
       }
-      return JSON.stringify(t);
+      return JSON.stringify(a);
     }).join(", ");
   } catch {
     return "[unserializable]";
   }
 }
-function oe(e) {
-  const t = new Date(e), o = t.getHours().toString().padStart(2, "0"), i = t.getMinutes().toString().padStart(2, "0"), d = t.getSeconds().toString().padStart(2, "0"), r = t.getMilliseconds().toString().padStart(3, "0");
-  return `${o}:${i}:${d}.${r}`;
+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 re() {
-  const [e, t] = x(() => z.getLogs());
-  return v(() => z.subscribe(t), []), /* @__PURE__ */ c("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ c(
-      "div",
-      {
-        style: {
-          padding: "6px 20px",
-          fontSize: 11,
-          fontWeight: 700,
-          color: "#9ca3af",
-          textTransform: "uppercase",
-          letterSpacing: "0.08em",
-          borderBottom: "1px solid #e5e7eb",
-          background: "#f9fafb",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          flexShrink: 0
-        },
-        children: [
-          /* @__PURE__ */ c("span", { children: [
-            "Actions ",
-            e.length > 0 && `(${e.length.toString()})`
-          ] }),
-          /* @__PURE__ */ n(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                z.clear();
-              },
-              disabled: e.length === 0,
-              style: {
-                fontSize: 10,
-                fontWeight: 600,
-                padding: "2px 8px",
-                border: "1px solid #d1d5db",
-                borderRadius: 3,
-                background: "#fff",
-                color: e.length === 0 ? "#9ca3af" : "#374151",
-                cursor: e.length === 0 ? "default" : "pointer",
-                textTransform: "none",
-                letterSpacing: 0
-              },
-              children: "Clear"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ n("div", { style: { flex: 1, overflow: "auto" }, children: e.length === 0 ? /* @__PURE__ */ n(
-      "div",
-      {
-        style: {
-          padding: "12px 20px",
-          color: "#9ca3af",
-          fontSize: 13
-        },
-        children: "함수 prop이 호출되면 여기에 기록됩니다"
-      }
-    ) : /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0, fontFamily: "monospace", fontSize: 12 }, children: e.map((o) => /* @__PURE__ */ c(
+function go() {
+  const [o, a] = f(() => S.getLogs());
+  w(() => S.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: [
+      /* @__PURE__ */ j("span", { children: [
+        "Actions ",
+        o.length > 0 && `(${o.length.toString()})`
+      ] }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            S.clear();
+          },
+          disabled: r,
+          className: h(
+            "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"
+          ),
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__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",
       {
-        style: {
-          display: "flex",
-          alignItems: "baseline",
-          gap: 10,
-          padding: "6px 20px",
-          borderBottom: "1px solid #f3f4f6"
-        },
+        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__ */ n("span", { style: { color: "#9ca3af", fontSize: 11, minWidth: 92 }, children: oe(o.timestamp) }),
-          /* @__PURE__ */ n("span", { style: { color: "#7c3aed", fontWeight: 600 }, children: o.name }),
-          /* @__PURE__ */ c("span", { style: { color: "#374151", wordBreak: "break-all", flex: 1 }, 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-violet)] jogak:font-semibold", children: t.name }),
+          /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
             "(",
-            ne(o.args),
+            to(t.args),
             ")"
           ] })
         ]
       },
-      o.id
+      t.id
     )) }) })
   ] });
 }
-const N = {
+const U = {
   mobile: 375,
   tablet: 768,
   desktop: "none"
-}, ie = {
+}, so = {
   mobile: "Mobile",
   tablet: "Tablet",
   desktop: "Desktop"
-}, M = {
-  white: { background: "#ffffff" },
-  dark: { background: "#1f2937" },
+}, O = {
+  white: {
+    "--jogak-canvas-bg": "#ffffff",
+    "--jogak-canvas-bg-image": "none",
+    "--jogak-canvas-bg-size": "auto",
+    "--jogak-canvas-bg-position": "0 0"
+  },
+  dark: {
+    "--jogak-canvas-bg": "#1f2937",
+    "--jogak-canvas-bg-image": "none",
+    "--jogak-canvas-bg-size": "auto",
+    "--jogak-canvas-bg-position": "0 0"
+  },
   transparent: {
-    backgroundImage: [
-      "linear-gradient(45deg, #e2e8f0 25%, transparent 25%)",
-      "linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)",
-      "linear-gradient(45deg, transparent 75%, #e2e8f0 75%)",
-      "linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)"
-    ].join(", "),
-    backgroundSize: "16px 16px",
-    backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
-    backgroundColor: "#ffffff"
+    "--jogak-canvas-bg": "#ffffff",
+    "--jogak-canvas-bg-image": "linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)",
+    "--jogak-canvas-bg-size": "16px 16px",
+    "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
   }
-}, I = 320;
-function de(e) {
-  return L[e] ?? L.vsDark;
+}, 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;
 }
-function le({
-  entryId: e,
-  jogakName: t,
-  overrideArgs: o,
-  onArgChange: i,
-  onReset: d,
-  codeTheme: r,
-  onResolveJogak: a
+function lo({
+  entryId: o,
+  jogakName: a,
+  overrideArgs: r,
+  onArgChange: t,
+  onReset: g,
+  codeTheme: n,
+  onResolveJogak: k
 }) {
-  const l = G(e), [s, m] = x("desktop"), [p, h] = x("white"), [S, b] = x("controls"), y = de(r);
-  return l.status === "unknown" ? /* @__PURE__ */ c("div", { "data-testid": "preview-not-found", style: { padding: 24, color: "#ef4444" }, children: [
-    "Entry not found: ",
-    e
-  ] }) : l.status === "error" ? /* @__PURE__ */ c(
+  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(
+    "div",
+    {
+      "data-testid": "preview-not-found",
+      className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]",
+      children: [
+        "Entry not found: ",
+        o
+      ]
+    }
+  ) : s.status === "error" ? /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-error",
-      style: {
-        padding: 24,
-        color: "#b91c1c",
-        background: "#fef2f2",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        gap: 12,
-        alignItems: "flex-start"
-      },
+      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", { style: { fontWeight: 600 }, children: [
+        /* @__PURE__ */ j("div", { className: "jogak:font-semibold", children: [
           "Failed to load entry: ",
-          e
+          o
         ] }),
-        /* @__PURE__ */ n(
-          "pre",
-          {
-            style: {
-              margin: 0,
-              padding: 12,
-              background: "#fff",
-              border: "1px solid #fecaca",
-              borderRadius: 6,
-              fontSize: 12,
-              whiteSpace: "pre-wrap",
-              maxWidth: "100%"
-            },
-            children: l.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: s.error.message })
       ]
     }
-  ) : l.status === "loading" ? /* @__PURE__ */ n(
-    ae,
+  ) : s.status === "loading" ? /* @__PURE__ */ e(
+    jo,
     {
-      meta: l.meta,
-      jogakName: t,
-      viewport: s,
-      bgMode: p,
-      onViewportChange: m,
-      onBgModeChange: h
+      meta: s.meta,
+      jogakName: a,
+      viewport: l,
+      bgMode: i,
+      onViewportChange: b,
+      onBgModeChange: u
     }
-  ) : /* @__PURE__ */ n(
-    se,
+  ) : /* @__PURE__ */ e(
+    io,
     {
-      entry: l.entry,
-      jogakName: t,
-      overrideArgs: o,
-      onArgChange: i,
-      onReset: d,
-      onResolveJogak: a,
-      viewport: s,
-      bgMode: p,
-      bottomTab: S,
-      onViewportChange: m,
-      onBgModeChange: h,
-      onBottomTabChange: b,
-      prismTheme: y
+      entry: s.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
     }
   );
 }
-function ae({
-  meta: e,
-  jogakName: t,
-  viewport: o,
-  bgMode: i,
-  onViewportChange: d,
-  onBgModeChange: r
+function jo({
+  meta: o,
+  jogakName: a,
+  viewport: r,
+  bgMode: t,
+  onViewportChange: g,
+  onBgModeChange: n
 }) {
-  const a = t ?? e.jogakNames[0] ?? "...", l = N[o];
-  return /* @__PURE__ */ c(
+  const k = a ?? o.jogakNames[0] ?? "...", s = U[r];
+  return /* @__PURE__ */ j(
     "div",
     {
       "data-testid": "preview-loading",
-      style: { display: "flex", flexDirection: "column", height: "100%" },
+      className: "jogak:flex jogak:flex-col jogak:h-full",
       children: [
-        /* @__PURE__ */ n(
-          J,
+        /* @__PURE__ */ e(
+          W,
           {
-            title: e.title,
-            jogakName: a,
-            viewport: o,
-            bgMode: i,
-            onViewportChange: d,
-            onBgModeChange: r,
+            title: o.title,
+            jogakName: k,
+            viewport: r,
+            bgMode: t,
+            onViewportChange: g,
+            onBgModeChange: n,
             showReset: !1,
             onReset: () => {
             }
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ e(
           "div",
           {
-            style: {
-              flex: 1,
-              minHeight: I,
-              overflow: "auto",
-              ...M[i]
-            },
-            children: /* @__PURE__ */ n(
+            className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${L}`,
+            style: O[t],
+            children: /* @__PURE__ */ e(
               "div",
               {
+                className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
                 style: {
-                  maxWidth: l === "none" ? "100%" : l,
-                  margin: "0 auto",
-                  padding: 24
+                  "--jogak-canvas-mw": s === "none" ? "100%" : `${s}px`
                 },
-                children: /* @__PURE__ */ c(
-                  "div",
-                  {
-                    style: {
-                      border: "1px dashed #e5e7eb",
-                      borderRadius: 8,
-                      padding: 16,
-                      minHeight: I - 64,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      color: "#9ca3af",
-                      fontSize: 13,
-                      background: "linear-gradient(90deg, rgba(229,231,235,0) 0%, rgba(229,231,235,0.45) 50%, rgba(229,231,235,0) 100%)",
-                      backgroundSize: "200% 100%",
-                      animation: "jogakSkeleton 1.4s ease-in-out infinite"
-                    },
-                    children: [
-                      "Loading ",
-                      e.title,
-                      "…"
-                    ]
-                  }
-                )
+                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,
+                  "…"
+                ] })
               }
             )
           }
-        ),
-        /* @__PURE__ */ n("style", { children: "@keyframes jogakSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }" })
+        )
       ]
     }
   );
 }
-function se({
-  entry: e,
-  jogakName: t,
-  overrideArgs: o,
-  onArgChange: i,
-  onReset: d,
-  onResolveJogak: r,
-  viewport: a,
-  bgMode: l,
-  bottomTab: s,
-  onViewportChange: m,
-  onBgModeChange: p,
-  onBottomTabChange: h,
-  prismTheme: S
+function io({
+  entry: o,
+  jogakName: a,
+  overrideArgs: r,
+  onArgChange: t,
+  onReset: g,
+  onResolveJogak: n,
+  viewport: k,
+  bgMode: s,
+  bottomTab: l,
+  onViewportChange: b,
+  onBgModeChange: i,
+  onBottomTabChange: u,
+  prismTheme: v
 }) {
-  var $;
-  const b = t ?? (($ = e.jogaks[0]) == null ? void 0 : $.name) ?? null;
-  if (v(() => {
-    t === null && b !== null && r !== void 0 && r(e.id, b);
-  }, [t, b, e.id, r]), b === null)
-    return /* @__PURE__ */ c("div", { style: { padding: 24, color: "#ef4444" }, children: [
+  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)
+    return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Entry has no jogaks: ",
-      e.id
+      o.id
     ] });
-  const y = e.jogaks.find((k) => k.name === b);
-  if (y === void 0)
-    return /* @__PURE__ */ c("div", { style: { padding: 24, color: "#ef4444" }, children: [
+  const x = o.jogaks.find((N) => N.name === m);
+  if (x === void 0)
+    return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
       "Jogak not found: ",
-      b
+      m
     ] });
-  const u = { ...y.args ?? {}, ...o }, g = {
-    ...e.meta.argTypes ?? {},
-    ...y.argTypes ?? {}
-  }, P = Object.keys(o).length > 0, O = N[a];
-  return /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ n(
-      J,
+  const d = { ...x.args ?? {}, ...r }, p = {
+    ...o.meta.argTypes ?? {},
+    ...x.argTypes ?? {}
+  }, G = Object.keys(r).length > 0, E = U[k];
+  return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
+    /* @__PURE__ */ e(
+      W,
       {
-        title: e.title,
-        jogakName: y.name,
-        viewport: a,
-        bgMode: l,
-        onViewportChange: m,
-        onBgModeChange: p,
-        showReset: P,
-        onReset: d
+        title: o.title,
+        jogakName: x.name,
+        viewport: k,
+        bgMode: s,
+        onViewportChange: b,
+        onBgModeChange: i,
+        showReset: G,
+        onReset: g
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ e(
       "div",
       {
-        style: {
-          flex: 1,
-          minHeight: I,
-          overflow: "auto",
-          ...M[l]
-        },
-        children: /* @__PURE__ */ n(
+        className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${L}`,
+        style: O[s],
+        children: /* @__PURE__ */ e(
           "div",
           {
             "data-jogak-content": !0,
+            className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
             style: {
-              maxWidth: O === "none" ? "100%" : O,
-              margin: "0 auto",
-              padding: 24
+              "--jogak-canvas-mw": E === "none" ? "100%" : `${E}px`
             },
-            children: /* @__PURE__ */ n(
-              ce,
+            children: /* @__PURE__ */ e(
+              co,
               {
-                entry: e,
-                args: u,
-                source: e.source,
-                theme: S
+                entry: o,
+                args: d,
+                source: o.source,
+                theme: v
               },
-              `${e.id}/${y.name}`
+              `${o.id}/${x.name}`
             )
           }
         )
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ j(
       "div",
       {
-        style: {
-          height: 260,
-          flexShrink: 0,
-          display: "flex",
-          flexDirection: "column",
-          borderTop: "2px solid #e5e7eb"
-        },
+        "data-testid": "bottom-panel",
+        className: "jogak:h-[260px] jogak:shrink-0 jogak:flex jogak:flex-col jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ e(
             "div",
             {
               role: "tablist",
-              style: {
-                display: "flex",
-                gap: 4,
-                padding: "4px 12px 0",
-                background: "#fff",
-                borderBottom: "1px solid #e5e7eb",
-                flexShrink: 0
-              },
-              children: ["controls", "actions"].map((k) => {
-                const C = s === k;
-                return /* @__PURE__ */ n(
+              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;
+                return /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
                     role: "tab",
-                    "aria-selected": C,
+                    "aria-selected": P,
                     onClick: () => {
-                      h(k);
+                      u(N);
                     },
-                    style: {
-                      padding: "6px 14px",
-                      fontSize: 12,
-                      fontWeight: C ? 600 : 500,
-                      color: C ? "#111827" : "#6b7280",
-                      background: "transparent",
-                      border: "none",
-                      borderBottom: C ? "2px solid #2563eb" : "2px solid transparent",
-                      marginBottom: -1,
-                      cursor: "pointer",
-                      textTransform: "capitalize"
-                    },
-                    children: k
+                    className: h(
+                      "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"
+                    ),
+                    children: N
                   },
-                  k
+                  N
                 );
               })
             }
           ),
-          /* @__PURE__ */ n("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: s === "controls" ? /* @__PURE__ */ n(
-            te,
+          /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: l === "controls" ? /* @__PURE__ */ e(
+            ro,
             {
-              args: u,
-              argTypes: g,
-              onArgChange: i
+              args: d,
+              argTypes: p,
+              onArgChange: t
             }
-          ) : /* @__PURE__ */ n(re, {}) })
+          ) : /* @__PURE__ */ e(go, {}) })
         ]
       }
     )
   ] });
 }
-function J({
-  title: e,
-  jogakName: t,
-  viewport: o,
-  bgMode: i,
-  onViewportChange: d,
-  onBgModeChange: r,
-  showReset: a,
-  onReset: l
+function W({
+  title: o,
+  jogakName: a,
+  viewport: r,
+  bgMode: t,
+  onViewportChange: g,
+  onBgModeChange: n,
+  showReset: k,
+  onReset: s
 }) {
-  return /* @__PURE__ */ c(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-        padding: "7px 14px",
-        borderBottom: "1px solid #e5e7eb",
-        background: "#fff",
-        flexShrink: 0
+  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 })
+    ] }),
+    /* @__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(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          g(l);
+        },
+        "aria-pressed": r === l,
+        className: h(
+          "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"
+        ),
+        children: so[l]
       },
-      children: [
-        /* @__PURE__ */ c("div", { style: { flex: 1, fontSize: 13 }, children: [
-          /* @__PURE__ */ n("span", { style: { color: "#9ca3af" }, children: e }),
-          /* @__PURE__ */ n("span", { style: { color: "#d1d5db", margin: "0 6px" }, children: "/" }),
-          /* @__PURE__ */ n("span", { style: { color: "#111827", fontWeight: 600 }, children: t })
-        ] }),
-        /* @__PURE__ */ n(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 2,
-              background: "#f3f4f6",
-              borderRadius: 6,
-              padding: 2
-            },
-            children: ["mobile", "tablet", "desktop"].map((s) => /* @__PURE__ */ n(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  d(s);
-                },
-                "aria-pressed": o === s,
-                style: {
-                  padding: "3px 9px",
-                  fontSize: 12,
-                  border: "none",
-                  borderRadius: 4,
-                  cursor: "pointer",
-                  background: o === s ? "#fff" : "transparent",
-                  color: o === s ? "#111827" : "#6b7280",
-                  fontWeight: o === s ? 600 : 400,
-                  boxShadow: o === s ? "0 1px 2px rgba(0,0,0,0.08)" : "none",
-                  transition: "all 0.1s"
-                },
-                children: ie[s]
-              },
-              s
-            ))
-          }
+      l
+    )) }),
+    /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((l) => /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          n(l);
+        },
+        "aria-pressed": t === l,
+        "aria-label": `${l} background`,
+        className: h(
+          "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)]"
         ),
-        /* @__PURE__ */ n("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: ["white", "dark", "transparent"].map((s) => /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              r(s);
-            },
-            "aria-pressed": i === s,
-            "aria-label": `${s} background`,
-            style: {
-              width: 20,
-              height: 20,
-              borderRadius: 4,
-              border: i === s ? "2px solid #2563eb" : "2px solid #d1d5db",
-              cursor: "pointer",
-              padding: 0,
-              flexShrink: 0,
-              ...M[s]
-            }
-          },
-          s
-        )) }),
-        a && /* @__PURE__ */ n(
-          "button",
-          {
-            type: "button",
-            onClick: l,
-            style: {
-              padding: "3px 10px",
-              fontSize: 12,
-              border: "1px solid #d1d5db",
-              borderRadius: 4,
-              background: "#fff",
-              cursor: "pointer",
-              color: "#374151"
-            },
-            children: "Reset"
-          }
-        )
-      ]
-    }
-  );
+        style: O[l]
+      },
+      l
+    )) }),
+    k && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: s,
+        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 ce({ entry: e, args: t, source: o, theme: i }) {
-  const d = V(null), [r, a] = x(!1);
-  return v(() => {
-    const l = d.current;
-    if (l !== null)
-      return j.render(e, t, l), () => {
-        j.unmount(l);
+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);
       };
-  }, [e]), v(() => {
-    const l = d.current;
-    l !== null && j.render(e, t, l);
-  }, [e, t]), /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ n(
+  }, [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: d,
+          ref: g,
           "data-testid": "preview-content",
-          style: {
-            border: "1px dashed #e5e7eb",
-            borderRadius: 8,
-            padding: 16,
-            paddingBottom: 36
-          }
+          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__ */ n(
+      /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: () => {
-            a((l) => !l);
-          },
-          "aria-pressed": r,
-          "aria-label": r ? "Hide source code" : "Show source code",
-          style: {
-            position: "absolute",
-            bottom: 8,
-            right: 8,
-            padding: "4px 9px",
-            fontSize: 11,
-            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-            fontWeight: 600,
-            letterSpacing: "0.02em",
-            background: r ? "#2563eb" : "#1e293b",
-            color: "#fff",
-            border: "none",
-            borderRadius: 5,
-            cursor: "pointer",
-            boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
-            transition: "background 0.15s"
+            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: "</>"
         }
       )
     ] }),
-    r && /* @__PURE__ */ n(
-      "div",
-      {
-        style: {
-          marginTop: 8,
-          borderRadius: 8,
-          overflow: "hidden",
-          height: 320,
-          boxShadow: "0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.12)"
-        },
-        children: /* @__PURE__ */ n(pe, { source: o, theme: i })
-      }
-    )
+    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 pe({ source: e, theme: t }) {
-  const [o, i] = x(!1), d = t.plain.backgroundColor ?? "#1e293b";
-  return e === void 0 ? /* @__PURE__ */ n(
+function po({ source: o, theme: a }) {
+  const [r, t] = f(!1), g = a.plain.backgroundColor ?? "#1e293b";
+  return o === void 0 ? /* @__PURE__ */ e(
     "div",
     {
-      style: {
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background: d,
-        color: "#94a3b8",
-        fontSize: 13
-      },
+      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 },
       children: "Source not available"
     }
-  ) : /* @__PURE__ */ c("div", { style: { position: "relative", height: "100%" }, children: [
-    /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
+    /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          navigator.clipboard.writeText(e).then(() => {
-            i(!0), setTimeout(() => {
-              i(!1);
+          navigator.clipboard.writeText(o).then(() => {
+            t(!0), setTimeout(() => {
+              t(!1);
             }, 2e3);
           });
         },
-        style: {
-          position: "absolute",
-          top: 10,
-          right: 12,
-          zIndex: 1,
-          padding: "3px 9px",
-          fontSize: 11,
-          background: "rgba(255,255,255,0.1)",
-          color: "#e2e8f0",
-          border: "1px solid rgba(255,255,255,0.18)",
-          borderRadius: 4,
-          cursor: "pointer"
-        },
-        children: o ? "✓ Copied" : "Copy"
+        className: "jogak:absolute jogak:top-[10px] jogak:right-3 jogak:z-[1] jogak:px-[9px] jogak:py-[3px] jogak:text-[11px] jogak:bg-[rgba(255,255,255,0.1)] jogak:text-[#e2e8f0] jogak:border jogak:border-[rgba(255,255,255,0.18)] jogak:rounded-[var(--jogak-radius-md)] jogak:cursor-pointer jogak:leading-none",
+        children: r ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ n(Q, { code: e.trim(), language: "tsx", theme: t, children: ({ style: a, tokens: l, getLineProps: s, getTokenProps: m }) => /* @__PURE__ */ n(
+    /* @__PURE__ */ e(Z, { code: o.trim(), language: "tsx", theme: a, children: ({ style: k, tokens: s, getLineProps: l, getTokenProps: b }) => /* @__PURE__ */ e(
       "pre",
       {
-        style: {
-          ...a,
-          margin: 0,
-          padding: "12px 0",
-          fontSize: 12.5,
-          lineHeight: 1.7,
-          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-          height: "100%",
-          boxSizing: "border-box",
-          overflow: "auto"
-        },
-        children: l.map((p, h) => /* @__PURE__ */ c(
+        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(
           "div",
           {
-            ...s({ line: p }),
-            style: {
-              ...s({ line: p }).style,
-              display: "flex",
-              paddingRight: 24
-            },
+            ...l({ line: i }),
+            className: "jogak:flex jogak:pr-6",
+            style: l({ line: i }).style,
             children: [
-              /* @__PURE__ */ n(
-                "span",
-                {
-                  style: {
-                    userSelect: "none",
-                    minWidth: 40,
-                    paddingLeft: 14,
-                    paddingRight: 14,
-                    textAlign: "right",
-                    color: "rgba(148,163,184,0.45)",
-                    flexShrink: 0
-                  },
-                  children: h + 1
-                }
-              ),
-              /* @__PURE__ */ n("span", { children: p.map((S, b) => /* @__PURE__ */ n("span", { ...m({ token: S }) }, b)) })
+              /* @__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)) })
             ]
           },
-          h
+          u
         ))
       }
     ) })
   ] });
 }
-function E() {
+function M() {
   if (typeof window > "u") return null;
-  const e = new URLSearchParams(window.location.search), t = e.get("entry");
-  if (t === null) return null;
-  const o = e.get("jogak");
-  return { entryId: t, jogakName: o };
+  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 fe(e, t) {
-  const o = new URLSearchParams();
-  o.set("entry", e), o.set("jogak", t), window.history.pushState({}, "", `?${o.toString()}`);
+function uo(o, a) {
+  const r = new URLSearchParams();
+  r.set("entry", o), r.set("jogak", a), window.history.pushState({}, "", `?${r.toString()}`);
 }
-function me({
-  entries: e,
-  metas: t,
-  codeTheme: o = "vsDark"
+function vo({
+  entries: o,
+  metas: a,
+  codeTheme: r = "vsDark"
 } = {}) {
-  const i = w(() => {
-    if (e !== void 0) {
-      t !== void 0 && console.warn(
+  const t = y(() => {
+    if (o !== void 0) {
+      a !== void 0 && console.warn(
         "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
       );
-      const f = new U();
-      for (const u of e) f.register(u);
-      return f;
+      const c = new I();
+      for (const d of o) c.register(d);
+      return c;
     }
-    if (t !== void 0)
-      for (const f of t) F.registerMeta(f);
-    return F;
-  }, [e, t]), d = w(() => E(), []), [r, a] = x(
-    (d == null ? void 0 : d.entryId) ?? null
-  ), [l, s] = x(
-    (d == null ? void 0 : d.jogakName) ?? null
-  ), [m, p] = x({});
-  v(() => {
-    const f = () => {
-      const u = E();
-      u !== null ? (a(u.entryId), s(u.jogakName), p({})) : (a(null), s(null));
+    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));
     };
-    return window.addEventListener("popstate", f), () => {
-      window.removeEventListener("popstate", f);
+    return window.addEventListener("popstate", c), () => {
+      window.removeEventListener("popstate", c);
     };
   }, []);
-  const h = R((f, u) => {
-    a(f), s(u), p({}), fe(f, u);
-  }, []), S = R((f, u) => {
-    if (a((g) => g === f ? f : g), s((g) => g ?? u), typeof window < "u") {
-      const g = new URLSearchParams(window.location.search);
-      g.get("entry") === f && g.get("jogak") === null && (g.set("jogak", u), window.history.replaceState({}, "", `?${g.toString()}`));
+  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()}`));
     }
-  }, []), b = R((f, u) => {
-    p((g) => ({ ...g, [f]: u }));
-  }, []), y = R(() => {
-    p({});
+  }, []), m = C((c, d) => {
+    i((p) => ({ ...p, [c]: d }));
+  }, []), x = C(() => {
+    i({});
   }, []);
-  return /* @__PURE__ */ n(T, { registry: i, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ e(X, { registry: t, children: /* @__PURE__ */ j(
     "div",
     {
       "data-jogak-shell": !0,
-      style: {
-        display: "grid",
-        gridTemplateColumns: "260px 1fr",
-        height: "100dvh",
-        overflow: "hidden"
-      },
+      className: "jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",
       children: [
-        /* @__PURE__ */ n(
-          Y,
+        /* @__PURE__ */ e(
+          K,
           {
-            selectedEntryId: r,
-            selectedJogakName: l,
-            onSelect: h
+            selectedEntryId: n,
+            selectedJogakName: s,
+            onSelect: u
           }
         ),
-        /* @__PURE__ */ n("main", { style: { overflow: "hidden", minHeight: 0 }, children: r !== null ? /* @__PURE__ */ n(
-          le,
+        /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: n !== null ? /* @__PURE__ */ e(
+          lo,
           {
-            entryId: r,
-            jogakName: l,
-            overrideArgs: m,
-            onArgChange: b,
-            onReset: y,
-            codeTheme: o,
-            onResolveJogak: S
+            entryId: n,
+            jogakName: s,
+            overrideArgs: b,
+            onArgChange: m,
+            onReset: x,
+            codeTheme: r,
+            onResolveJogak: v
           }
-        ) : /* @__PURE__ */ n(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100%",
-              color: "#9ca3af"
-            },
-            children: "Select a component from the sidebar"
-          }
-        ) })
+        ) : /* @__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 ye() {
-  const e = q(), t = w(() => e.getAll(), [e]), o = w(() => e.getTree(), [e]), i = w(
-    () => (d) => e.search(d),
-    [e]
+function No() {
+  const o = Y(), a = y(() => o.getAll(), [o]), r = y(() => o.getTree(), [o]), t = y(
+    () => (g) => o.search(g),
+    [o]
   );
-  return { entries: t, tree: o, search: i };
+  return { entries: a, tree: r, search: t };
 }
 export {
-  re as Actions,
-  te as Controls,
-  me as JogakApp,
-  le as Preview,
-  Y as Sidebar,
-  ye as useRegistry
+  go as Actions,
+  ro as Controls,
+  vo as JogakApp,
+  lo as Preview,
+  K as Sidebar,
+  No as useRegistry
 };