@rose42/t3-feedback 0.1.0

package/dist/client/ui/elementTargetPanelPlugin.js

@@ -0,0 +1,167 @@
+import { createElementTargetPlugin, } from "@rose42/feedback-capture";
+import { createElementTargetUiContributions } from "./elementTargetUi.js";
+import { bindElementTargetPanelSession, readPickDetailsPrefs, } from "./elementTargetPanelSession.js";
+function isElementTarget(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const record = value;
+    return typeof record.selector === "string" && typeof record.tagName === "string";
+}
+/**
+ * Element-target panel plugin — same public surface as custom plugins
+ * (`ui` + `shortcuts` + `collect`). Session binds from ui.mount.
+ */
+export function createElementTargetPanelPlugin(options) {
+    const { copy, pickConfig, pickShortcut, pickChord, root, afterPickMode, resolveSource, getHost } = options;
+    const elementPlugin = createElementTargetPlugin({
+        getIgnoreRoots: () => [root],
+        includeInnerHTML: pickConfig.includeInnerHTML,
+        maxInnerHTMLLength: pickConfig.maxInnerHTMLLength,
+        styles: pickConfig.styles,
+        ...(resolveSource ? { resolveSource } : {}),
+    });
+    let startPickPending = false;
+    let bound = null;
+    let hostHooksInstalled = false;
+    const uiFactory = createElementTargetUiContributions({
+        copy,
+        pickChord,
+        pickDetails: {
+            includeInnerHTML: pickConfig.includeInnerHTML,
+            styles: pickConfig.styles,
+        },
+    });
+    const syncDraftTarget = (target) => {
+        try {
+            getHost().setDraftExtra("elementTarget", target);
+        }
+        catch {
+            // Host not ready.
+        }
+    };
+    const clearDraft = () => {
+        elementPlugin.clear();
+        syncDraftTarget(undefined);
+    };
+    const requestStartPick = () => {
+        if (bound) {
+            void bound.runPickFlow();
+            return;
+        }
+        startPickPending = true;
+        getHost().openPanel();
+    };
+    const installHostHooks = (host) => {
+        if (hostHooksInstalled)
+            return;
+        hostHooksInstalled = true;
+        host.registerAction("pick", () => requestStartPick());
+        host.registerDraftClear(clearDraft);
+    };
+    const bindFromCtx = (ctx) => {
+        const ui = uiFactory.getApi();
+        if (!ui || bound)
+            return;
+        const saved = ctx.getDraftExtra("elementTarget");
+        if (isElementTarget(saved) && !elementPlugin.getTarget()) {
+            elementPlugin.setTarget(saved);
+        }
+        const startPick = startPickPending;
+        startPickPending = false;
+        const pickDetailsSeed = readPickDetailsPrefs({
+            includeInnerHTML: pickConfig.includeInnerHTML,
+            styles: pickConfig.styles,
+        });
+        bound = bindElementTargetPanelSession({
+            form: ctx.form,
+            backdrop: ctx.backdrop,
+            ui,
+            copy,
+            pickConfig,
+            pickDetailsSeed,
+            elementPlugin,
+            ...(resolveSource ? { resolveSource } : {}),
+            setStatus: (message, kind) => ctx.setStatus(message, kind),
+            persistDraft: () => ctx.persistDraft(true),
+            focusComment: () => ctx.focusComment(),
+            isOpen: () => ctx.isPanelOpen(),
+            registerBusy: ctx.registerBusy,
+            setDraftTarget: (target) => {
+                syncDraftTarget(target);
+            },
+            onAfterPick: (target) => ctx.notifyPicked(target),
+            afterPickMode,
+            startPick,
+        });
+        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 plugin = {
+        id: "elementTarget",
+        collect: () => elementPlugin.collect(),
+        ...(elementPlugin.setup ? { setup: elementPlugin.setup } : {}),
+        ...(elementPlugin.dispose ? { dispose: elementPlugin.dispose } : {}),
+        ...(pickShortcut
+            ? {
+                shortcuts: {
+                    id: "builtin:pick",
+                    shortcut: {
+                        key: pickShortcut.key,
+                        mod: pickShortcut.mod,
+                        shift: pickShortcut.shift,
+                        alt: pickShortcut.alt,
+                    },
+                    run: () => requestStartPick(),
+                },
+            }
+            : {}),
+        ui: wrapContributions(uiFactory.contributions),
+    };
+    return {
+        plugin,
+        elementPlugin,
+        getUiApi: uiFactory.getApi,
+        installHostHooks,
+        requestStartPick,
+        runPick: () => {
+            if (bound)
+                void bound.runPickFlow();
+            else
+                requestStartPick();
+        },
+        getBoundSession: () => bound,
+        getTarget: () => elementPlugin.getTarget() ?? undefined,
+        clear: () => clearDraft(),
+        setTarget: (target) => {
+            elementPlugin.setTarget(target);
+            syncDraftTarget(target);
+        },
+    };
+}

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

@@ -0,0 +1,49 @@
+import { createElementTargetPlugin, type ElementTarget, type ResolveElementSource } from "@rose42/feedback-capture";
+import type { T3FeedbackPickConfig } from "../../types.js";
+import type { ElementTargetUiApi } from "./elementTargetUi.js";
+export type ElementTargetPanelSessionCopy = {
+    openInEditorLabel: string;
+    pickingStatus: string;
+    pickCancelledStatus: string;
+};
+export type PickDetailsPrefs = {
+    includeInnerHTML: boolean;
+    styles: "none" | "layout" | "computed";
+};
+export declare function readPickDetailsPrefs(fallback: PickDetailsPrefs): PickDetailsPrefs;
+export declare function writePickDetailsPrefs(prefs: PickDetailsPrefs): void;
+export type BoundElementTargetPanelSession = {
+    dispose: () => void;
+    renderTarget: () => void;
+    runPickFlow: () => Promise<void>;
+    syncAttachmentTools: () => void;
+};
+/**
+ * Wire element-target UI: chip, highlight, pick-details, pick/clear flows.
+ */
+export declare function bindElementTargetPanelSession(options: {
+    form: HTMLFormElement;
+    backdrop: HTMLElement;
+    ui: ElementTargetUiApi;
+    copy: ElementTargetPanelSessionCopy;
+    pickConfig: T3FeedbackPickConfig;
+    pickDetailsSeed: PickDetailsPrefs;
+    elementPlugin: ReturnType<typeof createElementTargetPlugin>;
+    resolveSource?: ResolveElementSource;
+    setStatus: (message: string, kind?: "" | "ok" | "err") => void;
+    persistDraft: () => void;
+    focusComment: () => void;
+    isOpen: () => boolean;
+    registerBusy: (reason: string) => () => void;
+    /** Persist target into draft extras (and clear). */
+    setDraftTarget: (target: ElementTarget | undefined) => void;
+    /**
+     * Called after a successful pick with the target.
+     * Typically `ctx.notifyPicked(target)`.
+     */
+    onAfterPick: (target: ElementTarget) => void | Promise<void>;
+    /** When `"none"`, focus comment after pick (no screenshot afterPick). */
+    afterPickMode: "none" | "capture" | "crop";
+    syncSiblingTools?: () => void;
+    startPick?: boolean;
+}): BoundElementTargetPanelSession;

package/dist/client/ui/elementTargetPanelSession.js

@@ -0,0 +1,279 @@
+import { collectElementTargetAsync, createElementTargetPlugin, } from "@rose42/feedback-capture";
+import { buildTargetChipHtml, formatElementChip, openSourceInEditor, selectorAtAncestorDepth, } from "./elementTargetChip.js";
+const PICK_DETAILS_STORAGE_KEY = "t3-feedback:pick-details";
+export function readPickDetailsPrefs(fallback) {
+    try {
+        const raw = sessionStorage.getItem(PICK_DETAILS_STORAGE_KEY);
+        if (!raw)
+            return fallback;
+        const parsed = JSON.parse(raw);
+        const styles = parsed.styles === "none" || parsed.styles === "layout" || parsed.styles === "computed"
+            ? parsed.styles
+            : fallback.styles;
+        return {
+            includeInnerHTML: typeof parsed.includeInnerHTML === "boolean"
+                ? parsed.includeInnerHTML
+                : fallback.includeInnerHTML,
+            styles,
+        };
+    }
+    catch {
+        return fallback;
+    }
+}
+export function writePickDetailsPrefs(prefs) {
+    try {
+        sessionStorage.setItem(PICK_DETAILS_STORAGE_KEY, JSON.stringify(prefs));
+    }
+    catch {
+        /* ignore quota / private mode */
+    }
+}
+/**
+ * Wire element-target UI: chip, highlight, pick-details, pick/clear flows.
+ */
+export function bindElementTargetPanelSession(options) {
+    const { form, backdrop, ui, copy, pickConfig, pickDetailsSeed, elementPlugin, resolveSource, setStatus, persistDraft, focusComment, isOpen, registerBusy, setDraftTarget, onAfterPick, afterPickMode, syncSiblingTools, } = options;
+    const { targetBlock, targetChip, footerPick, includeInnerHtmlInput, stylesButtons } = ui;
+    let pickDetails = { ...pickDetailsSeed };
+    includeInnerHtmlInput.checked = pickDetails.includeInnerHTML;
+    const syncStylesSegUi = (styles) => {
+        for (const btn of stylesButtons) {
+            const value = btn.dataset.styles;
+            btn.setAttribute("aria-pressed", value === styles ? "true" : "false");
+        }
+    };
+    syncStylesSegUi(pickDetails.styles);
+    const syncAttachmentTools = () => {
+        if (footerPick) {
+            footerPick.hidden = !targetBlock.hidden;
+        }
+        syncSiblingTools?.();
+    };
+    const clearDomHighlight = () => {
+        const domHighlight = backdrop.querySelector(".t3f-dom-highlight");
+        if (!domHighlight)
+            return;
+        domHighlight.style.display = "none";
+        domHighlight.hidden = true;
+    };
+    const paintDomHighlight = (el) => {
+        const domHighlight = backdrop.querySelector(".t3f-dom-highlight");
+        if (!domHighlight)
+            return;
+        if (!el || !(el instanceof Element)) {
+            clearDomHighlight();
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0 && rect.height <= 0) {
+            clearDomHighlight();
+            return;
+        }
+        domHighlight.hidden = false;
+        domHighlight.style.display = "block";
+        domHighlight.style.left = `${rect.left}px`;
+        domHighlight.style.top = `${rect.top}px`;
+        domHighlight.style.width = `${Math.max(0, rect.width)}px`;
+        domHighlight.style.height = `${Math.max(0, rect.height)}px`;
+    };
+    const resolveSelectorElement = (selector) => {
+        try {
+            return document.querySelector(selector);
+        }
+        catch {
+            return null;
+        }
+    };
+    const renderTarget = () => {
+        const target = elementPlugin.getTarget();
+        if (!target) {
+            targetBlock.hidden = true;
+            targetChip.textContent = "";
+            targetChip.removeAttribute("title");
+            clearDomHighlight();
+            syncAttachmentTools();
+            return;
+        }
+        const chip = formatElementChip(target);
+        targetChip.innerHTML = buildTargetChipHtml(target, {
+            openInEditor: pickConfig.openInEditor,
+            openInEditorLabel: copy.openInEditorLabel,
+        });
+        targetChip.title = chip;
+        targetBlock.hidden = false;
+        syncAttachmentTools();
+    };
+    const readPickDetailsFromUi = () => {
+        const pressed = stylesButtons.find((btn) => btn.getAttribute("aria-pressed") === "true");
+        const stylesRaw = pressed?.dataset.styles;
+        const styles = stylesRaw === "layout" || stylesRaw === "computed" ? stylesRaw : "none";
+        return {
+            includeInnerHTML: includeInnerHtmlInput.checked,
+            styles,
+        };
+    };
+    const persistPickDetailsFromUi = () => {
+        pickDetails = readPickDetailsFromUi();
+        writePickDetailsPrefs(pickDetails);
+    };
+    const refreshPickedTargetDetails = () => {
+        const current = elementPlugin.getTarget();
+        if (!current)
+            return;
+        const el = resolveSelectorElement(current.selector);
+        if (!el)
+            return;
+        const details = readPickDetailsFromUi();
+        void collectElementTargetAsync(el, {
+            includeInnerHTML: details.includeInnerHTML,
+            maxInnerHTMLLength: pickConfig.maxInnerHTMLLength,
+            styles: details.styles,
+            ...(resolveSource ? { resolveSource } : {}),
+        }).then((next) => {
+            elementPlugin.setTarget(next);
+            setDraftTarget(next);
+            renderTarget();
+            persistDraft();
+        });
+    };
+    const onPickDetailsChange = () => {
+        persistPickDetailsFromUi();
+        refreshPickedTargetDetails();
+    };
+    includeInnerHtmlInput.addEventListener("change", onPickDetailsChange);
+    for (const btn of stylesButtons) {
+        btn.addEventListener("click", () => {
+            const value = btn.dataset.styles;
+            if (value !== "none" && value !== "layout" && value !== "computed")
+                return;
+            syncStylesSegUi(value);
+            onPickDetailsChange();
+        });
+    }
+    targetChip.addEventListener("click", (event) => {
+        const hit = event.target?.closest?.(".t3f-target-file");
+        if (!hit || !targetChip.contains(hit) || !pickConfig.openInEditor)
+            return;
+        if (hit.tagName === "A" && hit.getAttribute("href")) {
+            event.stopPropagation();
+            return;
+        }
+        const fileName = hit.dataset.file;
+        const line = Number(hit.dataset.line);
+        if (!fileName || !Number.isFinite(line))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const columnRaw = hit.dataset.column;
+        const column = columnRaw !== undefined ? Number(columnRaw) : undefined;
+        void openSourceInEditor({
+            fileName,
+            line,
+            ...(typeof column === "number" && Number.isFinite(column) ? { column } : {}),
+        }, pickConfig.openInEditor);
+    });
+    targetChip.addEventListener("pointerover", (event) => {
+        const target = elementPlugin.getTarget();
+        if (!target)
+            return;
+        const hit = event.target?.closest?.(".t3f-target-seg, .t3f-target-label");
+        if (!hit || !targetChip.contains(hit))
+            return;
+        const depth = Number(hit.dataset.depth ?? "0");
+        const selector = Number.isFinite(depth)
+            ? selectorAtAncestorDepth(target.selector, depth)
+            : target.selector;
+        paintDomHighlight(resolveSelectorElement(selector));
+    });
+    targetChip.addEventListener("pointerout", (event) => {
+        const next = event.relatedTarget;
+        if (next && targetChip.contains(next))
+            return;
+        clearDomHighlight();
+    });
+    targetChip.addEventListener("focusin", (event) => {
+        const target = elementPlugin.getTarget();
+        if (!target)
+            return;
+        const hit = event.target;
+        if (!hit?.matches?.(".t3f-target-seg, .t3f-target-label"))
+            return;
+        const depth = Number(hit.dataset.depth ?? "0");
+        const selector = Number.isFinite(depth)
+            ? selectorAtAncestorDepth(target.selector, depth)
+            : target.selector;
+        paintDomHighlight(resolveSelectorElement(selector));
+    });
+    targetChip.addEventListener("focusout", (event) => {
+        const next = event.relatedTarget;
+        if (next && targetChip.contains(next))
+            return;
+        clearDomHighlight();
+    });
+    const runPickFlow = async () => {
+        const releasePicking = registerBusy("picking");
+        backdrop.hidden = true;
+        setStatus(copy.pickingStatus);
+        try {
+            const details = readPickDetailsFromUi();
+            persistPickDetailsFromUi();
+            const picked = await elementPlugin.pick({
+                includeInnerHTML: details.includeInnerHTML,
+                maxInnerHTMLLength: pickConfig.maxInnerHTMLLength,
+                styles: details.styles,
+            });
+            if (!isOpen())
+                return;
+            backdrop.hidden = false;
+            if (!picked) {
+                setStatus(copy.pickCancelledStatus);
+                focusComment();
+                return;
+            }
+            setDraftTarget(picked);
+            renderTarget();
+            persistDraft();
+            await onAfterPick(picked);
+            if (afterPickMode === "none") {
+                setStatus("");
+                focusComment();
+            }
+        }
+        finally {
+            releasePicking();
+            if (isOpen())
+                backdrop.hidden = false;
+        }
+    };
+    form.querySelector('[data-act="clear-pick"]')?.addEventListener("click", () => {
+        elementPlugin.clear();
+        setDraftTarget(undefined);
+        renderTarget();
+        persistDraft();
+    });
+    form.querySelectorAll('[data-act="pick"]').forEach((el) => {
+        el.addEventListener("click", () => {
+            void runPickFlow();
+        });
+    });
+    if (options.startPick) {
+        queueMicrotask(() => {
+            void runPickFlow();
+        });
+    }
+    else if (elementPlugin.getTarget()) {
+        renderTarget();
+    }
+    else {
+        syncAttachmentTools();
+    }
+    return {
+        dispose: () => {
+            clearDomHighlight();
+        },
+        renderTarget,
+        runPickFlow,
+        syncAttachmentTools,
+    };
+}

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

@@ -0,0 +1,36 @@
+import type { T3FeedbackUiContribution } from "./slots.js";
+export type ElementTargetUiCopy = {
+    elementSectionLabel: string;
+    pickLabel: string;
+    clearPickLabel: string;
+    includeInnerHTMLLabel: string;
+    stylesLabel: string;
+    stylesNoneLabel: string;
+    stylesLayoutLabel: string;
+    stylesComputedLabel: string;
+};
+export type ElementTargetUiApi = {
+    targetBlock: HTMLDivElement;
+    targetChip: HTMLSpanElement;
+    footerPick: HTMLButtonElement | null;
+    includeInnerHtmlInput: HTMLInputElement;
+    stylesButtons: HTMLButtonElement[];
+};
+type PickDetailsSeed = {
+    includeInnerHTML: boolean;
+    styles: "none" | "layout" | "computed";
+};
+/**
+ * Built-in element-target UI: attachment card + footer pick control.
+ * Two contributions share a closure so the returned API is filled once both mount.
+ */
+export declare function createElementTargetUiContributions(options: {
+    copy: ElementTargetUiCopy;
+    pickChord: string | null;
+    pickDetails: PickDetailsSeed;
+}): {
+    contributions: T3FeedbackUiContribution[];
+    /** Populated after contributions mount (same panel open). */
+    getApi: () => ElementTargetUiApi | undefined;
+};
+export {};

package/dist/client/ui/elementTargetUi.js

@@ -0,0 +1,105 @@
+import { closeButtonHtml, escapeHtml, iconButtonHtml, PICK_ICON_SVG } from "./html.js";
+/**
+ * Built-in element-target UI: attachment card + footer pick control.
+ * Two contributions share a closure so the returned API is filled once both mount.
+ */
+export function createElementTargetUiContributions(options) {
+    let api;
+    let targetBlock;
+    let targetChip;
+    let footerPick;
+    let includeInnerHtmlInput;
+    let stylesButtons;
+    const tryPublish = () => {
+        if (!targetBlock ||
+            !targetChip ||
+            includeInnerHtmlInput === undefined ||
+            !stylesButtons ||
+            footerPick === undefined) {
+            return;
+        }
+        api = {
+            targetBlock,
+            targetChip,
+            footerPick,
+            includeInnerHtmlInput,
+            stylesButtons,
+        };
+    };
+    const attachments = {
+        id: "builtin:elementTarget",
+        slot: "attachments",
+        order: 10,
+        mount: (container) => {
+            const { copy, pickDetails } = options;
+            container.innerHTML = `
+        <div class="t3f-section t3f-element" hidden>
+          <div class="t3f-section-head">
+            <div class="t3f-section-label">${escapeHtml(copy.elementSectionLabel)}</div>
+            <div class="t3f-section-tools">
+              ${iconButtonHtml({
+                act: "pick",
+                label: copy.pickLabel,
+                icon: PICK_ICON_SVG,
+                ...(options.pickChord ? { titleAttr: options.pickChord } : {}),
+            })}
+              ${closeButtonHtml({ act: "clear-pick", label: copy.clearPickLabel })}
+            </div>
+          </div>
+          <div class="t3f-target">
+            <span class="t3f-target-chip"></span>
+          </div>
+          <div class="t3f-pick-details">
+            <label>
+              <input type="checkbox" data-act="include-inner-html"${pickDetails.includeInnerHTML ? " checked" : ""} />
+              ${escapeHtml(copy.includeInnerHTMLLabel)}
+            </label>
+            <div class="t3f-styles-seg" role="group" aria-label="${escapeHtml(copy.stylesLabel)}">
+              <button type="button" data-act="styles" data-styles="none" aria-pressed="${pickDetails.styles === "none" ? "true" : "false"}">${escapeHtml(copy.stylesNoneLabel)}</button>
+              <button type="button" data-act="styles" data-styles="layout" aria-pressed="${pickDetails.styles === "layout" ? "true" : "false"}">${escapeHtml(copy.stylesLayoutLabel)}</button>
+              <button type="button" data-act="styles" data-styles="computed" aria-pressed="${pickDetails.styles === "computed" ? "true" : "false"}">${escapeHtml(copy.stylesComputedLabel)}</button>
+            </div>
+          </div>
+        </div>
+      `;
+            targetBlock = container.querySelector(".t3f-element");
+            targetChip = container.querySelector(".t3f-target-chip");
+            includeInnerHtmlInput = container.querySelector('[data-act="include-inner-html"]');
+            stylesButtons = Array.from(container.querySelectorAll('[data-act="styles"]'));
+            tryPublish();
+            return () => {
+                api = undefined;
+                targetBlock = undefined;
+                targetChip = undefined;
+                includeInnerHtmlInput = undefined;
+                stylesButtons = undefined;
+            };
+        },
+    };
+    const actionsTools = {
+        id: "builtin:elementTarget-tools",
+        slot: "actionsTools",
+        order: 10,
+        mount: (container) => {
+            const { copy } = options;
+            container.innerHTML = iconButtonHtml({
+                act: "pick",
+                label: copy.pickLabel,
+                icon: PICK_ICON_SVG,
+                className: "t3f-footer-pick",
+                titleAttr: options.pickChord ? `${copy.pickLabel} (${options.pickChord})` : copy.pickLabel,
+            });
+            footerPick = container.querySelector(".t3f-footer-pick");
+            tryPublish();
+            return () => {
+                footerPick = undefined;
+                if (!targetBlock)
+                    api = undefined;
+            };
+        },
+    };
+    return {
+        contributions: [attachments, actionsTools],
+        getApi: () => api,
+    };
+}