@jogak/ui 0.1.0-alpha.9.1 → 1.0.0-beta.0

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