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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/README.md +47 -24
  3. package/dist/app/App.d.ts +10 -5
  4. package/dist/components/Preview/IframeMount.d.ts +17 -24
  5. package/dist/components/Preview/ShadowMount.d.ts +13 -14
  6. package/dist/components/Preview/index.d.ts +10 -5
  7. package/dist/host/index.d.ts +12 -4
  8. package/dist/host/index.js +1 -1
  9. package/dist/host/index.mjs +30 -30
  10. package/dist/index.js +1 -2
  11. package/dist/index.mjs +328 -324
  12. package/package.json +3 -3
  13. package/src/app/App.tsx +12 -5
  14. package/src/app/main.tsx +15 -7
  15. package/src/components/Preview/IframeMount.tsx +55 -42
  16. package/src/components/Preview/ShadowMount.tsx +15 -59
  17. package/src/components/Preview/index.tsx +35 -14
  18. package/src/vite-env.d.ts +7 -2
package/dist/index.mjs CHANGED
@@ -1,20 +1,20 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
- import { useState as m, useEffect as b, useRef as _, useMemo as C, useCallback as R } from "react";
3
- import { defaultActionChannel as A, ComponentRegistry as X, defaultRegistry as W } from "@jogak/core";
1
+ import { jsxs as j, jsx as e } from "react/jsx-runtime";
2
+ import { useState as m, useEffect as x, useRef as A, useMemo as R, useCallback as _ } from "react";
3
+ import { defaultActionChannel as $, ComponentRegistry as X, defaultRegistry as z } from "@jogak/core";
4
4
  import { useRegistryMeta as Y, useEntry as Z, reactAdapter as S, JogakProvider as K, useRegistry as T } from "@jogak/react";
5
- import { themes as z, Highlight as oo } from "prism-react-renderer";
5
+ import { themes as D, Highlight as oo } from "prism-react-renderer";
6
6
  import { createPortal as ao } from "react-dom";
7
- function F(o) {
7
+ function H(o) {
8
8
  var a, r, t = "";
9
9
  if (typeof o == "string" || typeof o == "number") t += o;
10
10
  else if (typeof o == "object") if (Array.isArray(o)) {
11
- var l = o.length;
12
- for (a = 0; a < l; a++) o[a] && (r = F(o[a])) && (t && (t += " "), t += r);
11
+ var s = o.length;
12
+ for (a = 0; a < s; a++) o[a] && (r = H(o[a])) && (t && (t += " "), t += r);
13
13
  } else for (r in o) o[r] && (t && (t += " "), t += r);
14
14
  return t;
15
15
  }
16
- function v() {
17
- for (var o, a, r = 0, t = "", l = arguments.length; r < l; r++) (o = arguments[r]) && (a = F(o)) && (t && (t += " "), t += a);
16
+ function w() {
17
+ for (var o, a, r = 0, t = "", s = arguments.length; r < s; r++) (o = arguments[r]) && (a = H(o)) && (t && (t += " "), t += a);
18
18
  return t;
19
19
  }
20
20
  function eo({
@@ -22,8 +22,8 @@ function eo({
22
22
  selectedJogakName: a,
23
23
  onSelect: r
24
24
  }) {
25
- const [t, l] = m(""), { metaTree: n, searchMeta: s } = Y(), k = t.trim().length > 0 ? s(t) : null;
26
- return /* @__PURE__ */ c(
25
+ const [t, s] = m(""), { metaTree: n, searchMeta: g } = Y(), l = t.trim().length > 0 ? g(t) : null;
26
+ return /* @__PURE__ */ j(
27
27
  "aside",
28
28
  {
29
29
  "data-testid": "sidebar",
@@ -35,23 +35,23 @@ function eo({
35
35
  type: "search",
36
36
  placeholder: "Search components...",
37
37
  value: t,
38
- onChange: (g) => {
39
- l(g.target.value);
38
+ onChange: (k) => {
39
+ s(k.target.value);
40
40
  },
41
41
  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)]",
42
42
  "aria-label": "Search components"
43
43
  }
44
44
  ) }),
45
- /* @__PURE__ */ e("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: k !== null ? /* @__PURE__ */ e(
45
+ /* @__PURE__ */ e("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: l !== null ? /* @__PURE__ */ e(
46
46
  ro,
47
47
  {
48
- metas: k,
48
+ metas: l,
49
49
  selectedEntryId: o,
50
50
  selectedJogakName: a,
51
51
  onSelect: r
52
52
  }
53
53
  ) : /* @__PURE__ */ e(
54
- H,
54
+ q,
55
55
  {
56
56
  node: n,
57
57
  selectedEntryId: o,
@@ -69,33 +69,33 @@ function ro({
69
69
  selectedJogakName: r,
70
70
  onSelect: t
71
71
  }) {
72
- return o.length === 0 ? /* @__PURE__ */ e("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
73
- U,
72
+ return o.length === 0 ? /* @__PURE__ */ e("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
73
+ G,
74
74
  {
75
- meta: l,
75
+ meta: s,
76
76
  selectedEntryId: a,
77
77
  selectedJogakName: r,
78
78
  onSelect: t,
79
79
  indent: 0
80
80
  }
81
- ) }, l.id)) });
81
+ ) }, s.id)) });
82
82
  }
83
- function H({
83
+ function q({
84
84
  node: o,
85
85
  selectedEntryId: a,
86
86
  selectedJogakName: r,
87
87
  onSelect: t,
88
- depth: l = 0
88
+ depth: s = 0
89
89
  }) {
90
90
  return /* @__PURE__ */ e(
91
91
  "ul",
92
92
  {
93
93
  className: "jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",
94
- style: { "--jogak-tree-pl": `${l * 12}px` },
95
- children: Object.entries(o).map(([n, s]) => /* @__PURE__ */ e("li", { children: "id" in s ? /* @__PURE__ */ e(
96
- U,
94
+ style: { "--jogak-tree-pl": `${s * 12}px` },
95
+ children: Object.entries(o).map(([n, g]) => /* @__PURE__ */ e("li", { children: "id" in g ? /* @__PURE__ */ e(
96
+ G,
97
97
  {
98
- meta: s,
98
+ meta: g,
99
99
  selectedEntryId: a,
100
100
  selectedJogakName: r,
101
101
  onSelect: t,
@@ -105,11 +105,11 @@ function H({
105
105
  to,
106
106
  {
107
107
  label: n,
108
- node: s,
108
+ node: g,
109
109
  selectedEntryId: a,
110
110
  selectedJogakName: r,
111
111
  onSelect: t,
112
- depth: l + 1
112
+ depth: s + 1
113
113
  }
114
114
  ) }, n))
115
115
  }
@@ -120,79 +120,79 @@ function to({
120
120
  node: a,
121
121
  selectedEntryId: r,
122
122
  selectedJogakName: t,
123
- onSelect: l,
123
+ onSelect: s,
124
124
  depth: n
125
125
  }) {
126
- const [s, k] = m(!0);
127
- return /* @__PURE__ */ c("div", { children: [
128
- /* @__PURE__ */ c(
126
+ const [g, l] = m(!0);
127
+ return /* @__PURE__ */ j("div", { children: [
128
+ /* @__PURE__ */ j(
129
129
  "button",
130
130
  {
131
131
  type: "button",
132
132
  onClick: () => {
133
- k((g) => !g);
133
+ l((k) => !k);
134
134
  },
135
135
  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",
136
- "aria-expanded": s,
136
+ "aria-expanded": g,
137
137
  children: [
138
- /* @__PURE__ */ e("span", { children: s ? "▾" : "▸" }),
138
+ /* @__PURE__ */ e("span", { children: g ? "▾" : "▸" }),
139
139
  o
140
140
  ]
141
141
  }
142
142
  ),
143
- s && /* @__PURE__ */ e(
144
- H,
143
+ g && /* @__PURE__ */ e(
144
+ q,
145
145
  {
146
146
  node: a,
147
147
  selectedEntryId: r,
148
148
  selectedJogakName: t,
149
- onSelect: l,
149
+ onSelect: s,
150
150
  depth: n
151
151
  }
152
152
  )
153
153
  ] });
154
154
  }
155
- function U({
155
+ function G({
156
156
  meta: o,
157
157
  selectedEntryId: a,
158
158
  selectedJogakName: r,
159
159
  onSelect: t,
160
- indent: l
160
+ indent: s
161
161
  }) {
162
- const n = o.id === a, [s, k] = m(n);
163
- b(() => {
164
- n && k(!0);
162
+ const n = o.id === a, [g, l] = m(n);
163
+ x(() => {
164
+ n && l(!0);
165
165
  }, [n]);
166
- const g = o.title.split("/").pop() ?? o.title, j = 16 + l * 12;
167
- return /* @__PURE__ */ c("div", { children: [
168
- /* @__PURE__ */ c(
166
+ const k = o.title.split("/").pop() ?? o.title, c = 16 + s * 12;
167
+ return /* @__PURE__ */ j("div", { children: [
168
+ /* @__PURE__ */ j(
169
169
  "button",
170
170
  {
171
171
  type: "button",
172
172
  onClick: () => {
173
173
  if (n)
174
- k((i) => !i);
174
+ l((i) => !i);
175
175
  else {
176
- k(!0);
176
+ l(!0);
177
177
  const i = o.jogakNames[0];
178
178
  i !== void 0 && t(o.id, i);
179
179
  }
180
180
  },
181
- className: v(
181
+ className: w(
182
182
  "jogak:flex jogak:items-center jogak:gap-1.5 jogak:w-full jogak:pr-3 jogak:py-[5px]",
183
183
  "jogak:pl-[var(--jogak-entry-pl)]",
184
184
  "jogak:border-none jogak:cursor-pointer jogak:text-left jogak:text-[13px]",
185
185
  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"
186
186
  ),
187
- style: { "--jogak-entry-pl": `${j}px` },
188
- "aria-expanded": s,
187
+ style: { "--jogak-entry-pl": `${c}px` },
188
+ "aria-expanded": g,
189
189
  children: [
190
- /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: s ? "▾" : "▸" }),
191
- g
190
+ /* @__PURE__ */ e("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: g ? "▾" : "▸" }),
191
+ k
192
192
  ]
193
193
  }
194
194
  ),
195
- s && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
195
+ g && /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((i) => {
196
196
  const p = n && i === r;
197
197
  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
198
198
  "button",
@@ -201,13 +201,13 @@ function U({
201
201
  onClick: () => {
202
202
  t(o.id, i);
203
203
  },
204
- className: v(
204
+ className: w(
205
205
  "jogak:block jogak:w-full jogak:text-left jogak:pr-3 jogak:py-1",
206
206
  "jogak:pl-[var(--jogak-jogak-pl)]",
207
207
  "jogak:border-none jogak:cursor-pointer jogak:text-[12px]",
208
208
  p ? "jogak:bg-[var(--jogak-color-accent-bg-soft)] jogak:text-[var(--jogak-color-accent-fg)] jogak:font-medium" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal"
209
209
  ),
210
- style: { "--jogak-jogak-pl": `${j + 18}px` },
210
+ style: { "--jogak-jogak-pl": `${c + 18}px` },
211
211
  "aria-current": p ? "true" : void 0,
212
212
  children: i
213
213
  }
@@ -216,10 +216,10 @@ function U({
216
216
  ] });
217
217
  }
218
218
  function no(o, a) {
219
- const r = a == null ? void 0 : a.control, t = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, l = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
220
- return t || l ? "action" : r === "boolean" || typeof o == "boolean" ? "boolean" : r === "number" || r === "range" || typeof o == "number" ? "number" : r === "select" || r === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : r === "text" || r === "color" || typeof o == "string" ? "text" : "json";
219
+ const r = a == null ? void 0 : a.control, t = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, s = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
220
+ return t || s ? "action" : r === "boolean" || typeof o == "boolean" ? "boolean" : r === "number" || r === "range" || typeof o == "number" ? "number" : r === "select" || r === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : r === "text" || r === "color" || typeof o == "string" ? "text" : "json";
221
221
  }
222
- const $ = "jogak:px-2 jogak:py-1 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:text-[13px] jogak:w-full jogak:max-w-[280px]", L = "jogak:px-5 jogak:py-1.5 jogak:text-left jogak:text-[var(--jogak-color-fg-muted)] jogak:font-medium jogak:text-[12px] jogak:border-b jogak:border-[var(--jogak-color-border)]", O = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
222
+ const E = "jogak:px-2 jogak:py-1 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:text-[13px] jogak:w-full jogak:max-w-[280px]", L = "jogak:px-5 jogak:py-1.5 jogak:text-left jogak:text-[var(--jogak-color-fg-muted)] jogak:font-medium jogak:text-[12px] jogak:border-b jogak:border-[var(--jogak-color-border)]", M = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
223
223
  function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
224
224
  switch (no(a, r)) {
225
225
  case "boolean":
@@ -243,7 +243,7 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
243
243
  onChange: (n) => {
244
244
  t(o, n.target.valueAsNumber);
245
245
  },
246
- className: $
246
+ className: E
247
247
  }
248
248
  );
249
249
  case "select": {
@@ -252,11 +252,11 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
252
252
  "select",
253
253
  {
254
254
  value: String(a ?? ""),
255
- onChange: (s) => {
256
- t(o, s.target.value);
255
+ onChange: (g) => {
256
+ t(o, g.target.value);
257
257
  },
258
- className: $,
259
- children: n.map((s) => /* @__PURE__ */ e("option", { value: String(s), children: String(s) }, String(s)))
258
+ className: E,
259
+ children: n.map((g) => /* @__PURE__ */ e("option", { value: String(g), children: String(g) }, String(g)))
260
260
  }
261
261
  );
262
262
  }
@@ -269,7 +269,7 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
269
269
  onChange: (n) => {
270
270
  t(o, n.target.value);
271
271
  },
272
- className: $
272
+ className: E
273
273
  }
274
274
  );
275
275
  case "action":
@@ -279,38 +279,38 @@ function go({ argKey: o, value: a, argType: r, onArgChange: t }) {
279
279
  }
280
280
  }
281
281
  function so({ args: o, argTypes: a, onArgChange: r }) {
282
- const l = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
283
- return /* @__PURE__ */ c("div", { className: "jogak:border-t-2 jogak:border-[var(--jogak-color-border)]", children: [
282
+ const s = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
283
+ return /* @__PURE__ */ j("div", { className: "jogak:border-t-2 jogak:border-[var(--jogak-color-border)]", children: [
284
284
  /* @__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" }),
285
- l.length === 0 ? /* @__PURE__ */ e("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No args defined" }) : /* @__PURE__ */ c("table", { className: "jogak:w-full jogak:border-collapse jogak:text-[13px]", children: [
286
- /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ c("tr", { children: [
285
+ s.length === 0 ? /* @__PURE__ */ e("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No args defined" }) : /* @__PURE__ */ j("table", { className: "jogak:w-full jogak:border-collapse jogak:text-[13px]", children: [
286
+ /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ j("tr", { children: [
287
287
  /* @__PURE__ */ e("th", { className: L, children: "Name" }),
288
288
  /* @__PURE__ */ e("th", { className: L, children: "Control" }),
289
289
  /* @__PURE__ */ e("th", { className: L, children: "Description" })
290
290
  ] }) }),
291
- /* @__PURE__ */ e("tbody", { children: l.map(([n, s]) => {
292
- const k = a[n];
293
- return /* @__PURE__ */ c("tr", { children: [
291
+ /* @__PURE__ */ e("tbody", { children: s.map(([n, g]) => {
292
+ const l = a[n];
293
+ return /* @__PURE__ */ j("tr", { children: [
294
294
  /* @__PURE__ */ e(
295
295
  "td",
296
296
  {
297
- className: v(
298
- O,
297
+ className: w(
298
+ M,
299
299
  "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"
300
300
  ),
301
301
  children: n
302
302
  }
303
303
  ),
304
- /* @__PURE__ */ e("td", { className: O, children: /* @__PURE__ */ e(
304
+ /* @__PURE__ */ e("td", { className: M, children: /* @__PURE__ */ e(
305
305
  go,
306
306
  {
307
307
  argKey: n,
308
- value: s,
309
- argType: k,
308
+ value: g,
309
+ argType: l,
310
310
  onArgChange: r
311
311
  }
312
312
  ) }),
313
- /* @__PURE__ */ e("td", { className: v(O, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (k == null ? void 0 : k.description) ?? "" })
313
+ /* @__PURE__ */ e("td", { className: w(M, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
314
314
  ] }, n);
315
315
  }) })
316
316
  ] })
@@ -335,16 +335,16 @@ function lo(o) {
335
335
  }
336
336
  }
337
337
  function ko(o) {
338
- const a = new Date(o), r = a.getHours().toString().padStart(2, "0"), t = a.getMinutes().toString().padStart(2, "0"), l = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
339
- return `${r}:${t}:${l}.${n}`;
338
+ const a = new Date(o), r = a.getHours().toString().padStart(2, "0"), t = a.getMinutes().toString().padStart(2, "0"), s = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
339
+ return `${r}:${t}:${s}.${n}`;
340
340
  }
341
- function co() {
342
- const [o, a] = m(() => A.getLogs());
343
- b(() => A.subscribe(a), []);
341
+ function io() {
342
+ const [o, a] = m(() => $.getLogs());
343
+ x(() => $.subscribe(a), []);
344
344
  const r = o.length === 0;
345
- return /* @__PURE__ */ c("div", { className: "jogak:h-full jogak:flex jogak:flex-col", children: [
346
- /* @__PURE__ */ c("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)] jogak:flex jogak:items-center jogak:justify-between jogak:shrink-0", children: [
347
- /* @__PURE__ */ c("span", { children: [
345
+ return /* @__PURE__ */ j("div", { className: "jogak:h-full jogak:flex jogak:flex-col", children: [
346
+ /* @__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: [
347
+ /* @__PURE__ */ j("span", { children: [
348
348
  "Actions ",
349
349
  o.length > 0 && `(${o.length.toString()})`
350
350
  ] }),
@@ -353,10 +353,10 @@ function co() {
353
353
  {
354
354
  type: "button",
355
355
  onClick: () => {
356
- A.clear();
356
+ $.clear();
357
357
  },
358
358
  disabled: r,
359
- className: v(
359
+ className: w(
360
360
  "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",
361
361
  r ? "jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default" : "jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"
362
362
  ),
@@ -364,14 +364,14 @@ function co() {
364
364
  }
365
365
  )
366
366
  ] }),
367
- /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:overflow-auto", children: r ? /* @__PURE__ */ e("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none", children: "함수 prop이 호출되면 여기에 기록됩니다" }) : /* @__PURE__ */ e("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]", children: o.map((t) => /* @__PURE__ */ c(
367
+ /* @__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(
368
368
  "li",
369
369
  {
370
370
  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)]",
371
371
  children: [
372
372
  /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: ko(t.timestamp) }),
373
373
  /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: t.name }),
374
- /* @__PURE__ */ c("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
374
+ /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
375
375
  "(",
376
376
  lo(t.args),
377
377
  ")"
@@ -388,20 +388,16 @@ function jo({
388
388
  style: r,
389
389
  "data-testid": t
390
390
  }) {
391
- const l = _(null), [n, s] = m(null);
392
- return b(() => {
393
- const k = l.current;
394
- if (k === null) return;
395
- let g;
396
- k.shadowRoot !== null ? g = k.shadowRoot : g = k.attachShadow({ mode: "open" }), s(g), G(g);
397
- const j = io(g);
398
- return () => {
399
- j.disconnect();
400
- };
391
+ const s = A(null), [n, g] = m(null);
392
+ return x(() => {
393
+ const l = s.current;
394
+ if (l === null) return;
395
+ const k = l.shadowRoot ?? l.attachShadow({ mode: "open" });
396
+ g(k);
401
397
  }, []), /* @__PURE__ */ e(
402
398
  "div",
403
399
  {
404
- ref: l,
400
+ ref: s,
405
401
  className: a,
406
402
  "data-testid": t,
407
403
  style: r,
@@ -409,52 +405,48 @@ function jo({
409
405
  }
410
406
  );
411
407
  }
412
- function G(o) {
413
- const a = [];
414
- for (const r of Array.from(document.styleSheets))
415
- try {
416
- const t = r.cssRules, l = new CSSStyleSheet(), n = Array.from(t).map((s) => s.cssText).join(`
417
- `);
418
- l.replaceSync(n), a.push(l);
419
- } catch {
420
- }
421
- o.adoptedStyleSheets = a;
422
- }
423
- function io(o) {
424
- const a = new MutationObserver(() => {
425
- G(o);
426
- });
427
- return a.observe(document.head, { childList: !0, subtree: !0 }), a;
428
- }
429
- function uo({
408
+ function co({
430
409
  entry: o,
431
410
  args: a,
432
- className: r,
433
- "data-testid": t
411
+ userViteUrl: r,
412
+ className: t,
413
+ "data-testid": s
434
414
  }) {
435
- const l = _(null), n = _(!1);
436
- return b(() => {
437
- const s = l.current;
438
- if (s === null) return;
439
- const k = () => {
440
- var g, j;
441
- n.current = !0, (j = (g = s.contentWindow) == null ? void 0 : g.__jogak_setProps__) == null || j.call(g, { entry: o, args: a });
415
+ const n = A(null), [g, l] = m(!1), k = r !== "" ? `${r}/__jogak_preview__/index.html` : "/preview-frame.html";
416
+ return x(() => {
417
+ const c = (i) => {
418
+ const p = n.current;
419
+ if (p === null || i.source !== p.contentWindow) return;
420
+ const f = i.data;
421
+ f == null || typeof f != "object" || f.type === "jogak:ready" && l(!0);
442
422
  };
443
- return s.addEventListener("load", k), () => {
444
- var g, j;
445
- s.removeEventListener("load", k), (j = (g = s.contentWindow) == null ? void 0 : g.__jogak_unmount__) == null || j.call(g);
423
+ return window.addEventListener("message", c), () => {
424
+ window.removeEventListener("message", c);
446
425
  };
447
- }, []), b(() => {
448
- var s, k, g;
449
- n.current && ((g = (k = (s = l.current) == null ? void 0 : s.contentWindow) == null ? void 0 : k.__jogak_setProps__) == null || g.call(k, { entry: o, args: a }));
450
- }, [o, a]), /* @__PURE__ */ e(
426
+ }, []), x(() => {
427
+ var i;
428
+ if (!g) return;
429
+ const c = n.current;
430
+ c !== null && ((i = c.contentWindow) == null || i.postMessage(
431
+ { type: "jogak:setProps", entryId: o.id, args: a },
432
+ "*"
433
+ ));
434
+ }, [g, o, a]), x(() => {
435
+ const c = n.current;
436
+ return () => {
437
+ c !== null && queueMicrotask(() => {
438
+ var i;
439
+ (i = c.contentWindow) == null || i.postMessage({ type: "jogak:unmount" }, "*");
440
+ });
441
+ };
442
+ }, []), /* @__PURE__ */ e(
451
443
  "iframe",
452
444
  {
453
- ref: l,
454
- src: "/preview-frame.html",
445
+ ref: n,
446
+ src: k,
455
447
  title: "Preview",
456
- className: r,
457
- "data-testid": t
448
+ className: t,
449
+ "data-testid": s
458
450
  }
459
451
  );
460
452
  }
@@ -462,7 +454,7 @@ const I = {
462
454
  mobile: 375,
463
455
  tablet: 768,
464
456
  desktop: "none"
465
- }, po = {
457
+ }, uo = {
466
458
  mobile: "Mobile",
467
459
  tablet: "Tablet",
468
460
  desktop: "Desktop"
@@ -485,22 +477,23 @@ const I = {
485
477
  "--jogak-canvas-bg-size": "16px 16px",
486
478
  "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
487
479
  }
488
- }, M = "jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";
489
- function fo(o) {
490
- return z[o] ?? z.vsDark;
480
+ }, J = "jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";
481
+ function po(o) {
482
+ return D[o] ?? D.vsDark;
491
483
  }
492
- function mo({
484
+ function fo({
493
485
  entryId: o,
494
486
  jogakName: a,
495
487
  overrideArgs: r,
496
488
  onArgChange: t,
497
- onReset: l,
489
+ onReset: s,
498
490
  codeTheme: n,
499
- onResolveJogak: s,
500
- previewIsolation: k = "none"
491
+ onResolveJogak: g,
492
+ previewIsolation: l = "iframe",
493
+ userViteUrl: k = ""
501
494
  }) {
502
- const g = Z(o), [j, i] = m("desktop"), [p, w] = m("white"), [N, h] = m("controls"), x = fo(n);
503
- return g.status === "unknown" ? /* @__PURE__ */ c(
495
+ const c = Z(o), [i, p] = m("desktop"), [f, N] = m("white"), [C, h] = m("controls"), v = po(n);
496
+ return c.status === "unknown" ? /* @__PURE__ */ j(
504
497
  "div",
505
498
  {
506
499
  "data-testid": "preview-not-found",
@@ -510,72 +503,73 @@ function mo({
510
503
  o
511
504
  ]
512
505
  }
513
- ) : g.status === "error" ? /* @__PURE__ */ c(
506
+ ) : c.status === "error" ? /* @__PURE__ */ j(
514
507
  "div",
515
508
  {
516
509
  "data-testid": "preview-error",
517
510
  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",
518
511
  children: [
519
- /* @__PURE__ */ c("div", { className: "jogak:font-semibold", children: [
512
+ /* @__PURE__ */ j("div", { className: "jogak:font-semibold", children: [
520
513
  "Failed to load entry: ",
521
514
  o
522
515
  ] }),
523
- /* @__PURE__ */ e("pre", { className: "jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full", children: g.error.message })
516
+ /* @__PURE__ */ e("pre", { className: "jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full", children: c.error.message })
524
517
  ]
525
518
  }
526
- ) : g.status === "loading" ? /* @__PURE__ */ e(
527
- bo,
519
+ ) : c.status === "loading" ? /* @__PURE__ */ e(
520
+ mo,
528
521
  {
529
- meta: g.meta,
522
+ meta: c.meta,
530
523
  jogakName: a,
531
- viewport: j,
532
- bgMode: p,
533
- onViewportChange: i,
534
- onBgModeChange: w
524
+ viewport: i,
525
+ bgMode: f,
526
+ onViewportChange: p,
527
+ onBgModeChange: N
535
528
  }
536
529
  ) : /* @__PURE__ */ e(
537
- ho,
530
+ bo,
538
531
  {
539
- entry: g.entry,
532
+ entry: c.entry,
540
533
  jogakName: a,
541
534
  overrideArgs: r,
542
535
  onArgChange: t,
543
- onReset: l,
544
- onResolveJogak: s,
545
- viewport: j,
546
- bgMode: p,
547
- bottomTab: N,
548
- onViewportChange: i,
549
- onBgModeChange: w,
536
+ onReset: s,
537
+ onResolveJogak: g,
538
+ viewport: i,
539
+ bgMode: f,
540
+ bottomTab: C,
541
+ onViewportChange: p,
542
+ onBgModeChange: N,
550
543
  onBottomTabChange: h,
551
- prismTheme: x,
552
- previewIsolation: k
544
+ prismTheme: v,
545
+ previewIsolation: l,
546
+ userViteUrl: k
553
547
  }
554
548
  );
555
549
  }
556
- function bo({
550
+ function mo({
557
551
  meta: o,
558
552
  jogakName: a,
559
553
  viewport: r,
560
554
  bgMode: t,
561
- onViewportChange: l,
555
+ onViewportChange: s,
562
556
  onBgModeChange: n
563
557
  }) {
564
- const s = a ?? o.jogakNames[0] ?? "...", k = I[r];
565
- return /* @__PURE__ */ c(
558
+ const g = a ?? o.jogakNames[0] ?? "...", l = I[r];
559
+ return /* @__PURE__ */ j(
566
560
  "div",
567
561
  {
568
562
  "data-testid": "preview-loading",
569
563
  className: "jogak:flex jogak:flex-col jogak:h-full",
570
564
  children: [
571
565
  /* @__PURE__ */ e(
572
- q,
566
+ U,
573
567
  {
574
568
  title: o.title,
575
- jogakName: s,
569
+ jogakName: g,
576
570
  viewport: r,
577
571
  bgMode: t,
578
- onViewportChange: l,
572
+ onViewportChange: s,
579
573
  onBgModeChange: n,
580
574
  showReset: !1,
581
575
  onReset: () => {
@@ -585,16 +579,16 @@ function bo({
585
579
  /* @__PURE__ */ e(
586
580
  "div",
587
581
  {
588
- className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
582
+ className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${J}`,
589
583
  style: P[t],
590
584
  children: /* @__PURE__ */ e(
591
585
  "div",
592
586
  {
593
587
  className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
594
588
  style: {
595
- "--jogak-canvas-mw": k === "none" ? "100%" : `${k}px`
589
+ "--jogak-canvas-mw": l === "none" ? "100%" : `${l}px`
596
590
  },
597
- children: /* @__PURE__ */ c("div", { className: "jogak-skeleton-shimmer jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:flex jogak:items-center jogak:justify-center jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:min-h-[256px]", children: [
591
+ 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: [
598
592
  "Loading ",
599
593
  o.title,
600
594
  "…"
@@ -607,67 +601,68 @@ function bo({
607
601
  }
608
602
  );
609
603
  }
610
- function ho({
604
+ function bo({
611
605
  entry: o,
612
606
  jogakName: a,
613
607
  overrideArgs: r,
614
608
  onArgChange: t,
615
- onReset: l,
609
+ onReset: s,
616
610
  onResolveJogak: n,
617
- viewport: s,
618
- bgMode: k,
619
- bottomTab: g,
620
- onViewportChange: j,
611
+ viewport: g,
612
+ bgMode: l,
613
+ bottomTab: k,
614
+ onViewportChange: c,
621
615
  onBgModeChange: i,
622
616
  onBottomTabChange: p,
623
- prismTheme: w,
624
- previewIsolation: N
617
+ prismTheme: f,
618
+ previewIsolation: N,
619
+ userViteUrl: C
625
620
  }) {
626
621
  var V;
627
622
  const h = a ?? ((V = o.jogaks[0]) == null ? void 0 : V.name) ?? null;
628
- if (b(() => {
623
+ if (x(() => {
629
624
  a === null && h !== null && n !== void 0 && n(o.id, h);
630
625
  }, [a, h, o.id, n]), h === null)
631
- return /* @__PURE__ */ c("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
626
+ return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
632
627
  "Entry has no jogaks: ",
633
628
  o.id
634
629
  ] });
635
- const x = o.jogaks.find((y) => y.name === h);
636
- if (x === void 0)
637
- return /* @__PURE__ */ c("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
630
+ const v = o.jogaks.find((y) => y.name === h);
631
+ if (v === void 0)
632
+ return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
638
633
  "Jogak not found: ",
639
634
  h
640
635
  ] });
641
- const u = { ...x.args ?? {}, ...r }, f = {
636
+ const u = { ...v.args ?? {}, ...r }, b = {
642
637
  ...o.meta.argTypes ?? {},
643
- ...x.argTypes ?? {}
644
- }, Q = Object.keys(r).length > 0, J = I[s];
645
- return /* @__PURE__ */ c("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
638
+ ...v.argTypes ?? {}
639
+ }, Q = Object.keys(r).length > 0, B = I[g];
640
+ return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
646
641
  /* @__PURE__ */ e(
647
- q,
642
+ U,
648
643
  {
649
644
  title: o.title,
650
- jogakName: x.name,
651
- viewport: s,
652
- bgMode: k,
653
- onViewportChange: j,
645
+ jogakName: v.name,
646
+ viewport: g,
647
+ bgMode: l,
648
+ onViewportChange: c,
654
649
  onBgModeChange: i,
655
650
  showReset: Q,
656
- onReset: l
651
+ onReset: s
657
652
  }
658
653
  ),
659
654
  /* @__PURE__ */ e(
660
655
  "div",
661
656
  {
662
- className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${M}`,
663
- style: P[k],
657
+ className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${J}`,
658
+ style: P[l],
664
659
  children: /* @__PURE__ */ e(
665
660
  "div",
666
661
  {
667
662
  "data-jogak-content": !0,
668
663
  className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
669
664
  style: {
670
- "--jogak-canvas-mw": J === "none" ? "100%" : `${J}px`
665
+ "--jogak-canvas-mw": B === "none" ? "100%" : `${B}px`
671
666
  },
672
667
  children: /* @__PURE__ */ e(
673
668
  xo,
@@ -675,16 +670,17 @@ function ho({
675
670
  entry: o,
676
671
  args: u,
677
672
  source: o.source,
678
- theme: w,
679
- previewIsolation: N
673
+ theme: f,
674
+ previewIsolation: N,
675
+ userViteUrl: C
680
676
  },
681
- `${o.id}/${x.name}`
677
+ `${o.id}/${v.name}`
682
678
  )
683
679
  }
684
680
  )
685
681
  }
686
682
  ),
687
- /* @__PURE__ */ c(
683
+ /* @__PURE__ */ j(
688
684
  "div",
689
685
  {
690
686
  "data-testid": "bottom-panel",
@@ -696,19 +692,19 @@ function ho({
696
692
  role: "tablist",
697
693
  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",
698
694
  children: ["controls", "actions"].map((y) => {
699
- const B = g === y;
695
+ const W = k === y;
700
696
  return /* @__PURE__ */ e(
701
697
  "button",
702
698
  {
703
699
  type: "button",
704
700
  role: "tab",
705
- "aria-selected": B,
701
+ "aria-selected": W,
706
702
  onClick: () => {
707
703
  p(y);
708
704
  },
709
- className: v(
705
+ className: w(
710
706
  "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",
711
- B ? "jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]" : "jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"
707
+ W ? "jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]" : "jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"
712
708
  ),
713
709
  children: y
714
710
  },
@@ -717,88 +713,89 @@ function ho({
717
713
  })
718
714
  }
719
715
  ),
720
- /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: g === "controls" ? /* @__PURE__ */ e(
716
+ /* @__PURE__ */ e("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: k === "controls" ? /* @__PURE__ */ e(
721
717
  so,
722
718
  {
723
719
  args: u,
724
- argTypes: f,
720
+ argTypes: b,
725
721
  onArgChange: t
726
722
  }
727
- ) : /* @__PURE__ */ e(co, {}) })
723
+ ) : /* @__PURE__ */ e(io, {}) })
728
724
  ]
729
725
  }
730
726
  )
731
727
  ] });
732
728
  }
733
- function q({
729
+ function U({
734
730
  title: o,
735
731
  jogakName: a,
736
732
  viewport: r,
737
733
  bgMode: t,
738
- onViewportChange: l,
734
+ onViewportChange: s,
739
735
  onBgModeChange: n,
740
- showReset: s,
741
- onReset: k
736
+ showReset: g,
737
+ onReset: l
742
738
  }) {
743
- return /* @__PURE__ */ c("div", { className: "jogak:flex jogak:items-center jogak:gap-[10px] jogak:px-[14px] jogak:py-[7px] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg)] jogak:shrink-0", children: [
744
- /* @__PURE__ */ c("div", { className: "jogak:flex-1 jogak:text-[13px]", children: [
739
+ 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: [
740
+ /* @__PURE__ */ j("div", { className: "jogak:flex-1 jogak:text-[13px]", children: [
745
741
  /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)]", children: o }),
746
742
  /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none", children: "/" }),
747
743
  /* @__PURE__ */ e("span", { className: "jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold", children: a })
748
744
  ] }),
749
- /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-0.5 jogak:bg-[var(--jogak-color-bg-subtle)] jogak:rounded-[var(--jogak-radius-lg)] jogak:p-0.5", children: ["mobile", "tablet", "desktop"].map((g) => /* @__PURE__ */ e(
745
+ /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-0.5 jogak:bg-[var(--jogak-color-bg-subtle)] jogak:rounded-[var(--jogak-radius-lg)] jogak:p-0.5", children: ["mobile", "tablet", "desktop"].map((k) => /* @__PURE__ */ e(
750
746
  "button",
751
747
  {
752
748
  type: "button",
753
749
  onClick: () => {
754
- l(g);
750
+ s(k);
755
751
  },
756
- "aria-pressed": r === g,
757
- className: v(
752
+ "aria-pressed": r === k,
753
+ className: w(
758
754
  "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",
759
- r === g ? "jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"
755
+ r === k ? "jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"
760
756
  ),
761
- children: po[g]
757
+ children: uo[k]
762
758
  },
763
- g
759
+ k
764
760
  )) }),
765
- /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((g) => /* @__PURE__ */ e(
761
+ /* @__PURE__ */ e("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((k) => /* @__PURE__ */ e(
766
762
  "button",
767
763
  {
768
764
  type: "button",
769
765
  onClick: () => {
770
- n(g);
766
+ n(k);
771
767
  },
772
- "aria-pressed": t === g,
773
- "aria-label": `${g} background`,
774
- className: v(
768
+ "aria-pressed": t === k,
769
+ "aria-label": `${k} background`,
770
+ className: w(
775
771
  "jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",
776
- M,
777
- t === g ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
772
+ J,
773
+ t === k ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
778
774
  ),
779
- style: P[g]
775
+ style: P[k]
780
776
  },
781
- g
777
+ k
782
778
  )) }),
783
- s && /* @__PURE__ */ e(
779
+ g && /* @__PURE__ */ e(
784
780
  "button",
785
781
  {
786
782
  type: "button",
787
- onClick: k,
783
+ onClick: l,
788
784
  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",
789
785
  children: "Reset"
790
786
  }
791
787
  )
792
788
  ] });
793
789
  }
794
- function xo({ entry: o, args: a, source: r, theme: t, previewIsolation: l }) {
795
- const [n, s] = m(!1), k = /* @__PURE__ */ c("div", { className: "jogak:relative", children: [
790
+ function xo({ entry: o, args: a, source: r, theme: t, previewIsolation: s, userViteUrl: n }) {
791
+ const [g, l] = m(!1), k = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
796
792
  /* @__PURE__ */ e(
797
- vo,
793
+ ho,
798
794
  {
799
795
  entry: o,
800
796
  args: a,
801
- previewIsolation: l
797
+ previewIsolation: s,
798
+ userViteUrl: n
802
799
  }
803
800
  ),
804
801
  /* @__PURE__ */ e(
@@ -806,54 +803,57 @@ function xo({ entry: o, args: a, source: r, theme: t, previewIsolation: l }) {
806
803
  {
807
804
  type: "button",
808
805
  onClick: () => {
809
- s((g) => !g);
806
+ l((c) => !c);
810
807
  },
811
- "aria-pressed": n,
812
- "aria-label": n ? "Hide source code" : "Show source code",
813
- className: v(
808
+ "aria-pressed": g,
809
+ "aria-label": g ? "Hide source code" : "Show source code",
810
+ className: w(
814
811
  "jogak:absolute jogak:bottom-2 jogak:right-2 jogak:px-[9px] jogak:py-1",
815
812
  "jogak:text-[11px] jogak:font-[family-name:var(--jogak-font-mono)] jogak:font-semibold jogak:tracking-[0.02em]",
816
813
  "jogak:text-[var(--jogak-color-bg)] jogak:border-none jogak:rounded-[5px] jogak:cursor-pointer",
817
814
  "jogak:shadow-[0_1px_4px_rgba(0,0,0,0.2)] jogak:transition-[background-color] jogak:duration-150 jogak:leading-none",
818
- n ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
815
+ g ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
819
816
  ),
820
817
  children: "</>"
821
818
  }
822
819
  )
823
820
  ] });
824
- return /* @__PURE__ */ c("div", { children: [
821
+ return /* @__PURE__ */ j("div", { children: [
825
822
  k,
826
- n && /* @__PURE__ */ e("div", { className: "jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]", children: /* @__PURE__ */ e(yo, { source: r, theme: t }) })
823
+ g && /* @__PURE__ */ e("div", { className: "jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]", children: /* @__PURE__ */ e(No, { source: r, theme: t }) })
827
824
  ] });
828
825
  }
829
- const E = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
830
- function vo({ entry: o, args: a, previewIsolation: r }) {
826
+ const O = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
827
+ function ho({ entry: o, args: a, previewIsolation: r, userViteUrl: t }) {
831
828
  return r === "shadow" ? /* @__PURE__ */ e(
832
829
  jo,
833
830
  {
834
831
  "data-testid": "preview-content",
835
- className: E,
836
- children: /* @__PURE__ */ e(No, { entry: o, args: a })
832
+ className: O,
833
+ children: /* @__PURE__ */ e(wo, { entry: o, args: a })
837
834
  }
838
835
  ) : r === "iframe" ? /* @__PURE__ */ e(
839
- uo,
836
+ co,
840
837
  {
841
838
  entry: o,
842
839
  args: a,
840
+ userViteUrl: t,
843
841
  "data-testid": "preview-content",
844
- className: `${E} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
842
+ className: `${O} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
845
843
  }
846
- ) : /* @__PURE__ */ e(wo, { entry: o, args: a });
844
+ ) : /* @__PURE__ */ e(vo, { entry: o, args: a });
847
845
  }
848
- function wo({ entry: o, args: a }) {
849
- const r = _(null);
850
- return b(() => {
846
+ function vo({ entry: o, args: a }) {
847
+ const r = A(null);
848
+ return x(() => {
851
849
  const t = r.current;
852
850
  if (t !== null)
853
851
  return S.render(o, a, t), () => {
854
- S.unmount(t);
852
+ queueMicrotask(() => {
853
+ S.unmount(t);
854
+ });
855
855
  };
856
- }, [o]), b(() => {
856
+ }, [o]), x(() => {
857
857
  const t = r.current;
858
858
  t !== null && S.render(o, a, t);
859
859
  }, [o, a]), /* @__PURE__ */ e(
@@ -861,33 +861,35 @@ function wo({ entry: o, args: a }) {
861
861
  {
862
862
  ref: r,
863
863
  "data-testid": "preview-content",
864
- className: E
864
+ className: O
865
865
  }
866
866
  );
867
867
  }
868
- function No({ entry: o, args: a }) {
869
- const r = _(null);
870
- return b(() => {
868
+ function wo({ entry: o, args: a }) {
869
+ const r = A(null);
870
+ return x(() => {
871
871
  const t = r.current;
872
872
  if (t !== null)
873
873
  return S.render(o, a, t), () => {
874
- S.unmount(t);
874
+ queueMicrotask(() => {
875
+ S.unmount(t);
876
+ });
875
877
  };
876
- }, [o]), b(() => {
878
+ }, [o]), x(() => {
877
879
  const t = r.current;
878
880
  t !== null && S.render(o, a, t);
879
881
  }, [o, a]), /* @__PURE__ */ e("div", { ref: r, "data-testid": "preview-content-shadow" });
880
882
  }
881
- function yo({ source: o, theme: a }) {
882
- const [r, t] = m(!1), l = a.plain.backgroundColor ?? "#1e293b";
883
+ function No({ source: o, theme: a }) {
884
+ const [r, t] = m(!1), s = a.plain.backgroundColor ?? "#1e293b";
883
885
  return o === void 0 ? /* @__PURE__ */ e(
884
886
  "div",
885
887
  {
886
888
  className: "jogak:h-full jogak:flex jogak:items-center jogak:justify-center jogak:bg-[var(--jogak-source-bg)] jogak:text-[#94a3b8] jogak:text-[13px]",
887
- style: { "--jogak-source-bg": l },
889
+ style: { "--jogak-source-bg": s },
888
890
  children: "Source not available"
889
891
  }
890
- ) : /* @__PURE__ */ c("div", { className: "jogak:relative jogak:h-full", children: [
892
+ ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
891
893
  /* @__PURE__ */ e(
892
894
  "button",
893
895
  {
@@ -903,20 +905,20 @@ function yo({ source: o, theme: a }) {
903
905
  children: r ? "✓ Copied" : "Copy"
904
906
  }
905
907
  ),
906
- /* @__PURE__ */ e(oo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: s, tokens: k, getLineProps: g, getTokenProps: j }) => /* @__PURE__ */ e(
908
+ /* @__PURE__ */ e(oo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: g, tokens: l, getLineProps: k, getTokenProps: c }) => /* @__PURE__ */ e(
907
909
  "pre",
908
910
  {
909
911
  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",
910
- style: s,
911
- children: k.map((i, p) => /* @__PURE__ */ c(
912
+ style: g,
913
+ children: l.map((i, p) => /* @__PURE__ */ j(
912
914
  "div",
913
915
  {
914
- ...g({ line: i }),
916
+ ...k({ line: i }),
915
917
  className: "jogak:flex jogak:pr-6",
916
- style: g({ line: i }).style,
918
+ style: k({ line: i }).style,
917
919
  children: [
918
920
  /* @__PURE__ */ e("span", { className: "jogak:select-none jogak:min-w-10 jogak:pl-[14px] jogak:pr-[14px] jogak:text-right jogak:text-[rgba(148,163,184,0.45)] jogak:shrink-0 jogak:leading-[1.7]", children: p + 1 }),
919
- /* @__PURE__ */ e("span", { children: i.map((w, N) => /* @__PURE__ */ e("span", { ...j({ token: w }) }, N)) })
921
+ /* @__PURE__ */ e("span", { children: i.map((f, N) => /* @__PURE__ */ e("span", { ...c({ token: f }) }, N)) })
920
922
  ]
921
923
  },
922
924
  p
@@ -925,24 +927,25 @@ function yo({ source: o, theme: a }) {
925
927
  ) })
926
928
  ] });
927
929
  }
928
- function D() {
930
+ function F() {
929
931
  if (typeof window > "u") return null;
930
932
  const o = new URLSearchParams(window.location.search), a = o.get("entry");
931
933
  if (a === null) return null;
932
934
  const r = o.get("jogak");
933
935
  return { entryId: a, jogakName: r };
934
936
  }
935
- function So(o, a) {
937
+ function yo(o, a) {
936
938
  const r = new URLSearchParams();
937
939
  r.set("entry", o), r.set("jogak", a), window.history.pushState({}, "", `?${r.toString()}`);
938
940
  }
939
- function Oo({
941
+ function Eo({
940
942
  entries: o,
941
943
  metas: a,
942
944
  codeTheme: r = "vsDark",
943
- previewIsolation: t = "none"
945
+ previewIsolation: t = "iframe",
946
+ userViteUrl: s = ""
944
947
  } = {}) {
945
- const l = C(() => {
948
+ const n = R(() => {
946
949
  if (o !== void 0) {
947
950
  a !== void 0 && console.warn(
948
951
  "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
@@ -952,35 +955,35 @@ function Oo({
952
955
  return d;
953
956
  }
954
957
  if (a !== void 0)
955
- for (const d of a) W.registerMeta(d);
956
- return W;
957
- }, [o, a]), n = C(() => D(), []), [s, k] = m(
958
- (n == null ? void 0 : n.entryId) ?? null
959
- ), [g, j] = m(
960
- (n == null ? void 0 : n.jogakName) ?? null
961
- ), [i, p] = m({});
962
- b(() => {
958
+ for (const d of a) z.registerMeta(d);
959
+ return z;
960
+ }, [o, a]), g = R(() => F(), []), [l, k] = m(
961
+ (g == null ? void 0 : g.entryId) ?? null
962
+ ), [c, i] = m(
963
+ (g == null ? void 0 : g.jogakName) ?? null
964
+ ), [p, f] = m({});
965
+ x(() => {
963
966
  const d = () => {
964
- const u = D();
965
- u !== null ? (k(u.entryId), j(u.jogakName), p({})) : (k(null), j(null));
967
+ const u = F();
968
+ u !== null ? (k(u.entryId), i(u.jogakName), f({})) : (k(null), i(null));
966
969
  };
967
970
  return window.addEventListener("popstate", d), () => {
968
971
  window.removeEventListener("popstate", d);
969
972
  };
970
973
  }, []);
971
- const w = R((d, u) => {
972
- k(d), j(u), p({}), So(d, u);
973
- }, []), N = R((d, u) => {
974
- if (k((f) => f === d ? d : f), j((f) => f ?? u), typeof window < "u") {
975
- const f = new URLSearchParams(window.location.search);
976
- f.get("entry") === d && f.get("jogak") === null && (f.set("jogak", u), window.history.replaceState({}, "", `?${f.toString()}`));
974
+ const N = _((d, u) => {
975
+ k(d), i(u), f({}), yo(d, u);
976
+ }, []), C = _((d, u) => {
977
+ if (k((b) => b === d ? d : b), i((b) => b ?? u), typeof window < "u") {
978
+ const b = new URLSearchParams(window.location.search);
979
+ b.get("entry") === d && b.get("jogak") === null && (b.set("jogak", u), window.history.replaceState({}, "", `?${b.toString()}`));
977
980
  }
978
- }, []), h = R((d, u) => {
979
- p((f) => ({ ...f, [d]: u }));
980
- }, []), x = R(() => {
981
- p({});
981
+ }, []), h = _((d, u) => {
982
+ f((b) => ({ ...b, [d]: u }));
983
+ }, []), v = _(() => {
984
+ f({});
982
985
  }, []);
983
- return /* @__PURE__ */ e(K, { registry: l, children: /* @__PURE__ */ c(
986
+ return /* @__PURE__ */ e(K, { registry: n, children: /* @__PURE__ */ j(
984
987
  "div",
985
988
  {
986
989
  "data-jogak-shell": !0,
@@ -989,40 +992,41 @@ function Oo({
989
992
  /* @__PURE__ */ e(
990
993
  eo,
991
994
  {
992
- selectedEntryId: s,
993
- selectedJogakName: g,
994
- onSelect: w
995
+ selectedEntryId: l,
996
+ selectedJogakName: c,
997
+ onSelect: N
995
998
  }
996
999
  ),
997
- /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: s !== null ? /* @__PURE__ */ e(
998
- mo,
1000
+ /* @__PURE__ */ e("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: l !== null ? /* @__PURE__ */ e(
1001
+ fo,
999
1002
  {
1000
- entryId: s,
1001
- jogakName: g,
1002
- overrideArgs: i,
1003
+ entryId: l,
1004
+ jogakName: c,
1005
+ overrideArgs: p,
1003
1006
  onArgChange: h,
1004
- onReset: x,
1007
+ onReset: v,
1005
1008
  codeTheme: r,
1006
- onResolveJogak: N,
1007
- previewIsolation: t
1009
+ onResolveJogak: C,
1010
+ previewIsolation: t,
1011
+ userViteUrl: s
1008
1012
  }
1009
1013
  ) : /* @__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" }) })
1010
1014
  ]
1011
1015
  }
1012
1016
  ) });
1013
1017
  }
1014
- function Eo() {
1015
- const o = T(), a = C(() => o.getAll(), [o]), r = C(() => o.getTree(), [o]), t = C(
1016
- () => (l) => o.search(l),
1018
+ function Lo() {
1019
+ const o = T(), a = R(() => o.getAll(), [o]), r = R(() => o.getTree(), [o]), t = R(
1020
+ () => (s) => o.search(s),
1017
1021
  [o]
1018
1022
  );
1019
1023
  return { entries: a, tree: r, search: t };
1020
1024
  }
1021
1025
  export {
1022
- co as Actions,
1026
+ io as Actions,
1023
1027
  so as Controls,
1024
- Oo as JogakApp,
1025
- mo as Preview,
1028
+ Eo as JogakApp,
1029
+ fo as Preview,
1026
1030
  eo as Sidebar,
1027
- Eo as useRegistry
1031
+ Lo as useRegistry
1028
1032
  };