@bitvea/feedback-toolbar 0.0.1

package/dist/FeedbackPanel.js

@@ -0,0 +1,622 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The two popover bodies: the note composer and the account surface.
+//
+// Both answer the same five questions the API can be asked about this visitor
+// and this project, and they answer them separately on purpose. "Sign in",
+// "this deployment has not registered yet" and "you are signed in but not
+// invited here" are three different problems with three different fixes, and a
+// reviewer who is shown a generic failure for all three cannot act on any of
+// them.
+//
+// The composer stayed named `FeedbackPanel` through the restyle: it is the
+// package's public export for "the thing a bar button opens", and the 360px
+// frame that used to wrap it was the part that had to go, not this.
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { FEEDBACK_BODY_MAX } from "./vendor/types/index.js";
+import { captureMetadata, captureScreenshot } from "./capture.js";
+import { createToolbarClient, ToolbarApiError } from "./client.js";
+import { usePrefersReducedMotion } from "./motion.js";
+import { PREFERENCES_STORE, writePreferences } from "./preferences.js";
+import { dockLayout, lightTheme, motion, motionTransform, radii, resetBox, sizes, spacing, TOOLBAR_DOCKS, transition, typeScale, } from "./tokens.js";
+/** The note composer: free text plus a screenshot of the current viewport. */
+export function FeedbackPanel({ config, phase, theme = lightTheme, onReloadSession, onDone, }) {
+    const client = useMemo(() => createToolbarClient(config.apiUrl), [config.apiUrl]);
+    if (phase.kind === "loading") {
+        return _jsx(Muted, { theme: theme, children: "Loading\u2026" });
+    }
+    if (phase.kind === "error") {
+        return (_jsxs(Stack, { children: [_jsx(Muted, { theme: theme, role: "alert", children: phase.message }), _jsx(Button, { theme: theme, onClick: onReloadSession, children: "Try again" })] }));
+    }
+    switch (phase.session.state) {
+        case "signed_out":
+            return (_jsxs(Stack, { children: [_jsx(Muted, { theme: theme, children: "Sign in to leave feedback, from the account button in the bar." }), _jsx(SignIn, { theme: theme, client: client, onSignedIn: onReloadSession })] }));
+        case "no_project":
+            return (_jsx(Muted, { theme: theme, children: "This deployment has not registered with BitVea Feedback yet. It registers on its first build, so try again after the next deploy." }));
+        case "no_access":
+            return (_jsxs(Muted, { theme: theme, children: ["You do not have access to this project. Ask a BitVea admin to invite", " ", _jsx("strong", { 
+                        // 500, stated. A bare `<strong>` inherits the UA's `bold` - 700
+                        // against a 400 parent - which is the one weight DESIGN.md says
+                        // the face never appears in, and a host `strong { font-weight:
+                        // 900 }` beats the UA with nothing here to override it.
+                        style: { color: theme.colors.ink, fontWeight: 500 }, children: phase.session.user?.email }), " ", "to it."] }));
+        case "ready":
+            return (_jsx(SubmitFeedback, { theme: theme, client: client, config: config, organizationId: phase.session.project.id, onDone: onDone }));
+    }
+}
+/**
+ * Identity, sign out, and the theme override. The magic-link flow lives here
+ * now rather than in the composer: signing in is an account action, and a
+ * reviewer who is signed out sees the same surface whichever button they
+ * reached for.
+ */
+export function AccountSurface({ config, phase, theme = lightTheme, mode, onModeChange, onReloadSession, }) {
+    const client = useMemo(() => createToolbarClient(config.apiUrl), [config.apiUrl]);
+    const [signingOut, setSigningOut] = useState(false);
+    async function signOut() {
+        setSigningOut(true);
+        try {
+            await client.signOut();
+        }
+        catch {
+            // Either it worked or the cookie is unreachable from here; re-resolving
+            // shows the truth either way, and an error toast for a sign-out that
+            // probably succeeded is worse than the reload.
+        }
+        finally {
+            setSigningOut(false);
+            onReloadSession();
+        }
+    }
+    const user = phase.kind === "session" ? phase.session.user : undefined;
+    return (_jsxs(Stack, { children: [phase.kind === "loading" ? _jsx(Muted, { theme: theme, children: "Loading\u2026" }) : null, phase.kind === "error" ? (_jsxs(Stack, { gap: spacing.xxs, children: [_jsx(Muted, { theme: theme, role: "alert", children: phase.message }), _jsx(Button, { theme: theme, onClick: onReloadSession, children: "Try again" })] })) : null, user ? (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: spacing.xs }, children: [_jsx(Avatar, { theme: theme, name: user.name, email: user.email, size: 28 }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("div", { style: {
+                                    color: theme.colors.ink,
+                                    ...typeScale.bodySmStrong,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                }, children: displayNameFor(user.name, user.email) }), (user.name ?? "").trim().length === 0 ? null : (_jsx("div", { style: {
+                                    // The address is an identifier, so it takes the mono voice
+                                    // the rest of the product gives identifiers - and `body`
+                                    // rather than `mute`, 3.4:1 on this ground at 12px.
+                                    color: theme.colors.body,
+                                    ...typeScale.captionMono,
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                }, children: user.email }))] })] })) : null, phase.kind === "session" && phase.session.state === "signed_out" ? (_jsx(SignIn, { theme: theme, client: client, onSignedIn: onReloadSession })) : null, phase.kind === "session" && phase.session.state === "no_access" ? (_jsx(Muted, { theme: theme, children: "You are signed in but not invited to this project." })) : null, phase.kind === "session" && phase.session.project ? (_jsxs(Muted, { theme: theme, children: ["Reporting against", " ", _jsx("strong", { style: { color: theme.colors.ink, fontWeight: 500 }, children: phase.session.project.name }), "."] })) : null, _jsx(ThemeChoice, { theme: theme, mode: mode, onModeChange: onModeChange }), _jsx(DockChoice, { theme: theme }), user ? (_jsx(Button, { theme: theme, tone: "quiet", disabled: signingOut, onClick: () => void signOut(), children: signingOut ? "Signing out…" : "Sign out" })) : null] }));
+}
+const THEME_CHOICES = [
+    { mode: "system", label: "Auto" },
+    { mode: "light", label: "Light" },
+    { mode: "dark", label: "Dark" },
+];
+/**
+ * Three states rather than a two-way switch, because "follow this app" is a
+ * real answer and the only one that stays correct when the host flips its own
+ * scheme mid-session.
+ */
+function ThemeChoice({ theme, mode, onModeChange, }) {
+    return (_jsxs("div", { role: "group", "aria-label": "Toolbar theme", children: [_jsx("div", { style: {
+                    marginBottom: spacing.xxs,
+                    color: theme.colors.body,
+                    ...typeScale.caption,
+                }, children: "Theme" }), _jsx("div", { style: {
+                    display: "flex",
+                    // 4px, the base unit, replacing an off-grid 2px. It also makes the
+                    // track and thumb radii concentric: an 8px outer corner with a 4px
+                    // gutter leaves exactly a 4px inner corner.
+                    gap: spacing.xxs,
+                    padding: spacing.xxs,
+                    background: theme.colors.canvasSoft2,
+                    border: `1px solid ${theme.colors.hairline}`,
+                    borderRadius: radii.md,
+                }, children: THEME_CHOICES.map((choice) => {
+                    const selected = choice.mode === mode;
+                    return (_jsx("button", { type: "button", "data-testid": `toolbar-theme-${choice.mode}`, "aria-pressed": selected, onClick: () => onModeChange(choice.mode), style: {
+                            flex: 1,
+                            padding: `${spacing.xxs} 0`,
+                            border: "none",
+                            // 4px, concentric inside the track's 8px. See the gutter note
+                            // above.
+                            borderRadius: radii.xs,
+                            background: selected ? theme.colors.canvas : "transparent",
+                            // DESIGN.md's Level 1 inset hairline, not the popover shadow:
+                            // Level 5's 24px drop is for modal surfaces, and under a
+                            // 24px-tall segment it read as a card floating inside the card
+                            // it sits in. One token now, shared with the inbox's identical
+                            // control.
+                            boxShadow: selected ? theme.shadows.insetHairline : "none",
+                            color: selected ? theme.colors.ink : theme.colors.body,
+                            ...typeScale.caption,
+                            fontWeight: selected ? 500 : 400,
+                            cursor: "pointer",
+                            outline: "revert",
+                        }, children: choice.label }, choice.mode));
+                }) })] }));
+}
+const DOCK_ROW = { top: 1, middle: 2, bottom: 3 };
+const DOCK_COLUMN = {
+    left: 1,
+    center: 2,
+    right: 3,
+};
+const DOCK_BAND = {
+    top: "Top",
+    middle: "Middle",
+    bottom: "Bottom",
+};
+const DOCK_SIDE = {
+    left: "left",
+    center: "centre",
+    right: "right",
+};
+/**
+ * Where the bar sits, as a 3x3 map of the viewport with the middle cell
+ * missing - because the middle of the viewport is not an edge.
+ *
+ * This is issue #21's "the position is also settable from the toolbar's own
+ * menu, so it is not mouse-only", and it is a map rather than a list of eight
+ * names because the thing being chosen is a place: a cell whose dot sits where
+ * the bar would sit needs no label read to be understood. The accessible names
+ * are there for the reviewer who cannot see it.
+ *
+ * `ThemeChoice`'s chrome, deliberately: same `canvasSoft2` track, same 4px
+ * gutter inside an 8px radius leaving a concentric 4px inner corner, same
+ * Level 1 inset hairline on the selected cell. Two controls one above the
+ * other in the same popover that looked like two different systems would be
+ * worse than either.
+ *
+ * WIRED STRAIGHT TO THE STORE rather than through props, and that is an API
+ * decision. `AccountSurfaceProps` is exported from index.ts on the one package
+ * in this repo that publishes to npm, so a new required prop there is a
+ * breaking change to a shipped type for every host that renders this surface
+ * itself. The preference is module-scope state with a subscription already -
+ * which is also why there is no component copy of the dock to keep in step
+ * with what the drag writes.
+ *
+ * The route from a COLLAPSED bar is dot -> expand -> account -> here. Two
+ * keystrokes further than from the expanded bar, because the collapsed form is
+ * a single control by design; it is a longer path, not a dead end.
+ */
+function DockChoice({ theme }) {
+    const { dock } = useSyncExternalStore(PREFERENCES_STORE.subscribe, PREFERENCES_STORE.getSnapshot, 
+    // The same server snapshot the bar itself reads through, so this control
+    // and the dock it sets cannot render two different answers during
+    // hydration inside somebody else's application.
+    PREFERENCES_STORE.getServerSnapshot);
+    return (_jsxs("div", { role: "group", "aria-label": "Toolbar position", children: [_jsx("div", { style: {
+                    marginBottom: spacing.xxs,
+                    color: theme.colors.body,
+                    ...typeScale.caption,
+                }, children: "Position" }), _jsx("div", { style: {
+                    display: "grid",
+                    // Square cells, so the block reads as a viewport rather than as
+                    // three rows of segments. `fit-content` because a 3x3 map stretched
+                    // to the popover's full 280px would be three 80x28 slabs.
+                    gridTemplateColumns: `repeat(3, ${sizes.icon})`,
+                    gap: spacing.xxs,
+                    width: "fit-content",
+                    padding: spacing.xxs,
+                    background: theme.colors.canvasSoft2,
+                    border: `1px solid ${theme.colors.hairline}`,
+                    borderRadius: radii.md,
+                }, children: TOOLBAR_DOCKS.map((value) => {
+                    const { vertical, horizontal, alignItems } = dockLayout(value);
+                    const selected = value === dock;
+                    return (_jsx("button", { type: "button", "data-testid": `toolbar-dock-${value}`, "aria-pressed": selected, "aria-label": `${DOCK_BAND[vertical]} ${DOCK_SIDE[horizontal]}`, title: `${DOCK_BAND[vertical]} ${DOCK_SIDE[horizontal]}`, onClick: () => writePreferences({ dock: value }), style: {
+                            // Placed by its own axes rather than by source order, which is
+                            // what leaves the middle cell empty with no spacer element to
+                            // render and no list to keep in the right order.
+                            gridColumn: DOCK_COLUMN[horizontal],
+                            gridRow: DOCK_ROW[vertical],
+                            display: "flex",
+                            // The dot sits where the bar would sit. `alignItems` off
+                            // `dockLayout` is the same value the real dock uses for its
+                            // horizontal placement, so the map cannot drift from the thing
+                            // it maps; the vertical half is the row above.
+                            justifyContent: alignItems,
+                            alignItems: vertical === "top"
+                                ? "flex-start"
+                                : vertical === "bottom"
+                                    ? "flex-end"
+                                    : "center",
+                            height: sizes.icon,
+                            padding: spacing.xxs,
+                            boxSizing: "border-box",
+                            border: "none",
+                            // 4px, concentric inside the track's 8px. See ThemeChoice.
+                            borderRadius: radii.xs,
+                            background: selected ? theme.colors.canvas : "transparent",
+                            boxShadow: selected ? theme.shadows.insetHairline : "none",
+                            cursor: "pointer",
+                            outline: "revert",
+                        }, children: _jsx("span", { "aria-hidden": "true", style: {
+                                width: spacing.xxs,
+                                height: spacing.xxs,
+                                borderRadius: radii.pill,
+                                background: selected
+                                    ? theme.colors.ink
+                                    : theme.colors.hairlineStrong,
+                            } }) }, value));
+                }) })] }));
+}
+/* ── Sign in ──────────────────────────────────────────────────────────── */
+function SignIn({ theme, client, onSignedIn, }) {
+    const [email, setEmail] = useState("");
+    const [sending, setSending] = useState(false);
+    const [sent, setSent] = useState(false);
+    const [error, setError] = useState(null);
+    async function onSubmit(e) {
+        e.preventDefault();
+        setSending(true);
+        setError(null);
+        try {
+            await client.requestMagicLink(email);
+            setSent(true);
+        }
+        catch {
+            setError("Could not send the link. Check your connection and retry.");
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    if (sent) {
+        return (_jsxs(Stack, { children: [_jsxs(Muted, { theme: theme, role: "status", children: ["If ", email, " has access, a sign-in link is on its way. Open it, then come back to this tab."] }), _jsx(Button, { theme: theme, onClick: onSignedIn, children: "I have signed in" })] }));
+    }
+    return (_jsx("form", { onSubmit: onSubmit, style: { ...resetBox }, children: _jsxs(Stack, { children: [_jsx(Muted, { theme: theme, children: "No password, just a link." }), _jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@bitvea.com", "aria-label": "Email", "data-testid": "toolbar-email", style: inputStyle(theme) }), error ? _jsx(ErrorText, { theme: theme, children: error }) : null, _jsx(Button, { theme: theme, type: "submit", disabled: sending || email.length === 0, children: sending ? "Sending…" : "Email me a link" })] }) }));
+}
+/* ── Submit ───────────────────────────────────────────────────────────── */
+function SubmitFeedback({ theme, client, config, organizationId, onDone, }) {
+    const [body, setBody] = useState("");
+    const [state, setState] = useState("idle");
+    const [error, setError] = useState(null);
+    const trimmed = body.trim();
+    const tooLong = trimmed.length > FEEDBACK_BODY_MAX;
+    const canSend = trimmed.length > 0 && !tooLong && state !== "sending";
+    async function send() {
+        setState("sending");
+        setError(null);
+        // `body` is left alone on the failure path below: retyping a paragraph
+        // because the network blinked is the fastest way to lose a reviewer.
+        try {
+            const screenshot = await captureScreenshot();
+            await client.submit({
+                organizationId,
+                kind: "GENERAL",
+                body: trimmed,
+                metadata: captureMetadata(config),
+                ...(screenshot ? { screenshot } : {}),
+            });
+            setState("sent");
+            setBody("");
+        }
+        catch (err) {
+            setState("idle");
+            setError(messageFor(err));
+        }
+    }
+    if (state === "sent") {
+        return (_jsxs(Stack, { children: [_jsx("p", { style: {
+                        ...resetBox,
+                        color: theme.colors.success,
+                        ...typeScale.bodySm,
+                    }, role: "status", children: "Thanks, that reached the team." }), _jsxs("div", { style: { display: "flex", gap: spacing.xs }, children: [_jsx(Button, { theme: theme, onClick: () => setState("idle"), children: "Leave more feedback" }), onDone ? (_jsx(Button, { theme: theme, tone: "quiet", onClick: onDone, children: "Done" })) : null] })] }));
+    }
+    return (_jsx("form", { onSubmit: (e) => {
+            e.preventDefault();
+            if (canSend)
+                void send();
+        }, 
+        // See the sign-in form above: unstyled markup in somebody else's page is
+        // markup their element rules own.
+        style: { ...resetBox }, children: _jsxs(Stack, { children: [_jsx("textarea", { value: body, onChange: (e) => setBody(e.target.value), rows: 4, placeholder: "What is wrong with this page?", "aria-label": "Feedback", "data-testid": "toolbar-body", style: {
+                        ...inputStyle(theme),
+                        resize: "vertical",
+                        minHeight: "84px",
+                    } }), tooLong ? (_jsxs(ErrorText, { theme: theme, children: ["That is longer than ", FEEDBACK_BODY_MAX, " characters. Trim it and send again."] })) : null, error ? (_jsxs(Stack, { gap: spacing.xxs, children: [_jsx(ErrorText, { theme: theme, children: error }), _jsx(Muted, { theme: theme, children: "Your text is still here. Send it again when ready." })] })) : null, _jsx(Button, { theme: theme, type: "submit", disabled: !canSend, children: state === "sending" ? "Sending…" : "Send feedback" }), _jsx(Manifest, { theme: theme, config: config })] }) }));
+}
+function messageFor(err) {
+    if (!(err instanceof ToolbarApiError))
+        return "Could not send that.";
+    switch (err.code) {
+        case "not_invited_to_project":
+            return "You are not invited to this project any more.";
+        case "unauthorized":
+            return "Your session expired. Sign in again.";
+        case "network_error":
+            return "Could not reach the feedback service.";
+        case "screenshot_too_large":
+            return "The screenshot was too large to store.";
+        default:
+            return "Could not send that.";
+    }
+}
+/* ── Small presentational pieces ──────────────────────────────────────── */
+/**
+ * Two letters from whatever the account has. Magic-link reviewers have no
+ * avatar image at all - there is no provider to fetch one from - so initials
+ * are the primary representation here rather than a fallback, and the pin
+ * markers use the same function so one person reads the same on both.
+ */
+export function initialsFor(name, email) {
+    const source = (name ?? "").trim();
+    if (source.length > 0) {
+        const parts = source.split(/\s+/).filter((p) => p.length > 0);
+        const first = parts[0]?.[0] ?? "";
+        const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? "") : "";
+        return (first + last).toUpperCase();
+    }
+    return (email.trim()[0] ?? "?").toUpperCase();
+}
+/**
+ * What to PRINT for a person, as opposed to what to draw in their avatar.
+ *
+ * Better Auth's magic-link plugin stores `name: name || ""`, and a magic-link
+ * sign-up never asks for one - so every invited reviewer has an empty display
+ * name, which is most of the people whose words appear in a thread. Printing
+ * `author.name` raw therefore rendered an empty bold span followed by a reply
+ * body, and a two-person thread read as one unattributed run of text.
+ *
+ * The address is what identifies them, which is the same fallback the status
+ * attribution line and `initialsFor` already use. One helper so the three
+ * cannot drift.
+ */
+export function displayNameFor(name, email) {
+    const trimmed = (name ?? "").trim();
+    return trimmed.length > 0 ? trimmed : email;
+}
+/**
+ * `YYYY-MM-DD HH:mm`, in the reviewer's own timezone.
+ *
+ * Not `toLocaleString()`: an ISO-shaped stamp sorts as it reads, is the same
+ * width on every row so a column of them lines up, and does not silently
+ * become `9/4/2026, 12:00:00 PM` for one reviewer and `04.09.2026, 12:00` for
+ * the next when they are looking at the same thread. The timezone is the
+ * reviewer's own because the question a stamp answers here is "was this before
+ * or after the thing I remember doing".
+ */
+export function formatStamp(iso) {
+    const at = new Date(iso);
+    if (Number.isNaN(at.getTime()))
+        return iso;
+    const pad = (n) => String(n).padStart(2, "0");
+    return (`${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}` +
+        ` ${pad(at.getHours())}:${pad(at.getMinutes())}`);
+}
+/**
+ * "just now", "4m", "3h", "2d" - and `formatStamp` past a week.
+ *
+ * BESIDE `formatStamp` rather than instead of it, and the two are answering
+ * different questions. A thread is a conversation, and the useful fact about
+ * the reply above yours is how long ago it landed; that comment's own argument
+ * - "was this before or after the thing I remember doing" - is about a row in
+ * a list, and it still holds, which is why every relative stamp this renders
+ * carries the absolute one in a `title` (issue #20's message header).
+ *
+ * The relative units are deliberately ASCII-short and locale-free, for exactly
+ * the reason `formatStamp` refuses `toLocaleString`: `Intl.RelativeTimeFormat`
+ * would render "4 minutes ago" for one reviewer and "vor 4 Minuten" for the
+ * next, at two different widths, in a 12px mono cluster that has to stay one
+ * line.
+ *
+ * `now` is an argument rather than a `Date.now()` read so a test can state the
+ * moment instead of racing the clock. There is deliberately no ticking
+ * interval behind this: the thread re-reads its item after every reply and
+ * every status move, and a `setInterval` per open thread inside somebody
+ * else's page is a cost with no reader.
+ */
+export function relativeStamp(iso, now = Date.now()) {
+    const at = new Date(iso).getTime();
+    if (Number.isNaN(at))
+        return iso;
+    const seconds = Math.round((now - at) / 1000);
+    // Also the answer for a stamp slightly in the future, which ordinary clock
+    // skew between the reviewer's machine and the API produces on every reply
+    // they have just posted. "-1m" would be a bug report.
+    if (seconds < 60)
+        return "just now";
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h`;
+    const days = Math.floor(hours / 24);
+    if (days < 7)
+        return `${days}d`;
+    // Weeks and months, out to a quarter. The ladder used to stop at seven days
+    // on the argument that "9d" is harder to read than the date it stands for -
+    // true of "9d", and it threw away the wrong half. A reviewer asking "have I
+    // dealt with this" wants an AGE, and "3w" answers that where "2026-08-28
+    // 11:12" makes them do the subtraction.
+    //
+    // A quarter is where it stops, because that is roughly where an age stops
+    // being the more useful fact: past it, "5mo" and "7mo" are the same thing to
+    // a reader, and the date is what they would go looking for anyway. Every one
+    // of these carries the absolute stamp in a `title`, so nothing is lost at any
+    // rung.
+    const weeks = Math.floor(days / 7);
+    if (days < 30)
+        return `${weeks}w`;
+    const months = Math.floor(days / 30);
+    if (days < 90)
+        return `${months}mo`;
+    return formatStamp(iso);
+}
+export function Avatar({ theme, name, email, size = 24, }) {
+    return (_jsx("span", { "aria-hidden": "true", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: `${size}px`,
+            height: `${size}px`,
+            // Set rather than inherited: the ring is a border, and under a host
+            // page's default `content-box` a 22px avatar would render 24px and
+            // shove the row it sits in. See FeedbackToolbar.tsx's note.
+            boxSizing: "border-box",
+            flex: "0 0 auto",
+            borderRadius: radii.pill,
+            // Neutral, not the accent. An avatar is who somebody is, which is
+            // metadata; the accent is reserved for the one identity object that
+            // has to be findable over arbitrary host content, and that is the pin
+            // teardrop. Every avatar in the product being orange also made two
+            // different people look like the same person at a glance.
+            background: theme.colors.canvasSoft2,
+            color: theme.colors.body,
+            // 12px at every size: the sizes in use run 22-28px, and 12px is the
+            // smallest step this system has. The old `size * 0.42` produced 9px
+            // and 10px, which are on no step at all.
+            ...typeScale.caption,
+            fontWeight: 500,
+            border: `1px solid ${theme.colors.hairline}`,
+        }, children: initialsFor(name, email) }));
+}
+export function inputStyle(theme) {
+    return {
+        width: "100%",
+        boxSizing: "border-box",
+        padding: `${spacing.xs} ${spacing.sm}`,
+        border: `1px solid ${theme.colors.hairline}`,
+        borderRadius: radii.sm,
+        ...typeScale.bodySm,
+        color: theme.colors.ink,
+        // `canvas`, not `canvasSoft`. DESIGN.md's form-input specifies the canvas
+        // ground, and this field sits inside a canvas popover: on the soft tone it
+        // rendered DARKER than the surface holding it, which inverts the surface
+        // ladder at the most visible place in the product. The border is what
+        // makes the field a field.
+        background: theme.colors.canvas,
+        // Restores the platform focus ring on a host that suppressed it with
+        // `*:focus { outline: none }` - `revert` rolls this declaration back past
+        // every author rule to the UA's own.
+        outline: "revert",
+    };
+}
+export function Stack({ children, gap = spacing.sm, }) {
+    return (_jsx("div", { style: { display: "flex", flexDirection: "column", gap }, children: children }));
+}
+export function Muted({ children, role, theme, }) {
+    return (_jsx("p", { role: role, style: {
+            ...resetBox,
+            color: theme.colors.body,
+            ...typeScale.bodySm,
+        }, children: children }));
+}
+export function ErrorText({ children, theme, }) {
+    return (_jsx("p", { role: "alert", style: { ...resetBox, color: theme.colors.error, ...typeScale.bodySm }, children: children }));
+}
+export function Button({ children, onClick, type = "button", disabled, theme, tone = "solid", }) {
+    const quiet = tone === "quiet";
+    // See BarButton: an inline style cannot express `:focus-visible`, and a host
+    // `*:focus { outline: none }` would otherwise leave this control with no
+    // keyboard focus state at all. Hover and press are here for the same reason,
+    // and mirror `ThreadButton` in PinLayer deliberately - it is the same control
+    // on the other surface, and the two would otherwise drift.
+    const [focused, setFocused] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const reduced = usePrefersReducedMotion();
+    return (_jsx("button", { type: type, onClick: onClick, disabled: disabled, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onPointerEnter: () => setHovered(true), onPointerLeave: () => {
+            setHovered(false);
+            setPressed(false);
+        }, onPointerDown: () => setPressed(true), onPointerUp: () => setPressed(false), onPointerCancel: () => setPressed(false), style: {
+            padding: `${spacing.xs} ${spacing.sm}`,
+            // Ink is the primary action's fill, as DESIGN.md's button-primary
+            // specifies. It used to be the brand orange, which put the accent on
+            // every button in the product and left nothing to mean "BitVea".
+            // `onInk` rather than white: `ink` flips to #ffffff in the dark
+            // palette, and white-on-white is what a literal would have shipped.
+            // The hover fill is the quiet tone's only - the faint shift toward
+            // `canvasSoft2` DESIGN.md's Known Gaps describes. There is no ink-hover
+            // step in this palette and inventing one belongs in a pull request of
+            // its own; the solid tone's feedback is the press below.
+            background: disabled
+                ? theme.colors.hairline
+                : quiet
+                    ? hovered
+                        ? theme.colors.canvasSoft2
+                        : "transparent"
+                    : theme.colors.ink,
+            // `mute` on `hairline` measures 3.0:1, and the disabled "Send
+            // feedback" is the first thing a reviewer sees every time the composer
+            // opens. `body` on the same fill is 7.1:1 light and 5.6:1 dark; the
+            // flat fill and the cursor are what say "disabled".
+            color: disabled
+                ? theme.colors.body
+                : quiet
+                    ? theme.colors.body
+                    : theme.colors.onInk,
+            border: quiet ? `1px solid ${theme.colors.hairline}` : "none",
+            // 6px, DESIGN.md's in-app button shape. The bar is the one control
+            // here that is deliberately pill-shaped; everything inside a popover
+            // is a form control and takes the form-control radius.
+            borderRadius: radii.sm,
+            ...typeScale.bodySmStrong,
+            cursor: disabled ? "not-allowed" : "pointer",
+            outline: "revert",
+            boxShadow: focused ? theme.shadows.focusRing : "none",
+            // A leaf control with no fixed descendants, so a transform is safe
+            // here. It is not safe on the toolbar ROOT, which is the ancestor
+            // every `position: fixed` pin marker resolves against and would become
+            // their containing block.
+            transform: motionTransform(pressed && !disabled ? `scale(${motion.pressScale})` : "none", reduced),
+            transition: transition(["background-color", "color", "transform"], motion.duration.instant, motion.easing.inOut, reduced),
+        }, children: children }));
+}
+/**
+ * What leaves with this report, printed rather than described.
+ *
+ * This used to be a sentence - "Sent with the page URL, viewport, browser,
+ * branch, commit and a screenshot" - which is a promise about facts the
+ * toolbar is holding in its hand. A reviewer filing against the wrong
+ * deployment cannot tell from a sentence; they can from the branch and the
+ * seven characters of SHA. So the four verifiable facts are shown as
+ * themselves, in the mono voice the rest of the product gives identifiers.
+ *
+ * The prose line stays for the two that cannot be shown: the browser string is
+ * long and uninteresting until it matters, and the screenshot does not exist
+ * yet. That sentence is doing CONSENT work on a tool that silently rasterises
+ * whatever is on a reviewer's screen on somebody else's staging site, so it is
+ * not decoration and does not get dropped for density.
+ */
+function Manifest({ theme, config, }) {
+    // Read on every render rather than memoised: the reviewer can resize the
+    // window with the composer open, and a stale viewport here would be a claim
+    // about the report that is not true. This whole tree is client-only, so
+    // `window` is safe to read - see the portal note in FeedbackToolbar.tsx.
+    const meta = captureMetadata(config);
+    const facts = [
+        pathOf(meta.pageUrl),
+        `${meta.viewportWidth}×${meta.viewportHeight}`,
+        meta.gitBranch ?? meta.environment,
+        meta.gitCommit?.slice(0, 7),
+    ].filter((fact) => typeof fact === "string" && fact !== "");
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: spacing.xxs }, children: [_jsx("p", { "data-testid": "toolbar-manifest", style: {
+                    ...resetBox,
+                    color: theme.colors.body,
+                    ...typeScale.captionMono,
+                    overflowWrap: "anywhere",
+                }, children: facts.join(" · ") }), _jsx("p", { style: {
+                    // `body`, not `mute`. This is the one sentence on the surface doing
+                    // CONSENT work - it is what tells a reviewer that pressing Send
+                    // rasterises whatever is on their screen on somebody else's staging
+                    // site - and `mute` is #888888 on white, 3.5:1 at 12px, which is
+                    // below AA and the same reading the rest of this file already
+                    // refuses for far less important labels.
+                    ...resetBox,
+                    color: theme.colors.body,
+                    ...typeScale.caption,
+                }, children: "Sent with your browser string and a screenshot of this viewport." })] }));
+}
+/** The path alone, since the origin is the page the reviewer is looking at. */
+function pathOf(url) {
+    try {
+        return new URL(url).pathname;
+    }
+    catch {
+        return url;
+    }
+}
+//# sourceMappingURL=FeedbackPanel.js.map