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

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 (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.cjs +6 -6
  3. package/dist/index.mjs +650 -529
  4. package/dist/lib/adapter-for.d.ts +17 -0
  5. package/package.json +2 -2
  6. package/src/app/preview-frame.tsx +21 -4
  7. package/src/components/Controls/index.tsx +36 -0
  8. package/src/components/Preview/format-usage.ts +4 -1
  9. package/src/components/Preview/index.tsx +66 -10
package/dist/index.mjs CHANGED
@@ -1,520 +1,605 @@
1
- import { jsxs as j, jsx as t } from "react/jsx-runtime";
2
- import { useState as h, useEffect as x, useRef as L, useMemo as _, useCallback as A } from "react";
3
- import { defaultActionChannel as E, ComponentRegistry as Z, defaultRegistry as H } from "@jogak/core";
4
- import { useRegistryMeta as K, useEntry as T, reactAdapter as $, JogakProvider as oo, useRegistry as ao } from "@jogak/core/renderers/react";
5
- import { themes as F, Highlight as eo } from "prism-react-renderer";
6
- import { createPortal as to } from "react-dom";
7
- function U(o) {
8
- var a, e, r = "";
9
- if (typeof o == "string" || typeof o == "number") r += o;
1
+ import { jsxs as j, jsx as r } from "react/jsx-runtime";
2
+ import { useState as h, useEffect as x, useRef as $, useMemo as _, useCallback as R } from "react";
3
+ import { defaultActionChannel as P, ComponentRegistry as T, defaultRegistry as F } from "@jogak/core";
4
+ import { useRegistryMeta as oo, useEntry as eo, JogakProvider as ao, useRegistry as to } from "@jogak/core/renderers/react";
5
+ import { themes as U, Highlight as ro } from "prism-react-renderer";
6
+ import { createPortal as no } from "react-dom";
7
+ function I(o) {
8
+ var e, a, t = "";
9
+ if (typeof o == "string" || typeof o == "number") t += o;
10
10
  else if (typeof o == "object") if (Array.isArray(o)) {
11
- var s = o.length;
12
- for (a = 0; a < s; a++) o[a] && (e = U(o[a])) && (r && (r += " "), r += e);
13
- } else for (e in o) o[e] && (r && (r += " "), r += e);
14
- return r;
11
+ var g = o.length;
12
+ for (e = 0; e < g; e++) o[e] && (a = I(o[e])) && (t && (t += " "), t += a);
13
+ } else for (a in o) o[a] && (t && (t += " "), t += a);
14
+ return t;
15
15
  }
16
- function N() {
17
- for (var o, a, e = 0, r = "", s = arguments.length; e < s; e++) (o = arguments[e]) && (a = U(o)) && (r && (r += " "), r += a);
18
- return r;
16
+ function w() {
17
+ for (var o, e, a = 0, t = "", g = arguments.length; a < g; a++) (o = arguments[a]) && (e = I(o)) && (t && (t += " "), t += e);
18
+ return t;
19
19
  }
20
- function ro({
20
+ function go({
21
21
  selectedEntryId: o,
22
- selectedJogakName: a,
23
- onSelect: e
22
+ selectedJogakName: e,
23
+ onSelect: a
24
24
  }) {
25
- const [r, s] = h(""), { metaTree: n, searchMeta: g } = K(), i = r.trim().length > 0 ? g(r) : null;
25
+ const [t, g] = h(""), { metaTree: s, searchMeta: n } = oo(), i = t.trim().length > 0 ? n(t) : null;
26
26
  return /* @__PURE__ */ j(
27
27
  "aside",
28
28
  {
29
29
  "data-testid": "sidebar",
30
30
  className: "jogak:flex jogak:flex-col jogak:h-full jogak:overflow-auto jogak:border-r jogak:border-[var(--jogak-color-border)]",
31
31
  children: [
32
- /* @__PURE__ */ t("div", { className: "jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]", children: /* @__PURE__ */ t(
32
+ /* @__PURE__ */ r("div", { className: "jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]", children: /* @__PURE__ */ r(
33
33
  "input",
34
34
  {
35
35
  type: "search",
36
36
  placeholder: "Search components...",
37
- value: r,
38
- onChange: (k) => {
39
- s(k.target.value);
37
+ value: t,
38
+ onChange: (l) => {
39
+ g(l.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__ */ t("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: i !== null ? /* @__PURE__ */ t(
46
- no,
45
+ /* @__PURE__ */ r("nav", { className: "jogak:flex-1 jogak:overflow-auto jogak:py-2", children: i !== null ? /* @__PURE__ */ r(
46
+ so,
47
47
  {
48
48
  metas: i,
49
49
  selectedEntryId: o,
50
- selectedJogakName: a,
51
- onSelect: e
50
+ selectedJogakName: e,
51
+ onSelect: a
52
52
  }
53
- ) : /* @__PURE__ */ t(
54
- q,
53
+ ) : /* @__PURE__ */ r(
54
+ Q,
55
55
  {
56
- node: n,
56
+ node: s,
57
57
  selectedEntryId: o,
58
- selectedJogakName: a,
59
- onSelect: e
58
+ selectedJogakName: e,
59
+ onSelect: a
60
60
  }
61
61
  ) })
62
62
  ]
63
63
  }
64
64
  );
65
65
  }
66
- function no({
66
+ function so({
67
67
  metas: o,
68
- selectedEntryId: a,
69
- selectedJogakName: e,
70
- onSelect: r
68
+ selectedEntryId: e,
69
+ selectedJogakName: a,
70
+ onSelect: t
71
71
  }) {
72
- return o.length === 0 ? /* @__PURE__ */ t("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((s) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
73
- G,
72
+ return o.length === 0 ? /* @__PURE__ */ r("p", { className: "jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No results" }) : /* @__PURE__ */ r("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.map((g) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
73
+ X,
74
74
  {
75
- meta: s,
76
- selectedEntryId: a,
77
- selectedJogakName: e,
78
- onSelect: r,
75
+ meta: g,
76
+ selectedEntryId: e,
77
+ selectedJogakName: a,
78
+ onSelect: t,
79
79
  indent: 0
80
80
  }
81
- ) }, s.id)) });
81
+ ) }, g.id)) });
82
82
  }
83
- function q({
83
+ function Q({
84
84
  node: o,
85
- selectedEntryId: a,
86
- selectedJogakName: e,
87
- onSelect: r,
88
- depth: s = 0
85
+ selectedEntryId: e,
86
+ selectedJogakName: a,
87
+ onSelect: t,
88
+ depth: g = 0
89
89
  }) {
90
- return /* @__PURE__ */ t(
90
+ return /* @__PURE__ */ r(
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": `${s * 12}px` },
95
- children: Object.entries(o).map(([n, g]) => /* @__PURE__ */ t("li", { children: "id" in g ? /* @__PURE__ */ t(
96
- G,
94
+ style: { "--jogak-tree-pl": `${g * 12}px` },
95
+ children: Object.entries(o).map(([s, n]) => /* @__PURE__ */ r("li", { children: "id" in n ? /* @__PURE__ */ r(
96
+ X,
97
97
  {
98
- meta: g,
99
- selectedEntryId: a,
100
- selectedJogakName: e,
101
- onSelect: r,
98
+ meta: n,
99
+ selectedEntryId: e,
100
+ selectedJogakName: a,
101
+ onSelect: t,
102
102
  indent: 0
103
103
  }
104
- ) : /* @__PURE__ */ t(
105
- go,
104
+ ) : /* @__PURE__ */ r(
105
+ io,
106
106
  {
107
- label: n,
108
- node: g,
109
- selectedEntryId: a,
110
- selectedJogakName: e,
111
- onSelect: r,
112
- depth: s + 1
107
+ label: s,
108
+ node: n,
109
+ selectedEntryId: e,
110
+ selectedJogakName: a,
111
+ onSelect: t,
112
+ depth: g + 1
113
113
  }
114
- ) }, n))
114
+ ) }, s))
115
115
  }
116
116
  );
117
117
  }
118
- function go({
118
+ function io({
119
119
  label: o,
120
- node: a,
121
- selectedEntryId: e,
122
- selectedJogakName: r,
123
- onSelect: s,
124
- depth: n
120
+ node: e,
121
+ selectedEntryId: a,
122
+ selectedJogakName: t,
123
+ onSelect: g,
124
+ depth: s
125
125
  }) {
126
- const [g, i] = h(!0);
126
+ const [n, i] = h(!0);
127
127
  return /* @__PURE__ */ j("div", { children: [
128
128
  /* @__PURE__ */ j(
129
129
  "button",
130
130
  {
131
131
  type: "button",
132
132
  onClick: () => {
133
- i((k) => !k);
133
+ i((l) => !l);
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": g,
136
+ "aria-expanded": n,
137
137
  children: [
138
- /* @__PURE__ */ t("span", { children: g ? "▾" : "▸" }),
138
+ /* @__PURE__ */ r("span", { children: n ? "▾" : "▸" }),
139
139
  o
140
140
  ]
141
141
  }
142
142
  ),
143
- g && /* @__PURE__ */ t(
144
- q,
143
+ n && /* @__PURE__ */ r(
144
+ Q,
145
145
  {
146
- node: a,
147
- selectedEntryId: e,
148
- selectedJogakName: r,
149
- onSelect: s,
150
- depth: n
146
+ node: e,
147
+ selectedEntryId: a,
148
+ selectedJogakName: t,
149
+ onSelect: g,
150
+ depth: s
151
151
  }
152
152
  )
153
153
  ] });
154
154
  }
155
- function G({
155
+ function X({
156
156
  meta: o,
157
- selectedEntryId: a,
158
- selectedJogakName: e,
159
- onSelect: r,
160
- indent: s
157
+ selectedEntryId: e,
158
+ selectedJogakName: a,
159
+ onSelect: t,
160
+ indent: g
161
161
  }) {
162
- const n = o.id === a, [g, i] = h(n);
162
+ const s = o.id === e, [n, i] = h(s);
163
163
  x(() => {
164
- n && i(!0);
165
- }, [n]);
166
- const k = o.title.split("/").pop() ?? o.title, d = 16 + s * 12;
164
+ s && i(!0);
165
+ }, [s]);
166
+ const l = o.title.split("/").pop() ?? o.title, d = 16 + g * 12;
167
167
  return /* @__PURE__ */ j("div", { children: [
168
168
  /* @__PURE__ */ j(
169
169
  "button",
170
170
  {
171
171
  type: "button",
172
172
  onClick: () => {
173
- if (n)
174
- i((l) => !l);
173
+ if (s)
174
+ i((c) => !c);
175
175
  else {
176
176
  i(!0);
177
- const l = o.jogakNames[0];
178
- l !== void 0 && r(o.id, l);
177
+ const c = o.jogakNames[0];
178
+ c !== void 0 && t(o.id, c);
179
179
  }
180
180
  },
181
- className: N(
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
- 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"
185
+ s ? "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
187
  style: { "--jogak-entry-pl": `${d}px` },
188
- "aria-expanded": g,
188
+ "aria-expanded": n,
189
189
  children: [
190
- /* @__PURE__ */ t("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: g ? "▾" : "▸" }),
191
- k
190
+ /* @__PURE__ */ r("span", { className: "jogak:text-[10px] jogak:shrink-0 jogak:leading-none", children: n ? "▾" : "▸" }),
191
+ l
192
192
  ]
193
193
  }
194
194
  ),
195
- g && /* @__PURE__ */ t("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((l) => {
196
- const c = n && l === e;
197
- return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
195
+ n && /* @__PURE__ */ r("ul", { className: "jogak:list-none jogak:m-0 jogak:p-0", children: o.jogakNames.map((c) => {
196
+ const k = s && c === a;
197
+ return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
198
198
  "button",
199
199
  {
200
200
  type: "button",
201
201
  onClick: () => {
202
- r(o.id, l);
202
+ t(o.id, c);
203
203
  },
204
- className: N(
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
- c ? "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"
208
+ k ? "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
210
  style: { "--jogak-jogak-pl": `${d + 18}px` },
211
- "aria-current": c ? "true" : void 0,
212
- children: l
211
+ "aria-current": k ? "true" : void 0,
212
+ children: c
213
213
  }
214
- ) }, l);
214
+ ) }, c);
215
215
  }) })
216
216
  ] });
217
217
  }
218
- function so(o, a) {
219
- const e = a == null ? void 0 : a.control, r = (a == null ? void 0 : a.action) !== void 0 && a.action !== !1, s = (a == null ? void 0 : a.type) === "function" || typeof o == "function";
220
- return r || s ? "action" : e === "boolean" || typeof o == "boolean" ? "boolean" : e === "number" || e === "range" || typeof o == "number" ? "number" : e === "select" || e === "radio" || (a == null ? void 0 : a.options) !== void 0 && a.options.length > 0 ? "select" : e === "text" || e === "color" || typeof o == "string" ? "text" : "json";
218
+ const q = /* @__PURE__ */ new Map(), M = /* @__PURE__ */ new Map();
219
+ async function O(o) {
220
+ const e = o, a = q.get(e);
221
+ if (a !== void 0) return a;
222
+ const t = M.get(e);
223
+ if (t !== void 0) return t;
224
+ const g = lo(e);
225
+ M.set(e, g);
226
+ try {
227
+ const s = await g;
228
+ return q.set(e, s), s;
229
+ } finally {
230
+ M.delete(e);
231
+ }
232
+ }
233
+ async function lo(o) {
234
+ switch (o) {
235
+ case "react":
236
+ case "next":
237
+ return (await import("@jogak/core/renderers/react")).reactAdapter;
238
+ case "vue":
239
+ return (await import("@jogak/core/renderers/vue")).vueAdapter;
240
+ case "svelte":
241
+ return (await import("@jogak/core/renderers/svelte")).svelteAdapter;
242
+ case "web-components": {
243
+ const e = await import("@jogak/core/renderers/web-components");
244
+ return jo(e.defineJogakElement);
245
+ }
246
+ default:
247
+ throw new Error(
248
+ `[jogak/ui] Unknown framework: '${o}'. Expected one of: 'react' | 'next' | 'vue' | 'svelte' | 'web-components'.`
249
+ );
250
+ }
251
+ }
252
+ function co(o) {
253
+ return `jogak-${o.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-+|-+$/gu, "") || "entry"}`;
254
+ }
255
+ function ko(o) {
256
+ return o == null ? null : typeof o == "string" ? o : typeof o == "number" || typeof o == "boolean" ? String(o) : typeof o == "function" || typeof o == "object" ? null : String(o);
221
257
  }
222
- const O = "jogak:px-2 jogak:py-1 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)] jogak:text-[13px] jogak:w-full jogak:max-w-[280px]", P = "jogak:px-5 jogak:py-1.5 jogak:text-left jogak:text-[var(--jogak-color-fg-muted)] jogak:font-medium jogak:text-[12px] jogak:border-b jogak:border-[var(--jogak-color-border)]", M = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
223
- function lo({ argKey: o, value: a, argType: e, onArgChange: r }) {
224
- switch (so(a, e)) {
258
+ function jo(o) {
259
+ return {
260
+ framework: "web-components",
261
+ render(e, a, t) {
262
+ const g = t, s = co(e.id);
263
+ o(s, e);
264
+ let n = g._jogakWCElement;
265
+ (n === void 0 || g._jogakWCTagName !== s) && (n !== void 0 && n.remove(), n = document.createElement(s), t.replaceChildren(n), g._jogakWCElement = n, g._jogakWCTagName = s);
266
+ for (const [i, l] of Object.entries(a)) {
267
+ const d = ko(l);
268
+ d === null ? n.removeAttribute(i) : n.setAttribute(i, d);
269
+ }
270
+ },
271
+ unmount(e) {
272
+ const a = e, t = a._jogakWCElement;
273
+ t !== void 0 && t.remove(), delete a._jogakWCElement, delete a._jogakWCTagName;
274
+ }
275
+ };
276
+ }
277
+ function uo(o, e) {
278
+ const a = e == null ? void 0 : e.control, t = (e == null ? void 0 : e.action) !== void 0 && e.action !== !1, g = (e == null ? void 0 : e.type) === "function" || typeof o == "function";
279
+ return t || g ? "action" : a === "boolean" || typeof o == "boolean" ? "boolean" : a === "number" || a === "range" || typeof o == "number" ? "number" : a === "select" || a === "radio" || (e == null ? void 0 : e.options) !== void 0 && e.options.length > 0 ? "select" : a === "text" || a === "color" || typeof o == "string" ? "text" : "json";
280
+ }
281
+ const W = "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]", E = "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)]", L = "jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";
282
+ function fo({ argKey: o, value: e, argType: a, onArgChange: t }) {
283
+ switch (uo(e, a)) {
225
284
  case "boolean":
226
- return /* @__PURE__ */ t(
285
+ return /* @__PURE__ */ r(
227
286
  "input",
228
287
  {
229
288
  type: "checkbox",
230
- checked: a === !0,
231
- onChange: (n) => {
232
- r(o, n.target.checked);
289
+ checked: e === !0,
290
+ onChange: (s) => {
291
+ t(o, s.target.checked);
233
292
  },
234
293
  className: "jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"
235
294
  }
236
295
  );
237
296
  case "number":
238
- return /* @__PURE__ */ t(
297
+ return /* @__PURE__ */ r(
239
298
  "input",
240
299
  {
241
300
  type: "number",
242
- value: typeof a == "number" ? a : "",
243
- onChange: (n) => {
244
- r(o, n.target.valueAsNumber);
301
+ value: typeof e == "number" ? e : "",
302
+ onChange: (s) => {
303
+ t(o, s.target.valueAsNumber);
245
304
  },
246
- className: O
305
+ className: W
247
306
  }
248
307
  );
249
308
  case "select": {
250
- const n = (e == null ? void 0 : e.options) ?? [];
251
- return /* @__PURE__ */ t(
309
+ const s = (a == null ? void 0 : a.options) ?? [];
310
+ return /* @__PURE__ */ r(
252
311
  "select",
253
312
  {
254
- value: String(a ?? ""),
255
- onChange: (g) => {
256
- r(o, g.target.value);
313
+ value: String(e ?? ""),
314
+ onChange: (n) => {
315
+ t(o, n.target.value);
257
316
  },
258
- className: O,
259
- children: n.map((g) => /* @__PURE__ */ t("option", { value: String(g), children: String(g) }, String(g)))
317
+ className: W,
318
+ children: s.map((n) => /* @__PURE__ */ r("option", { value: String(n), children: String(n) }, String(n)))
260
319
  }
261
320
  );
262
321
  }
263
322
  case "text":
264
- return /* @__PURE__ */ t(
323
+ return /* @__PURE__ */ r(
265
324
  "input",
266
325
  {
267
326
  type: "text",
268
- value: typeof a == "string" ? a : String(a ?? ""),
269
- onChange: (n) => {
270
- r(o, n.target.value);
327
+ value: typeof e == "string" ? e : String(e ?? ""),
328
+ onChange: (s) => {
329
+ t(o, s.target.value);
271
330
  },
272
- className: O
331
+ className: W
273
332
  }
274
333
  );
275
334
  case "action":
276
- return /* @__PURE__ */ t("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)" });
335
+ return /* @__PURE__ */ r("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)" });
277
336
  case "json":
278
- return /* @__PURE__ */ t("code", { className: "jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]", children: JSON.stringify(a) });
337
+ return /* @__PURE__ */ r("code", { className: "jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]", children: JSON.stringify(e) });
279
338
  }
280
339
  }
281
- function io({ args: o, argTypes: a, onArgChange: e }) {
282
- const s = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(a)])).map((n) => [n, o[n]]);
340
+ function po({ args: o, argTypes: e, onArgChange: a }) {
341
+ const g = Array.from(/* @__PURE__ */ new Set([...Object.keys(o), ...Object.keys(e)])).map((n) => [n, o[n]]), s = g.some(
342
+ ([n]) => {
343
+ var i;
344
+ return ((i = e[n]) == null ? void 0 : i.defaultValue) !== void 0;
345
+ }
346
+ );
283
347
  return /* @__PURE__ */ j("div", { className: "jogak:border-t-2 jogak:border-[var(--jogak-color-border)]", children: [
284
- /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)]", children: "Controls" }),
285
- s.length === 0 ? /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]", children: "No args defined" }) : /* @__PURE__ */ j("table", { className: "jogak:w-full jogak:border-collapse jogak:text-[13px]", children: [
286
- /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ j("tr", { children: [
287
- /* @__PURE__ */ t("th", { className: P, children: "Name" }),
288
- /* @__PURE__ */ t("th", { className: P, children: "Control" }),
289
- /* @__PURE__ */ t("th", { className: P, children: "Description" })
348
+ /* @__PURE__ */ r("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" }),
349
+ g.length === 0 ? /* @__PURE__ */ r("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: [
350
+ /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ j("tr", { children: [
351
+ /* @__PURE__ */ r("th", { className: E, children: "Name" }),
352
+ /* @__PURE__ */ r("th", { className: E, children: "Control" }),
353
+ s && /* @__PURE__ */ r("th", { className: E, children: "Default" }),
354
+ /* @__PURE__ */ r("th", { className: E, children: "Description" })
290
355
  ] }) }),
291
- /* @__PURE__ */ t("tbody", { children: s.map(([n, g]) => {
292
- const i = a[n];
356
+ /* @__PURE__ */ r("tbody", { children: g.map(([n, i]) => {
357
+ const l = e[n];
293
358
  return /* @__PURE__ */ j("tr", { children: [
294
- /* @__PURE__ */ t(
359
+ /* @__PURE__ */ r(
295
360
  "td",
296
361
  {
297
- className: N(
298
- M,
362
+ className: w(
363
+ L,
299
364
  "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"
300
365
  ),
301
366
  children: n
302
367
  }
303
368
  ),
304
- /* @__PURE__ */ t("td", { className: M, children: /* @__PURE__ */ t(
305
- lo,
369
+ /* @__PURE__ */ r("td", { className: L, children: /* @__PURE__ */ r(
370
+ fo,
306
371
  {
307
372
  argKey: n,
308
- value: g,
309
- argType: i,
310
- onArgChange: e
373
+ value: i,
374
+ argType: l,
375
+ onArgChange: a
311
376
  }
312
377
  ) }),
313
- /* @__PURE__ */ t("td", { className: N(M, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (i == null ? void 0 : i.description) ?? "" })
378
+ s && /* @__PURE__ */ r(
379
+ "td",
380
+ {
381
+ className: w(
382
+ L,
383
+ "jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:whitespace-nowrap"
384
+ ),
385
+ children: (l == null ? void 0 : l.defaultValue) !== void 0 ? mo(l.defaultValue) : ""
386
+ }
387
+ ),
388
+ /* @__PURE__ */ r("td", { className: w(L, "jogak:text-[var(--jogak-color-fg-subtle)]"), children: (l == null ? void 0 : l.description) ?? "" })
314
389
  ] }, n);
315
390
  }) })
316
391
  ] })
317
392
  ] });
318
393
  }
319
- function ko(o) {
394
+ function mo(o) {
395
+ if (typeof o == "string") return `'${o}'`;
396
+ if (typeof o == "number" || typeof o == "boolean" || o === null)
397
+ return String(o);
398
+ try {
399
+ return JSON.stringify(o);
400
+ } catch {
401
+ return String(o);
402
+ }
403
+ }
404
+ function bo(o) {
320
405
  if (o.length === 0) return "()";
321
406
  try {
322
- return o.map((a) => {
323
- var e;
324
- if (a === null) return "null";
325
- if (a === void 0) return "undefined";
326
- if (typeof a == "function") return "[Function]";
327
- if (typeof a == "object") {
328
- const r = ((e = a.constructor) == null ? void 0 : e.name) ?? "Object";
329
- return r !== "Object" && r !== "Array" ? `[${r}]` : JSON.stringify(a);
407
+ return o.map((e) => {
408
+ var a;
409
+ if (e === null) return "null";
410
+ if (e === void 0) return "undefined";
411
+ if (typeof e == "function") return "[Function]";
412
+ if (typeof e == "object") {
413
+ const t = ((a = e.constructor) == null ? void 0 : a.name) ?? "Object";
414
+ return t !== "Object" && t !== "Array" ? `[${t}]` : JSON.stringify(e);
330
415
  }
331
- return JSON.stringify(a);
416
+ return JSON.stringify(e);
332
417
  }).join(", ");
333
418
  } catch {
334
419
  return "[unserializable]";
335
420
  }
336
421
  }
337
- function co(o) {
338
- const a = new Date(o), e = a.getHours().toString().padStart(2, "0"), r = a.getMinutes().toString().padStart(2, "0"), s = a.getSeconds().toString().padStart(2, "0"), n = a.getMilliseconds().toString().padStart(3, "0");
339
- return `${e}:${r}:${s}.${n}`;
422
+ function ho(o) {
423
+ const e = new Date(o), a = e.getHours().toString().padStart(2, "0"), t = e.getMinutes().toString().padStart(2, "0"), g = e.getSeconds().toString().padStart(2, "0"), s = e.getMilliseconds().toString().padStart(3, "0");
424
+ return `${a}:${t}:${g}.${s}`;
340
425
  }
341
- function jo() {
342
- const [o, a] = h(() => E.getLogs());
343
- x(() => E.subscribe(a), []);
344
- const e = o.length === 0;
426
+ function xo() {
427
+ const [o, e] = h(() => P.getLogs());
428
+ x(() => P.subscribe(e), []);
429
+ const a = o.length === 0;
345
430
  return /* @__PURE__ */ j("div", { className: "jogak:h-full jogak:flex jogak:flex-col", children: [
346
431
  /* @__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
432
  /* @__PURE__ */ j("span", { children: [
348
433
  "Actions ",
349
434
  o.length > 0 && `(${o.length.toString()})`
350
435
  ] }),
351
- /* @__PURE__ */ t(
436
+ /* @__PURE__ */ r(
352
437
  "button",
353
438
  {
354
439
  type: "button",
355
440
  onClick: () => {
356
- E.clear();
441
+ P.clear();
357
442
  },
358
- disabled: e,
359
- className: N(
443
+ disabled: a,
444
+ className: w(
360
445
  "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
- e ? "jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default" : "jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"
446
+ a ? "jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default" : "jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"
362
447
  ),
363
448
  children: "Clear"
364
449
  }
365
450
  )
366
451
  ] }),
367
- /* @__PURE__ */ t("div", { className: "jogak:flex-1 jogak:overflow-auto", children: e ? /* @__PURE__ */ t("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none", children: "함수 prop이 호출되면 여기에 기록됩니다" }) : /* @__PURE__ */ t("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((r) => /* @__PURE__ */ j(
452
+ /* @__PURE__ */ r("div", { className: "jogak:flex-1 jogak:overflow-auto", children: a ? /* @__PURE__ */ r("div", { className: "jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none", children: "함수 prop이 호출되면 여기에 기록됩니다" }) : /* @__PURE__ */ r("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
453
  "li",
369
454
  {
370
455
  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
456
  children: [
372
- /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: co(r.timestamp) }),
373
- /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: r.name }),
457
+ /* @__PURE__ */ r("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]", children: ho(t.timestamp) }),
458
+ /* @__PURE__ */ r("span", { className: "jogak:text-[var(--jogak-color-violet)] jogak:font-semibold", children: t.name }),
374
459
  /* @__PURE__ */ j("span", { className: "jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1", children: [
375
460
  "(",
376
- ko(r.args),
461
+ bo(t.args),
377
462
  ")"
378
463
  ] })
379
464
  ]
380
465
  },
381
- r.id
466
+ t.id
382
467
  )) }) })
383
468
  ] });
384
469
  }
385
- function uo({
470
+ function vo({
386
471
  children: o,
387
- className: a,
388
- style: e,
389
- "data-testid": r
472
+ className: e,
473
+ style: a,
474
+ "data-testid": t
390
475
  }) {
391
- const s = L(null), [n, g] = h(null);
476
+ const g = $(null), [s, n] = h(null);
392
477
  return x(() => {
393
- const i = s.current;
478
+ const i = g.current;
394
479
  if (i === null) return;
395
- const k = i.shadowRoot ?? i.attachShadow({ mode: "open" });
396
- g(k);
397
- }, []), /* @__PURE__ */ t(
480
+ const l = i.shadowRoot ?? i.attachShadow({ mode: "open" });
481
+ n(l);
482
+ }, []), /* @__PURE__ */ r(
398
483
  "div",
399
484
  {
400
- ref: s,
401
- className: a,
402
- "data-testid": r,
403
- style: e,
404
- children: n !== null ? to(o, n) : null
485
+ ref: g,
486
+ className: e,
487
+ "data-testid": t,
488
+ style: a,
489
+ children: s !== null ? no(o, s) : null
405
490
  }
406
491
  );
407
492
  }
408
- function po({
493
+ function wo({
409
494
  entry: o,
410
- args: a,
411
- userPreviewUrl: e,
412
- previewEntryPath: r,
413
- className: s,
414
- "data-testid": n
495
+ args: e,
496
+ userPreviewUrl: a,
497
+ previewEntryPath: t,
498
+ className: g,
499
+ "data-testid": s
415
500
  }) {
416
- const g = L(null), [i, k] = h(!1), d = e !== "" ? `${e}${r}` : "/preview-frame.html";
501
+ const n = $(null), [i, l] = h(!1), d = a !== "" ? `${a}${t}` : "/preview-frame.html";
417
502
  return x(() => {
418
- const l = (c) => {
419
- const p = g.current;
420
- if (p === null || c.source !== p.contentWindow) return;
421
- const f = c.data;
422
- f == null || typeof f != "object" || f.type === "jogak:ready" && k(!0);
503
+ const c = (k) => {
504
+ const f = n.current;
505
+ if (f === null || k.source !== f.contentWindow) return;
506
+ const p = k.data;
507
+ p == null || typeof p != "object" || p.type === "jogak:ready" && l(!0);
423
508
  };
424
- return window.addEventListener("message", l), () => {
425
- window.removeEventListener("message", l);
509
+ return window.addEventListener("message", c), () => {
510
+ window.removeEventListener("message", c);
426
511
  };
427
512
  }, []), x(() => {
428
- var c;
513
+ var k;
429
514
  if (!i) return;
430
- const l = g.current;
431
- l !== null && ((c = l.contentWindow) == null || c.postMessage(
432
- { type: "jogak:setProps", entryId: o.id, args: a },
515
+ const c = n.current;
516
+ c !== null && ((k = c.contentWindow) == null || k.postMessage(
517
+ { type: "jogak:setProps", entryId: o.id, args: e },
433
518
  "*"
434
519
  ));
435
- }, [i, o, a]), x(() => {
436
- const l = g.current;
520
+ }, [i, o, e]), x(() => {
521
+ const c = n.current;
437
522
  return () => {
438
- l !== null && queueMicrotask(() => {
439
- var c;
440
- (c = l.contentWindow) == null || c.postMessage({ type: "jogak:unmount" }, "*");
523
+ c !== null && queueMicrotask(() => {
524
+ var k;
525
+ (k = c.contentWindow) == null || k.postMessage({ type: "jogak:unmount" }, "*");
441
526
  });
442
527
  };
443
- }, []), /* @__PURE__ */ t(
528
+ }, []), /* @__PURE__ */ r(
444
529
  "iframe",
445
530
  {
446
- ref: g,
531
+ ref: n,
447
532
  src: d,
448
533
  title: "Preview",
449
- className: s,
450
- "data-testid": n
534
+ className: g,
535
+ "data-testid": s
451
536
  }
452
537
  );
453
538
  }
454
- const fo = 60;
455
- function mo(o, a) {
456
- const e = bo(o), { children: r, restProps: s } = ho(a), n = Object.entries(s).filter(([, c]) => c !== void 0).map(([c, p]) => vo(c, p)), g = xo(r), i = g !== null, k = n.length === 0 ? "" : " " + n.join(" "), d = i ? `<${e}${k}>${g ?? ""}</${e}>` : `<${e}${k} />`;
457
- if (d.length <= fo && !d.includes(`
539
+ const No = 60;
540
+ function yo(o, e) {
541
+ const a = Co(o), { children: t, restProps: g } = So(e), s = Object.entries(g).filter(([, k]) => k !== void 0).map(([k, f]) => _o(k, f)), n = $o(t), i = n !== null, l = s.length === 0 ? "" : " " + s.join(" "), d = i ? `<${a}${l}>${n ?? ""}</${a}>` : `<${a}${l} />`;
542
+ if (d.length <= No && !d.includes(`
458
543
  `))
459
544
  return d;
460
- const l = n.length === 0 ? "" : `
461
- ` + n.join(`
545
+ const c = s.length === 0 ? "" : `
546
+ ` + s.join(`
462
547
  `) + `
463
548
  `;
464
549
  if (i) {
465
- const c = (g ?? "").split(`
466
- `).map((p) => ` ${p}`).join(`
550
+ const k = (n ?? "").split(`
551
+ `).map((f) => ` ${f}`).join(`
467
552
  `);
468
- return `<${e}${l}>
469
- ${c}
470
- </${e}>`;
553
+ return `<${a}${c}>
554
+ ${k}
555
+ </${a}>`;
471
556
  }
472
- return `<${e}${l}/>`;
557
+ return `<${a}${c}/>`;
473
558
  }
474
- function bo(o) {
475
- const a = o.meta.component;
476
- if (a !== void 0) {
477
- if (typeof a.displayName == "string" && a.displayName.length > 0)
478
- return a.displayName;
479
- if (typeof a.name == "string" && a.name.length > 0)
480
- return a.name;
559
+ function Co(o) {
560
+ const e = o.meta.component;
561
+ if (e != null) {
562
+ if (typeof e.displayName == "string" && e.displayName.length > 0)
563
+ return e.displayName;
564
+ if (typeof e.name == "string" && e.name.length > 0)
565
+ return e.name;
481
566
  }
482
- const e = o.title.split("/").pop();
483
- return e !== void 0 && e.length > 0 ? e : "Component";
567
+ const a = o.title.split("/").pop();
568
+ return a !== void 0 && a.length > 0 ? a : "Component";
484
569
  }
485
- function ho(o) {
486
- const { children: a, ...e } = o;
487
- return { children: a, restProps: e };
570
+ function So(o) {
571
+ const { children: e, ...a } = o;
572
+ return { children: e, restProps: a };
488
573
  }
489
- function xo(o) {
490
- return o == null ? null : typeof o == "string" ? o.length === 0 ? null : o : typeof o == "number" || typeof o == "bigint" ? `{${o.toString()}}` : typeof o == "boolean" ? null : `{${Q(o)}}`;
574
+ function $o(o) {
575
+ return o == null ? null : typeof o == "string" ? o.length === 0 ? null : o : typeof o == "number" || typeof o == "bigint" ? `{${o.toString()}}` : typeof o == "boolean" ? null : `{${Y(o)}}`;
491
576
  }
492
- function vo(o, a) {
493
- if (a === !0) return o;
494
- if (a === !1) return `${o}={false}`;
495
- if (a === null) return `${o}={null}`;
496
- if (typeof a == "string") {
497
- const e = a.replace(/"/gu, "&quot;");
498
- return `${o}="${e}"`;
577
+ function _o(o, e) {
578
+ if (e === !0) return o;
579
+ if (e === !1) return `${o}={false}`;
580
+ if (e === null) return `${o}={null}`;
581
+ if (typeof e == "string") {
582
+ const a = e.replace(/"/gu, "&quot;");
583
+ return `${o}="${a}"`;
499
584
  }
500
- return typeof a == "number" || typeof a == "bigint" ? `${o}={${a.toString()}}` : typeof a == "function" ? `${o}={fn}` : `${o}={${Q(a)}}`;
585
+ return typeof e == "number" || typeof e == "bigint" ? `${o}={${e.toString()}}` : typeof e == "function" ? `${o}={fn}` : `${o}={${Y(e)}}`;
501
586
  }
502
- function Q(o) {
587
+ function Y(o) {
503
588
  try {
504
589
  return JSON.stringify(o);
505
590
  } catch {
506
591
  return String(o);
507
592
  }
508
593
  }
509
- const X = {
594
+ const Z = {
510
595
  mobile: 375,
511
596
  tablet: 768,
512
597
  desktop: "none"
513
- }, wo = {
598
+ }, Ao = {
514
599
  mobile: "Mobile",
515
600
  tablet: "Tablet",
516
601
  desktop: "Desktop"
517
- }, V = {
602
+ }, J = {
518
603
  white: {
519
604
  "--jogak-canvas-bg": "#ffffff",
520
605
  "--jogak-canvas-bg-image": "none",
@@ -533,24 +618,24 @@ const X = {
533
618
  "--jogak-canvas-bg-size": "16px 16px",
534
619
  "--jogak-canvas-bg-position": "0 0, 0 8px, 8px -8px, -8px 0px"
535
620
  }
536
- }, B = "jogak:bg-[var(--jogak-canvas-bg)] jogak:bg-[image:var(--jogak-canvas-bg-image)] jogak:bg-[length:var(--jogak-canvas-bg-size)] jogak:bg-[position:var(--jogak-canvas-bg-position)]";
537
- function No(o) {
538
- return F[o] ?? F.vsDark;
621
+ }, z = "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)]";
622
+ function Ro(o) {
623
+ return U[o] ?? U.vsDark;
539
624
  }
540
- function yo({
625
+ function Eo({
541
626
  entryId: o,
542
- jogakName: a,
543
- overrideArgs: e,
544
- onArgChange: r,
545
- onReset: s,
546
- codeTheme: n,
547
- onResolveJogak: g,
627
+ jogakName: e,
628
+ overrideArgs: a,
629
+ onArgChange: t,
630
+ onReset: g,
631
+ codeTheme: s,
632
+ onResolveJogak: n,
548
633
  previewIsolation: i = "iframe",
549
- userPreviewUrl: k = "",
634
+ userPreviewUrl: l = "",
550
635
  previewEntryPath: d = "/__jogak_preview__/index.html"
551
636
  }) {
552
- const l = T(o), [c, p] = h("desktop"), [f, S] = h("white"), [y, v] = h("controls"), w = No(n);
553
- return l.status === "unknown" ? /* @__PURE__ */ j(
637
+ const c = eo(o, { skipHydrate: i === "iframe" }), [k, f] = h("desktop"), [p, C] = h("white"), [y, v] = h("controls"), N = Ro(s);
638
+ return c.status === "unknown" ? /* @__PURE__ */ j(
554
639
  "div",
555
640
  {
556
641
  "data-testid": "preview-not-found",
@@ -560,7 +645,7 @@ function yo({
560
645
  o
561
646
  ]
562
647
  }
563
- ) : l.status === "error" ? /* @__PURE__ */ j(
648
+ ) : c.status === "error" ? /* @__PURE__ */ j(
564
649
  "div",
565
650
  {
566
651
  "data-testid": "preview-error",
@@ -570,76 +655,76 @@ function yo({
570
655
  "Failed to load entry: ",
571
656
  o
572
657
  ] }),
573
- /* @__PURE__ */ t("pre", { className: "jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full", children: l.error.message })
658
+ /* @__PURE__ */ r("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 })
574
659
  ]
575
660
  }
576
- ) : l.status === "loading" ? /* @__PURE__ */ t(
577
- So,
661
+ ) : c.status === "loading" ? /* @__PURE__ */ r(
662
+ Lo,
578
663
  {
579
- meta: l.meta,
580
- jogakName: a,
581
- viewport: c,
582
- bgMode: f,
583
- onViewportChange: p,
584
- onBgModeChange: S
664
+ meta: c.meta,
665
+ jogakName: e,
666
+ viewport: k,
667
+ bgMode: p,
668
+ onViewportChange: f,
669
+ onBgModeChange: C
585
670
  }
586
- ) : /* @__PURE__ */ t(
587
- Co,
671
+ ) : /* @__PURE__ */ r(
672
+ Oo,
588
673
  {
589
- entry: l.entry,
590
- jogakName: a,
591
- overrideArgs: e,
592
- onArgChange: r,
593
- onReset: s,
594
- onResolveJogak: g,
595
- viewport: c,
596
- bgMode: f,
674
+ entry: c.entry,
675
+ jogakName: e,
676
+ overrideArgs: a,
677
+ onArgChange: t,
678
+ onReset: g,
679
+ onResolveJogak: n,
680
+ viewport: k,
681
+ bgMode: p,
597
682
  bottomTab: y,
598
- onViewportChange: p,
599
- onBgModeChange: S,
683
+ onViewportChange: f,
684
+ onBgModeChange: C,
600
685
  onBottomTabChange: v,
601
- prismTheme: w,
686
+ prismTheme: N,
602
687
  previewIsolation: i,
603
- userPreviewUrl: k,
688
+ userPreviewUrl: l,
604
689
  previewEntryPath: d
605
690
  }
606
691
  );
607
692
  }
608
- function So({
693
+ function Lo({
609
694
  meta: o,
610
- jogakName: a,
611
- viewport: e,
612
- bgMode: r,
613
- onViewportChange: s,
614
- onBgModeChange: n
695
+ jogakName: e,
696
+ viewport: a,
697
+ bgMode: t,
698
+ onViewportChange: g,
699
+ onBgModeChange: s
615
700
  }) {
616
- const g = a ?? o.jogakNames[0] ?? "...", i = X[e];
701
+ const n = e ?? o.jogakNames[0] ?? "...", i = Z[a];
617
702
  return /* @__PURE__ */ j(
618
703
  "div",
619
704
  {
620
705
  "data-testid": "preview-loading",
621
706
  className: "jogak:flex jogak:flex-col jogak:h-full",
622
707
  children: [
623
- /* @__PURE__ */ t(
624
- Y,
708
+ /* @__PURE__ */ r(
709
+ K,
625
710
  {
626
711
  title: o.title,
627
- jogakName: g,
628
- viewport: e,
629
- bgMode: r,
630
- onViewportChange: s,
631
- onBgModeChange: n,
712
+ jogakName: n,
713
+ viewport: a,
714
+ bgMode: t,
715
+ onViewportChange: g,
716
+ onBgModeChange: s,
632
717
  showReset: !1,
633
718
  onReset: () => {
634
719
  }
635
720
  }
636
721
  ),
637
- /* @__PURE__ */ t(
722
+ /* @__PURE__ */ r(
638
723
  "div",
639
724
  {
640
- className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
641
- style: V[r],
642
- children: /* @__PURE__ */ t(
725
+ className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${z}`,
726
+ style: J[t],
727
+ children: /* @__PURE__ */ r(
643
728
  "div",
644
729
  {
645
730
  className: "jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",
@@ -659,63 +744,63 @@ function So({
659
744
  }
660
745
  );
661
746
  }
662
- function Co({
747
+ function Oo({
663
748
  entry: o,
664
- jogakName: a,
665
- overrideArgs: e,
666
- onArgChange: r,
667
- onReset: s,
668
- onResolveJogak: n,
669
- viewport: g,
749
+ jogakName: e,
750
+ overrideArgs: a,
751
+ onArgChange: t,
752
+ onReset: g,
753
+ onResolveJogak: s,
754
+ viewport: n,
670
755
  bgMode: i,
671
- bottomTab: k,
756
+ bottomTab: l,
672
757
  onViewportChange: d,
673
- onBgModeChange: l,
674
- onBottomTabChange: c,
675
- prismTheme: p,
676
- previewIsolation: f,
677
- userPreviewUrl: S,
758
+ onBgModeChange: c,
759
+ onBottomTabChange: k,
760
+ prismTheme: f,
761
+ previewIsolation: p,
762
+ userPreviewUrl: C,
678
763
  previewEntryPath: y
679
764
  }) {
680
- var z;
681
- const v = a ?? ((z = o.jogaks[0]) == null ? void 0 : z.name) ?? null;
765
+ var B;
766
+ const v = e ?? ((B = o.jogaks[0]) == null ? void 0 : B.name) ?? null;
682
767
  if (x(() => {
683
- a === null && v !== null && n !== void 0 && n(o.id, v);
684
- }, [a, v, o.id, n]), v === null)
768
+ e === null && v !== null && s !== void 0 && s(o.id, v);
769
+ }, [e, v, o.id, s]), v === null)
685
770
  return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
686
771
  "Entry has no jogaks: ",
687
772
  o.id
688
773
  ] });
689
- const w = o.jogaks.find((C) => C.name === v);
690
- if (w === void 0)
774
+ const N = o.jogaks.find((S) => S.name === v);
775
+ if (N === void 0)
691
776
  return /* @__PURE__ */ j("div", { className: "jogak:p-6 jogak:text-[var(--jogak-color-error)]", children: [
692
777
  "Jogak not found: ",
693
778
  v
694
779
  ] });
695
- const R = { ...w.args ?? {}, ...e }, u = {
780
+ const A = { ...N.args ?? {}, ...a }, u = {
696
781
  ...o.meta.argTypes ?? {},
697
- ...w.argTypes ?? {}
698
- }, m = Object.keys(e).length > 0, b = X[g];
782
+ ...N.argTypes ?? {}
783
+ }, m = Object.keys(a).length > 0, b = Z[n];
699
784
  return /* @__PURE__ */ j("div", { className: "jogak:flex jogak:flex-col jogak:h-full", children: [
700
- /* @__PURE__ */ t(
701
- Y,
785
+ /* @__PURE__ */ r(
786
+ K,
702
787
  {
703
788
  title: o.title,
704
- jogakName: w.name,
705
- viewport: g,
789
+ jogakName: N.name,
790
+ viewport: n,
706
791
  bgMode: i,
707
792
  onViewportChange: d,
708
- onBgModeChange: l,
793
+ onBgModeChange: c,
709
794
  showReset: m,
710
- onReset: s
795
+ onReset: g
711
796
  }
712
797
  ),
713
- /* @__PURE__ */ t(
798
+ /* @__PURE__ */ r(
714
799
  "div",
715
800
  {
716
- className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${B}`,
717
- style: V[i],
718
- children: /* @__PURE__ */ t(
801
+ className: `jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${z}`,
802
+ style: J[i],
803
+ children: /* @__PURE__ */ r(
719
804
  "div",
720
805
  {
721
806
  "data-jogak-content": !0,
@@ -723,17 +808,17 @@ function Co({
723
808
  style: {
724
809
  "--jogak-canvas-mw": b === "none" ? "100%" : `${b}px`
725
810
  },
726
- children: /* @__PURE__ */ t(
727
- $o,
811
+ children: /* @__PURE__ */ r(
812
+ Po,
728
813
  {
729
814
  entry: o,
730
- args: R,
731
- theme: p,
732
- previewIsolation: f,
733
- userPreviewUrl: S,
815
+ args: A,
816
+ theme: f,
817
+ previewIsolation: p,
818
+ userPreviewUrl: C,
734
819
  previewEntryPath: y
735
820
  },
736
- `${o.id}/${w.name}`
821
+ `${o.id}/${N.name}`
737
822
  )
738
823
  }
739
824
  )
@@ -745,97 +830,97 @@ function Co({
745
830
  "data-testid": "bottom-panel",
746
831
  className: "jogak:h-[260px] jogak:shrink-0 jogak:flex jogak:flex-col jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",
747
832
  children: [
748
- /* @__PURE__ */ t(
833
+ /* @__PURE__ */ r(
749
834
  "div",
750
835
  {
751
836
  role: "tablist",
752
837
  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",
753
- children: ["controls", "actions"].map((C) => {
754
- const D = k === C;
755
- return /* @__PURE__ */ t(
838
+ children: ["controls", "actions"].map((S) => {
839
+ const H = l === S;
840
+ return /* @__PURE__ */ r(
756
841
  "button",
757
842
  {
758
843
  type: "button",
759
844
  role: "tab",
760
- "aria-selected": D,
845
+ "aria-selected": H,
761
846
  onClick: () => {
762
- c(C);
847
+ k(S);
763
848
  },
764
- className: N(
849
+ className: w(
765
850
  "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",
766
- D ? "jogak:font-semibold jogak:text-[var(--jogak-color-fg-strong)] jogak:border-[var(--jogak-color-accent)]" : "jogak:font-medium jogak:text-[var(--jogak-color-fg-muted)] jogak:border-transparent"
851
+ H ? "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"
767
852
  ),
768
- children: C
853
+ children: S
769
854
  },
770
- C
855
+ S
771
856
  );
772
857
  })
773
858
  }
774
859
  ),
775
- /* @__PURE__ */ t("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: k === "controls" ? /* @__PURE__ */ t(
776
- io,
860
+ /* @__PURE__ */ r("div", { className: "jogak:flex-1 jogak:min-h-0 jogak:overflow-auto", children: l === "controls" ? /* @__PURE__ */ r(
861
+ po,
777
862
  {
778
- args: R,
863
+ args: A,
779
864
  argTypes: u,
780
- onArgChange: r
865
+ onArgChange: t
781
866
  }
782
- ) : /* @__PURE__ */ t(jo, {}) })
867
+ ) : /* @__PURE__ */ r(xo, {}) })
783
868
  ]
784
869
  }
785
870
  )
786
871
  ] });
787
872
  }
788
- function Y({
873
+ function K({
789
874
  title: o,
790
- jogakName: a,
791
- viewport: e,
792
- bgMode: r,
793
- onViewportChange: s,
794
- onBgModeChange: n,
795
- showReset: g,
875
+ jogakName: e,
876
+ viewport: a,
877
+ bgMode: t,
878
+ onViewportChange: g,
879
+ onBgModeChange: s,
880
+ showReset: n,
796
881
  onReset: i
797
882
  }) {
798
883
  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: [
799
884
  /* @__PURE__ */ j("div", { className: "jogak:flex-1 jogak:text-[13px]", children: [
800
- /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)]", children: o }),
801
- /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none", children: "/" }),
802
- /* @__PURE__ */ t("span", { className: "jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold", children: a })
885
+ /* @__PURE__ */ r("span", { className: "jogak:text-[var(--jogak-color-fg-subtle)]", children: o }),
886
+ /* @__PURE__ */ r("span", { className: "jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none", children: "/" }),
887
+ /* @__PURE__ */ r("span", { className: "jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold", children: e })
803
888
  ] }),
804
- /* @__PURE__ */ t("div", { className: "jogak:flex jogak:gap-0.5 jogak:bg-[var(--jogak-color-bg-subtle)] jogak:rounded-[var(--jogak-radius-lg)] jogak:p-0.5", children: ["mobile", "tablet", "desktop"].map((k) => /* @__PURE__ */ t(
889
+ /* @__PURE__ */ r("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__ */ r(
805
890
  "button",
806
891
  {
807
892
  type: "button",
808
893
  onClick: () => {
809
- s(k);
894
+ g(l);
810
895
  },
811
- "aria-pressed": e === k,
812
- className: N(
896
+ "aria-pressed": a === l,
897
+ className: w(
813
898
  "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",
814
- e === k ? "jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]" : "jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"
899
+ a === 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"
815
900
  ),
816
- children: wo[k]
901
+ children: Ao[l]
817
902
  },
818
- k
903
+ l
819
904
  )) }),
820
- /* @__PURE__ */ t("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((k) => /* @__PURE__ */ t(
905
+ /* @__PURE__ */ r("div", { className: "jogak:flex jogak:gap-1 jogak:items-center", children: ["white", "dark", "transparent"].map((l) => /* @__PURE__ */ r(
821
906
  "button",
822
907
  {
823
908
  type: "button",
824
909
  onClick: () => {
825
- n(k);
910
+ s(l);
826
911
  },
827
- "aria-pressed": r === k,
828
- "aria-label": `${k} background`,
829
- className: N(
912
+ "aria-pressed": t === l,
913
+ "aria-label": `${l} background`,
914
+ className: w(
830
915
  "jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",
831
- B,
832
- r === k ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
916
+ z,
917
+ t === l ? "jogak:border-[var(--jogak-color-accent)]" : "jogak:border-[var(--jogak-color-border-strong)]"
833
918
  ),
834
- style: V[k]
919
+ style: J[l]
835
920
  },
836
- k
921
+ l
837
922
  )) }),
838
- g && /* @__PURE__ */ t(
923
+ n && /* @__PURE__ */ r(
839
924
  "button",
840
925
  {
841
926
  type: "button",
@@ -846,33 +931,33 @@ function Y({
846
931
  )
847
932
  ] });
848
933
  }
849
- function $o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl: s, previewEntryPath: n }) {
850
- const [g, i] = h(!1), k = mo(o, a), d = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
851
- /* @__PURE__ */ t(
852
- _o,
934
+ function Po({ entry: o, args: e, theme: a, previewIsolation: t, userPreviewUrl: g, previewEntryPath: s }) {
935
+ const [n, i] = h(!1), l = yo(o, e), d = /* @__PURE__ */ j("div", { className: "jogak:relative", children: [
936
+ /* @__PURE__ */ r(
937
+ Mo,
853
938
  {
854
939
  entry: o,
855
- args: a,
856
- previewIsolation: r,
857
- userPreviewUrl: s,
858
- previewEntryPath: n
940
+ args: e,
941
+ previewIsolation: t,
942
+ userPreviewUrl: g,
943
+ previewEntryPath: s
859
944
  }
860
945
  ),
861
- /* @__PURE__ */ t(
946
+ /* @__PURE__ */ r(
862
947
  "button",
863
948
  {
864
949
  type: "button",
865
950
  onClick: () => {
866
- i((l) => !l);
951
+ i((c) => !c);
867
952
  },
868
- "aria-pressed": g,
869
- "aria-label": g ? "Hide source code" : "Show source code",
870
- className: N(
953
+ "aria-pressed": n,
954
+ "aria-label": n ? "Hide source code" : "Show source code",
955
+ className: w(
871
956
  "jogak:absolute jogak:bottom-2 jogak:right-2 jogak:px-[9px] jogak:py-1",
872
957
  "jogak:text-[11px] jogak:font-[family-name:var(--jogak-font-mono)] jogak:font-semibold jogak:tracking-[0.02em]",
873
958
  "jogak:text-[var(--jogak-color-bg)] jogak:border-none jogak:rounded-[5px] jogak:cursor-pointer",
874
959
  "jogak:shadow-[0_1px_4px_rgba(0,0,0,0.2)] jogak:transition-[background-color] jogak:duration-150 jogak:leading-none",
875
- g ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
960
+ n ? "jogak:bg-[var(--jogak-color-accent)]" : "jogak:bg-[#1e293b]"
876
961
  ),
877
962
  children: "</>"
878
963
  }
@@ -880,217 +965,253 @@ function $o({ entry: o, args: a, theme: e, previewIsolation: r, userPreviewUrl:
880
965
  ] });
881
966
  return /* @__PURE__ */ j("div", { children: [
882
967
  d,
883
- g && /* @__PURE__ */ t("div", { className: "jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]", children: /* @__PURE__ */ t(Lo, { source: k, theme: e }) })
968
+ n && /* @__PURE__ */ r("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__ */ r(Jo, { source: l, theme: a }) })
884
969
  ] });
885
970
  }
886
- const J = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
887
- function _o({ entry: o, args: a, previewIsolation: e, userPreviewUrl: r, previewEntryPath: s }) {
888
- return e === "shadow" ? /* @__PURE__ */ t(
889
- uo,
971
+ const V = "jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";
972
+ function Mo({ entry: o, args: e, previewIsolation: a, userPreviewUrl: t, previewEntryPath: g }) {
973
+ return a === "shadow" ? /* @__PURE__ */ r(
974
+ vo,
890
975
  {
891
976
  "data-testid": "preview-content",
892
- className: J,
893
- children: /* @__PURE__ */ t(Ao, { entry: o, args: a })
977
+ className: V,
978
+ children: /* @__PURE__ */ r(Vo, { entry: o, args: e })
894
979
  }
895
- ) : e === "iframe" ? /* @__PURE__ */ t(
896
- po,
980
+ ) : a === "iframe" ? /* @__PURE__ */ r(
981
+ wo,
897
982
  {
898
983
  entry: o,
899
- args: a,
900
- userPreviewUrl: r,
901
- previewEntryPath: s,
984
+ args: e,
985
+ userPreviewUrl: t,
986
+ previewEntryPath: g,
902
987
  "data-testid": "preview-content",
903
- className: `${J} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
988
+ className: `${V} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`
904
989
  }
905
- ) : /* @__PURE__ */ t(Ro, { entry: o, args: a });
990
+ ) : /* @__PURE__ */ r(Wo, { entry: o, args: e });
906
991
  }
907
- function Ro({ entry: o, args: a }) {
908
- const e = L(null);
992
+ function Wo({ entry: o, args: e }) {
993
+ const a = $(null), t = $(null);
909
994
  return x(() => {
910
- const r = e.current;
911
- if (r !== null)
912
- return $.render(o, a, r), () => {
913
- queueMicrotask(() => {
914
- $.unmount(r);
915
- });
916
- };
995
+ const g = a.current;
996
+ if (g === null) return;
997
+ let s = !1;
998
+ const n = o.meta.framework ?? "react";
999
+ return O(n).then((i) => {
1000
+ s || (t.current = i, i.render(o, e, g));
1001
+ }), () => {
1002
+ s = !0;
1003
+ const i = t.current;
1004
+ i !== null && queueMicrotask(() => {
1005
+ i.unmount(g);
1006
+ });
1007
+ };
917
1008
  }, [o]), x(() => {
918
- const r = e.current;
919
- r !== null && $.render(o, a, r);
920
- }, [o, a]), /* @__PURE__ */ t(
1009
+ const g = a.current;
1010
+ if (g === null) return;
1011
+ let s = !1;
1012
+ const n = t.current;
1013
+ if (n !== null) {
1014
+ n.render(o, e, g);
1015
+ return;
1016
+ }
1017
+ const i = o.meta.framework ?? "react";
1018
+ return O(i).then((l) => {
1019
+ s || (t.current = l, l.render(o, e, g));
1020
+ }), () => {
1021
+ s = !0;
1022
+ };
1023
+ }, [o, e]), /* @__PURE__ */ r(
921
1024
  "div",
922
1025
  {
923
- ref: e,
1026
+ ref: a,
924
1027
  "data-testid": "preview-content",
925
- className: J
1028
+ className: V
926
1029
  }
927
1030
  );
928
1031
  }
929
- function Ao({ entry: o, args: a }) {
930
- const e = L(null);
1032
+ function Vo({ entry: o, args: e }) {
1033
+ const a = $(null), t = $(null);
931
1034
  return x(() => {
932
- const r = e.current;
933
- if (r !== null)
934
- return $.render(o, a, r), () => {
935
- queueMicrotask(() => {
936
- $.unmount(r);
937
- });
938
- };
1035
+ const g = a.current;
1036
+ if (g === null) return;
1037
+ let s = !1;
1038
+ const n = o.meta.framework ?? "react";
1039
+ return O(n).then((i) => {
1040
+ s || (t.current = i, i.render(o, e, g));
1041
+ }), () => {
1042
+ s = !0;
1043
+ const i = t.current;
1044
+ i !== null && queueMicrotask(() => {
1045
+ i.unmount(g);
1046
+ });
1047
+ };
939
1048
  }, [o]), x(() => {
940
- const r = e.current;
941
- r !== null && $.render(o, a, r);
942
- }, [o, a]), /* @__PURE__ */ t("div", { ref: e, "data-testid": "preview-content-shadow" });
1049
+ const g = a.current;
1050
+ if (g === null) return;
1051
+ let s = !1;
1052
+ const n = t.current;
1053
+ if (n !== null) {
1054
+ n.render(o, e, g);
1055
+ return;
1056
+ }
1057
+ const i = o.meta.framework ?? "react";
1058
+ return O(i).then((l) => {
1059
+ s || (t.current = l, l.render(o, e, g));
1060
+ }), () => {
1061
+ s = !0;
1062
+ };
1063
+ }, [o, e]), /* @__PURE__ */ r("div", { ref: a, "data-testid": "preview-content-shadow" });
943
1064
  }
944
- function Lo({ source: o, theme: a }) {
945
- const [e, r] = h(!1), s = a.plain.backgroundColor ?? "#1e293b";
946
- return o === void 0 ? /* @__PURE__ */ t(
1065
+ function Jo({ source: o, theme: e }) {
1066
+ const [a, t] = h(!1), g = e.plain.backgroundColor ?? "#1e293b";
1067
+ return o === void 0 ? /* @__PURE__ */ r(
947
1068
  "div",
948
1069
  {
949
1070
  className: "jogak:h-full jogak:flex jogak:items-center jogak:justify-center jogak:bg-[var(--jogak-source-bg)] jogak:text-[#94a3b8] jogak:text-[13px]",
950
- style: { "--jogak-source-bg": s },
1071
+ style: { "--jogak-source-bg": g },
951
1072
  children: "Source not available"
952
1073
  }
953
1074
  ) : /* @__PURE__ */ j("div", { className: "jogak:relative jogak:h-full", children: [
954
- /* @__PURE__ */ t(
1075
+ /* @__PURE__ */ r(
955
1076
  "button",
956
1077
  {
957
1078
  type: "button",
958
1079
  onClick: () => {
959
1080
  navigator.clipboard.writeText(o).then(() => {
960
- r(!0), setTimeout(() => {
961
- r(!1);
1081
+ t(!0), setTimeout(() => {
1082
+ t(!1);
962
1083
  }, 2e3);
963
1084
  });
964
1085
  },
965
1086
  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",
966
- children: e ? "✓ Copied" : "Copy"
1087
+ children: a ? "✓ Copied" : "Copy"
967
1088
  }
968
1089
  ),
969
- /* @__PURE__ */ t(eo, { code: o.trim(), language: "tsx", theme: a, children: ({ style: g, tokens: i, getLineProps: k, getTokenProps: d }) => /* @__PURE__ */ t(
1090
+ /* @__PURE__ */ r(ro, { code: o.trim(), language: "tsx", theme: e, children: ({ style: n, tokens: i, getLineProps: l, getTokenProps: d }) => /* @__PURE__ */ r(
970
1091
  "pre",
971
1092
  {
972
1093
  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",
973
- style: g,
974
- children: i.map((l, c) => /* @__PURE__ */ j(
1094
+ style: n,
1095
+ children: i.map((c, k) => /* @__PURE__ */ j(
975
1096
  "div",
976
1097
  {
977
- ...k({ line: l }),
1098
+ ...l({ line: c }),
978
1099
  className: "jogak:flex jogak:pr-6",
979
- style: k({ line: l }).style,
1100
+ style: l({ line: c }).style,
980
1101
  children: [
981
- /* @__PURE__ */ t("span", { className: "jogak:select-none jogak:min-w-10 jogak:pl-[14px] jogak:pr-[14px] jogak:text-right jogak:text-[rgba(148,163,184,0.45)] jogak:shrink-0 jogak:leading-[1.7]", children: c + 1 }),
982
- /* @__PURE__ */ t("span", { children: l.map((p, f) => /* @__PURE__ */ t("span", { ...d({ token: p }) }, f)) })
1102
+ /* @__PURE__ */ r("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: k + 1 }),
1103
+ /* @__PURE__ */ r("span", { children: c.map((f, p) => /* @__PURE__ */ r("span", { ...d({ token: f }) }, p)) })
983
1104
  ]
984
1105
  },
985
- c
1106
+ k
986
1107
  ))
987
1108
  }
988
1109
  ) })
989
1110
  ] });
990
1111
  }
991
- function I() {
1112
+ function G() {
992
1113
  if (typeof window > "u") return null;
993
- const o = new URLSearchParams(window.location.search), a = o.get("entry");
994
- if (a === null) return null;
995
- const e = o.get("jogak");
996
- return { entryId: a, jogakName: e };
1114
+ const o = new URLSearchParams(window.location.search), e = o.get("entry");
1115
+ if (e === null) return null;
1116
+ const a = o.get("jogak");
1117
+ return { entryId: e, jogakName: a };
997
1118
  }
998
- function Eo(o, a) {
999
- const e = new URLSearchParams();
1000
- e.set("entry", o), e.set("jogak", a), window.history.pushState({}, "", `?${e.toString()}`);
1119
+ function zo(o, e) {
1120
+ const a = new URLSearchParams();
1121
+ a.set("entry", o), a.set("jogak", e), window.history.pushState({}, "", `?${a.toString()}`);
1001
1122
  }
1002
- function Wo({
1123
+ function Go({
1003
1124
  entries: o,
1004
- metas: a,
1005
- codeTheme: e = "vsDark",
1006
- previewIsolation: r = "iframe",
1007
- userPreviewUrl: s = "",
1008
- previewEntryPath: n = "/__jogak_preview__/index.html",
1009
- userViteUrl: g
1125
+ metas: e,
1126
+ codeTheme: a = "vsDark",
1127
+ previewIsolation: t = "iframe",
1128
+ userPreviewUrl: g = "",
1129
+ previewEntryPath: s = "/__jogak_preview__/index.html",
1130
+ userViteUrl: n
1010
1131
  } = {}) {
1011
- const i = s !== "" ? s : g ?? "", k = _(() => {
1132
+ const i = g !== "" ? g : n ?? "", l = _(() => {
1012
1133
  if (o !== void 0) {
1013
- a !== void 0 && console.warn(
1134
+ e !== void 0 && console.warn(
1014
1135
  "[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence."
1015
1136
  );
1016
- const u = new Z();
1137
+ const u = new T();
1017
1138
  for (const m of o) u.register(m);
1018
1139
  return u;
1019
1140
  }
1020
- if (a !== void 0)
1021
- for (const u of a) H.registerMeta(u);
1022
- return H;
1023
- }, [o, a]), d = _(() => I(), []), [l, c] = h(
1141
+ if (e !== void 0)
1142
+ for (const u of e) F.registerMeta(u);
1143
+ return F;
1144
+ }, [o, e]), d = _(() => G(), []), [c, k] = h(
1024
1145
  (d == null ? void 0 : d.entryId) ?? null
1025
- ), [p, f] = h(
1146
+ ), [f, p] = h(
1026
1147
  (d == null ? void 0 : d.jogakName) ?? null
1027
- ), [S, y] = h({});
1148
+ ), [C, y] = h({});
1028
1149
  x(() => {
1029
1150
  const u = () => {
1030
- const m = I();
1031
- m !== null ? (c(m.entryId), f(m.jogakName), y({})) : (c(null), f(null));
1151
+ const m = G();
1152
+ m !== null ? (k(m.entryId), p(m.jogakName), y({})) : (k(null), p(null));
1032
1153
  };
1033
1154
  return window.addEventListener("popstate", u), () => {
1034
1155
  window.removeEventListener("popstate", u);
1035
1156
  };
1036
1157
  }, []);
1037
- const v = A((u, m) => {
1038
- c(u), f(m), y({}), Eo(u, m);
1039
- }, []), w = A((u, m) => {
1040
- if (c((b) => b === u ? u : b), f((b) => b ?? m), typeof window < "u") {
1158
+ const v = R((u, m) => {
1159
+ k(u), p(m), y({}), zo(u, m);
1160
+ }, []), N = R((u, m) => {
1161
+ if (k((b) => b === u ? u : b), p((b) => b ?? m), typeof window < "u") {
1041
1162
  const b = new URLSearchParams(window.location.search);
1042
1163
  b.get("entry") === u && b.get("jogak") === null && (b.set("jogak", m), window.history.replaceState({}, "", `?${b.toString()}`));
1043
1164
  }
1044
- }, []), W = A((u, m) => {
1165
+ }, []), D = R((u, m) => {
1045
1166
  y((b) => ({ ...b, [u]: m }));
1046
- }, []), R = A(() => {
1167
+ }, []), A = R(() => {
1047
1168
  y({});
1048
1169
  }, []);
1049
- return /* @__PURE__ */ t(oo, { registry: k, children: /* @__PURE__ */ j(
1170
+ return /* @__PURE__ */ r(ao, { registry: l, children: /* @__PURE__ */ j(
1050
1171
  "div",
1051
1172
  {
1052
1173
  "data-jogak-shell": !0,
1053
1174
  className: "jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",
1054
1175
  children: [
1055
- /* @__PURE__ */ t(
1056
- ro,
1176
+ /* @__PURE__ */ r(
1177
+ go,
1057
1178
  {
1058
- selectedEntryId: l,
1059
- selectedJogakName: p,
1179
+ selectedEntryId: c,
1180
+ selectedJogakName: f,
1060
1181
  onSelect: v
1061
1182
  }
1062
1183
  ),
1063
- /* @__PURE__ */ t("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: l !== null ? /* @__PURE__ */ t(
1064
- yo,
1184
+ /* @__PURE__ */ r("main", { className: "jogak:overflow-hidden jogak:min-h-0", children: c !== null ? /* @__PURE__ */ r(
1185
+ Eo,
1065
1186
  {
1066
- entryId: l,
1067
- jogakName: p,
1068
- overrideArgs: S,
1069
- onArgChange: W,
1070
- onReset: R,
1071
- codeTheme: e,
1072
- onResolveJogak: w,
1073
- previewIsolation: r,
1187
+ entryId: c,
1188
+ jogakName: f,
1189
+ overrideArgs: C,
1190
+ onArgChange: D,
1191
+ onReset: A,
1192
+ codeTheme: a,
1193
+ onResolveJogak: N,
1194
+ previewIsolation: t,
1074
1195
  userPreviewUrl: i,
1075
- previewEntryPath: n
1196
+ previewEntryPath: s
1076
1197
  }
1077
- ) : /* @__PURE__ */ t("div", { className: "jogak:flex jogak:items-center jogak:justify-center jogak:h-full jogak:text-[var(--jogak-color-fg-subtle)]", children: "Select a component from the sidebar" }) })
1198
+ ) : /* @__PURE__ */ r("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" }) })
1078
1199
  ]
1079
1200
  }
1080
1201
  ) });
1081
1202
  }
1082
- function zo() {
1083
- const o = ao(), a = _(() => o.getAll(), [o]), e = _(() => o.getTree(), [o]), r = _(
1084
- () => (s) => o.search(s),
1203
+ function Io() {
1204
+ const o = to(), e = _(() => o.getAll(), [o]), a = _(() => o.getTree(), [o]), t = _(
1205
+ () => (g) => o.search(g),
1085
1206
  [o]
1086
1207
  );
1087
- return { entries: a, tree: e, search: r };
1208
+ return { entries: e, tree: a, search: t };
1088
1209
  }
1089
1210
  export {
1090
- jo as Actions,
1091
- io as Controls,
1092
- Wo as JogakApp,
1093
- yo as Preview,
1094
- ro as Sidebar,
1095
- zo as useRegistry
1211
+ xo as Actions,
1212
+ po as Controls,
1213
+ Go as JogakApp,
1214
+ Eo as Preview,
1215
+ go as Sidebar,
1216
+ Io as useRegistry
1096
1217
  };