@forgeax/interface 0.4.1

package/dist/package/node/components/ErrorBoundary.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { t } from '../i18n/index.js';
+import { reportError } from '../lib/aegis.js';
+/**
+ * RecoveryBoundary — a React error boundary with explicit recovery exits.
+ *
+ * A render throw anywhere in the subtree (a bad store selector, a plugin panel)
+ * used to leave the shell stuck on a dead error page forever — fatal in the
+ * Tauri desktop form, which has no address bar to reload from. This catches the
+ * throw and offers three exits:
+ *
+ *   - 重试      — clears the error and re-renders the SAME element tree. Cheapest
+ *                 recovery; works when the throw was a transient state glitch.
+ *   - 重载此区域 — bumps a key so the children subtree fully remounts (fresh
+ *                 component state), without reloading the whole window.
+ *   - 重新加载 Studio — window.location.reload(); last resort, and the ONLY exit
+ *                 a desktop (.app) user has since there's no browser chrome.
+ *
+ * This complements (does not overlap) the T2 iframe fatal banner: that one
+ * handles failures *inside* the cross-origin engine iframe (device-lost / scene
+ * instantiate); THIS one handles the shell's own React render crashing. The two
+ * are different documents — a React boundary cannot see an iframe throw, and the
+ * banner cannot see a shell render throw.
+ *
+ * Kept exported as both `RecoveryBoundary` (new name) and `ErrorBoundary`
+ * (back-compat alias) so existing call sites need no churn.
+ */
+export class RecoveryBoundary extends Component {
+    state = { error: null, info: null, remountKey: 0 };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        this.setState({ error, info });
+        // React swallows render throws before they reach window.onerror, so Aegis'
+        // auto JS-error capture never sees them — report explicitly. No-op unless
+        // monitoring is configured + live.
+        reportError(error, info.componentStack, this.props.scope);
+        // Tear down the boot splash so the error is visible (it otherwise sits on
+        // top of this fallback). Lossy by contract — ignored if absent.
+        try {
+            window.__forgeaxBoot?.done();
+        }
+        catch {
+            /* no-op */
+        }
+        // eslint-disable-next-line no-console
+        console.error(`[RecoveryBoundary${this.props.scope ? ` · ${this.props.scope}` : ''}]`, error, info.componentStack);
+    }
+    /** 重试 — clear the error, re-render the same subtree (no remount). */
+    retry = () => {
+        this.setState({ error: null, info: null });
+    };
+    /** 重载此区域 — clear the error AND bump the remount key so the subtree
+     *  remounts with fresh component state. */
+    remountSubtree = () => {
+        this.setState((s) => ({ error: null, info: null, remountKey: s.remountKey + 1 }));
+    };
+    /** 重新加载 Studio — hard reload of the whole window. */
+    reloadWindow = () => {
+        try {
+            window.location.reload();
+        }
+        catch {
+            /* no-op */
+        }
+    };
+    render() {
+        const { error, info, remountKey } = this.state;
+        const { scope, fullscreen = true } = this.props;
+        if (!error) {
+            // `key` forces a remount of the entire subtree when remountSubtree() bumps it.
+            return _jsx(RemountScope, { children: this.props.children }, remountKey);
+        }
+        const btn = (label, onClick, primary = false) => (_jsx("button", { type: "button", onClick: onClick, style: {
+                font: '12px/1.4 ui-sans-serif, system-ui, sans-serif',
+                padding: '6px 14px',
+                borderRadius: 6,
+                cursor: 'pointer',
+                border: '1px solid var(--fx-border, #333)',
+                background: primary ? 'var(--fx-accent, #4f7cff)' : 'var(--fx-bg-elev2, #1d1d1d)',
+                color: primary ? '#fff' : 'var(--fx-fg, #eee)',
+            }, children: label }));
+        const exits = (_jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', margin: '0 0 16px' }, children: [btn(t('errorBoundary.retry'), this.retry, true), btn(t('errorBoundary.reloadRegion'), this.remountSubtree), btn(t('errorBoundary.reloadStudio'), this.reloadWindow)] }));
+        if (!fullscreen) {
+            // Compact inline panel for region-scoped boundaries — keeps the rest of
+            // the shell alive; only this dock region shows the recovery affordance.
+            return (_jsxs("div", { role: "alert", style: {
+                    height: '100%',
+                    overflow: 'auto',
+                    padding: 16,
+                    background: 'var(--fx-bg, #0d0d0d)',
+                    color: 'var(--fx-fg, #fff)',
+                    font: '12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace',
+                }, children: [_jsxs("div", { style: { fontWeight: 600, color: 'var(--fx-danger, #f87171)', marginBottom: 6 }, children: [t('errorBoundary.panelRenderError'), scope ? ` · ${scope}` : ''] }), _jsx("p", { style: { margin: '0 0 12px', color: 'var(--fx-fg-muted, #aaa)' }, children: t('errorBoundary.panelHint') }), exits, _jsx("pre", { style: {
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                            padding: 12,
+                            borderRadius: 6,
+                            border: '1px solid var(--fx-border, #333)',
+                            background: 'var(--fx-bg-elev2, #161616)',
+                            color: 'var(--fx-danger, #f87171)',
+                        }, children: error.message })] }));
+        }
+        return (_jsxs("div", { role: "alert", style: {
+                position: 'fixed',
+                inset: 0,
+                zIndex: 'var(--z-toplevel)',
+                overflow: 'auto',
+                padding: '32px',
+                background: 'var(--fx-bg, #0d0d0d)',
+                color: 'var(--fx-fg, #fff)',
+                font: '13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace',
+            }, children: [_jsxs("h1", { style: { margin: '0 0 8px', fontSize: 18, color: 'var(--fx-danger, #f87171)' }, children: [t('errorBoundary.fullscreenTitle'), scope ? ` · ${scope}` : ''] }), _jsx("p", { style: { margin: '0 0 16px', color: 'var(--fx-fg-muted, #aaa)' }, children: t('errorBoundary.fullscreenHint') }), exits, _jsxs("pre", { style: {
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        padding: 16,
+                        borderRadius: 8,
+                        border: '1px solid var(--fx-border, #333)',
+                        background: 'var(--fx-bg-elev2, #161616)',
+                        color: 'var(--fx-danger, #f87171)',
+                    }, children: [error.message, '\n\n', error.stack, info?.componentStack ? `\n\n--- component stack ---${info.componentStack}` : ''] })] }));
+    }
+}
+/** Transparent wrapper whose only job is to carry the remount `key`. */
+function RemountScope({ children }) {
+    return children;
+}
+/** Back-compat alias — existing imports use `ErrorBoundary`. */
+export const ErrorBoundary = RecoveryBoundary;

package/dist/package/node/components/ExtensionHost/ExtensionIframeHost.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { installWindowMessageObservation } from '@forgeax/app-shell/react';
+import { getLocale, subscribeLocale } from '../../i18n/index.js';
+import { useHost } from '../../core/app-shell/index.js';
+import { requestComposerInsert } from '../../lib/composer-bridge.js';
+import { removeExtensionSurfaces, upsertSurface } from '../../lib/surface-store.js';
+import { usePanelRenderers, } from '../DockShell/panelRenderers.js';
+import { attachExtensionEditorAssetImportBridge } from '../DockShell/extension-editor-bridge.js';
+// The Content Browser lives in the global footer under this id (see
+// DockShell footer contribution registry (GLOBAL_FOOTER_EXTRA_IDS).
+const CONTENT_BROWSER_PANEL_ID = 'ep:assets';
+// Sanitize an untrusted iframe payload into the neutral reveal contract. A
+// target without an identity is dropped (the Content Browser would no-op).
+function revealTargetFromMessage(raw) {
+    if (!raw || typeof raw !== 'object')
+        return null;
+    const r = raw;
+    const str = (v) => typeof v === 'string' && v.trim() ? v.trim() : undefined;
+    const path = str(r.path);
+    const guid = str(r.guid);
+    if (!path && !guid)
+        return null;
+    const packPath = str(r.packPath);
+    const assetKind = str(r.assetKind);
+    const name = str(r.name);
+    return {
+        ...(guid ? { guid } : {}),
+        ...(path ? { path, pathKind: r.pathKind === 'dir' ? 'dir' : 'file' } : {}),
+        ...(packPath ? { packPath } : {}),
+        ...(assetKind ? { assetKind } : {}),
+        ...(name ? { name } : {}),
+    };
+}
+export function ExtensionIframeHost({ extensionId, src, allowedOrigin, pane, active = true, onNavigate, onChatPost, onEditorAssetImport, onToolCall, loadErrorText, }) {
+    const { extensionTransport } = usePanelRenderers();
+    const host = useHost();
+    const createExtensionPort = extensionTransport?.createExtensionPort;
+    const createWindowTransport = extensionTransport?.createWindowTransport;
+    const iframeRef = useRef(null);
+    const [error, setError] = useState(null);
+    const portRef = useRef(null);
+    const activeRef = useRef(active);
+    const messageOrigin = allowedOrigin ?? new URL(src, window.location.href).origin;
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe || !src)
+            return;
+        if (!createExtensionPort || !createWindowTransport)
+            return;
+        let port = null;
+        const onRawMessage = (ev) => {
+            if (ev.source !== iframe.contentWindow)
+                return;
+            if (ev.origin !== messageOrigin) {
+                return;
+            }
+            const d = ev.data;
+            if (!d)
+                return;
+            if (d.type === 'FORGEAX_NAVIGATE' && d.targetPluginId) {
+                onNavigate?.(d.targetPluginId, d.payload);
+                return;
+            }
+            // Plugin → host chat composer prefill (e.g. page-video-game「添加到对话」).
+            // Prefills the caret without auto-sending; the author reviews then sends.
+            if (d.type === 'FORGEAX_COMPOSER_INSERT' && typeof d.text === 'string' && d.text.trim()) {
+                const text = d.text.trim();
+                requestComposerInsert({
+                    kind: 'paste',
+                    display: text.length > 48 ? `${text.slice(0, 48)}…` : text,
+                    detail: text,
+                    tooltip: {
+                        title: text.length > 64 ? `${text.slice(0, 64)}…` : text,
+                        lines: [text.length > 200 ? `${text.slice(0, 200)}…` : text],
+                    },
+                });
+                return;
+            }
+            // Plugin → host "locate this file in the Content Browser". Mirrors the
+            // editor page tab's locate action: reveal the footer panel first (it may be
+            // a collapsed drawer), then hand the target to whichever Content Browser is
+            // mounted over the neutral bus. The double rAF gives a freshly-expanded
+            // drawer a frame to mount + subscribe before the target arrives.
+            if (d.type === 'FORGEAX_CONTENT_BROWSER_REVEAL') {
+                const target = revealTargetFromMessage(d.target);
+                if (!target)
+                    return;
+                void host.commands
+                    .execute('app.panel.reveal', { id: CONTENT_BROWSER_PANEL_ID })
+                    .catch(() => { })
+                    .finally(() => {
+                    requestAnimationFrame(() => requestAnimationFrame(() => {
+                        host.bus.emit('content-browser:reveal', { target });
+                    }));
+                });
+                return;
+            }
+        };
+        const disposeWindowMessageObservation = installWindowMessageObservation({
+            onMessage: onRawMessage,
+        });
+        const detachEditorAssetImportBridge = attachExtensionEditorAssetImportBridge({
+            ownerWindow: window,
+            frameWindow: () => iframe.contentWindow,
+            importAssetSource: onEditorAssetImport,
+            isTrustedEvent: (event) => event.origin === messageOrigin,
+        });
+        const onLoad = () => {
+            const win = iframe.contentWindow;
+            if (!win) {
+                setError('iframe contentWindow unavailable');
+                return;
+            }
+            const transport = createWindowTransport({
+                target: win,
+                targetOrigin: messageOrigin,
+                expectedOrigin: messageOrigin,
+                expectedSource: () => iframe.contentWindow,
+            });
+            port = createExtensionPort({
+                extensionId,
+                transport,
+                initial: {
+                    locale: getLocale(),
+                    theme: 'dark',
+                    pane: pane ?? 'center',
+                },
+                onInvalid: (_, reason) => {
+                    if (import.meta.env.DEV) {
+                        // eslint-disable-next-line no-console
+                        console.warn('[ExtensionIframeHost] invalid envelope:', reason);
+                    }
+                },
+            });
+            if (onChatPost)
+                port.onChat(onChatPost);
+            if (onToolCall)
+                port.onToolCall(onToolCall);
+            port.surface.subscribe((s) => {
+                upsertSurface({
+                    extensionId,
+                    surfaceId: s.surfaceId,
+                    actions: s.actions,
+                    snapshot: s.snapshot,
+                    updatedAt: Date.now(),
+                });
+            });
+            if (onNavigate)
+                port.onNavigate((e) => onNavigate(e.targetPluginId, e.payload));
+            portRef.current = port;
+            port.setVisibility(activeRef.current);
+        };
+        iframe.addEventListener('load', onLoad);
+        return () => {
+            iframe.removeEventListener('load', onLoad);
+            disposeWindowMessageObservation();
+            detachEditorAssetImportBridge();
+            port?.close();
+            portRef.current = null;
+            removeExtensionSurfaces(extensionId);
+        };
+    }, [extensionId, src, messageOrigin, pane, createExtensionPort, createWindowTransport, onNavigate, onChatPost, onToolCall, onEditorAssetImport, host]);
+    useEffect(() => {
+        activeRef.current = active;
+        portRef.current?.setVisibility(active);
+    }, [active]);
+    // Host locale → keep-alive plugin iframes (SDK theme.changed + legacy postMessage).
+    useEffect(() => {
+        return subscribeLocale((loc) => {
+            portRef.current?.setTheme({ locale: loc });
+            const win = iframeRef.current?.contentWindow;
+            if (win) {
+                win.postMessage({ type: 'forgeax:locale-changed', locale: loc }, messageOrigin);
+            }
+        });
+    }, [messageOrigin]);
+    return (_jsxs("div", { className: "page-plugin-iframe-wrap", "data-active": active ? 'true' : 'false', style: active ? undefined : { visibility: 'hidden', pointerEvents: 'none' }, "aria-hidden": active ? undefined : true, children: [error ? _jsx("div", { style: { padding: 20, color: '#c44' }, children: loadErrorText(error) }) : null, _jsx("iframe", { ref: iframeRef, src: src, title: extensionId, style: { width: '100%', height: '100%', border: 0, display: 'block' }, sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads" })] }));
+}

package/dist/package/node/components/ExtensionHost/NativeExtensionHost.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { getLocale, subscribeLocale } from '../../i18n/index.js';
+import { removeExtensionSurfaces, upsertSurface } from '../../lib/surface-store.js';
+function moduleSpecifier(moduleUrl, generation) {
+    const url = new URL(moduleUrl, window.location.href);
+    url.searchParams.set('fxg', String(generation));
+    return url.href;
+}
+export function NativeExtensionHost({ extensionId, moduleUrl, allowedOrigin, generation, active = true, onChatPost, }) {
+    const containerRef = useRef(null);
+    const activeRef = useRef(active);
+    const visibilitySubscribers = useRef(new Set());
+    const themeSubscribers = useRef(new Set());
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        activeRef.current = active;
+        for (const subscriber of visibilitySubscribers.current)
+            subscriber({ visible: active });
+    }, [active]);
+    useEffect(() => subscribeLocale((locale) => {
+        for (const subscriber of themeSubscribers.current)
+            subscriber({ locale, theme: 'dark' });
+    }), []);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        let disposed = false;
+        const effects = [];
+        let view;
+        let viewRoot = container;
+        let closed = false;
+        const disposeEffects = async () => {
+            closed = true;
+            const errors = [];
+            while (effects.length) {
+                try {
+                    await effects.pop()?.();
+                }
+                catch (cause) {
+                    errors.push(cause);
+                }
+            }
+            view?.dispose();
+            view = undefined;
+            viewRoot = container;
+            removeExtensionSurfaces(extensionId);
+            visibilitySubscribers.current.clear();
+            themeSubscribers.current.clear();
+            if (errors.length)
+                console.error('[NativeExtensionHost] cleanup failed', new AggregateError(errors));
+        };
+        const activate = async () => {
+            try {
+                const expectedOrigin = allowedOrigin ?? window.location.origin;
+                const parsedModuleUrl = new URL(moduleUrl, window.location.href);
+                if (parsedModuleUrl.origin !== expectedOrigin || new URL(expectedOrigin).origin !== expectedOrigin) {
+                    throw new Error('moduleUrl does not match the registered allowedOrigin');
+                }
+                const loaded = await import(/* @vite-ignore */ moduleSpecifier(moduleUrl, generation));
+                if (disposed)
+                    return;
+                if (!loaded.extension || typeof loaded.extension.apply !== 'function') {
+                    throw new Error('extension module does not export extension.apply');
+                }
+                if (typeof loaded.createView !== 'function') {
+                    throw new Error('extension artifact does not provide its standard view renderer');
+                }
+                view = loaded.createView(container);
+                viewRoot = view.root ?? container;
+                const dispatchSubscribers = new Set();
+                const flashSubscribers = new Set();
+                const host = {
+                    async handshake() { return { protocol: 1, mode: 'platform', extensionId }; },
+                    chat: { post: (text, attachments) => onChatPost?.({ text, attachments: attachments ? [...attachments] : undefined }) },
+                    surface: {
+                        expose(surfaceId, payload) {
+                            upsertSurface({
+                                extensionId,
+                                surfaceId,
+                                actions: payload.actions,
+                                snapshot: payload.snapshot,
+                                updatedAt: Date.now(),
+                            });
+                        },
+                        onDispatch(handler) { dispatchSubscribers.add(handler); return () => { dispatchSubscribers.delete(handler); }; },
+                    },
+                    theme: {
+                        subscribe(handler) {
+                            themeSubscribers.current.add(handler);
+                            handler({ locale: getLocale(), theme: 'dark' });
+                            return () => { themeSubscribers.current.delete(handler); };
+                        },
+                    },
+                    visibility: {
+                        subscribe(handler) {
+                            visibilitySubscribers.current.add(handler);
+                            handler({ visible: activeRef.current });
+                            return () => { visibilitySubscribers.current.delete(handler); };
+                        },
+                    },
+                    ui: {
+                        flashElement(target, durationMs = 1000) {
+                            const element = typeof target === 'string' ? viewRoot.querySelector(target) : target;
+                            element?.classList.add('forgeax-host-flash');
+                            if (element)
+                                setTimeout(() => element.classList.remove('forgeax-host-flash'), durationMs);
+                        },
+                        onFlash(handler) { flashSubscribers.add(handler); return () => { flashSubscribers.delete(handler); }; },
+                    },
+                    close() { closed = true; dispatchSubscribers.clear(); flashSubscribers.clear(); },
+                };
+                const services = new Map([['host', host], ['view', view]]);
+                const missing = loaded.extension.inject?.filter((name) => !services.has(name)) ?? [];
+                if (missing.length)
+                    throw new Error(`extension requires unavailable services: ${missing.join(', ')}`);
+                const context = {
+                    effect(setup) {
+                        if (closed || disposed)
+                            throw new Error('cannot register an effect after deactivation');
+                        const cleanup = setup();
+                        if (cleanup)
+                            effects.push(cleanup);
+                    },
+                    get: (name) => services.get(name),
+                    logger: (name) => ({
+                        debug: (message, ...details) => console.debug(`[${extensionId}:${name}] ${message}`, ...details),
+                        info: (message, ...details) => console.info(`[${extensionId}:${name}] ${message}`, ...details),
+                        warn: (message, ...details) => console.warn(`[${extensionId}:${name}] ${message}`, ...details),
+                        error: (message, ...details) => console.error(`[${extensionId}:${name}] ${message}`, ...details),
+                    }),
+                };
+                await loaded.extension.apply(context, {});
+                if (disposed)
+                    await disposeEffects();
+            }
+            catch (cause) {
+                await disposeEffects();
+                if (!disposed)
+                    setError(cause instanceof Error ? cause.message : String(cause));
+            }
+        };
+        setError(null);
+        void activate();
+        return () => {
+            disposed = true;
+            void disposeEffects();
+        };
+    }, [allowedOrigin, extensionId, generation, moduleUrl, onChatPost]);
+    return (_jsxs("div", { className: "page-plugin-iframe-wrap", "data-active": active ? 'true' : 'false', children: [error ? _jsx("div", { role: "alert", style: { padding: 20, color: '#c44' }, children: error }) : null, _jsx("div", { ref: containerRef, style: { width: '100%', height: '100%' } })] }));
+}

package/dist/package/node/components/Feedback/FeedbackPanel.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FeedbackPanel — 「写反馈 / 我的反馈」两页签面板。
+ *
+ * 视觉 SSOT: docs/features/feedback-prototype/img04.png(写反馈)、
+ * img06.png(截图缩略图)、img07.png(提交成功)、img08.png(我的反馈)。
+ */
+import { useRef, useState } from 'react';
+import { Camera, Check, Copy, ExternalLink, Loader2, Megaphone, MessageCircle, RotateCcw, X, ZoomIn, ZoomOut, } from 'lucide-react';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog.js';
+import { useTranslation } from '../../i18n/index.js';
+import { captureUiScreenshot } from '../../lib/ui-screenshot.js';
+import { useFeedbackStore } from './store.js';
+
+const TYPE_KEYS = ['stuck', 'wrong', 'slow', 'ui', 'idea', 'other'];
+function FeedbackHeader() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    return (_jsxs("header", { className: "feedback-header", children: [_jsxs("div", { className: "feedback-header__brand", children: [_jsx("span", { className: "feedback-header__icon", "aria-hidden": "true", children: _jsx(Megaphone, { size: 16, strokeWidth: 2.25 }) }), _jsx(DialogTitle, { className: "feedback-header__title", children: t('feedback.panel.title') })] }), _jsxs("div", { className: "feedback-header__actions", children: [_jsx("button", { type: "button", className: `feedback-tab${s.tab === 'write' ? ' is-active' : ''}`, onClick: () => s.setTab('write'), children: t('feedback.panel.write') }), _jsxs("button", { type: "button", className: `feedback-tab${s.tab === 'mine' ? ' is-active' : ''}`, onClick: () => s.setTab('mine'), children: [t('feedback.panel.mine'), s.reports.length > 0 && _jsx("span", { className: "feedback-tab__count", children: s.reports.length })] }), _jsx("button", { type: "button", className: "feedback-header__close", "aria-label": t('common.close'), title: t('common.close'), onClick: () => s.closePanel(), children: _jsx(X, { size: 15, strokeWidth: 2 }) })] })] }));
+}
+function WriteTab() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    const fileRef = useRef(null);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [previewScale, setPreviewScale] = useState(1);
+    const hasSnapshot = s.screenshots.some((shot) => shot.kind === 'snapshot');
+    const openPreview = (url) => {
+        setPreviewScale(1);
+        setPreviewUrl(url);
+    };
+    const closePreview = () => {
+        setPreviewUrl(null);
+        setPreviewScale(1);
+    };
+    const addSnapshot = async () => {
+        const shot = await captureUiScreenshot({ target: 'app' });
+        if (shot.captured === false)
+            return;
+        const ok = shot;
+        if (ok.dataUrl)
+            s.addScreenshot({ previewUrl: ok.dataUrl, ref: ok.dataUrl, kind: 'snapshot' });
+    };
+    const onUpload = (files) => {
+        if (!files)
+            return;
+        for (const file of Array.from(files)) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const url = String(reader.result ?? '');
+                if (url)
+                    s.addScreenshot({ previewUrl: url, ref: url, kind: 'upload' });
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    if (s.lastSubmitted)
+        return _jsx(SuccessView, {});
+    return (_jsxs("section", { className: "feedback-write", children: [_jsxs("div", { className: "feedback-form", children: [_jsxs("fieldset", { className: "feedback-fieldset", children: [_jsx("legend", { className: "feedback-label", children: t('feedback.form.type') }), _jsx("div", { className: "feedback-types", children: TYPE_KEYS.map((type) => (_jsx("button", { type: "button", className: `feedback-type${s.type === type ? ' is-active' : ''}`, onClick: () => s.setType(type), children: t(`feedback.types.${type}`) }, type))) })] }), _jsxs("label", { className: "feedback-field", children: [_jsxs("span", { className: "feedback-label", children: [t('feedback.form.description'), _jsx("span", { className: "feedback-required", children: "*" })] }), _jsx("textarea", { value: s.description, onChange: (event) => s.setDescription(event.target.value), placeholder: t('feedback.form.descriptionPh'), className: "feedback-textarea" })] }), _jsxs("div", { className: "feedback-field", children: [_jsxs("span", { className: "feedback-label feedback-label--muted", children: [t('feedback.form.screenshots'), _jsx("span", { children: t('feedback.form.screenshotLimit') })] }), _jsxs("div", { className: "feedback-shots", children: [s.screenshots.map((shot, index) => (_jsxs("div", { className: "feedback-shot", children: [_jsxs("button", { type: "button", className: "feedback-shot__preview", "aria-label": t('feedback.form.previewScreenshot'), title: t('feedback.form.previewScreenshot'), onClick: () => openPreview(shot.previewUrl), children: [_jsx("img", { src: shot.previewUrl, alt: "" }), _jsx("span", { className: "feedback-shot__zoom", "aria-hidden": "true", children: _jsx(ZoomIn, { size: 18, strokeWidth: 2 }) })] }), _jsx("button", { type: "button", className: "feedback-shot__remove", "aria-label": t('feedback.form.removeScreenshot'), title: t('feedback.form.removeScreenshot'), onClick: () => s.removeScreenshot(index), children: _jsx(X, { size: 14, strokeWidth: 2.4 }) })] }, `${shot.kind}-${index}`))), !hasSnapshot && s.screenshots.length < 5 && (_jsx("button", { type: "button", className: "feedback-shot feedback-shot--action", "aria-label": t('feedback.form.snapshot'), title: t('feedback.form.snapshot'), onClick: () => void addSnapshot(), children: _jsx(Camera, { size: 20, strokeWidth: 1.8 }) })), s.screenshots.length < 5 && (_jsx("button", { type: "button", className: "feedback-shot feedback-shot--action feedback-shot--add", "aria-label": t('feedback.form.upload'), title: t('feedback.form.upload'), onClick: () => fileRef.current?.click(), children: _jsx("span", { "aria-hidden": "true", children: "+" }) })), _jsx("input", { ref: fileRef, type: "file", accept: "image/*", multiple: true, hidden: true, onChange: (event) => {
+                                            onUpload(event.target.files);
+                                            event.target.value = '';
+                                        } })] })] }), _jsx(Dialog, { open: previewUrl !== null, onOpenChange: (open) => !open && closePreview(), children: _jsxs(DialogContent, { hideClose: true, className: "feedback-preview-dialog", children: [_jsx(DialogTitle, { className: "sr-only", children: t('feedback.form.previewScreenshot') }), _jsxs("div", { className: "feedback-preview__toolbar", children: [_jsx("button", { type: "button", "aria-label": t('feedback.form.zoomOut'), title: t('feedback.form.zoomOut'), disabled: previewScale <= 1, onClick: () => setPreviewScale((scale) => Math.max(1, scale - 0.5)), children: _jsx(ZoomOut, { size: 17, strokeWidth: 2 }) }), _jsxs("span", { children: [Math.round(previewScale * 100), "%"] }), _jsx("button", { type: "button", "aria-label": t('feedback.form.zoomIn'), title: t('feedback.form.zoomIn'), disabled: previewScale >= 3, onClick: () => setPreviewScale((scale) => Math.min(3, scale + 0.5)), children: _jsx(ZoomIn, { size: 17, strokeWidth: 2 }) }), _jsx("button", { type: "button", "aria-label": t('feedback.form.resetZoom'), title: t('feedback.form.resetZoom'), disabled: previewScale === 1, onClick: () => setPreviewScale(1), children: _jsx(RotateCcw, { size: 16, strokeWidth: 2 }) })] }), _jsx("div", { className: "feedback-preview__viewport", children: _jsx("div", { className: "feedback-preview__stage", style: { width: `${previewScale * 100}%`, height: `${previewScale * 100}%` }, children: previewUrl && (_jsx("img", { src: previewUrl, alt: t('feedback.form.previewScreenshot'), style: {
+                                                maxWidth: `${100 / previewScale}%`,
+                                                maxHeight: `${100 / previewScale}%`,
+                                                transform: `scale(${previewScale})`,
+                                            } })) }) }), _jsx("button", { type: "button", className: "feedback-preview__close", "aria-label": t('common.close'), title: t('common.close'), onClick: closePreview, children: _jsx(X, { size: 18, strokeWidth: 2 }) })] }) }), _jsxs("label", { className: "feedback-field", children: [_jsxs("span", { className: "feedback-label", children: [t('feedback.form.email'), _jsx("span", { className: "feedback-required", children: "*" })] }), _jsx("input", { type: "email", required: true, value: s.email, onChange: (event) => s.setEmail(event.target.value), placeholder: t('feedback.form.emailPh'), className: "feedback-input" })] }), s.submitError && !['description-required', 'email-required'].includes(s.submitError) && (_jsx("p", { className: "feedback-error", children: s.submitError }))] }), _jsxs("footer", { className: "feedback-footer", children: [_jsx("button", { type: "button", className: "feedback-button feedback-button--secondary", onClick: () => s.closePanel(), children: t('feedback.form.cancel') }), _jsxs("button", { type: "button", className: "feedback-button feedback-button--primary", disabled: !s.description.trim() || !s.email.trim() || s.submitting, onClick: () => void s.submit(), children: [s.submitting && _jsx(Loader2, { size: 14, className: "feedback-spinner" }), t('feedback.form.submit')] })] })] }));
+}
+function SuccessView() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    if (!s.lastSubmitted)
+        return null;
+    return (_jsxs("section", { className: "feedback-success", children: [_jsxs("div", { className: "feedback-success__body", children: [_jsx("div", { className: "feedback-success__mark", "aria-hidden": "true", children: _jsx(Check, { size: 32, strokeWidth: 2.5 }) }), _jsx("h3", { children: t('feedback.success.title') }), _jsx("p", { className: "feedback-success__subtitle", children: t('feedback.success.body') }), _jsxs("div", { className: "feedback-success__receipt", children: [_jsxs("div", { children: [_jsx("span", { children: t('feedback.success.id') }), _jsx("strong", { children: s.lastSubmitted.id })] }), _jsx("button", { type: "button", "aria-label": t('feedback.success.copy'), title: t('feedback.success.copy'), onClick: () => void navigator.clipboard.writeText(s.lastSubmitted.id), children: _jsx(Copy, { size: 16 }) })] }), _jsx("div", { className: "feedback-success__divider" }), _jsx("p", { className: "feedback-success__guide", children: t('feedback.success.guide') })] }), _jsxs("footer", { className: "feedback-footer", children: [_jsx("button", { type: "button", className: "feedback-button feedback-button--secondary", onClick: () => {
+                            s.resetDraft();
+                            s.setTab('mine');
+                        }, children: t('feedback.success.viewMine') }), _jsx("button", { type: "button", className: "feedback-button feedback-button--primary", onClick: () => {
+                            s.resetDraft();
+                            s.closePanel();
+                        }, children: t('feedback.success.ok') })] })] }));
+}
+function reportTitle(report, t) {
+    return report.source === 'auto' ? t('feedback.mine.autoTitle') : t(`feedback.types.${report.type}`);
+}
+function deliveryLabel(report) {
+    const status = report.delivery?.status;
+    if (!status)
+        return 'local';
+    if (status === 'published')
+        return 'published';
+    if (status === 'failed')
+        return 'failed';
+    if (status === 'queued')
+        return 'queued';
+    return 'working';
+}
+function MineTab() {
+    const { t } = useTranslation();
+    const s = useFeedbackStore();
+    let content;
+    if (s.loading) {
+        content = _jsx(Loader2, { size: 18, className: "feedback-spinner feedback-mine__loader" });
+    }
+    else if (s.reports.length === 0) {
+        content = _jsx("p", { className: "feedback-mine__empty", children: t('feedback.mine.empty') });
+    }
+    else {
+        content = s.reports.map((report) => {
+            const canConfirm = report.status === 'pending-confirm' && !!report.email;
+            return (_jsxs("article", { className: "feedback-report", children: [_jsxs("div", { className: "feedback-report__headline", children: [_jsx("h3", { children: reportTitle(report, t) }), _jsx("span", { className: `feedback-status feedback-status--${report.status}`, children: t(`feedback.status.${report.status}`) })] }), report.description && _jsx("p", { className: "feedback-report__description", children: report.description }), _jsxs("p", { className: "feedback-report__meta", children: [_jsxs("span", { children: [t('feedback.mine.id'), " ", report.id] }), _jsx("i", { children: "\u00B7" }), _jsxs("span", { children: [t('feedback.mine.updated'), " ", new Date(report.updatedAt).toLocaleString()] }), _jsx("i", { children: "\u00B7" }), _jsx("span", { className: `feedback-delivery feedback-delivery--${deliveryLabel(report)}`, children: t(`feedback.delivery.${deliveryLabel(report)}`) }), report.delivery?.issueUrl && (_jsx("a", { className: "feedback-report__issue-link", href: report.delivery.issueUrl, target: "_blank", rel: "noreferrer", "aria-label": t('feedback.delivery.openIssue'), title: t('feedback.delivery.openIssue'), children: _jsx(ExternalLink, { size: 13, strokeWidth: 1.8 }) }))] }), _jsxs("div", { className: "feedback-report__progress", children: [_jsx(MessageCircle, { size: 16, strokeWidth: 1.8 }), _jsx("span", { children: t(`feedback.statusHint.${report.status}`) })] }), canConfirm && (_jsxs("div", { className: "feedback-report__actions", children: [_jsx("button", { type: "button", className: "feedback-button feedback-button--primary feedback-button--compact", onClick: () => void s.setStatus(report.id, 'resolved'), children: t('feedback.actions.resolved') }), _jsx("button", { type: "button", className: "feedback-button feedback-button--secondary feedback-button--compact", onClick: () => void s.setStatus(report.id, 'processing'), children: t('feedback.actions.stillBroken') })] }))] }, report.id));
+        });
+    }
+    return (_jsxs("section", { className: "feedback-mine", children: [_jsx("div", { className: "feedback-mine__body", children: content }), _jsx("footer", { className: "feedback-footer", children: _jsx("button", { type: "button", className: "feedback-button feedback-button--primary", onClick: () => s.closePanel(), children: t('common.close') }) })] }));
+}
+export function FeedbackPanel() {
+    const s = useFeedbackStore();
+    const brand = 'var(--color-brand-primary)';
+    return (_jsx(Dialog, { open: s.open, onOpenChange: (open) => (open ? s.openPanel() : s.closePanel()), children: _jsxs(DialogContent, { hideClose: true, className: "feedback-dialog", children: [_jsx(FeedbackHeader, {}), s.tab === 'write' ? _jsx(WriteTab, {}) : _jsx(MineTab, {})] }) }));
+}