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

package/CHANGELOG.md

@@ -5,6 +5,60 @@ 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.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
+
+- **`JogakHostOptionsBase`에 `globalCss` / `previewIsolation` 필드** — `runHost({ globalCss: true,
+  previewIsolation: 'shadow' })` 형태로 programmatic API에서도 옵션 사용 가능.
+- **`Preview` Shadow / iframe 마운트 분기**
+  - `previewIsolation: 'none'` (default, 알파.6과 동일) — 같은 document에 마운트
+  - `'shadow'` — `attachShadow` + `createPortal` + `adoptedStyleSheets`로 외부 css/font 흡수,
+    `MutationObserver`로 외부 `<style>` HMR 동기화
+  - `'iframe'` — `/preview-frame.html` + `contentWindow.__jogak_setProps__` 직접 호출,
+    완벽 격리 (props 직렬화 불필요)
+- **`preview-frame.html` + `src/app/preview-frame.tsx`** — iframe-mode 전용 최소 entry.
+  `virtual:jogak/global-css`만 import (jogak chrome css는 미포함, 격리 보장).
+- **README "previewIsolation 모드 비교" + "알파.6 → 알파.7 마이그레이션" 섹션** — 3 모드의
+  trade-off / Radix portal 한계 / `jogak.config.ts` 패턴으로의 마이그레이션 안내.
+
+### Fixed
+
+- **알파.6 README의 `vite.config.ts` 가이드 정정** — 알파.6는 `vite.config.ts`에서
+  `jogak({ globalCss: true })`를 호출하라고 안내했으나 `runHost`가 `configFile: false`로
+  사용자 vite config를 무시해 옵션이 적용되지 않았음. 알파.7부터는 `jogak.config.ts`에
+  `defineJogakConfig({ globalCss: true })`로 작성.
+
 ## [0.1.0-alpha.6] — 2026-05-09
 
 ### Added

package/README.md

@@ -12,27 +12,31 @@ pnpm add @jogak/ui @jogak/core @jogak/react react react-dom
 
 ## Usage
 
-### Embed into a Vite SPA
+### `jogak.config.ts` 사용 (권장)
 
-```ts
-// vite.config.ts
-import { jogak } from '@jogak/core/vite'
+알파.7부터 `jogak` CLI는 사용자 프로젝트 root의 `jogak.config.{ts,mts,mjs,js,json}`을
+자동 발견해 옵션을 읽습니다. shadcn/ui 사용자가 자주 만지는 옵션은 한 곳에 선언하세요:
 
-export default defineConfig({
-  plugins: [react(), jogak({ codeTheme: 'vsDark' })],
+```ts
+// jogak.config.ts (사용자 프로젝트 root)
+import { defineJogakConfig } from '@jogak/core'
+
+export default defineJogakConfig({
+  globalCss: true,             // 사용자 globalCss 자동 감지 + import
+  // previewIsolation: 'shadow', // 'shadow' (default, 알파.7.1) | 'iframe' | 'none'
+  codeTheme: 'vsDark',
+  port: 5173,                  // dev server (CLI --port로 override)
 })
 ```
 
-```tsx
-// main.tsx
-import 'virtual:jogak'
-import { _jogakCodeTheme } from 'virtual:jogak'
-import { JogakApp } from '@jogak/ui'
-import { createRoot } from 'react-dom/client'
+CLI는 본 config의 옵션을 읽어 jogak SPA 빌드/dev에 전달합니다. CLI 플래그가
+명시되면 config 값을 override합니다 (Vite 패턴).
 
-createRoot(document.getElementById('root')!).render(
-  <JogakApp codeTheme={_jogakCodeTheme} />,
-)
+### `jogak.config.ts` 미사용 (CLI flag만)
+
+```bash
+jogak dev --global-css --preview-isolation=none
+jogak build --global-css --preview-isolation=shadow
 ```
 
 ### Static catalog (Next.js / any host bundler)
@@ -48,6 +52,17 @@ export default function Page() {
 
 `@jogak/ui` ships pre-built ESM/CJS — no `transpilePackages` required for Next.js.
 
+### legacy: `vite.config.ts`에 `jogak()` plugin 직접 사용
+
+> 알파.6까지의 README는 사용자 `vite.config.ts`에 `jogak({ globalCss: true })`를
+> 작성하라 안내했지만, 이는 사용자 일반 vite 빌드용에만 적용되고 jogak SPA에는
+> 무효였습니다 (`runHost`가 `configFile: false`로 사용자 vite config 무시).
+> 알파.7부터는 위 `jogak.config.ts` 패턴을 사용하세요.
+
+`@jogak/core/vite`의 `jogak()` plugin은 사용자가 vite로 직접 jogak 카탈로그를
+embed하는 고급 시나리오(예: Next.js page 안에서 `<JogakApp entries={...} />`로
+정적 entries를 전달할 때 빌드 타임 generate)에서만 사용합니다.
+
 ### Sub-paths
 
 ```ts
@@ -66,25 +81,25 @@ See the [main README](https://github.com/devclib/jogak#readme) for the full host
 
 | 단계 | 상태 | 내용 |
 |------|------|------|
-| alpha.4 | ✅ 완료 | jogak UI 빌드 파이프라인에 Tailwind v4 + `jogak:` prefix 도입 (인프라) |
+| alpha.4 | ✅ 완료 | jogak UI 빌드에 Tailwind v4 + `jogak:` prefix 도입 |
 | alpha.5 | ✅ 완료 | jogak UI 컴포넌트를 Tailwind class로 마이그레이션 (4 PR) |
-| **alpha.6** | ✅ **본 릴리즈** | **사용자 `globalCss` 옵션 (`JogakPluginOptions.globalCss`)** |
-| alpha.7+ | 예정 | preview Shadow DOM / iframe 격리 옵션 (`previewIsolation`) |
+| 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 |
 
-### 사용자 globalCss 적용 (alpha.6)
+### 사용자 globalCss 적용
 
 `runHost`는 vite root를 `@jogak/ui` 패키지로 두고 사용자 `vite.config.ts` / `main.tsx`를 무시하므로(`configFile: false`), 사용자 `index.css`(Tailwind/shadcn 디자인 토큰)가 jogak SPA에 자동 적용되지 않습니다. `globalCss` 옵션은 이를 opt-in으로 해결합니다.
 
 #### 사용법
 
 ```ts
-// vite.config.ts — 자동 감지 (shadcn/ui Vite 시나리오)
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { jogak } from '@jogak/core/vite'
+// jogak.config.ts (사용자 프로젝트 root)
+import { defineJogakConfig } from '@jogak/core'
 
-export default defineConfig({
-  plugins: [react(), jogak({ globalCss: true })],
+export default defineJogakConfig({
+  globalCss: true,
 })
 ```
 
@@ -103,19 +118,55 @@ export default defineConfig({
 
 ```ts
 // 명시 경로 1개
-jogak({ globalCss: './src/index.css' })
+defineJogakConfig({ globalCss: './src/index.css' })
 
 // 다중 import (디자인 토큰 + reset 분리)
-jogak({ globalCss: ['./src/tokens.css', './src/reset.css'] })
+defineJogakConfig({ globalCss: ['./src/tokens.css', './src/reset.css'] })
 ```
 
-#### 격리 보장
+#### 격리 보장 (default `previewIsolation: 'shadow'`, 알파.7.1)
 
 - **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됩니다.
 
-#### scope 가이드 — 알려진 영향 영역
+### previewIsolation 사용 가이드 (알파.7.1)
+
+jogak chrome ↔ 사용자 영역의 **양방향 격리** 모드. 알파.7.1부터 default가 `'shadow'`로 변경되어 사용자 reset/preflight가 jogak chrome을 침범하는 결함이 자동 차단됩니다.
+
+#### 모드 비교
+
+| 모드 | 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 | ★★★ |
+
+#### `'shadow'` 모드 (default) 동작과 한계
+
+알파.7.1에서 ShadowMount는 **사용자 css를 shadow root에 inject하지 않습니다**. outer document에도 inject 안 됨 (main.tsx 가드). 결과적으로:
+
+- **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}>` 명시 전달
+
+#### `'iframe'` 모드
+
+iframe document scope에 사용자 globalCss가 import되어 사용자 컴포넌트가 토큰 적용을 받습니다. outer chrome은 사용자 css 영향 zero.
+
+> ⚠️ jogak 차별점("single Vite, no iframe")과 일부 상충 — iframe load + 별도 module graph 비용. Radix portal까지 완벽 격리해야 하는 시나리오 한정.
+
+iframe은 `<iframe src="/preview-frame.html">`로 로드되며, 부모-자식 동일 origin이라 부모가 `iframe.contentWindow.__jogak_setProps__({ entry, args })`를 직접 호출하는 방식으로 props를 전달합니다.
+
+#### `'none'` 모드 (back-compat opt-in)
+
+사용자 globalCss를 outer document에 inject. 사용자 reset이 jogak chrome에 영향을 주는 것을 의도적으로 허용하는 경우만 사용:
+
+```ts
+defineJogakConfig({ globalCss: true, previewIsolation: 'none' })
+```
+
+### scope 가이드 — 알려진 영향 영역 (`'none'` 모드 기준)
 
 사용자 css의 다음 패턴은 jogak chrome에도 영향을 줄 수 있습니다 (전역 import이므로):
 
@@ -123,7 +174,7 @@ jogak({ globalCss: ['./src/tokens.css', './src/reset.css'] })
 - `* { ... }` 또는 `*, *::before { ... }` — 모든 요소
 - 글로벌 reset (`button { all: unset }`, `* { border: 1px solid var(--border) }` 등)
 
-이를 사용자 콘텐츠 영역(preview)으로만 한정하려면 셀렉터를 `[data-jogak-content] *` scope로 작성하세요:
+이를 사용자 콘텐츠 영역(preview)으로만 한정하려면 셀렉터를 `[data-jogak-content] *` scope로 작성하거나, `previewIsolation: 'shadow' | 'iframe'`을 사용하세요.
 
 ```css
 /* 권장: preview 영역으로만 한정 */
@@ -139,18 +190,44 @@ jogak({ globalCss: ['./src/tokens.css', './src/reset.css'] })
 }
 ```
 
-또는 jogak chrome과 preview 모두에 일관된 사용자 디자인 시스템을 적용하려는 의도라면 그대로 두면 됩니다 — jogak chrome도 사용자 토큰/타이포를 함께 체험하게 됩니다.
-
-##### selector hint
+#### selector hint
 
 - `[data-jogak-shell]` — `JogakApp` 최상위 wrapper (chrome + preview 모두 포함)
 - `[data-jogak-content]` — Preview의 사용자 콘텐츠 영역 (사용자 컴포넌트가 렌더되는 div)
 
-#### 알려진 한계
+### 알파.6 → 알파.7 마이그레이션
+
+알파.6 README는 다음 가이드를 안내했습니다:
+
+```ts
+// alpha.6 README (무효)
+// vite.config.ts
+import { jogak } from '@jogak/core/vite'
+export default defineConfig({
+  plugins: [react(), jogak({ globalCss: true })],
+})
+```
+
+이 설정은 사용자 일반 vite 빌드용에만 적용되고 jogak SPA에는 전달되지 않았습니다.
+알파.7부터 `jogak.config.ts`로 옮기세요:
+
+```ts
+// alpha.7+ — jogak.config.ts (사용자 프로젝트 root)
+import { defineJogakConfig } from '@jogak/core'
+
+export default defineJogakConfig({
+  globalCss: true,
+})
+```
+
+`vite.config.ts`에 `jogak()` plugin이 그대로 있어도 jogak SPA에는 영향 없으므로
+당장 제거할 필요는 없습니다 (alpha.6 동작 유지). 하지만 jogak.config.ts로 옮긴 후
+중복 제거를 권장합니다.
+
+### 알려진 한계
 
-- 본 옵션은 **opt-in**입니다 (default `false`). 알파.5까지의 동작은 동일합니다.
+- `globalCss` 옵션은 **opt-in**입니다 (default `false`). 알파.5까지의 동작은 동일합니다.
 - `globalCss: true` 자동 감지는 dev 시작 시점에 한 번만 수행됩니다. 후보 css 파일이 dev 시작 후에 새로 추가되면 dev 서버를 재시작해야 합니다. 명시 경로(`globalCss: './src/index.css'`)는 파일이 나중에 생성되어도 정상 hot reload됩니다.
-- preview 영역만 사용자 css로 한정하려면 알파.7+의 `previewIsolation: 'shadow'` 옵션을 기다려 주세요.
 - CSS module(`.module.css`)을 자동 감지 후보에서 직접 import하지 않습니다 — 명시 경로로 넘기면 Vite가 module 처리합니다.
 
 - Repository: https://github.com/devclib/jogak

package/dist/app/App.d.ts

@@ -14,5 +14,15 @@ export interface JogakAppProps {
     readonly entries?: readonly RegistryEntry[];
     readonly metas?: readonly RegistryEntryMeta[];
     readonly codeTheme?: string;
+    /**
+     * 알파.7: Preview 영역 격리 모드. default `'none'`.
+     *
+     * - `'none'` — Preview 콘텐츠를 chrome 같은 document에 렌더 (알파.6까지의 동작).
+     * - `'shadow'` — ShadowRoot 안에 마운트. 사용자 globalCss/reset이 chrome 침범 차단.
+     * - `'iframe'` — 별도 document(iframe)에 마운트. 가장 강한 격리.
+     *
+     * 자세한 트레이드오프는 `@jogak/ui` README의 "previewIsolation 사용 가이드" 참조.
+     */
+    readonly previewIsolation?: 'none' | 'shadow' | 'iframe';
 }
-export declare function JogakApp({ entries, metas, codeTheme, }?: JogakAppProps): ReactElement;
+export declare function JogakApp({ entries, metas, codeTheme, previewIsolation, }?: JogakAppProps): ReactElement;

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

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+import { RegistryEntry } from '@jogak/core';
+export interface IframeMountProps {
+    readonly entry: RegistryEntry;
+    readonly args: Readonly<Record<string, unknown>>;
+    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 컴포넌트.
+ *
+ * - `<iframe src="/preview-frame.html">`을 마운트.
+ * - iframe load 후 `iframe.contentWindow.__jogak_setProps__({ entry, args })`를
+ *   호출해 entry/args를 주입한다 (postMessage 미사용 — 동일 origin이므로
+ *   contentWindow 직접 접근 가능).
+ * - entry/args 변경 시 setProps 재호출 (load 완료 이후).
+ *
+ * HMR:
+ * - iframe document 자체도 Vite dev server module을 import하므로 사용자 컴포넌트
+ *   파일 변경 시 fast refresh가 iframe 안에서 작동.
+ * - previewIsolation 모드 자체 변경은 가상 모듈 invalidate → full reload.
+ *
+ * sandbox 미설정:
+ * - 사용자 컴포넌트가 fetch/clipboard/storage 등 자유롭게 사용해야 하므로 sandbox X.
+ */
+export declare function IframeMount({ entry, args, className, 'data-testid': dataTestId, }: IframeMountProps): ReactElement;
+export {};

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

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode, CSSProperties } from 'react';
+export interface ShadowMountProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    readonly 'data-testid'?: string;
+}
+/**
+ * 알파.7.1: previewIsolation='shadow' 모드의 mount 컴포넌트.
+ *
+ * 책임: 양방향 격리만 제공 (Preview ↔ outer document 양방향 cascade 차단).
+ * - 사용자 globalCss는 main.tsx 가드로 outer document에 inject되지 않음.
+ * - shadow root 안에는 jogak chrome css도 사용자 css도 없음 (둘 다 외부에서 격리).
+ * - 사용자 컴포넌트의 utility class 컴파일은 결함 B (알파.8 사이클).
+ *
+ * 알파.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

@@ -12,6 +12,14 @@ export interface PreviewProps {
      * 첫 jogak로 자동 보정하기 위한 콜백. 부모가 selectedJogakName / URL을 갱신.
      */
     readonly onResolveJogak?: (entryId: string, jogakName: string) => void;
+    /**
+     * 알파.7: Preview 영역 격리 모드. default `'none'`.
+     *
+     * - `'none'` — 기존 동작 (chrome과 같은 document, 알파.6 chrome 보호 rule 적용).
+     * - `'shadow'` — ShadowRoot에 마운트. 사용자 globalCss reset이 chrome 침범 차단.
+     * - `'iframe'` — `/preview-frame.html` iframe에 마운트. 강한 격리.
+     */
+    readonly previewIsolation?: 'none' | 'shadow' | 'iframe';
 }
 /**
  * Preview — `useEntry(entryId)`의 status에 따라 분기 (계약 §5.4).
@@ -23,5 +31,5 @@ export interface PreviewProps {
  *
  * Layout shift 방지를 위해 캔버스 영역 minHeight 유지.
  */
-export declare function Preview({ entryId, jogakName, overrideArgs, onArgChange, onReset, codeTheme, onResolveJogak, }: PreviewProps): ReactElement;
+export declare function Preview({ entryId, jogakName, overrideArgs, onArgChange, onReset, codeTheme, onResolveJogak, previewIsolation, }: PreviewProps): ReactElement;
 export type { UseEntryState };

package/dist/host/index.d.ts

@@ -38,6 +38,26 @@ export interface JogakHostOptionsBase {
     readonly extraPlugins?: readonly unknown[];
     /** stdout/stderr 출력 stream (테스트 시 주입). */
     readonly logger?: HostLogger;
+    /**
+     * 알파.7: 사용자 globalCss를 jogak SPA에 import한다 (algfa.6 옵션의 host 통로).
+     *
+     * `false`/`undefined` (default): 미주입.
+     * `true`: `<userRoot>/src/{...}.css` 자동 감지 후 첫 발견 1개 import.
+     * `string` / `readonly string[]`: 명시 경로.
+     *
+     * 본 옵션은 jogak() Vite plugin의 `globalCss` 옵션으로 그대로 전달된다.
+     */
+    readonly globalCss?: boolean | string | readonly string[];
+    /**
+     * 알파.7.1: Preview 영역 격리 모드.
+     *
+     * `'shadow'` (default, 알파.7.1), `'iframe'`, `'none'` 중 하나.
+     * jogak() Vite plugin의 `previewIsolation` 옵션으로 그대로 전달된다 + UI 측
+     * Preview 컴포넌트가 해당 모드별 분기로 렌더한다.
+     *
+     * 자세한 모드 설명은 `JogakPluginOptions.previewIsolation` JSDoc 참조.
+     */
+    readonly previewIsolation?: 'none' | 'shadow' | 'iframe';
 }
 export interface JogakDevOptions extends JogakHostOptionsBase {
     readonly mode: 'dev';

package/dist/host/index.js

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

package/dist/host/index.mjs

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