@rose42/t3-feedback 0.1.0

package/dist/client/ui/host.d.ts

@@ -0,0 +1,112 @@
+import type { BurstFrame, CaptureFrameBurstOptions, ElementTarget } from "@rose42/feedback-capture";
+import type { FeedbackReportType } from "../reportType.js";
+import { type SelectScreenshotRegionOptions, type SelectScreenshotRegionResult } from "../cropScreenshot.js";
+import { type SelectBurstFramesOptions } from "../selectBurstFrames.js";
+/** Reasons plugins mark the shell busy (Esc / outside-click should not close). */
+export type T3FeedbackBusyReason = "picking" | "cropping" | "recording" | string;
+/** Handler run after a successful element pick (e.g. screenshot afterPick). */
+export type T3FeedbackAfterPickHandler = (target: ElementTarget) => void | Promise<void>;
+/** Well-known imperative actions (handle.pick / capture / record) plus custom names. */
+export type T3FeedbackImperativeAction = "pick" | "capture" | "record" | (string & {});
+/**
+ * Capture / crop / clipboard / burst helpers bound to the feedback root.
+ * Custom plugins use these to build screenshot-class UX without shell `data-act` wiring.
+ */
+export type T3FeedbackHostMedia = {
+    /** Capture viewport; always hides the feedback root. */
+    captureScreenshot: () => Promise<string | undefined>;
+    selectCropRegion: (dataUrl: string, options?: Omit<SelectScreenshotRegionOptions, "parent" | "dataUrl">) => Promise<SelectScreenshotRegionResult>;
+    readClipboardImage: () => Promise<string | undefined>;
+    captureFrameBurst: (options?: Omit<CaptureFrameBurstOptions, "hideElements"> & {
+        hideElements?: HTMLElement[];
+    }) => Promise<BurstFrame[] | undefined>;
+    selectBurstFrames: (options: Omit<SelectBurstFramesOptions, "parent">) => Promise<string[] | null>;
+};
+/**
+ * Host services shared by UI contributions and shortcut handlers.
+ * Send-action cluster and FAB behavior are intentionally absent.
+ */
+export type T3FeedbackHostServices = {
+    root: HTMLElement;
+    getReportType: () => FeedbackReportType;
+    setReportType: (type: FeedbackReportType) => void;
+    subscribeReportType: (listener: (type: FeedbackReportType) => void) => () => void;
+    isPanelOpen: () => boolean;
+    /** Open the compose panel (shell-owned; same as FAB open path without activity). */
+    openPanel: () => void;
+    setStatus: (message: string, kind?: "" | "ok" | "err") => void;
+    persistDraft: (panelOpen?: boolean) => void;
+    focusComment: () => void;
+    /** Opaque per-plugin draft bag (JSON-serializable values). */
+    getDraftExtra: (pluginId: string) => unknown;
+    setDraftExtra: (pluginId: string, value: unknown) => void;
+    /** While busy, shell skips Esc/outside close. Returns a disposer. */
+    registerBusy: (reason: T3FeedbackBusyReason) => () => void;
+    isBusy: () => boolean;
+    /**
+     * Register a handler for successful element picks (e.g. screenshot afterPick).
+     * Returns a disposer. Handlers run in registration order via {@link notifyPicked}.
+     */
+    registerAfterPick: (handler: T3FeedbackAfterPickHandler) => () => void;
+    /** Invoke after-pick handlers with the picked target. */
+    notifyPicked: (target: ElementTarget) => Promise<void>;
+    /**
+     * Register an imperative action (first registration wins).
+     * Used by `handle.pick` / `capture` / `record` and custom chords.
+     */
+    registerAction: (name: T3FeedbackImperativeAction, run: () => void) => () => void;
+    /** Run a registered action; no-op when missing. Returns whether a handler ran. */
+    runAction: (name: T3FeedbackImperativeAction) => boolean;
+    /** Register a clear hook for draft discard / successful send. */
+    registerDraftClear: (clear: () => void) => () => void;
+    /** Viewport capture, crop dialog, clipboard image, and frame-burst helpers. */
+    media: T3FeedbackHostMedia;
+};
+/** UI mount context = host services + live panel nodes. */
+export type T3FeedbackUiContext = T3FeedbackHostServices & {
+    form: HTMLFormElement;
+    backdrop: HTMLElement;
+};
+/** Shortcut run context = host services (panel nodes may be absent). */
+export type T3FeedbackShortcutRunContext = T3FeedbackHostServices;
+type CaptureScreenshotFn = (options?: {
+    hideElements?: HTMLElement[];
+}) => Promise<string | undefined>;
+type CaptureFrameBurstFn = (options?: CaptureFrameBurstOptions) => Promise<BurstFrame[] | undefined>;
+/** Bind media helpers to a mount root (hides root during capture; overlays parent to root). */
+export declare function createHostMedia(root: HTMLElement, deps: {
+    captureScreenshot: CaptureScreenshotFn;
+    captureFrameBurst: CaptureFrameBurstFn;
+}): T3FeedbackHostMedia;
+/** Create a mutable busy registry for the shell. */
+export declare function createBusyRegistry(): {
+    registerBusy: (reason: T3FeedbackBusyReason) => () => void;
+    isBusy: () => boolean;
+};
+/** Registry for cross-plugin after-pick coordination (element → screenshot, …). */
+export declare function createAfterPickRegistry(): {
+    registerAfterPick: (handler: T3FeedbackAfterPickHandler) => () => void;
+    notifyPicked: (target: ElementTarget) => Promise<void>;
+    clear: () => void;
+};
+/** First-wins imperative action registry (handle.pick / capture / record). */
+export declare function createActionRegistry(): {
+    registerAction: (name: T3FeedbackImperativeAction, run: () => void) => () => void;
+    runAction: (name: T3FeedbackImperativeAction) => boolean;
+    clear: () => void;
+};
+/** Draft-clear hooks so plugins zero live state without shell controller calls. */
+export declare function createDraftClearRegistry(): {
+    registerDraftClear: (clear: () => void) => () => void;
+    runDraftClears: () => void;
+    clear: () => void;
+};
+/** In-memory draft extras store keyed by plugin id. */
+export declare function createDraftExtrasStore(initial?: Record<string, unknown>): {
+    get: (pluginId: string) => unknown;
+    set: (pluginId: string, value: unknown) => void;
+    snapshot: () => Record<string, unknown>;
+    replace: (next: Record<string, unknown>) => void;
+    clear: () => void;
+};
+export {};

package/dist/client/ui/host.js

@@ -0,0 +1,132 @@
+import { selectScreenshotRegion, } from "../cropScreenshot.js";
+import { readClipboardImageDataUrl } from "../readClipboardImage.js";
+import { selectBurstFrames } from "../selectBurstFrames.js";
+/** Bind media helpers to a mount root (hides root during capture; overlays parent to root). */
+export function createHostMedia(root, deps) {
+    return {
+        captureScreenshot: () => deps.captureScreenshot({ hideElements: [root] }),
+        selectCropRegion: (dataUrl, options) => selectScreenshotRegion({
+            ...options,
+            parent: root,
+            dataUrl,
+        }),
+        readClipboardImage: () => readClipboardImageDataUrl(),
+        captureFrameBurst: (options) => {
+            const extraHide = options?.hideElements ?? [];
+            return deps.captureFrameBurst({
+                ...options,
+                hideElements: [root, ...extraHide],
+            });
+        },
+        selectBurstFrames: (options) => selectBurstFrames({
+            ...options,
+            parent: root,
+        }),
+    };
+}
+/** Create a mutable busy registry for the shell. */
+export function createBusyRegistry() {
+    const reasons = new Set();
+    return {
+        registerBusy: (reason) => {
+            const key = String(reason);
+            reasons.add(key);
+            return () => {
+                reasons.delete(key);
+            };
+        },
+        isBusy: () => reasons.size > 0,
+    };
+}
+/** Registry for cross-plugin after-pick coordination (element → screenshot, …). */
+export function createAfterPickRegistry() {
+    const handlers = new Set();
+    return {
+        registerAfterPick: (handler) => {
+            handlers.add(handler);
+            return () => {
+                handlers.delete(handler);
+            };
+        },
+        notifyPicked: async (target) => {
+            for (const handler of [...handlers]) {
+                await handler(target);
+            }
+        },
+        clear: () => {
+            handlers.clear();
+        },
+    };
+}
+/** First-wins imperative action registry (handle.pick / capture / record). */
+export function createActionRegistry() {
+    const actions = new Map();
+    return {
+        registerAction: (name, run) => {
+            const key = String(name);
+            if (!actions.has(key))
+                actions.set(key, run);
+            return () => {
+                if (actions.get(key) === run)
+                    actions.delete(key);
+            };
+        },
+        runAction: (name) => {
+            const run = actions.get(String(name));
+            if (!run)
+                return false;
+            run();
+            return true;
+        },
+        clear: () => {
+            actions.clear();
+        },
+    };
+}
+/** Draft-clear hooks so plugins zero live state without shell controller calls. */
+export function createDraftClearRegistry() {
+    const hooks = new Set();
+    return {
+        registerDraftClear: (clear) => {
+            hooks.add(clear);
+            return () => {
+                hooks.delete(clear);
+            };
+        },
+        runDraftClears: () => {
+            for (const clear of [...hooks]) {
+                try {
+                    clear();
+                }
+                catch {
+                    // ignore
+                }
+            }
+        },
+        clear: () => {
+            hooks.clear();
+        },
+    };
+}
+/** In-memory draft extras store keyed by plugin id. */
+export function createDraftExtrasStore(initial) {
+    let extras = { ...(initial ?? {}) };
+    return {
+        get: (pluginId) => extras[pluginId],
+        set: (pluginId, value) => {
+            if (value === undefined) {
+                delete extras[pluginId];
+            }
+            else {
+                extras[pluginId] = value;
+            }
+        },
+        snapshot: () => ({ ...extras }),
+        replace: (next) => {
+            extras = { ...next };
+        },
+        clear: () => {
+            extras = {};
+        },
+    };
+}

package/dist/client/ui/html.d.ts

@@ -0,0 +1,22 @@
+/** Shared HTML helpers for panel UI contributions. */
+export declare function escapeHtml(value: string): string;
+export declare const CLOSE_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\" /></svg>";
+export declare const PICK_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z\"/><path d=\"M13 13l6 6\"/></svg>";
+export declare const CAMERA_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"/><circle cx=\"12\" cy=\"13\" r=\"3\"/></svg>";
+export declare const RECORD_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8\"/><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"currentColor\"/></svg>";
+export declare const CROP_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 2v14a2 2 0 0 0 2 2h14\"/><path d=\"M18 22V8a2 2 0 0 0-2-2H2\"/></svg>";
+export declare const IMAGE_PLUS_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M16 5h6\"/><path d=\"M19 2v6\"/><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h7\"/><circle cx=\"9\" cy=\"10\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>";
+export declare function closeButtonHtml(opts: {
+    act: string;
+    label: string;
+    /** Native tooltip; defaults to `label`. */
+    titleAttr?: string;
+    className?: string;
+}): string;
+export declare function iconButtonHtml(opts: {
+    act: string;
+    label: string;
+    icon: string;
+    titleAttr?: string;
+    className?: string;
+}): string;

package/dist/client/ui/html.js

@@ -0,0 +1,26 @@
+/** Shared HTML helpers for panel UI contributions. */
+export function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+export const CLOSE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>`;
+export const PICK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>`;
+export const CAMERA_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>`;
+export const RECORD_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>`;
+export const CROP_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>`;
+export const IMAGE_PLUS_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 5h6"/><path d="M19 2v6"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h7"/><circle cx="9" cy="10" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`;
+export function closeButtonHtml(opts) {
+    const cls = opts.className ? `t3f-icon-btn ${opts.className}` : "t3f-icon-btn";
+    const title = opts.titleAttr ?? opts.label;
+    return `<button type="button" class="${cls}" data-act="${escapeHtml(opts.act)}" aria-label="${escapeHtml(opts.label)}" title="${escapeHtml(title)}">${CLOSE_ICON_SVG}</button>`;
+}
+export function iconButtonHtml(opts) {
+    const cls = opts.className ? `t3f-icon-btn ${opts.className}` : "t3f-icon-btn";
+    const title = opts.titleAttr
+        ? ` title="${escapeHtml(opts.titleAttr)}"`
+        : ` title="${escapeHtml(opts.label)}"`;
+    return `<button type="button" class="${cls}" data-act="${escapeHtml(opts.act)}" aria-label="${escapeHtml(opts.label)}"${title}>${opts.icon}</button>`;
+}

package/dist/client/ui/labeledPluginPreview.d.ts

@@ -0,0 +1,8 @@
+import type { FeedbackCapturePluginWithUi, T3FeedbackUiContribution } from "./slots.js";
+/**
+ * Live `label` + `collect()` preview rows for capture plugins that do not
+ * provide their own `ui` contribution.
+ */
+export declare function createLabeledPluginPreviewContribution(plugins: ReadonlyArray<FeedbackCapturePluginWithUi & {
+    label: string;
+}>): T3FeedbackUiContribution | null;

package/dist/client/ui/labeledPluginPreview.js

@@ -0,0 +1,71 @@
+import { pluginAppliesToReportType } from "../reportType.js";
+function formatCustomPluginPreview(value) {
+    if (value === undefined || value === null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+/**
+ * Live `label` + `collect()` preview rows for capture plugins that do not
+ * provide their own `ui` contribution.
+ */
+export function createLabeledPluginPreviewContribution(plugins) {
+    if (plugins.length === 0)
+        return null;
+    return {
+        id: "labeled-plugins",
+        slot: "beforeComment",
+        order: 0,
+        mount: (container, ctx) => {
+            const root = document.createElement("div");
+            root.className = "t3f-custom-plugins";
+            container.append(root);
+            const sync = (reportType) => {
+                const visible = plugins.filter((plugin) => pluginAppliesToReportType(plugin, reportType));
+                if (visible.length === 0) {
+                    root.hidden = true;
+                    root.replaceChildren();
+                    return;
+                }
+                root.hidden = false;
+                root.replaceChildren();
+                for (const plugin of visible) {
+                    const row = document.createElement("div");
+                    row.className = "t3f-custom-plugin";
+                    row.dataset.pluginId = plugin.id;
+                    const labelEl = document.createElement("div");
+                    labelEl.className = "t3f-custom-plugin-label";
+                    labelEl.textContent = plugin.label;
+                    const valueEl = document.createElement("div");
+                    valueEl.className = "t3f-custom-plugin-value";
+                    valueEl.textContent = "…";
+                    row.append(labelEl, valueEl);
+                    root.append(row);
+                    void Promise.resolve()
+                        .then(() => plugin.collect())
+                        .then((value) => {
+                        if (!root.isConnected)
+                            return;
+                        const text = formatCustomPluginPreview(value);
+                        valueEl.textContent = text || "—";
+                    })
+                        .catch(() => {
+                        if (!root.isConnected)
+                            return;
+                        valueEl.textContent = "—";
+                    });
+                }
+            };
+            sync(ctx.getReportType());
+            return ctx.subscribeReportType(sync);
+        },
+    };
+}

package/dist/client/ui/resolveContributions.d.ts

@@ -0,0 +1,13 @@
+import type { FeedbackCapturePlugin } from "@rose42/feedback-capture";
+import { type FeedbackCapturePluginWithUi, type T3FeedbackUiContribution } from "./slots.js";
+/**
+ * Resolve all UI contributions for a panel open: built-ins (caller-supplied),
+ * auto label previews, and explicit `plugin.ui` registrations.
+ */
+export declare function resolvePanelUiContributions(options: {
+    /** Built-in UI contributions (element, screenshot, …) already gated by activePlugins. */
+    builtins?: readonly T3FeedbackUiContribution[];
+    plugins?: readonly FeedbackCapturePluginWithUi[];
+}): T3FeedbackUiContribution[];
+/** Narrow capture plugins to the UI-capable shape (structural). */
+export declare function asPluginsWithUi(plugins: readonly FeedbackCapturePlugin[]): FeedbackCapturePluginWithUi[];

package/dist/client/ui/resolveContributions.js

@@ -0,0 +1,20 @@
+import { collectPluginUiContributions, pluginsNeedingLabelPreview, } from "./slots.js";
+import { createLabeledPluginPreviewContribution } from "./labeledPluginPreview.js";
+/**
+ * Resolve all UI contributions for a panel open: built-ins (caller-supplied),
+ * auto label previews, and explicit `plugin.ui` registrations.
+ */
+export function resolvePanelUiContributions(options) {
+    const plugins = options.plugins ?? [];
+    const labeled = pluginsNeedingLabelPreview(plugins);
+    const labelPreview = createLabeledPluginPreviewContribution(labeled);
+    return [
+        ...(options.builtins ?? []),
+        ...(labelPreview ? [labelPreview] : []),
+        ...collectPluginUiContributions(plugins),
+    ];
+}
+/** Narrow capture plugins to the UI-capable shape (structural). */
+export function asPluginsWithUi(plugins) {
+    return plugins;
+}

package/dist/client/ui/screenshotPanelPlugin.d.ts

@@ -0,0 +1,39 @@
+import type { T3FeedbackScreenshotConfig, T3FeedbackShortcutConfig } from "../../types.js";
+import type { FeedbackDraftGalleryItem } from "../draft.js";
+import type { T3FeedbackHostServices } from "./host.js";
+import { createScreenshotUiContributions } from "./screenshotUi.js";
+import type { FeedbackCapturePluginWithUi } from "./slots.js";
+import { type BoundScreenshotPanelSession, type ScreenshotAfterPickMode, type ScreenshotPanelSessionCopy } from "./screenshotPanelSession.js";
+export type ScreenshotPanelCopy = ScreenshotPanelSessionCopy & {
+    clearScreenshotLabel: string;
+    insertClipboardLabel: string;
+    dismissClipboardLabel: string;
+};
+export type ScreenshotPanelController = {
+    plugin: FeedbackCapturePluginWithUi;
+    getUiApi: ReturnType<typeof createScreenshotUiContributions>["getApi"];
+    getGallery: () => FeedbackDraftGalleryItem[];
+    setGallery: (gallery: FeedbackDraftGalleryItem[]) => void;
+    /** Register imperative actions + draft clear once the host exists. */
+    installHostHooks: (host: T3FeedbackHostServices) => void;
+    requestStartCapture: () => void;
+    requestStartRecord: () => void;
+    runCapture: () => void;
+    runRecord: () => void;
+    getBoundSession: () => BoundScreenshotPanelSession | null;
+};
+/**
+ * Screenshot panel plugin — gallery state + ui + capture/record shortcuts + collect.
+ * Session binds automatically from {@link FeedbackCapturePluginWithUi.ui} mounts.
+ */
+export declare function createScreenshotPanelPlugin(options: {
+    copy: ScreenshotPanelCopy;
+    captureShortcut: T3FeedbackShortcutConfig | null;
+    recordShortcut: T3FeedbackShortcutConfig | null;
+    captureTitle: string;
+    recordTitle: string;
+    screenshotConfig: T3FeedbackScreenshotConfig;
+    afterPick: ScreenshotAfterPickMode;
+    afterPickCropPaddingPx: number;
+    getHost: () => T3FeedbackHostServices;
+}): ScreenshotPanelController;

package/dist/client/ui/screenshotPanelPlugin.js

@@ -0,0 +1,212 @@
+import { createScreenshotUiContributions } from "./screenshotUi.js";
+import { bindScreenshotPanelSession, } from "./screenshotPanelSession.js";
+function readGalleryExtra(value) {
+    if (!value || typeof value !== "object")
+        return [];
+    const gallery = value.gallery;
+    if (!Array.isArray(gallery))
+        return [];
+    return gallery.filter((item) => {
+        if (!item || typeof item !== "object")
+            return false;
+        const record = item;
+        return (typeof record.dataUrl === "string" &&
+            record.dataUrl.startsWith("data:image/") &&
+            typeof record.sourceDataUrl === "string" &&
+            record.sourceDataUrl.startsWith("data:image/"));
+    });
+}
+function readElementTargetExtra(value) {
+    if (!value || typeof value !== "object")
+        return undefined;
+    const record = value;
+    if (typeof record.selector !== "string" || typeof record.tagName !== "string") {
+        return undefined;
+    }
+    return value;
+}
+/**
+ * Screenshot panel plugin — gallery state + ui + capture/record shortcuts + collect.
+ * Session binds automatically from {@link FeedbackCapturePluginWithUi.ui} mounts.
+ */
+export function createScreenshotPanelPlugin(options) {
+    const { copy, captureShortcut, recordShortcut, captureTitle, recordTitle, screenshotConfig, afterPick, afterPickCropPaddingPx, getHost, } = options;
+    let gallery = [];
+    let startCapturePending = false;
+    let startRecordPending = false;
+    let bound = null;
+    let hostHooksInstalled = false;
+    const uiFactory = createScreenshotUiContributions({
+        copy,
+        captureTitle,
+        recordTitle,
+    });
+    const applyGallery = (next) => {
+        gallery = next;
+        try {
+            getHost().setDraftExtra("screenshot", { gallery: next });
+        }
+        catch {
+            // Host not ready yet.
+        }
+    };
+    const clearDraft = () => {
+        gallery = [];
+        try {
+            getHost().setDraftExtra("screenshot", undefined);
+        }
+        catch {
+            // ignore
+        }
+    };
+    const requestStartCapture = () => {
+        if (bound) {
+            void bound.runShotFlow();
+            return;
+        }
+        startCapturePending = true;
+        getHost().openPanel();
+    };
+    const requestStartRecord = () => {
+        if (bound) {
+            void bound.runRecordFlow();
+            return;
+        }
+        startRecordPending = true;
+        getHost().openPanel();
+    };
+    const installHostHooks = (host) => {
+        if (hostHooksInstalled)
+            return;
+        hostHooksInstalled = true;
+        host.registerAction("capture", () => requestStartCapture());
+        host.registerAction("record", () => requestStartRecord());
+        host.registerDraftClear(clearDraft);
+    };
+    const bindFromCtx = (ctx) => {
+        const ui = uiFactory.getApi();
+        if (!ui || bound)
+            return;
+        if (gallery.length === 0) {
+            gallery = readGalleryExtra(ctx.getDraftExtra("screenshot"));
+        }
+        const startCapture = startCapturePending;
+        const startRecord = startRecordPending;
+        startCapturePending = false;
+        startRecordPending = false;
+        bound = bindScreenshotPanelSession({
+            form: ctx.form,
+            root: ctx.root,
+            backdrop: ctx.backdrop,
+            ui,
+            copy,
+            screenshotConfig,
+            captureTitle,
+            recordTitle,
+            getGallery: () => gallery,
+            setGallery: applyGallery,
+            setStatus: (message, kind) => ctx.setStatus(message, kind),
+            persistDraft: () => ctx.persistDraft(true),
+            focusComment: () => ctx.focusComment(),
+            isOpen: () => ctx.isPanelOpen(),
+            getElementTarget: () => readElementTargetExtra(ctx.getDraftExtra("elementTarget")),
+            registerBusy: ctx.registerBusy,
+            afterPick,
+            afterPickCropPaddingPx,
+            registerAfterPick: ctx.registerAfterPick,
+            startCapture,
+            startRecord: startCapture ? false : startRecord,
+        });
+        const session = bound;
+        const previousDispose = session.dispose;
+        session.dispose = () => {
+            previousDispose();
+            if (bound === session)
+                bound = null;
+        };
+    };
+    const wrapContributions = (contributions) => contributions.map((contribution) => ({
+        ...contribution,
+        mount: (container, ctx) => {
+            installHostHooks(ctx);
+            const result = contribution.mount(container, ctx);
+            const boundBefore = bound;
+            bindFromCtx(ctx);
+            const ownsSession = Boolean(bound && !boundBefore);
+            const disposeInner = typeof result === "function"
+                ? result
+                : result && typeof result === "object"
+                    ? result.dispose
+                    : undefined;
+            return () => {
+                disposeInner?.();
+                if (ownsSession && bound) {
+                    bound.dispose();
+                    bound = null;
+                }
+            };
+        },
+    }));
+    const shortcuts = [
+        ...(captureShortcut
+            ? [
+                {
+                    id: "builtin:capture",
+                    shortcut: {
+                        key: captureShortcut.key,
+                        mod: captureShortcut.mod,
+                        shift: captureShortcut.shift,
+                        alt: captureShortcut.alt,
+                    },
+                    run: () => requestStartCapture(),
+                },
+            ]
+            : []),
+        ...(recordShortcut
+            ? [
+                {
+                    id: "builtin:record",
+                    shortcut: {
+                        key: recordShortcut.key,
+                        mod: recordShortcut.mod,
+                        shift: recordShortcut.shift,
+                        alt: recordShortcut.alt,
+                    },
+                    run: () => requestStartRecord(),
+                },
+            ]
+            : []),
+    ];
+    const plugin = {
+        id: "screenshot",
+        collect: () => {
+            if (gallery.length === 0)
+                return undefined;
+            return gallery.map((g) => g.dataUrl);
+        },
+        ...(shortcuts.length > 0 ? { shortcuts } : {}),
+        ui: wrapContributions(uiFactory.contributions),
+    };
+    return {
+        plugin,
+        getUiApi: uiFactory.getApi,
+        getGallery: () => gallery,
+        setGallery: applyGallery,
+        installHostHooks,
+        requestStartCapture,
+        requestStartRecord,
+        runCapture: () => {
+            if (bound)
+                void bound.runShotFlow();
+            else
+                requestStartCapture();
+        },
+        runRecord: () => {
+            if (bound)
+                void bound.runRecordFlow();
+            else
+                requestStartRecord();
+        },
+        getBoundSession: () => bound,
+    };
+}