@rose42/t3-feedback 0.1.0

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

@@ -0,0 +1,84 @@
+import { type ElementTarget } from "@rose42/feedback-capture";
+import type { T3FeedbackScreenshotConfig } from "../../types.js";
+import type { FeedbackDraftGalleryItem } from "../draft.js";
+import type { T3FeedbackBusyReason } from "./host.js";
+import type { ScreenshotUiApi } from "./screenshotUi.js";
+export type ScreenshotAfterPickMode = "crop" | "capture" | "none";
+export type ScreenshotPanelSessionCopy = {
+    screenshotSectionLabel: string;
+    captureLabel: string;
+    recordLabel: string;
+    changeRegionLabel: string;
+    removeImageLabel: string;
+    discardScreenshotLabel: string;
+    insertClipboardTitle: string;
+    galleryFullStatus: string;
+    galleryFullTooltip: string;
+    capturingStatus: string;
+    captureFailedStatus: string;
+    screenshotAttachedStatus: string;
+    pastedAttachedStatus: string;
+    autoCapturingStatus: string;
+    autoCroppedStatus: string;
+    autoCapturedStatus: string;
+    cropHint: string;
+    cropHintSeeded: string;
+    cropLabel: string;
+    useFullLabel: string;
+    cancelLabel: string;
+    recordingStatus: string;
+    stopRecordLabel: string;
+    recordFailedStatus: string;
+    pickBurstHint: string;
+    pickBurstConfirmLabel: string;
+    burstAttachedStatus: string;
+};
+export type BoundScreenshotPanelSession = {
+    dispose: () => void;
+    syncGallery: (options?: {
+        focusCropIndex?: number;
+    }) => void;
+    /** Refresh capture/record disabled state (+ optional sibling tools). */
+    syncAttachmentTools: () => void;
+    attachScreenshot: (sourceDataUrl: string, attachedStatus: string, mode?: "capture" | "direct") => Promise<void>;
+    hideClipboardOffer: () => void;
+    remainingSlots: () => number;
+    silentCropToElement: (sourceDataUrl: string, paddingPx: number) => Promise<string>;
+    runShotFlow: () => Promise<void>;
+    runRecordFlow: () => Promise<void>;
+    clearGallery: () => void;
+};
+/**
+ * Wire screenshot UI contributions: gallery, crop, paste, clipboard offer, capture/record.
+ * Owned by the screenshot panel plugin; binds from ui.mount via host context.
+ */
+export declare function bindScreenshotPanelSession(options: {
+    form: HTMLFormElement;
+    root: HTMLElement;
+    backdrop: HTMLElement;
+    ui: ScreenshotUiApi;
+    copy: ScreenshotPanelSessionCopy;
+    screenshotConfig: T3FeedbackScreenshotConfig;
+    captureTitle: string;
+    recordTitle: string;
+    getGallery: () => FeedbackDraftGalleryItem[];
+    setGallery: (next: FeedbackDraftGalleryItem[]) => void;
+    setStatus: (message: string, kind?: "" | "ok" | "err") => void;
+    persistDraft: () => void;
+    focusComment: () => void;
+    isOpen: () => boolean;
+    /** Current element target (draft extra or live pick) for crop seeding. */
+    getElementTarget: () => ElementTarget | undefined;
+    registerBusy: (reason: T3FeedbackBusyReason) => () => void;
+    /** e.g. footer pick visibility when gallery tools sync. */
+    syncSiblingTools?: () => void;
+    startCapture?: boolean;
+    startRecord?: boolean;
+    /**
+     * When set (and mode is not `"none"`), register an after-pick handler that
+     * captures / crops via the host registry.
+     */
+    afterPick?: ScreenshotAfterPickMode;
+    afterPickCropPaddingPx?: number;
+    registerAfterPick?: (handler: (target: ElementTarget) => void | Promise<void>) => () => void;
+}): BoundScreenshotPanelSession;

package/dist/client/ui/screenshotPanelSession.js

@@ -0,0 +1,445 @@
+import { attachImagePasteHandler, captureFrameBurst, captureScreenshot, cropDataUrl, elementBoxToCropRect, } from "@rose42/feedback-capture";
+import { selectScreenshotRegion } from "../cropScreenshot.js";
+import { readClipboardImageDataUrl } from "../readClipboardImage.js";
+import { selectBurstFrames } from "../selectBurstFrames.js";
+import { CLOSE_ICON_SVG, CROP_ICON_SVG, escapeHtml } from "./html.js";
+function loadImageNaturalSize(dataUrl) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        img.onerror = () => reject(new Error("Failed to load image dimensions"));
+        img.src = dataUrl;
+    });
+}
+/**
+ * Wire screenshot UI contributions: gallery, crop, paste, clipboard offer, capture/record.
+ * Owned by the screenshot panel plugin; binds from ui.mount via host context.
+ */
+export function bindScreenshotPanelSession(options) {
+    const { form, root, backdrop, ui, copy, screenshotConfig, captureTitle, recordTitle, getGallery, setGallery, setStatus, persistDraft, focusComment, isOpen, getElementTarget, registerBusy, syncSiblingTools, } = options;
+    const { clipboardOffer, clipboardPreview, previewWrap, galleryEl, screenshotCountLabel, footerShot, footerRecord, } = ui;
+    const maxImages = screenshotConfig.maxImages;
+    let clipboardDataUrl;
+    const remainingSlots = () => Math.max(0, maxImages - getGallery().length);
+    const clipboardAlreadyAttached = () => {
+        if (!clipboardDataUrl)
+            return false;
+        const gallery = getGallery();
+        return gallery.some((g) => g.dataUrl === clipboardDataUrl || g.sourceDataUrl === clipboardDataUrl);
+    };
+    const canOfferClipboard = () => !!clipboardDataUrl && remainingSlots() > 0 && !clipboardAlreadyAttached();
+    const syncClipboardOffer = () => {
+        if (canOfferClipboard() && getGallery().length === 0 && clipboardDataUrl) {
+            clipboardPreview.src = clipboardDataUrl;
+            clipboardOffer.hidden = false;
+        }
+        else {
+            clipboardOffer.hidden = true;
+        }
+    };
+    const syncAttachmentTools = () => {
+        const gallery = getGallery();
+        const full = remainingSlots() === 0;
+        const hideFooterCapture = gallery.length > 0;
+        if (footerShot)
+            footerShot.hidden = hideFooterCapture;
+        if (footerRecord)
+            footerRecord.hidden = hideFooterCapture;
+        const shotTitle = full ? copy.galleryFullTooltip : captureTitle;
+        const recTitle = full ? copy.galleryFullTooltip : recordTitle;
+        const shotAria = full ? copy.galleryFullTooltip : copy.captureLabel;
+        const recAria = full ? copy.galleryFullTooltip : copy.recordLabel;
+        form.querySelectorAll('[data-act="shot"]').forEach((btn) => {
+            btn.disabled = full;
+            btn.title = shotTitle;
+            btn.setAttribute("aria-label", shotAria);
+        });
+        form.querySelectorAll('[data-act="record"]').forEach((btn) => {
+            btn.disabled = full;
+            btn.title = recTitle;
+            btn.setAttribute("aria-label", recAria);
+        });
+        syncSiblingTools?.();
+    };
+    const syncGallery = (syncOptions) => {
+        const gallery = getGallery();
+        galleryEl.replaceChildren();
+        previewWrap.hidden = gallery.length === 0;
+        screenshotCountLabel.textContent = `${copy.screenshotSectionLabel} ${gallery.length}/${maxImages}`;
+        const croppable = screenshotConfig.crop === "ui";
+        gallery.forEach((item, index) => {
+            const thumb = document.createElement("div");
+            thumb.className = croppable ? "t3f-thumb t3f-thumb-croppable" : "t3f-thumb";
+            const img = document.createElement("img");
+            img.src = item.dataUrl;
+            img.alt = `Screenshot ${index + 1}`;
+            const tools = document.createElement("div");
+            tools.className = "t3f-thumb-tools";
+            let cropBtn;
+            if (croppable) {
+                cropBtn = document.createElement("button");
+                cropBtn.type = "button";
+                cropBtn.setAttribute("aria-label", copy.changeRegionLabel);
+                cropBtn.title = copy.changeRegionLabel;
+                cropBtn.innerHTML = CROP_ICON_SVG;
+                cropBtn.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    void cropGalleryItem(index);
+                });
+                tools.append(cropBtn);
+            }
+            const removeBtn = document.createElement("button");
+            removeBtn.type = "button";
+            removeBtn.className = "t3f-thumb-remove";
+            removeBtn.setAttribute("aria-label", copy.removeImageLabel);
+            removeBtn.title = copy.removeImageLabel;
+            removeBtn.innerHTML = CLOSE_ICON_SVG;
+            removeBtn.addEventListener("click", (event) => {
+                event.stopPropagation();
+                setGallery(getGallery().filter((_, i) => i !== index));
+                syncGallery();
+                persistDraft();
+                setStatus("");
+            });
+            tools.append(removeBtn);
+            if (croppable) {
+                thumb.addEventListener("click", () => {
+                    void cropGalleryItem(index);
+                });
+            }
+            thumb.append(img, tools);
+            galleryEl.append(thumb);
+            if (syncOptions?.focusCropIndex === index && cropBtn) {
+                cropBtn.focus();
+            }
+        });
+        if (canOfferClipboard() && gallery.length > 0 && clipboardDataUrl) {
+            const offerThumb = document.createElement("button");
+            offerThumb.type = "button";
+            offerThumb.className = "t3f-thumb t3f-thumb-clipboard";
+            offerThumb.setAttribute("aria-label", copy.insertClipboardTitle);
+            offerThumb.title = copy.insertClipboardTitle;
+            offerThumb.dataset.act = "clipboard-insert";
+            const offerImg = document.createElement("img");
+            offerImg.src = clipboardDataUrl;
+            offerImg.alt = "";
+            offerThumb.append(offerImg);
+            galleryEl.append(offerThumb);
+        }
+        syncClipboardOffer();
+        syncAttachmentTools();
+    };
+    const hideClipboardOffer = () => {
+        clipboardDataUrl = undefined;
+        clipboardPreview.removeAttribute("src");
+        clipboardOffer.hidden = true;
+    };
+    const clearGallery = () => {
+        setGallery([]);
+        syncGallery();
+        persistDraft();
+    };
+    const seedRectFor = async (sourceDataUrl, paddingPx) => {
+        const target = getElementTarget();
+        if (!target)
+            return undefined;
+        try {
+            const natural = await loadImageNaturalSize(sourceDataUrl);
+            return elementBoxToCropRect(target.boundingBox, target.viewport, natural, {
+                paddingPx,
+            });
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const silentCropToElement = async (sourceDataUrl, paddingPx) => {
+        const rect = await seedRectFor(sourceDataUrl, paddingPx);
+        if (!rect)
+            return sourceDataUrl;
+        try {
+            return await cropDataUrl(sourceDataUrl, rect);
+        }
+        catch {
+            return sourceDataUrl;
+        }
+    };
+    const cropGalleryItem = async (index) => {
+        const gallery = getGallery();
+        const item = gallery[index];
+        if (!item)
+            return;
+        const releaseCropping = registerBusy("cropping");
+        try {
+            const initialRect = await seedRectFor(item.sourceDataUrl, screenshotConfig.cropPaddingPx);
+            const result = await selectScreenshotRegion({
+                parent: root,
+                dataUrl: item.sourceDataUrl,
+                allowDiscard: true,
+                ...(initialRect ? { initialRect } : {}),
+                copy: {
+                    hint: initialRect ? copy.cropHintSeeded : copy.cropHint,
+                    cropLabel: copy.cropLabel,
+                    useFullLabel: copy.useFullLabel,
+                    cancelLabel: copy.cancelLabel,
+                    discardLabel: copy.discardScreenshotLabel,
+                },
+            });
+            if (!isOpen())
+                return;
+            if (result.action === "cancel")
+                return;
+            if (result.action === "discard") {
+                setGallery(getGallery().filter((_, i) => i !== index));
+                syncGallery();
+                persistDraft();
+                setStatus("");
+                focusComment();
+                return;
+            }
+            setGallery(getGallery().map((g, i) => i === index ? { dataUrl: result.dataUrl, sourceDataUrl: item.sourceDataUrl } : g));
+            syncGallery();
+            persistDraft();
+            setStatus(copy.screenshotAttachedStatus);
+            focusComment();
+        }
+        finally {
+            releaseCropping();
+        }
+    };
+    const attachScreenshot = async (sourceDataUrl, attachedStatus, mode = "capture") => {
+        if (remainingSlots() === 0) {
+            setStatus(copy.galleryFullStatus, "err");
+            return;
+        }
+        let dataUrl = sourceDataUrl;
+        if (mode === "capture" && screenshotConfig.crop === "auto") {
+            dataUrl = getElementTarget()
+                ? await silentCropToElement(sourceDataUrl, screenshotConfig.cropPaddingPx)
+                : sourceDataUrl;
+        }
+        if (remainingSlots() === 0) {
+            setStatus(copy.galleryFullStatus, "err");
+            return;
+        }
+        setGallery([...getGallery(), { dataUrl, sourceDataUrl }]);
+        const focusCropIndex = mode === "capture" && screenshotConfig.crop === "ui" ? getGallery().length - 1 : undefined;
+        syncGallery(focusCropIndex !== undefined ? { focusCropIndex } : undefined);
+        persistDraft();
+        setStatus(attachedStatus);
+        if (focusCropIndex === undefined) {
+            focusComment();
+        }
+    };
+    const runShotFlow = async () => {
+        if (remainingSlots() === 0) {
+            setStatus(copy.galleryFullStatus, "err");
+            return;
+        }
+        setStatus(copy.capturingStatus);
+        const dataUrl = await captureScreenshot({ hideElements: [root] });
+        if (!dataUrl) {
+            setStatus(copy.captureFailedStatus, "err");
+            return;
+        }
+        hideClipboardOffer();
+        await attachScreenshot(dataUrl, copy.screenshotAttachedStatus);
+    };
+    const runRecordFlow = async () => {
+        const slots = remainingSlots();
+        if (slots === 0) {
+            setStatus(copy.galleryFullStatus, "err");
+            return;
+        }
+        const releaseRecording = registerBusy("recording");
+        backdrop.hidden = true;
+        setStatus(copy.recordingStatus);
+        hideClipboardOffer();
+        const overlay = document.createElement("div");
+        overlay.className = "t3f-record-overlay";
+        overlay.innerHTML = `
+      <div class="t3f-record-card">
+        <div class="t3f-burst-hint">${escapeHtml(copy.recordingStatus)}</div>
+        <div class="t3f-burst-actions">
+          <button type="button" class="t3f-btn primary" data-act="stop-record">${escapeHtml(copy.stopRecordLabel)}</button>
+        </div>
+      </div>
+    `;
+        root.appendChild(overlay);
+        let stopFn;
+        overlay.querySelector('[data-act="stop-record"]')?.addEventListener("click", () => {
+            stopFn?.();
+        });
+        try {
+            const frames = await captureFrameBurst({
+                hideElements: [root, overlay],
+                onRecording: ({ stop }) => {
+                    stopFn = stop;
+                },
+            });
+            overlay.remove();
+            if (!isOpen())
+                return;
+            backdrop.hidden = false;
+            if (!frames || frames.length === 0) {
+                setStatus(copy.recordFailedStatus, "err");
+                return;
+            }
+            const picked = await selectBurstFrames({
+                parent: root,
+                frames,
+                maxSelect: slots,
+                copy: {
+                    hint: copy.pickBurstHint,
+                    confirmLabel: copy.pickBurstConfirmLabel,
+                    cancelLabel: copy.cancelLabel,
+                },
+            });
+            if (!isOpen())
+                return;
+            if (!picked || picked.length === 0) {
+                setStatus("");
+                return;
+            }
+            for (const dataUrl of picked) {
+                if (remainingSlots() === 0)
+                    break;
+                setGallery([...getGallery(), { dataUrl, sourceDataUrl: dataUrl }]);
+            }
+            syncGallery();
+            persistDraft();
+            setStatus(copy.burstAttachedStatus);
+            focusComment();
+        }
+        finally {
+            overlay.remove();
+            releaseRecording();
+            if (isOpen())
+                backdrop.hidden = false;
+        }
+    };
+    const insertClipboardOffer = async () => {
+        if (!clipboardDataUrl)
+            return;
+        const dataUrl = clipboardDataUrl;
+        hideClipboardOffer();
+        await attachScreenshot(dataUrl, copy.pastedAttachedStatus, "direct");
+    };
+    form.querySelector('[data-act="clear-shot"]')?.addEventListener("click", () => {
+        clearGallery();
+        setStatus("");
+    });
+    form.querySelectorAll('[data-act="shot"]').forEach((el) => {
+        el.addEventListener("click", () => {
+            void runShotFlow();
+        });
+    });
+    form.querySelectorAll('[data-act="record"]').forEach((el) => {
+        el.addEventListener("click", () => {
+            void runRecordFlow();
+        });
+    });
+    form.querySelector('[data-act="clipboard-dismiss"]')?.addEventListener("click", () => {
+        hideClipboardOffer();
+    });
+    form.querySelectorAll('[data-act="clipboard-insert"]').forEach((el) => {
+        el.addEventListener("click", () => {
+            void insertClipboardOffer();
+        });
+    });
+    galleryEl.addEventListener("click", (event) => {
+        const hit = event.target?.closest?.("button.t3f-thumb-clipboard");
+        if (!hit || !galleryEl.contains(hit))
+            return;
+        void insertClipboardOffer();
+    });
+    const detachPaste = attachImagePasteHandler(form, (dataUrl) => {
+        hideClipboardOffer();
+        void attachScreenshot(dataUrl, copy.pastedAttachedStatus, "direct");
+    });
+    void readClipboardImageDataUrl().then((dataUrl) => {
+        if (!isOpen() || !dataUrl || !clipboardOffer.isConnected)
+            return;
+        clipboardDataUrl = dataUrl;
+        if (getGallery().length > 0) {
+            syncGallery();
+        }
+        else {
+            syncClipboardOffer();
+        }
+    });
+    if (options.startCapture) {
+        queueMicrotask(() => {
+            void runShotFlow();
+        });
+    }
+    else if (options.startRecord) {
+        queueMicrotask(() => {
+            void runRecordFlow();
+        });
+    }
+    if (getGallery().length > 0) {
+        syncGallery();
+    }
+    else {
+        syncAttachmentTools();
+    }
+    let detachAfterPick;
+    const afterPickMode = options.afterPick ?? "none";
+    if (afterPickMode !== "none" && options.registerAfterPick) {
+        const cropPaddingPx = options.afterPickCropPaddingPx ?? screenshotConfig.cropPaddingPx;
+        detachAfterPick = options.registerAfterPick(async (pickedTarget) => {
+            if (!isOpen())
+                return;
+            if (remainingSlots() === 0) {
+                setStatus(copy.galleryFullStatus, "err");
+                return;
+            }
+            setStatus(copy.autoCapturingStatus);
+            const dataUrl = await captureScreenshot({ hideElements: [root] });
+            if (!dataUrl) {
+                setStatus(copy.captureFailedStatus, "err");
+                focusComment();
+                return;
+            }
+            hideClipboardOffer();
+            if (afterPickMode === "capture") {
+                await attachScreenshot(dataUrl, copy.autoCapturedStatus, "direct");
+                return;
+            }
+            let cropped = dataUrl;
+            try {
+                const natural = await loadImageNaturalSize(dataUrl);
+                const rect = elementBoxToCropRect(pickedTarget.boundingBox, pickedTarget.viewport, natural, { paddingPx: cropPaddingPx });
+                if (rect)
+                    cropped = await cropDataUrl(dataUrl, rect);
+            }
+            catch {
+                cropped = dataUrl;
+            }
+            await attachScreenshot(cropped, copy.autoCroppedStatus, "direct");
+            const gallery = getGallery();
+            const last = gallery[gallery.length - 1];
+            if (last) {
+                setGallery(gallery.map((g, i) => i === gallery.length - 1 ? { dataUrl: g.dataUrl, sourceDataUrl: dataUrl } : g));
+                syncGallery();
+                persistDraft();
+            }
+        });
+    }
+    return {
+        dispose: () => {
+            detachAfterPick?.();
+            detachPaste();
+        },
+        syncGallery,
+        syncAttachmentTools,
+        attachScreenshot,
+        hideClipboardOffer,
+        remainingSlots,
+        silentCropToElement,
+        runShotFlow,
+        runRecordFlow,
+        clearGallery,
+    };
+}

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

@@ -0,0 +1,31 @@
+import type { T3FeedbackUiContribution } from "./slots.js";
+export type ScreenshotUiCopy = {
+    screenshotSectionLabel: string;
+    captureLabel: string;
+    recordLabel: string;
+    clearScreenshotLabel: string;
+    insertClipboardLabel: string;
+    insertClipboardTitle: string;
+    dismissClipboardLabel: string;
+};
+export type ScreenshotUiApi = {
+    clipboardOffer: HTMLDivElement;
+    clipboardPreview: HTMLImageElement;
+    previewWrap: HTMLDivElement;
+    galleryEl: HTMLDivElement;
+    screenshotCountLabel: HTMLDivElement;
+    footerShot: HTMLButtonElement | null;
+    footerRecord: HTMLButtonElement | null;
+};
+/**
+ * Built-in screenshot UI: clipboard offer + gallery card + footer capture/record.
+ * Status lives on the shell (always present).
+ */
+export declare function createScreenshotUiContributions(options: {
+    copy: ScreenshotUiCopy;
+    captureTitle: string;
+    recordTitle: string;
+}): {
+    contributions: T3FeedbackUiContribution[];
+    getApi: () => ScreenshotUiApi | undefined;
+};

package/dist/client/ui/screenshotUi.js

@@ -0,0 +1,130 @@
+import { CAMERA_ICON_SVG, closeButtonHtml, escapeHtml, iconButtonHtml, IMAGE_PLUS_ICON_SVG, RECORD_ICON_SVG, } from "./html.js";
+/**
+ * Built-in screenshot UI: clipboard offer + gallery card + footer capture/record.
+ * Status lives on the shell (always present).
+ */
+export function createScreenshotUiContributions(options) {
+    let api;
+    let clipboardOffer;
+    let clipboardPreview;
+    let previewWrap;
+    let galleryEl;
+    let screenshotCountLabel;
+    let footerShot;
+    let footerRecord;
+    const tryPublish = () => {
+        if (!clipboardOffer ||
+            !clipboardPreview ||
+            !previewWrap ||
+            !galleryEl ||
+            !screenshotCountLabel ||
+            footerShot === undefined ||
+            footerRecord === undefined) {
+            return;
+        }
+        api = {
+            clipboardOffer,
+            clipboardPreview,
+            previewWrap,
+            galleryEl,
+            screenshotCountLabel,
+            footerShot,
+            footerRecord,
+        };
+    };
+    const attachments = {
+        id: "builtin:screenshot",
+        slot: "attachments",
+        order: 20,
+        mount: (container) => {
+            const { copy, captureTitle, recordTitle } = options;
+            container.innerHTML = `
+        <div class="t3f-clipboard-offer" hidden>
+          <button type="button" class="t3f-clipboard-preview-btn" data-act="clipboard-insert" aria-label="${escapeHtml(copy.insertClipboardTitle)}" title="${escapeHtml(copy.insertClipboardTitle)}">
+            <img class="t3f-clipboard-preview" alt="" />
+          </button>
+          <div class="t3f-clipboard-offer-actions">
+            <button type="button" class="t3f-btn t3f-btn-tool primary" data-act="clipboard-insert" aria-label="${escapeHtml(copy.insertClipboardTitle)}" title="${escapeHtml(copy.insertClipboardTitle)}">${IMAGE_PLUS_ICON_SVG}<span>${escapeHtml(copy.insertClipboardLabel)}</span></button>
+            ${closeButtonHtml({
+                act: "clipboard-dismiss",
+                label: copy.dismissClipboardLabel,
+            })}
+          </div>
+        </div>
+        <div class="t3f-section t3f-preview-wrap" hidden>
+          <div class="t3f-section-head">
+            <div class="t3f-section-label" data-screenshot-count></div>
+            <div class="t3f-section-tools">
+              ${iconButtonHtml({
+                act: "shot",
+                label: copy.captureLabel,
+                icon: CAMERA_ICON_SVG,
+                titleAttr: captureTitle,
+            })}
+              ${iconButtonHtml({
+                act: "record",
+                label: copy.recordLabel,
+                icon: RECORD_ICON_SVG,
+                titleAttr: recordTitle,
+            })}
+              ${closeButtonHtml({ act: "clear-shot", label: copy.clearScreenshotLabel })}
+            </div>
+          </div>
+          <div class="t3f-gallery"></div>
+        </div>
+      `;
+            clipboardOffer = container.querySelector(".t3f-clipboard-offer");
+            clipboardPreview = container.querySelector(".t3f-clipboard-preview");
+            previewWrap = container.querySelector(".t3f-preview-wrap");
+            galleryEl = container.querySelector(".t3f-gallery");
+            screenshotCountLabel = container.querySelector("[data-screenshot-count]");
+            tryPublish();
+            return () => {
+                clipboardOffer = undefined;
+                clipboardPreview = undefined;
+                previewWrap = undefined;
+                galleryEl = undefined;
+                screenshotCountLabel = undefined;
+                if (footerShot === undefined && footerRecord === undefined)
+                    api = undefined;
+            };
+        },
+    };
+    const actionsTools = {
+        id: "builtin:screenshot-tools",
+        slot: "actionsTools",
+        order: 20,
+        mount: (container) => {
+            const { copy, captureTitle, recordTitle } = options;
+            container.innerHTML = `
+        ${iconButtonHtml({
+                act: "shot",
+                label: copy.captureLabel,
+                icon: CAMERA_ICON_SVG,
+                className: "t3f-footer-shot",
+                titleAttr: captureTitle,
+            })}
+        ${iconButtonHtml({
+                act: "record",
+                label: copy.recordLabel,
+                icon: RECORD_ICON_SVG,
+                className: "t3f-footer-record",
+                titleAttr: recordTitle,
+            })}
+      `;
+            footerShot = container.querySelector(".t3f-footer-shot");
+            footerRecord = container.querySelector(".t3f-footer-record");
+            tryPublish();
+            return () => {
+                footerShot = undefined;
+                footerRecord = undefined;
+                if (!clipboardOffer)
+                    api = undefined;
+            };
+        },
+    };
+    return {
+        contributions: [attachments, actionsTools],
+        getApi: () => api,
+    };
+}