@bitvea/feedback-toolbar 0.0.1

package/dist/tokens.js

@@ -0,0 +1,749 @@
+import { TOOLBAR_FONT_MONO, TOOLBAR_FONT_SANS } from "./fontFace.js";
+/**
+ * The BitVea brand orange, as the logo draws it.
+ *
+ * It used to be the toolbar's whole action system: every primary button, the
+ * active bar tool, the count bubble, the avatars, the status chip and the
+ * checkbox were orange. That put the accent on metadata and on chrome, which
+ * is the one thing DESIGN.md's colour section forbids - ink carries the CTA,
+ * and colour is reserved. So the accent is now IDENTITY ONLY: it survives on
+ * the pin teardrop, which has to be findable over arbitrary host content and
+ * is the one object in the product that means "BitVea Feedback is here".
+ */
+export const accent = {
+    start: "#DF6520",
+    end: "#F97316",
+    /** 135deg, the direction the mark's own gradient runs. */
+    gradient: "linear-gradient(135deg, #DF6520 0%, #F97316 100%)",
+    onAccent: "#ffffff",
+};
+export const lightPalette = {
+    ink: "#171717",
+    onInk: "#ffffff",
+    body: "#4d4d4d",
+    mute: "#888888",
+    // 5.9:1 on a 14%-orange wash over white.
+    accentInk: "#9a3f0c",
+    link: "#0070f3",
+    hairline: "#ebebeb",
+    hairlineStrong: "#a1a1a1",
+    canvas: "#ffffff",
+    canvasSoft: "#fafafa",
+    canvasSoft2: "#f5f5f5",
+    error: "#ee0000",
+    success: "#0070f3",
+    status: {
+        // warning-soft / warning-deep: 4.5:1.
+        OPEN: { background: "#ffefcf", color: "#ab570a" },
+        // link-bg-soft / link-deep: 4.5:1.
+        IN_REVIEW: { background: "#d3e5ff", color: "#0761d1" },
+        // canvas-soft-2 / body: settled, not coloured.
+        DONE: { background: "#f5f5f5", color: "#4d4d4d" },
+    },
+    barSurface: "#ffffff",
+    barBorder: "rgba(0, 0, 0, 0.08)",
+    barInk: "#171717",
+    barInkMute: "#888888",
+    barHover: "rgba(0, 0, 0, 0.05)",
+    pickTint: "rgba(23, 23, 23, 0.04)",
+    inkSoft: "rgba(23, 23, 23, 0.08)",
+    markerRing: "#ffffff",
+};
+/**
+ * The dark palette, taken verbatim from `packages/ui/src/styles/globals.css`'s
+ * `.dark` block.
+ *
+ * It used to run the OPPOSITE direction from the dashboard's: canvas #0f0f0f
+ * was DARKER than canvasSoft #161616, while globals.css raises canvas #1f1f1f
+ * above canvas-soft #171717. Two dark theories in one product means every rule
+ * of the form "the row is canvas on a canvasSoft sheet" inverts when a
+ * reviewer crosses from the toolbar to the dashboard looking at the same
+ * feedback. One ladder, defined once, mirrored here.
+ */
+export const darkPalette = {
+    ink: "#ffffff",
+    onInk: "#171717",
+    body: "#a1a1a1",
+    mute: "#737373",
+    // 7.1:1 on a 14%-orange wash over the dark canvas.
+    accentInk: "#fb923c",
+    link: "#3291ff",
+    hairline: "#2e2e2e",
+    hairlineStrong: "#545454",
+    canvas: "#1f1f1f",
+    canvasSoft: "#171717",
+    canvasSoft2: "#292929",
+    error: "#ff4d4d",
+    success: "#3291ff",
+    status: {
+        // The dark warning pair, straight from globals.css: 12:1.
+        OPEN: { background: "#3a2b10", color: "#ffefcf" },
+        // link-bg-soft #10233f, but the ink is `--link` #3291ff rather than the
+        // dashboard's `--link-deep` #0070f3: #0070f3 on #10233f measures 3.5:1,
+        // and this chip is 12px. Same reasoning as `accentInk` above - the pair
+        // is chosen per palette so the READING survives the flip, which the
+        // literal value would not.
+        IN_REVIEW: { background: "#10233f", color: "#3291ff" },
+        DONE: { background: "#292929", color: "#a1a1a1" },
+    },
+    // The reference bar is near-black rather than pure black: pure black loses
+    // the hairline border against an OLED-black host page.
+    barSurface: "#0a0a0a",
+    barBorder: "rgba(255, 255, 255, 0.08)",
+    barInk: "#ededed",
+    barInkMute: "#8f8f8f",
+    barHover: "rgba(255, 255, 255, 0.08)",
+    pickTint: "rgba(255, 255, 255, 0.06)",
+    inkSoft: "rgba(255, 255, 255, 0.10)",
+    markerRing: "#0a0a0a",
+};
+export const radii = {
+    /** 4px. Concentric inner corner inside an 8px track, and the pin's point. */
+    xs: "4px",
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    pill: "100px",
+};
+export const spacing = {
+    xxs: "4px",
+    xs: "8px",
+    sm: "12px",
+    md: "16px",
+    lg: "24px",
+};
+/**
+ * The margin an anchored surface keeps against the viewport's edge, as a
+ * NUMBER - the shape `DRAG_THRESHOLD` below already takes, and for the same
+ * reason: every use of it is arithmetic.
+ *
+ * Here rather than beside the clamps in PinLayer.tsx, which is where it began.
+ * The gutter appears on both axes and in both spellings - a `calc()` in a
+ * `maxWidth` and a `maxHeight`, and a `Math.min`/`Math.max` pair per axis in
+ * the code that decides where a card lands - and a token file cannot import a
+ * component's constant, so a copy in PinLayer meant tokens.ts held its own. It
+ * had five spellings between them (`16`, and four `32`s inside `calc()`
+ * strings) under a comment claiming they agreed "by construction". They do
+ * now.
+ *
+ * A card whose `maxWidth` disagreed with the clamp that positions it is
+ * pushed off the very edge the clamp believes it is holding it inside, which
+ * is not a hypothetical: it is `sizes.thread`'s own story one field down.
+ */
+export const VIEWPORT_GUTTER = 16;
+/**
+ * Box sizes that are not spacing and not radii: the handful of fixed squares
+ * and bubbles this package draws. They live here because every one of them
+ * used to be an off-grid literal spelled at its call site (13px, 14px, 9px,
+ * 3px), and a literal at a call site is how the next one gets invented.
+ */
+export const sizes = {
+    /** 16px form control, so the checkbox matches the 16px icons beside it. */
+    control: "16px",
+    /** 28px: the sheet's close button and the pin marker's teardrop. */
+    icon: "28px",
+    /** 18px count bubble - the smallest square that holds 12px mono legibly. */
+    badge: "18px",
+    /** 8px unread dot. */
+    dot: "8px",
+    /**
+     * 24px: the square a per-message action in a thread is drawn in (issue #20),
+     * and the thread's own close control, which used to be an invented 20px.
+     * A 16px glyph on DESIGN.md's `spacing.xxs` all round, so a row of them
+     * matches the 24px `Avatar` opposite it.
+     */
+    action: "24px",
+    /**
+     * The thread card's width, and the pin composer's - issue #20 says in as
+     * many words that "both the pin popover and the composer-only variant share
+     * the 280px constant, widen both consistently", so they share this one.
+     *
+     * 440px is the Vercel comment thread's content width the issue names. It was
+     * two `"280px"` string literals at two call sites, which is exactly the
+     * shape the header comment above warns about: a THIRD place - the composer's
+     * own right-edge clamp - carried `280 + padding + border` as a hard-coded
+     * `300`, so widening one literal would have left the clamp holding the
+     * composer 140px inside an edge it thought it was hugging.
+     *
+     * A `px` string rather than a number because everything else in this object
+     * is one; the two call sites that need arithmetic parse it, which is one
+     * `parseFloat` against three places to forget.
+     */
+    thread: "440px",
+    /**
+     * The ceiling a thread's message list scrolls inside, rather than growing
+     * past the viewport - issue #20's second acceptance line.
+     *
+     * Two caps, and both are needed. The `calc()` is `VIEWPORT_GUTTER` per
+     * side - the same margin the card's own `maxWidth` and the clamp that
+     * places it are built from - and is what stops a long thread running off
+     * the screen. The 480px is what stops a merely
+     * longish one filling a tall monitor: this card floats over the element it
+     * is talking about, and a review tool that covers the thing under review is
+     * the complaint the pin layer's own dismissal comment already answers once.
+     */
+    threadMaxHeight: `min(480px, calc(100vh - ${VIEWPORT_GUTTER * 2}px))`,
+};
+/**
+ * Motion, from DESIGN.md's `## Motion` section - which this package's need is
+ * what added. See the provenance note at the head of this file: the toolbar
+ * renders through inline style inside somebody else's page, so there is no
+ * cascade to read a `--duration-fast` out of and the values are reproduced
+ * here, exactly as the colours and the type scale are.
+ *
+ * `enterScale` and `enterShift` are tokens rather than literals on purpose.
+ * The acceptance criterion for issue #24 is "no inline durations", and a bare
+ * `0.96` spelled at four call sites is the same defect one level down - the
+ * fifth surface is where somebody writes 0.95 and the product has two enters.
+ *
+ * Nothing here is a keyframe or a loop. Every value is one leg of a state
+ * transition a reviewer caused, which is the whole of the posture DESIGN.md
+ * states: small, fast, over before it is noticed.
+ */
+export const motion = {
+    duration: {
+        /** 80ms - hover, press, a badge whose number changed. */
+        instant: "80ms",
+        /** 120ms - the default, and every surface enter. */
+        fast: "120ms",
+        /**
+         * 180ms - the ceiling, and the bar's collapse (issue #22) is its one
+         * consumer: it is the only transition here whose box changes shape
+         * underneath it, so `fast` lands before the eye has followed the pill's
+         * snap. Anything else reaching for this step needs the written reason
+         * DESIGN.md's duration table asks for.
+         */
+        settle: "180ms",
+    },
+    easing: {
+        /** Ease-out, for anything arriving. */
+        enter: "cubic-bezier(0, 0, 0.2, 1)",
+        /** Ease-in, for anything leaving. */
+        exit: "cubic-bezier(0.4, 0, 1, 1)",
+        /** Symmetric, for a property changing in place on a stationary element. */
+        inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+    /** The one scale step an entering surface takes. */
+    enterScale: 0.96,
+    /**
+     * The one squash a control takes under the pointer. Shallower than
+     * `enterScale` because a button that moves as far as a popover reads as
+     * broken rather than as pressed.
+     */
+    pressScale: 0.97,
+    /** The one travel distance, for a surface that slides rather than scales. */
+    enterShift: "4px",
+};
+/**
+ * The scale in order, so "one step faster" is arithmetic rather than a guess.
+ * Module scope rather than rebuilt per call, and `MotionDuration[]` rather
+ * than a tuple so `indexOf` accepts any member of the union.
+ */
+const DURATION_STEPS = [
+    motion.duration.instant,
+    motion.duration.fast,
+    motion.duration.settle,
+];
+/**
+ * "An exit is one step faster than its matching enter", as a function.
+ *
+ * DESIGN.md's duration table states that rule and issue #24's helper claimed
+ * to enforce it centrally - while hard-coding `instant` for every exit. That
+ * was one step faster for the two surfaces on `fast` and TWO steps faster for
+ * anything on `settle`, which is exactly the step issue #22's collapse then
+ * took. A rule enforced only for the durations that existed when it was
+ * written is not enforced.
+ *
+ * Both halves of an exit read this: the `transition` a surface leaves on, and
+ * the timer that then takes it out of the DOM. DESIGN.md says the removal is
+ * deferred "by exactly the exit duration", and two literals that happen to
+ * agree today is how that stops being true.
+ *
+ * `instant` has nowhere faster to go and answers itself, which is the right
+ * degradation - a surface entering at 80ms is already at the floor.
+ */
+export function exitFor(enter) {
+    // `noUncheckedIndexedAccess` is on, and step 0 - or an `enter` the type
+    // says cannot arrive - lands on the floor either way.
+    return (DURATION_STEPS[DURATION_STEPS.indexOf(enter) - 1] ?? motion.duration.instant);
+}
+/**
+ * A `transition` shorthand, composed rather than spelled.
+ *
+ * This is what makes "no inline durations" mechanically true instead of a
+ * promise: the only way to write a transition in this package is to name a
+ * duration token and an easing token, and a call site that wanted `140ms`
+ * would have to add it to `motion.duration` first, where a reviewer sees it.
+ *
+ * Deliberately not `transition: all`. `all` transitions properties nobody
+ * chose, `width` and `top` among them, and DESIGN.md forbids animating those
+ * over a host page for the reflow they cause. Every property is named.
+ *
+ * `reduced` IS REQUIRED, and that is the whole design of this signature.
+ * DESIGN.md's Reduced Motion rule is a system-layer promise, and the first
+ * draft of issue #24 kept it by writing `reduced ? [a, b] : [a, b, "transform"]`
+ * at seven call sites - seven independent restatements of one rule, none of
+ * them checked, and an eighth control added later would simply have omitted it
+ * and honoured nothing. Making the preference an argument nobody can leave out
+ * moves the rule to the token layer where the rest of this file lives: a call
+ * site now states the preference it read and this function decides what that
+ * means. Pass `false` only where there is genuinely no reviewer to ask.
+ */
+export function transition(properties, duration, easing, reduced) {
+    // Under `prefers-reduced-motion: reduce`, `transform` comes out of the list
+    // and the rest clamps to `instant`. Both halves are DESIGN.md's, and the
+    // colour and opacity cross-fades deliberately survive: being told that a
+    // resolve landed is information, and a cross-fade is not vestibular motion.
+    const named = reduced
+        ? properties.filter((property) => property !== "transform")
+        : properties;
+    const length = reduced ? motion.duration.instant : duration;
+    return named.map((p) => `${p} ${length} ${easing}`).join(", ");
+}
+/**
+ * The transform half of the same rule, so it cannot be honoured by one and
+ * forgotten by the other.
+ *
+ * A reduced-motion surface is already at its final position and size on its
+ * first frame - so there is no offset to animate out of, which is why this
+ * answers `none` rather than shortening anything. `transition` above drops
+ * `transform` from the property list in the same breath; a call site that used
+ * one of these and not the other would either animate a transform it promised
+ * not to, or leave a surface parked at an offset with nothing to move it.
+ */
+export function motionTransform(value, reduced) {
+    return reduced ? "none" : value;
+}
+/**
+ * How long an exit lasts, in milliseconds, for the deferred-unmount timer.
+ *
+ * A number as well as a string because a `setTimeout` cannot take "80ms" and
+ * hard-coding 80 beside the token is how the two drift apart. Parsed from the
+ * token rather than declared twice.
+ */
+export function durationMs(duration) {
+    return Number.parseFloat(duration);
+}
+/**
+ * The type scale, as whole roles rather than as a `font:` shorthand.
+ *
+ * Named `typeScale` rather than `type`: a binding called `type` cannot be
+ * imported or re-exported in TypeScript without colliding with the `import {
+ * type X }` modifier syntax, so the plain name would have forced every call
+ * site into a namespace import.
+ *
+ * Every one of these used to be spelled `font: 400 13px ...` at the call site,
+ * and the shorthand RESETS letter-spacing to normal - so the entire injected
+ * surface rendered at default tracking while DESIGN.md's own Typography
+ * section calls negative tracking "part of the voice". Size, weight and
+ * tracking now travel together in one object, because in an inline-style
+ * codebase anything that can be spelled separately eventually is.
+ *
+ * Every property is stated, including the ones that look like defaults: the
+ * toolbar inherits from a host page that may set `letter-spacing`,
+ * `line-height` or a font stack on `*`, and an unstated property is the host's
+ * to decide.
+ */
+/**
+ * DESIGN.md's two faces, first, then the fallbacks.
+ *
+ * The head of each stack is the namespaced family `fontFace.ts` loads into the
+ * host document - see the note there for why naming plain `Geist` misses on a
+ * customer's page AND on this product's own preview route. `Geist` and
+ * `Geist Mono` stay second: a host that genuinely has the face under its real
+ * name gets it without a download.
+ *
+ * These were `Inter, system-ui, …` and `ui-monospace, …` - DESIGN.md's stacks
+ * with the brand face deleted from the front of both, which is why the toolbar
+ * rendered in the reviewed site's own font.
+ */
+const SANS_STACK = `"${TOOLBAR_FONT_SANS}", Geist, Inter, system-ui, -apple-system, sans-serif`;
+const MONO_STACK = `"${TOOLBAR_FONT_MONO}", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace`;
+export const typeScale = {
+    /** body-sm. The default voice of every popover. */
+    bodySm: {
+        fontFamily: SANS_STACK,
+        fontSize: "14px",
+        fontWeight: 400,
+        lineHeight: "20px",
+        letterSpacing: "-0.28px",
+    },
+    /** body-sm-strong. Names, button labels, the one emphasis this UI has. */
+    bodySmStrong: {
+        fontFamily: SANS_STACK,
+        fontSize: "14px",
+        fontWeight: 500,
+        lineHeight: "20px",
+        letterSpacing: "-0.28px",
+    },
+    /** display-sm, 600 - the weight ceiling, and only at 20px. */
+    displaySm: {
+        fontFamily: SANS_STACK,
+        fontSize: "20px",
+        fontWeight: 600,
+        lineHeight: "28px",
+        letterSpacing: "-0.6px",
+    },
+    /** caption. Footnotes and secondary lines that are not technical facts. */
+    caption: {
+        fontFamily: SANS_STACK,
+        fontSize: "12px",
+        fontWeight: 400,
+        lineHeight: "16px",
+        letterSpacing: "0px",
+    },
+    /** caption-mono. Every identifier: branch, commit, path, timestamp, status. */
+    captionMono: {
+        fontFamily: MONO_STACK,
+        fontSize: "12px",
+        fontWeight: 400,
+        lineHeight: "16px",
+        letterSpacing: "0px",
+    },
+    /** code, 13px/20px. The captured selector, and nothing else so far. */
+    code: {
+        fontFamily: MONO_STACK,
+        fontSize: "13px",
+        fontWeight: 400,
+        lineHeight: "20px",
+        letterSpacing: "0px",
+    },
+};
+/**
+ * The two faces, for the places that need a family without a whole role.
+ *
+ * NOT `Geist`. No `@font-face` in this repo registers that family: `next/font`
+ * exposes a hashed name through `--font-geist` and nothing else, so naming
+ * "Geist" here has never rendered the brand face on any surface, the preview
+ * harness included - it silently fell through to Inter or to system-ui. These
+ * are DESIGN.md's own sanctioned substitutes ("Note on Font Substitutes":
+ * Inter 400/500/600 for the geometric sans, a monospace of the same voice for
+ * the technical layer). Self-hosting the real faces inside this bundle is
+ * blocked on a licence decision and on CLAUDE.md section 8's size ceiling.
+ *
+ * And NOT `var(--font-geist)` at the head of the stack either. A `var()`
+ * reference to an undefined custom property makes the whole declaration
+ * invalid at computed-value time; `font-family` is inherited, so the toolbar
+ * would then inherit the HOST page's typeface on every site that does not
+ * define that variable - while looking correct inside apps/web, which does.
+ */
+export const fonts = {
+    sans: typeScale.bodySm.fontFamily,
+    mono: typeScale.captionMono.fontFamily,
+};
+/**
+ * The properties a host page's own element rules can set on markup this
+ * package renders unstyled, spread FIRST into every `form`, `label`, `header`,
+ * `section` and `p` here.
+ *
+ * The package ships no stylesheet, so nothing leaks OUT. Nothing stopped a
+ * host's `form { margin: 0 0 1rem; padding: 1rem; border: 1px solid #ccc }`
+ * from leaking IN and repainting the composer, which is the same class of bug
+ * as the `box-sizing` note in FeedbackToolbar.tsx and was invisible on the
+ * preview route only because apps/web loads Tailwind's preflight.
+ */
+export const resetBox = {
+    margin: 0,
+    padding: 0,
+    border: 0,
+    background: "transparent",
+    boxSizing: "border-box",
+};
+/**
+ * Visually hidden, still in the accessibility tree AND still in `textContent`.
+ *
+ * An icon-only control needs a name, and `aria-label` alone would give it one
+ * only for a screen reader: `toHaveText` and `Node.textContent` - which is how
+ * both the e2e suite and the unit tests read the resolve control's label - see
+ * nothing an `aria-label` says. So the label is real text, clipped.
+ *
+ * Clipped rather than `display: none` or `visibility: hidden`, because both of
+ * those take the text OUT of the accessibility tree and out of `textContent`,
+ * which is the whole thing being preserved. The `clip` / `clipPath` pair is
+ * belt and braces: `clip` is deprecated and `clip-path` is what actually
+ * applies in a modern engine, and this package cannot rely on a host stylesheet
+ * to have shipped either.
+ */
+export const srOnly = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    margin: "-1px",
+    padding: 0,
+    border: 0,
+    overflow: "hidden",
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap",
+};
+/** The bar's fixed geometry, from the reference's computed CSS. */
+export const bar = {
+    // 8px, DESIGN.md's `rounded.md`. It was 32px, which is on no step in the
+    // radius table and put an in-product overlay in marketing-pill territory.
+    // The BUTTONS inside it stay pill-shaped: `icon-button-circular` specifies
+    // `rounded.full`, and pill on a 36px box is arithmetically the same thing.
+    radius: radii.md,
+    padding: spacing.xxs,
+    gap: spacing.xs,
+    /** 36x36 icon buttons, so a 4px-padded bar lands at the reference height. */
+    button: "36px",
+    /**
+     * The bar's height, in BOTH forms: a 36px button, 4px of padding either
+     * side and the 1px hairline, which is also the collapsed circle's diameter.
+     *
+     * Written down rather than left implicit because the layout now has to do
+     * arithmetic with it: a mid-edge dock centres the BAR on the viewport, and
+     * doing that without moving it when a popover opens means offsetting the
+     * dock's own padding by half this. See `dockLayout`.
+     */
+    height: "46px",
+    /**
+     * Issue #21's "standard viewport inset", on all four sides.
+     *
+     * It was `bottom`, because the bottom edge was the only dock there was. The
+     * dock is now a box inset from every edge by this one value, which is what
+     * makes "the bar always ends flush to an edge with the standard viewport
+     * inset" one number rather than four pieces of per-edge arithmetic.
+     */
+    inset: spacing.xs,
+};
+/**
+ * How far a pointer has to travel before a press on the bar is a DRAG rather
+ * than a click. Issue #21.
+ *
+ * A hit-test distance, deliberately not `motion.enterShift`: that is how far
+ * an entering surface travels, and the two agreeing on 4px today is not a
+ * reason for one to be defined in terms of the other. 6px swallows the wobble
+ * a trackpad click or a thumb tap produces, and is well inside the collapsed
+ * dot's own 46px box - so a reviewer who means to drag the dot has crossed it
+ * long before the pointer leaves the control.
+ */
+export const DRAG_THRESHOLD = 6;
+/**
+ * The two axes per dock, as a table rather than a `split("-")`.
+ *
+ * A table because it is also the guard: `isToolbarDock` asks whether the value
+ * is one of these keys, and a parser built on string splitting would accept
+ * `"middle-center"` and every other spelling nobody designed for.
+ */
+const DOCK_AXES = {
+    "top-left": { vertical: "top", horizontal: "left" },
+    "top-center": { vertical: "top", horizontal: "center" },
+    "top-right": { vertical: "top", horizontal: "right" },
+    "middle-left": { vertical: "middle", horizontal: "left" },
+    "middle-right": { vertical: "middle", horizontal: "right" },
+    "bottom-left": { vertical: "bottom", horizontal: "left" },
+    "bottom-center": { vertical: "bottom", horizontal: "center" },
+    "bottom-right": { vertical: "bottom", horizontal: "right" },
+};
+/**
+ * The dock a reviewer who has never dragged anything gets, and the one issue
+ * #21 calls the default.
+ */
+export const DEFAULT_DOCK = "bottom-center";
+/**
+ * Every dock, in the reading order the keyboard control lays them out: three
+ * across the top, the two mid-edges, three across the bottom. Exported so the
+ * 3x3 grid in the account surface and the tests do not each spell the list.
+ */
+export const TOOLBAR_DOCKS = Object.keys(DOCK_AXES);
+/**
+ * Beside `isThemeMode`, and for the same reason: this value comes back out of
+ * the HOST's `localStorage`, so it can be anything their code, an extension or
+ * a newer build of this toolbar wrote there. `hasOwnProperty` rather than
+ * `in`, which would accept `"toString"`.
+ */
+export function isToolbarDock(value) {
+    return (typeof value === "string" &&
+        Object.prototype.hasOwnProperty.call(DOCK_AXES, value));
+}
+const CROSS = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
+/**
+ * Everything that changes with the dock, derived in one place.
+ *
+ * Four call sites used to be four independent decisions waiting to disagree -
+ * the dock's flex triple, the popover's origin, the popover's gap and the
+ * badge's corner. They are all the same two facts (which vertical band, which
+ * horizontal band), so they are answered together.
+ */
+export function dockLayout(dock) {
+    const { vertical, horizontal } = DOCK_AXES[dock];
+    const top = vertical === "top";
+    return {
+        vertical,
+        horizontal,
+        flexDirection: top ? "column-reverse" : "column",
+        // The bar's own edge at every dock - `column-reverse` has already moved
+        // that end to the top of the viewport for a top dock - so the popover
+        // stacks AWAY from the pill and the pill itself never moves. A mid-edge
+        // dock is then a bottom padding rather than a `justify-content`, which is
+        // the difference between centring the bar and centring the bar plus
+        // whatever it has open.
+        paddingBottom: vertical === "middle" ? `calc(50vh - ${bar.height} / 2)` : bar.inset,
+        alignItems: CROSS[horizontal],
+        popoverOrigin: `${top ? "top" : "bottom"} ${horizontal}`,
+        popoverGap: top ? "marginTop" : "marginBottom",
+        badge: {
+            ...(top ? { bottom: 0 } : { top: 0 }),
+            ...(horizontal === "right" ? { left: 0 } : { right: 0 }),
+        },
+        // The icon is drawn pointing right, so 0 is the right edge and the rest
+        // follow clockwise. A mid-edge dock points sideways; top and bottom point
+        // at the edge they are flush against.
+        chevron: vertical === "top"
+            ? -90
+            : vertical === "bottom"
+                ? 90
+                : horizontal === "left"
+                    ? 180
+                    : 0,
+    };
+}
+// DESIGN.md's elevation colours, the same four `--elevation-*` values
+// globals.css defines, spelled here because this package has no cascade to
+// read them from.
+const LIGHT_RING = "#00000014";
+const LIGHT_DROP_SOFT = "#00000005";
+const LIGHT_DROP = "#0000000a";
+const LIGHT_DROP_DEEP = "#0000000f";
+const DARK_RING = "#ffffff1a";
+const DARK_DROP_SOFT = "#00000029";
+const DARK_DROP = "#0000003d";
+const DARK_DROP_DEEP = "#0000004d";
+const lightShadows = {
+    // The one stated divergence from the elevation table, and the reason is in
+    // the interface above: a chip over unknown content is not a card on a page.
+    // Its ring is INSET like every other, so the border it already draws is the
+    // only edge it has.
+    bar: `0 0 0 1px ${LIGHT_RING} inset, 0 4px 32px rgba(0, 0, 0, 0.12)`,
+    // Level 5 - modal / dialog surfaces and dropdown menus, verbatim.
+    popover: `0px 1px 1px ${LIGHT_DROP_SOFT}, 0px 8px 16px -4px ${LIGHT_DROP}, 0px 24px 32px -8px ${LIGHT_DROP_DEEP}, 0 0 0 1px ${LIGHT_RING} inset`,
+    // Level 4 - callout panels. The old marker stack ran to 18% black, three
+    // times the system's deepest step.
+    marker: `0px 2px 2px ${LIGHT_DROP}, 0px 8px 16px -4px ${LIGHT_DROP}, 0 0 0 1px ${LIGHT_RING} inset`,
+    insetHairline: `0 0 0 1px ${LIGHT_RING} inset`,
+    focusRing: "0 0 0 2px rgba(23, 23, 23, 0.55)",
+};
+const darkShadows = {
+    // The reference's own value: a white glow, which is what makes a near-black
+    // pill legible over near-black content. Every layer of DESIGN.md's stack is
+    // black at 2-6%, which under a #0a0a0a pill on a dark host paints nothing at
+    // all - so the glow stays and the missing INSET RING is added beside it.
+    // Those are two separate acts and only the second one is a fix.
+    bar: `0 0 0 1px ${DARK_RING} inset, 0 4px 32px rgba(255, 255, 255, 0.10)`,
+    popover: `0px 1px 1px ${DARK_DROP_SOFT}, 0px 8px 16px -4px ${DARK_DROP}, 0px 24px 32px -8px ${DARK_DROP_DEEP}, 0 0 0 1px ${DARK_RING} inset`,
+    marker: `0px 2px 2px ${DARK_DROP}, 0px 8px 16px -4px ${DARK_DROP}, 0 0 0 1px ${DARK_RING} inset`,
+    insetHairline: `0 0 0 1px ${DARK_RING} inset`,
+    focusRing: "0 0 0 2px rgba(255, 255, 255, 0.65)",
+};
+export const lightTheme = {
+    resolved: "light",
+    colors: lightPalette,
+    shadows: lightShadows,
+};
+export const darkTheme = {
+    resolved: "dark",
+    colors: darkPalette,
+    shadows: darkShadows,
+};
+export function themeFor(resolved) {
+    return resolved === "dark" ? darkTheme : lightTheme;
+}
+/**
+ * Where the reviewer's manual override is remembered. `localStorage` on the
+ * host origin, because the preference belongs to this person on this app and
+ * there is nowhere else to put it that survives a reload without a round trip
+ * the disabled-build requirement forbids.
+ */
+export const THEME_STORAGE_KEY = "bitvea.feedback-toolbar.theme";
+/** Media query the default follows, read from the host document. */
+export const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+/**
+ * The other preference the toolbar reads from the HOST document, beside it
+ * because they are answered the same way - one `matchMedia` subscription each,
+ * through `useSyncExternalStore` so there is a server snapshot.
+ *
+ * It is the host's document rather than ours because there is only one: the
+ * reviewer's own OS setting, which the page the toolbar is injected into has
+ * no say in. See `usePrefersReducedMotion` in motion.ts.
+ */
+export const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+export function isThemeMode(value) {
+    return value === "system" || value === "light" || value === "dark";
+}
+/**
+ * Above almost everything. Host apps routinely use z-indexes in the thousands
+ * for their own modals; the toolbar has to sit above those to be usable at
+ * all, and it is the reviewer's own overlay rather than part of the page.
+ */
+export const Z_INDEX = 2_147_483_000;
+/**
+ * The toolbar's own internal stacking order, inside the root that `Z_INDEX`
+ * lifts above the host page.
+ *
+ * This exists because every one of these surfaces used to pick its own number
+ * and the bar picked none at all - it inherited `z-index: auto`, which loses
+ * to any positive value in the same stacking context. The consequences were
+ * not cosmetic: the picking overlay painted over the bar and swallowed the
+ * click that cancels picking, leaving a reviewer with no way out of crosshair
+ * mode, and the inbox sheet covered the account button on any viewport under
+ * about 1024px.
+ *
+ * So the order is written down once, and the rule it encodes is that THE BAR
+ * IS ALWAYS REACHABLE. It is the only persistent chrome the toolbar has; every
+ * other surface is something the bar opened and the bar has to be able to
+ * close. Everything else stacks under it, most transient first.
+ *
+ * `thread` sits above `surface` rather than tying with it, and issue #23 is
+ * why. A z-index only orders the siblings that declare one; equal values fall
+ * back to DOM order, and the inbox sheet is rendered after the pin layer in
+ * FeedbackToolbar.tsx - so a thread parked at `surface` loses to the sheet on
+ * any pin under its 340px. That is the common case rather than the exotic one:
+ * `focusPin` deliberately leaves the sheet open when a reviewer clicks a row,
+ * because they are working down a list, and the thread they just asked for is
+ * then the surface they are reading. It goes above the list they asked from.
+ *
+ * The other half of #23 was that an anchored thread never reached this ladder
+ * at all. It renders inside its marker's wrapper, and that wrapper is
+ * `position: fixed` with a z-index - a stacking context whatever its opacity -
+ * so the rung a thread paints at is the one the WRAPPER declares, not one the
+ * thread could set on itself. `PinMarker` therefore moves its wrapper between
+ * `marker` and `thread` as the thread opens, and nothing inside that wrapper
+ * declares a z-index of its own. Read this list as the order that actually
+ * renders; when it stops being that, the code is what is wrong.
+ *
+ * WHAT IS DELIBERATELY NOT IN THIS LADDER: the note and account popovers.
+ * `surface` used to be documented as "threads, composers, popovers and the
+ * inbox sheet" and only the sheet was ever really there - the popovers are
+ * children of the DOCK, so they ride its `bar` rung and have never declared
+ * one of their own. Splitting `thread` out of `surface` for issue #23 made
+ * that list true for threads and composers and left the popovers unmentioned,
+ * which is worse than the wrong entry: a reader could not place them at all.
+ * They are chrome rather than surfaces. They are anchored to the bar, opened
+ * and closed by the button beside them, and clamped to the same strip, so
+ * "above everything, with the bar" is the whole of their layering and a rung
+ * would be a second place to state it.
+ */
+export const layers = {
+    /** The picking wash. Under everything, including its own markers. */
+    picker: Z_INDEX - 5,
+    /** Pin markers: part of the page's review state, so below any open surface. */
+    marker: Z_INDEX - 4,
+    /** Panels the bar opened and the bar closes again: the inbox sheet. */
+    surface: Z_INDEX - 3,
+    /**
+     * The one thread the reviewer is reading, and the composer they are writing
+     * the next one in - a composer is a thread that does not exist yet, so it
+     * shares this rung and wins the tie by being rendered last.
+     */
+    thread: Z_INDEX - 2,
+    /** Alerts that must be seen over an open surface. */
+    alert: Z_INDEX - 1,
+    /** The floating bar. Nothing the toolbar renders may cover it. */
+    bar: Z_INDEX,
+};
+//# sourceMappingURL=tokens.js.map