@jogak/ui 0.1.0-alpha.10.2 → 0.1.0-alpha.10.3

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