xgen-dex-ide 1.60.0

package/README.md

@@ -0,0 +1,42 @@
+# xgen-dex-ide
+
+```bash
+npm i xgen-dex-ide monaco-editor
+```
+
+> 모노레포(`PlateerLab/xgen-dex-core`) 안에서는 `@dex/ide` 라는 별칭으로 쓴다. 같은 코드이고,
+> 밖으로 나갈 때만 이 이름이다.
+
+채팅 안의 IDE 보기. 에이전트가 이미 가진 것(스토리지·샌드박스·git)을 편집기처럼 보여 준다.
+
+| 자리 | 무엇 |
+| --- | --- |
+| 왼쪽 | 활동 막대와 사이드바: 탐색기(스토리지 그대로)·찾기·소스 제어. 보기는 더할 수 있다(`extraViews`) |
+| 가운데 | 편집기 탭(Monaco, 최대 3묶음 나누기)·비교 화면·그림 미리보기, 아래 터미널 |
+| 오른쪽 | 에이전트 채팅(호스트가 넘긴다) |
+
+편집기와 같은 쓰임새를 목표로 한다: 미리보기 탭, 끌어서 옮기기, 빠른 열기(`Ctrl+P`), 명령(`Ctrl+Shift+P`),
+저장 충돌 비교, 파일에서 찾기·바꾸기, 스테이지·커밋·푸시·브랜치·스태시, 연결이 끊겨도 이어지는 터미널.
+
+## 쓰는 법
+
+```tsx
+import { IdeStore, IdeView, type IdeHost } from '@dex/ide'; // 밖에서는 'xgen-dex-ide'
+import '@dex/ide/ide.css';
+
+const store = new IdeStore(host); // 에이전트마다 하나. 채팅 탭을 닫을 때 store.dispose()
+
+<IdeView store={store} chat={<Chat />} theme="dark" />;
+```
+
+`IdeStore` 는 화면과 떨어져 산다 — 탭을 바꿔 IDE 가 다시 그려져도 고친 버퍼·되돌리기 기록·터미널
+연결이 남는다. 호스트는 `IdeHost` 를 구현한다:
+
+- `listFiles` · `subscribeChanges` — 스토리지 목록과 변경 알림(탐색기)
+- `readFile` · `saveFile(path, bytes, baseSha)` · `stat` · `readRaw` · `fs` — 샌드박스 파일(저장은 연 판의 sha 가 조건, 어긋나면 `IdeError('changed')`)
+- `search` · `replace` · `git` — 샌드박스 안에서 찾기·바꾸기·git
+- `terminals` · `closeTerminal` · `openTerminal(id, size, handlers)` — 터미널 소켓(같은 id 로 다시 붙으면 이어진다)
+- `loadMonaco` — Monaco 와 그 worker 는 호스트의 번들러가 맡는다
+- `storage` · `notify` · `openExternal` · `download` · `copyText` — 선택
+
+색은 `.xide-root` 의 `--xide-*` 변수로 바꾼다. xterm 은 처음 터미널을 열 때 불러온다(서버 렌더 안전).

package/dist/components/ActivityBar.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 활동 막대 — 사이드바 보기(탐색기·찾기·소스 제어)를 고른다. 아래쪽은 채팅·터미널.
+ *
+ * 보기는 등록부(`views`)로 받는다. 지금은 셋이지만 확장(테스트·환경 변수·미리보기 등)이
+ * 같은 자리에 들어올 수 있게 IdeView 가 목록을 넘긴다.
+ */
+import type { ReactElement } from 'react';
+import { type IconName } from './icons.js';
+import type { IdeState } from '../store.js';
+export interface SideView {
+    id: string;
+    title: string;
+    icon: IconName;
+    keybinding?: string;
+    badge?: (s: IdeState) => number;
+    render: () => ReactElement;
+}
+export declare function ActivityBar({ views }: {
+    views: SideView[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=ActivityBar.d.ts.map

package/dist/components/ActivityBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityBar.d.ts","sourceRoot":"","sources":["../../src/components/ActivityBar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAG9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;IAChC,MAAM,EAAE,MAAM,YAAY,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,QAAQ,EAAE,CAAA;CAAE,+BAmD3D"}

package/dist/components/ActivityBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from './icons.js';
+import { useIde, useStore } from './hooks.js';
+import { formatBinding } from '../keys.js';
+export function ActivityBar({ views }) {
+    const store = useStore();
+    const side = useIde((s) => s.layout.sideView);
+    const chatOpen = useIde((s) => s.layout.chatOpen);
+    const panelOpen = useIde((s) => s.layout.panelOpen);
+    const readonly = useIde((s) => s.readonly);
+    const badges = useIde((s) => views.map((v) => (v.badge ? v.badge(s) : 0)));
+    return (_jsxs("nav", { className: "xide-activity", "aria-label": "\uBCF4\uAE30", children: [_jsx("div", { className: "xide-activity-top", children: views.map((v, i) => (_jsxs("button", { type: "button", className: `xide-activity-btn${side === v.id ? ' xide--active' : ''}`, title: v.keybinding ? `${v.title} (${formatBinding(v.keybinding)})` : v.title, "aria-label": v.title, "aria-pressed": side === v.id, onClick: () => store.toggleSideView(v.id), children: [_jsx(Icon, { name: v.icon, size: 22 }), badges[i] ? _jsx("span", { className: "xide-activity-badge", children: badges[i] > 999 ? '999+' : badges[i] }) : null] }, v.id))) }), _jsxs("div", { className: "xide-activity-bottom", children: [!readonly ? (_jsx("button", { type: "button", className: `xide-activity-btn${panelOpen ? ' xide--active' : ''}`, title: `터미널 (${formatBinding('Mod+`')})`, "aria-label": "\uD130\uBBF8\uB110", "aria-pressed": panelOpen, onClick: () => (panelOpen ? store.togglePanel() : store.showTerminal()), children: _jsx(Icon, { name: "terminal", size: 22 }) })) : null, _jsx("button", { type: "button", className: `xide-activity-btn${chatOpen ? ' xide--active' : ''}`, title: "\uC5D0\uC774\uC804\uD2B8 \uCC44\uD305", "aria-label": "\uC5D0\uC774\uC804\uD2B8 \uCC44\uD305", "aria-pressed": chatOpen, onClick: () => store.setLayout({ chatOpen: !chatOpen }), children: _jsx(Icon, { name: "chat", size: 22 }) })] })] }));
+}
+//# sourceMappingURL=ActivityBar.js.map

package/dist/components/ActivityBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityBar.js","sourceRoot":"","sources":["../../src/components/ActivityBar.tsx"],"names":[],"mappings":"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"}

package/dist/components/EditorArea.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeKind } from '../types.js';
+export declare function EditorArea({ theme }: {
+    theme: ThemeKind;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EditorArea.d.ts.map

package/dist/components/EditorArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorArea.d.ts","sourceRoot":"","sources":["../../src/components/EditorArea.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,+BA8BzD"}

package/dist/components/EditorArea.js

@@ -0,0 +1,468 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 편집기 영역 — 편집기 묶음(최대 3개, 좌우로 나눔)마다 탭 줄과 편집기 하나.
+ *
+ * Monaco 편집기는 묶음마다 **하나**를 두고 탭을 바꿀 때 모델만 갈아 끼운다(편집기와 같은
+ * 방식). 탭마다 스크롤·커서를 기억했다가 돌아오면 되살린다. 문서(모델)는 저장소가 들고
+ * 있어 화면이 다시 그려져도 고친 내용과 되돌리기 기록이 남는다.
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { FileIcon, Icon } from './icons.js';
+import { useIde, useStore } from './hooks.js';
+import { Empty, IconButton, SplitHandle, showMenu } from './primitives.js';
+import { diskUri, modelUri, originalUri, stagedUri } from '../store.js';
+import { basename, dirname } from '../paths.js';
+import { decodeText, formatBytes, imageMime } from '../text.js';
+import { formatBinding } from '../keys.js';
+import { STATUS_LABEL } from '../git-model.js';
+export function EditorArea({ theme }) {
+    const groups = useIde((s) => s.groups);
+    const [weights, setWeights] = useState({});
+    const ref = useRef(null);
+    const total = groups.reduce((n, g) => n + (weights[g.id] ?? 1), 0);
+    return (_jsx("div", { className: "xide-editor-area", ref: ref, children: groups.map((g, i) => (_jsxs("div", { className: "xide-editor-group-wrap", style: { flex: `${weights[g.id] ?? 1} 1 0` }, children: [i > 0 ? (_jsx(SplitHandle, { axis: "x", label: "\uD3B8\uC9D1\uAE30 \uB108\uBE44", value: Math.round(((weights[groups[i - 1].id] ?? 1) / total) * 1000), min: 150, max: 850, onChange: (v) => {
+                        const a = groups[i - 1].id;
+                        const b = g.id;
+                        const pair = (weights[a] ?? 1) + (weights[b] ?? 1);
+                        const left = Math.max(0.15, Math.min(pair - 0.15, (v / 1000) * total));
+                        setWeights((w) => ({ ...w, [a]: left, [b]: pair - left }));
+                    } })) : null, _jsx(EditorGroupView, { group: g, index: i, theme: theme })] }, g.id))) }));
+}
+function EditorGroupView({ group, index, theme }) {
+    const store = useStore();
+    const activeGroup = useIde((s) => s.activeGroup);
+    const tab = group.tabs.find((t) => t.id === group.activeId) ?? null;
+    return (_jsxs("section", { className: `xide-editor-group${activeGroup === group.id ? ' xide--focused' : ''}`, "aria-label": `편집기 ${index + 1}`, onMouseDownCapture: () => store.setActiveGroup(group.id), onFocusCapture: () => store.setActiveGroup(group.id), children: [_jsx(TabBar, { group: group }), tab ? _jsx(Breadcrumbs, { tab: tab }) : null, _jsx("div", { className: "xide-editor-body", children: tab ? _jsx(TabContent, { group: group, tab: tab, theme: theme }, tab.kind === 'diff' ? 'diff' : tab.kind === 'image' ? `img:${tab.path}` : 'code') : _jsx(Welcome, {}) })] }));
+}
+// ── 탭 줄 ─────────────────────────────────────────────────────────────
+function TabBar({ group }) {
+    const store = useStore();
+    const docs = useIde((s) => s.docs);
+    const groupCount = useIde((s) => s.groups.length);
+    const layout = useIde((s) => s.layout);
+    const [dropAt, setDropAt] = useState(null);
+    const scroller = useRef(null);
+    const names = useMemo(() => {
+        const count = new Map();
+        for (const t of group.tabs)
+            count.set(basename(t.path), (count.get(basename(t.path)) ?? 0) + 1);
+        return count;
+    }, [group.tabs]);
+    useEffect(() => {
+        const el = scroller.current?.querySelector('.xide-tab.xide--active');
+        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [group.activeId]);
+    const tabMenu = (t, e) => showMenu(e, [
+        { id: 'close', label: '닫기', keybinding: 'Mod+W', run: () => void store.closeTab(group.id, t.id) },
+        { id: 'others', label: '다른 탭 닫기', run: () => void store.closeTabs(group.id, 'others', t.id) },
+        { id: 'right', label: '오른쪽 탭 닫기', run: () => void store.closeTabs(group.id, 'right', t.id) },
+        { id: 'saved', label: '저장된 탭 닫기', run: () => void store.closeTabs(group.id, 'saved') },
+        { id: 'all', label: '모두 닫기', run: () => void store.closeTabs(group.id, 'all') },
+        'separator',
+        { id: 'copy', label: '경로 복사', run: () => void copyPath(store, t.path) },
+        {
+            id: 'reveal',
+            label: '탐색기에서 보기',
+            run: () => {
+                store.reveal(t.path);
+                store.showSideView('explorer');
+            },
+        },
+        'separator',
+        { id: 'pin', label: '고정', disabled: !t.preview, run: () => store.pinTab(group.id, t.id) },
+        { id: 'split', label: '오른쪽으로 나누기', keybinding: 'Mod+\\', run: () => store.splitRight({ tabId: t.id }) },
+    ]);
+    const onDragStart = (t, e) => {
+        e.dataTransfer.setData('application/x-xide-tab', JSON.stringify({ group: group.id, tab: t.id }));
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const onDragOver = (i, e) => {
+        if (!Array.from(e.dataTransfer.types).includes('application/x-xide-tab'))
+            return;
+        e.preventDefault();
+        const r = e.currentTarget.getBoundingClientRect();
+        setDropAt(e.clientX < r.left + r.width / 2 ? i : i + 1);
+    };
+    const onDrop = (e) => {
+        const raw = e.dataTransfer.getData('application/x-xide-tab');
+        const at = dropAt ?? group.tabs.length;
+        setDropAt(null);
+        if (!raw)
+            return;
+        e.preventDefault();
+        const { group: from, tab } = JSON.parse(raw);
+        store.moveTab(from, tab, group.id, at);
+    };
+    const active = group.tabs.find((t) => t.id === group.activeId);
+    const activeDoc = active ? docs[active.path] : undefined;
+    return (_jsxs("div", { className: "xide-tabbar", onDragLeave: () => setDropAt(null), onDrop: onDrop, onDragOver: (e) => onDragOver(group.tabs.length - 1, e), children: [_jsx("div", { className: "xide-tabs", ref: scroller, role: "tablist", onWheel: (e) => {
+                    if (scroller.current && Math.abs(e.deltaY) > Math.abs(e.deltaX))
+                        scroller.current.scrollLeft += e.deltaY;
+                }, onDoubleClick: (e) => {
+                    if (e.target === e.currentTarget && !store.getState().readonly)
+                        store.startCreate('', 'file');
+                }, children: group.tabs.map((t, i) => {
+                    const doc = docs[t.path];
+                    const name = basename(t.path);
+                    const dup = (names.get(name) ?? 0) > 1;
+                    const dirty = t.kind === 'file' && !!doc?.dirty;
+                    const label = t.kind === 'diff'
+                        ? t.diff?.disk
+                            ? `${name} (디스크 ↔ 편집 중)`
+                            : `${name} (${t.diff?.staged ? '스테이지' : '작업 트리'})`
+                        : name;
+                    return (_jsxs("div", { role: "tab", "aria-selected": t.id === group.activeId, className: [
+                            'xide-tab',
+                            t.id === group.activeId ? 'xide--active' : '',
+                            t.preview ? 'xide--preview' : '',
+                            dirty ? 'xide--dirty' : '',
+                            dropAt === i ? 'xide--drop-before' : '',
+                            dropAt === i + 1 && i === group.tabs.length - 1 ? 'xide--drop-after' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), title: `${t.path}${t.kind === 'diff' && t.diff?.status ? ` · ${STATUS_LABEL[t.diff.status]}` : ''}`, draggable: true, onDragStart: (e) => onDragStart(t, e), onDragOver: (e) => {
+                            e.stopPropagation();
+                            onDragOver(i, e);
+                        }, onClick: () => store.activateTab(group.id, t.id), onDoubleClick: () => store.pinTab(group.id, t.id), onAuxClick: (e) => {
+                            if (e.button === 1) {
+                                e.preventDefault();
+                                void store.closeTab(group.id, t.id);
+                            }
+                        }, onContextMenu: (e) => tabMenu(t, e), children: [t.kind === 'diff' ? _jsx(Icon, { name: "split", className: "xide-icon xide-tab-diff" }) : _jsx(FileIcon, { name: name }), _jsx("span", { className: "xide-tab-label", children: label }), dup ? _jsx("span", { className: "xide-tab-dir", children: dirname(t.path) || '/' }) : null, _jsxs("button", { type: "button", className: "xide-tab-close", "aria-label": dirty ? '저장하지 않은 변경이 있습니다. 닫기' : '닫기', title: `닫기 (${formatBinding('Mod+W')})`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    void store.closeTab(group.id, t.id);
+                                }, children: [_jsx(Icon, { name: dirty ? 'dot' : 'close', className: "xide-icon xide-tab-close-icon" }), dirty ? _jsx(Icon, { name: "close", className: "xide-icon xide-tab-close-hover" }) : null] })] }, t.id));
+                }) }), _jsxs("div", { className: "xide-tabbar-actions", children: [active?.kind === 'diff' && active.diff && !active.diff.disk ? (_jsx(IconButton, { icon: "go-to-file", label: "\uD30C\uC77C \uC5F4\uAE30", onClick: () => void store.openFile(active.path, { preview: false, groupId: group.id }) })) : null, activeDoc?.dirty ? (_jsx(IconButton, { icon: "check", label: "\uC800\uC7A5", keybinding: "Mod+S", onClick: () => void store.save(active.path) })) : null, _jsx(IconButton, { icon: "split", label: "\uC624\uB978\uCABD\uC73C\uB85C \uB098\uB204\uAE30", keybinding: "Mod+\\\\", disabled: !active || groupCount >= 3, onClick: () => store.splitRight() }), _jsx(IconButton, { icon: "more", label: "\uB354 \uBCF4\uAE30", onClick: (e) => showMenu(e, [
+                            { id: 'close-all', label: '모두 닫기', run: () => void store.closeTabs(group.id, 'all') },
+                            { id: 'close-saved', label: '저장된 탭 닫기', run: () => void store.closeTabs(group.id, 'saved') },
+                            'separator',
+                            { id: 'wrap', label: layout.wordWrap ? '줄 바꿈 끄기' : '줄 바꿈 켜기', keybinding: 'Alt+Z', run: () => store.setLayout({ wordWrap: !layout.wordWrap }) },
+                            { id: 'minimap', label: layout.minimap ? '미니맵 끄기' : '미니맵 켜기', run: () => store.setLayout({ minimap: !layout.minimap }) },
+                            { id: 'autosave', label: layout.autoSave ? '자동 저장 끄기' : '자동 저장 켜기', run: () => store.setLayout({ autoSave: !layout.autoSave }) },
+                        ]) })] })] }));
+}
+async function copyPath(store, path) {
+    const ok = (await store.host.copyText?.(path)) ?? (await navigator.clipboard?.writeText(path).then(() => true, () => false));
+    store.notify(ok ? 'success' : 'error', ok ? '경로를 복사했습니다' : '복사하지 못했습니다');
+}
+function Breadcrumbs({ tab }) {
+    const store = useStore();
+    const parts = tab.path.split('/');
+    return (_jsxs("div", { className: "xide-breadcrumbs", "aria-label": "\uACBD\uB85C", children: [parts.map((p, i) => {
+                const path = parts.slice(0, i + 1).join('/');
+                const last = i === parts.length - 1;
+                return (_jsxs("span", { className: "xide-crumb", children: [_jsxs("button", { type: "button", onClick: () => {
+                                store.reveal(path);
+                                store.showSideView('explorer');
+                            }, children: [last ? _jsx(FileIcon, { name: p }) : null, p] }), !last ? _jsx(Icon, { name: "chevron-right" }) : null] }, path));
+            }), tab.kind === 'diff' && tab.diff ? (_jsx("span", { className: "xide-crumb-note", children: tab.diff.disk ? '왼쪽: 디스크의 지금 판 · 오른쪽: 편집 중인 판' : tab.diff.staged ? '왼쪽: 마지막 커밋 · 오른쪽: 스테이지' : '왼쪽: 스테이지 · 오른쪽: 작업 트리' })) : null] }));
+}
+function Welcome() {
+    const store = useStore();
+    const readonly = useIde((s) => s.readonly);
+    const rows = [
+        ['파일 빨리 열기', 'Mod+P', () => store.openQuickOpen('files')],
+        ['명령 보기', 'Mod+Shift+P', () => store.openQuickOpen('commands')],
+        ['찾기', 'Mod+Shift+F', () => store.showSideView('search')],
+        ['소스 제어', 'Mod+Shift+G', () => store.showSideView('scm')],
+    ];
+    if (!readonly)
+        rows.push(['터미널', 'Mod+`', () => store.showTerminal()]);
+    return (_jsxs("div", { className: "xide-welcome", children: [_jsx("div", { className: "xide-welcome-title", children: "\uC120\uD0DD\uB41C \uD30C\uC77C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" }), _jsx("div", { className: "xide-welcome-text", children: "\uD0D0\uC0C9\uAE30\uC5D0\uC11C \uD30C\uC77C\uC744 \uACE0\uB974\uAC70\uB098 \uC18C\uC2A4 \uC81C\uC5B4\uC5D0\uC11C \uBC14\uB010 \uD30C\uC77C\uC744 \uB204\uB974\uC138\uC694." }), _jsx("div", { className: "xide-welcome-keys", children: rows.map(([label, key, run]) => (_jsxs("button", { type: "button", onClick: run, children: [_jsx("span", { children: label }), _jsx("kbd", { children: formatBinding(key) })] }, label))) })] }));
+}
+// ── 탭 내용 ───────────────────────────────────────────────────────────
+function TabContent({ group, tab, theme }) {
+    if (tab.kind === 'image')
+        return _jsx(ImagePane, { path: tab.path });
+    if (tab.kind === 'diff' && tab.diff)
+        return _jsx(DiffPane, { group: group, tab: tab, diff: tab.diff, theme: theme });
+    return _jsx(CodePane, { group: group, tab: tab, theme: theme });
+}
+function useMonaco() {
+    const store = useStore();
+    const ready = useIde((s) => s.monacoReady);
+    const error = useIde((s) => s.monacoError);
+    useEffect(() => {
+        if (!ready)
+            void store.loadMonaco().catch(() => undefined);
+    }, [ready, store]);
+    return { monaco: ready ? store.getMonaco() : null, error };
+}
+function editorOptions(layout, readOnly) {
+    return {
+        automaticLayout: true,
+        fontSize: layout.fontSize,
+        fontFamily: "'JetBrains Mono', 'D2Coding', 'Fira Code', Menlo, Consolas, 'Liberation Mono', monospace",
+        minimap: { enabled: layout.minimap },
+        wordWrap: layout.wordWrap ? 'on' : 'off',
+        readOnly,
+        scrollBeyondLastLine: true,
+        renderWhitespace: 'selection',
+        smoothScrolling: true,
+        cursorBlinking: 'smooth',
+        bracketPairColorization: { enabled: true },
+        guides: { bracketPairs: 'active', indentation: true },
+        stickyScroll: { enabled: true },
+        fixedOverflowWidgets: true,
+        tabSize: 2,
+        detectIndentation: true,
+        renderLineHighlight: 'all',
+        unicodeHighlight: { ambiguousCharacters: false },
+    };
+}
+function monacoTheme(theme) {
+    return theme === 'light' ? 'vs' : 'vs-dark';
+}
+function CodePane({ group, tab, theme }) {
+    const store = useStore();
+    const { monaco, error } = useMonaco();
+    const doc = useIde((s) => s.docs[tab.path]);
+    const layout = useIde((s) => s.layout);
+    const readonly = useIde((s) => s.readonly);
+    const host = useRef(null);
+    const editorRef = useRef(null);
+    const shownTab = useRef(null);
+    // 편집기를 만든다(묶음마다 하나).
+    useEffect(() => {
+        if (!monaco || !host.current)
+            return;
+        const editor = monaco.editor.create(host.current, { ...editorOptions(layout, readonly), model: null, theme: monacoTheme(theme) });
+        editorRef.current = editor;
+        store.editors.set(group.id, editor);
+        const subs = [
+            editor.onDidChangeCursorSelection(() => {
+                const pos = editor.getPosition();
+                const model = editor.getModel();
+                if (!pos || !model)
+                    return;
+                const sel = editor.getSelections() ?? [];
+                const selected = sel.reduce((n, r) => n + (model.getValueInRange(r).length || 0), 0);
+                store.setCursor({ line: pos.lineNumber, col: pos.column, selected });
+            }),
+            editor.onDidFocusEditorWidget(() => store.setActiveGroup(group.id)),
+        ];
+        return () => {
+            if (shownTab.current)
+                store.viewStates.set(`${group.id}:${shownTab.current}`, editor.saveViewState());
+            subs.forEach((d) => d.dispose());
+            if (store.editors.get(group.id) === editor)
+                store.editors.delete(group.id);
+            editor.setModel(null);
+            editor.dispose();
+            editorRef.current = null;
+            shownTab.current = null;
+        };
+        // 편집기는 한 번만 만든다 — 옵션은 아래 효과가 바꾼다.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [monaco, group.id]);
+    useEffect(() => {
+        editorRef.current?.updateOptions(editorOptions(layout, readonly));
+    }, [layout.fontSize, layout.minimap, layout.wordWrap, readonly]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        monaco?.editor.setTheme(monacoTheme(theme));
+    }, [monaco, theme]);
+    // 탭이 바뀌거나 문서가 준비되면 모델을 갈아 끼운다.
+    useEffect(() => {
+        const editor = editorRef.current;
+        if (!monaco || !editor)
+            return;
+        const model = doc?.status === 'ready' ? monaco.editor.getModel(modelUri(monaco, store.host.workflowId, tab.path)) : null;
+        if (shownTab.current && shownTab.current !== tab.id) {
+            store.viewStates.set(`${group.id}:${shownTab.current}`, editor.saveViewState());
+        }
+        if (editor.getModel() !== model) {
+            editor.setModel(model);
+            if (model) {
+                const vs = store.viewStates.get(`${group.id}:${tab.id}`);
+                if (vs)
+                    editor.restoreViewState(vs);
+                if (store.getState().activeGroup === group.id)
+                    editor.focus();
+            }
+        }
+        shownTab.current = model ? tab.id : null;
+        const want = store.pendingReveal;
+        if (model && want && want.path === tab.path) {
+            store.pendingReveal = null;
+            const range = new monaco.Range(want.line, want.col, want.line, want.col + want.length);
+            editor.setSelection(range);
+            editor.revealRangeInCenterIfOutsideViewport(range);
+            editor.focus();
+        }
+    });
+    return (_jsxs("div", { className: "xide-code-pane", children: [doc?.diskChanged && doc.status === 'ready' ? _jsx(DiskChangedBar, { path: tab.path, deleted: !!doc.message }) : null, _jsx("div", { className: "xide-monaco", ref: host, style: { display: doc?.status === 'ready' ? undefined : 'none' } }), error ? _jsx(Empty, { icon: "error", children: error }) : null, !error && (!doc || doc.status === 'loading' || !monaco) ? _jsx("div", { className: "xide-pane-note", children: "\uC5EC\uB294 \uC911" }) : null, doc?.status === 'binary' ? (_jsxs(Empty, { icon: "file", children: [_jsx("p", { children: "\uD14D\uC2A4\uD2B8 \uD30C\uC77C\uC774 \uC544\uB2C8\uAC70\uB098 UTF-8 \uC774 \uC544\uB2C8\uB77C \uD3B8\uC9D1\uAE30\uB85C \uC5F4\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4." }), _jsxs("div", { className: "xide-empty-actions", children: [_jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.openFile(tab.path, { forceText: true, preview: false }), children: "\uADF8\uB798\uB3C4 \uC5F4\uAE30" }), store.host.download ? (_jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.host.download?.(tab.path), children: "\uB0B4\uB824\uBC1B\uAE30" })) : null] })] })) : null, doc?.status === 'too_large' ? (_jsxs(Empty, { icon: "warning", children: [_jsxs("p", { children: ["\uD30C\uC77C\uC774 \uB108\uBB34 \uCEE4\uC11C(", formatBytes(doc.size), ") \uD3B8\uC9D1\uAE30\uB85C \uC5F4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."] }), store.host.download ? (_jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.host.download?.(tab.path), children: "\uB0B4\uB824\uBC1B\uAE30" })) : null] })) : null, doc?.status === 'missing' || doc?.status === 'error' ? (_jsxs(Empty, { icon: "warning", children: [_jsx("p", { children: doc.message ?? '파일을 열지 못했습니다' }), _jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.ensureDoc(tab.path), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })] })) : null] }));
+}
+function DiskChangedBar({ path, deleted }) {
+    const store = useStore();
+    return (_jsxs("div", { className: "xide-banner warning", role: "alert", children: [_jsx(Icon, { name: "warning" }), _jsx("span", { children: deleted
+                    ? '이 파일이 디스크에서 지워졌습니다. 저장하면 다시 만들어집니다.'
+                    : '편집하는 사이 에이전트나 터미널이 이 파일을 바꿨습니다.' }), !deleted ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.openDiskCompare(path), children: "\uBE44\uAD50" }), _jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.reloadFromDisk(path, { discard: true }), children: "\uBC14\uB010 \uD310 \uBD88\uB7EC\uC624\uAE30" })] })) : null, _jsx("button", { type: "button", className: "xide-btn xide--danger", onClick: () => void store.save(path, { force: true }), children: deleted ? '다시 저장' : '내 판으로 덮어쓰기' })] }));
+}
+/** git 의 어떤 판(HEAD·스테이지)의 내용 — 없으면 빈 문자열(새 파일). */
+async function gitText(store, diff, ref) {
+    const out = await store.host.git({
+        op: 'show',
+        repo: diff.repo,
+        path: diff.path,
+        ref,
+    });
+    if (!out.exists || !out.content_b64)
+        return '';
+    if (out.too_large)
+        return '(파일이 너무 커서 비교하지 않습니다)';
+    const bin = atob(out.content_b64);
+    const bytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i += 1)
+        bytes[i] = bin.charCodeAt(i);
+    return decodeText(bytes).text;
+}
+function setModelText(monaco, uri, text, languageFrom) {
+    const existing = monaco.editor.getModel(uri);
+    if (existing) {
+        if (existing.getValue() !== text)
+            existing.setValue(text);
+        return existing;
+    }
+    const lang = monaco.editor.getModel(languageFrom)?.getLanguageId();
+    return monaco.editor.createModel(text, lang, uri);
+}
+function DiffPane({ group, tab, diff, theme }) {
+    const store = useStore();
+    const { monaco, error } = useMonaco();
+    const doc = useIde((s) => s.docs[tab.path]);
+    const statuses = useIde((s) => s.git.statuses);
+    const layout = useIde((s) => s.layout);
+    const readonly = useIde((s) => s.readonly);
+    const host = useRef(null);
+    const editorRef = useRef(null);
+    const [inline, setInline] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        if (!monaco || !host.current)
+            return;
+        const editor = monaco.editor.createDiffEditor(host.current, {
+            ...editorOptions(layout, readonly),
+            renderSideBySide: !inline,
+            originalEditable: false,
+            ignoreTrimWhitespace: false,
+            enableSplitViewResizing: true,
+            renderOverviewRuler: true,
+        });
+        editorRef.current = editor;
+        return () => {
+            editor.setModel(null);
+            editor.dispose();
+            editorRef.current = null;
+        };
+    }, [monaco]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        editorRef.current?.updateOptions({ ...editorOptions(layout, readonly), renderSideBySide: !inline });
+    }, [inline, layout.fontSize, layout.minimap, layout.wordWrap, readonly]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        monaco?.editor.setTheme(monacoTheme(theme));
+    }, [monaco, theme]);
+    // 양쪽 모델을 준비한다. git 상태가 바뀌면(스테이지·커밋) 원래 쪽을 다시 읽는다.
+    useEffect(() => {
+        if (!monaco || !editorRef.current)
+            return;
+        let alive = true;
+        const wf = store.host.workflowId;
+        const workUri = modelUri(monaco, wf, tab.path);
+        (async () => {
+            try {
+                let original;
+                let modified;
+                if (diff.disk) {
+                    original = monaco.editor.getModel(diskUri(monaco, wf, tab.path));
+                    if (!doc || doc.status !== 'ready')
+                        return;
+                    modified = monaco.editor.getModel(workUri);
+                }
+                else if (diff.staged) {
+                    const [head, index] = await Promise.all([gitText(store, diff, 'HEAD'), gitText(store, diff, 'index')]);
+                    if (!alive)
+                        return;
+                    original = setModelText(monaco, originalUri(monaco, wf, diff), head, workUri);
+                    modified = setModelText(monaco, stagedUri(monaco, wf, diff), diff.status === 'deleted' ? '' : index, workUri);
+                }
+                else {
+                    const base = diff.status === 'untracked' ? '' : await gitText(store, diff, 'index');
+                    if (!alive)
+                        return;
+                    original = setModelText(monaco, originalUri(monaco, wf, diff), base, workUri);
+                    if (diff.status === 'deleted') {
+                        modified = setModelText(monaco, monaco.Uri.from({ scheme: 'xide-empty', path: `/xgen/${wf}/${tab.path}` }), '', workUri);
+                    }
+                    else {
+                        if (!doc || doc.status !== 'ready')
+                            return;
+                        modified = monaco.editor.getModel(workUri);
+                    }
+                }
+                if (!alive || !editorRef.current || !original || !modified)
+                    return;
+                const cur = editorRef.current.getModel();
+                if (cur?.original !== original || cur?.modified !== modified) {
+                    editorRef.current.setModel({ original, modified });
+                }
+                editorRef.current.getModifiedEditor().updateOptions({ readOnly: readonly || diff.staged || diff.status === 'deleted' });
+                setReady(true);
+                setLoadError(null);
+            }
+            catch (err) {
+                if (alive)
+                    setLoadError(err instanceof Error ? err.message : '비교할 내용을 읽지 못했습니다');
+            }
+        })();
+        return () => {
+            alive = false;
+        };
+    }, [monaco, diff, doc?.status, statuses, tab.path, store, readonly]);
+    useEffect(() => {
+        const ed = editorRef.current?.getModifiedEditor();
+        if (!ed)
+            return;
+        const sub = ed.onDidChangeCursorPosition((e) => store.setCursor({ line: e.position.lineNumber, col: e.position.column, selected: 0 }));
+        return () => sub.dispose();
+    }, [ready, store]);
+    const status = diff.repo != null ? statuses[diff.repo] : undefined;
+    const stillChanged = !diff.disk &&
+        !!status &&
+        (diff.staged ? status.staged : [...status.changes, ...status.untracked]).some((c) => c.path === diff.path);
+    return (_jsxs("div", { className: "xide-code-pane", children: [_jsxs("div", { className: "xide-diff-toolbar", children: [_jsx("span", { className: "xide-dim", children: diff.disk ? '디스크 판과 편집 중인 판' : `${STATUS_LABEL[diff.status ?? 'modified']} · ${diff.staged ? '스테이지된 변경' : '작업 트리 변경'}` }), _jsx("span", { className: "xide-spacer" }), !readonly && !diff.disk && stillChanged ? (diff.staged ? (_jsxs("button", { type: "button", className: "xide-btn", onClick: () => void store.gitRun({ op: 'unstage', repo: diff.repo, paths: [diff.path] }, '스테이지 취소'), children: [_jsx(Icon, { name: "minus" }), " \uC2A4\uD14C\uC774\uC9C0 \uCDE8\uC18C"] })) : (_jsxs("button", { type: "button", className: "xide-btn", onClick: () => void store.gitRun({ op: 'stage', repo: diff.repo, paths: [diff.path] }, '스테이지'), children: [_jsx(Icon, { name: "plus" }), " \uC2A4\uD14C\uC774\uC9C0"] }))) : null, diff.disk ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "xide-btn", onClick: () => void store.reloadFromDisk(tab.path, { discard: true }).then(() => store.closeTab(group.id, tab.id, { force: true })), children: "\uB514\uC2A4\uD06C \uD310 \uC4F0\uAE30" }), _jsx("button", { type: "button", className: "xide-btn xide--primary", onClick: () => void store.save(tab.path, { force: true }).then((ok) => ok && store.closeTab(group.id, tab.id, { force: true })), children: "\uD3B8\uC9D1 \uC911\uC778 \uD310\uC73C\uB85C \uC800\uC7A5" })] })) : null, _jsx(IconButton, { icon: "layout-sidebar", label: inline ? '나란히 보기' : '한 줄로 보기', active: inline, onClick: () => setInline((v) => !v) }), _jsx(IconButton, { icon: "arrow-up", label: "\uC774\uC804 \uBCC0\uACBD", onClick: () => editorRef.current?.goToDiff?.('previous') }), _jsx(IconButton, { icon: "arrow-down", label: "\uB2E4\uC74C \uBCC0\uACBD", onClick: () => editorRef.current?.goToDiff?.('next') })] }), _jsx("div", { className: "xide-monaco", ref: host }), error || loadError ? _jsx(Empty, { icon: "error", children: error ?? loadError }) : null, !ready && !error && !loadError ? _jsx("div", { className: "xide-pane-note", children: "\uBE44\uAD50\uD560 \uB0B4\uC6A9\uC744 \uC77D\uB294 \uC911" }) : null] }));
+}
+function ImagePane({ path }) {
+    const store = useStore();
+    const [url, setUrl] = useState(null);
+    const [size, setSize] = useState(null);
+    const [error, setError] = useState(null);
+    const [zoom, setZoom] = useState('fit');
+    const version = useIde((s) => s.files.find((f) => f.path === path)?.modifiedAt ?? '');
+    useEffect(() => {
+        let alive = true;
+        let objectUrl = null;
+        store.host.readRaw(path).then((bytes) => {
+            if (!alive)
+                return;
+            objectUrl = URL.createObjectURL(new Blob([bytes], { type: imageMime(path) }));
+            setUrl(objectUrl);
+            setSize({ bytes: bytes.length });
+            setError(null);
+        }, (err) => alive && setError(err instanceof Error ? err.message : '그림을 읽지 못했습니다'));
+        return () => {
+            alive = false;
+            if (objectUrl)
+                URL.revokeObjectURL(objectUrl);
+        };
+    }, [path, version, store]);
+    if (error)
+        return _jsx(Empty, { icon: "error", children: error });
+    if (!url)
+        return _jsx("div", { className: "xide-pane-note", children: "\uC5EC\uB294 \uC911" });
+    return (_jsxs("div", { className: `xide-image-pane${zoom === 'fit' ? ' xide--fit' : ''}`, children: [_jsx("div", { className: "xide-image-scroll", onClick: () => setZoom((z) => (z === 'fit' ? 1 : 'fit')), children: _jsx("img", { src: url, alt: basename(path), style: zoom === 'fit' ? undefined : { width: size?.w ? size.w * zoom : undefined }, onLoad: (e) => {
+                        const img = e.currentTarget;
+                        setSize((s) => ({ bytes: s?.bytes ?? 0, w: img.naturalWidth, h: img.naturalHeight }));
+                    } }) }), _jsxs("div", { className: "xide-image-info", children: [size?.w ? `${size.w} × ${size.h}` : '', " ", size ? `· ${formatBytes(size.bytes)}` : '', " \u00B7 ", zoom === 'fit' ? '창에 맞춤' : '원래 크기'] })] }));
+}
+//# sourceMappingURL=EditorArea.js.map