@jogak/ui 0.1.0-alpha.7.1 → 0.1.0-alpha.8

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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.8] — 2026-05-09
+
+### Added
+
+- **`JogakHostOptions.userViteUrl`** — 사용자 vite spawn URL을 jogak SPA host에 전달.
+  CLI의 `spawnUserVite` 결과가 `runHost`에 자동 전달되며 jogak() plugin의
+  `_jogakUserViteUrl`로 emit됨 → `IframeMount`가 iframe `src` base로 사용.
+- **`IframeMount` postMessage 통신 재작성** — cross-origin 환경(사용자 vite ≠ jogak
+  SPA)에서 `entry.id`를 메시지로 전달, iframe 안에서 `defaultRegistry.requestEntry(id)`로
+  dynamic import.
+
+### Changed (의도된 default 변경)
+
+- **`previewIsolation` default `'shadow'` → `'iframe'`** — 사용자 vite scope에서
+  사용자 컴포넌트가 사용자 디자인 그대로 보이는 것이 default 동작.
+- **`main.tsx` 단순화** — 사용자 globalCss는 사용자 vite scope에서만 처리되므로 jogak
+  SPA outer document inject는 `'none'` 모드(deprecated)에서만.
+
+### Notes
+
+- jogak-test-app(React + Vite + Tailwind v4 + shadcn) 검증: Badge가 사용자 디자인 그대로
+  표시 + chrome 침범 zero 입증.
+
 ## [0.1.0-alpha.7.1] — 2026-05-09
 
 ### Fixed

package/README.md

@@ -22,8 +22,9 @@ pnpm add @jogak/ui @jogak/core @jogak/react react react-dom
 import { defineJogakConfig } from '@jogak/core'
 
 export default defineJogakConfig({
-  globalCss: true,             // 사용자 globalCss 자동 감지 + import
-  // previewIsolation: 'shadow', // 'shadow' (default, 알파.7.1) | 'iframe' | 'none'
+  globalCss: true,              // 사용자 globalCss 자동 감지 + import
+  // previewIsolation: 'iframe',  // 'iframe' (default, 알파.8) | 'shadow' (deprecated) | 'none' (deprecated)
+  // userVite: { port: 5174 },    // 사용자 vite spawn 옵션 (자동 탐지 시 미명시)
   codeTheme: 'vsDark',
   port: 5173,                  // dev server (CLI --port로 override)
 })
@@ -85,8 +86,9 @@ See the [main README](https://github.com/devclib/jogak#readme) for the full host
 | alpha.5 | ✅ 완료 | jogak UI 컴포넌트를 Tailwind class로 마이그레이션 (4 PR) |
 | alpha.6 | ✅ 완료 | `JogakPluginOptions.globalCss` 옵션 + chrome 보호 rule (단, 통로 부재로 사용자 환경에서 무효 — 알파.7에서 정정) |
 | alpha.7 | ✅ 완료 | `jogak.config.ts` 통로 + `previewIsolation` 옵션 + `JogakHostOptionsBase` 확장 (단, isolation 통로 결함으로 격리 무효 — 알파.7.1에서 정정) |
-| **alpha.7.1** | ✅ **본 릴리즈** | **isolation 통로 hotfix + default `previewIsolation: 'shadow'` + main.tsx isolation-aware import** |
-| alpha.8+ | 예정 | 사용자 vite 통합으로 사용자 Tailwind utility 컴파일 통로, multi-baseline VR |
+| alpha.7.1 | ✅ 완료 | isolation 통로 hotfix + default `previewIsolation: 'shadow'` (단, 사용자 utility 미컴파일 한계 — 알파.8에서 사용자 vite 통합으로 해결) |
+| **alpha.8** | ✅ **본 릴리즈** | **사용자 vite 자동 spawn + 사용자 Tailwind utility 정상 컴파일 + default `previewIsolation: 'iframe'`** |
+| alpha.9+ | 예정 | shadow 모드 사용자 utility inject 부활, iframe sandbox 옵션, multi-baseline VR |
 
 ### 사용자 globalCss 적용
 
@@ -124,43 +126,59 @@ defineJogakConfig({ globalCss: './src/index.css' })
 defineJogakConfig({ globalCss: ['./src/tokens.css', './src/reset.css'] })
 ```
 
-#### 격리 보장 (default `previewIsolation: 'shadow'`, 알파.7.1)
+#### 격리 보장 (default `previewIsolation: 'iframe'`, 알파.8)
 
 - **Tailwind utility class**: jogak UI는 `prefix=jogak`로 빌드되어 사용자 utility와 충돌 zero (예: 사용자 `bg-primary` ≠ jogak `jogak:bg-...`).
 - **CSS variable**: jogak은 `--jogak-*` prefix로 namespace 격리 → 사용자 `:root { --primary }` 같은 디자인 토큰은 영향 없음.
 - **Form element 보호**: `[data-jogak-shell]` 안의 button/input/select/textarea는 사용자 reset의 `border` / `background` / `color` 침범을 받지 않도록 `:where()` 보호 rule 적용. specificity 0이라 사용자가 명시적으로 `[data-jogak-shell] button { ... }`를 작성하면 정상 override됩니다.
 
-### previewIsolation 사용 가이드 (알파.7.1)
+### previewIsolation 사용 가이드 (알파.8)
 
-jogak chrome ↔ 사용자 영역의 **양방향 격리** 모드. 알파.7.1부터 default가 `'shadow'`로 변경되어 사용자 reset/preflight가 jogak chrome을 침범하는 결함이 자동 차단됩니다.
+jogak chrome ↔ 사용자 영역의 **양방향 격리** + 사용자 컴포넌트는 사용자 디자인 시스템 그대로 표시. 알파.8부터 default가 `'iframe'`로 변경되어 사용자 vite 인스턴스가 자동 spawn되고, iframe document가 사용자 vite의 정상 client로 작동합니다.
 
 #### 모드 비교
 
-| 모드 | mount | 사용자 globalCss inject 위치 | chrome 침범 | Radix portal | cold start |
-|------|-------|---------------------------|-----------|--------------|-----------|
-| `'shadow'` (default) | ShadowRoot | **inject 안 됨** (격리) | zero | document.body (shadow 외부) | ★★★ |
-| `'iframe'` | iframe document | iframe document | zero | iframe document (정상) | ★★ |
-| `'none'` (back-compat) | 같은 document | outer document | **있음 (의도된 허용)** | document.body | ★★★ |
+| 모드 | mount | 사용자 utility 컴파일 | chrome 침범 | Radix portal | cold start |
+|------|-------|---------------------|-----------|--------------|-----------|
+| `'iframe'` (default) | iframe document (사용자 vite scope) | **정상** ✅ | zero | iframe document (정상) | ★★ |
+| `'shadow'` (deprecated) | ShadowRoot | **미컴파일** | zero | document.body (shadow 외부) | ★★★ |
+| `'none'` (deprecated) | 같은 document | 미컴파일 | **있음** | document.body | ★★★ |
 
-#### `'shadow'` 모드 (default) 동작과 한계
+#### `'iframe'` 모드 (default, 알파.8)
 
-알파.7.1에서 ShadowMount는 **사용자 css를 shadow root에 inject하지 않습니다**. outer document에도 inject 안 됨 (main.tsx 가드). 결과적으로:
+jogak CLI가 사용자 cwd의 `vite.config.{ts,mts,js,mjs,cjs}`를 자동 탐지해 별도 vite dev server를 spawn합니다. iframe `src`가 그 사용자 vite를 가리키므로 사용자 plugins(@tailwindcss/vite, custom alias 등)이 정상 작동 → **사용자 컴포넌트가 사용자 디자인 그대로 표시**.
 
-- **chrome 보호**: 사용자 `* { ... }` reset이나 Tailwind preflight가 jogak utility를 덮어쓸 수 없음
-- **사용자 컴포넌트 styling**: shadow scope 안에서는 사용자 globalCss가 적용되지 않으므로 디자인 토큰/Tailwind utility 미적용 (raw HTML 형태). **사용자 컴포넌트의 styling 통로는 알파.8 사이클**에서 사용자 vite 통합으로 별도 도입 예정
-- **Radix portal**: default Portal target은 `document.body` (shadow 외부) — portal 내용은 shadow scope 외부라 사용자 토큰 미적용. 회피: `<Dialog.Portal container={shadowRootEl}>` 명시 전달
+```ts
+// jogak.config.ts (사용자 프로젝트 root)
+import { defineJogakConfig } from '@jogak/core'
+
+export default defineJogakConfig({
+  globalCss: true,
+  // previewIsolation: 'iframe',  // default
+  // userVite: { port: 5174 },    // 명시 시
+})
+```
+
+**자동 동작:**
+- 사용자 `vite.config.ts` 자동 탐지 → `loadConfigFromFile` + `mergeConfig`로 jogak plugins 자동 inject (사용자 액션 zero)
+- 사용자 vite default port 5174 (jogak SPA가 default 5173 차지). 사용자 명시 가능
+- cross-origin postMessage로 entry/args 전달 (`entry.id`만, iframe 안에서 `defaultRegistry.requestEntry(id)` dynamic import)
+- HMR: 사용자 vite의 React Fast Refresh + Tailwind utility 재생성 정상 작동
 
-#### `'iframe'` 모드
+**Fallback:**
+- `vite.config.ts` 미발견 또는 평가 실패 → spawn skip + warning. jogak SPA만 시작 (`'none'` 모드 동등 동작).
 
-iframe document scope에 사용자 globalCss가 import되어 사용자 컴포넌트가 토큰 적용을 받습니다. outer chrome은 사용자 css 영향 zero.
+**주의:**
+- jogak ↔ 사용자 vite 두 인스턴스 (vs 알파.7.1까지의 single vite). dev cold start +100ms, RSS +50~80MB.
+- iframe sandbox 미적용 (사용자 컴포넌트의 fetch/clipboard/storage 자유 사용).
 
-> ⚠️ jogak 차별점("single Vite, no iframe")과 일부 상충 — iframe load + 별도 module graph 비용. Radix portal까지 완벽 격리해야 하는 시나리오 한정.
+#### `'shadow'` 모드 (deprecated)
 
-iframe은 `<iframe src="/preview-frame.html">`로 로드되며, 부모-자식 동일 origin이라 부모가 `iframe.contentWindow.__jogak_setProps__({ entry, args })`를 직접 호출하는 방식으로 props를 전달합니다.
+ShadowRoot 격리는 정상 작동하나 사용자 utility가 shadow scope에 inject되지 않아 사용자 컴포넌트가 raw 형태로 표시됩니다. 알파.9에서 사용자 vite의 `transformRequest` API로 shadow inject 부활 검토.
 
-#### `'none'` 모드 (back-compat opt-in)
+#### `'none'` 모드 (deprecated)
 
-사용자 globalCss를 outer document에 inject. 사용자 reset이 jogak chrome에 영향을 주는 것을 의도적으로 허용하는 경우만 사용:
+사용자 globalCss를 outer document에 inject. 사용자 reset이 jogak chrome 침범. back-compat 시나리오만 사용:
 
 ```ts
 defineJogakConfig({ globalCss: true, previewIsolation: 'none' })

package/dist/app/App.d.ts

@@ -15,14 +15,19 @@ export interface JogakAppProps {
     readonly metas?: readonly RegistryEntryMeta[];
     readonly codeTheme?: string;
     /**
-     * 알파.7: Preview 영역 격리 모드. default `'none'`.
+     * 알파.8: Preview 영역 격리 모드. default `'iframe'`.
      *
-     * - `'none'` — Preview 콘텐츠를 chrome 같은 document에 렌더 (알파.6까지의 동작).
-     * - `'shadow'` — ShadowRoot 안에 마운트. 사용자 globalCss/reset이 chrome 침범 차단.
-     * - `'iframe'` — 별도 document(iframe)에 마운트. 가장 강한 격리.
+     * - `'iframe'` (default) — 사용자 vite 정상 client(iframe)에 마운트. 사용자 utility 정상 컴파일.
+     * - `'shadow'` (deprecated) — ShadowRoot 안에 마운트. 사용자 utility 미적용.
+     * - `'none'` (deprecated) — chrome 같은 document에 렌더. 알파.6까지의 동작.
      *
      * 자세한 트레이드오프는 `@jogak/ui` README의 "previewIsolation 사용 가이드" 참조.
      */
     readonly previewIsolation?: 'none' | 'shadow' | 'iframe';
+    /**
+     * 알파.8: 사용자 vite spawn URL. iframe `src` base로 사용.
+     * 빈 문자열 시 fallback (jogak SPA Vite scope의 preview-frame.tsx).
+     */
+    readonly userViteUrl?: string;
 }
-export declare function JogakApp({ entries, metas, codeTheme, previewIsolation, }?: JogakAppProps): ReactElement;
+export declare function JogakApp({ entries, metas, codeTheme, previewIsolation, userViteUrl, }?: JogakAppProps): ReactElement;

package/dist/components/Preview/IframeMount.d.ts

@@ -3,35 +3,28 @@ import { RegistryEntry } from '@jogak/core';
 export interface IframeMountProps {
     readonly entry: RegistryEntry;
     readonly args: Readonly<Record<string, unknown>>;
+    /**
+     * 알파.8: 사용자 vite spawn URL (예: `http://localhost:5174`).
+     * 빈 문자열 시 fallback (jogak SPA Vite scope의 `/preview-frame.html`).
+     */
+    readonly userViteUrl: string;
     readonly className?: string;
     readonly 'data-testid'?: string;
 }
-interface SetPropsArgs {
-    readonly entry: RegistryEntry;
-    readonly args: Readonly<Record<string, unknown>>;
-}
-declare global {
-    interface Window {
-        __jogak_setProps__?: (args: SetPropsArgs) => void;
-        __jogak_unmount__?: () => void;
-    }
-}
 /**
- * 알파.7: previewIsolation='iframe' 모드의 mount 컴포넌트.
+ * 알파.8: previewIsolation='iframe' 모드의 mount 컴포넌트.
  *
- * - `<iframe src="/preview-frame.html">`을 마운트.
- * - iframe load 후 `iframe.contentWindow.__jogak_setProps__({ entry, args })`를
- *   호출해 entry/args를 주입한다 (postMessage 미사용 — 동일 origin이므로
- *   contentWindow 직접 접근 가능).
- * - entry/args 변경 시 setProps 재호출 (load 완료 이후).
+ * 통신:
+ * - 사용자 vite spawn URL이 주어지면(`userViteUrl !== ''`) iframe src를
+ *   `${userViteUrl}/__jogak_preview__/index.html` (cross-origin)로 설정.
+ * - 동일 origin fallback 시 `/preview-frame.html` (jogak SPA Vite scope).
  *
- * HMR:
- * - iframe document 자체도 Vite dev server module을 import하므로 사용자 컴포넌트
- *   파일 변경 시 fast refresh가 iframe 안에서 작동.
- * - previewIsolation 모드 자체 변경은 가상 모듈 invalidate → full reload.
+ * 양쪽 모두 postMessage로 통신:
+ * - 부모 → iframe: `{ type: 'jogak:setProps', entryId, args }` | `{ type: 'jogak:unmount' }`
+ * - iframe → 부모: `{ type: 'jogak:ready' }` | `{ type: 'jogak:rendered', entryId }`
  *
- * sandbox 미설정:
- * - 사용자 컴포넌트가 fetch/clipboard/storage 등 자유롭게 사용해야 하므로 sandbox X.
+ * `entry`는 객체가 아닌 **id만 전달** — iframe 안에서 `defaultRegistry.requestEntry(id)`로
+ * dynamic import. 사용자 vite scope의 entry 가상 모듈이 사용자 컴포넌트를 fetch하므로
+ * 사용자 plugins(@tailwindcss/vite, custom alias 등)이 정상 작동.
  */
-export declare function IframeMount({ entry, args, className, 'data-testid': dataTestId, }: IframeMountProps): ReactElement;
-export {};
+export declare function IframeMount({ entry, args, userViteUrl, className, 'data-testid': dataTestId, }: IframeMountProps): ReactElement;

package/dist/components/Preview/index.d.ts

@@ -13,13 +13,18 @@ export interface PreviewProps {
      */
     readonly onResolveJogak?: (entryId: string, jogakName: string) => void;
     /**
-     * 알파.7: Preview 영역 격리 모드. default `'none'`.
+     * 알파.8: Preview 영역 격리 모드. default `'iframe'`.
      *
-     * - `'none'` — 기존 동작 (chrome과 같은 document, 알파.6 chrome 보호 rule 적용).
-     * - `'shadow'` — ShadowRoot에 마운트. 사용자 globalCss reset이 chrome 침범 차단.
-     * - `'iframe'` — `/preview-frame.html` iframe에 마운트. 강한 격리.
+     * - `'iframe'` (default) — 사용자 vite scope에 마운트. 사용자 utility 정상 컴파일.
+     * - `'shadow'` (deprecated) — ShadowRoot에 마운트. 사용자 utility 미적용.
+     * - `'none'` (deprecated) — chrome과 같은 document에 렌더.
      */
     readonly previewIsolation?: 'none' | 'shadow' | 'iframe';
+    /**
+     * 알파.8: 사용자 vite spawn URL. iframe `src` base.
+     * 빈 문자열 시 fallback (jogak SPA Vite scope의 `/preview-frame.html`).
+     */
+    readonly userViteUrl?: string;
 }
 /**
  * Preview — `useEntry(entryId)`의 status에 따라 분기 (계약 §5.4).
@@ -31,5 +36,5 @@ export interface PreviewProps {
  *
  * Layout shift 방지를 위해 캔버스 영역 minHeight 유지.
  */
-export declare function Preview({ entryId, jogakName, overrideArgs, onArgChange, onReset, codeTheme, onResolveJogak, previewIsolation, }: PreviewProps): ReactElement;
+export declare function Preview({ entryId, jogakName, overrideArgs, onArgChange, onReset, codeTheme, onResolveJogak, previewIsolation, userViteUrl, }: PreviewProps): ReactElement;
 export type { UseEntryState };

package/dist/host/index.d.ts

@@ -49,15 +49,23 @@ export interface JogakHostOptionsBase {
      */
     readonly globalCss?: boolean | string | readonly string[];
     /**
-     * 알파.7.1: Preview 영역 격리 모드.
+     * 알파.8: Preview 영역 격리 모드.
      *
-     * `'shadow'` (default, 알파.7.1), `'iframe'`, `'none'` 중 하나.
-     * jogak() Vite plugin의 `previewIsolation` 옵션으로 그대로 전달된다 + UI 측
-     * Preview 컴포넌트가 해당 모드별 분기로 렌더한다.
+     * `'iframe'` (default, 알파.8), `'shadow'` (deprecated), `'none'` (deprecated) 중 하나.
+     * jogak() Vite plugin의 `previewIsolation` 옵션으로 그대로 전달된다.
      *
      * 자세한 모드 설명은 `JogakPluginOptions.previewIsolation` JSDoc 참조.
      */
     readonly previewIsolation?: 'none' | 'shadow' | 'iframe';
+    /**
+     * 알파.8: 사용자 vite 인스턴스의 dev server URL (예: `http://localhost:5174`).
+     * jogak SPA가 iframe `src` base로 사용한다 (`<iframe src="${userViteUrl}/__jogak_preview__/index.html">`).
+     *
+     * 미지정/빈 문자열 시 fallback (jogak SPA Vite scope의 preview-frame.tsx).
+     *
+     * jogak CLI가 spawnUserVite 결과를 자동 전달 — 사용자가 직접 설정하지 않는다.
+     */
+    readonly userViteUrl?: string;
 }
 export interface JogakDevOptions extends JogakHostOptionsBase {
     readonly mode: 'dev';

package/dist/host/index.js

@@ -1 +1 @@
-"use strict";var S=Object.create;var m=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&&m(t,n,{get:()=>e[n],enumerable:!(r=k(e,n))||r.enumerable});return t};var c=(t,e,o)=>(o=t!=null?S(B(t)):{},N(e||!t||!t.__esModule?m(o,"default",{value:t,enumerable:!0}):o,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("node:url"),s=require("node:path");var f=typeof document<"u"?document.currentScript:null;const F=x.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:f&&f.tagName.toUpperCase()==="SCRIPT"&&f.src||new URL("host/index.js",document.baseURI).href),i=s.resolve(s.dirname(F),"..",".."),E=s.resolve(i,"index.html"),Y=s.resolve(i,"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:v}=e,b=o.default,w=n.default,{jogak:_}=r,C=t.codeTheme??"vsDark",u={patterns:t.patterns,codeTheme:C,cwd:t.userRoot};t.tsConfigFilePath!==void 0&&(u.tsConfigFilePath=t.tsConfigFilePath),t.globalCss!==void 0&&(u.globalCss=t.globalCss),t.previewIsolation!==void 0&&(u.previewIsolation=t.previewIsolation);const R=t.extraPlugins??[],d={root:i,configFile:!1,plugins:[b(),w(),_(u),...R],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:[i,t.userRoot]}},L={...d,server:D},a=await h(L);await a.listen();const p=a.config.server.port??t.port??5173,l=t.host??"localhost",M=`http://${typeof l=="boolean"?l?"0.0.0.0":"localhost":l}:${p.toString()}/`;let g=!1;return{url:M,port:p,close:async()=>{g||(g=!0,await a.close())},printUrls:()=>{a.printUrls()}}}const I={...d,base:t.base??"./",build:{outDir:t.outDir,emptyOutDir:!0,sourcemap:t.sourcemap??!1,minify:t.minify??"esbuild",rollupOptions:{input:{main:s.resolve(i,"index.html"),preview:s.resolve(i,"preview-frame.html")}}}},P=Date.now(),T=await v(I),U=Date.now()-P,{assetCount:O,totalBytes:j}=z(T);return{outDir:t.outDir,elapsedMs:U,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 y(t){return typeof t=="object"&&t!==null&&Array.isArray(t.output)}function $(t){if(Array.isArray(t)){const e=[];for(const o of t)y(o)&&e.push(...o.output);return e}if(y(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;
+"use strict";var S=Object.create;var m=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var N=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of A(e))!H.call(t,r)&&r!==o&&m(t,r,{get:()=>e[r],enumerable:!(n=k(e,r))||n.enumerable});return t};var a=(t,e,o)=>(o=t!=null?S(B(t)):{},N(e||!t||!t.__esModule?m(o,"default",{value:t,enumerable:!0}):o,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("node:url"),s=require("node:path");var f=typeof document<"u"?document.currentScript:null;const F=x.fileURLToPath(typeof document>"u"?require("url").pathToFileURL(__filename).href:f&&f.tagName.toUpperCase()==="SCRIPT"&&f.src||new URL("host/index.js",document.baseURI).href),i=s.resolve(s.dirname(F),"..",".."),E=s.resolve(i,"index.html"),V=s.resolve(i,"src/app/main.tsx");async function Y(t){const e=await import("vite"),o=await import("@vitejs/plugin-react"),n=await import("@jogak/core/vite"),r=await import("@tailwindcss/vite"),{createServer:v,build:h}=e,b=o.default,w=r.default,{jogak:_}=n,C=t.codeTheme??"vsDark",u={patterns:t.patterns,codeTheme:C,cwd:t.userRoot};t.tsConfigFilePath!==void 0&&(u.tsConfigFilePath=t.tsConfigFilePath),t.globalCss!==void 0&&(u.globalCss=t.globalCss),t.previewIsolation!==void 0&&(u.previewIsolation=t.previewIsolation),t.userViteUrl!==void 0&&(u.userViteUrl=t.userViteUrl);const U=t.extraPlugins??[],d={root:i,configFile:!1,plugins:[b(),w(),_(u),...U],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:[i,t.userRoot]}},L={...d,server:D},l=await v(L);await l.listen();const p=l.config.server.port??t.port??5173,c=t.host??"localhost",M=`http://${typeof c=="boolean"?c?"0.0.0.0":"localhost":c}:${p.toString()}/`;let g=!1;return{url:M,port:p,close:async()=>{g||(g=!0,await l.close())},printUrls:()=>{l.printUrls()}}}const R={...d,base:t.base??"./",build:{outDir:t.outDir,emptyOutDir:!0,sourcemap:t.sourcemap??!1,minify:t.minify??"esbuild",rollupOptions:{input:{main:s.resolve(i,"index.html"),preview:s.resolve(i,"preview-frame.html")}}}},I=Date.now(),P=await h(R),T=Date.now()-I,{assetCount:O,totalBytes:j}=q(P);return{outDir:t.outDir,elapsedMs:T,assetCount:O,totalBytes:j}}function q(t){const e=z(t);if(e===void 0)return{assetCount:0,totalBytes:0};let o=0,n=0;for(const r of e)o+=1,n+=$(r);return{assetCount:o,totalBytes:n}}function y(t){return typeof t=="object"&&t!==null&&Array.isArray(t.output)}function z(t){if(Array.isArray(t)){const e=[];for(const o of t)y(o)&&e.push(...o.output);return e}if(y(t))return t.output}function $(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=V;exports.runHost=Y;

package/dist/host/index.mjs

@@ -1,37 +1,37 @@
-import { fileURLToPath as B } from "node:url";
-import { resolve as r, dirname as T } from "node:path";
-const U = B(import.meta.url), n = r(T(U), "..", ".."), N = r(n, "index.html"), S = r(n, "src/app/main.tsx");
-async function $(t) {
-  const e = await import("vite"), o = await import("@vitejs/plugin-react"), i = await import("@jogak/core/vite"), l = await import("@tailwindcss/vite"), { createServer: m, build: g } = e, y = o.default, h = l.default, { jogak: v } = i, w = t.codeTheme ?? "vsDark", s = {
+import { fileURLToPath as k } from "node:url";
+import { resolve as i, dirname as B } from "node:path";
+const T = k(import.meta.url), r = i(B(T), "..", ".."), z = i(r, "index.html"), N = i(r, "src/app/main.tsx");
+async function S(t) {
+  const e = await import("vite"), o = await import("@vitejs/plugin-react"), s = await import("@jogak/core/vite"), l = await import("@tailwindcss/vite"), { createServer: m, build: g } = e, y = o.default, h = l.default, { jogak: v } = s, w = t.codeTheme ?? "vsDark", n = {
     patterns: t.patterns,
     codeTheme: w,
     cwd: t.userRoot
   };
-  t.tsConfigFilePath !== void 0 && (s.tsConfigFilePath = t.tsConfigFilePath), t.globalCss !== void 0 && (s.globalCss = t.globalCss), t.previewIsolation !== void 0 && (s.previewIsolation = t.previewIsolation);
-  const b = t.extraPlugins ?? [], u = {
-    root: n,
+  t.tsConfigFilePath !== void 0 && (n.tsConfigFilePath = t.tsConfigFilePath), t.globalCss !== void 0 && (n.globalCss = t.globalCss), t.previewIsolation !== void 0 && (n.previewIsolation = t.previewIsolation), t.userViteUrl !== void 0 && (n.userViteUrl = t.userViteUrl);
+  const b = t.extraPlugins ?? [], c = {
+    root: r,
     configFile: !1,
     // ui/vite.config.ts 무시
-    plugins: [y(), h(), v(s), ...b],
+    plugins: [y(), h(), v(n), ...b],
     optimizeDeps: {
       include: ["react", "react-dom/client", "@jogak/core", "@jogak/react"]
     }
   };
   if (t.mode === "dev") {
-    const _ = {
+    const I = {
       port: t.port ?? 5173,
       host: t.host ?? "localhost",
       open: t.open ?? !1,
-      fs: { allow: [n, t.userRoot] }
-    }, j = {
-      ...u,
-      server: _
-    }, a = await m(j);
+      fs: { allow: [r, t.userRoot] }
+    }, _ = {
+      ...c,
+      server: I
+    }, a = await m(_);
     await a.listen();
-    const f = a.config.server.port ?? t.port ?? 5173, c = t.host ?? "localhost", k = `http://${typeof c == "boolean" ? c ? "0.0.0.0" : "localhost" : c}:${f.toString()}/`;
+    const f = a.config.server.port ?? t.port ?? 5173, u = t.host ?? "localhost", j = `http://${typeof u == "boolean" ? u ? "0.0.0.0" : "localhost" : u}:${f.toString()}/`;
     let d = !1;
     return {
-      url: k,
+      url: j,
       port: f,
       close: async () => {
         d || (d = !0, await a.close());
@@ -42,7 +42,7 @@ async function $(t) {
     };
   }
   const C = {
-    ...u,
+    ...c,
     base: t.base ?? "./",
     build: {
       outDir: t.outDir,
@@ -51,27 +51,27 @@ async function $(t) {
       minify: t.minify ?? "esbuild",
       rollupOptions: {
         input: {
-          main: r(n, "index.html"),
-          preview: r(n, "preview-frame.html")
+          main: i(r, "index.html"),
+          preview: i(r, "preview-frame.html")
         }
       }
     }
-  }, P = Date.now(), O = await g(C), D = Date.now() - P, { assetCount: R, totalBytes: I } = x(O);
+  }, P = Date.now(), O = await g(C), U = Date.now() - P, { assetCount: D, totalBytes: R } = x(O);
   return {
     outDir: t.outDir,
-    elapsedMs: D,
-    assetCount: R,
-    totalBytes: I
+    elapsedMs: U,
+    assetCount: D,
+    totalBytes: R
   };
 }
 function x(t) {
   const e = A(t);
   if (e === void 0)
     return { assetCount: 0, totalBytes: 0 };
-  let o = 0, i = 0;
+  let o = 0, s = 0;
   for (const l of e)
-    o += 1, i += L(l);
-  return { assetCount: o, totalBytes: i };
+    o += 1, s += L(l);
+  return { assetCount: o, totalBytes: s };
 }
 function p(t) {
   return typeof t == "object" && t !== null && Array.isArray(t.output);
@@ -99,7 +99,7 @@ function L(t) {
   return 0;
 }
 export {
-  N as UI_HTML_ENTRY,
-  S as UI_MAIN_ENTRY,
-  $ as runHost
+  z as UI_HTML_ENTRY,
+  N as UI_MAIN_ENTRY,
+  S as runHost
 };

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),k=require("react"),y=require("@jogak/core"),m=require("@jogak/react"),_=require("prism-react-renderer"),G=require("react-dom");function J(a){var e,t,r="";if(typeof a=="string"||typeof a=="number")r+=a;else if(typeof a=="object")if(Array.isArray(a)){var j=a.length;for(e=0;e<j;e++)a[e]&&(t=J(a[e]))&&(r&&(r+=" "),r+=t)}else for(t in a)a[t]&&(r&&(r+=" "),r+=t);return r}function h(){for(var a,e,t=0,r="",j=arguments.length;t<j;t++)(a=arguments[t])&&(e=J(a))&&(r&&(r+=" "),r+=e);return r}function q({selectedEntryId:a,selectedJogakName:e,onSelect:t}){const[r,j]=k.useState(""),{metaTree:n,searchMeta:g}=m.useRegistryMeta(),l=r.trim().length>0?g(r):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:r,onChange:s=>{j(s.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:l!==null?o.jsx(I,{metas:l,selectedEntryId:a,selectedJogakName:e,onSelect:t}):o.jsx(V,{node:n,selectedEntryId:a,selectedJogakName:e,onSelect:t})})]})}function I({metas:a,selectedEntryId:e,selectedJogakName:t,onSelect:r}){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(j=>o.jsx("li",{children:o.jsx(B,{meta:j,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:0})},j.id))})}function V({node:a,selectedEntryId:e,selectedJogakName:t,onSelect:r,depth:j=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":`${j*12}px`},children:Object.entries(a).map(([n,g])=>o.jsx("li",{children:"id"in g?o.jsx(B,{meta:g,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:0}):o.jsx(Q,{label:n,node:g,selectedEntryId:e,selectedJogakName:t,onSelect:r,depth:j+1})},n))})}function Q({label:a,node:e,selectedEntryId:t,selectedJogakName:r,onSelect:j,depth:n}){const[g,l]=k.useState(!0);return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{l(s=>!s)},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":g,children:[o.jsx("span",{children:g?"▾":"▸"}),a]}),g&&o.jsx(V,{node:e,selectedEntryId:t,selectedJogakName:r,onSelect:j,depth:n})]})}function B({meta:a,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:j}){const n=a.id===e,[g,l]=k.useState(n);k.useEffect(()=>{n&&l(!0)},[n]);const s=a.title.split("/").pop()??a.title,c=16+j*12;return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{if(n)l(i=>!i);else{l(!0);const i=a.jogakNames[0];i!==void 0&&r(a.id,i)}},className:h("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":`${c}px`},"aria-expanded":g,children:[o.jsx("span",{className:"jogak:text-[10px] jogak:shrink-0 jogak:leading-none",children:g?"▾":"▸"}),s]}),g&&o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:a.jogakNames.map(i=>{const x=n&&i===t;return o.jsx("li",{children:o.jsx("button",{type:"button",onClick:()=>{r(a.id,i)},className:h("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":`${c+18}px`},"aria-current":x?"true":void 0,children:i})},i)})})]})}function X(a,e){const t=e==null?void 0:e.control,r=(e==null?void 0:e.action)!==void 0&&e.action!==!1,j=(e==null?void 0:e.type)==="function"||typeof a=="function";return r||j?"action":t==="boolean"||typeof a=="boolean"?"boolean":t==="number"||t==="range"||typeof a=="number"?"number":t==="select"||t==="radio"||(e==null?void 0:e.options)!==void 0&&e.options.length>0?"select":t==="text"||t==="color"||typeof a=="string"?"text":"json"}const S="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]",C="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)]",R="jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";function Y({argKey:a,value:e,argType:t,onArgChange:r}){switch(X(e,t)){case"boolean":return o.jsx("input",{type:"checkbox",checked:e===!0,onChange:n=>{r(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=>{r(a,n.target.valueAsNumber)},className:S});case"select":{const n=(t==null?void 0:t.options)??[];return o.jsx("select",{value:String(e??""),onChange:g=>{r(a,g.target.value)},className:S,children:n.map(g=>o.jsx("option",{value:String(g),children:String(g)},String(g)))})}case"text":return o.jsx("input",{type:"text",value:typeof e=="string"?e:String(e??""),onChange:n=>{r(a,n.target.value)},className:S});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 W({args:a,argTypes:e,onArgChange:t}){const j=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"}),j.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:C,children:"Name"}),o.jsx("th",{className:C,children:"Control"}),o.jsx("th",{className:C,children:"Description"})]})}),o.jsx("tbody",{children:j.map(([n,g])=>{const l=e[n];return o.jsxs("tr",{children:[o.jsx("td",{className:h(R,"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:R,children:o.jsx(Y,{argKey:n,value:g,argType:l,onArgChange:t})}),o.jsx("td",{className:h(R,"jogak:text-[var(--jogak-color-fg-subtle)]"),children:(l==null?void 0:l.description)??""})]},n)})})]})]})}function Z(a){if(a.length===0)return"()";try{return a.map(e=>{var t;if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e=="function")return"[Function]";if(typeof e=="object"){const r=((t=e.constructor)==null?void 0:t.name)??"Object";return r!=="Object"&&r!=="Array"?`[${r}]`:JSON.stringify(e)}return JSON.stringify(e)}).join(", ")}catch{return"[unserializable]"}}function K(a){const e=new Date(a),t=e.getHours().toString().padStart(2,"0"),r=e.getMinutes().toString().padStart(2,"0"),j=e.getSeconds().toString().padStart(2,"0"),n=e.getMilliseconds().toString().padStart(3,"0");return`${t}:${r}:${j}.${n}`}function z(){const[a,e]=k.useState(()=>y.defaultActionChannel.getLogs());k.useEffect(()=>y.defaultActionChannel.subscribe(e),[]);const t=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:()=>{y.defaultActionChannel.clear()},disabled:t,className:h("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",t?"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:t?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(r=>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:K(r.timestamp)}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-violet)] jogak:font-semibold",children:r.name}),o.jsxs("span",{className:"jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1",children:["(",Z(r.args),")"]})]},r.id))})})]})}function T({children:a,className:e,style:t,"data-testid":r}){const j=k.useRef(null),[n,g]=k.useState(null);return k.useEffect(()=>{const l=j.current;if(l===null)return;const s=l.shadowRoot??l.attachShadow({mode:"open"});g(s)},[]),o.jsx("div",{ref:j,className:e,"data-testid":r,style:t,children:n!==null?G.createPortal(a,n):null})}function oo({entry:a,args:e,className:t,"data-testid":r}){const j=k.useRef(null),n=k.useRef(!1);return k.useEffect(()=>{const g=j.current;if(g===null)return;const l=()=>{var s,c;n.current=!0,(c=(s=g.contentWindow)==null?void 0:s.__jogak_setProps__)==null||c.call(s,{entry:a,args:e})};return g.addEventListener("load",l),()=>{g.removeEventListener("load",l),queueMicrotask(()=>{var s,c;(c=(s=g.contentWindow)==null?void 0:s.__jogak_unmount__)==null||c.call(s)})}},[]),k.useEffect(()=>{var g,l,s;n.current&&((s=(l=(g=j.current)==null?void 0:g.contentWindow)==null?void 0:l.__jogak_setProps__)==null||s.call(l,{entry:a,args:e}))},[a,e]),o.jsx("iframe",{ref:j,src:"/preview-frame.html",title:"Preview",className:t,"data-testid":r})}const D={mobile:375,tablet:768,desktop:"none"},ao={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},E={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 eo(a){return _.themes[a]??_.themes.vsDark}function F({entryId:a,jogakName:e,overrideArgs:t,onArgChange:r,onReset:j,codeTheme:n,onResolveJogak:g,previewIsolation:l="shadow"}){const s=m.useEntry(a),[c,i]=k.useState("desktop"),[x,v]=k.useState("white"),[w,f]=k.useState("controls"),b=eo(n);return s.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]}):s.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:s.error.message})]}):s.status==="loading"?o.jsx(to,{meta:s.meta,jogakName:e,viewport:c,bgMode:x,onViewportChange:i,onBgModeChange:v}):o.jsx(ro,{entry:s.entry,jogakName:e,overrideArgs:t,onArgChange:r,onReset:j,onResolveJogak:g,viewport:c,bgMode:x,bottomTab:w,onViewportChange:i,onBgModeChange:v,onBottomTabChange:f,prismTheme:b,previewIsolation:l})}function to({meta:a,jogakName:e,viewport:t,bgMode:r,onViewportChange:j,onBgModeChange:n}){const g=e??a.jogakNames[0]??"...",l=D[t];return o.jsxs("div",{"data-testid":"preview-loading",className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(H,{title:a.title,jogakName:g,viewport:t,bgMode:r,onViewportChange:j,onBgModeChange:n,showReset:!1,onReset:()=>{}}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${$}`,style:E[r],children:o.jsx("div",{className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":l==="none"?"100%":`${l}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 ro({entry:a,jogakName:e,overrideArgs:t,onArgChange:r,onReset:j,onResolveJogak:n,viewport:g,bgMode:l,bottomTab:s,onViewportChange:c,onBgModeChange:i,onBottomTabChange:x,prismTheme:v,previewIsolation:w}){var L;const f=e??((L=a.jogaks[0])==null?void 0:L.name)??null;if(k.useEffect(()=>{e===null&&f!==null&&n!==void 0&&n(a.id,f)},[e,f,a.id,n]),f===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===f);if(b===void 0)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Jogak not found: ",f]});const u={...b.args??{},...t},p={...a.meta.argTypes??{},...b.argTypes??{}},U=Object.keys(t).length>0,M=D[g];return o.jsxs("div",{className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(H,{title:a.title,jogakName:b.name,viewport:g,bgMode:l,onViewportChange:c,onBgModeChange:i,showReset:U,onReset:j}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${$}`,style:E[l],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":M==="none"?"100%":`${M}px`},children:o.jsx(no,{entry:a,args:u,source:a.source,theme:v,previewIsolation:w},`${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=s===N;return o.jsx("button",{type:"button",role:"tab","aria-selected":O,onClick:()=>{x(N)},className:h("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:s==="controls"?o.jsx(W,{args:u,argTypes:p,onArgChange:r}):o.jsx(z,{})})]})]})}function H({title:a,jogakName:e,viewport:t,bgMode:r,onViewportChange:j,onBgModeChange:n,showReset:g,onReset:l}){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(s=>o.jsx("button",{type:"button",onClick:()=>{j(s)},"aria-pressed":t===s,className:h("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",t===s?"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:ao[s]},s))}),o.jsx("div",{className:"jogak:flex jogak:gap-1 jogak:items-center",children:["white","dark","transparent"].map(s=>o.jsx("button",{type:"button",onClick:()=>{n(s)},"aria-pressed":r===s,"aria-label":`${s} background`,className:h("jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",$,r===s?"jogak:border-[var(--jogak-color-accent)]":"jogak:border-[var(--jogak-color-border-strong)]"),style:E[s]},s))}),g&&o.jsx("button",{type:"button",onClick:l,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 no({entry:a,args:e,source:t,theme:r,previewIsolation:j}){const[n,g]=k.useState(!1),l=o.jsxs("div",{className:"jogak:relative",children:[o.jsx(so,{entry:a,args:e,previewIsolation:j}),o.jsx("button",{type:"button",onClick:()=>{g(s=>!s)},"aria-pressed":n,"aria-label":n?"Hide source code":"Show source code",className:h("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:"</>"})]});return o.jsxs("div",{children:[l,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(lo,{source:t,theme:r})})]})}const A="jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";function so({entry:a,args:e,previewIsolation:t}){return t==="shadow"?o.jsx(T,{"data-testid":"preview-content",className:A,children:o.jsx(jo,{entry:a,args:e})}):t==="iframe"?o.jsx(oo,{entry:a,args:e,"data-testid":"preview-content",className:`${A} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`}):o.jsx(go,{entry:a,args:e})}function go({entry:a,args:e}){const t=k.useRef(null);return k.useEffect(()=>{const r=t.current;if(r!==null)return m.reactAdapter.render(a,e,r),()=>{queueMicrotask(()=>{m.reactAdapter.unmount(r)})}},[a]),k.useEffect(()=>{const r=t.current;r!==null&&m.reactAdapter.render(a,e,r)},[a,e]),o.jsx("div",{ref:t,"data-testid":"preview-content",className:A})}function jo({entry:a,args:e}){const t=k.useRef(null);return k.useEffect(()=>{const r=t.current;if(r!==null)return m.reactAdapter.render(a,e,r),()=>{queueMicrotask(()=>{m.reactAdapter.unmount(r)})}},[a]),k.useEffect(()=>{const r=t.current;r!==null&&m.reactAdapter.render(a,e,r)},[a,e]),o.jsx("div",{ref:t,"data-testid":"preview-content-shadow"})}function lo({source:a,theme:e}){const[t,r]=k.useState(!1),j=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":j},children:"Source not available"});const n=()=>{navigator.clipboard.writeText(a).then(()=>{r(!0),setTimeout(()=>{r(!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:t?"✓ Copied":"Copy"}),o.jsx(_.Highlight,{code:a.trim(),language:"tsx",theme:e,children:({style:g,tokens:l,getLineProps:s,getTokenProps:c})=>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:g,children:l.map((i,x)=>o.jsxs("div",{...s({line:i}),className:"jogak:flex jogak:pr-6",style:s({line:i}).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:i.map((v,w)=>o.jsx("span",{...c({token:v})},w))})]},x))})})]})}function P(){if(typeof window>"u")return null;const a=new URLSearchParams(window.location.search),e=a.get("entry");if(e===null)return null;const t=a.get("jogak");return{entryId:e,jogakName:t}}function ko(a,e){const t=new URLSearchParams;t.set("entry",a),t.set("jogak",e),window.history.pushState({},"",`?${t.toString()}`)}function co({entries:a,metas:e,codeTheme:t="vsDark",previewIsolation:r="shadow"}={}){const j=k.useMemo(()=>{if(a!==void 0){e!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const d=new y.ComponentRegistry;for(const u of a)d.register(u);return d}if(e!==void 0)for(const d of e)y.defaultRegistry.registerMeta(d);return y.defaultRegistry},[a,e]),n=k.useMemo(()=>P(),[]),[g,l]=k.useState((n==null?void 0:n.entryId)??null),[s,c]=k.useState((n==null?void 0:n.jogakName)??null),[i,x]=k.useState({});k.useEffect(()=>{const d=()=>{const u=P();u!==null?(l(u.entryId),c(u.jogakName),x({})):(l(null),c(null))};return window.addEventListener("popstate",d),()=>{window.removeEventListener("popstate",d)}},[]);const v=k.useCallback((d,u)=>{l(d),c(u),x({}),ko(d,u)},[]),w=k.useCallback((d,u)=>{if(l(p=>p===d?d:p),c(p=>p??u),typeof window<"u"){const p=new URLSearchParams(window.location.search);p.get("entry")===d&&p.get("jogak")===null&&(p.set("jogak",u),window.history.replaceState({},"",`?${p.toString()}`))}},[]),f=k.useCallback((d,u)=>{x(p=>({...p,[d]:u}))},[]),b=k.useCallback(()=>{x({})},[]);return o.jsx(m.JogakProvider,{registry:j,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(q,{selectedEntryId:g,selectedJogakName:s,onSelect:v}),o.jsx("main",{className:"jogak:overflow-hidden jogak:min-h-0",children:g!==null?o.jsx(F,{entryId:g,jogakName:s,overrideArgs:i,onArgChange:f,onReset:b,codeTheme:t,onResolveJogak:w,previewIsolation:r}):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 io(){const a=m.useRegistry(),e=k.useMemo(()=>a.getAll(),[a]),t=k.useMemo(()=>a.getTree(),[a]),r=k.useMemo(()=>j=>a.search(j),[a]);return{entries:e,tree:t,search:r}}exports.Actions=z;exports.Controls=W;exports.JogakApp=co;exports.Preview=F;exports.Sidebar=q;exports.useRegistry=io;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),j=require("react"),y=require("@jogak/core"),b=require("@jogak/react"),E=require("prism-react-renderer"),U=require("react-dom");function q(a){var e,t,r="";if(typeof a=="string"||typeof a=="number")r+=a;else if(typeof a=="object")if(Array.isArray(a)){var g=a.length;for(e=0;e<g;e++)a[e]&&(t=q(a[e]))&&(r&&(r+=" "),r+=t)}else for(t in a)a[t]&&(r&&(r+=" "),r+=t);return r}function v(){for(var a,e,t=0,r="",g=arguments.length;t<g;t++)(a=arguments[t])&&(e=q(a))&&(r&&(r+=" "),r+=e);return r}function B({selectedEntryId:a,selectedJogakName:e,onSelect:t}){const[r,g]=j.useState(""),{metaTree:n,searchMeta:s}=b.useRegistryMeta(),l=r.trim().length>0?s(r):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:r,onChange:k=>{g(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:l!==null?o.jsx(Q,{metas:l,selectedEntryId:a,selectedJogakName:e,onSelect:t}):o.jsx(V,{node:n,selectedEntryId:a,selectedJogakName:e,onSelect:t})})]})}function Q({metas:a,selectedEntryId:e,selectedJogakName:t,onSelect:r}){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(g=>o.jsx("li",{children:o.jsx(W,{meta:g,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:0})},g.id))})}function V({node:a,selectedEntryId:e,selectedJogakName:t,onSelect:r,depth:g=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":`${g*12}px`},children:Object.entries(a).map(([n,s])=>o.jsx("li",{children:"id"in s?o.jsx(W,{meta:s,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:0}):o.jsx(X,{label:n,node:s,selectedEntryId:e,selectedJogakName:t,onSelect:r,depth:g+1})},n))})}function X({label:a,node:e,selectedEntryId:t,selectedJogakName:r,onSelect:g,depth:n}){const[s,l]=j.useState(!0);return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{l(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":s,children:[o.jsx("span",{children:s?"▾":"▸"}),a]}),s&&o.jsx(V,{node:e,selectedEntryId:t,selectedJogakName:r,onSelect:g,depth:n})]})}function W({meta:a,selectedEntryId:e,selectedJogakName:t,onSelect:r,indent:g}){const n=a.id===e,[s,l]=j.useState(n);j.useEffect(()=>{n&&l(!0)},[n]);const k=a.title.split("/").pop()??a.title,i=16+g*12;return o.jsxs("div",{children:[o.jsxs("button",{type:"button",onClick:()=>{if(n)l(c=>!c);else{l(!0);const c=a.jogakNames[0];c!==void 0&&r(a.id,c)}},className:v("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":`${i}px`},"aria-expanded":s,children:[o.jsx("span",{className:"jogak:text-[10px] jogak:shrink-0 jogak:leading-none",children:s?"▾":"▸"}),k]}),s&&o.jsx("ul",{className:"jogak:list-none jogak:m-0 jogak:p-0",children:a.jogakNames.map(c=>{const x=n&&c===t;return o.jsx("li",{children:o.jsx("button",{type:"button",onClick:()=>{r(a.id,c)},className:v("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":`${i+18}px`},"aria-current":x?"true":void 0,children:c})},c)})})]})}function Y(a,e){const t=e==null?void 0:e.control,r=(e==null?void 0:e.action)!==void 0&&e.action!==!1,g=(e==null?void 0:e.type)==="function"||typeof a=="function";return r||g?"action":t==="boolean"||typeof a=="boolean"?"boolean":t==="number"||t==="range"||typeof a=="number"?"number":t==="select"||t==="radio"||(e==null?void 0:e.options)!==void 0&&e.options.length>0?"select":t==="text"||t==="color"||typeof a=="string"?"text":"json"}const C="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]",R="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)]",A="jogak:px-5 jogak:py-2 jogak:align-middle jogak:border-b jogak:border-[var(--jogak-color-border-muted)]";function Z({argKey:a,value:e,argType:t,onArgChange:r}){switch(Y(e,t)){case"boolean":return o.jsx("input",{type:"checkbox",checked:e===!0,onChange:n=>{r(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=>{r(a,n.target.valueAsNumber)},className:C});case"select":{const n=(t==null?void 0:t.options)??[];return o.jsx("select",{value:String(e??""),onChange:s=>{r(a,s.target.value)},className:C,children:n.map(s=>o.jsx("option",{value:String(s),children:String(s)},String(s)))})}case"text":return o.jsx("input",{type:"text",value:typeof e=="string"?e:String(e??""),onChange:n=>{r(a,n.target.value)},className:C});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 z({args:a,argTypes:e,onArgChange:t}){const g=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"}),g.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:R,children:"Name"}),o.jsx("th",{className:R,children:"Control"}),o.jsx("th",{className:R,children:"Description"})]})}),o.jsx("tbody",{children:g.map(([n,s])=>{const l=e[n];return o.jsxs("tr",{children:[o.jsx("td",{className:v(A,"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:A,children:o.jsx(Z,{argKey:n,value:s,argType:l,onArgChange:t})}),o.jsx("td",{className:v(A,"jogak:text-[var(--jogak-color-fg-subtle)]"),children:(l==null?void 0:l.description)??""})]},n)})})]})]})}function K(a){if(a.length===0)return"()";try{return a.map(e=>{var t;if(e===null)return"null";if(e===void 0)return"undefined";if(typeof e=="function")return"[Function]";if(typeof e=="object"){const r=((t=e.constructor)==null?void 0:t.name)??"Object";return r!=="Object"&&r!=="Array"?`[${r}]`:JSON.stringify(e)}return JSON.stringify(e)}).join(", ")}catch{return"[unserializable]"}}function T(a){const e=new Date(a),t=e.getHours().toString().padStart(2,"0"),r=e.getMinutes().toString().padStart(2,"0"),g=e.getSeconds().toString().padStart(2,"0"),n=e.getMilliseconds().toString().padStart(3,"0");return`${t}:${r}:${g}.${n}`}function D(){const[a,e]=j.useState(()=>y.defaultActionChannel.getLogs());j.useEffect(()=>y.defaultActionChannel.subscribe(e),[]);const t=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:()=>{y.defaultActionChannel.clear()},disabled:t,className:v("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",t?"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:t?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(r=>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:T(r.timestamp)}),o.jsx("span",{className:"jogak:text-[var(--jogak-color-violet)] jogak:font-semibold",children:r.name}),o.jsxs("span",{className:"jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1",children:["(",K(r.args),")"]})]},r.id))})})]})}function oo({children:a,className:e,style:t,"data-testid":r}){const g=j.useRef(null),[n,s]=j.useState(null);return j.useEffect(()=>{const l=g.current;if(l===null)return;const k=l.shadowRoot??l.attachShadow({mode:"open"});s(k)},[]),o.jsx("div",{ref:g,className:e,"data-testid":r,style:t,children:n!==null?U.createPortal(a,n):null})}function ao({entry:a,args:e,userViteUrl:t,className:r,"data-testid":g}){const n=j.useRef(null),[s,l]=j.useState(!1),k=t!==""?`${t}/__jogak_preview__/index.html`:"/preview-frame.html";return j.useEffect(()=>{const i=c=>{const x=n.current;if(x===null||c.source!==x.contentWindow)return;const p=c.data;p==null||typeof p!="object"||p.type==="jogak:ready"&&l(!0)};return window.addEventListener("message",i),()=>{window.removeEventListener("message",i)}},[]),j.useEffect(()=>{var c;if(!s)return;const i=n.current;i!==null&&((c=i.contentWindow)==null||c.postMessage({type:"jogak:setProps",entryId:a.id,args:e},"*"))},[s,a,e]),j.useEffect(()=>{const i=n.current;return()=>{i!==null&&queueMicrotask(()=>{var c;(c=i.contentWindow)==null||c.postMessage({type:"jogak:unmount"},"*")})}},[]),o.jsx("iframe",{ref:n,src:k,title:"Preview",className:r,"data-testid":g})}const F={mobile:375,tablet:768,desktop:"none"},eo={mobile:"Mobile",tablet:"Tablet",desktop:"Desktop"},M={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 to(a){return E.themes[a]??E.themes.vsDark}function H({entryId:a,jogakName:e,overrideArgs:t,onArgChange:r,onReset:g,codeTheme:n,onResolveJogak:s,previewIsolation:l="iframe",userViteUrl:k=""}){const i=b.useEntry(a),[c,x]=j.useState("desktop"),[p,w]=j.useState("white"),[S,m]=j.useState("controls"),h=to(n);return i.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]}):i.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:i.error.message})]}):i.status==="loading"?o.jsx(ro,{meta:i.meta,jogakName:e,viewport:c,bgMode:p,onViewportChange:x,onBgModeChange:w}):o.jsx(no,{entry:i.entry,jogakName:e,overrideArgs:t,onArgChange:r,onReset:g,onResolveJogak:s,viewport:c,bgMode:p,bottomTab:S,onViewportChange:x,onBgModeChange:w,onBottomTabChange:m,prismTheme:h,previewIsolation:l,userViteUrl:k})}function ro({meta:a,jogakName:e,viewport:t,bgMode:r,onViewportChange:g,onBgModeChange:n}){const s=e??a.jogakNames[0]??"...",l=F[t];return o.jsxs("div",{"data-testid":"preview-loading",className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(G,{title:a.title,jogakName:s,viewport:t,bgMode:r,onViewportChange:g,onBgModeChange:n,showReset:!1,onReset:()=>{}}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${$}`,style:M[r],children:o.jsx("div",{className:"jogak:mx-auto jogak:p-6 jogak:max-w-[var(--jogak-canvas-mw)]",style:{"--jogak-canvas-mw":l==="none"?"100%":`${l}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 no({entry:a,jogakName:e,overrideArgs:t,onArgChange:r,onReset:g,onResolveJogak:n,viewport:s,bgMode:l,bottomTab:k,onViewportChange:i,onBgModeChange:c,onBottomTabChange:x,prismTheme:p,previewIsolation:w,userViteUrl:S}){var L;const m=e??((L=a.jogaks[0])==null?void 0:L.name)??null;if(j.useEffect(()=>{e===null&&m!==null&&n!==void 0&&n(a.id,m)},[e,m,a.id,n]),m===null)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Entry has no jogaks: ",a.id]});const h=a.jogaks.find(N=>N.name===m);if(h===void 0)return o.jsxs("div",{className:"jogak:p-6 jogak:text-[var(--jogak-color-error)]",children:["Jogak not found: ",m]});const u={...h.args??{},...t},f={...a.meta.argTypes??{},...h.argTypes??{}},I=Object.keys(t).length>0,O=F[s];return o.jsxs("div",{className:"jogak:flex jogak:flex-col jogak:h-full",children:[o.jsx(G,{title:a.title,jogakName:h.name,viewport:s,bgMode:l,onViewportChange:i,onBgModeChange:c,showReset:I,onReset:g}),o.jsx("div",{className:`jogak:flex-1 jogak:overflow-auto jogak:min-h-[320px] ${$}`,style:M[l],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":O==="none"?"100%":`${O}px`},children:o.jsx(so,{entry:a,args:u,source:a.source,theme:p,previewIsolation:w,userViteUrl:S},`${a.id}/${h.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 P=k===N;return o.jsx("button",{type:"button",role:"tab","aria-selected":P,onClick:()=>{x(N)},className:v("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",P?"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(z,{args:u,argTypes:f,onArgChange:r}):o.jsx(D,{})})]})]})}function G({title:a,jogakName:e,viewport:t,bgMode:r,onViewportChange:g,onBgModeChange:n,showReset:s,onReset:l}){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:()=>{g(k)},"aria-pressed":t===k,className:v("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",t===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:eo[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":r===k,"aria-label":`${k} background`,className:v("jogak:w-5 jogak:h-5 jogak:rounded-[var(--jogak-radius-md)] jogak:border-2 jogak:cursor-pointer jogak:p-0 jogak:shrink-0",$,r===k?"jogak:border-[var(--jogak-color-accent)]":"jogak:border-[var(--jogak-color-border-strong)]"),style:M[k]},k))}),s&&o.jsx("button",{type:"button",onClick:l,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 so({entry:a,args:e,source:t,theme:r,previewIsolation:g,userViteUrl:n}){const[s,l]=j.useState(!1),k=o.jsxs("div",{className:"jogak:relative",children:[o.jsx(go,{entry:a,args:e,previewIsolation:g,userViteUrl:n}),o.jsx("button",{type:"button",onClick:()=>{l(i=>!i)},"aria-pressed":s,"aria-label":s?"Hide source code":"Show source code",className:v("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",s?"jogak:bg-[var(--jogak-color-accent)]":"jogak:bg-[#1e293b]"),children:"</>"})]});return o.jsxs("div",{children:[k,s&&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(ko,{source:t,theme:r})})]})}const _="jogak:border jogak:border-dashed jogak:border-[var(--jogak-color-border)] jogak:rounded-[var(--jogak-radius-xl)] jogak:p-4 jogak:pb-9";function go({entry:a,args:e,previewIsolation:t,userViteUrl:r}){return t==="shadow"?o.jsx(oo,{"data-testid":"preview-content",className:_,children:o.jsx(lo,{entry:a,args:e})}):t==="iframe"?o.jsx(ao,{entry:a,args:e,userViteUrl:r,"data-testid":"preview-content",className:`${_} jogak:block jogak:w-full jogak:bg-transparent jogak:min-h-[256px]`}):o.jsx(jo,{entry:a,args:e})}function jo({entry:a,args:e}){const t=j.useRef(null);return j.useEffect(()=>{const r=t.current;if(r!==null)return b.reactAdapter.render(a,e,r),()=>{queueMicrotask(()=>{b.reactAdapter.unmount(r)})}},[a]),j.useEffect(()=>{const r=t.current;r!==null&&b.reactAdapter.render(a,e,r)},[a,e]),o.jsx("div",{ref:t,"data-testid":"preview-content",className:_})}function lo({entry:a,args:e}){const t=j.useRef(null);return j.useEffect(()=>{const r=t.current;if(r!==null)return b.reactAdapter.render(a,e,r),()=>{queueMicrotask(()=>{b.reactAdapter.unmount(r)})}},[a]),j.useEffect(()=>{const r=t.current;r!==null&&b.reactAdapter.render(a,e,r)},[a,e]),o.jsx("div",{ref:t,"data-testid":"preview-content-shadow"})}function ko({source:a,theme:e}){const[t,r]=j.useState(!1),g=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":g},children:"Source not available"});const n=()=>{navigator.clipboard.writeText(a).then(()=>{r(!0),setTimeout(()=>{r(!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:t?"✓ Copied":"Copy"}),o.jsx(E.Highlight,{code:a.trim(),language:"tsx",theme:e,children:({style:s,tokens:l,getLineProps:k,getTokenProps:i})=>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:s,children:l.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((p,w)=>o.jsx("span",{...i({token:p})},w))})]},x))})})]})}function J(){if(typeof window>"u")return null;const a=new URLSearchParams(window.location.search),e=a.get("entry");if(e===null)return null;const t=a.get("jogak");return{entryId:e,jogakName:t}}function co(a,e){const t=new URLSearchParams;t.set("entry",a),t.set("jogak",e),window.history.pushState({},"",`?${t.toString()}`)}function io({entries:a,metas:e,codeTheme:t="vsDark",previewIsolation:r="iframe",userViteUrl:g=""}={}){const n=j.useMemo(()=>{if(a!==void 0){e!==void 0&&console.warn("[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.");const d=new y.ComponentRegistry;for(const u of a)d.register(u);return d}if(e!==void 0)for(const d of e)y.defaultRegistry.registerMeta(d);return y.defaultRegistry},[a,e]),s=j.useMemo(()=>J(),[]),[l,k]=j.useState((s==null?void 0:s.entryId)??null),[i,c]=j.useState((s==null?void 0:s.jogakName)??null),[x,p]=j.useState({});j.useEffect(()=>{const d=()=>{const u=J();u!==null?(k(u.entryId),c(u.jogakName),p({})):(k(null),c(null))};return window.addEventListener("popstate",d),()=>{window.removeEventListener("popstate",d)}},[]);const w=j.useCallback((d,u)=>{k(d),c(u),p({}),co(d,u)},[]),S=j.useCallback((d,u)=>{if(k(f=>f===d?d:f),c(f=>f??u),typeof window<"u"){const f=new URLSearchParams(window.location.search);f.get("entry")===d&&f.get("jogak")===null&&(f.set("jogak",u),window.history.replaceState({},"",`?${f.toString()}`))}},[]),m=j.useCallback((d,u)=>{p(f=>({...f,[d]:u}))},[]),h=j.useCallback(()=>{p({})},[]);return o.jsx(b.JogakProvider,{registry:n,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(B,{selectedEntryId:l,selectedJogakName:i,onSelect:w}),o.jsx("main",{className:"jogak:overflow-hidden jogak:min-h-0",children:l!==null?o.jsx(H,{entryId:l,jogakName:i,overrideArgs:x,onArgChange:m,onReset:h,codeTheme:t,onResolveJogak:S,previewIsolation:r,userViteUrl:g}):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 uo(){const a=b.useRegistry(),e=j.useMemo(()=>a.getAll(),[a]),t=j.useMemo(()=>a.getTree(),[a]),r=j.useMemo(()=>g=>a.search(g),[a]);return{entries:e,tree:t,search:r}}exports.Actions=D;exports.Controls=z;exports.JogakApp=io;exports.Preview=H;exports.Sidebar=B;exports.useRegistry=uo;