@mdbase-dev/ui 0.1.0-beta.121 → 0.1.0-beta.124

package/dist/SaveNotice.js

@@ -1,4 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { holdMdbaseMarkBusy, signalMdbaseMark } from "./mark-activity.js";
+/** A save shorter than this never sets the mark moving. */
+const SLOW_SAVE_MS = 600;
+/** The mark's reaction when a notice changes from `before` to `tone`; none when it first appears. */
+export function saveToneSignal(before, tone) {
+    if (before === null || before === tone)
+        return null;
+    if (tone === "attention")
+        return "error";
+    return tone === "saved" && (before === "saving" || before === "pending") ? "saved" : null;
+}
 const defaultLabels = {
     saved: "Saved",
     saving: "Saving",
@@ -9,7 +21,27 @@ const defaultLabels = {
  * The minimal save notice every mdbase app shows beside what it edits. Put it inside an
  * element with `mdbase-settle-host` so hovering or focusing that element brings a settled
  * notice back.
+ *
+ * The notice also drives the app's mark: a save that completes plays `saved`, a newly
+ * raised problem plays `error`, and a slow save bounces the mark until it ends.
  */
 export function SaveNotice({ tone, label = defaultLabels[tone], className }) {
+    const previous = useRef(null);
+    useEffect(() => {
+        const kind = saveToneSignal(previous.current, tone);
+        previous.current = tone;
+        if (kind)
+            signalMdbaseMark(kind);
+    }, [tone]);
+    useEffect(() => {
+        if (tone !== "saving")
+            return;
+        let release;
+        const timer = setTimeout(() => { release = holdMdbaseMarkBusy("bounce"); }, SLOW_SAVE_MS);
+        return () => {
+            clearTimeout(timer);
+            release?.();
+        };
+    }, [tone]);
     return _jsxs("span", { className: ["mdbase-save-notice", `is-${tone}`, tone === "saved" && "mdbase-settle", className].filter(Boolean).join(" "), "aria-live": "polite", children: [tone === "saved" && _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7" }) }), label] });
 }

package/dist/brand.d.ts

@@ -5,10 +5,21 @@ export type MdbaseMarkRect = Readonly<{
     y: number;
     width: number;
     height: number;
-    rx: number;
 }>;
-export declare const mdbaseMarkMotions: readonly ["bootstrap", "unfold", "rebalance", "conveyor"];
+/** Indeterminate waits. Each repeats until the motion is removed. */
+export declare const mdbaseMarkLoops: readonly ["orbit", "scan", "bounce", "stream", "sort", "hop"];
+/** Played once when the mark appears; the mark then rests. */
+export declare const mdbaseMarkEntrances: readonly ["keys-first", "drop", "assemble"];
+export declare const mdbaseMarkMotions: readonly ["orbit", "scan", "bounce", "stream", "sort", "hop", "keys-first", "drop", "assemble"];
+export type MdbaseMarkLoop = typeof mdbaseMarkLoops[number];
 export type MdbaseMarkMotion = typeof mdbaseMarkMotions[number];
+/** One-shot reactions to something the person did. */
+export type MdbaseMarkSignalKind = "saved" | "error";
+/** `id` changes for every occurrence, so the same kind can play twice in a row. */
+export type MdbaseMarkSignal = Readonly<{
+    kind: MdbaseMarkSignalKind;
+    id: number;
+}>;
 export declare function mdbaseMarkMotionClass(motion?: MdbaseMarkMotion): string;
 export declare const MDBASE_MARK_VIEW_BOX = "18 18 84 84";
 export declare const mdbaseMarkInkRects: readonly [{
@@ -16,75 +27,71 @@ export declare const mdbaseMarkInkRects: readonly [{
     readonly y: 22;
     readonly width: 20;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 50;
     readonly y: 22;
     readonly width: 20;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 78;
     readonly y: 22;
     readonly width: 20;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 22;
     readonly y: 44;
     readonly width: 12;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 22;
     readonly y: 66;
     readonly width: 28;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 58;
     readonly y: 66;
     readonly width: 40;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 22;
     readonly y: 88;
     readonly width: 20;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 50;
     readonly y: 88;
     readonly width: 20;
     readonly height: 10;
-    readonly rx: 2;
 }, {
     readonly x: 78;
     readonly y: 88;
     readonly width: 20;
     readonly height: 10;
-    readonly rx: 2;
 }];
 export declare const mdbaseMarkAccentRect: {
     readonly x: 42;
     readonly y: 44;
     readonly width: 56;
     readonly height: 10;
-    readonly rx: 2;
 };
+/** How much of each line is filled when `progress` of the whole is done, in reading order. */
+export declare function mdbaseMarkLineFill(progress: number): number[];
 /**
- * The platform's Frontmatter mark. Editor and Connect's own surfaces use it; the
- * segments and clipped conveyor exist so `motion.css` can animate the same SVG.
+ * The Frontmatter mark. Without `app` it is the platform's own; with `app` it is
+ * inverted, so the bars take the app's colour and the highlighted line stays ink.
+ *
+ * `motion` loops or plays an entrance, `signal` plays a one-shot reaction over
+ * whatever else is running, and `progress` (0 to 1) fills the lines in reading
+ * order over a faint copy of the mark. Animations live in `motion.css`.
  */
-export declare function MdbaseMark({ motion, className }: {
-    motion?: MdbaseMarkMotion;
-    className?: string;
+export declare function MdbaseMark({ app, motion, signal, progress, className }: {
+    app?: MdbaseAppId | undefined;
+    motion?: MdbaseMarkMotion | undefined;
+    signal?: MdbaseMarkSignal | null | undefined;
+    progress?: number | null | undefined;
+    className?: string | undefined;
 }): JSX.Element;
-/**
- * An app's mark: the platform mark inverted, so the bars take the app's colour and
- * the highlighted line stays ink. The plain mark stays the platform's own.
- */
+/** An app's mark. Kept for callers that only ever draw an app's still mark. */
 export declare function MdbaseAppMark({ app, className }: {
     app: MdbaseAppId;
     className?: string;
@@ -93,7 +100,9 @@ export declare function MdbaseAppMark({ app, className }: {
  * `mdbase` followed by the product's quieter name. Editor carries the platform mark
  * as the canonical app; Reader and Writer carry their app marks.
  */
-export declare function Wordmark({ app, motion }: {
+export declare function Wordmark({ app, motion, signal, progress }: {
     app: MdbaseAppId;
-    motion?: MdbaseMarkMotion;
+    motion?: MdbaseMarkMotion | undefined;
+    signal?: MdbaseMarkSignal | null | undefined;
+    progress?: number | null | undefined;
 }): JSX.Element;

package/dist/brand.js

@@ -1,61 +1,107 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-export const mdbaseMarkMotions = [
-    "bootstrap",
-    "unfold",
-    "rebalance",
-    "conveyor"
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+/** Indeterminate waits. Each repeats until the motion is removed. */
+export const mdbaseMarkLoops = [
+    "orbit",
+    "scan",
+    "bounce",
+    "stream",
+    "sort",
+    "hop"
 ];
+/** Played once when the mark appears; the mark then rests. */
+export const mdbaseMarkEntrances = [
+    "keys-first",
+    "drop",
+    "assemble"
+];
+export const mdbaseMarkMotions = [...mdbaseMarkLoops, ...mdbaseMarkEntrances];
+/** Long enough for each entrance in `motion.css` to finish. */
+const ENTRANCE_MS = 1300;
 export function mdbaseMarkMotionClass(motion) {
     return motion ? ` mdbase-motion-${motion}` : "";
 }
+function isEntrance(motion) {
+    return mdbaseMarkEntrances.includes(motion ?? "");
+}
 export const MDBASE_MARK_VIEW_BOX = "18 18 84 84";
 export const mdbaseMarkInkRects = [
-    { x: 22, y: 22, width: 20, height: 10, rx: 2 },
-    { x: 50, y: 22, width: 20, height: 10, rx: 2 },
-    { x: 78, y: 22, width: 20, height: 10, rx: 2 },
-    { x: 22, y: 44, width: 12, height: 10, rx: 2 },
-    { x: 22, y: 66, width: 28, height: 10, rx: 2 },
-    { x: 58, y: 66, width: 40, height: 10, rx: 2 },
-    { x: 22, y: 88, width: 20, height: 10, rx: 2 },
-    { x: 50, y: 88, width: 20, height: 10, rx: 2 },
-    { x: 78, y: 88, width: 20, height: 10, rx: 2 }
+    { x: 22, y: 22, width: 20, height: 10 },
+    { x: 50, y: 22, width: 20, height: 10 },
+    { x: 78, y: 22, width: 20, height: 10 },
+    { x: 22, y: 44, width: 12, height: 10 },
+    { x: 22, y: 66, width: 28, height: 10 },
+    { x: 58, y: 66, width: 40, height: 10 },
+    { x: 22, y: 88, width: 20, height: 10 },
+    { x: 50, y: 88, width: 20, height: 10 },
+    { x: 78, y: 88, width: 20, height: 10 }
 ];
 export const mdbaseMarkAccentRect = {
     x: 42,
     y: 44,
     width: 56,
-    height: 10,
-    rx: 2
+    height: 10
 };
-const conveyorXs = [-6, 22, 50, 78, 106];
+const lineYs = [22, 44, 66, 88];
+const orbitXs = [-34, -6, 22, 50, 78, 106];
 function classes(...names) {
     return names.filter(Boolean).join(" ");
 }
+/** How much of each line is filled when `progress` of the whole is done, in reading order. */
+export function mdbaseMarkLineFill(progress) {
+    const clamped = Math.min(1, Math.max(0, progress));
+    return lineYs.map((_, line) => Math.min(1, Math.max(0, clamped * lineYs.length - line)));
+}
 function Segment({ rect, index, accent = false }) {
-    return _jsx("rect", { className: `mdbase-mark-segment mdbase-mark-segment-${index} ${accent ? "mdbase-mark-accent" : "mdbase-mark-ink"}`, pathLength: 1, ...rect });
+    return _jsx("rect", { className: `mdbase-mark-segment mdbase-mark-segment-${index} ${accent ? "mdbase-mark-accent" : "mdbase-mark-ink"}`, ...rect });
 }
-/**
- * The platform's Frontmatter mark. Editor and Connect's own surfaces use it; the
- * segments and clipped conveyor exist so `motion.css` can animate the same SVG.
- */
-export function MdbaseMark({ motion, className }) {
-    const clipId = `mdbase-fences-${useId().replaceAll(":", "")}`;
-    return _jsxs("svg", { className: classes("mdbase-mark", className) + mdbaseMarkMotionClass(motion), viewBox: MDBASE_MARK_VIEW_BOX, "aria-hidden": "true", focusable: "false", children: [_jsx("defs", { children: _jsxs("clipPath", { id: clipId, children: [_jsx("rect", { x: "22", y: "22", width: "76", height: "10", rx: "2" }), _jsx("rect", { x: "22", y: "88", width: "76", height: "10", rx: "2" })] }) }), _jsx("g", { className: "mdbase-mark-fence mdbase-mark-fence-top", children: mdbaseMarkInkRects.slice(0, 3).map((rect, index) => _jsx(Segment, { rect: rect, index: index + 1 }, `${rect.x}-${rect.y}`)) }), _jsxs("g", { className: "mdbase-mark-row mdbase-mark-row-top", children: [_jsx(Segment, { rect: mdbaseMarkInkRects[3], index: 4 }), _jsx(Segment, { rect: mdbaseMarkAccentRect, index: 5, accent: true })] }), _jsxs("g", { className: "mdbase-mark-row mdbase-mark-row-bottom", children: [_jsx(Segment, { rect: mdbaseMarkInkRects[4], index: 6 }), _jsx(Segment, { rect: mdbaseMarkInkRects[5], index: 7 })] }), _jsx("g", { className: "mdbase-mark-fence mdbase-mark-fence-bottom", children: mdbaseMarkInkRects.slice(6).map((rect, index) => _jsx(Segment, { rect: rect, index: index + 8 }, `${rect.x}-${rect.y}`)) }), _jsx("g", { clipPath: `url(#${clipId})`, children: _jsx("g", { className: "mdbase-mark-conveyor-track", children: conveyorXs.flatMap((x) => [22, 88].map((y) => _jsx("rect", { x: x, y: y, width: "20", height: "10", rx: "2" }, `${x}-${y}`))) }) })] });
+function Lines({ clipRows }) {
+    const rows = _jsxs(_Fragment, { children: [_jsxs("g", { className: "mdbase-mark-row mdbase-mark-row-top", children: [_jsx(Segment, { rect: mdbaseMarkInkRects[3], index: 4 }), _jsx(Segment, { rect: mdbaseMarkAccentRect, index: 5, accent: true })] }), _jsxs("g", { className: "mdbase-mark-row mdbase-mark-row-bottom", children: [_jsx(Segment, { rect: mdbaseMarkInkRects[4], index: 6 }), _jsx(Segment, { rect: mdbaseMarkInkRects[5], index: 7 })] })] });
+    return _jsxs(_Fragment, { children: [_jsx("g", { className: "mdbase-mark-fence mdbase-mark-fence-top", children: mdbaseMarkInkRects.slice(0, 3).map((rect, index) => _jsx(Segment, { rect: rect, index: index + 1 }, `${rect.x}-${rect.y}`)) }), clipRows ? _jsx("g", { clipPath: `url(#${clipRows})`, children: rows }) : rows, _jsx("g", { className: "mdbase-mark-fence mdbase-mark-fence-bottom", children: mdbaseMarkInkRects.slice(6).map((rect, index) => _jsx(Segment, { rect: rect, index: index + 8 }, `${rect.x}-${rect.y}`)) })] });
 }
 /**
- * An app's mark: the platform mark inverted, so the bars take the app's colour and
- * the highlighted line stays ink. The plain mark stays the platform's own.
+ * The Frontmatter mark. Without `app` it is the platform's own; with `app` it is
+ * inverted, so the bars take the app's colour and the highlighted line stays ink.
+ *
+ * `motion` loops or plays an entrance, `signal` plays a one-shot reaction over
+ * whatever else is running, and `progress` (0 to 1) fills the lines in reading
+ * order over a faint copy of the mark. Animations live in `motion.css`.
  */
+export function MdbaseMark({ app, motion, signal, progress, className }) {
+    const uid = useId().replaceAll(":", "");
+    // An entrance plays once per mark. Dropping its class afterwards stops it replaying when a signal
+    // remounts the lines, and remembering it stops a replay when a loop or progress hands back to it.
+    const [entering, setEntering] = useState(isEntrance(motion));
+    const played = useRef(undefined);
+    useEffect(() => {
+        if (!isEntrance(motion) || played.current === motion)
+            return setEntering(false);
+        setEntering(true);
+        const timer = setTimeout(() => {
+            played.current = motion;
+            setEntering(false);
+        }, ENTRANCE_MS);
+        return () => clearTimeout(timer);
+    }, [motion]);
+    const showsProgress = typeof progress === "number" && Number.isFinite(progress);
+    const active = signal ? undefined
+        : showsProgress ? undefined
+            : isEntrance(motion) ? (entering ? motion : undefined)
+                : motion;
+    const lines = _jsx(Lines, { clipRows: active === "stream" ? `mdbase-rows-${uid}` : undefined });
+    return _jsxs("svg", { className: classes("mdbase-mark", app && "mdbase-app-mark", app && `is-${app}`, className, active && `mdbase-motion-${active}`, signal && `mdbase-signal-${signal.kind}`, showsProgress && "mdbase-mark-progress", !active && !signal && !showsProgress && "mdbase-mark-at-rest"), viewBox: MDBASE_MARK_VIEW_BOX, "aria-hidden": "true", focusable: "false", children: [active === "stream" && _jsx("defs", { children: _jsx("clipPath", { id: `mdbase-rows-${uid}`, children: _jsx("rect", { x: "22", y: "40", width: "76", height: "40" }) }) }), active === "orbit" && _jsxs("defs", { children: [_jsx("clipPath", { id: `mdbase-fence-top-${uid}`, children: _jsx("rect", { x: "22", y: "22", width: "76", height: "10" }) }), _jsx("clipPath", { id: `mdbase-fence-bottom-${uid}`, children: _jsx("rect", { x: "22", y: "88", width: "76", height: "10" }) })] }), showsProgress
+                ? _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: `mdbase-progress-${uid}`, children: mdbaseMarkLineFill(progress).map((fill, line) => _jsx("rect", { className: "mdbase-mark-progress-fill", x: "22", y: lineYs[line] - 1, height: "12", style: { width: `${(76 * fill).toFixed(2)}px` } }, line)) }) }), _jsx("g", { className: "mdbase-mark-progress-ghost", children: _jsx(Lines, {}) }), _jsx("g", { clipPath: `url(#mdbase-progress-${uid})`, children: _jsx(Lines, {}) })] })
+                // Keyed by the signal so the same reaction can restart without replaying an entrance.
+                : _jsx("g", { className: "mdbase-mark-lines", children: lines }, signal?.id ?? 0), active === "orbit" && _jsxs(_Fragment, { children: [_jsx("g", { clipPath: `url(#mdbase-fence-top-${uid})`, children: _jsx("g", { className: "mdbase-mark-track mdbase-mark-track-top", children: orbitXs.map((x) => _jsx("rect", { x: x, y: "22", width: "20", height: "10" }, x)) }) }), _jsx("g", { clipPath: `url(#mdbase-fence-bottom-${uid})`, children: _jsx("g", { className: "mdbase-mark-track mdbase-mark-track-bottom", children: orbitXs.map((x) => _jsx("rect", { x: x, y: "88", width: "20", height: "10" }, x)) }) })] })] });
+}
+/** An app's mark. Kept for callers that only ever draw an app's still mark. */
 export function MdbaseAppMark({ app, className }) {
-    return _jsxs("svg", { className: classes("mdbase-app-mark", `is-${app}`, className), viewBox: MDBASE_MARK_VIEW_BOX, "aria-hidden": "true", focusable: "false", children: [_jsx("g", { className: "mdbase-app-mark-bars", children: mdbaseMarkInkRects.map((rect) => _jsx("rect", { ...rect }, `${rect.x}-${rect.y}`)) }), _jsx("rect", { className: "mdbase-app-mark-line", ...mdbaseMarkAccentRect })] });
+    return _jsx(MdbaseMark, { app: app, className: className });
 }
 /**
  * `mdbase` followed by the product's quieter name. Editor carries the platform mark
  * as the canonical app; Reader and Writer carry their app marks.
  */
-export function Wordmark({ app, motion }) {
-    return _jsxs("span", { className: "wordmark", children: [app === "editor"
-                ? _jsx(MdbaseMark, { motion: motion, className: "wordmark-mark" })
-                : _jsx(MdbaseAppMark, { app: app, className: "wordmark-mark" }), _jsxs("span", { className: "wordmark-label", children: [_jsx("span", { children: "mdbase" }), _jsx("strong", { children: app })] })] });
+export function Wordmark({ app, motion, signal, progress }) {
+    return _jsxs("span", { className: "wordmark", children: [_jsx(MdbaseMark, { app: app === "editor" ? undefined : app, motion: motion, signal: signal, progress: progress, className: "wordmark-mark" }), _jsxs("span", { className: "wordmark-label", children: [_jsx("span", { children: "mdbase" }), _jsx("strong", { children: app })] })] });
 }

package/dist/feedback-data.d.ts

@@ -0,0 +1,75 @@
+export declare const FEEDBACK_MAX_MESSAGE_LENGTH = 5000;
+export declare const FEEDBACK_MAX_SCREENSHOT_BYTES: number;
+export declare const FEEDBACK_ERROR_CODES: readonly ["cancelled", "http_error", "invalid_response", "outcome_unknown", "partial_failure", "timeout", "network_error", "unknown_error", "save_failed", "source_open_failed", "preview_failed"];
+export type FeedbackErrorCode = typeof FEEDBACK_ERROR_CODES[number];
+export type FeedbackTopic = "problem" | "idea" | "appreciation";
+export interface FeedbackApplication {
+    product: "mdbase editor" | "mdbase reader" | "mdbase writer" | "mdbase connect";
+    source_view: string;
+    build_revision: string | null;
+    environment: "production" | "staging" | "development" | "lab";
+}
+export interface FeedbackFailure {
+    code: FeedbackErrorCode;
+    status?: number;
+}
+export interface FeedbackDiagnosticEvent extends FeedbackFailure {
+    at: string;
+}
+export interface FeedbackDiagnostics {
+    schema_version: 2;
+    browser: string;
+    operating_system: string;
+    viewport: "compact" | "medium" | "wide";
+    events: FeedbackDiagnosticEvent[];
+}
+export interface FeedbackScreenshot {
+    media_type: "image/png" | "image/jpeg";
+    filename: "screenshot.png" | "screenshot.jpg";
+    content_base64: string;
+}
+export interface FeedbackSubmission {
+    schema_version: 2;
+    request_id: string;
+    application: FeedbackApplication;
+    topic: FeedbackTopic;
+    message: string;
+    reply_email?: string;
+    context?: {
+        collection_name: string;
+    };
+    diagnostics?: FeedbackDiagnostics;
+    screenshot?: FeedbackScreenshot;
+    turnstile_token?: string;
+}
+export declare const feedbackTopics: {
+    problem: {
+        label: string;
+        prompt: string;
+        placeholder: string;
+        thanks: string;
+    };
+    idea: {
+        label: string;
+        prompt: string;
+        placeholder: string;
+        thanks: string;
+    };
+    appreciation: {
+        label: string;
+        prompt: string;
+        placeholder: string;
+        thanks: string;
+    };
+};
+/** Each provider owns its bounded, short-lived error buffer; never accepts messages or request data. */
+export declare function feedbackEvents(events: readonly FeedbackDiagnosticEvent[], now?: number): FeedbackDiagnosticEvent[];
+export declare function feedbackDiagnostics(events: readonly FeedbackDiagnosticEvent[]): FeedbackDiagnostics;
+export declare function resolveFeedbackEndpoint(configured: string | undefined, development?: boolean): string | null;
+export declare function feedbackApplication(product: FeedbackApplication["product"], sourceView: string, revision?: string, environment?: string): FeedbackApplication;
+export declare function sendFeedback(endpoint: string, submission: FeedbackSubmission, signal: AbortSignal): Promise<void>;
+export declare function screenshotUrl(screenshot: FeedbackScreenshot): string;
+export declare function screenshotFromCanvas(canvas: HTMLCanvasElement, type?: "image/png" | "image/jpeg"): Promise<FeedbackScreenshot>;
+export declare function readFeedbackScreenshot(file: File): Promise<FeedbackScreenshot>;
+/** Caller closes the native dialog first. Media is always stopped, including cancellation/unmount. */
+export declare function captureFeedbackScreenshot(signal: AbortSignal): Promise<FeedbackScreenshot>;

package/dist/feedback-data.js

@@ -0,0 +1,200 @@
+export const FEEDBACK_MAX_MESSAGE_LENGTH = 5_000;
+export const FEEDBACK_MAX_SCREENSHOT_BYTES = 3 * 1024 * 1024;
+export const FEEDBACK_ERROR_CODES = ["cancelled", "http_error", "invalid_response", "outcome_unknown", "partial_failure", "timeout", "network_error", "unknown_error", "save_failed", "source_open_failed", "preview_failed"];
+export const feedbackTopics = {
+    problem: { label: "Report a problem", prompt: "What happened?", placeholder: "What were you trying to do?", thanks: "Thanks for the report." },
+    idea: { label: "Suggest an improvement", prompt: "What would you like to improve?", placeholder: "How would it help you?", thanks: "Thanks for the idea." },
+    appreciation: { label: "Share something you like", prompt: "What’s working well for you?", placeholder: "What made a difference?", thanks: "Thanks for the kind words." }
+};
+/** Each provider owns its bounded, short-lived error buffer; never accepts messages or request data. */
+export function feedbackEvents(events, now = Date.now()) {
+    return events.filter((event) => { const age = now - Date.parse(event.at); return age >= 0 && age <= 5 * 60_000; }).slice(-30).map(({ at, code, status }) => ({ at, code, ...(status === undefined ? {} : { status }) }));
+}
+export function feedbackDiagnostics(events) {
+    const ua = navigator.userAgent;
+    const family = /Edg\//u.test(ua) ? "Edge" : /Firefox\//u.test(ua) ? "Firefox" : /Chrome\//u.test(ua) ? "Chrome" : /Safari\//u.test(ua) ? "Safari" : "Other";
+    const browserMatch = { Edge: /Edg\/(\d+)/u, Firefox: /Firefox\/(\d+)/u, Chrome: /Chrome\/(\d+)/u, Safari: /Version\/(\d+)/u, Other: /$^/u }[family].exec(ua);
+    return {
+        schema_version: 2,
+        browser: family === "Other" ? "Other" : `${family} ${browserMatch?.[1] ?? "unknown"}`,
+        operating_system: /iPhone|iPad|iPod/u.test(ua) || (/Macintosh/u.test(ua) && navigator.maxTouchPoints > 1) ? "iOS" : /Android/u.test(ua) ? "Android" : /Windows/u.test(ua) ? "Windows" : /Macintosh|Mac OS/u.test(ua) ? "macOS" : /Linux/u.test(ua) ? "Linux" : "Other",
+        viewport: window.innerWidth < 760 ? "compact" : window.innerWidth < 1200 ? "medium" : "wide",
+        events: feedbackEvents(events)
+    };
+}
+export function resolveFeedbackEndpoint(configured, development = false) {
+    const value = configured?.trim() || (development ? "http://127.0.0.1:8790/v1/feedback" : "");
+    if (!value)
+        return null;
+    try {
+        const url = new URL(value);
+        if (url.username || url.password || (url.protocol !== "https:" && !(url.protocol === "http:" && ["127.0.0.1", "localhost"].includes(url.hostname))))
+            return null;
+        return url.href;
+    }
+    catch {
+        return null;
+    }
+}
+export function feedbackApplication(product, sourceView, revision, environment) {
+    if (!/^[a-z][a-z0-9_-]{0,63}$/u.test(sourceView))
+        throw new TypeError("Feedback views must be fixed identifiers, not URLs or record paths.");
+    return { product, source_view: sourceView, build_revision: revision && /^[a-zA-Z0-9._-]{1,64}$/u.test(revision) ? revision : null, environment: environment === "staging" || environment === "development" || environment === "lab" ? environment : "production" };
+}
+export async function sendFeedback(endpoint, submission, signal) {
+    let response;
+    try {
+        response = await fetch(endpoint, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(submission), credentials: "omit", referrerPolicy: "no-referrer", signal });
+    }
+    catch (error) {
+        if (signal.aborted)
+            throw error;
+        throw new Error("Feedback could not be sent. Check your connection and try again.");
+    }
+    if (response.ok)
+        return;
+    let message = "Feedback could not be sent. Please try again.";
+    try {
+        const result = await response.json();
+        if (typeof result.error?.message === "string" && result.error.message.length <= 200)
+            message = result.error.message;
+    }
+    catch { /* Never reflect infrastructure/provider response bodies. */ }
+    throw new Error(message);
+}
+export function screenshotUrl(screenshot) { return `data:${screenshot.media_type};base64,${screenshot.content_base64}`; }
+function bytesToBase64(bytes) {
+    let binary = "";
+    for (let offset = 0; offset < bytes.length; offset += 32_768)
+        binary += String.fromCharCode(...bytes.subarray(offset, offset + 32_768));
+    return btoa(binary);
+}
+export async function screenshotFromCanvas(canvas, type = "image/png") {
+    const blob = await new Promise((resolve, reject) => canvas.toBlob((result) => result ? resolve(result) : reject(new Error("The screenshot could not be created.")), type, type === "image/jpeg" ? 0.9 : undefined));
+    if (blob.size > FEEDBACK_MAX_SCREENSHOT_BYTES)
+        throw new Error("The screenshot is larger than 3 MB. Choose a smaller image.");
+    return { media_type: type, filename: type === "image/png" ? "screenshot.png" : "screenshot.jpg", content_base64: bytesToBase64(new Uint8Array(await blob.arrayBuffer())) };
+}
+export async function readFeedbackScreenshot(file) {
+    if (file.size > FEEDBACK_MAX_SCREENSHOT_BYTES)
+        throw new Error("Choose a screenshot smaller than 3 MB.");
+    if (file.type !== "image/png" && file.type !== "image/jpeg")
+        throw new Error("Choose a PNG or JPEG screenshot.");
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    const valid = file.type === "image/png" ? [137, 80, 78, 71, 13, 10, 26, 10].every((v, i) => bytes[i] === v) : bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff;
+    if (!valid)
+        throw new Error("The screenshot does not contain a valid PNG or JPEG image.");
+    const dimensions = rasterDimensions(bytes, file.type);
+    assertImageSize(dimensions.width, dimensions.height); // Reject decompression bombs before browser decoding.
+    const url = URL.createObjectURL(file);
+    try {
+        const image = new Image();
+        image.src = url;
+        await image.decode();
+        assertImageSize(image.naturalWidth, image.naturalHeight);
+        const canvas = document.createElement("canvas");
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        const context = canvas.getContext("2d");
+        if (!context)
+            throw new Error("The screenshot could not be cleaned in this browser.");
+        context.drawImage(image, 0, 0);
+        return await screenshotFromCanvas(canvas, file.type);
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}
+function assertImageSize(width, height) {
+    if (!width || !height || width > 8192 || height > 8192 || width * height > 16_000_000)
+        throw new Error("Choose a screenshot smaller than 16 megapixels.");
+}
+function rasterDimensions(bytes, type) {
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    if (type === "image/png" && bytes.length >= 24 && String.fromCharCode(...bytes.subarray(12, 16)) === "IHDR")
+        return { width: view.getUint32(16), height: view.getUint32(20) };
+    if (type === "image/jpeg") {
+        let offset = 2;
+        while (offset + 4 <= bytes.length) {
+            if (bytes[offset++] !== 0xff)
+                break;
+            while (bytes[offset] === 0xff)
+                offset++;
+            const marker = bytes[offset++];
+            if (marker === 0xd9 || marker === 0xda || marker === undefined || offset + 2 > bytes.length)
+                break;
+            if (marker === 0x01 || (marker >= 0xd0 && marker <= 0xd7))
+                continue;
+            const length = view.getUint16(offset);
+            if (length < 2 || offset + length > bytes.length)
+                break;
+            if ([0xc0, 0xc1, 0xc2, 0xc3, 0xc5, 0xc6, 0xc7, 0xc9, 0xca, 0xcb, 0xcd, 0xce, 0xcf].includes(marker) && length >= 8)
+                return { width: view.getUint16(offset + 5), height: view.getUint16(offset + 3) };
+            offset += length;
+        }
+    }
+    throw new Error("The screenshot does not contain a valid PNG or JPEG image.");
+}
+async function bounded(promise, milliseconds, signal) {
+    let timer;
+    let abort;
+    try {
+        return await Promise.race([promise, new Promise((_, reject) => {
+                abort = () => reject(new DOMException("Capture cancelled", "AbortError"));
+                if (signal.aborted) {
+                    abort();
+                    return;
+                }
+                signal.addEventListener("abort", abort, { once: true });
+                timer = setTimeout(() => reject(new Error("The screenshot could not be captured. Try again.")), milliseconds);
+            })]);
+    }
+    finally {
+        clearTimeout(timer);
+        if (abort)
+            signal.removeEventListener("abort", abort);
+    }
+}
+/** Caller closes the native dialog first. Media is always stopped, including cancellation/unmount. */
+export async function captureFeedbackScreenshot(signal) {
+    if (!navigator.mediaDevices?.getDisplayMedia)
+        throw new Error("Screen capture isn’t available in this browser. You can attach an image instead.");
+    await bounded(new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))), 1000, signal);
+    if (signal.aborted)
+        throw new DOMException("Capture cancelled", "AbortError");
+    // The picker is intentionally not timed out: the user decides whether to grant capture.
+    const stream = await navigator.mediaDevices.getDisplayMedia({ video: { displaySurface: "browser" }, audio: false, preferCurrentTab: true, selfBrowserSurface: "include", surfaceSwitching: "exclude" });
+    const stop = () => stream.getTracks().forEach((track) => track.stop());
+    const video = document.createElement("video");
+    let frameCallback;
+    signal.addEventListener("abort", stop, { once: true });
+    try {
+        if (signal.aborted)
+            throw new DOMException("Capture cancelled", "AbortError");
+        video.muted = true;
+        video.playsInline = true;
+        video.srcObject = stream;
+        const frame = typeof video.requestVideoFrameCallback === "function" ? new Promise((resolve) => { frameCallback = video.requestVideoFrameCallback(() => resolve()); }) : Promise.resolve();
+        await bounded(Promise.all([video.play(), frame]), 5000, signal);
+        if (!video.videoWidth || !video.videoHeight || stream.getVideoTracks()[0]?.readyState === "ended")
+            throw new Error("Screen sharing ended before a screenshot was taken.");
+        const scale = Math.min(1, 1600 / video.videoWidth, 1200 / video.videoHeight);
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(video.videoWidth * scale);
+        canvas.height = Math.round(video.videoHeight * scale);
+        const context = canvas.getContext("2d");
+        if (!context)
+            throw new Error("The screenshot could not be created in this browser.");
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        stop(); // Do not leave sharing running during asynchronous PNG encoding.
+        return await screenshotFromCanvas(canvas);
+    }
+    finally {
+        stop();
+        signal.removeEventListener("abort", stop);
+        if (frameCallback !== undefined)
+            video.cancelVideoFrameCallback(frameCallback);
+        video.pause();
+        video.srcObject = null;
+    }
+}

package/dist/mark-activity.d.ts

@@ -0,0 +1,39 @@
+import type { MdbaseMarkLoop, MdbaseMarkSignal, MdbaseMarkSignalKind } from "./brand.js";
+/**
+ * What the app's mark is showing for work happening anywhere in the page. The app
+ * switcher reads it, so a save, a failure or an upload deep inside an app reaches
+ * the mark without threading state through the tree.
+ */
+export type MdbaseMarkActivity = Readonly<{
+    signal: MdbaseMarkSignal | null;
+    /** Mean of every tracked operation, 0 to 1; null when nothing is tracked. */
+    progress: number | null;
+    /** The most recently held loop; null when nothing is busy. */
+    busy: MdbaseMarkLoop | null;
+}>;
+export type MdbaseMarkProgress = Readonly<{
+    update(fraction: number): void;
+    /** Ends the operation and plays `saved`. */
+    finish(): void;
+    /** Ends the operation and plays `error`. */
+    fail(): void;
+    /** Ends the operation quietly. */
+    cancel(): void;
+}>;
+/** Plays a one-shot reaction on the mark. A fresh error is never covered by a save. */
+export declare function signalMdbaseMark(kind: MdbaseMarkSignalKind): void;
+/** Shows an operation's known progress on the mark until it finishes, fails or is cancelled. */
+export declare function trackMdbaseMarkProgress(initial?: number): MdbaseMarkProgress;
+/** Loops the mark until the returned release is called. Releasing twice is harmless. */
+export declare function holdMdbaseMarkBusy(loop: MdbaseMarkLoop): () => void;
+export declare function getMdbaseMarkActivity(): MdbaseMarkActivity;
+export declare function useMdbaseMarkActivity(): MdbaseMarkActivity;
+/**
+ * Shows `fraction` on the mark while it is a number. Becoming null or unmounting ends the
+ * operation quietly; call `signalMdbaseMark` separately if the end deserves a reaction.
+ */
+export declare function useMdbaseMarkProgress(fraction: number | null | undefined): void;
+/** Loops the mark while `loop` is set. */
+export declare function useMdbaseMarkBusy(loop: MdbaseMarkLoop | null | undefined | false): void;
+/** For tests: forget every signal, operation and hold. */
+export declare function resetMdbaseMarkActivity(): void;