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

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