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

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to Jogak packages are documented here. The repository follow
 
 Version numbers apply to all packages in the workspace (synchronized release).
 
+## [0.1.0-alpha.4] — 2026-05-08
+
+### Internal
+
+- `@jogak/ui` SPA 빌드 파이프라인에 Tailwind v4 + `prefix(jogak)` 도입 (인프라 단계).
+  사용자 번들 / publish 산출물에는 영향 없음.
+- jogak 디자인 토큰을 `--jogak-*` CSS variable로 정의 (알파.5 컴포넌트 마이그레이션 대비).
+- jogak SPA에 `data-jogak-shell` / `data-jogak-content` wrapper 추가 (알파.6 사용자 globalCss
+  scope 정책 hook).
+
+### Notes
+
+- jogak UI 컴포넌트(Sidebar/Preview/Controls/Actions)는 여전히 inline style 사용. Tailwind class
+  마이그레이션은 알파.5에서 진행.
+- 사용자 프로젝트의 globalCss(예: `src/index.css`)는 **현재 jogak SPA에 적용되지 않습니다**. 알파.6에서
+  `JogakPluginOptions.globalCss` opt-in으로 지원 예정.
+- 사용자 프로젝트가 Tailwind를 사용해도 jogak prefix(`jogak:`)와 충돌하지 않음.
+
 ## [0.1.0-alpha.3] — 2026-05-07
 
 ### Added

package/README.md

@@ -62,6 +62,21 @@ import { runHost } from '@jogak/ui/host' // Node-only, used by @jogak/cli
 
 See the [main README](https://github.com/devclib/jogak#readme) for the full host embedding guide.
 
+## Styling roadmap
+
+| 단계 | 상태 | 내용 |
+|------|------|------|
+| alpha.4 | ✅ 본 릴리즈 | jogak UI 빌드 파이프라인에 Tailwind v4 + `jogak:` prefix 도입 (인프라) |
+| alpha.5 | 예정 | jogak UI 컴포넌트를 Tailwind class로 마이그레이션 |
+| alpha.6 | 예정 | 사용자 `globalCss` 옵션 지원 (`JogakPluginOptions.globalCss`) |
+| alpha.7+ | 검토 | preview Shadow DOM / iframe 격리 옵션 |
+
+### 현 한계 (alpha.4)
+
+- jogak SPA는 사용자 프로젝트의 globalCss(예: Tailwind, shadcn/ui)를 자동 import하지 않습니다.
+  jogak chrome은 자체 스타일만 사용하며, preview 안의 사용자 컴포넌트도 jogak 빌드 환경에서 렌더됩니다.
+- 사용자 globalCss를 적용하려면 알파.6을 기다려 주세요.
+
 - Repository: https://github.com/devclib/jogak
 - Issues: https://github.com/devclib/jogak/issues
 - License: [MIT](./LICENSE)

package/dist/host/index.js

@@ -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;
+"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;

package/dist/host/index.mjs

@@ -1,47 +1,47 @@
-import { fileURLToPath as k } from "node:url";
-import { resolve as u, dirname as B } from "node:path";
-const T = k(import.meta.url), s = u(B(T), "..", ".."), F = u(s, "index.html"), z = u(s, "src/app/main.tsx");
-async function N(t) {
-  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 = {
+import { fileURLToPath as T } from "node:url";
+import { resolve as u, dirname as U } from "node:path";
+const A = T(import.meta.url), i = u(U(A), "..", ".."), N = u(i, "index.html"), S = u(i, "src/app/main.tsx");
+async function $(t) {
+  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 = {
     patterns: t.patterns,
-    codeTheme: h,
+    codeTheme: w,
     cwd: t.userRoot
   };
   t.tsConfigFilePath !== void 0 && (a.tsConfigFilePath = t.tsConfigFilePath);
-  const b = t.extraPlugins ?? [], l = {
-    root: s,
+  const v = t.extraPlugins ?? [], l = {
+    root: i,
     configFile: !1,
     // ui/vite.config.ts 무시
-    plugins: [m(), y(a), ...b],
+    plugins: [y(), h(), b(a), ...v],
     optimizeDeps: {
       include: ["react", "react-dom/client", "@jogak/core", "@jogak/react"]
     }
   };
   if (t.mode === "dev") {
-    const R = {
+    const j = {
       port: t.port ?? 5173,
       host: t.host ?? "localhost",
       open: t.open ?? !1,
-      fs: { allow: [s, t.userRoot] }
-    }, _ = {
+      fs: { allow: [i, t.userRoot] }
+    }, k = {
       ...l,
-      server: R
-    }, n = await i(_);
-    await n.listen();
-    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()}/`;
+      server: j
+    }, r = await g(k);
+    await r.listen();
+    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()}/`;
     let d = !1;
     return {
-      url: j,
+      url: B,
       port: f,
       close: async () => {
-        d || (d = !0, await n.close());
+        d || (d = !0, await r.close());
       },
       printUrls: () => {
-        n.printUrls();
+        r.printUrls();
       }
     };
   }
-  const v = {
+  const P = {
     ...l,
     base: t.base ?? "./",
     build: {
@@ -50,50 +50,50 @@ async function N(t) {
       sourcemap: t.sourcemap ?? !1,
       minify: t.minify ?? "esbuild"
     }
-  }, w = Date.now(), C = await g(v), P = Date.now() - w, { assetCount: D, totalBytes: O } = U(C);
+  }, C = Date.now(), D = await m(P), O = Date.now() - C, { assetCount: R, totalBytes: _ } = L(D);
   return {
     outDir: t.outDir,
-    elapsedMs: P,
-    assetCount: D,
-    totalBytes: O
+    elapsedMs: O,
+    assetCount: R,
+    totalBytes: _
   };
 }
-function U(t) {
-  const e = A(t);
-  if (e === void 0)
+function L(t) {
+  const o = M(t);
+  if (o === void 0)
     return { assetCount: 0, totalBytes: 0 };
-  let o = 0, r = 0;
-  for (const i of e)
-    o += 1, r += L(i);
-  return { assetCount: o, totalBytes: r };
+  let e = 0, n = 0;
+  for (const s of o)
+    e += 1, n += x(s);
+  return { assetCount: e, totalBytes: n };
 }
 function p(t) {
   return typeof t == "object" && t !== null && Array.isArray(t.output);
 }
-function A(t) {
+function M(t) {
   if (Array.isArray(t)) {
-    const e = [];
-    for (const o of t)
-      p(o) && e.push(...o.output);
-    return e;
+    const o = [];
+    for (const e of t)
+      p(e) && o.push(...e.output);
+    return o;
   }
   if (p(t))
     return t.output;
 }
-function L(t) {
+function x(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;
+  const o = t;
+  if (o.type === "chunk" && typeof o.code == "string")
+    return Buffer.byteLength(o.code, "utf8");
+  if (o.type === "asset") {
+    const e = o.source;
+    if (typeof e == "string") return Buffer.byteLength(e, "utf8");
+    if (e instanceof Uint8Array) return e.byteLength;
   }
   return 0;
 }
 export {
-  F as UI_HTML_ENTRY,
-  z as UI_MAIN_ENTRY,
-  N as runHost
+  N as UI_HTML_ENTRY,
+  S as UI_MAIN_ENTRY,
+  $ as runHost
 };

package/dist/index.js

@@ -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;
+"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",{"data-jogak-content":!0,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",{"data-jogak-shell":!0,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;

package/dist/index.mjs

@@ -8,7 +8,7 @@ function Y({
   selectedJogakName: t,
   onSelect: o
 }) {
-  const [i, d] = x(""), { metaTree: r, searchMeta: s } = _(), l = i.trim().length > 0 ? s(i) : null;
+  const [i, d] = x(""), { metaTree: r, searchMeta: a } = _(), l = i.trim().length > 0 ? a(i) : null;
   return /* @__PURE__ */ c(
     "aside",
     {
@@ -27,8 +27,8 @@ function Y({
             type: "search",
             placeholder: "Search components...",
             value: i,
-            onChange: (a) => {
-              d(a.target.value);
+            onChange: (s) => {
+              d(s.target.value);
             },
             style: {
               width: "100%",
@@ -92,10 +92,10 @@ function H({
         margin: 0,
         padding: `0 0 0 ${d * 12}px`
       },
-      children: Object.entries(e).map(([r, s]) => /* @__PURE__ */ n("li", { children: "id" in s ? /* @__PURE__ */ n(
+      children: Object.entries(e).map(([r, a]) => /* @__PURE__ */ n("li", { children: "id" in a ? /* @__PURE__ */ n(
         D,
         {
-          meta: s,
+          meta: a,
           selectedEntryId: t,
           selectedJogakName: o,
           onSelect: i,
@@ -105,7 +105,7 @@ function H({
         Z,
         {
           label: r,
-          node: s,
+          node: a,
           selectedEntryId: t,
           selectedJogakName: o,
           onSelect: i,
@@ -123,14 +123,14 @@ function Z({
   onSelect: d,
   depth: r
 }) {
-  const [s, l] = x(!0);
+  const [a, l] = x(!0);
   return /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ c(
       "button",
       {
         type: "button",
         onClick: () => {
-          l((a) => !a);
+          l((s) => !s);
         },
         style: {
           display: "flex",
@@ -147,14 +147,14 @@ function Z({
           textTransform: "uppercase",
           letterSpacing: "0.05em"
         },
-        "aria-expanded": s,
+        "aria-expanded": a,
         children: [
-          /* @__PURE__ */ n("span", { children: s ? "▾" : "▸" }),
+          /* @__PURE__ */ n("span", { children: a ? "▾" : "▸" }),
           e
         ]
       }
     ),
-    s && /* @__PURE__ */ n(
+    a && /* @__PURE__ */ n(
       H,
       {
         node: t,
@@ -173,11 +173,11 @@ function D({
   onSelect: i,
   indent: d
 }) {
-  const r = e.id === t, [s, l] = x(r);
+  const r = e.id === t, [a, l] = x(r);
   v(() => {
     r && l(!0);
   }, [r]);
-  const a = e.title.split("/").pop() ?? e.title, m = 16 + d * 12;
+  const s = e.title.split("/").pop() ?? e.title, m = 16 + d * 12;
   return /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ c(
       "button",
@@ -206,14 +206,14 @@ function D({
           fontWeight: r ? 500 : 400,
           textAlign: "left"
         },
-        "aria-expanded": s,
+        "aria-expanded": a,
         children: [
-          /* @__PURE__ */ n("span", { style: { fontSize: 10, flexShrink: 0, lineHeight: 1 }, children: s ? "▾" : "▸" }),
-          a
+          /* @__PURE__ */ n("span", { style: { fontSize: 10, flexShrink: 0, lineHeight: 1 }, children: a ? "▾" : "▸" }),
+          s
         ]
       }
     ),
-    s && /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: e.jogakNames.map((p) => {
+    a && /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: e.jogakNames.map((p) => {
       const h = r && p === o;
       return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
         "button",
@@ -277,11 +277,11 @@ function ee({ argKey: e, value: t, argType: o, onArgChange: i }) {
         "select",
         {
           value: String(t ?? ""),
-          onChange: (s) => {
-            i(e, s.target.value);
+          onChange: (a) => {
+            i(e, a.target.value);
           },
           style: W,
-          children: r.map((s) => /* @__PURE__ */ n("option", { value: String(s), children: String(s) }, String(s)))
+          children: r.map((a) => /* @__PURE__ */ n("option", { value: String(a), children: String(a) }, String(a)))
         }
       );
     }
@@ -363,7 +363,7 @@ function te({ args: e, argTypes: t, onArgChange: o }) {
         /* @__PURE__ */ n("th", { style: A, children: "Control" }),
         /* @__PURE__ */ n("th", { style: A, children: "Description" })
       ] }) }),
-      /* @__PURE__ */ n("tbody", { children: d.map(([r, s]) => {
+      /* @__PURE__ */ n("tbody", { children: d.map(([r, a]) => {
         const l = t[r];
         return /* @__PURE__ */ c("tr", { children: [
           /* @__PURE__ */ n(
@@ -383,7 +383,7 @@ function te({ args: e, argTypes: t, onArgChange: o }) {
             ee,
             {
               argKey: r,
-              value: s,
+              value: a,
               argType: l,
               onArgChange: o
             }
@@ -534,9 +534,9 @@ function le({
   onArgChange: i,
   onReset: d,
   codeTheme: r,
-  onResolveJogak: s
+  onResolveJogak: a
 }) {
-  const l = G(e), [a, m] = x("desktop"), [p, h] = x("white"), [S, b] = x("controls"), y = de(r);
+  const l = G(e), [s, m] = x("desktop"), [p, h] = x("white"), [S, b] = x("controls"), y = de(r);
   return l.status === "unknown" ? /* @__PURE__ */ c("div", { "data-testid": "preview-not-found", style: { padding: 24, color: "#ef4444" }, children: [
     "Entry not found: ",
     e
@@ -578,25 +578,25 @@ function le({
       ]
     }
   ) : l.status === "loading" ? /* @__PURE__ */ n(
-    se,
+    ae,
     {
       meta: l.meta,
       jogakName: t,
-      viewport: a,
+      viewport: s,
       bgMode: p,
       onViewportChange: m,
       onBgModeChange: h
     }
   ) : /* @__PURE__ */ n(
-    ae,
+    se,
     {
       entry: l.entry,
       jogakName: t,
       overrideArgs: o,
       onArgChange: i,
       onReset: d,
-      onResolveJogak: s,
-      viewport: a,
+      onResolveJogak: a,
+      viewport: s,
       bgMode: p,
       bottomTab: S,
       onViewportChange: m,
@@ -606,7 +606,7 @@ function le({
     }
   );
 }
-function se({
+function ae({
   meta: e,
   jogakName: t,
   viewport: o,
@@ -614,7 +614,7 @@ function se({
   onViewportChange: d,
   onBgModeChange: r
 }) {
-  const s = t ?? e.jogakNames[0] ?? "...", l = N[o];
+  const a = t ?? e.jogakNames[0] ?? "...", l = N[o];
   return /* @__PURE__ */ c(
     "div",
     {
@@ -625,7 +625,7 @@ function se({
           J,
           {
             title: e.title,
-            jogakName: s,
+            jogakName: a,
             viewport: o,
             bgMode: i,
             onViewportChange: d,
@@ -685,16 +685,16 @@ function se({
     }
   );
 }
-function ae({
+function se({
   entry: e,
   jogakName: t,
   overrideArgs: o,
   onArgChange: i,
   onReset: d,
   onResolveJogak: r,
-  viewport: s,
+  viewport: a,
   bgMode: l,
-  bottomTab: a,
+  bottomTab: s,
   onViewportChange: m,
   onBgModeChange: p,
   onBottomTabChange: h,
@@ -718,14 +718,14 @@ function ae({
   const u = { ...y.args ?? {}, ...o }, g = {
     ...e.meta.argTypes ?? {},
     ...y.argTypes ?? {}
-  }, P = Object.keys(o).length > 0, O = N[s];
+  }, P = Object.keys(o).length > 0, O = N[a];
   return /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
     /* @__PURE__ */ n(
       J,
       {
         title: e.title,
         jogakName: y.name,
-        viewport: s,
+        viewport: a,
         bgMode: l,
         onViewportChange: m,
         onBgModeChange: p,
@@ -745,6 +745,7 @@ function ae({
         children: /* @__PURE__ */ n(
           "div",
           {
+            "data-jogak-content": !0,
             style: {
               maxWidth: O === "none" ? "100%" : O,
               margin: "0 auto",
@@ -788,7 +789,7 @@ function ae({
                 flexShrink: 0
               },
               children: ["controls", "actions"].map((k) => {
-                const C = a === k;
+                const C = s === k;
                 return /* @__PURE__ */ n(
                   "button",
                   {
@@ -817,7 +818,7 @@ function ae({
               })
             }
           ),
-          /* @__PURE__ */ n("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: a === "controls" ? /* @__PURE__ */ n(
+          /* @__PURE__ */ n("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: s === "controls" ? /* @__PURE__ */ n(
             te,
             {
               args: u,
@@ -837,7 +838,7 @@ function J({
   bgMode: i,
   onViewportChange: d,
   onBgModeChange: r,
-  showReset: s,
+  showReset: a,
   onReset: l
 }) {
   return /* @__PURE__ */ c(
@@ -868,55 +869,55 @@ function J({
               borderRadius: 6,
               padding: 2
             },
-            children: ["mobile", "tablet", "desktop"].map((a) => /* @__PURE__ */ n(
+            children: ["mobile", "tablet", "desktop"].map((s) => /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  d(a);
+                  d(s);
                 },
-                "aria-pressed": o === a,
+                "aria-pressed": o === s,
                 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",
+                  background: o === s ? "#fff" : "transparent",
+                  color: o === s ? "#111827" : "#6b7280",
+                  fontWeight: o === s ? 600 : 400,
+                  boxShadow: o === s ? "0 1px 2px rgba(0,0,0,0.08)" : "none",
                   transition: "all 0.1s"
                 },
-                children: ie[a]
+                children: ie[s]
               },
-              a
+              s
             ))
           }
         ),
-        /* @__PURE__ */ n("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: ["white", "dark", "transparent"].map((a) => /* @__PURE__ */ n(
+        /* @__PURE__ */ n("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: ["white", "dark", "transparent"].map((s) => /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             onClick: () => {
-              r(a);
+              r(s);
             },
-            "aria-pressed": i === a,
-            "aria-label": `${a} background`,
+            "aria-pressed": i === s,
+            "aria-label": `${s} background`,
             style: {
               width: 20,
               height: 20,
               borderRadius: 4,
-              border: i === a ? "2px solid #2563eb" : "2px solid #d1d5db",
+              border: i === s ? "2px solid #2563eb" : "2px solid #d1d5db",
               cursor: "pointer",
               padding: 0,
               flexShrink: 0,
-              ...M[a]
+              ...M[s]
             }
           },
-          a
+          s
         )) }),
-        s && /* @__PURE__ */ n(
+        a && /* @__PURE__ */ n(
           "button",
           {
             type: "button",
@@ -938,7 +939,7 @@ function J({
   );
 }
 function ce({ entry: e, args: t, source: o, theme: i }) {
-  const d = V(null), [r, s] = x(!1);
+  const d = V(null), [r, a] = x(!1);
   return v(() => {
     const l = d.current;
     if (l !== null)
@@ -968,7 +969,7 @@ function ce({ entry: e, args: t, source: o, theme: i }) {
         {
           type: "button",
           onClick: () => {
-            s((l) => !l);
+            a((l) => !l);
           },
           "aria-pressed": r,
           "aria-label": r ? "Hide source code" : "Show source code",
@@ -1052,11 +1053,11 @@ function pe({ source: e, theme: t }) {
         children: o ? "✓ Copied" : "Copy"
       }
     ),
-    /* @__PURE__ */ n(Q, { code: e.trim(), language: "tsx", theme: t, children: ({ style: s, tokens: l, getLineProps: a, getTokenProps: m }) => /* @__PURE__ */ n(
+    /* @__PURE__ */ n(Q, { code: e.trim(), language: "tsx", theme: t, children: ({ style: a, tokens: l, getLineProps: s, getTokenProps: m }) => /* @__PURE__ */ n(
       "pre",
       {
         style: {
-          ...s,
+          ...a,
           margin: 0,
           padding: "12px 0",
           fontSize: 12.5,
@@ -1069,9 +1070,9 @@ function pe({ source: e, theme: t }) {
         children: l.map((p, h) => /* @__PURE__ */ c(
           "div",
           {
-            ...a({ line: p }),
+            ...s({ line: p }),
             style: {
-              ...a({ line: p }).style,
+              ...s({ line: p }).style,
               display: "flex",
               paddingRight: 24
             },
@@ -1128,24 +1129,24 @@ function me({
     if (t !== void 0)
       for (const f of t) F.registerMeta(f);
     return F;
-  }, [e, t]), d = w(() => E(), []), [r, s] = x(
+  }, [e, t]), d = w(() => E(), []), [r, a] = x(
     (d == null ? void 0 : d.entryId) ?? null
-  ), [l, a] = x(
+  ), [l, s] = x(
     (d == null ? void 0 : d.jogakName) ?? null
   ), [m, p] = x({});
   v(() => {
     const f = () => {
       const u = E();
-      u !== null ? (s(u.entryId), a(u.jogakName), p({})) : (s(null), a(null));
+      u !== null ? (a(u.entryId), s(u.jogakName), p({})) : (a(null), s(null));
     };
     return window.addEventListener("popstate", f), () => {
       window.removeEventListener("popstate", f);
     };
   }, []);
   const h = R((f, u) => {
-    s(f), a(u), p({}), fe(f, u);
+    a(f), s(u), p({}), fe(f, u);
   }, []), S = R((f, u) => {
-    if (s((g) => g === f ? f : g), a((g) => g ?? u), typeof window < "u") {
+    if (a((g) => g === f ? f : g), s((g) => g ?? u), typeof window < "u") {
       const g = new URLSearchParams(window.location.search);
       g.get("entry") === f && g.get("jogak") === null && (g.set("jogak", u), window.history.replaceState({}, "", `?${g.toString()}`));
     }
@@ -1157,6 +1158,7 @@ function me({
   return /* @__PURE__ */ n(T, { registry: i, children: /* @__PURE__ */ c(
     "div",
     {
+      "data-jogak-shell": !0,
       style: {
         display: "grid",
         gridTemplateColumns: "260px 1fr",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jogak/ui",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "Showcase viewer UI for Jogak — Sidebar / Preview / Controls / Actions and the JogakApp shell.",
   "keywords": [
     "jogak",
@@ -45,6 +45,7 @@
     "src/app",
     "src/components",
     "src/hooks",
+    "src/styles",
     "src/index.ts",
     "src/vite-env.d.ts",
     "README.md",
@@ -60,8 +61,10 @@
   },
   "dependencies": {
     "prism-react-renderer": "^2.4.1",
-    "@jogak/core": "0.1.0-alpha.3",
-    "@jogak/react": "0.1.0-alpha.3"
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@jogak/core": "0.1.0-alpha.4",
+    "@jogak/react": "0.1.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",

package/src/app/App.tsx

@@ -126,6 +126,7 @@ export function JogakApp({
   return (
     <JogakProvider registry={registry}>
       <div
+        data-jogak-shell
         style={{
           display: 'grid',
           gridTemplateColumns: '260px 1fr',

package/src/app/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import 'virtual:jogak'
 import { _jogakCodeTheme } from 'virtual:jogak'
+import '../styles/jogak.css'
 import { JogakApp } from './App.js'
 
 const rootEl = document.getElementById('root')

package/src/components/Preview/index.tsx

@@ -336,6 +336,7 @@ function ReadyFrame({
         }}
       >
         <div
+          data-jogak-content
           style={{
             maxWidth: maxWidth === 'none' ? '100%' : maxWidth,
             margin: '0 auto',

package/src/styles/jogak.css

@@ -0,0 +1,88 @@
+/*
+ * jogak SPA 전용 스타일.
+ *
+ * 본 파일은 `packages/ui/src/app/main.tsx`에서만 import된다.
+ * lib mode build entry(`src/index.ts`, `src/host/index.ts`)에는 import되지 않으므로
+ * publish되는 `dist/index.{mjs,js}` / `dist/host/index.{mjs,js}` 산출물에 css 흔적이
+ * 들어가지 않는다 (사용자 번들 영향 zero — api-contracts §2.4, §7).
+ *
+ * Tailwind v4: preflight를 의도적으로 import하지 않고 `theme.css` + `utilities.css`만
+ * 분리 import한다. preflight의 globals(`*`, `html`, `body`)는 사용자 css와 prefix
+ * 무관하게 충돌 가능 — jogak SPA는 `index.html`의 inline reset(`box-sizing`,
+ * `body margin:0`)으로 충분하다 (api-contracts §6.2).
+ *
+ * `prefix(jogak)` — 모든 utility/variant/theme variable에 `jogak:` prefix가 적용된다.
+ * 사용자가 v4(no prefix)나 v3(`tw-` prefix)를 써도 selector 충돌 zero.
+ */
+
+@import "tailwindcss/theme.css" layer(theme) prefix(jogak);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(jogak);
+
+/*
+ * jogak 디자인 토큰 (`--jogak-*`).
+ *
+ * 정의 위치는 `:root` — preview 내부의 사용자 컴포넌트도 var() 참조 가능 (원하면).
+ * `--jogak-*` prefix가 충분한 namespace를 제공하므로 사용자 globalCss(알파.6 예정)
+ * 와 충돌 zero.
+ *
+ * 알파.4에서는 변수만 정의하고 컴포넌트는 inline style을 그대로 둔다.
+ * 알파.5에서 `style={{ color: '#374151' }}` → `className="jogak:text-[var(--jogak-color-fg)]"`
+ * 형태로 마이그레이션한다 (api-contracts §4.4).
+ */
+@layer base {
+  :root {
+    /* color */
+    --jogak-color-bg:           #ffffff;
+    --jogak-color-fg:           #374151;
+    --jogak-color-fg-muted:     #6b7280;
+    --jogak-color-fg-subtle:    #9ca3af;
+    --jogak-color-fg-strong:    #111827;
+    --jogak-color-bg-subtle:    #f9fafb;
+    --jogak-color-bg-elevated:  #ffffff;
+    --jogak-color-bg-error:     #fef2f2;
+
+    --jogak-color-accent:       #2563eb;
+    --jogak-color-accent-bg:    #eff6ff;
+    --jogak-color-accent-fg:    #1d4ed8;
+    --jogak-color-accent-bg-soft: #dbeafe;
+
+    --jogak-color-violet:       #7c3aed;
+    --jogak-color-violet-bg:    #f5f3ff;
+    --jogak-color-violet-border:#ddd6fe;
+
+    --jogak-color-error:        #ef4444;
+    --jogak-color-error-fg:     #b91c1c;
+    --jogak-color-error-border: #fecaca;
+
+    --jogak-color-border:       #e5e7eb;
+    --jogak-color-border-muted: #f3f4f6;
+    --jogak-color-border-strong:#d1d5db;
+    --jogak-color-checker:      #e2e8f0;
+
+    /* spacing */
+    --jogak-space-1: 4px;
+    --jogak-space-2: 8px;
+    --jogak-space-3: 12px;
+    --jogak-space-4: 16px;
+    --jogak-space-5: 20px;
+    --jogak-space-6: 24px;
+
+    /* radius */
+    --jogak-radius-sm: 3px;
+    --jogak-radius-md: 4px;
+    --jogak-radius-lg: 6px;
+    --jogak-radius-xl: 8px;
+
+    /* typography */
+    --jogak-font-sans: system-ui, sans-serif;
+    --jogak-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    --jogak-text-xs: 10px;
+    --jogak-text-sm: 11px;
+    --jogak-text-base: 12px;
+    --jogak-text-md: 13px;
+    --jogak-text-lg: 14px;
+
+    /* layout 상수 */
+    --jogak-sidebar-width: 260px;
+  }
+}