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

package/CHANGELOG.md

@@ -5,6 +5,30 @@ 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] — 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: 'none',    // 'none' | 'shadow' | 'iframe' (default '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 패턴).
+
+### `jogak.config.ts` 미사용 (CLI flag만)
 
-createRoot(document.getElementById('root')!).render(
-  <JogakApp codeTheme={_jogakCodeTheme} />,
-)
+```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,24 @@ 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` 확장** |
+| alpha.8+ | 예정 | `globalCss: { layer, scope }` 객체 union, 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 +117,51 @@ 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: 'none'`)
 
 - **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)
+
+Preview 콘텐츠를 chrome으로부터 격리하는 모드를 선택합니다. 대부분 default `'none'` + 알파.6 chrome 보호 rule로 충분하며, 사용자 reset이 chrome을 침범하는 강한 시나리오에서만 `'shadow'` / `'iframe'`을 사용합니다.
+
+#### 모드 비교
+
+| 모드 | 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 추가) |
+
+#### `'shadow'` 모드 한계
+
+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로 지정하면 회피 가능:
+
+   ```tsx
+   <Dialog.Portal container={shadowRootEl}>
+     <Dialog.Content>...</Dialog.Content>
+   </Dialog.Portal>
+   ```
+
+2. **외부 stylesheet sync 비용**: `adoptedStyleSheets`로 외부 document의 모든 stylesheet를 ShadowRoot에 share합니다. Vite dev에서 `<style>` HMR이 발생하면 MutationObserver가 ShadowRoot도 갱신 — 약간의 latency가 생길 수 있습니다.
+
+3. **CSS variable**: 외부 `:root`의 변수는 ShadowRoot 내부에서도 inherit. 즉 사용자 `:root { --primary: ... }` 토큰은 ShadowRoot 안에서도 작동합니다.
+
+#### `'iframe'` 모드 주의
+
+> ⚠️ jogak의 핵심 차별점은 "single Vite, no iframe" — Storybook 대비 빠른 cold start와 단순 디버깅이 강점입니다. `previewIsolation: 'iframe'`을 활성화하면 이 강점이 일부 상실됩니다 (iframe load + 별도 module graph). 사용자 reset CSS를 chrome에서 완전히 격리해야만 하는 시나리오에서만 사용하세요.
+
+iframe은 `<iframe src="/preview-frame.html">`로 로드되며, 부모-자식 동일 origin이라 부모가 `iframe.contentWindow.__jogak_setProps__({ entry, args })`를 직접 호출하는 방식으로 props를 전달합니다 (postMessage 미사용).
+
+### scope 가이드 — 알려진 영향 영역 (`'none'` 모드 기준)
 
 사용자 css의 다음 패턴은 jogak chrome에도 영향을 줄 수 있습니다 (전역 import이므로):
 
@@ -123,7 +169,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 +185,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,26 @@
+import { ReactElement, ReactNode, CSSProperties } from 'react';
+export interface ShadowMountProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+    /** 외부 테스트 hook (호스트 div에 부여). */
+    readonly 'data-testid'?: string;
+}
+/**
+ * 알파.7: 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도 갱신.
+ *
+ * Radix portal 한계 (사용자 인지 필요):
+ * - 사용자 컴포넌트가 `Dialog.Portal` / `Popover.Portal` 등을 default로 쓰면
+ *   portal target은 `document.body` — ShadowRoot 외부. utility class는 외부
+ *   document에 정의되어 적용됨, 단 z-index/focus/event boundary가 분리될 수 있음.
+ * - 회피: 사용자가 명시적으로 `<Portal container={shadowRootEl}>`을 전달.
+ */
+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: Preview 영역 격리 모드.
+     *
+     * `'none'` (default), `'shadow'`, `'iframe'` 중 하나.
+     * 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;
 }