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

package/CHANGELOG.md

@@ -5,6 +5,59 @@ 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
+
+- **`previewIsolation` 격리 통로 정정** — 알파.7은 `main.tsx`가 isolation 모드와
+  무관하게 사용자 globalCss를 outer document에 무조건 inject해서 jogak chrome
+  utility를 사용자 reset/preflight가 무력화하던 결함이 있었음. 알파.7.1:
+  - `main.tsx`: `_jogakPreviewIsolation === 'none'`일 때만 사용자 globalCss를
+    dynamic import. 다른 모드에서는 outer document inject 차단 → chrome 침범 zero.
+  - `ShadowMount`: `adoptedStyleSheets` 흡수 + MutationObserver HMR sync 로직 제거.
+    ShadowMount는 양방향 격리만 책임 (사용자 globalCss는 shadow scope에 inject 안 됨).
+  - 사용자 컴포넌트 styling 통로(사용자 디자인 토큰/Tailwind utility 적용)는 알파.8
+    사이클에서 사용자 vite 통합으로 별도 도입 예정.
+- **`Preview` cleanup race condition** — `NoneAdapterContent` / `ShadowAdapterContent`
+  / `IframeMount`의 unmount race(`Attempted to synchronously unmount...`)를
+  `queueMicrotask`로 defer해 회피.
+
+### Changed (의도된 default 변경)
+
+- **`JogakHostOptionsBase.previewIsolation` default `'none'` → `'shadow'`** —
+  양방향 격리가 default. back-compat은 `previewIsolation: 'none'` 명시.
+- **`JogakApp` / `Preview` `previewIsolation` prop default `'none'` → `'shadow'`**.
+
+### README 업데이트
+
+- "previewIsolation 사용 가이드" 섹션 재작성 — 3 모드 비교표 + `'shadow'` default
+  동작/한계 + `'iframe'` 주의 + `'none'` back-compat 사용법.
+- "격리 보장" 섹션 — default 표시 갱신 (`'none'` → `'shadow'`).
+- 로드맵 표 — alpha.7.1 entry 추가.
+
 ## [0.1.0-alpha.7] — 2026-05-09
 
 ### Added

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: 'none',    // 'none' | 'shadow' | 'iframe' (default '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)
 })
@@ -84,8 +85,10 @@ See the [main README](https://github.com/devclib/jogak#readme) for the full host
 | alpha.4 | ✅ 완료 | jogak UI 빌드에 Tailwind v4 + `jogak:` prefix 도입 |
 | alpha.5 | ✅ 완료 | jogak UI 컴포넌트를 Tailwind class로 마이그레이션 (4 PR) |
 | alpha.6 | ✅ 완료 | `JogakPluginOptions.globalCss` 옵션 + chrome 보호 rule (단, 통로 부재로 사용자 환경에서 무효 — 알파.7에서 정정) |
-| **alpha.7** | ✅ **본 릴리즈** | **`jogak.config.ts` 통로 + `previewIsolation` 옵션 + `JogakHostOptionsBase` 확장** |
-| alpha.8+ | 예정 | `globalCss: { layer, scope }` 객체 union, multi-baseline VR |
+| alpha.7 | ✅ 완료 | `jogak.config.ts` 통로 + `previewIsolation` 옵션 + `JogakHostOptionsBase` 확장 (단, isolation 통로 결함으로 격리 무효 — 알파.7.1에서 정정) |
+| 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 적용
 
@@ -123,43 +126,63 @@ defineJogakConfig({ globalCss: './src/index.css' })
 defineJogakConfig({ globalCss: ['./src/tokens.css', './src/reset.css'] })
 ```
 
-#### 격리 보장 (default `previewIsolation: 'none'`)
+#### 격리 보장 (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)
+### previewIsolation 사용 가이드 (알파.8)
 
-Preview 콘텐츠를 chrome으로부터 격리하는 모드를 선택합니다. 대부분 default `'none'` + 알파.6 chrome 보호 rule로 충분하며, 사용자 reset이 chrome을 침범하는 강한 시나리오에서만 `'shadow'` / `'iframe'`을 사용합니다.
+jogak chrome ↔ 사용자 영역의 **양방향 격리** + 사용자 컴포넌트는 사용자 디자인 시스템 그대로 표시. 알파.8부터 default가 `'iframe'`로 변경되어 사용자 vite 인스턴스가 자동 spawn되고, iframe document가 사용자 vite의 정상 client로 작동합니다.
 
 #### 모드 비교
 
-| 모드 | mount | jogak.css | 사용자 globalCss | Radix portal | HMR | cold start |
-|------|-------|-----------|------------------|--------------|-----|-----------|
-| `'none'` | 같은 document | 외부 document | 외부 document | document.body (정상) | Vite 표준 | ★★★ |
-| `'shadow'` | ShadowRoot | adoptedStyleSheets | adoptedStyleSheets | 외부 document.body (utility 적용 OK, 단 z-index/focus 분리) | Vite 표준 + MutationObserver sync | ★★★ |
-| `'iframe'` | iframe document | (제외 — chrome 전용) | iframe document에 import | iframe document (정상) | iframe도 Vite dev module | ★★ (iframe load 추가) |
+| 모드 | 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'` 모드 한계
+#### `'iframe'` 모드 (default, 알파.8)
 
-1. **Radix UI portal**: Radix(shadcn)의 Dialog/Popover/Tooltip은 기본 `document.body`로 portal합니다. utility class는 외부 document에 정의되어 적용에는 문제 없지만, focus 관리 / scroll lock / aria 검증에 알려진 이슈가 있습니다 (Radix issues #3674, #3483, #3814). 명시적으로 portal target을 ShadowRoot 안 element로 지정하면 회피 가능:
+jogak CLI가 사용자 cwd의 `vite.config.{ts,mts,js,mjs,cjs}`를 자동 탐지해 별도 vite dev server를 spawn합니다. iframe `src`가 그 사용자 vite를 가리키므로 사용자 plugins(@tailwindcss/vite, custom alias 등)이 정상 작동 → **사용자 컴포넌트가 사용자 디자인 그대로 표시**.
 
-   ```tsx
-   <Dialog.Portal container={shadowRootEl}>
-     <Dialog.Content>...</Dialog.Content>
-   </Dialog.Portal>
-   ```
+```ts
+// jogak.config.ts (사용자 프로젝트 root)
+import { defineJogakConfig } from '@jogak/core'
 
-2. **외부 stylesheet sync 비용**: `adoptedStyleSheets`로 외부 document의 모든 stylesheet를 ShadowRoot에 share합니다. Vite dev에서 `<style>` HMR이 발생하면 MutationObserver가 ShadowRoot도 갱신 — 약간의 latency가 생길 수 있습니다.
+export default defineJogakConfig({
+  globalCss: true,
+  // previewIsolation: 'iframe',  // default
+  // userVite: { port: 5174 },    // 명시 시
+})
+```
 
-3. **CSS variable**: 외부 `:root`의 변수는 ShadowRoot 내부에서도 inherit. 즉 사용자 `:root { --primary: ... }` 토큰은 ShadowRoot 안에서도 작동합니다.
+**자동 동작:**
+- 사용자 `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'` 모드 동등 동작).
 
-> ⚠️ jogak의 핵심 차별점은 "single Vite, no iframe" — Storybook 대비 빠른 cold start와 단순 디버깅이 강점입니다. `previewIsolation: 'iframe'`을 활성화하면 이 강점이 일부 상실됩니다 (iframe load + 별도 module graph). 사용자 reset CSS를 chrome에서 완전히 격리해야만 하는 시나리오에서만 사용하세요.
+**주의:**
+- jogak ↔ 사용자 vite 두 인스턴스 (vs 알파.7.1까지의 single vite). dev cold start +100ms, RSS +50~80MB.
+- iframe sandbox 미적용 (사용자 컴포넌트의 fetch/clipboard/storage 자유 사용).
 
-iframe은 `<iframe src="/preview-frame.html">`로 로드되며, 부모-자식 동일 origin이라 부모가 `iframe.contentWindow.__jogak_setProps__({ entry, args })`를 직접 호출하는 방식으로 props를 전달합니다 (postMessage 미사용).
+#### `'shadow'` 모드 (deprecated)
+
+ShadowRoot 격리는 정상 작동하나 사용자 utility가 shadow scope에 inject되지 않아 사용자 컴포넌트가 raw 형태로 표시됩니다. 알파.9에서 사용자 vite의 `transformRequest` API로 shadow inject 부활 검토.
+
+#### `'none'` 모드 (deprecated)
+
+사용자 globalCss를 outer document에 inject. 사용자 reset이 jogak chrome 침범. back-compat 시나리오만 사용:
+
+```ts
+defineJogakConfig({ globalCss: true, previewIsolation: 'none' })
+```
 
 ### scope 가이드 — 알려진 영향 영역 (`'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/ShadowMount.d.ts

@@ -3,24 +3,23 @@ export interface ShadowMountProps {
     readonly children: ReactNode;
     readonly className?: string;
     readonly style?: CSSProperties;
-    /** 외부 테스트 hook (호스트 div에 부여). */
     readonly 'data-testid'?: string;
 }
 /**
- * 알파.7: previewIsolation='shadow' 모드의 mount 컴포넌트.
+ * 알파.7.1: previewIsolation='shadow' 모드의 mount 컴포넌트.
  *
- * 역할:
- * - 호스트 `<div>`에 `attachShadow({ mode: 'open' })`로 ShadowRoot를 부착.
- * - `createPortal`로 children을 ShadowRoot에 렌더 (React tree 유지).
- * - 외부 document의 모든 `<style>` / cross-origin 가능 stylesheet를
- *   `adoptedStyleSheets`로 ShadowRoot에 share (jogak.css + virtual:jogak/global-css
- *   둘 다 자동 포함).
- * - Vite dev에서 `<style>` HMR 시 MutationObserver로 ShadowRoot도 갱신.
+ * 책임: 양방향 격리만 제공 (Preview ↔ outer document 양방향 cascade 차단).
+ * - 사용자 globalCss는 main.tsx 가드로 outer document에 inject되지 않음.
+ * - shadow root 안에는 jogak chrome css도 사용자 css도 없음 (둘 다 외부에서 격리).
+ * - 사용자 컴포넌트의 utility class 컴파일은 결함 B (알파.8 사이클).
  *
- * Radix portal 한계 (사용자 인지 필요):
- * - 사용자 컴포넌트가 `Dialog.Portal` / `Popover.Portal` 등을 default로 쓰면
- *   portal target은 `document.body` — ShadowRoot 외부. utility class는 외부
- *   document에 정의되어 적용됨, 단 z-index/focus/event boundary가 분리될 수 있음.
- * - 회피: 사용자가 명시적으로 `<Portal container={shadowRootEl}>`을 전달.
+ * 알파.7 결함 정정:
+ * - `syncStyleSheets`/`MutationObserver`/`adoptedStyleSheets` 흡수 로직 제거.
+ *   알파.7은 outer document에 사용자 css가 있는 한 chrome을 침범했고, shadow
+ *   안의 흡수 로직은 의미가 없었음. 알파.7.1: outer에 사용자 css 자체가 없음.
+ *
+ * Radix portal 한계 (사용자 인지 필요, README 명시):
+ * - default Portal target = document.body (shadow 외부). 사용자가 명시적으로
+ *   `<Portal container={shadowRootEl}>`을 전달해야 portal 내용도 격리됨.
  */
 export declare function ShadowMount({ children, className, style, 'data-testid': dataTestId, }: ShadowMountProps): 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: Preview 영역 격리 모드.
+     * 알파.8: Preview 영역 격리 모드.
      *
-     * `'none'` (default), `'shadow'`, `'iframe'` 중 하나.
-     * 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
 };