@jogak/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

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.
package/CHANGELOG.md CHANGED
@@ -5,6 +5,57 @@ All notable changes to Jogak packages are documented here. The repository follow
5
5
 
6
6
  Version numbers apply to all packages in the workspace (synchronized release).
7
7
 
8
+ ## [0.1.0-alpha.5] — 2026-05-09
9
+
10
+ ### Changed
11
+
12
+ - **컴포넌트 4개 + App shell 전면 마이그레이션** — Sidebar / Preview / Controls / Actions /
13
+ JogakApp의 inline style을 `jogak:` prefix Tailwind class로 변경 완료. Playwright VR 9
14
+ 시나리오 multi-run 결정성으로 픽셀 동등 입증. alpha.4 baseline 대비 8/9 unchanged.
15
+ - **잔존 inline style 11건** — 모두 화이트리스트 (CSS variable 주입 + prism external interface).
16
+ 각 라인 `eslint-disable-next-line no-restricted-syntax -- jogak: <카테고리>` 주석.
17
+ - **dist 사이즈 감소** — mjs raw 35.3 → 33.9 KB / gzip 8.36 → 7.64 KB (skeleton inline
18
+ 객체 + `<style>` 태그 제거 효과).
19
+
20
+ ### Added
21
+
22
+ - 신규 dependency: `clsx@^2.1.1` (boolean variant 결합용).
23
+ - `--jogak-radius-sm` CSS variable 첫 사용 (Clear 버튼).
24
+ - `.jogak-skeleton-shimmer` class + `@keyframes jogakSkeleton` (jogak.css `@layer components`).
25
+
26
+ ### Removed
27
+
28
+ - `--jogak-text-{xs,sm,base,md,lg}` 5개 CSS variable — 사용처 zero. font-size 픽셀 literal
29
+ 채택 후 의미 상실. v4 `text-[var(--my-text-var)]` arbitrary value의 line-height 페어링
30
+ 부수효과 회피 위해 픽셀 literal 정책 채택 (PR 1에서 발견).
31
+ - `--jogak-sidebar-width` CSS variable — App grid 픽셀 literal 채택 후 사용처 zero.
32
+
33
+ ### Fixed
34
+
35
+ - Preview source toggle / prism `<pre>` / Controls action span / json code / td name cell
36
+ 등 5곳에서 `font-[var(--jogak-font-mono)]`가 v4에서 `font-weight: var(...)`로 잘못 컴파일되던
37
+ 문제. `font-[family-name:var(--jogak-font-mono)]` hint로 차단.
38
+ - Preview viewport toggle / bottom-panel tab button에 `leading-none` 적용 시 flex 부모
39
+ 높이가 1~2px 단축되던 문제. padding 보유 button에는 leading 미적용으로 baseline 정합.
40
+
41
+ ## [0.1.0-alpha.4] — 2026-05-08
42
+
43
+ ### Internal
44
+
45
+ - `@jogak/ui` SPA 빌드 파이프라인에 Tailwind v4 + `prefix(jogak)` 도입 (인프라 단계).
46
+ 사용자 번들 / publish 산출물에는 영향 없음.
47
+ - jogak 디자인 토큰을 `--jogak-*` CSS variable로 정의 (알파.5 컴포넌트 마이그레이션 대비).
48
+ - jogak SPA에 `data-jogak-shell` / `data-jogak-content` wrapper 추가 (알파.6 사용자 globalCss
49
+ scope 정책 hook).
50
+
51
+ ### Notes
52
+
53
+ - jogak UI 컴포넌트(Sidebar/Preview/Controls/Actions)는 여전히 inline style 사용. Tailwind class
54
+ 마이그레이션은 알파.5에서 진행.
55
+ - 사용자 프로젝트의 globalCss(예: `src/index.css`)는 **현재 jogak SPA에 적용되지 않습니다**. 알파.6에서
56
+ `JogakPluginOptions.globalCss` opt-in으로 지원 예정.
57
+ - 사용자 프로젝트가 Tailwind를 사용해도 jogak prefix(`jogak:`)와 충돌하지 않음.
58
+
8
59
  ## [0.1.0-alpha.3] — 2026-05-07
9
60
 
10
61
  ### Added
package/README.md CHANGED
@@ -62,6 +62,21 @@ import { runHost } from '@jogak/ui/host' // Node-only, used by @jogak/cli
62
62
 
63
63
  See the [main README](https://github.com/devclib/jogak#readme) for the full host embedding guide.
64
64
 
65
+ ## Styling roadmap
66
+
67
+ | 단계 | 상태 | 내용 |
68
+ |------|------|------|
69
+ | alpha.4 | ✅ 본 릴리즈 | jogak UI 빌드 파이프라인에 Tailwind v4 + `jogak:` prefix 도입 (인프라) |
70
+ | alpha.5 | 예정 | jogak UI 컴포넌트를 Tailwind class로 마이그레이션 |
71
+ | alpha.6 | 예정 | 사용자 `globalCss` 옵션 지원 (`JogakPluginOptions.globalCss`) |
72
+ | alpha.7+ | 검토 | preview Shadow DOM / iframe 격리 옵션 |
73
+
74
+ ### 현 한계 (alpha.4)
75
+
76
+ - jogak SPA는 사용자 프로젝트의 globalCss(예: Tailwind, shadcn/ui)를 자동 import하지 않습니다.
77
+ jogak chrome은 자체 스타일만 사용하며, preview 안의 사용자 컴포넌트도 jogak 빌드 환경에서 렌더됩니다.
78
+ - 사용자 globalCss를 적용하려면 알파.6을 기다려 주세요.
79
+
65
80
  - Repository: https://github.com/devclib/jogak
66
81
  - Issues: https://github.com/devclib/jogak/issues
67
82
  - License: [MIT](./LICENSE)
@@ -1 +1 @@
1
- "use strict";var L=Object.create;var g=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var B=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of S(e))!A.call(t,n)&&n!==o&&g(t,n,{get:()=>e[n],enumerable:!(r=M(e,n))||r.enumerable});return t};var a=(t,e,o)=>(o=t!=null?L(k(t)):{},B(e||!t||!t.__esModule?g(o,"default",{value:t,enumerable:!0}):o,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("node:url"),i=require("node:path");var l=typeof document<"u"?document.currentScript:null;const N=H.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:l&&l.tagName.toUpperCase()==="SCRIPT"&&l.src||new URL("host/index.js",document.baseURI).href),u=i.resolve(i.dirname(N),"..",".."),x=i.resolve(u,"index.html"),F=i.resolve(u,"src/app/main.tsx");async function E(t){const e=await import("vite"),o=await import("@vitejs/plugin-react"),r=await import("@jogak/core/vite"),{createServer:n,build:h}=e,b=o.default,{jogak:v}=r,_=t.codeTheme??"vsDark",f={patterns:t.patterns,codeTheme:_,cwd:t.userRoot};t.tsConfigFilePath!==void 0&&(f.tsConfigFilePath=t.tsConfigFilePath);const R=t.extraPlugins??[],d={root:u,configFile:!1,plugins:[b(),v(f),...R],optimizeDeps:{include:["react","react-dom/client","@jogak/core","@jogak/react"]}};if(t.mode==="dev"){const O={port:t.port??5173,host:t.host??"localhost",open:t.open??!1,fs:{allow:[u,t.userRoot]}},j={...d,server:O},s=await n(j);await s.listen();const p=s.config.server.port??t.port??5173,c=t.host??"localhost",D=`http://${typeof c=="boolean"?c?"0.0.0.0":"localhost":c}:${p.toString()}/`;let y=!1;return{url:D,port:p,close:async()=>{y||(y=!0,await s.close())},printUrls:()=>{s.printUrls()}}}const w={...d,base:t.base??"./",build:{outDir:t.outDir,emptyOutDir:!0,sourcemap:t.sourcemap??!1,minify:t.minify??"esbuild"}},C=Date.now(),T=await h(w),U=Date.now()-C,{assetCount:P,totalBytes:I}=Y(T);return{outDir:t.outDir,elapsedMs:U,assetCount:P,totalBytes:I}}function Y(t){const e=q(t);if(e===void 0)return{assetCount:0,totalBytes:0};let o=0,r=0;for(const n of e)o+=1,r+=z(n);return{assetCount:o,totalBytes:r}}function m(t){return typeof t=="object"&&t!==null&&Array.isArray(t.output)}function q(t){if(Array.isArray(t)){const e=[];for(const o of t)m(o)&&e.push(...o.output);return e}if(m(t))return t.output}function z(t){if(typeof t!="object"||t===null)return 0;const e=t;if(e.type==="chunk"&&typeof e.code=="string")return Buffer.byteLength(e.code,"utf8");if(e.type==="asset"){const o=e.source;if(typeof o=="string")return Buffer.byteLength(o,"utf8");if(o instanceof Uint8Array)return o.byteLength}return 0}exports.UI_HTML_ENTRY=x;exports.UI_MAIN_ENTRY=F;exports.runHost=E;
1
+ "use strict";var S=Object.create;var y=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var N=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of A(e))!H.call(t,n)&&n!==o&&y(t,n,{get:()=>e[n],enumerable:!(r=k(e,n))||r.enumerable});return t};var i=(t,e,o)=>(o=t!=null?S(B(t)):{},N(e||!t||!t.__esModule?y(o,"default",{value:t,enumerable:!0}):o,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("node:url"),u=require("node:path");var l=typeof document<"u"?document.currentScript:null;const F=x.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:l&&l.tagName.toUpperCase()==="SCRIPT"&&l.src||new URL("host/index.js",document.baseURI).href),c=u.resolve(u.dirname(F),"..",".."),E=u.resolve(c,"index.html"),Y=u.resolve(c,"src/app/main.tsx");async function q(t){const e=await import("vite"),o=await import("@vitejs/plugin-react"),r=await import("@jogak/core/vite"),n=await import("@tailwindcss/vite"),{createServer:h,build:b}=e,v=o.default,_=n.default,{jogak:w}=r,R=t.codeTheme??"vsDark",f={patterns:t.patterns,codeTheme:R,cwd:t.userRoot};t.tsConfigFilePath!==void 0&&(f.tsConfigFilePath=t.tsConfigFilePath);const C=t.extraPlugins??[],d={root:c,configFile:!1,plugins:[v(),_(),w(f),...C],optimizeDeps:{include:["react","react-dom/client","@jogak/core","@jogak/react"]}};if(t.mode==="dev"){const D={port:t.port??5173,host:t.host??"localhost",open:t.open??!1,fs:{allow:[c,t.userRoot]}},L={...d,server:D},s=await h(L);await s.listen();const p=s.config.server.port??t.port??5173,a=t.host??"localhost",M=`http://${typeof a=="boolean"?a?"0.0.0.0":"localhost":a}:${p.toString()}/`;let g=!1;return{url:M,port:p,close:async()=>{g||(g=!0,await s.close())},printUrls:()=>{s.printUrls()}}}const P={...d,base:t.base??"./",build:{outDir:t.outDir,emptyOutDir:!0,sourcemap:t.sourcemap??!1,minify:t.minify??"esbuild"}},T=Date.now(),U=await b(P),I=Date.now()-T,{assetCount:O,totalBytes:j}=z(U);return{outDir:t.outDir,elapsedMs:I,assetCount:O,totalBytes:j}}function z(t){const e=$(t);if(e===void 0)return{assetCount:0,totalBytes:0};let o=0,r=0;for(const n of e)o+=1,r+=G(n);return{assetCount:o,totalBytes:r}}function m(t){return typeof t=="object"&&t!==null&&Array.isArray(t.output)}function $(t){if(Array.isArray(t)){const e=[];for(const o of t)m(o)&&e.push(...o.output);return e}if(m(t))return t.output}function G(t){if(typeof t!="object"||t===null)return 0;const e=t;if(e.type==="chunk"&&typeof e.code=="string")return Buffer.byteLength(e.code,"utf8");if(e.type==="asset"){const o=e.source;if(typeof o=="string")return Buffer.byteLength(o,"utf8");if(o instanceof Uint8Array)return o.byteLength}return 0}exports.UI_HTML_ENTRY=E;exports.UI_MAIN_ENTRY=Y;exports.runHost=q;
@@ -1,47 +1,47 @@
1
- import { fileURLToPath as k } from "node:url";
2
- import { resolve as u, dirname as B } from "node:path";
3
- const T = k(import.meta.url), s = u(B(T), "..", ".."), F = u(s, "index.html"), z = u(s, "src/app/main.tsx");
4
- async function N(t) {
5
- const e = await import("vite"), o = await import("@vitejs/plugin-react"), r = await import("@jogak/core/vite"), { createServer: i, build: g } = e, m = o.default, { jogak: y } = r, h = t.codeTheme ?? "vsDark", a = {
1
+ import { fileURLToPath as T } from "node:url";
2
+ import { resolve as u, dirname as U } from "node:path";
3
+ const A = T(import.meta.url), i = u(U(A), "..", ".."), N = u(i, "index.html"), S = u(i, "src/app/main.tsx");
4
+ async function $(t) {
5
+ const o = await import("vite"), e = await import("@vitejs/plugin-react"), n = await import("@jogak/core/vite"), s = await import("@tailwindcss/vite"), { createServer: g, build: m } = o, y = e.default, h = s.default, { jogak: b } = n, w = t.codeTheme ?? "vsDark", a = {
6
6
  patterns: t.patterns,
7
- codeTheme: h,
7
+ codeTheme: w,
8
8
  cwd: t.userRoot
9
9
  };
10
10
  t.tsConfigFilePath !== void 0 && (a.tsConfigFilePath = t.tsConfigFilePath);
11
- const b = t.extraPlugins ?? [], l = {
12
- root: s,
11
+ const v = t.extraPlugins ?? [], l = {
12
+ root: i,
13
13
  configFile: !1,
14
14
  // ui/vite.config.ts 무시
15
- plugins: [m(), y(a), ...b],
15
+ plugins: [y(), h(), b(a), ...v],
16
16
  optimizeDeps: {
17
17
  include: ["react", "react-dom/client", "@jogak/core", "@jogak/react"]
18
18
  }
19
19
  };
20
20
  if (t.mode === "dev") {
21
- const R = {
21
+ const j = {
22
22
  port: t.port ?? 5173,
23
23
  host: t.host ?? "localhost",
24
24
  open: t.open ?? !1,
25
- fs: { allow: [s, t.userRoot] }
26
- }, _ = {
25
+ fs: { allow: [i, t.userRoot] }
26
+ }, k = {
27
27
  ...l,
28
- server: R
29
- }, n = await i(_);
30
- await n.listen();
31
- const f = n.config.server.port ?? t.port ?? 5173, c = t.host ?? "localhost", j = `http://${typeof c == "boolean" ? c ? "0.0.0.0" : "localhost" : c}:${f.toString()}/`;
28
+ server: j
29
+ }, r = await g(k);
30
+ await r.listen();
31
+ const f = r.config.server.port ?? t.port ?? 5173, c = t.host ?? "localhost", B = `http://${typeof c == "boolean" ? c ? "0.0.0.0" : "localhost" : c}:${f.toString()}/`;
32
32
  let d = !1;
33
33
  return {
34
- url: j,
34
+ url: B,
35
35
  port: f,
36
36
  close: async () => {
37
- d || (d = !0, await n.close());
37
+ d || (d = !0, await r.close());
38
38
  },
39
39
  printUrls: () => {
40
- n.printUrls();
40
+ r.printUrls();
41
41
  }
42
42
  };
43
43
  }
44
- const v = {
44
+ const P = {
45
45
  ...l,
46
46
  base: t.base ?? "./",
47
47
  build: {
@@ -50,50 +50,50 @@ async function N(t) {
50
50
  sourcemap: t.sourcemap ?? !1,
51
51
  minify: t.minify ?? "esbuild"
52
52
  }
53
- }, w = Date.now(), C = await g(v), P = Date.now() - w, { assetCount: D, totalBytes: O } = U(C);
53
+ }, C = Date.now(), D = await m(P), O = Date.now() - C, { assetCount: R, totalBytes: _ } = L(D);
54
54
  return {
55
55
  outDir: t.outDir,
56
- elapsedMs: P,
57
- assetCount: D,
58
- totalBytes: O
56
+ elapsedMs: O,
57
+ assetCount: R,
58
+ totalBytes: _
59
59
  };
60
60
  }
61
- function U(t) {
62
- const e = A(t);
63
- if (e === void 0)
61
+ function L(t) {
62
+ const o = M(t);
63
+ if (o === void 0)
64
64
  return { assetCount: 0, totalBytes: 0 };
65
- let o = 0, r = 0;
66
- for (const i of e)
67
- o += 1, r += L(i);
68
- return { assetCount: o, totalBytes: r };
65
+ let e = 0, n = 0;
66
+ for (const s of o)
67
+ e += 1, n += x(s);
68
+ return { assetCount: e, totalBytes: n };
69
69
  }
70
70
  function p(t) {
71
71
  return typeof t == "object" && t !== null && Array.isArray(t.output);
72
72
  }
73
- function A(t) {
73
+ function M(t) {
74
74
  if (Array.isArray(t)) {
75
- const e = [];
76
- for (const o of t)
77
- p(o) && e.push(...o.output);
78
- return e;
75
+ const o = [];
76
+ for (const e of t)
77
+ p(e) && o.push(...e.output);
78
+ return o;
79
79
  }
80
80
  if (p(t))
81
81
  return t.output;
82
82
  }
83
- function L(t) {
83
+ function x(t) {
84
84
  if (typeof t != "object" || t === null) return 0;
85
- const e = t;
86
- if (e.type === "chunk" && typeof e.code == "string")
87
- return Buffer.byteLength(e.code, "utf8");
88
- if (e.type === "asset") {
89
- const o = e.source;
90
- if (typeof o == "string") return Buffer.byteLength(o, "utf8");
91
- if (o instanceof Uint8Array) return o.byteLength;
85
+ const o = t;
86
+ if (o.type === "chunk" && typeof o.code == "string")
87
+ return Buffer.byteLength(o.code, "utf8");
88
+ if (o.type === "asset") {
89
+ const e = o.source;
90
+ if (typeof e == "string") return Buffer.byteLength(e, "utf8");
91
+ if (e instanceof Uint8Array) return e.byteLength;
92
92
  }
93
93
  return 0;
94
94
  }
95
95
  export {
96
- F as UI_HTML_ENTRY,
97
- z as UI_MAIN_ENTRY,
98
- N as runHost
96
+ N as UI_HTML_ENTRY,
97
+ S as UI_MAIN_ENTRY,
98
+ $ as runHost
99
99
  };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),k=require("@jogak/core"),j=require("@jogak/react"),z=require("prism-react-renderer");function I({selectedEntryId:t,selectedJogakName:n,onSelect:o}){const[i,s]=c.useState(""),{metaTree:r,searchMeta:l}=j.useRegistryMeta(),d=i.trim().length>0?l(i):null;return e.jsxs("aside",{"data-testid":"sidebar",style:{borderRight:"1px solid #e5e7eb",height:"100%",overflow:"auto",display:"flex",flexDirection:"column"},children:[e.jsx("div",{style:{padding:"12px",borderBottom:"1px solid #e5e7eb"},children:e.jsx("input",{type:"search",placeholder:"Search components...",value:i,onChange:a=>{s(a.target.value)},style:{width:"100%",padding:"6px 8px",border:"1px solid #d1d5db",borderRadius:4},"aria-label":"Search components"})}),e.jsx("nav",{style:{flex:1,overflow:"auto",padding:"8px 0"},children:d!==null?e.jsx(J,{metas:d,selectedEntryId:t,selectedJogakName:n,onSelect:o}):e.jsx(O,{node:r,selectedEntryId:t,selectedJogakName:n,onSelect:o})})]})}function J({metas:t,selectedEntryId:n,selectedJogakName:o,onSelect:i}){return t.length===0?e.jsx("p",{style:{padding:"0 12px",color:"#9ca3af",fontSize:13},children:"No results"}):e.jsx("ul",{style:{listStyle:"none",margin:0,padding:0},children:t.map(s=>e.jsx("li",{children:e.jsx($,{meta:s,selectedEntryId:n,selectedJogakName:o,onSelect:i,indent:0})},s.id))})}function O({node:t,selectedEntryId:n,selectedJogakName:o,onSelect:i,depth:s=0}){return e.jsx("ul",{style:{listStyle:"none",margin:0,padding:`0 0 0 ${s*12}px`},children:Object.entries(t).map(([r,l])=>e.jsx("li",{children:"id"in l?e.jsx($,{meta:l,selectedEntryId:n,selectedJogakName:o,onSelect:i,indent:0}):e.jsx(V,{label:r,node:l,selectedEntryId:n,selectedJogakName:o,onSelect:i,depth:s+1})},r))})}function V({label:t,node:n,selectedEntryId:o,selectedJogakName:i,onSelect:s,depth:r}){const[l,d]=c.useState(!0);return e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:()=>{d(a=>!a)},style:{display:"flex",alignItems:"center",gap:4,width:"100%",padding:"4px 12px",background:"none",border:"none",cursor:"pointer",fontSize:12,fontWeight:600,color:"#6b7280",textTransform:"uppercase",letterSpacing:"0.05em"},"aria-expanded":l,children:[e.jsx("span",{children:l?"▾":"▸"}),t]}),l&&e.jsx(O,{node:n,selectedEntryId:o,selectedJogakName:i,onSelect:s,depth:r})]})}function $({meta:t,selectedEntryId:n,selectedJogakName:o,onSelect:i,indent:s}){const r=t.id===n,[l,d]=c.useState(r);c.useEffect(()=>{r&&d(!0)},[r]);const a=t.title.split("/").pop()??t.title,b=16+s*12;return e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:()=>{if(r)d(p=>!p);else{d(!0);const p=t.jogakNames[0];p!==void 0&&i(t.id,p)}},style:{display:"flex",alignItems:"center",gap:6,width:"100%",padding:`5px 12px 5px ${b}px`,background:r?"#eff6ff":"none",border:"none",cursor:"pointer",fontSize:13,color:r?"#2563eb":"#374151",fontWeight:r?500:400,textAlign:"left"},"aria-expanded":l,children:[e.jsx("span",{style:{fontSize:10,flexShrink:0,lineHeight:1},children:l?"▾":"▸"}),a]}),l&&e.jsx("ul",{style:{listStyle:"none",margin:0,padding:0},children:t.jogakNames.map(p=>{const x=r&&p===o;return e.jsx("li",{children:e.jsx("button",{type:"button",onClick:()=>{i(t.id,p)},style:{display:"block",width:"100%",textAlign:"left",padding:`4px 12px 4px ${b+18}px`,background:x?"#dbeafe":"none",border:"none",cursor:"pointer",fontSize:12,color:x?"#1d4ed8":"#6b7280",fontWeight:x?500:400},"aria-current":x?"true":void 0,children:p})},p)})})]})}function q(t,n){const o=n==null?void 0:n.control,i=(n==null?void 0:n.action)!==void 0&&n.action!==!1,s=(n==null?void 0:n.type)==="function"||typeof t=="function";return i||s?"action":o==="boolean"||typeof t=="boolean"?"boolean":o==="number"||o==="range"||typeof t=="number"?"number":o==="select"||o==="radio"||(n==null?void 0:n.options)!==void 0&&n.options.length>0?"select":o==="text"||o==="color"||typeof t=="string"?"text":"json"}function U({argKey:t,value:n,argType:o,onArgChange:i}){switch(q(n,o)){case"boolean":return e.jsx("input",{type:"checkbox",checked:n===!0,onChange:r=>{i(t,r.target.checked)},style:{cursor:"pointer",width:16,height:16,accentColor:"#2563eb"}});case"number":return e.jsx("input",{type:"number",value:typeof n=="number"?n:"",onChange:r=>{i(t,r.target.valueAsNumber)},style:w});case"select":{const r=(o==null?void 0:o.options)??[];return e.jsx("select",{value:String(n??""),onChange:l=>{i(t,l.target.value)},style:w,children:r.map(l=>e.jsx("option",{value:String(l),children:String(l)},String(l)))})}case"text":return e.jsx("input",{type:"text",value:typeof n=="string"?n:String(n??""),onChange:r=>{i(t,r.target.value)},style:w});case"action":return e.jsx("span",{style:{display:"inline-block",padding:"2px 8px",fontSize:11,fontWeight:600,color:"#7c3aed",background:"#f5f3ff",border:"1px solid #ddd6fe",borderRadius:4,fontFamily:"monospace"},children:"(action)"});case"json":return e.jsx("code",{style:{fontSize:12,color:"#6b7280",fontFamily:"monospace"},children:JSON.stringify(n)})}}const w={padding:"4px 8px",border:"1px solid #d1d5db",borderRadius:4,fontSize:13,width:"100%",maxWidth:280},C={padding:"6px 20px",textAlign:"left",color:"#6b7280",fontWeight:500,fontSize:12,borderBottom:"1px solid #e5e7eb"},R={padding:"8px 20px",verticalAlign:"middle",borderBottom:"1px solid #f3f4f6"};function F({args:t,argTypes:n,onArgChange:o}){const s=Array.from(new Set([...Object.keys(t),...Object.keys(n)])).map(r=>[r,t[r]]);return e.jsxs("div",{style:{borderTop:"2px solid #e5e7eb"},children:[e.jsx("div",{style:{padding:"6px 20px",fontSize:11,fontWeight:700,color:"#9ca3af",textTransform:"uppercase",letterSpacing:"0.08em",borderBottom:"1px solid #e5e7eb",background:"#f9fafb"},children:"Controls"}),s.length===0?e.jsx("div",{style:{padding:"12px 20px",color:"#9ca3af",fontSize:13},children:"No args defined"}):e.jsxs("table",{style:{width:"100%",borderCollapse:"collapse",fontSize:13},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{style:C,children:"Name"}),e.jsx("th",{style:C,children:"Control"}),e.jsx("th",{style:C,children:"Description"})]})}),e.jsx("tbody",{children:s.map(([r,l])=>{const d=n[r];return e.jsxs("tr",{children:[e.jsx("td",{style:{...R,fontFamily:"monospace",fontSize:12,color:"#374151",whiteSpace:"nowrap"},children:r}),e.jsx("td",{style:R,children:e.jsx(U,{argKey:r,value:l,argType:d,onArgChange:o})}),e.jsx("td",{style:{...R,color:"#9ca3af"},children:(d==null?void 0:d.description)??""})]},r)})})]})]})}function _(t){if(t.length===0)return"()";try{return t.map(n=>{var o;if(n===null)return"null";if(n===void 0)return"undefined";if(typeof n=="function")return"[Function]";if(typeof n=="object"){const i=((o=n.constructor)==null?void 0:o.name)??"Object";return i!=="Object"&&i!=="Array"?`[${i}]`:JSON.stringify(n)}return JSON.stringify(n)}).join(", ")}catch{return"[unserializable]"}}function G(t){const n=new Date(t),o=n.getHours().toString().padStart(2,"0"),i=n.getMinutes().toString().padStart(2,"0"),s=n.getSeconds().toString().padStart(2,"0"),r=n.getMilliseconds().toString().padStart(3,"0");return`${o}:${i}:${s}.${r}`}function L(){const[t,n]=c.useState(()=>k.defaultActionChannel.getLogs());return c.useEffect(()=>k.defaultActionChannel.subscribe(n),[]),e.jsxs("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:[e.jsxs("div",{style:{padding:"6px 20px",fontSize:11,fontWeight:700,color:"#9ca3af",textTransform:"uppercase",letterSpacing:"0.08em",borderBottom:"1px solid #e5e7eb",background:"#f9fafb",display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0},children:[e.jsxs("span",{children:["Actions ",t.length>0&&`(${t.length.toString()})`]}),e.jsx("button",{type:"button",onClick:()=>{k.defaultActionChannel.clear()},disabled:t.length===0,style:{fontSize:10,fontWeight:600,padding:"2px 8px",border:"1px solid #d1d5db",borderRadius:3,background:"#fff",color:t.length===0?"#9ca3af":"#374151",cursor:t.length===0?"default":"pointer",textTransform:"none",letterSpacing:0},children:"Clear"})]}),e.jsx("div",{style:{flex:1,overflow:"auto"},children:t.length===0?e.jsx("div",{style:{padding:"12px 20px",color:"#9ca3af",fontSize:13},children:"함수 prop이 호출되면 여기에 기록됩니다"}):e.jsx("ul",{style:{listStyle:"none",margin:0,padding:0,fontFamily:"monospace",fontSize:12},children:t.map(o=>e.jsxs("li",{style:{display:"flex",alignItems:"baseline",gap:10,padding:"6px 20px",borderBottom:"1px solid #f3f4f6"},children:[e.jsx("span",{style:{color:"#9ca3af",fontSize:11,minWidth:92},children:G(o.timestamp)}),e.jsx("span",{style:{color:"#7c3aed",fontWeight:600},children:o.name}),e.jsxs("span",{style:{color:"#374151",wordBreak:"break-all",flex:1},children:["(",_(o.args),")"]})]},o.id))})})]})}const H={mobile:375,tablet:768,desktop:"none"},T={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},W={white:{background:"#ffffff"},dark:{background:"#1f2937"},transparent:{backgroundImage:["linear-gradient(45deg, #e2e8f0 25%, transparent 25%)","linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)","linear-gradient(45deg, transparent 75%, #e2e8f0 75%)","linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)"].join(", "),backgroundSize:"16px 16px",backgroundPosition:"0 0, 0 8px, 8px -8px, -8px 0px",backgroundColor:"#ffffff"}},A=320;function Q(t){return z.themes[t]??z.themes.vsDark}function D({entryId:t,jogakName:n,overrideArgs:o,onArgChange:i,onReset:s,codeTheme:r,onResolveJogak:l}){const d=j.useEntry(t),[a,b]=c.useState("desktop"),[p,x]=c.useState("white"),[y,h]=c.useState("controls"),m=Q(r);return d.status==="unknown"?e.jsxs("div",{"data-testid":"preview-not-found",style:{padding:24,color:"#ef4444"},children:["Entry not found: ",t]}):d.status==="error"?e.jsxs("div",{"data-testid":"preview-error",style:{padding:24,color:"#b91c1c",background:"#fef2f2",height:"100%",display:"flex",flexDirection:"column",gap:12,alignItems:"flex-start"},children:[e.jsxs("div",{style:{fontWeight:600},children:["Failed to load entry: ",t]}),e.jsx("pre",{style:{margin:0,padding:12,background:"#fff",border:"1px solid #fecaca",borderRadius:6,fontSize:12,whiteSpace:"pre-wrap",maxWidth:"100%"},children:d.error.message})]}):d.status==="loading"?e.jsx(Y,{meta:d.meta,jogakName:n,viewport:a,bgMode:p,onViewportChange:b,onBgModeChange:x}):e.jsx(X,{entry:d.entry,jogakName:n,overrideArgs:o,onArgChange:i,onReset:s,onResolveJogak:l,viewport:a,bgMode:p,bottomTab:y,onViewportChange:b,onBgModeChange:x,onBottomTabChange:h,prismTheme:m})}function Y({meta:t,jogakName:n,viewport:o,bgMode:i,onViewportChange:s,onBgModeChange:r}){const l=n??t.jogakNames[0]??"...",d=H[o];return e.jsxs("div",{"data-testid":"preview-loading",style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsx(N,{title:t.title,jogakName:l,viewport:o,bgMode:i,onViewportChange:s,onBgModeChange:r,showReset:!1,onReset:()=>{}}),e.jsx("div",{style:{flex:1,minHeight:A,overflow:"auto",...W[i]},children:e.jsx("div",{style:{maxWidth:d==="none"?"100%":d,margin:"0 auto",padding:24},children:e.jsxs("div",{style:{border:"1px dashed #e5e7eb",borderRadius:8,padding:16,minHeight:A-64,display:"flex",alignItems:"center",justifyContent:"center",color:"#9ca3af",fontSize:13,background:"linear-gradient(90deg, rgba(229,231,235,0) 0%, rgba(229,231,235,0.45) 50%, rgba(229,231,235,0) 100%)",backgroundSize:"200% 100%",animation:"jogakSkeleton 1.4s ease-in-out infinite"},children:["Loading ",t.title,"…"]})})}),e.jsx("style",{children:"@keyframes jogakSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }"})]})}function X({entry:t,jogakName:n,overrideArgs:o,onArgChange:i,onReset:s,onResolveJogak:r,viewport:l,bgMode:d,bottomTab:a,onViewportChange:b,onBgModeChange:p,onBottomTabChange:x,prismTheme:y}){var B;const h=n??((B=t.jogaks[0])==null?void 0:B.name)??null;if(c.useEffect(()=>{n===null&&h!==null&&r!==void 0&&r(t.id,h)},[n,h,t.id,r]),h===null)return e.jsxs("div",{style:{padding:24,color:"#ef4444"},children:["Entry has no jogaks: ",t.id]});const m=t.jogaks.find(S=>S.name===h);if(m===void 0)return e.jsxs("div",{style:{padding:24,color:"#ef4444"},children:["Jogak not found: ",h]});const f={...m.args??{},...o},g={...t.meta.argTypes??{},...m.argTypes??{}},P=Object.keys(o).length>0,M=H[l];return e.jsxs("div",{style:{display:"flex",flexDirection:"column",height:"100%"},children:[e.jsx(N,{title:t.title,jogakName:m.name,viewport:l,bgMode:d,onViewportChange:b,onBgModeChange:p,showReset:P,onReset:s}),e.jsx("div",{style:{flex:1,minHeight:A,overflow:"auto",...W[d]},children:e.jsx("div",{style:{maxWidth:M==="none"?"100%":M,margin:"0 auto",padding:24},children:e.jsx(Z,{entry:t,args:f,source:t.source,theme:y},`${t.id}/${m.name}`)})}),e.jsxs("div",{style:{height:260,flexShrink:0,display:"flex",flexDirection:"column",borderTop:"2px solid #e5e7eb"},children:[e.jsx("div",{role:"tablist",style:{display:"flex",gap:4,padding:"4px 12px 0",background:"#fff",borderBottom:"1px solid #e5e7eb",flexShrink:0},children:["controls","actions"].map(S=>{const v=a===S;return e.jsx("button",{type:"button",role:"tab","aria-selected":v,onClick:()=>{x(S)},style:{padding:"6px 14px",fontSize:12,fontWeight:v?600:500,color:v?"#111827":"#6b7280",background:"transparent",border:"none",borderBottom:v?"2px solid #2563eb":"2px solid transparent",marginBottom:-1,cursor:"pointer",textTransform:"capitalize"},children:S},S)})}),e.jsx("div",{style:{flex:1,minHeight:0,overflow:"auto"},children:a==="controls"?e.jsx(F,{args:f,argTypes:g,onArgChange:i}):e.jsx(L,{})})]})]})}function N({title:t,jogakName:n,viewport:o,bgMode:i,onViewportChange:s,onBgModeChange:r,showReset:l,onReset:d}){return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,padding:"7px 14px",borderBottom:"1px solid #e5e7eb",background:"#fff",flexShrink:0},children:[e.jsxs("div",{style:{flex:1,fontSize:13},children:[e.jsx("span",{style:{color:"#9ca3af"},children:t}),e.jsx("span",{style:{color:"#d1d5db",margin:"0 6px"},children:"/"}),e.jsx("span",{style:{color:"#111827",fontWeight:600},children:n})]}),e.jsx("div",{style:{display:"flex",gap:2,background:"#f3f4f6",borderRadius:6,padding:2},children:["mobile","tablet","desktop"].map(a=>e.jsx("button",{type:"button",onClick:()=>{s(a)},"aria-pressed":o===a,style:{padding:"3px 9px",fontSize:12,border:"none",borderRadius:4,cursor:"pointer",background:o===a?"#fff":"transparent",color:o===a?"#111827":"#6b7280",fontWeight:o===a?600:400,boxShadow:o===a?"0 1px 2px rgba(0,0,0,0.08)":"none",transition:"all 0.1s"},children:T[a]},a))}),e.jsx("div",{style:{display:"flex",gap:4,alignItems:"center"},children:["white","dark","transparent"].map(a=>e.jsx("button",{type:"button",onClick:()=>{r(a)},"aria-pressed":i===a,"aria-label":`${a} background`,style:{width:20,height:20,borderRadius:4,border:i===a?"2px solid #2563eb":"2px solid #d1d5db",cursor:"pointer",padding:0,flexShrink:0,...W[a]}},a))}),l&&e.jsx("button",{type:"button",onClick:d,style:{padding:"3px 10px",fontSize:12,border:"1px solid #d1d5db",borderRadius:4,background:"#fff",cursor:"pointer",color:"#374151"},children:"Reset"})]})}function Z({entry:t,args:n,source:o,theme:i}){const s=c.useRef(null),[r,l]=c.useState(!1);return c.useEffect(()=>{const d=s.current;if(d!==null)return j.reactAdapter.render(t,n,d),()=>{j.reactAdapter.unmount(d)}},[t]),c.useEffect(()=>{const d=s.current;d!==null&&j.reactAdapter.render(t,n,d)},[t,n]),e.jsxs("div",{children:[e.jsxs("div",{style:{position:"relative"},children:[e.jsx("div",{ref:s,"data-testid":"preview-content",style:{border:"1px dashed #e5e7eb",borderRadius:8,padding:16,paddingBottom:36}}),e.jsx("button",{type:"button",onClick:()=>{l(d=>!d)},"aria-pressed":r,"aria-label":r?"Hide source code":"Show source code",style:{position:"absolute",bottom:8,right:8,padding:"4px 9px",fontSize:11,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",fontWeight:600,letterSpacing:"0.02em",background:r?"#2563eb":"#1e293b",color:"#fff",border:"none",borderRadius:5,cursor:"pointer",boxShadow:"0 1px 4px rgba(0,0,0,0.2)",transition:"background 0.15s"},children:"</>"})]}),r&&e.jsx("div",{style:{marginTop:8,borderRadius:8,overflow:"hidden",height:320,boxShadow:"0 0 0 1px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.12)"},children:e.jsx(K,{source:o,theme:i})})]})}function K({source:t,theme:n}){const[o,i]=c.useState(!1),s=n.plain.backgroundColor??"#1e293b";if(t===void 0)return e.jsx("div",{style:{height:"100%",display:"flex",alignItems:"center",justifyContent:"center",background:s,color:"#94a3b8",fontSize:13},children:"Source not available"});const r=()=>{navigator.clipboard.writeText(t).then(()=>{i(!0),setTimeout(()=>{i(!1)},2e3)})};return e.jsxs("div",{style:{position:"relative",height:"100%"},children:[e.jsx("button",{type:"button",onClick:r,style:{position:"absolute",top:10,right:12,zIndex:1,padding:"3px 9px",fontSize:11,background:"rgba(255,255,255,0.1)",color:"#e2e8f0",border:"1px solid rgba(255,255,255,0.18)",borderRadius:4,cursor:"pointer"},children:o?"✓ Copied":"Copy"}),e.jsx(z.Highlight,{code:t.trim(),language:"tsx",theme:n,children:({style:l,tokens:d,getLineProps:a,getTokenProps:b})=>e.jsx("pre",{style:{...l,margin:0,padding:"12px 0",fontSize:12.5,lineHeight:1.7,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",height:"100%",boxSizing:"border-box",overflow:"auto"},children:d.map((p,x)=>e.jsxs("div",{...a({line:p}),style:{...a({line:p}).style,display:"flex",paddingRight:24},children:[e.jsx("span",{style:{userSelect:"none",minWidth:40,paddingLeft:14,paddingRight:14,textAlign:"right",color:"rgba(148,163,184,0.45)",flexShrink:0},children:x+1}),e.jsx("span",{children:p.map((y,h)=>e.jsx("span",{...b({token:y})},h))})]},x))})})]})}function E(){if(typeof window>"u")return null;const t=new URLSearchParams(window.location.search),n=t.get("entry");if(n===null)return null;const o=t.get("jogak");return{entryId:n,jogakName:o}}function ee(t,n){const o=new URLSearchParams;o.set("entry",t),o.set("jogak",n),window.history.pushState({},"",`?${o.toString()}`)}function te({entries:t,metas:n,codeTheme:o="vsDark"}={}){const i=c.useMemo(()=>{if(t!==void 0){n!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const u=new k.ComponentRegistry;for(const f of t)u.register(f);return u}if(n!==void 0)for(const u of n)k.defaultRegistry.registerMeta(u);return k.defaultRegistry},[t,n]),s=c.useMemo(()=>E(),[]),[r,l]=c.useState((s==null?void 0:s.entryId)??null),[d,a]=c.useState((s==null?void 0:s.jogakName)??null),[b,p]=c.useState({});c.useEffect(()=>{const u=()=>{const f=E();f!==null?(l(f.entryId),a(f.jogakName),p({})):(l(null),a(null))};return window.addEventListener("popstate",u),()=>{window.removeEventListener("popstate",u)}},[]);const x=c.useCallback((u,f)=>{l(u),a(f),p({}),ee(u,f)},[]),y=c.useCallback((u,f)=>{if(l(g=>g===u?u:g),a(g=>g??f),typeof window<"u"){const g=new URLSearchParams(window.location.search);g.get("entry")===u&&g.get("jogak")===null&&(g.set("jogak",f),window.history.replaceState({},"",`?${g.toString()}`))}},[]),h=c.useCallback((u,f)=>{p(g=>({...g,[u]:f}))},[]),m=c.useCallback(()=>{p({})},[]);return e.jsx(j.JogakProvider,{registry:i,children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"260px 1fr",height:"100dvh",overflow:"hidden"},children:[e.jsx(I,{selectedEntryId:r,selectedJogakName:d,onSelect:x}),e.jsx("main",{style:{overflow:"hidden",minHeight:0},children:r!==null?e.jsx(D,{entryId:r,jogakName:d,overrideArgs:b,onArgChange:h,onReset:m,codeTheme:o,onResolveJogak:y}):e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"#9ca3af"},children:"Select a component from the sidebar"})})]})})}function ne(){const t=j.useRegistry(),n=c.useMemo(()=>t.getAll(),[t]),o=c.useMemo(()=>t.getTree(),[t]),i=c.useMemo(()=>s=>t.search(s),[t]);return{entries:n,tree:o,search:i}}exports.Actions=L;exports.Controls=F;exports.JogakApp=te;exports.Preview=D;exports.Sidebar=I;exports.useRegistry=ne;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),w=require("@jogak/core"),v=require("@jogak/react"),A=require("prism-react-renderer");function M(a){var e,r,t="";if(typeof a=="string"||typeof a=="number")t+=a;else if(typeof a=="object")if(Array.isArray(a)){var s=a.length;for(e=0;e<s;e++)a[e]&&(r=M(a[e]))&&(t&&(t+=" "),t+=r)}else for(r in a)a[r]&&(t&&(t+=" "),t+=r);return t}function m(){for(var a,e,r=0,t="",s=arguments.length;r<s;r++)(a=arguments[r])&&(e=M(a))&&(t&&(t+=" "),t+=e);return t}function J({selectedEntryId:a,selectedJogakName:e,onSelect:r}){const[t,s]=l.useState(""),{metaTree:n,searchMeta:j}=v.useRegistryMeta(),g=t.trim().length>0?j(t):null;return o.jsxs("aside",{"data-testid":"sidebar",className:"jogak:flex jogak:flex-col jogak:h-full jogak:overflow-auto jogak:border-r jogak:border-[var(--jogak-color-border)]",children:[o.jsx("div",{className:"jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]",children:o.jsx("input",{type:"search",placeholder:"Search components...",value:t,onChange:k=>{s(k.target.value)},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)]","aria-label":"Search components"})}),o.jsx("nav",{className:"jogak:flex-1 jogak:overflow-auto jogak:py-2",children:g!==null?o.jsx(W,{metas:g,selectedEntryId:a,selectedJogakName:e,onSelect:r}):o.jsx(P,{node:n,selectedEntryId:a,selectedJogakName:e,onSelect:r})})]})}function W({metas:a,selectedEntryId:e,selectedJogakName:r,onSelect:t}){return a.length===0?o.jsx("p",{className:"jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]",children:"No results"}):o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:a.map(s=>o.jsx("li",{children:o.jsx(V,{meta:s,selectedEntryId:e,selectedJogakName:r,onSelect:t,indent:0})},s.id))})}function P({node:a,selectedEntryId:e,selectedJogakName:r,onSelect:t,depth:s=0}){return o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]",style:{"--jogak-tree-pl":`${s*12}px`},children:Object.entries(a).map(([n,j])=>o.jsx("li",{children:"id"in j?o.jsx(V,{meta:j,selectedEntryId:e,selectedJogakName:r,onSelect:t,indent:0}):o.jsx(G,{label:n,node:j,selectedEntryId:e,selectedJogakName:r,onSelect:t,depth:s+1})},n))})}function G({label:a,node:e,selectedEntryId:r,selectedJogakName:t,onSelect:s,depth:n}){const[j,g]=l.useState(!0);return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{g(k=>!k)},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","aria-expanded":j,children:[o.jsx("span",{children:j?"▾":"▸"}),a]}),j&&o.jsx(P,{node:e,selectedEntryId:r,selectedJogakName:t,onSelect:s,depth:n})]})}function V({meta:a,selectedEntryId:e,selectedJogakName:r,onSelect:t,indent:s}){const n=a.id===e,[j,g]=l.useState(n);l.useEffect(()=>{n&&g(!0)},[n]);const k=a.title.split("/").pop()??a.title,f=16+s*12;return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{if(n)g(c=>!c);else{g(!0);const c=a.jogakNames[0];c!==void 0&&t(a.id,c)}},className:m("jogak:flex jogak:items-center jogak:gap-1.5 jogak:w-full jogak:pr-3 jogak:py-[5px]","jogak:pl-[var(--jogak-entry-pl)]","jogak:border-none jogak:cursor-pointer jogak:text-left jogak:text-[13px]",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"),style:{"--jogak-entry-pl":`${f}px`},"aria-expanded":j,children:[o.jsx("span",{className:"jogak:text-[10px] jogak:shrink-0 jogak:leading-none",children:j?"▾":"▸"}),k]}),j&&o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:a.jogakNames.map(c=>{const x=n&&c===r;return o.jsx("li",{children:o.jsx("button",{type:"button",onClick:()=>{t(a.id,c)},className:m("jogak:block jogak:w-full jogak:text-left jogak:pr-3 jogak:py-1","jogak:pl-[var(--jogak-jogak-pl)]","jogak:border-none jogak:cursor-pointer jogak:text-[12px]",x?"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"),style:{"--jogak-jogak-pl":`${f+18}px`},"aria-current":x?"true":void 0,children:c})},c)})})]})}function H(a,e){const r=e==null?void 0:e.control,t=(e==null?void 0:e.action)!==void 0&&e.action!==!1,s=(e==null?void 0:e.type)==="function"||typeof a=="function";return t||s?"action":r==="boolean"||typeof a=="boolean"?"boolean":r==="number"||r==="range"||typeof a=="number"?"number":r==="select"||r==="radio"||(e==null?void 0:e.options)!==void 0&&e.options.length>0?"select":r==="text"||r==="color"||typeof a=="string"?"text":"json"}const y="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]",S="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)]",C="jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";function I({argKey:a,value:e,argType:r,onArgChange:t}){switch(H(e,r)){case"boolean":return o.jsx("input",{type:"checkbox",checked:e===!0,onChange:n=>{t(a,n.target.checked)},className:"jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"});case"number":return o.jsx("input",{type:"number",value:typeof e=="number"?e:"",onChange:n=>{t(a,n.target.valueAsNumber)},className:y});case"select":{const n=(r==null?void 0:r.options)??[];return o.jsx("select",{value:String(e??""),onChange:j=>{t(a,j.target.value)},className:y,children:n.map(j=>o.jsx("option",{value:String(j),children:String(j)},String(j)))})}case"text":return o.jsx("input",{type:"text",value:typeof e=="string"?e:String(e??""),onChange:n=>{t(a,n.target.value)},className:y});case"action":return o.jsx("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)"});case"json":return o.jsx("code",{className:"jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]",children:JSON.stringify(e)})}}function B({args:a,argTypes:e,onArgChange:r}){const s=Array.from(new Set([...Object.keys(a),...Object.keys(e)])).map(n=>[n,a[n]]);return o.jsxs("div",{className:"jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",children:[o.jsx("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"}),s.length===0?o.jsx("div",{className:"jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]",children:"No args defined"}):o.jsxs("table",{className:"jogak:w-full jogak:border-collapse jogak:text-[13px]",children:[o.jsx("thead",{children:o.jsxs("tr",{children:[o.jsx("th",{className:S,children:"Name"}),o.jsx("th",{className:S,children:"Control"}),o.jsx("th",{className:S,children:"Description"})]})}),o.jsx("tbody",{children:s.map(([n,j])=>{const g=e[n];return o.jsxs("tr",{children:[o.jsx("td",{className:m(C,"jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap"),children:n}),o.jsx("td",{className:C,children:o.jsx(I,{argKey:n,value:j,argType:g,onArgChange:r})}),o.jsx("td",{className:m(C,"jogak:text-[var(--jogak-color-fg-subtle)]"),children:(g==null?void 0:g.description)??""})]},n)})})]})]})}function Q(a){if(a.length===0)return"()";try{return a.map(e=>{var r;if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e=="function")return"[Function]";if(typeof e=="object"){const t=((r=e.constructor)==null?void 0:r.name)??"Object";return t!=="Object"&&t!=="Array"?`[${t}]`:JSON.stringify(e)}return JSON.stringify(e)}).join(", ")}catch{return"[unserializable]"}}function X(a){const e=new Date(a),r=e.getHours().toString().padStart(2,"0"),t=e.getMinutes().toString().padStart(2,"0"),s=e.getSeconds().toString().padStart(2,"0"),n=e.getMilliseconds().toString().padStart(3,"0");return`${r}:${t}:${s}.${n}`}function z(){const[a,e]=l.useState(()=>w.defaultActionChannel.getLogs());l.useEffect(()=>w.defaultActionChannel.subscribe(e),[]);const r=a.length===0;return o.jsxs("div",{className:"jogak:h-full jogak:flex jogak:flex-col",children:[o.jsxs("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:[o.jsxs("span",{children:["Actions ",a.length>0&&`(${a.length.toString()})`]}),o.jsx("button",{type:"button",onClick:()=>{w.defaultActionChannel.clear()},disabled:r,className:m("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",r?"jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default":"jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer"),children:"Clear"})]}),o.jsx("div",{className:"jogak:flex-1 jogak:overflow-auto",children:r?o.jsx("div",{className:"jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none",children:"함수 prop이 호출되면 여기에 기록됩니다"}):o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]",children:a.map(t=>o.jsxs("li",{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)]",children:[o.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]",children:X(t.timestamp)}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-violet)] jogak:font-semibold",children:t.name}),o.jsxs("span",{className:"jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1",children:["(",Q(t.args),")"]})]},t.id))})})]})}const q={mobile:375,tablet:768,desktop:"none"},Y={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},R={white:{"--jogak-canvas-bg":"#ffffff","--jogak-canvas-bg-image":"none","--jogak-canvas-bg-size":"auto","--jogak-canvas-bg-position":"0 0"},dark:{"--jogak-canvas-bg":"#1f2937","--jogak-canvas-bg-image":"none","--jogak-canvas-bg-size":"auto","--jogak-canvas-bg-position":"0 0"},transparent:{"--jogak-canvas-bg":"#ffffff","--jogak-canvas-bg-image":"linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)","--jogak-canvas-bg-size":"16px 16px","--jogak-canvas-bg-position":"0 0, 0 8px, 8px -8px, -8px 0px"}},_="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)]";function Z(a){return A.themes[a]??A.themes.vsDark}function D({entryId:a,jogakName:e,overrideArgs:r,onArgChange:t,onReset:s,codeTheme:n,onResolveJogak:j}){const g=v.useEntry(a),[k,f]=l.useState("desktop"),[c,x]=l.useState("white"),[h,p]=l.useState("controls"),b=Z(n);return g.status==="unknown"?o.jsxs("div",{"data-testid":"preview-not-found",className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry not found: ",a]}):g.status==="error"?o.jsxs("div",{"data-testid":"preview-error",className:"jogak:p-6 jogak:text-[var(--jogak-color-error-fg)] jogak:bg-[var(--jogak-color-bg-error)] jogak:h-full jogak:flex jogak:flex-col jogak:gap-3 jogak:items-start",children:[o.jsxs("div",{className:"jogak:font-semibold",children:["Failed to load entry: ",a]}),o.jsx("pre",{className:"jogak:m-0 jogak:p-3 jogak:bg-[var(--jogak-color-bg)] jogak:border jogak:border-[var(--jogak-color-error-border)] jogak:rounded-[var(--jogak-radius-lg)] jogak:text-[12px] jogak:whitespace-pre-wrap jogak:max-w-full",children:g.error.message})]}):g.status==="loading"?o.jsx(K,{meta:g.meta,jogakName:e,viewport:k,bgMode:c,onViewportChange:f,onBgModeChange:x}):o.jsx(T,{entry:g.entry,jogakName:e,overrideArgs:r,onArgChange:t,onReset:s,onResolveJogak:j,viewport:k,bgMode:c,bottomTab:h,onViewportChange:f,onBgModeChange:x,onBottomTabChange:p,prismTheme:b})}function K({meta:a,jogakName:e,viewport:r,bgMode:t,onViewportChange:s,onBgModeChange:n}){const j=e??a.jogakNames[0]??"...",g=q[r];return o.jsxs("div",{"data-testid":"preview-loading",className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(F,{title:a.title,jogakName:j,viewport:r,bgMode:t,onViewportChange:s,onBgModeChange:n,showReset:!1,onReset:()=>{}}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${_}`,style:R[t],children:o.jsx("div",{className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":g==="none"?"100%":`${g}px`},children:o.jsxs("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:["Loading ",a.title,"…"]})})})]})}function T({entry:a,jogakName:e,overrideArgs:r,onArgChange:t,onReset:s,onResolveJogak:n,viewport:j,bgMode:g,bottomTab:k,onViewportChange:f,onBgModeChange:c,onBottomTabChange:x,prismTheme:h}){var E;const p=e??((E=a.jogaks[0])==null?void 0:E.name)??null;if(l.useEffect(()=>{e===null&&p!==null&&n!==void 0&&n(a.id,p)},[e,p,a.id,n]),p===null)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry has no jogaks: ",a.id]});const b=a.jogaks.find(N=>N.name===p);if(b===void 0)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Jogak not found: ",p]});const d={...b.args??{},...r},u={...a.meta.argTypes??{},...b.argTypes??{}},U=Object.keys(r).length>0,$=q[j];return o.jsxs("div",{className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(F,{title:a.title,jogakName:b.name,viewport:j,bgMode:g,onViewportChange:f,onBgModeChange:c,showReset:U,onReset:s}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${_}`,style:R[g],children:o.jsx("div",{"data-jogak-content":!0,className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":$==="none"?"100%":`${$}px`},children:o.jsx(oo,{entry:a,args:d,source:a.source,theme:h},`${a.id}/${b.name}`)})}),o.jsxs("div",{"data-testid":"bottom-panel",className:"jogak:h-[260px] jogak:shrink-0 jogak:flex jogak:flex-col jogak:border-t-2 jogak:border-[var(--jogak-color-border)]",children:[o.jsx("div",{role:"tablist",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",children:["controls","actions"].map(N=>{const O=k===N;return o.jsx("button",{type:"button",role:"tab","aria-selected":O,onClick:()=>{x(N)},className:m("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",O?"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"),children:N},N)})}),o.jsx("div",{className:"jogak:flex-1 jogak:min-h-0 jogak:overflow-auto",children:k==="controls"?o.jsx(B,{args:d,argTypes:u,onArgChange:t}):o.jsx(z,{})})]})]})}function F({title:a,jogakName:e,viewport:r,bgMode:t,onViewportChange:s,onBgModeChange:n,showReset:j,onReset:g}){return o.jsxs("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:[o.jsxs("div",{className:"jogak:flex-1 jogak:text-[13px]",children:[o.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-subtle)]",children:a}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-border-strong)] jogak:mx-1.5 jogak:leading-none",children:"/"}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold",children:e})]}),o.jsx("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=>o.jsx("button",{type:"button",onClick:()=>{s(k)},"aria-pressed":r===k,className:m("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",r===k?"jogak:bg-[var(--jogak-color-bg-elevated)] jogak:text-[var(--jogak-color-fg-strong)] jogak:font-semibold jogak:shadow-[0_1px_2px_rgba(0,0,0,0.08)]":"jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal jogak:shadow-none"),children:Y[k]},k))}),o.jsx("div",{className:"jogak:flex jogak:gap-1 jogak:items-center",children:["white","dark","transparent"].map(k=>o.jsx("button",{type:"button",onClick:()=>{n(k)},"aria-pressed":t===k,"aria-label":`${k} background`,className:m("jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",_,t===k?"jogak:border-[var(--jogak-color-accent)]":"jogak:border-[var(--jogak-color-border-strong)]"),style:R[k]},k))}),j&&o.jsx("button",{type:"button",onClick:g,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",children:"Reset"})]})}function oo({entry:a,args:e,source:r,theme:t}){const s=l.useRef(null),[n,j]=l.useState(!1);return l.useEffect(()=>{const g=s.current;if(g!==null)return v.reactAdapter.render(a,e,g),()=>{v.reactAdapter.unmount(g)}},[a]),l.useEffect(()=>{const g=s.current;g!==null&&v.reactAdapter.render(a,e,g)},[a,e]),o.jsxs("div",{children:[o.jsxs("div",{className:"jogak:relative",children:[o.jsx("div",{ref:s,"data-testid":"preview-content",className:"jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9"}),o.jsx("button",{type:"button",onClick:()=>{j(g=>!g)},"aria-pressed":n,"aria-label":n?"Hide source code":"Show source code",className:m("jogak:absolute jogak:bottom-2 jogak:right-2 jogak:px-[9px] jogak:py-1","jogak:text-[11px] jogak:font-[family-name:var(--jogak-font-mono)] jogak:font-semibold jogak:tracking-[0.02em]","jogak:text-[var(--jogak-color-bg)] jogak:border-none jogak:rounded-[5px] jogak:cursor-pointer","jogak:shadow-[0_1px_4px_rgba(0,0,0,0.2)] jogak:transition-[background-color] jogak:duration-150 jogak:leading-none",n?"jogak:bg-[var(--jogak-color-accent)]":"jogak:bg-[#1e293b]"),children:"</>"})]}),n&&o.jsx("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:o.jsx(ao,{source:r,theme:t})})]})}function ao({source:a,theme:e}){const[r,t]=l.useState(!1),s=e.plain.backgroundColor??"#1e293b";if(a===void 0)return o.jsx("div",{className:"jogak:h-full jogak:flex jogak:items-center jogak:justify-center jogak:bg-[var(--jogak-source-bg)] jogak:text-[#94a3b8] jogak:text-[13px]",style:{"--jogak-source-bg":s},children:"Source not available"});const n=()=>{navigator.clipboard.writeText(a).then(()=>{t(!0),setTimeout(()=>{t(!1)},2e3)})};return o.jsxs("div",{className:"jogak:relative jogak:h-full",children:[o.jsx("button",{type:"button",onClick:n,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",children:r?"✓ Copied":"Copy"}),o.jsx(A.Highlight,{code:a.trim(),language:"tsx",theme:e,children:({style:j,tokens:g,getLineProps:k,getTokenProps:f})=>o.jsx("pre",{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",style:j,children:g.map((c,x)=>o.jsxs("div",{...k({line:c}),className:"jogak:flex jogak:pr-6",style:k({line:c}).style,children:[o.jsx("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:x+1}),o.jsx("span",{children:c.map((h,p)=>o.jsx("span",{...f({token:h})},p))})]},x))})})]})}function L(){if(typeof window>"u")return null;const a=new URLSearchParams(window.location.search),e=a.get("entry");if(e===null)return null;const r=a.get("jogak");return{entryId:e,jogakName:r}}function eo(a,e){const r=new URLSearchParams;r.set("entry",a),r.set("jogak",e),window.history.pushState({},"",`?${r.toString()}`)}function ro({entries:a,metas:e,codeTheme:r="vsDark"}={}){const t=l.useMemo(()=>{if(a!==void 0){e!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const i=new w.ComponentRegistry;for(const d of a)i.register(d);return i}if(e!==void 0)for(const i of e)w.defaultRegistry.registerMeta(i);return w.defaultRegistry},[a,e]),s=l.useMemo(()=>L(),[]),[n,j]=l.useState((s==null?void 0:s.entryId)??null),[g,k]=l.useState((s==null?void 0:s.jogakName)??null),[f,c]=l.useState({});l.useEffect(()=>{const i=()=>{const d=L();d!==null?(j(d.entryId),k(d.jogakName),c({})):(j(null),k(null))};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}},[]);const x=l.useCallback((i,d)=>{j(i),k(d),c({}),eo(i,d)},[]),h=l.useCallback((i,d)=>{if(j(u=>u===i?i:u),k(u=>u??d),typeof window<"u"){const u=new URLSearchParams(window.location.search);u.get("entry")===i&&u.get("jogak")===null&&(u.set("jogak",d),window.history.replaceState({},"",`?${u.toString()}`))}},[]),p=l.useCallback((i,d)=>{c(u=>({...u,[i]:d}))},[]),b=l.useCallback(()=>{c({})},[]);return o.jsx(v.JogakProvider,{registry:t,children:o.jsxs("div",{"data-jogak-shell":!0,className:"jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden",children:[o.jsx(J,{selectedEntryId:n,selectedJogakName:g,onSelect:x}),o.jsx("main",{className:"jogak:overflow-hidden jogak:min-h-0",children:n!==null?o.jsx(D,{entryId:n,jogakName:g,overrideArgs:f,onArgChange:p,onReset:b,codeTheme:r,onResolveJogak:h}):o.jsx("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"})})]})})}function to(){const a=v.useRegistry(),e=l.useMemo(()=>a.getAll(),[a]),r=l.useMemo(()=>a.getTree(),[a]),t=l.useMemo(()=>s=>a.search(s),[a]);return{entries:e,tree:r,search:t}}exports.Actions=z;exports.Controls=B;exports.JogakApp=ro;exports.Preview=D;exports.Sidebar=J;exports.useRegistry=to;