@hosty-sdk/app 0.35.1 → 0.38.0

package/dist/feedback-react.js

@@ -0,0 +1,390 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { APP_SESSION_RESTORED, appFetch } from "./browser-auth.js";
+import { SdkChromeStyles } from "./sdk-chrome.js";
+import { blankDraft, deleteDraft, draftKey, makeNote, readDraft, saveDraft, submission } from "./feedback-draft.js";
+import { FeedbackSpeech } from "./feedback-speech.js";
+import { captureStill, cropStill } from "./feedback-capture.js";
+function useBlobUrl(blob) {
+    const [url, setUrl] = useState("");
+    useEffect(() => { if (!blob) {
+        setUrl("");
+        return;
+    } const value = URL.createObjectURL(blob); setUrl(value); return () => URL.revokeObjectURL(value); }, [blob]);
+    return url;
+}
+function ImagePreview({ blob }) { const url = useBlobUrl(blob); return url ? _jsx("img", { src: url, alt: "Included screenshot" }) : null; }
+const rect = (b) => ({ x: b.x, y: b.y, width: b.width, height: b.height });
+const viewport = () => ({ width: innerWidth, height: innerHeight, scale: devicePixelRatio });
+const errorMessage = (e) => e instanceof Error ? e.message : "Feedback could not be saved.";
+export function FeedbackCapture({ active, uiPath = "/api/hosty/ui" }) {
+    const [capabilities, setCapabilities] = useState(null);
+    const [unavailable, setUnavailable] = useState("");
+    const [retry, setRetry] = useState(0);
+    useEffect(() => { const refresh = () => setRetry(r => r + 1); window.addEventListener(APP_SESSION_RESTORED, refresh); return () => window.removeEventListener(APP_SESSION_RESTORED, refresh); }, []);
+    const path = uiPath.replace(/\/$/, "") + "/feedback";
+    useEffect(() => {
+        setCapabilities(null);
+        setUnavailable("");
+        if (!active)
+            return;
+        const controller = new AbortController();
+        void appFetch(path, { signal: controller.signal }).then(async (response) => {
+            if (!response.ok)
+                throw new Error(response.status === 404 ? "Update Core and this app to enable feedback." : "Feedback is unavailable. Retry when access is restored.");
+            const value = await response.json();
+            if (value.version !== 1 || !value.userId || !value.appId || !value.installation || !value.coreId)
+                throw new Error("Feedback capability response is incompatible.");
+            if (!controller.signal.aborted)
+                setCapabilities(value);
+        }).catch(e => { if (!controller.signal.aborted)
+            setUnavailable(errorMessage(e)); });
+        return () => controller.abort();
+    }, [active, path, retry]);
+    if (!active || typeof document === "undefined")
+        return null;
+    return capabilities ? _jsx(FeedbackEditor, { capabilities: capabilities, path: path }, draftKey(capabilities))
+        : unavailable ? createPortal(_jsxs("div", { "data-hosty-feedback": true, "data-hosty-sdk": true, className: "hosty-feedback-launch", children: [_jsx(SdkChromeStyles, {}), _jsx("button", { title: unavailable, onClick: () => setRetry(r => r + 1), children: "Retry feedback" })] }), document.body) : null;
+}
+function FeedbackEditor({ capabilities, path }) {
+    const [dictating, setDictating] = useState(false);
+    const [reviewTargets, setReviewTargets] = useState([]);
+    const key = draftKey(capabilities);
+    const [draft, setDraft] = useState(() => blankDraft(key));
+    const current = useRef(draft), savedRevision = useRef(0), savedRequestId = useRef(null), queue = useRef(Promise.resolve()), saveFailure = useRef(null);
+    const live = useRef(true);
+    const [ready, setReady] = useState(false), [open, setOpen] = useState(false), [saving, setSaving] = useState(false);
+    const [error, setError] = useState(""), [notice, setNotice] = useState(""), [busy, setBusy] = useState(false);
+    const [picking, setPicking] = useState(null);
+    const [highlight, setHighlight] = useState(null);
+    const [edit, setEdit] = useState(null);
+    const [hidden, setHidden] = useState(false), [capturing, setCapturing] = useState(false);
+    const [preview, setPreview] = useState(null);
+    const elements = useRef(new Map());
+    const capture = useRef(null);
+    const root = useRef(null);
+    useEffect(() => {
+        live.current = true;
+        void readDraft(key).then(value => {
+            if (!live.current)
+                return;
+            if (value) {
+                current.current = value;
+                savedRevision.current = value.revision;
+                savedRequestId.current = value.requestId;
+                setDraft(value);
+                setNotice("Saved draft restored.");
+            }
+        }).catch(e => { if (live.current)
+            setError(errorMessage(e)); }).finally(() => { if (live.current)
+            setReady(true); });
+        return () => { live.current = false; capture.current?.abort(); };
+    }, [key]);
+    function update(change) {
+        const next = { ...current.current, ...change, revision: current.current.revision + 1 };
+        current.current = next;
+        setDraft(next);
+        setSaving(true);
+        setNotice("");
+        queue.current = queue.current.then(async () => {
+            try {
+                await saveDraft(next, savedRevision.current, savedRequestId.current);
+                savedRevision.current = next.revision;
+                savedRequestId.current = next.requestId;
+                saveFailure.current = null;
+                if (live.current) {
+                    setError("");
+                    setSaving(current.current.revision !== next.revision);
+                }
+            }
+            catch (e) {
+                saveFailure.current = new Error(errorMessage(e));
+                if (live.current) {
+                    setSaving(false);
+                    setError("Not saved locally: " + errorMessage(e));
+                }
+            }
+        });
+    }
+    async function flush() { await queue.current; if (saveFailure.current)
+        throw saveFailure.current; }
+    function noteChange(id, change) {
+        if (current.current.submitting)
+            return;
+        update({ annotations: current.current.annotations.map(n => n.id === id ? { ...n, ...change } : n) });
+    }
+    function add(target, element) {
+        if (current.current.annotations.length >= capabilities.maxAnnotations) {
+            setError("A report can contain at most 20 annotations.");
+            return;
+        }
+        const note = makeNote(target);
+        if (element)
+            elements.current.set(note.id, element);
+        update({ annotations: [...current.current.annotations, note] });
+        setEdit({ id: note.id, where: "anchor" });
+        setPicking(null);
+        setHighlight(target.bounds ?? null);
+    }
+    useEffect(() => {
+        if (!picking || draft.submitting || !open)
+            return;
+        let start = null;
+        const inside = (event) => event.composedPath().some(node => node instanceof Element && node.hasAttribute("data-hosty-feedback"));
+        const move = (event) => {
+            if (inside(event))
+                return;
+            if (picking === "region" && start)
+                setHighlight({ x: Math.min(start.x, event.clientX), y: Math.min(start.y, event.clientY),
+                    width: Math.abs(event.clientX - start.x), height: Math.abs(event.clientY - start.y) });
+            else if (picking === "element") {
+                const element = document.elementFromPoint(event.clientX, event.clientY);
+                if (element)
+                    setHighlight(rect(element.getBoundingClientRect()));
+            }
+        };
+        const down = (event) => {
+            if (inside(event))
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            // React may remove the picker effect before the native click follows pointerup.
+            const swallow = (click) => { click.preventDefault(); click.stopImmediatePropagation(); cleanup(); };
+            const cleanup = () => { document.removeEventListener("click", swallow, true); clearTimeout(timer); };
+            const timer = setTimeout(cleanup, 1500);
+            document.addEventListener("click", swallow, { capture: true, once: true });
+            if (picking === "region") {
+                start = { x: event.clientX, y: event.clientY };
+                return;
+            }
+            const element = document.elementFromPoint(event.clientX, event.clientY);
+            if (!element)
+                return;
+            // Never read input values, text content, or arbitrary data attributes into evidence.
+            const label = element.getAttribute("aria-label")?.slice(0, 200) || element.tagName.toLowerCase();
+            const selector = element.id ? "#" + CSS.escape(element.id) : element.tagName.toLowerCase();
+            add({ kind: "element", label, selector, bounds: rect(element.getBoundingClientRect()), viewport: viewport() }, element);
+        };
+        const up = (event) => {
+            if (!start)
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const b = { x: Math.min(start.x, event.clientX), y: Math.min(start.y, event.clientY),
+                width: Math.abs(event.clientX - start.x), height: Math.abs(event.clientY - start.y) };
+            start = null;
+            if (b.width > 3 && b.height > 3)
+                add({ kind: "region", label: "Selected region", bounds: b, viewport: viewport() });
+        };
+        const click = (event) => { if (!inside(event)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        } };
+        const escape = (event) => { if (event.key === "Escape") {
+            setPicking(null);
+            setHighlight(null);
+        } };
+        document.addEventListener("pointermove", move, true);
+        document.addEventListener("pointerdown", down, true);
+        document.addEventListener("pointerup", up, true);
+        document.addEventListener("click", click, true);
+        document.addEventListener("keydown", escape, true);
+        const old = document.documentElement.style.cursor;
+        document.documentElement.style.cursor = "crosshair";
+        return () => {
+            document.removeEventListener("pointermove", move, true);
+            document.removeEventListener("pointerdown", down, true);
+            document.removeEventListener("pointerup", up, true);
+            document.removeEventListener("click", click, true);
+            document.removeEventListener("keydown", escape, true);
+            document.documentElement.style.cursor = old;
+        };
+    }, [picking, draft.submitting, open]);
+    const selected = draft.annotations.find(n => n.id === edit?.id);
+    useEffect(() => {
+        if (picking || !edit || !open)
+            return;
+        const refresh = () => {
+            const element = elements.current.get(edit.id);
+            setHighlight(element?.isConnected ? rect(element.getBoundingClientRect()) : current.current.annotations.find(n => n.id === edit.id)?.target?.bounds ?? null);
+        };
+        refresh();
+        window.addEventListener("scroll", refresh, true);
+        window.addEventListener("resize", refresh);
+        return () => { window.removeEventListener("scroll", refresh, true); window.removeEventListener("resize", refresh); };
+    }, [edit, picking, open]);
+    async function done() {
+        setEdit(null);
+        setHighlight(null);
+        try {
+            await flush();
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+    }
+    async function screenshot(id) {
+        if (capture.current || draft.submitting)
+            return;
+        const operation = new AbortController();
+        capture.current = operation;
+        setCapturing(true);
+        setError("");
+        try {
+            const blob = await captureStill(value => { if (root.current)
+                root.current.style.visibility = value ? "hidden" : ""; setHidden(value); }, operation.signal);
+            if (live.current && !operation.signal.aborted)
+                setPreview({ id, blob });
+        }
+        catch (e) {
+            if (live.current && !operation.signal.aborted)
+                setError(errorMessage(e));
+        }
+        finally {
+            if (capture.current === operation)
+                capture.current = null;
+            if (live.current)
+                setCapturing(false);
+        }
+    }
+    async function acceptImage(blob) {
+        if (!preview)
+            return;
+        if (blob.size > capabilities.maxImageBytes) {
+            setError("Crop a smaller area: each screenshot must fit within 2 MiB.");
+            return;
+        }
+        const total = current.current.annotations.filter(n => n.id !== preview.id).reduce((sum, n) => sum + (n.image?.size ?? 0), 0) + blob.size;
+        if (total > capabilities.maxTotalImageBytes) {
+            setError("Screenshots may total at most 8 MiB. Remove or crop an existing image.");
+            return;
+        }
+        noteChange(preview.id, { image: blob });
+        setPreview(null);
+    }
+    async function send() {
+        if (busy || !current.current.annotations.length || current.current.annotations.some(n => !n.text.trim()))
+            return;
+        setBusy(true);
+        setError("");
+        try {
+            update({ submitting: true });
+            await flush();
+            const frozen = current.current;
+            const response = await appFetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(await submission(frozen)) });
+            const result = await response.json().catch(() => null);
+            if (!response.ok) {
+                if ([400, 413, 415].includes(response.status))
+                    update({ submitting: false, requestId: crypto.randomUUID() });
+                throw new Error(result?.message ?? "Submission was not confirmed. Retry the same feedback; your draft is retained.");
+            }
+            if (!result || !["submitted", "deleted"].includes(result.status ?? ""))
+                throw new Error("Submission was not confirmed. Retry the same feedback.");
+            await deleteDraft(key, frozen.requestId, frozen.revision);
+            const fresh = blankDraft(key);
+            savedRevision.current = 0;
+            savedRequestId.current = null;
+            current.current = fresh;
+            setDraft(fresh);
+            setReviewTargets([]);
+            if (capabilities.administrator && result.status === "submitted" && result.id) {
+                void appFetch(path + "/" + encodeURIComponent(result.id) + "/review-targets").then(async (response) => {
+                    if (!response.ok)
+                        return;
+                    const value = await response.json();
+                    if (live.current)
+                        setReviewTargets(value.targets ?? []);
+                }).catch(() => undefined);
+            }
+            setEdit(null);
+            setHighlight(null);
+            setNotice(result.status === "deleted" ? "This feedback was already submitted and subsequently removed with its workspace." : "Feedback submitted.");
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+        finally {
+            if (live.current)
+                setBusy(false);
+        }
+    }
+    async function discard() {
+        if (!window.confirm(current.current.submitting ? "This submission may already exist. Discard its local retry record? This does not delete a submitted feedback." : "Discard this local feedback draft and its screenshots?"))
+            return;
+        try {
+            await queue.current;
+            await deleteDraft(key, current.current.requestId, savedRevision.current);
+            const fresh = blankDraft(key);
+            savedRevision.current = 0;
+            savedRequestId.current = null;
+            saveFailure.current = null;
+            current.current = fresh;
+            setDraft(fresh);
+            setEdit(null);
+            setHighlight(null);
+            setError("");
+            setNotice("Draft discarded.");
+        }
+        catch (e) {
+            setError(errorMessage(e));
+        }
+    }
+    function editor(note) {
+        return _jsxs(_Fragment, { children: [_jsxs("label", { children: ["Comment", _jsx("textarea", { "aria-label": "Comment", autoFocus: true, maxLength: 2000, value: note.text, disabled: draft.submitting, onChange: event => noteChange(note.id, { text: event.target.value }), placeholder: "What should change here?" })] }), _jsx(FeedbackSpeech, { path: path, disabled: draft.submitting, onBusyChange: setDictating, onText: text => {
+                        const old = current.current.annotations.find(n => n.id === note.id);
+                        if (!old)
+                            return;
+                        const next = [old.text, text].filter(Boolean).join(" ");
+                        if (next.length > 2000) {
+                            setError("Dictation exceeds the comment limit. Shorten the comment before dictating again.");
+                            return;
+                        }
+                        noteChange(note.id, { text: next });
+                    } }), _jsxs("div", { className: "hf-actions", children: [_jsx("button", { onClick: () => void screenshot(note.id), disabled: capturing || draft.submitting, children: "Add screenshot" }), _jsx("button", { disabled: dictating, onClick: () => void done(), children: "Done" })] })] });
+    }
+    const popup = { left: Math.max(12, Math.min(highlight?.x ?? 24, innerWidth - 340)),
+        top: Math.max(12, Math.min((highlight?.y ?? 40) + (highlight?.height ?? 0) + 12, innerHeight - 250)) };
+    if (!ready)
+        return null;
+    return createPortal(_jsxs("div", { ref: root, "data-hosty-feedback": true, "data-hosty-sdk": true, style: { visibility: hidden ? "hidden" : undefined }, children: [_jsx(SdkChromeStyles, {}), _jsx("style", { children: feedbackStyles }), !open && _jsxs("button", { className: "hosty-feedback-launch", onClick: () => setOpen(true), children: ["Annotate", draft.annotations.length ? " · " + draft.annotations.length : ""] }), open && _jsxs(_Fragment, { children: [picking && _jsxs("div", { className: "hosty-feedback-launch", role: "status", children: [picking === "element" ? "Select an element" : "Drag a region", " \u00B7 Escape cancels ", _jsx("button", { onClick: () => { setPicking(null); setHighlight(null); }, children: "Cancel selection" })] }), _jsxs("aside", { className: "hf-panel", "aria-label": "Feedback draft", style: { visibility: picking ? "hidden" : undefined,
+                            ...(edit?.where === "anchor" && highlight && highlight.x > innerWidth - 400 ? { left: 12, right: "auto" } : {}) }, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("strong", { children: "Feedback" }), _jsx("small", { children: saving ? "Saving…" : saveFailure.current ? "Not saved locally" : draft.revision ? "Saved locally" : "New report" })] }), _jsx("button", { "aria-label": "Close feedback", onClick: () => { setOpen(false); setPicking(null); capture.current?.abort(); }, children: "\u00D7" })] }), _jsx("p", { children: "Collect related comments, then send them as one feedback." }), _jsxs("div", { className: "hf-actions", children: [_jsx("button", { disabled: draft.submitting, "aria-pressed": picking === "element", onClick: () => { setEdit(null); setPicking("element"); }, children: "Select element" }), _jsx("button", { disabled: draft.submitting, "aria-pressed": picking === "region", onClick: () => { setEdit(null); setPicking("region"); }, children: "Select region" }), _jsx("button", { disabled: draft.submitting, onClick: () => add({ kind: "page", label: "This page", viewport: viewport() }), children: "Page comment" })] }), picking && _jsxs("p", { role: "status", children: [picking === "element" ? "Click an element to annotate it." : "Drag over the area to annotate.", " Escape cancels selection."] }), _jsx("ol", { children: draft.annotations.map((note, index) => _jsxs("li", { children: [_jsxs("div", { className: "hf-note-heading", children: [_jsxs("button", { onClick: () => { setPicking(null); setEdit({ id: note.id, where: "anchor" }); elements.current.get(note.id)?.scrollIntoView({ block: "nearest" }); }, children: [index + 1, ". ", note.target?.label ?? "Annotation"] }), _jsx("button", { disabled: draft.submitting, onClick: () => { update({ annotations: current.current.annotations.filter(n => n.id !== note.id) }); if (edit?.id === note.id)
+                                                        setEdit(null); }, children: "Remove" })] }), edit?.id === note.id && edit.where === "side" ? editor(note) : _jsxs(_Fragment, { children: [_jsx("p", { children: note.text || "Add a comment…" }), _jsx("button", { onClick: () => { setPicking(null); setEdit({ id: note.id, where: "side" }); }, children: "Edit" })] }), note.image && _jsxs(_Fragment, { children: [_jsx(ImagePreview, { blob: note.image }), _jsx("button", { disabled: draft.submitting, onClick: () => noteChange(note.id, { image: undefined }), children: "Remove screenshot" })] })] }, note.id)) }), _jsxs("label", { children: ["Overall comment (optional)", _jsx("textarea", { maxLength: 5000, value: draft.comment, disabled: draft.submitting, onChange: event => update({ comment: event.target.value }) })] }), error && _jsx("p", { role: "alert", className: "hf-error", children: error }), notice && _jsx("p", { role: "status", children: notice }), reviewTargets.map(target => _jsx("p", { children: _jsxs("a", { href: target.href, target: "_blank", rel: "noopener noreferrer", children: ["Send to chat in ", target.label] }) }, target.href)), draft.submitting && !busy && _jsx("p", { children: "The submission may already have reached Core. Retry to recover its confirmation." }), _jsxs("footer", { children: [_jsx("button", { onClick: () => void discard(), disabled: busy, children: "Discard draft" }), _jsx("button", { className: "hf-primary", disabled: busy || dictating || capturing || !draft.annotations.length || draft.annotations.some(n => !n.text.trim()), onClick: () => void send(), children: busy ? "Sending…" : draft.submitting ? "Retry submission" : "Submit feedback" })] })] }), highlight && _jsx("div", { className: "hf-highlight", "aria-hidden": true, style: { left: highlight.x, top: highlight.y, width: highlight.width, height: highlight.height } }), selected && edit?.where === "anchor" && !picking && _jsxs("section", { className: "hf-popover", role: "dialog", "aria-label": "Annotation comment", style: popup, children: [_jsx("strong", { children: selected.target?.label ?? "Annotation" }), editor(selected)] }), preview && _jsx(CropPreview, { blob: preview.blob, onCancel: () => setPreview(null), onAccept: acceptImage })] })] }), document.body);
+}
+function CropPreview({ blob, onCancel, onAccept }) {
+    const url = useBlobUrl(blob);
+    const [crop, setCrop] = useState(null), [busy, setBusy] = useState(false), [error, setError] = useState("");
+    const dialog = useRef(null);
+    useEffect(() => {
+        const node = dialog.current;
+        node?.showModal();
+        return () => { node?.close(); };
+    }, []);
+    const start = useRef(null);
+    const point = (event) => {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        return { x: Math.max(0, Math.min(1, (event.clientX - bounds.x) / bounds.width)), y: Math.max(0, Math.min(1, (event.clientY - bounds.y) / bounds.height)) };
+    };
+    return _jsxs("dialog", { ref: dialog, className: "hf-crop", "aria-label": "Review screenshot", onCancel: event => { event.preventDefault(); if (!busy)
+            onCancel(); }, children: [_jsx("h2", { children: "Review screenshot" }), _jsx("p", { children: "Check the selected source. Drag to crop, or adjust the percentages below. Only the approved image is included." }), _jsxs("div", { className: "hf-crop-image", onPointerDown: event => { start.current = point(event); event.currentTarget.setPointerCapture(event.pointerId); }, onPointerMove: event => {
+                    if (!start.current)
+                        return;
+                    const p = point(event);
+                    setCrop({ x: Math.min(p.x, start.current.x), y: Math.min(p.y, start.current.y),
+                        width: Math.abs(p.x - start.current.x), height: Math.abs(p.y - start.current.y) });
+                }, onPointerUp: () => { start.current = null; }, children: [url && _jsx("img", { src: url, alt: "Captured screen for review", draggable: false }), crop && _jsx("div", { className: "hf-crop-selection", style: { left: crop.x * 100 + "%", top: crop.y * 100 + "%", width: crop.width * 100 + "%", height: crop.height * 100 + "%" } })] }), _jsx("div", { className: "hf-actions", children: ["x", "y", "width", "height"].map(field => _jsxs("label", { children: [field === "x" ? "Left %" : field === "y" ? "Top %" : field === "width" ? "Width %" : "Height %", _jsx("input", { type: "number", min: 0, max: 100, value: Math.round((crop?.[field] ?? (field === "width" || field === "height" ? 1 : 0)) * 100), onChange: event => setCrop({ ...(crop ?? { x: 0, y: 0, width: 1, height: 1 }), [field]: Math.max(0, Math.min(1, Number(event.target.value) / 100)) }) })] }, field)) }), error && _jsx("p", { role: "alert", children: error }), _jsxs("footer", { children: [_jsx("button", { onClick: onCancel, disabled: busy, children: "Cancel" }), _jsx("button", { onClick: () => setCrop(null), children: "Use full image" }), _jsx("button", { className: "hf-primary", disabled: busy || !!crop && (!crop.width || !crop.height), onClick: () => { setBusy(true); void cropStill(blob, crop).then(onAccept).catch(e => setError(errorMessage(e))).finally(() => setBusy(false)); }, children: "Include screenshot" })] })] });
+}
+const feedbackStyles = [
+    "[data-hosty-feedback]{font-family:var(--hs-font);font-size:14px;color:#0f1b2d;line-height:1.45}",
+    ".hosty-feedback-launch{position:fixed;left:16px;bottom:16px;z-index:2147481000;background:#fff;border:1px solid #bdc8d6;border-radius:20px;padding:10px 16px;box-shadow:0 3px 14px #0f1b2d20}",
+    "[data-hosty-feedback] button{font:inherit;cursor:pointer;border:1px solid #cbd5e1;border-radius:7px;background:#fff;padding:6px 10px;color:#0f1b2d}",
+    "[data-hosty-feedback] button:disabled{opacity:.5;cursor:not-allowed}[data-hosty-feedback] button:focus-visible,[data-hosty-feedback] textarea:focus{outline:2px solid #65a30d;outline-offset:2px}",
+    "[data-hosty-feedback] textarea{box-sizing:border-box;display:block;width:100%;min-height:90px;font:inherit;color:#0f1b2d;background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:8px;resize:vertical;margin:6px 0}",
+    "[data-hosty-feedback] .hf-primary{background:#a3e635;border-color:#84cc16}[data-hosty-feedback] .hf-error{color:#b91c1c}",
+    ".hf-panel{box-sizing:border-box;position:fixed;right:12px;top:12px;bottom:12px;width:min(360px,calc(100vw - 24px));background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:16px;box-shadow:0 10px 45px #0f1b2d30;overflow:auto;z-index:2147481001}",
+    ".hf-panel header,.hf-note-heading,.hf-panel footer,.hf-crop footer{display:flex;justify-content:space-between;align-items:center;gap:8px}.hf-panel small{display:block;color:#64748b}.hf-panel ol{padding:0;list-style:none}.hf-panel li{border:1px solid #e2e8f0;border-radius:9px;padding:10px;margin:12px 0}.hf-panel p{white-space:pre-wrap;overflow-wrap:anywhere}.hf-panel img{max-width:100%;border-radius:6px;margin:8px 0}.hf-panel footer{margin-top:14px}",
+    ".hf-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.hf-highlight{position:fixed;border:2px solid #65a30d;box-shadow:0 0 0 2px #ecfccb;pointer-events:none;z-index:2147481000;background:#a3e63518;box-sizing:border-box}",
+    ".hf-popover>strong{display:block;margin-bottom:6px}.hf-popover{position:fixed;width:min(310px,calc(100vw - 32px));box-sizing:border-box;z-index:2147481002;background:#fff;border:1px solid #84cc16;border-radius:10px;padding:12px;box-shadow:0 8px 28px #0f1b2d35}",
+    ".hf-backdrop{position:fixed;inset:0;background:#0f1b2d88;display:grid;place-items:center;z-index:2147481003;padding:16px}.hf-crop::backdrop{background:#0f1b2d88}.hf-crop{border:0;color:#0f1b2d;background:#fff;border-radius:12px;padding:20px;width:min(760px,90vw);max-height:90vh;overflow:auto}.hf-crop-image{position:relative;display:table;max-width:100%;touch-action:none}.hf-crop-image img{display:block;max-width:100%;max-height:55vh;user-select:none}.hf-crop-selection{position:absolute;border:2px solid #65a30d;background:#a3e63530;pointer-events:none;box-sizing:border-box}.hf-crop input{display:block;width:70px}"
+].join("\n");

package/dist/feedback-server.d.ts

@@ -0,0 +1,31 @@
+import type { ProviderServerOptions } from "@hosty-sdk/app/providers/server";
+import { type FeedbackCapabilities, type FeedbackSubmit, type FeedbackReport, type FeedbackCollection, type FeedbackDispatch, type FeedbackDispatchInput, type FeedbackDelivery, type FeedbackOutcome } from "@hosty-sdk/app/feedback";
+export declare class FeedbackServerClient {
+    private readonly appId;
+    private readonly core;
+    private readonly service;
+    constructor(options?: ProviderServerOptions);
+    private response;
+    private request;
+    capabilities(token: string, signal?: AbortSignal): Promise<FeedbackCapabilities>;
+    submit(input: FeedbackSubmit, token: string, signal?: AbortSignal): Promise<{
+        id: string;
+        status: string;
+    }>;
+    reviewTargets(id: string, token: string, signal?: AbortSignal): Promise<{
+        targets: {
+            label: string;
+            href: string;
+        }[];
+    }>;
+    list(token: string, signal?: AbortSignal): Promise<FeedbackCollection>;
+    change(id: string, input: {
+        expectedRevision: number;
+        workspaceId: string | null;
+        disposition?: string | null;
+    }, token: string): Promise<FeedbackReport>;
+    reserve(input: FeedbackDispatchInput, token: string): Promise<FeedbackDispatch>;
+    delivery(id: string, input: FeedbackDelivery, token: string): Promise<FeedbackDispatch>;
+    outcomes(id: string, outcomes: FeedbackOutcome[], token: string): Promise<FeedbackDispatch>;
+    image(id: string, noteId: string, token: string, signal?: AbortSignal): Promise<Response>;
+}

package/dist/feedback-server.js

@@ -0,0 +1,48 @@
+import { FeedbackError } from "@hosty-sdk/app/feedback";
+export class FeedbackServerClient {
+    appId;
+    core;
+    service;
+    constructor(options = {}) {
+        this.appId = options.appId ?? process.env.HOSTY_APP_ID ?? "";
+        this.core = new URL(options.coreOrigin ?? process.env.HOSTY_CORE_ORIGIN ?? "http://127.0.0.1:7070");
+        this.service = options.serviceToken ?? process.env.HOSTY_APP_SERVICE_TOKEN ?? "";
+        if (!this.appId || !this.service)
+            throw new FeedbackError("hosty_misconfigured", "Hosty app credentials are unavailable.", 503);
+    }
+    async response(path, token, body, signal) {
+        if (!token)
+            throw new FeedbackError("identity_required", "Sign in to use feedback.", 401);
+        const response = await fetch(new URL("/api/internal/apps/" + encodeURIComponent(this.appId) + "/" + path, this.core), {
+            method: body === undefined ? "GET" : "POST", redirect: "error", cache: "no-store",
+            signal: signal ? AbortSignal.any([signal, AbortSignal.timeout(30_000)]) : AbortSignal.timeout(30_000),
+            headers: { authorization: "Bearer " + this.service, "X-Hosty-User-Token": token, "content-type": "application/json" },
+            body: body === undefined ? undefined : JSON.stringify(body),
+        });
+        if (!response.ok) {
+            const error = await response.json().catch(() => null);
+            throw new FeedbackError(error?.code ?? "feedback_unavailable", error?.message ?? "Feedback is unavailable. Your draft is retained.", response.status);
+        }
+        return response;
+    }
+    async request(path, token, body, signal) {
+        return (await this.response(path, token, body, signal)).json();
+    }
+    capabilities(token, signal) { return this.request("ui/feedback", token, undefined, signal); }
+    submit(input, token, signal) { return this.request("ui/feedback", token, input, signal); }
+    reviewTargets(id, token, signal) { return this.request("ui/feedback/" + encodeURIComponent(id) + "/review-targets", token, undefined, signal); }
+    list(token, signal) { return this.request("feedback", token, undefined, signal); }
+    change(id, input, token) {
+        return this.request("feedback/" + encodeURIComponent(id), token, input);
+    }
+    reserve(input, token) { return this.request("feedback/dispatches", token, input); }
+    delivery(id, input, token) {
+        return this.request("feedback/dispatches/" + encodeURIComponent(id) + "/delivery", token, input);
+    }
+    outcomes(id, outcomes, token) {
+        return this.request("feedback/dispatches/" + encodeURIComponent(id) + "/outcomes", token, { outcomes });
+    }
+    image(id, noteId, token, signal) {
+        return this.response("feedback/" + encodeURIComponent(id) + "/images/" + encodeURIComponent(noteId), token, undefined, signal);
+    }
+}

package/dist/feedback-speech.d.ts

@@ -0,0 +1,6 @@
+export declare function FeedbackSpeech({ path, disabled, onText, onBusyChange }: {
+    path: string;
+    disabled: boolean;
+    onText: (text: string) => void;
+    onBusyChange: (busy: boolean) => void;
+}): import("react").JSX.Element;

package/dist/feedback-speech.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { appFetch } from "./browser-auth.js";
+import { recordingWave } from "./feedback-audio.js";
+const dispose = (op) => { if (!op)
+    return; op.controller.abort(); clearTimeout(op.timer); if (op.recorder?.state === "recording")
+    op.recorder.stop(); op.stream?.getTracks().forEach(t => t.stop()); };
+export function FeedbackSpeech({ path, disabled, onText, onBusyChange }) {
+    const [providers, setProviders] = useState([]), [choice, setChoice] = useState("");
+    const [phase, setPhase] = useState("idle"), [error, setError] = useState("");
+    const active = useRef(null), result = useRef(onText);
+    result.current = onText;
+    const endpoint = path + "/speech";
+    useEffect(() => { onBusyChange(phase !== "idle"); return () => onBusyChange(false); }, [phase, onBusyChange]);
+    useEffect(() => {
+        const abort = new AbortController();
+        void appFetch(endpoint, { credentials: "include", signal: abort.signal }).then(async (response) => {
+            const value = await response.json();
+            if (!response.ok)
+                throw new Error(value.message ?? "Speech input is unavailable.");
+            if (!abort.signal.aborted) {
+                setProviders(value.providers ?? []);
+                if (!value.granted)
+                    setError("Speech input is not enabled for this application.");
+            }
+        }).catch(e => { if (!abort.signal.aborted)
+            setError(e.message); });
+        return () => { abort.abort(); dispose(active.current); active.current = null; };
+    }, [endpoint]);
+    useEffect(() => { if (disabled) {
+        dispose(active.current);
+        active.current = null;
+        setPhase("idle");
+    } }, [disabled]);
+    const selected = providers.find(p => JSON.stringify([p.appId, p.key]) === choice) ?? (providers.length === 1 ? providers[0] : undefined);
+    function cancel() { dispose(active.current); active.current = null; setPhase("idle"); }
+    async function start() {
+        if (!selected?.available || disabled || active.current)
+            return;
+        const op = { controller: new AbortController() };
+        active.current = op;
+        const valid = () => active.current === op && !op.controller.signal.aborted;
+        setPhase("starting");
+        setError("");
+        try {
+            if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined")
+                throw new Error("This browser cannot record audio here. Type your comment instead.");
+            op.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            if (!valid()) {
+                dispose(op);
+                return;
+            }
+            const recorder = new MediaRecorder(op.stream);
+            op.recorder = recorder;
+            const chunks = [];
+            let bytes = 0;
+            recorder.ondataavailable = e => { bytes += e.data.size; if (bytes > 16 * 1024 * 1024) {
+                cancel();
+                setError("Recording is too large. Try a shorter comment.");
+            }
+            else if (e.data.size)
+                chunks.push(e.data); };
+            recorder.onerror = () => { if (valid()) {
+                cancel();
+                setError("Recording failed. Type your comment or try again.");
+            } };
+            recorder.onstop = () => {
+                clearTimeout(op.timer);
+                op.stream?.getTracks().forEach(t => t.stop());
+                if (!valid())
+                    return;
+                setPhase("transcribing");
+                void (async () => {
+                    try {
+                        const wave = await recordingWave(new Blob(chunks, { type: recorder.mimeType }));
+                        if (!valid())
+                            return;
+                        const data = new Uint8Array(await wave.arrayBuffer());
+                        let binary = "";
+                        for (let at = 0; at < data.length; at += 8192)
+                            binary += String.fromCharCode(...data.subarray(at, at + 8192));
+                        const response = await appFetch(endpoint, { method: "POST", credentials: "include", signal: op.controller.signal,
+                            headers: { "content-type": "application/json" }, body: JSON.stringify({ appId: selected.appId, key: selected.key, audio: btoa(binary) }) });
+                        const value = await response.json();
+                        if (!response.ok)
+                            throw new Error(value.message ?? "Speech recognition failed.");
+                        if (valid()) {
+                            if (typeof value.text === "string" && value.text.trim())
+                                result.current(value.text.trim());
+                            else
+                                setError("No speech detected.");
+                        }
+                    }
+                    catch (e) {
+                        if (valid())
+                            setError(e instanceof Error ? e.message : "Speech recognition failed.");
+                    }
+                    finally {
+                        if (active.current === op)
+                            cancel();
+                    }
+                })();
+            };
+            recorder.start(1000);
+            setPhase("recording");
+            op.timer = setTimeout(() => { if (recorder.state === "recording")
+                recorder.stop(); }, 60_000);
+        }
+        catch (e) {
+            if (valid()) {
+                cancel();
+                setError(e instanceof Error ? e.message : "Microphone access failed.");
+            }
+        }
+    }
+    return _jsxs("div", { className: "hf-speech", children: [providers.length > 1 && _jsxs("label", { children: ["Speech provider", _jsxs("select", { value: choice, disabled: phase !== "idle" || disabled, onChange: e => setChoice(e.target.value), children: [_jsx("option", { value: "", children: "Choose provider" }), providers.map(p => _jsx("option", { value: JSON.stringify([p.appId, p.key]), disabled: !p.available, children: p.displayName }, JSON.stringify([p.appId, p.key])))] })] }), phase === "idle" ? _jsx("button", { disabled: disabled || !selected?.available, title: error || "Dictate up to one minute", onClick: () => void start(), children: "Dictate" })
+                : _jsxs(_Fragment, { children: [_jsx("button", { disabled: phase !== "recording", onClick: () => active.current?.recorder?.stop(), children: phase === "recording" ? "Stop and transcribe" : phase === "starting" ? "Opening microphone…" : "Transcribing…" }), _jsx("button", { onClick: cancel, children: "Cancel dictation" })] }), error && _jsx("small", { role: "status", children: error })] });
+}