@bitvea/feedback-toolbar 0.0.1

package/dist/FeedbackToolbar.js

@@ -0,0 +1,1149 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The toolbar shell: a floating bar at the bottom centre of the host page, and
+// the popovers its buttons open.
+//
+// The shell owns the gate, which tool is active, and the theme. What matters
+// most here is the gate: when the toolbar is disabled this component returns
+// null before anything else runs, so a production build renders no markup and
+// issues no request. That is a hard requirement rather than hidden UI, and it
+// is why the early return is the very first statement and why nothing in this
+// file fetches on mount.
+//
+// There is no panel any more. A fixed 360px panel sits badly over an arbitrary
+// host app, and the surfaces it held want different shapes: the note composer
+// is small, the account surface is smaller still, and anything list-shaped
+// belongs in the inbox sheet. Each bar button therefore opens a popover
+// anchored to itself.
+//
+// The bar has TWO FORMS, and issue #22 is why: one full pill is permanently in
+// the way of the very page it exists to review - on a narrow viewport, or for
+// a reviewer who is reading rather than annotating - and the only alternative
+// used to be not having the toolbar at all.
+//
+// The collapsed form is ONE CIRCULAR DOT: the product mark, the unread
+// indicator on its edge, and a click anywhere on it to bring the bar back. It
+// was a two-control rectangle - the note action beside a hamburger - and the
+// argument for that was that a horizontal strip is the only orientation a
+// bottom-edge dock can ask for. Issue #21 removed that argument by making the
+// dock movable, and a circle is the one shape that reads the same at all eight
+// of them: it has no orientation to get wrong, and its diameter is the
+// expanded bar's own height, so a collapse reads as the bar's ends closing in
+// rather than as the bar also changing thickness. The cost is stated where it
+// falls, in `setCollapsed`: with no note button in this form, the composer can
+// no longer survive a collapse.
+//
+// AND THE BAR MOVES, which is issue #21. Eight discrete docks, dragged by the
+// bar's own body and chosen from a 3x3 grid in the account surface for anybody
+// not using a mouse, remembered in the same preference record as the collapsed
+// flag. What is NOT here is a stored coordinate: see `ToolbarDock` in
+// tokens.ts for why that makes "never leaves the bar off-screen" and "a resize
+// re-docks it" structural rather than a listener.
+//
+// THE ONE RULE THIS FILE CANNOT BREAK, and the reason the drag is where it is:
+// the toolbar ROOT is the sole ancestor of every `position: fixed` pin marker
+// on the page, because `PinLayer` renders a bare fragment. A `transform`
+// anywhere above those markers makes that box their containing block and moves
+// every pin on the host page. So the drag's transform is on the PILL - a leaf
+// that holds no marker and is the pin layer's nephew, not its ancestor - the
+// dock moves by LAYOUT only, and the root carries neither.
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { createPortal } from "react-dom";
+import { resolveConfig, } from "./config.js";
+import { captureDeepLink, clearDeepLinkHash } from "./deepLink.js";
+import { AccountSurface, FeedbackPanel } from "./FeedbackPanel.js";
+// Every glyph in the product, drawn once - see the header of icons.tsx for why
+// the size lives in `style` rather than in a `width` attribute.
+import { AccountIcon, CollapseIcon, InboxIcon, NoteIcon, PinIcon, } from "./icons.js";
+import { INBOX_OPEN_STORE, InboxSheet, SHEET_WIDTH, writeInboxOpen, } from "./InboxSheet.js";
+import { surfaceMotion, useEntered, useJustChanged, usePrefersReducedMotion, useSwapEntered, } from "./motion.js";
+import { PinLayer } from "./PinLayer.js";
+import { formatChord, isApplePlatform } from "./shortcut.js";
+import { PREFERENCES_STORE, writePreferences } from "./preferences.js";
+import { createToolbarClient } from "./client.js";
+import { useToolbarSession } from "./session.js";
+import { bar, DARK_SCHEME_QUERY, DEFAULT_DOCK, dockLayout, DRAG_THRESHOLD, fonts, isThemeMode, isToolbarDock, layers, motion, motionTransform, radii, resetBox, sizes, spacing, themeFor, THEME_STORAGE_KEY, transition, typeScale, Z_INDEX, } from "./tokens.js";
+import { injectFontFaces } from "./fontFace.js";
+/** The default inbox: this package's own sheet. */
+const defaultRenderInbox = (props) => (_jsx(InboxSheet, { ...props }));
+export function FeedbackToolbar({ env, children, renderInbox = defaultRenderInbox, ...overrides }) {
+    const config = useMemo(() => resolveConfig(env ?? readProcessEnv(), overrides), 
+    // The env bag and the overrides are static for the life of a page: they
+    // come from the bundle, not from state.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [env]);
+    // Disabled: render nothing at all, and make no request. The gate is a
+    // separate component from the toolbar itself precisely so that the hooks
+    // below it - including the one that resolves the session and the one that
+    // reads the host's colour scheme - never run on a production build. A
+    // conditional hook would be the usual way to get this wrong; a conditional
+    // component cannot be.
+    if (!config.enabled)
+        return null;
+    return (_jsx(EnabledToolbar, { config: config, renderInbox: renderInbox, children: children }));
+}
+function EnabledToolbar({ config, children, renderInbox, }) {
+    const [tool, setTool] = useState(null);
+    const [picking, setPicking] = useState(false);
+    // Read from storage, because a reviewer working through a round of feedback
+    // navigates between pages and a sheet that closed on every navigation would
+    // be useless. Through a store with a server snapshot rather than a
+    // `useState` initialiser: the initialiser answered false on the server and
+    // true on the client, and the value reaches the DOM as `aria-expanded`,
+    // `aria-pressed` and an inline background on the inbox button - so a
+    // reviewer who left the sheet open got a React hydration error in the host
+    // app's console on every page load. See INBOX_OPEN_STORE.
+    const inboxOpen = useSyncExternalStore(INBOX_OPEN_STORE.subscribe, INBOX_OPEN_STORE.getSnapshot, INBOX_OPEN_STORE.getServerSnapshot);
+    const [showResolved, setShowResolved] = useState(false);
+    const [focusPinId, setFocusPinId] = useState(null);
+    const [openCount, setOpenCount] = useState(0);
+    const { mode, theme, setMode } = useToolbarTheme();
+    // Which form the bar is in, from the reviewer's persisted preferences and
+    // through the same store shape the theme and the inbox flag use. Issue #22
+    // asks for it to survive a reload, and on a host MPA every link is a fresh
+    // page load, so "I collapsed the bar" cannot live in React state.
+    //
+    // Emphatically not a `useState` initialiser that reads storage: this flag
+    // decides which CONTROLS EXIST, so the server would render one set of
+    // buttons and the hydrating client another - a harder version of the
+    // hydration error `INBOX_OPEN_STORE` was rewritten to fix, and it lands in
+    // the CUSTOMER's console. See PREFERENCES_STORE.
+    //
+    // ONE subscription for both fields, not two. They come out of one record
+    // (see preferences.ts) and they have to come out of one SNAPSHOT: a second
+    // `useSyncExternalStore` on the same store would be a second server snapshot
+    // to keep in step, and the form of the bar and the edge it is docked to are
+    // exactly the pair issue #22 says must not be able to disagree.
+    const { collapsed, dock } = useSyncExternalStore(PREFERENCES_STORE.subscribe, PREFERENCES_STORE.getSnapshot, PREFERENCES_STORE.getServerSnapshot);
+    // Every per-edge answer in this component - the dock's flex triple, the
+    // popover's origin and gap, the unread dot's corner, the chevron's angle -
+    // derived once from that one value. See `dockLayout`.
+    const edge = dockLayout(dock);
+    // The drag, on the pill and nowhere above it. See `useBarDrag`.
+    const drag = useBarDrag();
+    // The URL fragment, read exactly once. It has to be read in the shell's
+    // first render pass: a host framework that owns the hash rewrites it during
+    // hydration, and the pin layer renders after this line.
+    //
+    // Read through a store for the same reason the theme is. `captureDeepLink`
+    // is a memoised one-shot, so `getSnapshot` is stable and the subscription
+    // has nothing to publish - what the store buys is the SERVER snapshot: null
+    // during hydration, adopted afterwards, instead of a value that differs
+    // between the two renders. The read itself still happens in this first
+    // render pass, because React calls `getSnapshot` on the client even while it
+    // is rendering the server's value.
+    const deepLinkPinId = useSyncExternalStore(subscribeDeepLink, captureDeepLink, serverDeepLink);
+    // The address bar, tidied. Twice, and from an effect both times.
+    //
+    // From an effect because a `history.replaceState` is a side effect on the
+    // host's document, and a render pass is not where those belong: React is
+    // entitled to run one twice and to throw one away. Twice because the first
+    // clear is not the last word - Next's App Router restores the address it
+    // considered canonical at load, our fragment included, from a commit-phase
+    // effect. A parent's effects run after its children's, and the router is an
+    // ancestor of every host app, so there is no effect this component can
+    // register that is guaranteed to run later. A timeout is: it is scheduled
+    // from inside the commit and runs after all of it. `clearDeepLinkHash`
+    // re-checks the prefix, so neither call can eat a fragment that is not ours.
+    useEffect(() => {
+        if (deepLinkPinId === null)
+            return;
+        clearDeepLinkHash();
+        const timer = window.setTimeout(clearDeepLinkHash, 0);
+        return () => window.clearTimeout(timer);
+    }, [deepLinkPinId]);
+    // DESIGN.md's two faces, put into the REVIEWED page. Naming them in a font
+    // stack is not enough on a site that has never heard of Geist - see the
+    // note at the head of `fontFace.ts` for the two separate ways that missed.
+    //
+    // Deliberately NOT cleaned up on unmount. The `<style>` defines two
+    // namespaced families and no selectors, so it cannot affect anything the
+    // host renders; removing it would instead evict the font from the document
+    // between an unmount and the next mount and flash the fallback back in.
+    useEffect(() => {
+        injectFontFaces(document, config.assetOrigin);
+    }, [config.assetOrigin]);
+    const client = useMemo(() => createToolbarClient(config.apiUrl), [config.apiUrl]);
+    // Resolved here rather than in a popover: the pin layer needs the answer
+    // before anybody opens anything, or existing pins are invisible until a
+    // reviewer opens the toolbar - by which point they may already be writing a
+    // duplicate of the report the pin was.
+    const session = useToolbarSession(client, config.projectUrl);
+    const startPicking = useCallback(() => {
+        setPicking(true);
+        // Out of the way: the reviewer is about to click the page underneath.
+        setTool(null);
+    }, []);
+    const toggleTool = useCallback((next) => {
+        setTool((current) => (current === next ? null : next));
+        setPicking(false);
+    }, []);
+    const focusPin = useCallback((id) => {
+        setFocusPinId(id);
+        // The sheet stays open - the reviewer is working down a list - but a
+        // popover over the bar would sit on top of the pin they just asked to see.
+        setTool(null);
+    }, []);
+    // Written to storage, which notifies the store, which re-renders this. There
+    // is no component copy of the flag to keep in step with it.
+    const setInbox = useCallback((open) => {
+        writeInboxOpen(open);
+    }, []);
+    // Same shape, and the same reason there is no component copy of the flag.
+    const setCollapsed = useCallback((next) => {
+        writePreferences({ collapsed: next });
+        // Collapsing only. Expanding takes no control away, and closing the
+        // composer on the way back to the full bar would throw away a note the
+        // reviewer was in the middle of writing.
+        if (!next)
+            return;
+        // EVERY popover, the composer included, and that carve-out inverted with
+        // the collapsed form. `layers` in tokens.ts writes the rule down: every
+        // surface here is something the bar opened and the bar has to be able to
+        // close. The note popover used to survive a collapse because its button
+        // did; the single dot issue #22 asks for has no note button, so a surviving
+        // composer would be a `role="dialog"` hanging over a 46px circle with
+        // nothing left in the DOM to close it. Losing a half-written note is the
+        // stated cost of the one-control dot, and it is the smaller failure.
+        setTool(null);
+        // Picking is worse than an orphaned popover: the crosshair wash stays over
+        // the host page with the toggle that cancels it gone from the DOM, so the
+        // only way out is a key nobody told the reviewer about.
+        setPicking(false);
+    }, []);
+    // Escape closes whichever popover is open. The container declares
+    // `role="dialog"`, and Escape is that role's documented dismissal - there
+    // was no key handling in this package at all.
+    useEffect(() => {
+        if (tool === null)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            setTool(null);
+            // Only when something was open, so a host app's own Escape handling is
+            // untouched the rest of the time.
+            event.stopPropagation();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [tool]);
+    // And a click on the host page closes it too. A 320px composer parked over
+    // the very element under review, dismissable only by finding the bar button
+    // again, is the review tool getting in the way of the review. Clicks inside
+    // the toolbar's own root are not "outside": that includes the bar, whose
+    // buttons do their own toggling.
+    useEffect(() => {
+        if (tool === null)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (target instanceof Element &&
+                target.closest("[data-bitvea-feedback-toolbar]") !== null) {
+                return;
+            }
+            setTool(null);
+        };
+        window.addEventListener("pointerdown", onPointerDown, true);
+        return () => window.removeEventListener("pointerdown", onPointerDown, true);
+    }, [tool]);
+    // Whether this render may portal into `document.body`. False on the server
+    // and false for the first client render, then true - the same
+    // `useSyncExternalStore` shape the theme and the deep link above use, and
+    // for the same reason: a value that differs between the server render and
+    // the hydrating one is a React error in the CUSTOMER's console. There is
+    // nothing to subscribe to; what this buys is the server snapshot.
+    const canPortal = useSyncExternalStore(subscribeNothing, browserCanPortal, serverCanPortal);
+    // The chord as this reviewer's platform writes it, or null where the host
+    // switched it off. Computed here rather than in the button because it is a
+    // read of `navigator`, and every such read in this file goes through a
+    // deterministic first render - a hint that differed between the server's
+    // markup and the client's is a hydration error in somebody else's console.
+    const pinShortcutHint = useSyncExternalStore(subscribeNothing, () => config.pinShortcut === null
+        ? null
+        : formatChord(config.pinShortcut, isApplePlatform(navigator)), () => null);
+    const branchLabel = config.gitBranch ?? config.environment;
+    const commitLabel = config.gitCommit?.slice(0, 7) ?? null;
+    const ready = session.readyProjectId;
+    // Whether the sheet is actually on screen, which is what the dock has to
+    // make room for. Not the same as `inboxOpen`: the sheet only mounts once a
+    // project has resolved, and a host may have replaced or removed it.
+    const sheetOpen = renderInbox != null && inboxOpen && ready !== null;
+    // The unread signal, read by both forms of the bar from one place. It is the
+    // INBOX's signal: a host that suppressed the inbox with `renderInbox={null}`
+    // gets no count on the expanded bar, so the collapsed form must not invent
+    // one for the control that would have opened it.
+    const unread = renderInbox ? openCount : 0;
+    // The note action. It used to be the one control BOTH forms carried, and
+    // declaring it once was how "the note action survives a collapse" stayed the
+    // same element rather than two spellings of it. The collapsed form is a
+    // single dot now, so it is the expanded bar's alone - but it keeps its own
+    // binding, because its test id is what four e2e specs seed feedback through
+    // and a control worth naming once is worth naming where a reader finds it.
+    const noteButton = (_jsx(BarButton, { theme: theme, 
+        // Named for the control it replaces: every e2e spec that seeds feedback
+        // opens the composer through this id, and renaming it would break four
+        // of them for no gain.
+        testId: "feedback-toggle", label: tool === "note" ? "Close feedback" : "Leave a note", expanded: tool === "note", active: tool === "note", onClick: () => toggleTool("note"), children: _jsx(NoteIcon, {}) }));
+    const tree = (_jsxs("div", { "data-bitvea-feedback-toolbar": "", 
+        // The root is a zero-sized, UNTRANSFORMED anchor, and both facts are
+        // load-bearing. A transform on it would make it the containing block for
+        // every `position: fixed` descendant, which is what the pin markers are:
+        // they would then be offset by the bar's own position instead of sitting
+        // on the elements they are anchored to. Zero-sized so it can never
+        // swallow a click meant for the host page.
+        style: {
+            // A host `div { padding: 8px }` would otherwise inflate a box this
+            // file went to some trouble to make zero-sized.
+            ...resetBox,
+            position: "fixed",
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+            zIndex: Z_INDEX,
+            fontFamily: fonts.sans,
+            // Every inherited text property the host could have set on `html`,
+            // `body` or `*`, stated once at the top of the toolbar's own tree.
+            // `fontFamily` alone was never enough: a host that letter-spaces its
+            // body copy, uppercases with `text-transform`, italicises, right-
+            // aligns for an RTL locale or sets `line-height: 2` was re-typesetting
+            // every surface below this line, and none of it is visible in the
+            // preview harness because apps/web sets none of it.
+            letterSpacing: "normal",
+            wordSpacing: "normal",
+            textTransform: "none",
+            fontStyle: "normal",
+            fontVariant: "normal",
+            textAlign: "left",
+            textIndent: 0,
+            lineHeight: 1.5,
+            textDecoration: "none",
+            whiteSpace: "normal",
+            // Follows the reviewer's resolved theme rather than pinning one, so
+            // the browser's own form-control chrome inside the popovers matches
+            // the surface they sit on.
+            colorScheme: theme.resolved,
+        }, children: [_jsxs("div", { "data-testid": "feedback-dock", style: {
+                    position: "fixed",
+                    // Four longhands rather than the `inset` shorthand: jsdom does not
+                    // expand `inset` into `style.left`/`style.right`, and two tests read
+                    // those to prove the dock is a box rather than a centred transform.
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0,
+                    display: "flex",
+                    flexDirection: edge.flexDirection,
+                    // Always the bar's own end of the column, so a popover grows away
+                    // from the pill instead of pushing it. See the note above.
+                    justifyContent: "flex-end",
+                    alignItems: edge.alignItems,
+                    boxSizing: "border-box",
+                    // Issue #21's "standard viewport inset", now on all four sides
+                    // because all four are dockable. See `bar.inset`.
+                    padding: bar.inset,
+                    // ...except the bottom, which is also how a mid-edge dock centres
+                    // the bar. See `dockLayout`.
+                    paddingBottom: edge.paddingBottom,
+                    // The sheet is `right: 0`, so the bar centres in what is left of the
+                    // viewport. `clamp` rather than a flat 340px because on a narrow
+                    // screen the sheet is itself clamped, and subtracting its full width
+                    // there would squeeze the bar to nothing: below ~420px the offset
+                    // reaches zero and the bar centres on the whole viewport again,
+                    // under the sheet's own edge.
+                    //
+                    // Unconditional across the eight docks, which is the whole reason it
+                    // is a padding and not a centring offset: for a left dock it changes
+                    // nothing, for a centred one it re-centres in what is left, and for a
+                    // RIGHT dock - including the mid-edge, where a 46px dot would
+                    // otherwise sit squarely under a full-height sheet - it holds the bar
+                    // clear of the sheet's edge. That is issue #21's "a bar docked right
+                    // should not sit under the sheet", answered once.
+                    paddingRight: sheetOpen
+                        ? `clamp(${spacing.xs}, calc(100vw - 420px), ${SHEET_WIDTH}px)`
+                        : bar.inset,
+                    // The box must never swallow a click meant for the host page. Each
+                    // thing inside it turns pointer events back on for itself.
+                    pointerEvents: "none",
+                    // Above every surface the toolbar opens. The dock used to carry no
+                    // z-index at all, which in this stacking context means it lost to
+                    // the picking overlay, the pin markers, the threads and the inbox
+                    // sheet alike - and losing to the picking overlay meant the pin tool
+                    // could not be turned off. See `layers`.
+                    zIndex: layers.bar,
+                }, children: [children === undefined ? null : (_jsx("div", { style: { pointerEvents: "auto" }, children: children })), tool !== null ? (_jsx(BarPopover, { theme: theme, tool: tool, edge: edge, children: tool === "note" ? (_jsx(FeedbackPanel, { config: config, phase: session.phase, theme: theme, onReloadSession: session.reload, onDone: () => setTool(null) })) : (_jsx(AccountSurface, { config: config, phase: session.phase, theme: theme, mode: mode, onModeChange: setMode, onReloadSession: session.reload })) })) : null, _jsx("div", { "aria-label": "BitVea Feedback toolbar", "data-testid": "feedback-bar", "data-toolbar-state": collapsed ? "collapsed" : "expanded", ...drag.handlers, style: {
+                            display: "flex",
+                            alignItems: "center",
+                            padding: bar.padding,
+                            // Clamped to the dock, which is the viewport less its inset.
+                            // Without this the 402px pill overhung both edges of a 390px
+                            // phone and both 32px rounded ends were cut off.
+                            maxWidth: "100%",
+                            boxSizing: "border-box",
+                            pointerEvents: "auto",
+                            background: theme.colors.barSurface,
+                            border: `1px solid ${theme.colors.barBorder}`,
+                            // A CIRCLE when collapsed, and it needs no width or height of its
+                            // own to be one: 4px of `bar.padding` around a single 36px button
+                            // is a 44px content box, so a pill radius on it is a circle - the
+                            // same 46px across as the expanded bar is tall. That is why the
+                            // collapse reads as the bar's ends closing in rather than as the
+                            // bar also getting thinner, and it clears DESIGN.md's 44x44 touch
+                            // floor (Responsive -> Touch Targets), which a bare 36px dot does
+                            // not.
+                            borderRadius: collapsed ? radii.pill : bar.radius,
+                            boxShadow: theme.shadows.bar,
+                            // The drag affordance, issue #21. A grab cursor on the bar's body
+                            // is the whole discovery mechanism - there is no grip handle,
+                            // because a 36px square in a bar already fighting for width on a
+                            // phone is a worse trade than a cursor. The buttons inside declare
+                            // `pointer` and win over their own boxes.
+                            cursor: "grab",
+                            // Stated permanently rather than while dragging, because a browser
+                            // decides whether a touch gesture scrolls the HOST page at the
+                            // moment the finger lands: by the time a `touchAction` applied
+                            // mid-drag reached the compositor the page would already be
+                            // moving. The bar is a draggable object, so a touch that starts on
+                            // it belongs to the bar.
+                            touchAction: "none",
+                            ...drag.style,
+                        }, children: _jsx(BarContents, { form: collapsed, children: collapsed ? (_jsxs(BarButton, { theme: theme, testId: "toolbar-expand", 
+                                // The count is in the name as well as on the edge, because the
+                                // indicator is now a bare dot and this control is the only
+                                // thing a screen-reader user has left to hear the number from.
+                                label: unread > 0
+                                    ? `Expand toolbar, ${unread} open`
+                                    : "Expand toolbar", expanded: false, onClick: () => setCollapsed(false), children: [_jsx(BitveaMark, { theme: theme, size: 18, inline: true }), unread > 0 ? _jsx(UnreadDot, { theme: theme, at: edge.badge }) : null] })) : (_jsxs(_Fragment, { children: [_jsx(BitveaMark, { theme: theme }), _jsx(BarButton, { theme: theme, testId: "toolbar-pin", 
+                                        // The label is what the e2e suite finds this control by, and
+                                        // it survived the panel it used to live in on purpose. The
+                                        // shortcut goes in `hint` and not here for exactly that
+                                        // reason - see the prop's note on BarButton.
+                                        label: "Pin to an element", 
+                                        // Discoverability at the one moment it lands: hovering the
+                                        // button you were about to click. Derived from the config'd
+                                        // chord rather than written out, so a host that remaps it
+                                        // does not leave this teaching a keystroke that does
+                                        // nothing, and a host that switches it off shows no hint.
+                                        hint: pinShortcutHint ?? undefined, active: picking, onClick: () => (picking ? setPicking(false) : startPicking()), children: _jsx(PinIcon, {}) }), noteButton, renderInbox ? (_jsx(BarButton, { theme: theme, testId: "toolbar-inbox", label: unread > 0 ? `Inbox, ${unread} open` : "Inbox", expanded: inboxOpen, active: inboxOpen, onClick: () => setInbox(!inboxOpen), badge: unread, children: _jsx(InboxIcon, {}) })) : null, _jsx(BarButton, { theme: theme, testId: "toolbar-account", label: "Account", expanded: tool === "account", active: tool === "account", onClick: () => toggleTool("account"), children: _jsx(AccountIcon, {}) }), _jsxs("span", { style: {
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            gap: spacing.xs,
+                                            height: bar.button,
+                                            padding: `0 ${spacing.sm}`,
+                                            maxWidth: "220px",
+                                            // The one thing in the bar allowed to give up width, and
+                                            // the reason the pill can be clamped at all: the buttons
+                                            // are fixed 36px squares, so a narrow viewport has to come
+                                            // out of here. It has one more square to make room for
+                                            // since issue #22, which is the same viewport the collapse
+                                            // control exists to rescue.
+                                            flex: "0 1 auto",
+                                            minWidth: 0,
+                                            boxSizing: "border-box",
+                                            borderRadius: radii.pill,
+                                            background: theme.colors.barHover,
+                                            ...typeScale.captionMono,
+                                        }, children: [_jsx("span", { "data-testid": "toolbar-branch", title: branchLabel, style: {
+                                                    minWidth: 0,
+                                                    overflow: "hidden",
+                                                    whiteSpace: "nowrap",
+                                                    textOverflow: "ellipsis",
+                                                    // `body`, not `barInkMute`: mute on the hover wash is
+                                                    // 3.2:1 at 12px, and this is the one label the bar exists
+                                                    // to make readable at a glance.
+                                                    color: theme.colors.body,
+                                                }, children: branchLabel }), commitLabel ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", style: { color: theme.colors.body }, children: "\u00B7" }), _jsx("span", { "data-testid": "toolbar-commit", title: config.gitCommit, style: {
+                                                            // `0 0 auto`, not `0 1 auto`. Both labels shrinking
+                                                            // meant the 220px clamp took width off the commit
+                                                            // too, and with `overflow: hidden` and no ellipsis it
+                                                            // clipped mid-glyph - a seven-character SHA rendered
+                                                            // as six and a sliver, which is worse than absent
+                                                            // because it still looks like a value. The short SHA
+                                                            // is a fixed width and is the identifier that pins a
+                                                            // report to a build, so it is the one thing in this
+                                                            // pill that never gives up room; the branch above
+                                                            // already ellipsises and is the label that can afford
+                                                            // to.
+                                                            flex: "0 0 auto",
+                                                            whiteSpace: "nowrap",
+                                                            color: theme.colors.body,
+                                                        }, children: commitLabel })] })) : null] }), _jsx(BarButton, { theme: theme, testId: "toolbar-collapse", label: "Collapse toolbar", expanded: true, onClick: () => setCollapsed(true), children: _jsx(CollapseIcon, { turn: edge.chevron }) })] })) }) })] }), ready ? (_jsxs(_Fragment, { children: [_jsx(PinLayer, { client: client, config: config, organizationId: ready, theme: theme, picking: picking, onPickingChange: setPicking, showResolved: showResolved, focusPinId: focusPinId, deepLinkPinId: deepLinkPinId, onFocusHandled: () => setFocusPinId(null), onOpenCountChange: setOpenCount }), renderInbox?.({
+                        client,
+                        config,
+                        organizationId: ready,
+                        theme,
+                        open: inboxOpen,
+                        onClose: () => setInbox(false),
+                        showResolved,
+                        onShowResolvedChange: setShowResolved,
+                        onFocusPin: focusPin,
+                    })] })) : null] }));
+    // Portalled to `document.body`, which is a correctness fix rather than a
+    // tidy-up.
+    //
+    // Every surface this package draws is `position: fixed`, and a fixed box is
+    // positioned against the VIEWPORT only while no ancestor establishes a
+    // containing block. Any ancestor carrying `transform`, `filter`,
+    // `perspective`, `backdrop-filter`, `will-change` or `contain` does exactly
+    // that - and on the npm install path the toolbar is mounted wherever the
+    // host's root layout puts it, commonly inside a page-transition wrapper or
+    // an animated shell. The whole toolbar - bar, popovers, inbox sheet and
+    // every pin marker on the page - then renders offset into that ancestor's
+    // box, with the pins pointing at nothing. The script-tag path never showed
+    // it because mount.tsx appends its container to `document.body` already.
+    //
+    // `data-bitvea-feedback-toolbar` travels with the portalled root, so the
+    // outside-click check above and `elementUnder`'s "never anchor to our own
+    // UI" exclusion in PinLayer still match: both walk `closest()` from the
+    // event target through the real DOM tree, which is where the portal puts
+    // this.
+    return canPortal ? createPortal(tree, document.body) : null;
+}
+/* ── The deep link, as a store ─────────────────────────────────────────── */
+/**
+ * `captureDeepLink` is a module-scope one-shot: it reads the hash the first
+ * time it is called on the client and answers every later caller from memory.
+ * So there is nothing to subscribe to - the value cannot change - and this
+ * exists only to satisfy `useSyncExternalStore`, which is used here for its
+ * server snapshot rather than for its subscription.
+ */
+function subscribeDeepLink() {
+    return () => { };
+}
+/* ── The portal target, as a store ────────────────────────────────────── */
+/** Neither of the two stores below can change, so neither publishes. */
+function subscribeNothing() {
+    return () => { };
+}
+/**
+ * A browser with a `<body>` to portal into. Both halves are checked because
+ * this also runs from a `<script>` in `<head>`, where `document` exists and
+ * `document.body` does not yet.
+ */
+function browserCanPortal() {
+    return typeof document !== "undefined" && document.body !== null;
+}
+/**
+ * The server's answer, and the hydrating render's. False: `createPortal` is
+ * not supported by the server renderer at all, and a client render that
+ * portalled while the server rendered inline would be a hydration mismatch in
+ * the host app. So the toolbar is client-only, which it effectively already
+ * was - every surface here reads `window`, `localStorage` or `location`.
+ */
+function serverCanPortal() {
+    return false;
+}
+/**
+ * No `location` on the server, and none during hydration either. React renders
+ * this value first and adopts `captureDeepLink`'s answer once hydration is
+ * finished, which is what keeps the two renders identical.
+ */
+function serverDeepLink() {
+    return null;
+}
+/* ── Theme ────────────────────────────────────────────────────────────── */
+/**
+ * The reviewer's manual override, held at module scope so the media query and
+ * the stored preference are one external store rather than component state.
+ *
+ * `useSyncExternalStore` rather than an effect that calls `setState`: the
+ * server render has no `window`, and the two snapshots below give React a
+ * deterministic first paint (`system`, light) that it then reconciles, instead
+ * of a hydration mismatch inside somebody else's app.
+ */
+// Only used when `localStorage` is unreachable - private mode, a blocked
+// origin, a host that disabled storage. The toolbar still honours the choice
+// for this page; it just cannot survive a reload, which beats the toggle
+// silently doing nothing.
+let memoryMode = null;
+const modeListeners = new Set();
+function readStoredMode() {
+    try {
+        const raw = window.localStorage.getItem(THEME_STORAGE_KEY);
+        if (isThemeMode(raw))
+            return raw;
+    }
+    catch {
+        // Fall through to the in-memory value.
+    }
+    return memoryMode ?? "system";
+}
+function writeStoredMode(mode) {
+    try {
+        window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+        memoryMode = null;
+    }
+    catch {
+        memoryMode = mode;
+    }
+    modeListeners.forEach((listener) => listener());
+}
+function subscribeMode(listener) {
+    modeListeners.add(listener);
+    return () => modeListeners.delete(listener);
+}
+function subscribeSystemScheme(listener) {
+    if (typeof window.matchMedia !== "function")
+        return () => { };
+    const query = window.matchMedia(DARK_SCHEME_QUERY);
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+}
+function systemPrefersDark() {
+    if (typeof window === "undefined" ||
+        typeof window.matchMedia !== "function") {
+        return false;
+    }
+    return window.matchMedia(DARK_SCHEME_QUERY).matches;
+}
+function serverMode() {
+    return "system";
+}
+function useToolbarTheme() {
+    // The server snapshot: no `window`, so no stored choice and no media query.
+    // Both halves therefore render "follow the host, and assume light" first,
+    // which is a deterministic first paint rather than a hydration mismatch
+    // inside somebody else's app.
+    const mode = useSyncExternalStore(subscribeMode, readStoredMode, serverMode);
+    const prefersDark = useSyncExternalStore(subscribeSystemScheme, systemPrefersDark, () => false);
+    const resolved = mode === "system" ? (prefersDark ? "dark" : "light") : mode;
+    return {
+        mode,
+        theme: useMemo(() => themeFor(resolved), [resolved]),
+        setMode: writeStoredMode,
+    };
+}
+/** Keep the pill's box inside the viewport, on one axis. */
+function clampDelta(delta, start, length, viewport) {
+    // `Math.min` last, so a viewport narrower than the bar answers the low bound
+    // rather than an impossible one - the bar hangs off the far edge instead of
+    // off the near one, which is the edge a reviewer is reaching from.
+    return Math.max(-start, Math.min(delta, viewport - start - length));
+}
+/**
+ * Which of the eight docks a point belongs to: the viewport in thirds on each
+ * axis, which is the whole snap rule.
+ *
+ * Thirds rather than "nearest of eight centres", because the eight positions
+ * are not points - a bottom-centre bar is a 400px object and a bottom-right
+ * one is the same object 200px along - so a distance to a centre would depend
+ * on the bar's own width and would move the boundaries as it collapsed.
+ *
+ * `middle-center` is not a dock, so a release in the dead centre of the
+ * viewport resolves to the nearer of top-centre and bottom-centre. Validated
+ * through `isToolbarDock` rather than cast: the composed string is exactly the
+ * shape that guard exists to check, and it means a ninth combination cannot
+ * reach `dockLayout` as a key it has no row for.
+ */
+function nearestDock(x, y) {
+    const width = window.innerWidth || 1;
+    const height = window.innerHeight || 1;
+    const horizontal = x < width / 3 ? "left" : x > (width * 2) / 3 ? "right" : "center";
+    const band = y < height / 3 ? "top" : y > (height * 2) / 3 ? "bottom" : "middle";
+    const vertical = band === "middle" && horizontal === "center"
+        ? y < height / 2
+            ? "top"
+            : "bottom"
+        : band;
+    const candidate = `${vertical}-${horizontal}`;
+    return isToolbarDock(candidate) ? candidate : DEFAULT_DOCK;
+}
+/**
+ * The bar's drag, and every line of it is about where the transform is allowed
+ * to live.
+ *
+ * The pill carries `translate3d` while the pointer is down and NOTHING at
+ * rest - an omitted property rather than `transform: none`, because a resting
+ * transform of any spelling is still a stacking context and two tests read
+ * that declaration to prove the collapse motion is not on this box. The dock
+ * above it and the root above that stay transform-free permanently: the root
+ * is the sole ancestor of every `position: fixed` pin marker on the page, and
+ * a transform there moves all of them. Issue #21 names the pill as the one
+ * sanctioned place, and this is it.
+ *
+ * `window` listeners rather than `setPointerCapture`, and that is not a
+ * preference either. Pointer capture RETARGETS every later event at the
+ * capturing element, so the bar button under the pointer would never see its
+ * own `pointerup` and would stay visibly pressed for the rest of the session.
+ * Listening on the window keeps the button's own events intact and picks up a
+ * pointer that left the viewport, which capture does too but at that price.
+ * What capture WOULD have given for free is the guarantee that a gesture ends,
+ * so this one has to notice on its own that it did: see the `buttons === 0`
+ * line in `onMove`, without which a release over another application left the
+ * bar following the cursor around the host page for the rest of the session.
+ *
+ * Reduced motion is deliberately not consulted. `prefers-reduced-motion` is
+ * about animation a reviewer did not ask for; a box following their own
+ * pointer 1:1 is direct manipulation, and refusing to move it would be
+ * refusing the interaction rather than calming it. There is no `transition` on
+ * this transform for the same reason - it has to track the pointer exactly.
+ *
+ * AND THE SNAP ITSELF IS INSTANT, which is a decision rather than an omission.
+ * The dock changes by flex alignment, and DESIGN.md's Motion section names
+ * `top`/`left`/`right`/`bottom`/`margin`/`padding` as the properties this
+ * package may never transition over a host page - a reflow per frame on a
+ * document nobody here wrote. The only legal way to animate a layout move is
+ * to invert it into a transform and play that back, which needs the new box
+ * measured after the commit; the bytes and the frame of extra work buy an
+ * acknowledgement the reviewer's own hand has already given them. The drag IS
+ * the motion, and it ends when they let go. The transform and the new dock
+ * land in one commit, so there is no frame of the bar in the wrong place.
+ */
+function useBarDrag() {
+    const [origin, setOrigin] = useState(null);
+    /** The live delta, set only once the threshold has been crossed. */
+    const [offset, setOffset] = useState(null);
+    /**
+     * Whether the press that is ending turned out to be a drag.
+     *
+     * A ref rather than state, and the reason is ordering rather than renders.
+     * Nothing about the bar LOOKS different because a drag just finished; what
+     * this flag does is swallow exactly one click, and it is written by
+     * `pointerup` and read by the `click` that follows it a moment later. State
+     * makes that a question about when React has re-rendered - and the answer
+     * differs between a browser, which flushes a discrete event synchronously,
+     * and a test that dispatches the pair inside one `act`. A ref is true the
+     * instant it is set, in both.
+     */
+    const dragged = useRef(false);
+    const moved = offset !== null;
+    // `origin` and `moved` are the only deps, and both change at most twice per
+    // drag - so this subscribes once when the pointer goes down and re-subscribes
+    // once when the threshold is crossed, rather than on every pointermove.
+    useEffect(() => {
+        if (origin === null)
+            return;
+        /** The clamped delta and whether this event is past the threshold. */
+        const measure = (event) => {
+            const rawX = event.clientX - origin.x;
+            const rawY = event.clientY - origin.y;
+            return {
+                x: clampDelta(rawX, origin.left, origin.width, window.innerWidth),
+                y: clampDelta(rawY, origin.top, origin.height, window.innerHeight),
+                // Latched: a drag that wanders out and comes back to the pixel it
+                // started on is still a drag, and must not also fire the click.
+                past: moved || Math.hypot(rawX, rawY) >= DRAG_THRESHOLD,
+            };
+        };
+        const onMove = (event) => {
+            // A MOVE WITH NO BUTTON HELD IS A RELEASE THIS WINDOW NEVER SAW, and
+            // without this line the bar follows the pointer around the host page
+            // for the rest of the session. It is what `setPointerCapture` would
+            // have bought, at the price named above: a release over another
+            // application, a native menu or a second monitor does not always come
+            // back as a `pointerup`, and the next thing the page hears is a plain
+            // move. Reverting rather than docking where the pointer reappeared,
+            // because the reviewer did not choose that spot - they let go somewhere
+            // this document was never told about.
+            if (event.buttons === 0) {
+                setOrigin(null);
+                setOffset(null);
+                return;
+            }
+            const { x, y, past } = measure(event);
+            if (past)
+                setOffset({ x, y });
+        };
+        const onUp = (event) => {
+            const { x, y, past } = measure(event);
+            if (past) {
+                // The pill's centre where the reviewer let go. Written straight to the
+                // shared preference record, which notifies the store, which re-renders
+                // the dock - there is no component copy of the dock to keep in step.
+                writePreferences({
+                    dock: nearestDock(origin.left + x + origin.width / 2, origin.top + y + origin.height / 2),
+                });
+                dragged.current = true;
+            }
+            setOrigin(null);
+            setOffset(null);
+        };
+        // A cancelled pointer - the OS took the gesture, the touch became a
+        // scroll - is not a choice, so it reverts rather than docking somewhere
+        // the reviewer never released.
+        const onCancel = () => {
+            setOrigin(null);
+            setOffset(null);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onCancel);
+        return () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancel);
+        };
+    }, [origin, moved]);
+    return {
+        style: {
+            // Only while it is actually moving, so the property is absent at rest.
+            ...(offset === null
+                ? {}
+                : {
+                    transform: `translate3d(${offset.x}px, ${offset.y}px, 0)`,
+                    cursor: "grabbing",
+                }),
+            // From the pointer going DOWN rather than from the threshold, because by
+            // the time 6px have been travelled the browser has already started
+            // selecting the deployment chip's text under the cursor.
+            ...(origin === null ? {} : { userSelect: "none" }),
+        },
+        handlers: {
+            onPointerDown: (event) => {
+                // Secondary buttons open host context menus; they are not drags.
+                if (event.button > 0)
+                    return;
+                // FIRST, AND BEFORE THE CONTROL CHECK BELOW RETURNS. A press is the
+                // start of a new gesture, so nothing a previous one left behind may
+                // survive into it - and the swallow below is armed by a `pointerup`
+                // and disarmed by a `click` that is not guaranteed to arrive. A drag
+                // whose pointer was clamped inside the viewport while the pointer ran
+                // past it ends with the two events on different elements, and the
+                // browser then fires the click on their common ancestor, which is the
+                // host page's own tree rather than this pill. Clearing it only where
+                // a drag can be armed left that stale `true` to eat the reviewer's
+                // next click on a bar button - the account popover simply did not
+                // open, once, after every drag into a corner.
+                dragged.current = false;
+                const target = event.target;
+                // The bar's BODY is the handle - the mark, the deployment chip, the
+                // padding between controls - and a press that lands on a control is
+                // that control's. Without this every click on a bar button would arm a
+                // drag and flash its 3% press squash on the way.
+                //
+                // The collapsed dot is the exception, and the reason it needs one is
+                // that it has no body: it is a single button filling the whole circle,
+                // so "drag by the body" would leave it un-draggable. Its whole surface
+                // is the handle, and the click still fires because a press under the
+                // threshold is not a drag - which is what `onClickCapture` below
+                // decides.
+                const onControl = target instanceof Element &&
+                    target.closest("button, a, input, textarea, select") !== null;
+                const wholeSurface = event.currentTarget.dataset.toolbarState === "collapsed";
+                if (onControl && !wholeSurface)
+                    return;
+                const box = event.currentTarget.getBoundingClientRect();
+                setOrigin({
+                    x: event.clientX,
+                    y: event.clientY,
+                    left: box.left,
+                    top: box.top,
+                    width: box.width,
+                    height: box.height,
+                });
+            },
+            // A drag that ended over the collapsed dot would otherwise also expand
+            // the bar, since the pointer went down and came up on the same button.
+            // Capture phase, so the button's own `onClick` never runs.
+            onClickCapture: (event) => {
+                if (!dragged.current)
+                    return;
+                event.stopPropagation();
+                event.preventDefault();
+                dragged.current = false;
+            },
+        },
+    };
+}
+/* ── Bar chrome ───────────────────────────────────────────────────────── */
+/**
+ * The bar's contents, and the only thing that moves when a reviewer collapses
+ * or expands it.
+ *
+ * A wrapper INSIDE the pill rather than the pill itself, and that is the whole
+ * design of this component. Two rules meet here and both of them have been
+ * broken in this package before:
+ *
+ * DESIGN.md's Motion section allows `transform` and `opacity` and forbids
+ * `width`. The pill's width is exactly what a collapse changes, so the box
+ * snaps - instantly, in the frame the cross-fade starts, which is that
+ * section's own rule for a layout property that has to change alongside an
+ * animation. Animating it instead would reflow the host document once per
+ * frame, and the host gets blamed for that jank.
+ *
+ * And the opacity and the transform go HERE, never on the pill, the dock or
+ * the toolbar root. Both create a stacking context for every frame they are
+ * mid-flight, and issue #23 was that exact defect one surface over: a wrapper
+ * dimmed to 45% painted the thread it contained straight through to the host
+ * page and swallowed the `layers` rung the thread had set on itself. This
+ * element is safe for it because of what is INSIDE it - bar buttons, the mark
+ * and the deployment chip, none of them `position: fixed` and none of them
+ * declaring a z-index. Everything that does stack against `layers` is a
+ * sibling of the pill or lives outside the dock: the popovers, the inbox sheet
+ * and every pin marker on the page. Adding anything to the bar that has to
+ * escape this box is the change that breaks the rule.
+ *
+ * `settle` rather than `fast`, and `motion.duration.settle` exists in
+ * tokens.ts for this surface. It is the one transition in the package whose
+ * box changes shape underneath it: 120ms of cross-fade lands before the eye
+ * has followed the pill's snap from ~400px to 46px, which reads as the
+ * contents having been swapped rather than as one bar changing form. 180ms is
+ * DESIGN.md's ceiling and this is what the ceiling is for.
+ */
+function BarContents({ form, children, }) {
+    const entered = useSwapEntered(form);
+    const reduced = usePrefersReducedMotion();
+    return (_jsx("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            gap: bar.gap,
+            // The flex item that gives the pill its width, so it is what has to be
+            // allowed to shrink: a flex item's default `min-width: auto` is the
+            // width of its content, and without this the deployment chip's own
+            // `flex: 0 1 auto` had nothing to shrink inside and the pill overhung a
+            // narrow viewport again.
+            minWidth: 0,
+            ...surfaceMotion({
+                visible: entered,
+                reduced,
+                duration: motion.duration.settle,
+            }),
+        }, children: children }, String(form)));
+}
+function BarButton({ theme, testId, label, hint, active, expanded, badge, onClick, children, }) {
+    const [hovered, setHovered] = useState(false);
+    // Focus is tracked in state because an inline style cannot express
+    // `:focus-visible`, and there is no stylesheet here to put it in. Every
+    // control in this package needs it: a host shipping `*:focus { outline:
+    // none }` - which plenty do - erased keyboard focus from the entire review
+    // tool, and the package declared no focus style of its own to survive it.
+    const [focused, setFocused] = useState(false);
+    const [pressed, setPressed] = useState(false);
+    const reduced = usePrefersReducedMotion();
+    return (_jsxs("button", { type: "button", "data-testid": testId, "aria-label": label, title: hint === undefined ? label : `${label} (${hint})`, ...(expanded === undefined ? {} : { "aria-expanded": expanded }), ...(active === undefined ? {} : { "aria-pressed": active }), onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => {
+            setHovered(false);
+            // Dragging off cancels the press, the way a native control does.
+            setPressed(false);
+        }, onPointerDown: () => setPressed(true), onPointerUp: () => setPressed(false), onPointerCancel: () => setPressed(false), onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: {
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: bar.button,
+            height: bar.button,
+            flex: "0 0 auto",
+            padding: 0,
+            border: "none",
+            borderRadius: radii.pill,
+            // Ink, not the accent. "Which mode am I in" is a selected state, and
+            // DESIGN.md gives selection to the ink polarity flip; the accent was
+            // carrying chrome, which is the one job it is not for. The bar's own
+            // ink flips with the palette, so this is a black pill with a white
+            // glyph on a light host and the reverse on a dark one.
+            background: active
+                ? theme.colors.ink
+                : hovered
+                    ? theme.colors.barHover
+                    : "transparent",
+            color: active ? theme.colors.onInk : theme.colors.barInk,
+            cursor: "pointer",
+            // A 3% squash under the pointer. Safe on this button and on nothing
+            // above it: it is a leaf with no `position: fixed` descendant, whereas
+            // a transform on the toolbar ROOT would make it the containing block
+            // for every pin marker on the page - `PinLayer` is a child of it - and
+            // every pin would then be offset by the bar's own position. The dock
+            // is a sibling of the pin layer and holds no marker, so its own rule
+            // is the narrower one: it is the ancestor of the pill and the
+            // popovers, and their motion belongs on them. See the note beside
+            // `createPortal` below, and the two tests that assert both stay
+            // transform-free.
+            transform: motionTransform(pressed ? `scale(${motion.pressScale})` : "none", reduced),
+            // The one inline duration this package shipped - `background 120ms
+            // ease`, written before there were tokens - now spelled from them, and
+            // at `instant` rather than `fast`: DESIGN.md's Motion section gives
+            // 80ms to feedback on a control the pointer is already on, and this is
+            // the definition of that. `background-color` rather than `background`,
+            // because that is the animatable longhand and the shorthand quietly
+            // included properties nobody chose to animate.
+            transition: transition(["background-color", "color", "transform"], motion.duration.instant, motion.easing.inOut, reduced),
+            // `revert`, not `none`: if the host has no rule at all the UA ring is
+            // a perfectly good second ring, and this only replaces it where a host
+            // suppressed it.
+            outline: "revert",
+            boxShadow: focused ? theme.shadows.focusRing : "none",
+        }, children: [children, badge !== undefined && badge > 0 ? (_jsx(CountBubble, { theme: theme, testId: testId, active: active ?? false, count: badge, children: badge > 99 ? "99+" : badge })) : null] }));
+}
+/**
+ * The panel a bar button opens, above the bar and anchored to it.
+ *
+ * Enter only, and that is a decision rather than an omission. This element
+ * carries `role="dialog"`, so deferring its unmount would leave a dialog in
+ * the accessibility tree after the reviewer closed it, and several e2e specs
+ * assert `feedback-panel` reaches zero elements. The acknowledgement on the
+ * way out is the button's own fill cross-fading back off, which is on the
+ * control the reviewer just clicked and is where they are looking.
+ */
+function BarPopover({ theme, tool, edge, children, }) {
+    const entered = useEntered();
+    const reduced = usePrefersReducedMotion();
+    return (_jsx("div", { role: "dialog", "aria-label": "BitVea Feedback", "data-testid": "feedback-panel", "data-toolbar-surface": tool, style: {
+            width: tool === "note" ? "320px" : "280px",
+            maxWidth: "100%",
+            // Every fixed-width surface in this package states this rather than
+            // inheriting it. The toolbar mounts in a host page that may ship no
+            // CSS reset at all, and under the default `content-box` this popover
+            // renders 320px + 24px of padding + 2px of border, 26px wider than it
+            // was designed. It is invisible on the preview route only because
+            // apps/web loads Tailwind's preflight.
+            boxSizing: "border-box",
+            pointerEvents: "auto",
+            // The gap goes on the edge FACING THE BAR, which flips with the dock -
+            // `marginBottom` for a bottom or mid-edge dock, `marginTop` for a top
+            // one, where `column-reverse` has put this popover underneath.
+            //
+            // And the horizontal `auto` that used to centre it is gone, which was
+            // a latent bug rather than a tidy-up: an `auto` margin on a flex item
+            // absorbs the free space on its axis and OVERRIDES `align-items`, so a
+            // 320px composer would have stayed pinned to the viewport's centre
+            // while the bar it belongs to sat in a corner. The dock's
+            // `alignItems` is what places it now.
+            [edge.popoverGap]: spacing.xs,
+            padding: spacing.sm,
+            background: theme.colors.canvas,
+            // The border STAYS and the shadow's ring is inset. Every popover here
+            // used to draw two edges - this 1px border plus an outset `0 0 0 1px`
+            // baked into the shadow - which on a light host read as a double
+            // outline. The border is the theme-aware one; the ring is DESIGN.md's
+            // Level 1 inset hairline, drawn inside.
+            border: `1px solid ${theme.colors.hairline}`,
+            borderRadius: radii.lg,
+            boxShadow: theme.shadows.popover,
+            color: theme.colors.body,
+            ...typeScale.bodySm,
+            // Grows out of the bar, because that is what it is anchored to - see
+            // the comment at the call site. The origin is the edge it is ATTACHED
+            // to, which is DESIGN.md's rule for a surface anchored to a control
+            // rather than dropped at a clicked pixel - and since issue #21 that
+            // edge is whichever one the bar is docked to, so it comes from
+            // `dockLayout` instead of being the hard-coded `bottom center` it was.
+            //
+            // The transform is on THIS element and never on the dock above it or
+            // the root above that. The ROOT is the ancestor every `position:
+            // fixed` pin marker resolves against - `PinLayer` is its child - so a
+            // transform there would become their containing block and offset every
+            // pin on the host page by the bar's own position. The dock holds no
+            // marker, being the pin layer's sibling; what it holds is this popover
+            // and the pill, so the motion those two need belongs on them and not
+            // on the box that positions both. Two tests assert the dock and the
+            // root stay transform-free.
+            ...surfaceMotion({
+                visible: entered,
+                reduced,
+                origin: edge.popoverOrigin,
+            }),
+        }, children: children }));
+}
+/**
+ * The unread count on a bar button.
+ *
+ * Split out of `BarButton` because acknowledging a number that moved needs a
+ * hook, and `useJustChanged` has to be keyed on the count rather than on the
+ * button. Everything about this bubble is identical before and after an
+ * increment - same ink, same position, same 18px box - so a count going 3 → 4
+ * with no motion is a glyph swap nobody notices, which is the whole reason the
+ * issue names it.
+ */
+function CountBubble({ theme, testId, active, count, children, }) {
+    const reduced = usePrefersReducedMotion();
+    // The COUNT, not `children`. `useJustChanged` compares with `!==`, and a
+    // `ReactNode` is only a primitive here by luck of the current markup - the
+    // day somebody wraps the number in a `<span>` or a fragment, every render
+    // produces a new object, `changed` is true forever and the badge sits
+    // permanently squashed. Keyed on the number, that cannot happen.
+    const changed = useJustChanged(count);
+    return (_jsx("span", { "data-testid": `${testId}-count`, style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            // 18px, because 12px mono is the smallest type in this system and
+            // the bubble has to hold it. It was a 16px circle carrying 10px
+            // sans - a size on no step in DESIGN.md's table and the smallest
+            // type anywhere in the product.
+            minWidth: sizes.badge,
+            height: sizes.badge,
+            padding: `0 ${spacing.xxs}`,
+            boxSizing: "border-box",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: radii.pill,
+            // Ink rather than the accent it used to wear - and inverted while
+            // the button is active, because the active pill is itself an ink
+            // fill and an ink bubble on it would vanish.
+            background: active ? theme.colors.onInk : theme.colors.ink,
+            color: active ? theme.colors.ink : theme.colors.onInk,
+            ...typeScale.captionMono,
+            border: `1px solid ${active ? theme.colors.ink : theme.colors.barSurface}`,
+            // The bubble's own colours invert when the button goes active, and
+            // both of them are palette extremes - an ink bubble becoming an onInk
+            // one is black to white. Transitioned so opening the inbox does not
+            // strobe the badge beside the glyph that is already cross-fading.
+            //
+            // The dip is `enterScale` used in reverse: the bubble is already on
+            // screen, so it acknowledges a new number by settling back into place
+            // rather than by arriving. Not an overshoot - DESIGN.md's Motion
+            // section rules those out, and one scale step is all this system has.
+            transform: motionTransform(changed ? `scale(${motion.enterScale})` : "none", reduced),
+            transition: transition(["background-color", "color", "border-color", "transform"], motion.duration.instant, motion.easing.inOut, reduced),
+        }, children: children }));
+}
+/**
+ * The unread signal on the collapsed dot: `sizes.dot`, on the corner facing
+ * away from the docked edge.
+ *
+ * The same object as the pin marker's own unread dot - 8px of ink inside a 2px
+ * ring of whatever surface it sits on - because they mean the same thing and
+ * `sizes.dot` is the token they now share. It replaces an 18px `CountBubble`
+ * carrying the number, which on a 46px circle was a badge nearly half the
+ * control's diameter; the number itself did not go anywhere, it moved into the
+ * button's accessible name, which already carried it.
+ */
+function UnreadDot({ theme, at, }) {
+    return (_jsx("span", { "data-testid": "toolbar-expand-count", "aria-hidden": "true", style: {
+            position: "absolute",
+            ...at,
+            width: sizes.dot,
+            height: sizes.dot,
+            borderRadius: radii.pill,
+            // Ink, like every other indicator here since the accent was demoted to
+            // identity only - and the ring is the bar's own surface, so the dot
+            // separates from the mark behind it whichever palette is in play.
+            background: theme.colors.ink,
+            border: `2px solid ${theme.colors.barSurface}`,
+            boxSizing: "content-box",
+        } }));
+}
+/**
+ * The BitVea mark, inlined from `BitveaLogo.tsx` in the website project. Its
+ * paths are `fill="currentColor"`, so it tints itself from the bar's ink and
+ * needs neither an image dependency nor a network fetch - both of which would
+ * be visible in a host app's waterfall, and the second of which would breach
+ * the "a disabled build makes no request" rule the moment it was cached wrong.
+ */
+export function BitveaMark({ theme, size = 18, inline = false, }) {
+    return (_jsx("span", { "aria-hidden": "true", style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ...(inline ? {} : { width: bar.button, height: bar.button }),
+            flex: "0 0 auto",
+            color: theme?.colors.barInk,
+        }, children: _jsxs("svg", { viewBox: "0 0 435 439", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "BitVea", 
+            // Size in the style object, not in `width`/`height` attributes. Author
+            // CSS beats a presentation attribute, so a host rule as ordinary as
+            // `svg { width: 100% }` resized every icon in the toolbar - invisible
+            // in the preview harness, visible in the wild.
+            style: { display: "block", width: `${size}px`, height: `${size}px` }, children: [_jsx("path", { d: "M347.997 88.1161H87.207L159.233 0.373047H333.067L347.997 88.1161Z", fill: "currentColor" }), _jsx("path", { d: "M434.913 160.795V336.203L347.996 351.268V88.1167L434.913 160.795Z", fill: "currentColor" }), _jsx("path", { d: "M347.997 351.267L275.971 438.971H102.098L87.207 351.267H347.997Z", fill: "currentColor" }), _jsx("path", { d: "M87.2056 88.1167V351.268L0.25 278.59V103.143L87.2056 88.1167Z", fill: "currentColor" })] }) }));
+}
+/**
+ * `process.env` where a bundler has provided one, and an empty bag otherwise.
+ * Guarded because this component also runs in a browser where `process` may
+ * not exist at all, and a ReferenceError here would take the host app down.
+ */
+function readProcessEnv() {
+    if (typeof process === "undefined" || !process.env)
+        return {};
+    return process.env;
+}
+//# sourceMappingURL=FeedbackToolbar.js.map