@rose42/t3-feedback 0.1.0

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

@@ -0,0 +1,46 @@
+import type { FeedbackCapturePluginWithUi } from "./slots.js";
+import type { T3FeedbackUiContext } from "./host.js";
+import type { FeedbackReportType } from "../reportType.js";
+import type { T3FeedbackReportTypeGlyphResolved } from "../../types.js";
+export type CommentPanelCopy = {
+    commentPlaceholder: string;
+};
+export type CommentPanelApi = {
+    getTextarea: () => HTMLTextAreaElement | null;
+    getComment: () => string;
+    setComment: (value: string) => void;
+    focus: () => void;
+    /** Trimmed comment, or `null` when empty (shell uses this for submit gating). */
+    validate: () => string | null;
+};
+/**
+ * Default comment field plugin — mounts into the `comment` slot.
+ * Send-action keydowns stay on the shell (via {@link CommentPanelApi.getTextarea}).
+ */
+export declare function createCommentPanelPlugin(options: {
+    copy: CommentPanelCopy;
+}): FeedbackCapturePluginWithUi & {
+    getApi: () => CommentPanelApi;
+    installHostHooks: (host: T3FeedbackUiContext | {
+        registerDraftClear: T3FeedbackUiContext["registerDraftClear"];
+    }) => void;
+};
+export type ReportTypePanelCopy = {
+    reportTypeBugLabel: string;
+    reportTypeFeedbackLabel: string;
+    reportTypeSuggestionLabel: string;
+    reportTypeBugEmoji: string;
+    reportTypeFeedbackEmoji: string;
+    reportTypeSuggestionEmoji: string;
+};
+/**
+ * Report-type segmented control — mounts in `beforeComment` (order -20).
+ * Collects the live host selection for the envelope (no submit-time stub plugin).
+ */
+export declare function createReportTypePanelPlugin(options: {
+    copy: ReportTypePanelCopy;
+    glyph: T3FeedbackReportTypeGlyphResolved;
+    iconSvg: (type: FeedbackReportType) => string;
+    hintFor: (type: FeedbackReportType) => string;
+    getReportType: () => FeedbackReportType;
+}): FeedbackCapturePluginWithUi;

package/dist/client/ui/commentPanelPlugin.js

@@ -0,0 +1,126 @@
+import { escapeHtml } from "./html.js";
+/**
+ * Default comment field plugin — mounts into the `comment` slot.
+ * Send-action keydowns stay on the shell (via {@link CommentPanelApi.getTextarea}).
+ */
+export function createCommentPanelPlugin(options) {
+    let textarea = null;
+    let live = "";
+    let hostHooksInstalled = false;
+    const api = {
+        getTextarea: () => textarea,
+        getComment: () => (textarea ? textarea.value : live),
+        setComment: (value) => {
+            live = value;
+            if (textarea)
+                textarea.value = value;
+        },
+        focus: () => textarea?.focus(),
+        validate: () => {
+            const value = api.getComment().trim();
+            return value || null;
+        },
+    };
+    const clearDraft = () => {
+        api.setComment("");
+    };
+    const installHostHooks = (host) => {
+        if (hostHooksInstalled)
+            return;
+        hostHooksInstalled = true;
+        host.registerDraftClear(clearDraft);
+    };
+    return {
+        id: "comment",
+        collect: () => {
+            const value = api.getComment().trim();
+            return value || undefined;
+        },
+        getApi: () => api,
+        installHostHooks,
+        ui: {
+            id: "builtin:comment",
+            slot: "comment",
+            order: 0,
+            mount: (container, ctx) => {
+                installHostHooks(ctx);
+                const saved = ctx.getDraftExtra("comment");
+                if (typeof saved === "string")
+                    live = saved;
+                container.innerHTML = `<textarea name="comment" placeholder="${escapeHtml(options.copy.commentPlaceholder)}" required></textarea>`;
+                textarea = container.querySelector("textarea");
+                textarea.value = live;
+                textarea.addEventListener("input", () => {
+                    live = textarea.value;
+                    ctx.setDraftExtra("comment", live);
+                    ctx.persistDraft(true);
+                });
+                queueMicrotask(() => textarea?.focus());
+                return () => {
+                    live = textarea?.value ?? live;
+                    textarea = null;
+                };
+            },
+        },
+    };
+}
+function reportTypeEmojiFor(type, copy) {
+    if (type === "feedback")
+        return copy.reportTypeFeedbackEmoji;
+    if (type === "suggestion")
+        return copy.reportTypeSuggestionEmoji;
+    return copy.reportTypeBugEmoji;
+}
+function reportTypeGlyphHtml(type, glyph, copy, iconSvg) {
+    if (glyph !== "icon") {
+        const emoji = typeof glyph === "object" ? glyph[type] : reportTypeEmojiFor(type, copy);
+        return `<span class="t3f-report-type-emoji" aria-hidden="true">${escapeHtml(emoji)}</span>`;
+    }
+    return iconSvg(type);
+}
+/**
+ * Report-type segmented control — mounts in `beforeComment` (order -20).
+ * Collects the live host selection for the envelope (no submit-time stub plugin).
+ */
+export function createReportTypePanelPlugin(options) {
+    return {
+        id: "reportType",
+        collect: () => options.getReportType(),
+        ui: {
+            id: "builtin:reportType",
+            slot: "beforeComment",
+            order: -20,
+            mount: (container, ctx) => {
+                const { copy, glyph, iconSvg, hintFor } = options;
+                container.innerHTML = `
+          <div class="t3f-report-type" role="group" aria-label="Report type">
+            <div class="t3f-report-type-seg">
+              <button type="button" data-act="report-type" data-report-type="bug" aria-pressed="false">${reportTypeGlyphHtml("bug", glyph, copy, iconSvg)}<span>${escapeHtml(copy.reportTypeBugLabel)}</span></button>
+              <button type="button" data-act="report-type" data-report-type="feedback" aria-pressed="false">${reportTypeGlyphHtml("feedback", glyph, copy, iconSvg)}<span>${escapeHtml(copy.reportTypeFeedbackLabel)}</span></button>
+              <button type="button" data-act="report-type" data-report-type="suggestion" aria-pressed="false">${reportTypeGlyphHtml("suggestion", glyph, copy, iconSvg)}<span>${escapeHtml(copy.reportTypeSuggestionLabel)}</span></button>
+            </div>
+            <div class="t3f-report-type-hint"></div>
+          </div>
+        `;
+                const hint = container.querySelector(".t3f-report-type-hint");
+                const buttons = Array.from(container.querySelectorAll('[data-act="report-type"]'));
+                const sync = (type) => {
+                    for (const btn of buttons) {
+                        btn.setAttribute("aria-pressed", btn.dataset.reportType === type ? "true" : "false");
+                    }
+                    hint.textContent = hintFor(type);
+                };
+                sync(ctx.getReportType());
+                for (const btn of buttons) {
+                    btn.addEventListener("click", () => {
+                        const value = btn.dataset.reportType;
+                        if (value !== "bug" && value !== "feedback" && value !== "suggestion")
+                            return;
+                        ctx.setReportType(value);
+                    });
+                }
+                return ctx.subscribeReportType(sync);
+            },
+        },
+    };
+}

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

@@ -0,0 +1,19 @@
+import type { T3FeedbackBuiltinPluginOptions } from "../../types.js";
+import { type FeedbackReportType } from "../reportType.js";
+import type { FeedbackCapturePluginWithUi } from "./slots.js";
+/**
+ * Collect-only built-ins (no panel UI) as host plugins.
+ * `reportTypes` / page-context field filtering match the panel hints:
+ * full diagnostics (bug), UX reaction (feedback), lighter product input (suggestion).
+ */
+export declare function createCollectOnlyBuiltinPlugins(options: {
+    pageContext: boolean;
+    consoleLogs: boolean;
+    consoleLogsMaxEntries: number;
+    version?: string;
+    getHmr?: () => number | null;
+    getReportType: () => FeedbackReportType;
+}): FeedbackCapturePluginWithUi[];
+/** Resolve UI contributions from the full plugin list (no host-only builtins array). */
+export declare function resolveAllPanelUiContributions(plugins: readonly FeedbackCapturePluginWithUi[]): any[];
+export type { T3FeedbackBuiltinPluginOptions };

package/dist/client/ui/defaultPlugins.js

@@ -0,0 +1,48 @@
+import { collectPageContext, createConsoleLogsPlugin, createVersionPlugin, } from "@rose42/feedback-capture";
+import { CONSOLE_LOGS_REPORT_TYPES, VERSION_REPORT_TYPES, pageContextForReportType, } from "../reportType.js";
+import { createLabeledPluginPreviewContribution } from "./labeledPluginPreview.js";
+import { pluginsNeedingLabelPreview } from "./slots.js";
+/**
+ * Collect-only built-ins (no panel UI) as host plugins.
+ * `reportTypes` / page-context field filtering match the panel hints:
+ * full diagnostics (bug), UX reaction (feedback), lighter product input (suggestion).
+ */
+export function createCollectOnlyBuiltinPlugins(options) {
+    const out = [];
+    if (options.pageContext) {
+        out.push({
+            id: "pageContext",
+            collect: () => pageContextForReportType(collectPageContext(), options.getReportType()),
+        });
+    }
+    if (options.consoleLogs) {
+        out.push({
+            ...createConsoleLogsPlugin({ maxEntries: options.consoleLogsMaxEntries }),
+            reportTypes: CONSOLE_LOGS_REPORT_TYPES,
+        });
+    }
+    if (options.version) {
+        out.push({
+            ...createVersionPlugin({
+                getInfo: () => ({
+                    version: options.version,
+                    hmr: options.getHmr?.() ?? null,
+                }),
+            }),
+            reportTypes: VERSION_REPORT_TYPES,
+        });
+    }
+    return out;
+}
+/** Resolve UI contributions from the full plugin list (no host-only builtins array). */
+export function resolveAllPanelUiContributions(plugins) {
+    const labeled = pluginsNeedingLabelPreview(plugins);
+    const labelPreview = createLabeledPluginPreviewContribution(labeled);
+    const fromPlugins = plugins.flatMap((plugin) => {
+        const ui = plugin.ui;
+        if (!ui)
+            return [];
+        return Array.isArray(ui) ? [...ui] : [ui];
+    });
+    return [...(labelPreview ? [labelPreview] : []), ...fromPlugins];
+}

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

@@ -0,0 +1,64 @@
+import type { T3FeedbackOpenInEditorConfig } from "../../types.js";
+export type ComponentLoc = {
+    name?: string;
+    fileName: string;
+    line: number;
+    column?: number;
+};
+export type ElementChipTarget = {
+    tagName: string;
+    name?: string;
+    selector: string;
+    component?: ComponentLoc;
+    leaf?: ComponentLoc;
+    owners?: ComponentLoc[];
+};
+/**
+ * Leaf-first hierarchy for display: leaf → primary → outer owners.
+ * Roles: leaf (innermost), primary (preferred focus), secondary (first outer).
+ */
+export declare function componentHierarchy(target: ElementChipTarget): Array<{
+    loc: ComponentLoc;
+    role: "leaf" | "primary" | "secondary" | "owner";
+}>;
+/** `file:line` or `file:line:column` for chip text / titles. */
+export declare function formatComponentLocation(loc: {
+    fileName: string;
+    line: number;
+    column?: number;
+}): string;
+/**
+ * Build the URL used to open a source location.
+ * - `urlTemplate` → navigate (IDE protocol / custom)
+ * - else → Vite-style GET endpoint with `?file=`
+ */
+export declare function buildOpenInEditorUrl(loc: {
+    fileName: string;
+    line: number;
+    column?: number;
+}, config: T3FeedbackOpenInEditorConfig): {
+    kind: "navigate" | "fetch";
+    url: string;
+};
+/** Open a resolved component location in the IDE (best-effort; never throws). */
+export declare function openSourceInEditor(loc: {
+    fileName: string;
+    line: number;
+    column?: number;
+}, config: T3FeedbackOpenInEditorConfig, fetchFn?: typeof fetch): Promise<void>;
+/** Split a `>`-joined CSS path into segments (trim empties). */
+export declare function splitCssSelectorParts(selector: string): string[];
+/**
+ * Leaf-first breadcrumb for the ELEMENT chip (child ‹ parent ‹ …).
+ * Stored/agent selector stays root→leaf; this is display-only.
+ */
+export declare function formatSelectorBreadcrumb(selector: string): string;
+/** CSS selector for the ancestor `depthFromLeaf` steps above the leaf (0 = leaf). */
+export declare function selectorAtAncestorDepth(selector: string, depthFromLeaf: number): string;
+/** Full ELEMENT chip text (also used as native `title` when the path scrolls). */
+export declare function formatElementChip(target: ElementChipTarget): string;
+/** Interactive ELEMENT chip HTML (component hierarchy or inverted CSS path). */
+export declare function buildTargetChipHtml(target: ElementChipTarget, options?: {
+    openInEditor?: T3FeedbackOpenInEditorConfig | null;
+    openInEditorLabel?: string;
+}): string;

package/dist/client/ui/elementTargetChip.js

@@ -0,0 +1,185 @@
+import { rankSourceHierarchy } from "@rose42/feedback-capture";
+import { escapeHtml } from "./html.js";
+function asLoc(loc) {
+    return loc;
+}
+/**
+ * Leaf-first hierarchy for display: leaf → primary → outer owners.
+ * Roles: leaf (innermost), primary (preferred focus), secondary (first outer).
+ */
+export function componentHierarchy(target) {
+    const ranked = rankSourceHierarchy({
+        ...(target.component ? { component: asLoc(target.component) } : {}),
+        ...(target.leaf ? { leaf: asLoc(target.leaf) } : {}),
+        ...(target.owners && target.owners.length > 0 ? { owners: target.owners.map(asLoc) } : {}),
+    });
+    if (!ranked?.component && !ranked?.leaf)
+        return [];
+    const out = [];
+    if (ranked.leaf && ranked.component) {
+        out.push({ loc: ranked.leaf, role: "leaf" });
+        out.push({ loc: ranked.component, role: "primary" });
+    }
+    else if (ranked.component) {
+        out.push({ loc: ranked.component, role: "leaf" });
+    }
+    else if (ranked.leaf) {
+        out.push({ loc: ranked.leaf, role: "leaf" });
+    }
+    const owners = ranked.owners ?? [];
+    for (let i = 0; i < owners.length; i++) {
+        out.push({
+            loc: owners[i],
+            role: i === 0 ? "secondary" : "owner",
+        });
+    }
+    return out;
+}
+function elementChipLabel(target) {
+    const hierarchy = componentHierarchy(target);
+    if (hierarchy.length > 0) {
+        const parts = hierarchy.map((entry) => {
+            const name = entry.loc.name ?? target.tagName;
+            return `${name} · ${formatComponentLocation(entry.loc)}`;
+        });
+        return `<${target.tagName}> · ${parts.join(" ‹ ")}`;
+    }
+    if (target.name)
+        return `<${target.tagName}> · ${target.name}`;
+    return formatSelectorBreadcrumb(target.selector);
+}
+/** `file:line` or `file:line:column` for chip text / titles. */
+export function formatComponentLocation(loc) {
+    const base = `${loc.fileName}:${loc.line}`;
+    return typeof loc.column === "number" && Number.isFinite(loc.column)
+        ? `${base}:${loc.column}`
+        : base;
+}
+/**
+ * Build the URL used to open a source location.
+ * - `urlTemplate` → navigate (IDE protocol / custom)
+ * - else → Vite-style GET endpoint with `?file=`
+ */
+export function buildOpenInEditorUrl(loc, config) {
+    const column = typeof loc.column === "number" && Number.isFinite(loc.column)
+        ? Math.max(1, Math.floor(loc.column))
+        : 1;
+    const line = Math.max(1, Math.floor(loc.line));
+    if (config.urlTemplate) {
+        const url = config.urlTemplate
+            .replaceAll("{file}", loc.fileName)
+            .replaceAll("{line}", String(line))
+            .replaceAll("{column}", String(column));
+        return { kind: "navigate", url };
+    }
+    const fileParam = `${loc.fileName}:${line}:${column}`;
+    const sep = config.endpoint.includes("?") ? "&" : "?";
+    return {
+        kind: "fetch",
+        url: `${config.endpoint}${sep}file=${encodeURIComponent(fileParam)}`,
+    };
+}
+/** Open a resolved component location in the IDE (best-effort; never throws). */
+export async function openSourceInEditor(loc, config, fetchFn = fetch) {
+    const built = buildOpenInEditorUrl(loc, config);
+    try {
+        if (built.kind === "navigate") {
+            window.location.href = built.url;
+            return;
+        }
+        await fetchFn(built.url, { method: "GET", credentials: "same-origin" });
+    }
+    catch {
+        /* ignore — editor may still have opened, or LAUNCH_EDITOR unset */
+    }
+}
+/** Split a `>`-joined CSS path into segments (trim empties). */
+export function splitCssSelectorParts(selector) {
+    return selector
+        .split(/\s*>\s*/)
+        .map((part) => part.trim())
+        .filter(Boolean);
+}
+/**
+ * Leaf-first breadcrumb for the ELEMENT chip (child ‹ parent ‹ …).
+ * Stored/agent selector stays root→leaf; this is display-only.
+ */
+export function formatSelectorBreadcrumb(selector) {
+    const parts = splitCssSelectorParts(selector);
+    if (parts.length <= 1)
+        return selector.trim();
+    return [...parts].reverse().join(" ‹ ");
+}
+/** CSS selector for the ancestor `depthFromLeaf` steps above the leaf (0 = leaf). */
+export function selectorAtAncestorDepth(selector, depthFromLeaf) {
+    const parts = splitCssSelectorParts(selector);
+    if (parts.length === 0)
+        return selector;
+    const keep = Math.max(1, parts.length - Math.max(0, depthFromLeaf));
+    return parts.slice(0, keep).join(" > ");
+}
+/** Full ELEMENT chip text (also used as native `title` when the path scrolls). */
+export function formatElementChip(target) {
+    // innerHTML / styles are controlled by the pick-details toggles — don't badge the chip.
+    return elementChipLabel(target);
+}
+function buildOpenableLocHtml(loc, options) {
+    const openConfig = options?.openInEditor;
+    const canOpen = Boolean(openConfig && loc.fileName);
+    const text = escapeHtml(formatComponentLocation(loc));
+    if (canOpen && openConfig) {
+        const openLabel = escapeHtml(options?.openInEditorLabel ?? "Open in editor");
+        const locAttrs = {
+            fileName: loc.fileName,
+            line: loc.line,
+            ...(typeof loc.column === "number" && Number.isFinite(loc.column)
+                ? { column: loc.column }
+                : {}),
+        };
+        const built = buildOpenInEditorUrl(locAttrs, openConfig);
+        if (built.kind === "navigate") {
+            return `<a class="t3f-target-file" href="${escapeHtml(built.url)}" title="${openLabel}" aria-label="${openLabel}: ${text}">${text}</a>`;
+        }
+        const columnAttr = typeof loc.column === "number" && Number.isFinite(loc.column)
+            ? ` data-column="${Math.max(1, Math.floor(loc.column))}"`
+            : "";
+        return `<button type="button" class="t3f-target-file" data-file="${escapeHtml(loc.fileName)}" data-line="${Math.max(1, Math.floor(loc.line))}"${columnAttr} title="${openLabel}" aria-label="${openLabel}: ${text}">${text}</button>`;
+    }
+    return `<span class="t3f-target-file-text">${text}</span>`;
+}
+/** Interactive ELEMENT chip HTML (component hierarchy or inverted CSS path). */
+export function buildTargetChipHtml(target, options) {
+    const hierarchy = componentHierarchy(target);
+    if (hierarchy.length > 0) {
+        const tag = escapeHtml(`<${target.tagName}>`);
+        const nodes = hierarchy.map((entry, index) => {
+            const name = escapeHtml(entry.loc.name ?? target.name ?? target.tagName);
+            const roleClass = `t3f-target-role-${entry.role}`;
+            const nameBtn = `<button type="button" class="t3f-target-label ${roleClass}" data-depth="0" data-role="${entry.role}" title="${escapeHtml(entry.role)}">${name}</button>`;
+            const fileHtml = buildOpenableLocHtml(entry.loc, options);
+            const seg = `<span class="t3f-target-comp ${roleClass}">${nameBtn}<span class="t3f-target-comp-sep"> · </span>${fileHtml}</span>`;
+            if (index === 0)
+                return seg;
+            return `<span class="t3f-target-sep" aria-hidden="true">‹</span>${seg}`;
+        });
+        return `<span class="t3f-target-hierarchy"><button type="button" class="t3f-target-label" data-depth="0">${tag}</button><span class="t3f-target-comp-sep"> · </span>${nodes.join("")}</span>`;
+    }
+    if (target.name) {
+        const label = elementChipLabel(target);
+        return `<button type="button" class="t3f-target-label" data-depth="0">${escapeHtml(label)}</button>`;
+    }
+    const parts = splitCssSelectorParts(target.selector);
+    if (parts.length === 0) {
+        return `<button type="button" class="t3f-target-label" data-depth="0">${escapeHtml(target.selector)}</button>`;
+    }
+    const reversed = [...parts].reverse();
+    const pathHtml = reversed
+        .map((part, index) => {
+        const seg = `<button type="button" class="t3f-target-seg" data-depth="${index}">${escapeHtml(part)}</button>`;
+        if (index === 0)
+            return seg;
+        return `<span class="t3f-target-sep" aria-hidden="true">‹</span>${seg}`;
+    })
+        .join("");
+    return `<span class="t3f-target-path">${pathHtml}</span>`;
+}

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

@@ -0,0 +1,43 @@
+import { createElementTargetPlugin, type ElementTarget, type ResolveElementSource } from "@rose42/feedback-capture";
+import type { T3FeedbackPickConfig, T3FeedbackShortcutConfig } from "../../types.js";
+import type { T3FeedbackHostServices } from "./host.js";
+import { createElementTargetUiContributions } from "./elementTargetUi.js";
+import type { FeedbackCapturePluginWithUi } from "./slots.js";
+import { type BoundElementTargetPanelSession, type ElementTargetPanelSessionCopy } from "./elementTargetPanelSession.js";
+export type ElementTargetPanelCopy = ElementTargetPanelSessionCopy & {
+    elementSectionLabel: string;
+    pickLabel: string;
+    clearPickLabel: string;
+    includeInnerHTMLLabel: string;
+    stylesLabel: string;
+    stylesNoneLabel: string;
+    stylesLayoutLabel: string;
+    stylesComputedLabel: string;
+};
+export type ElementTargetPanelController = {
+    plugin: FeedbackCapturePluginWithUi;
+    elementPlugin: ReturnType<typeof createElementTargetPlugin>;
+    getUiApi: ReturnType<typeof createElementTargetUiContributions>["getApi"];
+    installHostHooks: (host: T3FeedbackHostServices) => void;
+    requestStartPick: () => void;
+    runPick: () => void;
+    getBoundSession: () => BoundElementTargetPanelSession | null;
+    getTarget: () => ElementTarget | undefined;
+    clear: () => void;
+    setTarget: (target: ElementTarget) => void;
+};
+/**
+ * Element-target panel plugin — same public surface as custom plugins
+ * (`ui` + `shortcuts` + `collect`). Session binds from ui.mount.
+ */
+export declare function createElementTargetPanelPlugin(options: {
+    copy: ElementTargetPanelCopy;
+    pickConfig: T3FeedbackPickConfig;
+    pickShortcut: T3FeedbackShortcutConfig | null;
+    pickChord: string | null;
+    root: HTMLElement;
+    /** Effective afterPick (usually `"none"` when screenshot plugin is inactive). */
+    afterPickMode: "none" | "capture" | "crop";
+    resolveSource?: ResolveElementSource;
+    getHost: () => T3FeedbackHostServices;
+}): ElementTargetPanelController;