@molecule/app-ide-react 1.0.0

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Command Palette (Cmd+Shift+P) — searchable command list overlay.
+ *
+ * @module
+ */
+import type { JSX } from 'react';
+import type { CommandPaletteProps } from '../types.js';
+/**
+ * Command Palette overlay.
+ *
+ * @param props - Component props.
+ * @returns The command palette element.
+ */
+export declare function CommandPalette({ commands, onDismiss }: CommandPaletteProps): JSX.Element;
+export declare namespace CommandPalette {
+    var displayName: string;
+}
+//# sourceMappingURL=CommandPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/components/CommandPalette.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAKhC,OAAO,KAAK,EAAE,mBAAmB,EAAmB,MAAM,aAAa,CAAA;AAGvE;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAiCxF;yBAjCe,cAAc"}

package/dist/components/CommandPalette.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { t } from '@molecule/app-i18n';
+import { QuickPicker } from './QuickPicker.js';
+/**
+ * Command Palette overlay.
+ *
+ * @param props - Component props.
+ * @returns The command palette element.
+ */
+export function CommandPalette({ commands, onDismiss }) {
+    const items = useMemo(() => commands.map((cmd) => ({
+        id: cmd.id,
+        label: cmd.category ? `${cmd.category}: ${cmd.label}` : cmd.label,
+        detail: cmd.shortcut,
+    })), [commands]);
+    const commandMap = useMemo(() => {
+        const map = new Map();
+        for (const cmd of commands) {
+            map.set(cmd.id, cmd.execute);
+        }
+        return map;
+    }, [commands]);
+    return (_jsx(QuickPicker, { items: items, placeholder: t('ide.commandPalette.placeholder', undefined, {
+            defaultValue: 'Type a command…',
+        }), onSelect: (item) => {
+            const handler = commandMap.get(item.id);
+            handler?.();
+            onDismiss();
+        }, onDismiss: onDismiss }));
+}
+CommandPalette.displayName = 'CommandPalette';
+//# sourceMappingURL=CommandPalette.js.map

package/dist/components/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sourceRoot":"","sources":["../../src/components/CommandPalette.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAA;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAuB;IACzE,MAAM,KAAK,GAAsB,OAAO,CACtC,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACrB,EAAE,EAAE,GAAG,CAAC,EAAE;QACV,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK;QACjE,MAAM,EAAE,GAAG,CAAC,QAAQ;KACrB,CAAC,CAAC,EACL,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,GAAG,GAAG,IAAI,GAAG,EAAsB,CAAA;QACzC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;QAC9B,CAAC;QACD,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,CAAC,CAAC,gCAAgC,EAAE,SAAS,EAAE;YAC1D,YAAY,EAAE,iBAAiB;SAChC,CAAC,EACF,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;YACjB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YACvC,OAAO,EAAE,EAAE,CAAA;YACX,SAAS,EAAE,CAAA;QACb,CAAC,EACD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}

package/dist/components/DeviceFrameSelector.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Device-frame selector for the preview panel — a themed dropdown menu.
+ *
+ * The trigger shows the CURRENT frame's icon plus a chevron-down affordance.
+ * Opening it lists every device frame (Responsive / Desktop / Tablet / Mobile)
+ * with its bonded icon + i18n label; choosing one calls `onChange`. This
+ * replaced the old single-button "cycle on click" affordance — selecting a
+ * frame directly is far less error-prone than blind-cycling through four.
+ *
+ * Below the frames (after a divider) the menu also hosts the preview's "Rotate"
+ * and "Open in new tab" actions (P4-04) that used to be separate toolbar
+ * buttons. "Rotate" is a TOGGLE — a `menuitemcheckbox` that shows a check when the
+ * preview is rotated to landscape — shown only "where relevant", i.e. when the
+ * current frame is rotatable (fixed-frame tablet/mobile) and an `onRotate` handler
+ * is wired;
+ * "Open in new tab" is shown whenever an `onOpenExternal` handler is wired.
+ * Both share the frame rows' icon + label styling and the same roving focus.
+ *
+ * The menu is a minimal, accessible, fully themed popover built from ClassMap
+ * tokens + bonded `<Icon>`s (keyboard navigable, outside-click + Escape close,
+ * `role="menu"` / `role="menuitemradio"` with roving focus). It deliberately
+ * does NOT use the framework `Dropdown`: that component imports
+ * `react-router-dom` via `useLocation`, and this feature package is kept free
+ * of that dependency (the same reason {@link Tooltip} is subpath-imported here,
+ * never the package barrel).
+ *
+ * The trigger carries `cm.touchTarget`, so its compact `xs` desktop size grows
+ * to a WCAG-compliant >=44×44px hit-area on touch (coarse-pointer) devices.
+ *
+ * @module
+ */
+import { type JSX } from 'react';
+import type { DeviceFrameSelectorProps } from '../types.js';
+/**
+ * Props for {@link DeviceFrameSelector}, extending the shared
+ * {@link DeviceFrameSelectorProps} with the in-dropdown action callbacks (P4-04):
+ * the device dropdown now also hosts the Rotate and Open-in-new-tab controls that
+ * used to be separate toolbar buttons.
+ */
+export interface DeviceFrameSelectorWithActionsProps extends DeviceFrameSelectorProps {
+    /** Whether the current frame can be rotated — gates the Rotate item ("when/where relevant"). */
+    canRotate?: boolean;
+    /** Whether the preview is currently rotated to landscape — renders Rotate as a CHECKED toggle. */
+    rotated?: boolean;
+    /** Rotate the current fixed-frame device portrait ⇄ landscape. Omit to hide the Rotate item. */
+    onRotate?: () => void;
+    /** Open the preview URL in a new browser tab. Omit to hide the Open-in-new-tab item. */
+    onOpenExternal?: () => void;
+}
+/**
+ * A dropdown that selects the preview device frame and hosts the Rotate +
+ * Open-in-new-tab actions.
+ * @param props - Component props (see {@link DeviceFrameSelectorWithActionsProps}).
+ * @returns The rendered device-frame selector element.
+ */
+export declare function DeviceFrameSelector({ current, onChange, className, canRotate, rotated, onRotate, onOpenExternal, }: DeviceFrameSelectorWithActionsProps): JSX.Element;
+export declare namespace DeviceFrameSelector {
+    var displayName: string;
+}
+//# sourceMappingURL=DeviceFrameSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceFrameSelector.d.ts","sourceRoot":"","sources":["../../src/components/DeviceFrameSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAgE,MAAM,OAAO,CAAA;AAO9F,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAI3D;;;;;GAKG;AACH,MAAM,WAAW,mCAAoC,SAAQ,wBAAwB;IACnF,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wFAAwF;IACxF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,cAAc,GACf,EAAE,mCAAmC,GAAG,GAAG,CAAC,OAAO,CA6SnD;yBArTe,mBAAmB"}

package/dist/components/DeviceFrameSelector.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Device-frame selector for the preview panel — a themed dropdown menu.
+ *
+ * The trigger shows the CURRENT frame's icon plus a chevron-down affordance.
+ * Opening it lists every device frame (Responsive / Desktop / Tablet / Mobile)
+ * with its bonded icon + i18n label; choosing one calls `onChange`. This
+ * replaced the old single-button "cycle on click" affordance — selecting a
+ * frame directly is far less error-prone than blind-cycling through four.
+ *
+ * Below the frames (after a divider) the menu also hosts the preview's "Rotate"
+ * and "Open in new tab" actions (P4-04) that used to be separate toolbar
+ * buttons. "Rotate" is a TOGGLE — a `menuitemcheckbox` that shows a check when the
+ * preview is rotated to landscape — shown only "where relevant", i.e. when the
+ * current frame is rotatable (fixed-frame tablet/mobile) and an `onRotate` handler
+ * is wired;
+ * "Open in new tab" is shown whenever an `onOpenExternal` handler is wired.
+ * Both share the frame rows' icon + label styling and the same roving focus.
+ *
+ * The menu is a minimal, accessible, fully themed popover built from ClassMap
+ * tokens + bonded `<Icon>`s (keyboard navigable, outside-click + Escape close,
+ * `role="menu"` / `role="menuitemradio"` with roving focus). It deliberately
+ * does NOT use the framework `Dropdown`: that component imports
+ * `react-router-dom` via `useLocation`, and this feature package is kept free
+ * of that dependency (the same reason {@link Tooltip} is subpath-imported here,
+ * never the package barrel).
+ *
+ * The trigger carries `cm.touchTarget`, so its compact `xs` desktop size grows
+ * to a WCAG-compliant >=44×44px hit-area on touch (coarse-pointer) devices.
+ *
+ * @module
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { t } from '@molecule/app-i18n';
+import { getClassMap } from '@molecule/app-ui';
+import { Tooltip } from '@molecule/app-ui-react/components/Tooltip.js';
+import { DEVICE_FRAMES, DEVICE_META } from './device-cycle.js';
+import { Icon } from './Icon.js';
+/**
+ * A dropdown that selects the preview device frame and hosts the Rotate +
+ * Open-in-new-tab actions.
+ * @param props - Component props (see {@link DeviceFrameSelectorWithActionsProps}).
+ * @returns The rendered device-frame selector element.
+ */
+export function DeviceFrameSelector({ current, onChange, className, canRotate, rotated, onRotate, onOpenExternal, }) {
+    const cm = getClassMap();
+    // Action rows shown below the device frames (P4-04), after a divider: Rotate
+    // (only "where relevant" — when the current frame is rotatable AND a handler
+    // is wired) and Open in new tab (whenever a handler is wired). Built as data so
+    // they share the frame rows' roving-focus model + menu-item styling.
+    const actionItems = [
+        ...(canRotate && onRotate
+            ? [
+                {
+                    id: 'preview-device-rotate',
+                    // `as const` keeps the literal type through the conditional spread
+                    // (the spread otherwise widens it to string, off the IconName union).
+                    icon: 'rotate',
+                    label: t('ide.device.rotate', {}, { defaultValue: 'Rotate' }),
+                    run: onRotate,
+                    // Rotate is a TOGGLE (portrait ⇄ landscape) — show its on/off state with a
+                    // check, so it reads as a toggle rather than a one-shot action.
+                    checked: !!rotated,
+                },
+            ]
+            : []),
+        ...(onOpenExternal
+            ? [
+                {
+                    id: 'preview-open-external',
+                    icon: 'link-external',
+                    label: t('ide.preview.openNewTab', {}, { defaultValue: 'Open in new tab' }),
+                    run: onOpenExternal,
+                },
+            ]
+            : []),
+    ];
+    // Total roving-focus targets = device frames + the conditional action rows.
+    const itemCount = DEVICE_FRAMES.length + actionItems.length;
+    const [open, setOpen] = useState(false);
+    // Index of the menu item with roving focus while the menu is open.
+    const [activeIndex, setActiveIndex] = useState(0);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const currentIndex = Math.max(0, DEVICE_FRAMES.indexOf(current));
+    const selectLabel = t('ide.device.select', {}, { defaultValue: 'Device frame' });
+    const closeMenu = useCallback((refocusTrigger = true) => {
+        setOpen(false);
+        if (refocusTrigger)
+            triggerRef.current?.focus();
+    }, []);
+    const openMenu = useCallback((index) => {
+        setActiveIndex(index);
+        setOpen(true);
+    }, []);
+    // Close on outside pointer-down.
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onPointerDown = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        return () => document.removeEventListener('mousedown', onPointerDown);
+    }, [open]);
+    // Move real DOM focus to the active item whenever the menu opens / moves.
+    useEffect(() => {
+        if (open)
+            itemRefs.current[activeIndex]?.focus();
+    }, [open, activeIndex]);
+    const select = useCallback((frame) => {
+        onChange(frame);
+        closeMenu();
+    }, [onChange, closeMenu]);
+    // Run an action row (Rotate / Open in new tab) then close the menu.
+    const runAction = useCallback((run) => {
+        run();
+        closeMenu();
+    }, [closeMenu]);
+    const onTriggerKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openMenu(currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            openMenu(itemCount - 1);
+        }
+    }, [openMenu, currentIndex, itemCount]);
+    const onMenuKeyDown = useCallback((event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                setActiveIndex((index) => (index + 1) % itemCount);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((index) => (index - 1 + itemCount) % itemCount);
+                break;
+            case 'Home':
+                event.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                setActiveIndex(itemCount - 1);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                closeMenu();
+                break;
+            case 'Tab':
+                // Let focus leave naturally, but collapse the menu.
+                setOpen(false);
+                break;
+            default:
+                break;
+        }
+    }, [closeMenu, itemCount]);
+    const currentLabel = t(DEVICE_META[current].labelKey, {}, { defaultValue: DEVICE_META[current].label });
+    return (_jsxs("div", { ref: rootRef, style: { position: 'relative', display: 'inline-flex' }, children: [_jsx(Tooltip, { content: selectLabel, placement: "bottom", children: _jsxs("button", { ref: triggerRef, type: "button", "data-mol-id": "preview-device-cycle", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": `${selectLabel}: ${currentLabel}`, onClick: () => (open ? closeMenu(false) : openMenu(currentIndex)), onKeyDown: onTriggerKeyDown, className: cm.cn(cm.button({ variant: 'ghost', size: 'xs' }), cm.touchTarget, className), children: [_jsx(Icon, { name: DEVICE_META[current].icon, size: 16, "aria-hidden": "true" }), _jsx(Icon, { name: "chevron-down", size: 12, "aria-hidden": "true", style: { marginLeft: 1 } })] }) }), open && (_jsxs("div", { role: "menu", "aria-label": selectLabel, onKeyDown: onMenuKeyDown, className: cm.cn(cm.surface, cm.borderAll, cm.shadowLifted, cm.textSize('xs')), style: {
+                    position: 'absolute',
+                    top: '100%',
+                    right: 0,
+                    marginTop: 4,
+                    minWidth: 168,
+                    padding: 4,
+                    borderRadius: 8,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2,
+                    zIndex: 30,
+                }, children: [DEVICE_FRAMES.map((frame, index) => {
+                        const label = t(DEVICE_META[frame].labelKey, {}, { defaultValue: DEVICE_META[frame].label });
+                        const isCurrent = frame === current;
+                        const isActive = index === activeIndex;
+                        return (_jsxs("button", { ref: (node) => {
+                                itemRefs.current[index] = node;
+                            }, type: "button", role: "menuitemradio", "aria-checked": isCurrent, tabIndex: isActive ? 0 : -1, "data-mol-id": `preview-device-option-${frame}`, onClick: () => select(frame), onMouseEnter: () => setActiveIndex(index), style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 8,
+                                width: '100%',
+                                padding: '6px 8px',
+                                textAlign: 'left',
+                                border: 'none',
+                                borderRadius: 6,
+                                color: 'inherit',
+                                cursor: 'pointer',
+                                font: 'inherit',
+                                // Highlight (hover + keyboard) via a theme token, never a hex —
+                                // kept inline so it doesn't fight a ClassMap background class.
+                                background: isActive
+                                    ? 'var(--mol-color-surface-secondary, transparent)'
+                                    : 'transparent',
+                            }, children: [_jsx(Icon, { name: DEVICE_META[frame].icon, size: 16, "aria-hidden": "true" }), _jsx("span", { style: { flex: 1 }, children: label }), isCurrent && _jsx(Icon, { name: "check", size: 14, "aria-hidden": "true" })] }, frame));
+                    }), actionItems.length > 0 && (_jsx("div", { role: "separator", "aria-hidden": "true", "data-mol-id": "preview-device-menu-separator", style: {
+                            height: 1,
+                            margin: '4px 0',
+                            background: 'var(--mol-color-border, rgba(128,128,128,0.2))',
+                        } })), actionItems.map((item, actionIdx) => {
+                        const index = DEVICE_FRAMES.length + actionIdx;
+                        const isActive = index === activeIndex;
+                        return (_jsxs("button", { ref: (node) => {
+                                itemRefs.current[index] = node;
+                            }, type: "button", role: item.checked !== undefined ? 'menuitemcheckbox' : 'menuitem', "aria-checked": item.checked, tabIndex: isActive ? 0 : -1, "data-mol-id": item.id, onClick: () => runAction(item.run), onMouseEnter: () => setActiveIndex(index), style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 8,
+                                width: '100%',
+                                padding: '6px 8px',
+                                textAlign: 'left',
+                                border: 'none',
+                                borderRadius: 6,
+                                color: 'inherit',
+                                cursor: 'pointer',
+                                font: 'inherit',
+                                // Highlight (hover + keyboard) via a theme token, never a hex —
+                                // matching the frame rows above.
+                                background: isActive
+                                    ? 'var(--mol-color-surface-secondary, transparent)'
+                                    : 'transparent',
+                            }, children: [_jsx(Icon, { name: item.icon, size: 16, "aria-hidden": "true" }), _jsx("span", { style: { flex: 1 }, children: item.label }), item.checked && _jsx(Icon, { name: "check", size: 14, "aria-hidden": "true" })] }, item.id));
+                    })] }))] }));
+}
+DeviceFrameSelector.displayName = 'DeviceFrameSelector';
+//# sourceMappingURL=DeviceFrameSelector.js.map

package/dist/components/DeviceFrameSelector.js.map

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

package/dist/components/EditorPanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Code editor panel with tab bar and Monaco integration.
+ *
+ * @module
+ */
+import type { JSX } from 'react';
+import type { EditorPanelProps } from '../types.js';
+/**
+ * Code editor panel with tab bar and Monaco integration.
+ * @param props - Component props.
+ * @returns The rendered editor panel element.
+ */
+export declare function EditorPanel({ className, onActiveFileChange, onEditorReady, onTabsChange, fileStatuses, formattingFile, countdownFile, countdownKey, formatEstimate, onFixWithAI, onTabDoubleClick, }: EditorPanelProps): JSX.Element;
+export declare namespace EditorPanel {
+    var displayName: string;
+}
+//# sourceMappingURL=EditorPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorPanel.d.ts","sourceRoot":"","sources":["../../src/components/EditorPanel.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAShC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAsDnD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,YAAY,EACZ,cAAqB,EACrB,WAAW,EACX,gBAAgB,GACjB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiPhC;yBA7Pe,WAAW"}

package/dist/components/EditorPanel.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
+import { useEditor, useEditorProvider, useThemeMode, useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { useNarrowViewport } from '../hooks/useViewport.js';
+import { TabBar } from './TabBar.js';
+/**
+ * Editor option overrides applied while the viewport is phone-width: no minimap
+ * (it eats a third of a 390px pane), readable 14px type, wrap instead of
+ * horizontal scrolling (touch pans the page, not the editor), no scroll past the
+ * last line (vertical space is scarce), and no folding controls (a narrower
+ * gutter — folding is a pointer-precision affordance anyway).
+ */
+const MOBILE_EDITOR_CONFIG = {
+    fontSize: 14,
+    wordWrap: true,
+    minimap: false,
+    scrollBeyondLastLine: false,
+    folding: false,
+};
+/**
+ * Restore values for the {@link MOBILE_EDITOR_CONFIG} keys when the viewport
+ * widens and the provider cannot report its own config (`getConfig` is
+ * optional). Matches the stock provider defaults, so a host that didn't
+ * customize the editor gets its exact desktop behavior back.
+ */
+const DESKTOP_EDITOR_CONFIG_FALLBACK = {
+    fontSize: 12,
+    wordWrap: false,
+    minimap: true,
+    scrollBeyondLastLine: true,
+    folding: true,
+};
+/** Inject the countdown keyframes once. */
+let styleInjected = false;
+/** Injects CSS keyframes for the format countdown and toast animations. */
+function injectCountdownStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const style = document.createElement('style');
+    style.textContent = `
+    @keyframes mol-format-countdown {
+      from { width: 0%; }
+      to   { width: 100%; }
+    }
+    @keyframes mol-format-toast-grow {
+      from { width: 0%; }
+      to   { width: 100%; }
+    }
+  `;
+    document.head.appendChild(style);
+}
+/**
+ * Code editor panel with tab bar and Monaco integration.
+ * @param props - Component props.
+ * @returns The rendered editor panel element.
+ */
+export function EditorPanel({ className, onActiveFileChange, onEditorReady, onTabsChange, fileStatuses, formattingFile, countdownFile, countdownKey, formatEstimate = 2000, onFixWithAI, onTabDoubleClick, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const editorProvider = useEditorProvider();
+    const themeMode = useThemeMode();
+    const { tabs, activeFile, closeFile, setActiveTab, pinTab, mount, dispose } = useEditor();
+    const containerRef = useRef(null);
+    const mountedRef = useRef(false);
+    // Use a ref so onEditorReady never needs to be in the mount effect's dep array
+    const onEditorReadyRef = useRef(onEditorReady);
+    onEditorReadyRef.current = onEditorReady;
+    // Inject keyframes on first render
+    useEffect(() => {
+        injectCountdownStyle();
+    }, []);
+    // Sync Monaco editor theme with app theme mode — runs before mount too,
+    // so the stored config has the correct theme when the editor is created.
+    useEffect(() => {
+        editorProvider.updateConfig({ theme: themeMode === 'light' ? 'vs' : 'vs-dark' });
+    }, [themeMode, editorProvider]);
+    // Mobile-tuned editor options on phone-width viewports. Like the theme sync
+    // above, updateConfig persists into the provider's stored config, so this
+    // works whether it fires before or after mount (no remount, no layout in a
+    // zero-size container). A pure desktop session never enters either branch, so
+    // desktop behavior is untouched; on narrow→wide the captured baseline (the
+    // provider's own config when it can report it) is restored.
+    const isNarrow = useNarrowViewport();
+    const mobileBaselineRef = useRef(null);
+    useEffect(() => {
+        if (isNarrow) {
+            if (!mobileBaselineRef.current) {
+                const current = editorProvider.getConfig?.();
+                mobileBaselineRef.current = {
+                    fontSize: current?.fontSize ?? DESKTOP_EDITOR_CONFIG_FALLBACK.fontSize,
+                    wordWrap: current?.wordWrap ?? DESKTOP_EDITOR_CONFIG_FALLBACK.wordWrap,
+                    minimap: current?.minimap ?? DESKTOP_EDITOR_CONFIG_FALLBACK.minimap,
+                    scrollBeyondLastLine: current?.scrollBeyondLastLine ?? DESKTOP_EDITOR_CONFIG_FALLBACK.scrollBeyondLastLine,
+                    folding: current?.folding ?? DESKTOP_EDITOR_CONFIG_FALLBACK.folding,
+                };
+            }
+            editorProvider.updateConfig(MOBILE_EDITOR_CONFIG);
+        }
+        else if (mobileBaselineRef.current) {
+            editorProvider.updateConfig(mobileBaselineRef.current);
+            mobileBaselineRef.current = null;
+        }
+    }, [isNarrow, editorProvider]);
+    // Formatting toast: visible tracks whether the toast is in the DOM,
+    // animatingIn controls the CSS transition state (false = slide down / fade out).
+    const isFormatting = !!(formattingFile && formattingFile === activeFile);
+    const [visible, setVisible] = useState(false);
+    const [animatingIn, setAnimatingIn] = useState(false);
+    const hideTimerRef = useRef(null);
+    useEffect(() => {
+        if (isFormatting) {
+            // Show toast
+            if (hideTimerRef.current) {
+                clearTimeout(hideTimerRef.current);
+                hideTimerRef.current = null;
+            }
+            setVisible(true);
+            // Trigger enter animation on next frame so the transition fires
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setAnimatingIn(true);
+                });
+            });
+        }
+        else if (visible) {
+            // Start exit animation, then remove from DOM
+            setAnimatingIn(false);
+            hideTimerRef.current = setTimeout(() => {
+                setVisible(false);
+                hideTimerRef.current = null;
+            }, 300);
+        }
+    }, [isFormatting]);
+    // Countdown progress bar visible for the active file
+    const showCountdown = !!(countdownFile && countdownFile === activeFile);
+    // Wire Fix with AI callback — subscribe to the editor provider's onFixWithAI
+    const onFixWithAIRef = useRef(onFixWithAI);
+    onFixWithAIRef.current = onFixWithAI;
+    useEffect(() => {
+        if (!editorProvider.onFixWithAI)
+            return;
+        return editorProvider.onFixWithAI((request) => {
+            onFixWithAIRef.current?.(request);
+        });
+    }, [editorProvider]);
+    // Notify parent whenever the active file changes (tab switch, open, close)
+    useEffect(() => {
+        onActiveFileChange?.(activeFile);
+    }, [activeFile, onActiveFileChange]);
+    // Notify parent whenever the tab list changes (file opened or closed)
+    useEffect(() => {
+        onTabsChange?.(tabs.map((t) => t.path));
+    }, [tabs, onTabsChange]);
+    const handleTabSelect = useCallback((path) => {
+        setActiveTab(path);
+        onActiveFileChange?.(path);
+    }, [setActiveTab, onActiveFileChange]);
+    // Mount the editor when the container is ready
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || mountedRef.current)
+            return;
+        mountedRef.current = true;
+        const result = mount(container);
+        // Handle both sync and async mount
+        if (result && typeof result.then === 'function') {
+            ;
+            result
+                .then(() => {
+                onEditorReadyRef.current?.();
+            })
+                .catch(() => {
+                mountedRef.current = false;
+            });
+        }
+        else {
+            onEditorReadyRef.current?.();
+        }
+        return () => {
+            mountedRef.current = false;
+            dispose();
+        };
+    }, [mount, dispose]);
+    return (_jsxs("div", { className: cm.cn(cm.flex({ direction: 'col' }), cm.h('full'), cm.surface, cm.borderR, className), children: [_jsx(TabBar, { tabs: tabs, activeFile: activeFile, onSelect: handleTabSelect, onClose: closeFile, onDoubleClick: (path) => {
+                    if (onTabDoubleClick?.(path))
+                        return;
+                    pinTab(path);
+                }, fileStatuses: fileStatuses }), _jsxs("div", { style: {
+                    flex: 1,
+                    minHeight: 0,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: [_jsx("div", { ref: containerRef, style: {
+                            width: '100%',
+                            height: '100%',
+                            overflow: 'hidden',
+                            visibility: tabs.length === 0 ? 'hidden' : 'visible',
+                        } }), showCountdown && (_jsx("div", { style: {
+                            position: 'absolute',
+                            bottom: 0,
+                            left: 0,
+                            height: 2,
+                            backgroundColor: 'var(--mol-color-primary, #4070e0)',
+                            zIndex: 1000,
+                            pointerEvents: 'none',
+                            animation: 'mol-format-countdown 700ms linear forwards',
+                        } }, countdownKey)), visible && (_jsxs("div", { style: {
+                            position: 'absolute',
+                            bottom: 12,
+                            right: 16,
+                            padding: '6px 12px',
+                            fontSize: 13,
+                            lineHeight: '22px',
+                            backgroundColor: 'var(--color-surface, #151515)',
+                            color: 'inherit',
+                            border: '1px solid rgba(128, 128, 128, 0.15)',
+                            borderRadius: 6,
+                            overflow: 'hidden',
+                            backdropFilter: 'blur(8px)',
+                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+                            zIndex: 1000,
+                            pointerEvents: 'none',
+                            transform: animatingIn ? 'translateY(0)' : 'translateY(8px)',
+                            opacity: animatingIn ? 1 : 0,
+                            transition: 'transform 200ms ease-out, opacity 200ms ease-out',
+                        }, children: [t('ide.formatting', undefined, { defaultValue: 'Formatting…' }), _jsx("div", { style: {
+                                    position: 'absolute',
+                                    bottom: 0,
+                                    left: 0,
+                                    height: 2,
+                                    backgroundColor: 'var(--mol-color-primary, #4070e0)',
+                                    animation: `mol-format-toast-grow ${formatEstimate}ms linear forwards`,
+                                } })] }))] })] }));
+}
+EditorPanel.displayName = 'EditorPanel';
+//# sourceMappingURL=EditorPanel.js.map