@ingcreators/annot-core 0.1.0

package/styles/toolbar.css

@@ -0,0 +1,673 @@
+#toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: var(--annot-bg-panel);
+  border-bottom: 1px solid var(--annot-border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  gap: 4px;
+  z-index: 10;
+}
+
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 28px;
+  background: var(--annot-border-color);
+  margin: 0 6px;
+}
+
+.toolbar-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--annot-text-primary);
+  font-size: 20px;
+  cursor: pointer;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 300,
+    "GRAD" 0,
+    "opsz" 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.1s,
+    border-color 0.1s;
+  position: relative;
+}
+
+.toolbar-btn:hover {
+  background: var(--annot-hover-bg);
+  border-color: var(--annot-hover-border);
+}
+
+.toolbar-btn.active {
+  background: var(--annot-active-bg);
+  border-color: var(--annot-active-border);
+  color: var(--annot-accent);
+}
+
+/* Custom CSS tooltip — generic for any element with data-tooltip.
+ *
+ * Uses `[data-tooltip]` (NOT `[title]`) as the source attribute so
+ * the browser doesn't show a DUPLICATE native tooltip on top of our
+ * custom one. `title` triggers the OS's built-in yellow bubble
+ * (Windows) / gray bubble (macOS), which is styled differently per
+ * platform, can't be themed, and appears with a fixed ~500 ms delay.
+ * Modern SaaS tools (Figma, Notion, Linear, Miro, VS Code, etc.) all
+ * skip `title` and use a custom tooltip like this one.
+ *
+ * Accessibility: `aria-label` is set in parallel with `data-tooltip`
+ * (via the `setTooltip()` helper in utils/tooltip.ts), so screen
+ * readers still announce the control's name.
+ *
+ * Scope: any element with `data-tooltip`, NOT scoped to specific
+ * button classes — otherwise every new button or tooltip-bearing
+ * element requires adding its class to this selector. A generic
+ * rule means `setTooltip(anyEl, "…")` Just Works.
+ *
+ * `bottom: -40px` — wide enough to clear the extended body of an
+ * accessibility-enlarged mouse cursor. Default OS cursors (~16×20 px)
+ * don't need this much offset, but Windows' "Large" / "Extra Large"
+ * pointer presets (32–64 px) extend down-right from the tip and would
+ * obscure a closer tooltip. 40 px clears the "Large" preset. */
+
+/* Positioning context for the ::after pseudo. `:where()` keeps the
+ * specificity at zero so consuming elements can still override
+ * `position` (e.g. a table cell that needs `position: static` for
+ * its own layout) without `!important`. Most elements that get
+ * data-tooltip are buttons/chips that are fine with relative. */
+:where([data-tooltip]) {
+  position: relative;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--annot-bg-panel-deep);
+  color: var(--annot-text-primary);
+  /* Force a plain system font. Without this, buttons that carry the
+   * `material-symbols-outlined` class would make the tooltip's text
+   * try to render as Material Symbols ligatures (tooltip text like
+   * "Help" isn't a valid ligature, so the browser falls back to
+   * whatever glyph coverage the font has — which looks weird /
+   * unstyled). */
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-variation-settings: normal;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 1.2;
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--annot-border-color);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 100;
+  /* Subtle shadow so the bubble reads against the canvas background
+   * (which may be the screenshot itself, not a theme-panel color). */
+  box-shadow: 0 2px 6px var(--annot-shadow, rgba(0, 0, 0, 0.15));
+}
+
+[data-tooltip]:hover::after {
+  opacity: 1;
+}
+
+.toolbar-input {
+  height: 28px;
+  border: 1px solid var(--annot-input-border);
+  border-radius: 4px;
+  background: var(--annot-input-bg);
+  color: var(--annot-text-primary);
+  font-size: 12px;
+  padding: 0 6px;
+}
+
+.toolbar-color {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--annot-input-border);
+  border-radius: 4px;
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+}
+
+.toolbar-color::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+.toolbar-color::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+
+.toolbar-range {
+  width: 60px;
+  accent-color: var(--annot-accent);
+}
+
+.toolbar-label {
+  font-size: 11px;
+  color: var(--annot-text-secondary);
+  margin-right: 2px;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+/* ---- Vertical variant (left-side tool strip) ----
+ *
+ * Enabled via the `.toolbar-vertical` class on the Toolbar container.
+ * The same DOM structure is used; only layout-direction properties are
+ * overridden so tool buttons, groups, separators, and the spacer all
+ * rotate 90°.
+ */
+.toolbar-vertical {
+  /* `<annot-toolbar>` is a custom element with no UA stylesheet, so
+   * its default `display` is `inline`. The horizontal toolbar mode
+   * worked accidentally because inline-block children flowed
+   * horizontally on their own; the vertical mode worked accidentally
+   * because `<div class="tool-btn-wrap">` is block-level and stacks
+   * naturally. In both modes every flex-related declaration below
+   * (`flex-direction`, `gap`, `align-items`, `flex: 1` on the
+   * spacer) was silently no-op'd until `display: flex` was set on
+   * the host. #428 added `align-items: center` to fix the
+   * separator off-centre but it never took effect for that reason —
+   * the storybook DOM inspection in the follow-up PR confirmed
+   * `parentDisplay: "inline"` on the toolbar. Promoting to flex
+   * here turns every previously-silent rule on at once: gap
+   * spacing, centre-aligned narrower children, and the spacer
+   * actually pushing the history group to the bottom of the
+   * strip. */
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0;
+  gap: 2px;
+  align-items: center;
+}
+.toolbar-vertical .toolbar-group {
+  flex-direction: column;
+}
+.toolbar-vertical .toolbar-separator {
+  width: 28px;
+  height: 1px;
+  margin: 6px 0;
+}
+.toolbar-vertical .toolbar-spacer {
+  flex: 1; /* flex: 1 already grows the correct axis in column layout */
+}
+/* Vertical mode: suppress the CSS ::after tooltip. It would need to
+ * extend to the right of the 48px sidebar, which (a) gets clipped by
+ * overflow-x: hidden and (b) pollutes the sidebar's scroll-area
+ * calculation causing a spurious horizontal scrollbar. Native browser
+ * `title` tooltips still appear on hover for accessibility — we just
+ * drop the custom styled bubble in this mode. */
+/* Vertical toolbar: reposition the tooltip to the RIGHT of the
+ * button instead of below. Below-positioning makes no sense for a
+ * vertical strip — the tooltip would overlap the NEXT tool button
+ * stacked directly underneath. Rightward positioning keeps the
+ * tooltip in the canvas area beside the sidebar, which is empty
+ * space from the sidebar's perspective.
+ *
+ * Requires `#editor-sidebar { overflow-x: visible }` (see editor.css)
+ * so the tooltip can extend beyond the 48px strip. */
+.toolbar-vertical .toolbar-btn[data-tooltip]::after {
+  bottom: auto;
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+  margin-left: 12px;
+}
+/* Dropdown arrow — horizontal mode centers it below the icon; in
+ * vertical mode, put it on the right edge so it doesn't bleed into
+ * the next tool stacked below. */
+/* Tool dropdown menu opens to the RIGHT of the tool in vertical mode
+ * instead of below it. */
+.toolbar-vertical .tool-dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 6px;
+}
+
+/* Copy dropdown */
+.copy-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.copy-dropdown-arrow {
+  width: 20px;
+  font-size: 10px;
+  padding: 0;
+  margin-left: -2px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.copy-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+  background: var(--annot-bg-panel);
+  border: 1px solid var(--annot-border-color);
+  border-radius: 6px;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 4px 12px var(--annot-shadow);
+  z-index: 100;
+}
+
+.copy-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  color: var(--annot-text-primary);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.copy-dropdown-item:hover {
+  background: var(--annot-choice-hover);
+  color: var(--annot-accent);
+}
+
+/* Tool button with dropdown */
+.tool-btn-wrap {
+  position: relative;
+}
+
+/* Note: the previous `.tool-dropdown-arrow` caret was removed when
+ * the variant badge took over the flyout-trigger role. Keeping the
+ * rules for `.tool-dropdown-menu` below because some other code
+ * paths may reuse the class name for non-toolbar popovers.
+ *
+ * The `.toolbar-vertical .tool-dropdown-menu` rule earlier in the
+ * file is a contextual override (different docking for vertical
+ * toolbars); the base styling lives here with the rest of the
+ * dropdown-menu rules, hence the descending-specificity suppression. */
+/* biome-ignore lint/style/noDescendingSpecificity: base rule deliberately follows contextual .toolbar-vertical descendant */
+.tool-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 2px;
+  background: var(--annot-bg-panel-deep);
+  border: 1px solid var(--annot-border-color);
+  border-radius: 8px;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  z-index: 200;
+  box-shadow: 0 4px 16px var(--annot-shadow);
+  min-width: 220px;
+  white-space: nowrap;
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+}
+
+/* --- Tool flyout (variant picker opened from the ▼ arrow) ---
+ *
+ * Rendered into <body> with position: fixed so the popover escapes the
+ * toolbar / editor-header `overflow: hidden`. Placement (right/below)
+ * is computed in JS via getBoundingClientRect + viewport clamp.
+ */
+.tool-flyout {
+  background: var(--annot-bg-panel-deep);
+  border: 1px solid var(--annot-border-color);
+  border-radius: 8px;
+  padding: 6px;
+  box-shadow: 0 6px 20px var(--annot-shadow);
+  display: flex;
+  gap: 4px;
+}
+
+/* Compact variant picker — tight row of icon chips. The chips are the
+ * primary hit target (parent-button click uses the last picked variant). */
+.tool-flyout-variant .tool-flyout-row {
+  display: flex;
+  gap: 4px;
+}
+
+.tool-flyout-chip {
+  width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--annot-text-primary);
+  font-size: 22px;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 500,
+    "GRAD" 0,
+    "opsz" 24;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+
+.tool-flyout-chip:hover {
+  /* Border on hover mirrors `.tool-flyout-color-chip:hover` and gives
+   * the user a clear "this row is targetable" signal even when the
+   * `--annot-hover-bg` token resolves to a very subtle tint (e.g.
+   * VSCode's `--vscode-list-hoverBackground`). Without the border
+   * the bg-only delta looked nearly identical to the inactive chip
+   * under VSCode's theme map. */
+  background: var(--annot-hover-bg);
+  border-color: var(--annot-accent);
+  color: var(--annot-accent);
+}
+
+.tool-flyout-chip.active {
+  /* "Filled" active state — solid `--annot-accent` background +
+   * contrasting glyph. The earlier "tinted bg + blue glyph" pattern
+   * (`--annot-choice-active` 18 % blue tint vs the hover state's
+   * 6-10 % tint) left active and hover too close to read apart at a
+   * glance, especially in PWA Light where the hover token resolves
+   * to `#eef1fa` and the active token to `#dce4ff` — both pale
+   * blues. Switching to a solid fill makes active visually dominant
+   * across themes:
+   *
+   *   PWA dark   — bg `#7c9cff` (light blue) + glyph `#121933` (navy)  ≈ 9:1
+   *   PWA light  — bg `#3456c9` (dark blue) + glyph `#ffffff` (white) ≈ 9:1
+   *   VSCode     — bg button-bg + glyph button-foreground (overridden
+   *                in the webview's inline `<style>` so the paired
+   *                tokens hold ≥ 4.5:1 even when the workbench theme
+   *                picks a low-contrast button-background).
+   *
+   * Hover keeps the outlined-with-blue-glyph look — a clear
+   * three-state hierarchy (inactive → outlined hover → filled
+   * active). */
+  background: var(--annot-accent);
+  border-color: var(--annot-accent);
+  color: var(--annot-bg-panel);
+}
+
+/* Chips whose glyph is an inline SVG (rather than a Material Symbols
+ * ligature). The SVG inherits `currentColor` from the chip, so all
+ * the color / hover / active rules above Just Work without extra
+ * selectors. Size matches the optical weight of the 22px
+ * material-symbols glyph next to it so mixed flyouts (e.g. rect + SVG
+ * and ellipse + font glyph) read as one row. */
+.tool-flyout-chip-svg {
+  /* Same box + interaction rules as .tool-flyout-chip — mirrored here
+   * because the chip omits the material-symbols class. */
+  width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--annot-text-primary);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+.tool-flyout-chip-svg:hover {
+  /* Match `.tool-flyout-chip:hover` — border for hover affordance
+   * even when `--annot-hover-bg` resolves to a very subtle tint. */
+  background: var(--annot-hover-bg);
+  border-color: var(--annot-accent);
+  color: var(--annot-accent);
+}
+.tool-flyout-chip-svg.active {
+  /* Match `.tool-flyout-chip.active` — see the comment there. */
+  background: var(--annot-accent);
+  border-color: var(--annot-accent);
+  color: var(--annot-bg-panel);
+}
+.tool-flyout-chip-svg > svg {
+  width: 22px;
+  height: 22px;
+}
+
+/* Highlight color picker — a tight row of 6 colored circle chips.
+ * Each chip's background IS the preset color; a ring indicates the
+ * currently-selected swatch so the user sees at a glance which color
+ * a bare click on the Highlight button will draw with. */
+.tool-flyout-highlight .tool-flyout-color-row {
+  display: flex;
+  gap: 6px;
+}
+
+.tool-flyout-color-chip {
+  /* Same 32×32 frame + hover / active vocabulary as .tool-flyout-chip-svg
+   * (glyph chips) so Highlight color selection reads as one entry in
+   * the same Type-picker family. Color lives on the inner ::before
+   * swatch; the frame handles selection affordance via border / bg. */
+  width: 32px;
+  height: 32px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.12s,
+    border-color 0.12s;
+}
+
+.tool-flyout-color-chip::before {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--swatch-color, transparent);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
+}
+
+.tool-flyout-color-chip:hover {
+  background: var(--annot-hover-bg);
+  border-color: var(--annot-accent);
+}
+
+.tool-flyout-color-chip.active {
+  /* Match `.tool-flyout-chip.active` — see the comment there. */
+  background: var(--annot-choice-active, var(--annot-choice-hover, var(--annot-hover-bg)));
+  border-color: var(--annot-accent);
+}
+
+/* Variant-bearing tool buttons need positioning context so the
+ * bottom-right badge and / or the highlight color bar can anchor
+ * themselves. Applied to all toolbar buttons because the cost is
+ * zero when no pseudo-element / child badge exists. */
+.toolbar-btn {
+  position: relative;
+}
+
+/* Variant badge — small icon tucked into the bottom-right corner to
+ * indicate which sub-variant the next bare click on the main button
+ * will create. Serves DOUBLE DUTY as the flyout trigger: clicking
+ * the badge opens the variant picker (see #ensureBadge in
+ * toolbar.ts). The MAIN icon (tool identity) stays fixed; the badge
+ * alone mutates. Pattern-matched to Affinity / Photoshop's
+ * sub-variant indicator, where the in-button indicator IS the flyout
+ * affordance — no separate caret needed.
+ *
+ * Sizing / placement notes:
+ *   - 16×16 visual bounds (slightly larger than the old 14×14 so
+ *     the badge is easier to see AND hit).
+ *   - pointer-events: auto so the badge is clickable. Parent button's
+ *     text-node (the main icon) stays the click target for everything
+ *     EXCEPT the badge zone — so main click activates tool, badge
+ *     click opens flyout.
+ *   - Hover state (ring + slight zoom) signals interactivity. */
+.tool-btn-badge {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--annot-accent);
+  background: var(--annot-bg-panel);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1.5px var(--annot-bg-panel);
+  pointer-events: auto;
+  cursor: pointer;
+  /* Visual badge stays small so it floats outside the main icon's
+   * visual bounds (right/bottom -2px) without occluding it. The
+   * `::before` rule below extends the hit area back out to the
+   * button corner so clickability matches the larger 16×16 era. */
+  padding: 0;
+  border: none;
+  transition:
+    transform 0.12s,
+    box-shadow 0.12s;
+  font-variation-settings:
+    "FILL" 1,
+    "wght" 600,
+    "GRAD" 0,
+    "opsz" 20;
+}
+
+.tool-btn-badge:hover {
+  transform: scale(1.15);
+  box-shadow:
+    0 0 0 1.5px var(--annot-bg-panel),
+    0 0 0 3px var(--annot-accent);
+}
+
+/* Expand the effective click zone beyond the visual circle without
+ * affecting layout. An invisible ::before covers the bottom-right
+ * quadrant of the parent button; the badge remains absolutely
+ * positioned within it. Users can click anywhere in that quadrant
+ * and hit the badge — forgiving for touch + hover-and-click. */
+.tool-btn-badge::before {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+}
+
+/* When the parent button is active (tool selected), accentuate the
+ * badge so it stays visible against the active-state background. */
+/* Active-state badge: blend the badge frame with the active button
+ * background so the badge feels integral to the active tool rather
+ * than a separate panel-coloured callout. The original token name
+ * was `--bg-active` but no such variable existed (typo of
+ * `--annot-active-bg`), so until now the rule fell through to
+ * `--annot-bg-panel` and the badge stayed panel-coloured under
+ * every state. Pointing at the real `--annot-active-bg` token
+ * restores the intended "blend" look:
+ *
+ *   PWA dark    — rgba(124,156,255,0.18) tint over the active
+ *                 button background; blue glyph reads fine.
+ *   PWA light   — pale-blue active tint; blue glyph reads fine.
+ *   VSCode      — list-activeSelectionBackground (strong selection
+ *                 blue); the `.tool-btn-badge` glyph stays
+ *                 `var(--annot-accent)` (also blue) and would
+ *                 vanish, so the inline VSCode override in
+ *                 `packages/vscode/src/webview/index.html` switches
+ *                 the active-badge foreground to
+ *                 `--vscode-list-activeSelectionForeground`. */
+.toolbar-btn.active .tool-btn-badge {
+  background: var(--annot-active-bg, var(--annot-bg-panel));
+  box-shadow: 0 0 0 1.5px var(--annot-active-bg, var(--annot-bg-panel));
+}
+.toolbar-btn.active .tool-btn-badge:hover {
+  box-shadow:
+    0 0 0 1.5px var(--annot-active-bg, var(--annot-bg-panel)),
+    0 0 0 3px var(--annot-accent);
+}
+
+/* SVG-based badge (for rect / rounded variants where Material Symbols
+ * don't give enough visual distinction). Shares positioning + chrome
+ * with .tool-btn-badge, just swaps ligature font rendering for an
+ * inline SVG. Size scales with the badge's 16px bounds so visual
+ * weight matches the ligature glyphs next to it. */
+.tool-btn-badge-svg > svg {
+  width: 10px;
+  height: 10px;
+  color: var(--annot-accent);
+  stroke: currentColor;
+}
+
+/* Highlight tool badge — circular panel frame containing a rounded-
+ * square color swatch. The outer circle keeps the badge shape
+ * consistent with every other tool's variant badge (shape/arrow/
+ * text/marker/redact all get a circle in the bottom-right); the
+ * inner square mirrors the Selection-panel / flyout swatch chips so
+ * the "color = variant" reading lines up visually across all three
+ * surfaces. `--swatch-color` is set inline by #syncToolButtonIcon. */
+.tool-btn-badge-color {
+  /* Shares the variant-badge sizing + offset (12×12 floating outside
+   * the icon at right/bottom -2px) so the toolbar reads consistently
+   * across all tools. Only the inner swatch chip differs. */
+  font-size: 0;
+  color: transparent;
+  /* Inherits background (panel color) + border-radius (50%) from
+   * .tool-btn-badge. Nudge the outer ring thicker so light colors
+   * stay visible against the panel. */
+  box-shadow: 0 0 0 1.5px var(--annot-bg-panel);
+}
+
+.tool-btn-badge-color::after {
+  /* Inner rounded square showing the current highlight color. Sized
+   * to fit the 12×12 frame with a thin ring of badge-bg visible all
+   * around. */
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--swatch-color, transparent);
+  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
+}
+
+.toolbar-btn.active .tool-btn-badge-color {
+  box-shadow: 0 0 0 1.5px var(--annot-active-bg, var(--annot-bg-panel));
+}
+
+/* Larger popover used by the Scratchpad button — holds a scrollable
+ * thumbnail grid plus a save-selection action. */
+.tool-flyout-scratchpad {
+  flex-direction: column;
+  gap: 8px;
+  width: 264px;
+  max-height: min(420px, calc(100vh - 40px));
+  padding: 10px;
+}