@plannotator/ui 0.51.0 → 0.52.1

package/components/html-viewer/bridge-script.asset.js

@@ -2457,9 +2457,88 @@
 
   function anchorTextSnapshot(el) {
     var text = (el.textContent || '').replace(/\s+/g, ' ').trim();
+    if (!text) return anchorSourceSnapshot(el);
     return text.length > 180 ? text.slice(0, 180) : text;
   }
 
+  // Media snapshots. An image, video or frame has no text to verify a weak
+  // selector against, but its source says what it shows the way text says
+  // what a paragraph says, and unlike the structure-derived signatures D1
+  // ruled out, two siblings showing different files never share it. The key
+  // is the author's reference to the resource: relative to the document's
+  // base when it lies under it (a host may re-root assets per session, through
+  // a <base> on its own asset route or by rewriting attributes to a session
+  // host), else its root-relative path on the document's own origin (a live
+  // app's proxy port changes per session), else origin and path. The query
+  // and the fragment are part of what a source shows (/_next/image?url=a.jpg,
+  // proto.html?step=2, icons.svg#close), so they count, but only as a digest:
+  // they can carry per-visit state (signed URLs, tokens) that must never be
+  // stored in plain text in an annotation. A source whose query changes per
+  // load therefore does not restore, which fails closed. Inline sources
+  // (data:, blob:) name no resource and get no key.
+  var ANCHOR_SOURCE_PREFIX = 'src:';
+  var ANCHOR_SOURCE_MAX = 176;
+
+  // FNV-1a, 32 bits, as 8 hex digits: an identity check, not a secret.
+  function anchorDigest(value) {
+    var hash = 0x811c9dc5;
+    for (var i = 0; i < value.length; i++) {
+      hash ^= value.charCodeAt(i);
+      hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return ('0000000' + hash.toString(16)).slice(-8);
+  }
+
+  function anchorSourceKey(el) {
+    var raw = descRawSource(el);
+    if (!raw || /^(data|blob):/i.test(raw)) return '';
+    var path = raw;
+    var variant = '';
+    var url = null;
+    try { url = new URL(raw, document.baseURI); } catch (ex) {}
+    if (!url || !/^https?:$/i.test(url.protocol)) {
+      var mark = raw.search(/[?#]/);
+      if (mark >= 0) {
+        path = raw.slice(0, mark);
+        variant = raw.slice(mark);
+      }
+    } else {
+      variant = url.search + url.hash;
+      var base = null;
+      try { base = new URL('.', document.baseURI); } catch (ex2) {}
+      if (base && url.origin === base.origin && url.pathname.indexOf(base.pathname) === 0) {
+        path = url.pathname.slice(base.pathname.length);
+      } else if (base && url.origin === base.origin) {
+        path = url.pathname;
+      } else {
+        path = url.origin + url.pathname;
+      }
+    }
+    if (!path) return '';
+    return variant ? path + '?' + anchorDigest(variant) : path;
+  }
+
+  function sourceSnapshotOf(el) {
+    var key = anchorSourceKey(el);
+    if (!key) return '';
+    // A long key keeps its head for readability and a digest of the whole,
+    // so two sources that differ only past the cut never compare equal.
+    if (key.length > ANCHOR_SOURCE_MAX) key = key.slice(0, ANCHOR_SOURCE_MAX - 9) + '~' + anchorDigest(key);
+    return ANCHOR_SOURCE_PREFIX + key;
+  }
+
+  // A source that another element of the same kind shares cannot tell the two
+  // apart, which is the D1 failure again: no snapshot, so no anchor.
+  function anchorSourceSnapshot(el) {
+    var snapshot = sourceSnapshotOf(el);
+    if (!snapshot) return '';
+    var sameKind = document.getElementsByTagName(el.tagName);
+    for (var i = 0; i < sameKind.length; i++) {
+      if (sameKind[i] !== el && sourceSnapshotOf(sameKind[i]) === snapshot) return '';
+    }
+    return snapshot;
+  }
+
   function uniquelySelects(selector, el) {
     try {
       var matches = document.querySelectorAll(selector);
@@ -2558,12 +2637,13 @@
     if (!selector) return null;
     var snapshot = anchorTextSnapshot(el);
     // Text-less elements anchor ONLY through a stable-identity rung (#id or
-    // an author-controlled data-* identity attribute). A weak (positional /
-    // class) selector has nothing to verify against — identical siblings
-    // share every structural trait, so any derived signature would validate
-    // the WRONG element after a sibling is inserted or removed. A
-    // wrong-binding anchor is worse than no anchor: ship none and fail
-    // closed (the pin simply doesn't restore).
+    // an author-controlled data-* identity attribute), or, for media, through
+    // a source no other element of its kind shows (anchorSourceSnapshot).
+    // Otherwise a weak (positional / class) selector has nothing to verify
+    // against — identical siblings share every structural trait, so any
+    // derived signature would validate the WRONG element after a sibling is
+    // inserted or removed. A wrong-binding anchor is worse than no anchor:
+    // ship none and fail closed (the pin simply doesn't restore).
     if (!snapshot && !anchorHasStableIdentity(selector, el)) return null;
     return {
       selector: selector,
@@ -2596,6 +2676,26 @@
 
   function resolveAnchorElement(anchor) {
     if (!anchor || typeof anchor.selector !== 'string' || !anchor.selector || typeof anchor.tagName !== 'string') return null;
+    return resolveAnchorSelector(anchor) || relocateBySource(anchor);
+  }
+
+  // A media anchor whose selector no longer lands on its element (a sibling
+  // was inserted or removed, a refresh reordered the page) finds it again by
+  // its source, the way a text annotation falls back to searching for its
+  // text. Exactly one element may match: two resolve nothing.
+  function relocateBySource(anchor) {
+    if (typeof anchor.text !== 'string' || anchor.text.indexOf(ANCHOR_SOURCE_PREFIX) !== 0) return null;
+    var found = null;
+    var candidates = document.getElementsByTagName(anchor.tagName);
+    for (var i = 0; i < candidates.length; i++) {
+      if (sourceSnapshotOf(candidates[i]) !== anchor.text) continue;
+      if (found) return null;
+      found = candidates[i];
+    }
+    return found;
+  }
+
+  function resolveAnchorSelector(anchor) {
     var matches;
     try {
       matches = document.querySelectorAll(anchor.selector);

package/components/html-viewer/bridge-script.ts

@@ -2693,9 +2693,88 @@ export const BRIDGE_SCRIPT = `(function() {
 
   function anchorTextSnapshot(el) {
     var text = (el.textContent || '').replace(/\\s+/g, ' ').trim();
+    if (!text) return anchorSourceSnapshot(el);
     return text.length > 180 ? text.slice(0, 180) : text;
   }
 
+  // Media snapshots. An image, video or frame has no text to verify a weak
+  // selector against, but its source says what it shows the way text says
+  // what a paragraph says, and unlike the structure-derived signatures D1
+  // ruled out, two siblings showing different files never share it. The key
+  // is the author's reference to the resource: relative to the document's
+  // base when it lies under it (a host may re-root assets per session, through
+  // a <base> on its own asset route or by rewriting attributes to a session
+  // host), else its root-relative path on the document's own origin (a live
+  // app's proxy port changes per session), else origin and path. The query
+  // and the fragment are part of what a source shows (/_next/image?url=a.jpg,
+  // proto.html?step=2, icons.svg#close), so they count, but only as a digest:
+  // they can carry per-visit state (signed URLs, tokens) that must never be
+  // stored in plain text in an annotation. A source whose query changes per
+  // load therefore does not restore, which fails closed. Inline sources
+  // (data:, blob:) name no resource and get no key.
+  var ANCHOR_SOURCE_PREFIX = 'src:';
+  var ANCHOR_SOURCE_MAX = 176;
+
+  // FNV-1a, 32 bits, as 8 hex digits: an identity check, not a secret.
+  function anchorDigest(value) {
+    var hash = 0x811c9dc5;
+    for (var i = 0; i < value.length; i++) {
+      hash ^= value.charCodeAt(i);
+      hash = Math.imul(hash, 0x01000193) >>> 0;
+    }
+    return ('0000000' + hash.toString(16)).slice(-8);
+  }
+
+  function anchorSourceKey(el) {
+    var raw = descRawSource(el);
+    if (!raw || /^(data|blob):/i.test(raw)) return '';
+    var path = raw;
+    var variant = '';
+    var url = null;
+    try { url = new URL(raw, document.baseURI); } catch (ex) {}
+    if (!url || !/^https?:$/i.test(url.protocol)) {
+      var mark = raw.search(/[?#]/);
+      if (mark >= 0) {
+        path = raw.slice(0, mark);
+        variant = raw.slice(mark);
+      }
+    } else {
+      variant = url.search + url.hash;
+      var base = null;
+      try { base = new URL('.', document.baseURI); } catch (ex2) {}
+      if (base && url.origin === base.origin && url.pathname.indexOf(base.pathname) === 0) {
+        path = url.pathname.slice(base.pathname.length);
+      } else if (base && url.origin === base.origin) {
+        path = url.pathname;
+      } else {
+        path = url.origin + url.pathname;
+      }
+    }
+    if (!path) return '';
+    return variant ? path + '?' + anchorDigest(variant) : path;
+  }
+
+  function sourceSnapshotOf(el) {
+    var key = anchorSourceKey(el);
+    if (!key) return '';
+    // A long key keeps its head for readability and a digest of the whole,
+    // so two sources that differ only past the cut never compare equal.
+    if (key.length > ANCHOR_SOURCE_MAX) key = key.slice(0, ANCHOR_SOURCE_MAX - 9) + '~' + anchorDigest(key);
+    return ANCHOR_SOURCE_PREFIX + key;
+  }
+
+  // A source that another element of the same kind shares cannot tell the two
+  // apart, which is the D1 failure again: no snapshot, so no anchor.
+  function anchorSourceSnapshot(el) {
+    var snapshot = sourceSnapshotOf(el);
+    if (!snapshot) return '';
+    var sameKind = document.getElementsByTagName(el.tagName);
+    for (var i = 0; i < sameKind.length; i++) {
+      if (sameKind[i] !== el && sourceSnapshotOf(sameKind[i]) === snapshot) return '';
+    }
+    return snapshot;
+  }
+
   function uniquelySelects(selector, el) {
     try {
       var matches = document.querySelectorAll(selector);
@@ -2794,12 +2873,13 @@ export const BRIDGE_SCRIPT = `(function() {
     if (!selector) return null;
     var snapshot = anchorTextSnapshot(el);
     // Text-less elements anchor ONLY through a stable-identity rung (#id or
-    // an author-controlled data-* identity attribute). A weak (positional /
-    // class) selector has nothing to verify against — identical siblings
-    // share every structural trait, so any derived signature would validate
-    // the WRONG element after a sibling is inserted or removed. A
-    // wrong-binding anchor is worse than no anchor: ship none and fail
-    // closed (the pin simply doesn't restore).
+    // an author-controlled data-* identity attribute), or, for media, through
+    // a source no other element of its kind shows (anchorSourceSnapshot).
+    // Otherwise a weak (positional / class) selector has nothing to verify
+    // against — identical siblings share every structural trait, so any
+    // derived signature would validate the WRONG element after a sibling is
+    // inserted or removed. A wrong-binding anchor is worse than no anchor:
+    // ship none and fail closed (the pin simply doesn't restore).
     if (!snapshot && !anchorHasStableIdentity(selector, el)) return null;
     return {
       selector: selector,
@@ -2832,6 +2912,26 @@ export const BRIDGE_SCRIPT = `(function() {
 
   function resolveAnchorElement(anchor) {
     if (!anchor || typeof anchor.selector !== 'string' || !anchor.selector || typeof anchor.tagName !== 'string') return null;
+    return resolveAnchorSelector(anchor) || relocateBySource(anchor);
+  }
+
+  // A media anchor whose selector no longer lands on its element (a sibling
+  // was inserted or removed, a refresh reordered the page) finds it again by
+  // its source, the way a text annotation falls back to searching for its
+  // text. Exactly one element may match: two resolve nothing.
+  function relocateBySource(anchor) {
+    if (typeof anchor.text !== 'string' || anchor.text.indexOf(ANCHOR_SOURCE_PREFIX) !== 0) return null;
+    var found = null;
+    var candidates = document.getElementsByTagName(anchor.tagName);
+    for (var i = 0; i < candidates.length; i++) {
+      if (sourceSnapshotOf(candidates[i]) !== anchor.text) continue;
+      if (found) return null;
+      found = candidates[i];
+    }
+    return found;
+  }
+
+  function resolveAnchorSelector(anchor) {
     var matches;
     try {
       matches = document.querySelectorAll(anchor.selector);

package/components/settings/QuickLabelsTab.tsx

@@ -0,0 +1,378 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { isMac, isWindows, altKey } from '../../utils/platform';
+import {
+  type QuickLabel,
+  DEFAULT_QUICK_LABELS,
+  LABEL_COLOR_MAP,
+  emojiFromFieldInput,
+  getLabelColors,
+  getQuickLabels,
+  moveQuickLabel,
+  quickLabelShortcutDigit,
+  resetQuickLabels,
+  saveQuickLabels,
+} from '../../utils/quickLabels';
+
+/** Most labels the tab lets a person keep (only the first ten get a key). */
+const MAX_QUICK_LABELS = 12;
+
+/**
+ * One editable row. `key` is a session-only identity, never persisted: the
+ * saved shape stays exactly `QuickLabel[]`. A label's `id` cannot serve here —
+ * it is re-derived from the text on every keystroke and two labels with the
+ * same text share it — and position cannot either, because moving a row must
+ * not move the open tip editor, an emoji draft, or focus onto a neighbour
+ * (the #829 bug class, #1736).
+ */
+interface QuickLabelRow {
+  key: string;
+  label: QuickLabel;
+}
+
+let rowKeySeq = 0;
+const nextRowKey = () => `quick-label-row-${++rowKeySeq}`;
+const toRows = (labels: readonly QuickLabel[]): QuickLabelRow[] =>
+  labels.map((label) => ({ key: nextRowKey(), label }));
+
+const shortcutHint = (digit: string) => `${altKey}${isMac ? '' : '+'}${digit}`;
+const shortcutWords = (digit: string) => `${isMac ? 'Option' : 'Alt'}+${digit}`;
+const labelName = (label: QuickLabel) => label.text.trim() || 'label';
+
+const EMOJI_HINT = isMac
+  ? 'Enter one emoji. Control-Command-Space opens the emoji picker.'
+  : isWindows
+    ? 'Enter one emoji. Windows+period opens the emoji picker.'
+    : 'Enter one emoji.';
+
+const ChevronIcon: React.FC<{ up: boolean }> = ({ up }) => (
+  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+    <path strokeLinecap="round" strokeLinejoin="round" d={up ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'} />
+  </svg>
+);
+
+/** Settings → Labels: the Quick Labels editor (plan review and annotate). */
+export const QuickLabelsTab: React.FC = () => {
+  const [rows, setRows] = useState<QuickLabelRow[]>(() => toRows(getQuickLabels()));
+  const [editingTipKey, setEditingTipKey] = useState<string | null>(null);
+  const [editingTipValue, setEditingTipValue] = useState('');
+  /** Emoji fields whose current text is not (yet) one emoji, by row key. */
+  const [emojiDrafts, setEmojiDrafts] = useState<Record<string, string>>({});
+  const [announcement, setAnnouncement] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+  const pendingFocus = useRef<{ key: string; target: 'up' | 'down' | 'text' } | null>(null);
+
+  const commit = (next: QuickLabelRow[]) => {
+    setRows(next);
+    saveQuickLabels(next.map((row) => row.label));
+  };
+
+  const updateLabel = (key: string, patch: Partial<QuickLabel>) => {
+    commit(rows.map((row) => (row.key === key ? { ...row, label: { ...row.label, ...patch } } : row)));
+  };
+
+  const setEmojiDraft = (key: string, value: string | null) => {
+    setEmojiDrafts((drafts) => {
+      if (value === null) {
+        if (!(key in drafts)) return drafts;
+        const { [key]: _dropped, ...rest } = drafts;
+        return rest;
+      }
+      return { ...drafts, [key]: value };
+    });
+  };
+
+  const move = (index: number, delta: -1 | 1) => {
+    const to = index + delta;
+    if (to < 0 || to >= rows.length) return;
+    const row = rows[index];
+    commit(moveQuickLabel(rows, index, to));
+    pendingFocus.current = { key: row.key, target: delta < 0 ? 'up' : 'down' };
+    const digit = quickLabelShortcutDigit(to);
+    setAnnouncement(
+      `Moved ${labelName(row.label)} to position ${to + 1} of ${rows.length}, ${digit ? shortcutWords(digit) : 'no shortcut key'}.`,
+    );
+  };
+
+  // Moving a row re-orders DOM nodes, which can drop focus from the button
+  // that was pressed; put it back on the same row's button so repeated
+  // presses keep walking the same label. At either end the pressed button is
+  // disabled, so focus goes to the other direction instead.
+  useLayoutEffect(() => {
+    const pending = pendingFocus.current;
+    if (!pending) return;
+    pendingFocus.current = null;
+    const row = listRef.current?.querySelector<HTMLElement>(`[data-quick-label-row="${pending.key}"]`);
+    if (!row) return;
+    if (pending.target === 'text') {
+      const input = row.querySelector<HTMLInputElement>('[data-quick-label-text]');
+      input?.focus();
+      input?.select();
+      return;
+    }
+    const other = pending.target === 'up' ? 'down' : 'up';
+    const wanted = row.querySelector<HTMLButtonElement>(`[data-quick-label-move="${pending.target}"]`);
+    const fallback = row.querySelector<HTMLButtonElement>(`[data-quick-label-move="${other}"]`);
+    (wanted && !wanted.disabled ? wanted : fallback)?.focus();
+  }, [rows]);
+
+  const saveTip = (key: string) => {
+    updateLabel(key, { tip: editingTipValue || undefined });
+    setEditingTipKey(null);
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-sm font-medium flex items-center gap-2">Quick Labels</div>
+          <div className="text-xs text-muted-foreground">
+            Preset annotations for one-click feedback
+          </div>
+        </div>
+        <button
+          onClick={() => {
+            resetQuickLabels();
+            setRows(toRows(DEFAULT_QUICK_LABELS));
+            setEditingTipKey(null);
+            setEmojiDrafts({});
+          }}
+          className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Reset to defaults
+        </button>
+      </div>
+
+      <style>{`
+        @keyframes tip-slide-open {
+          from { opacity: 0; transform: translateY(-4px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+      <div ref={listRef} className="space-y-1.5">
+        {rows.map((row, index) => {
+          const { key, label } = row;
+          const colors = getLabelColors(label.color);
+          const hasTip = !!label.tip;
+          const isEditingTip = editingTipKey === key;
+          const digit = quickLabelShortcutDigit(index);
+          const name = labelName(label);
+          const emojiDraft = emojiDrafts[key];
+          const emojiInvalid = emojiDraft !== undefined;
+          const emojiErrorId = `${key}-emoji-error`;
+          return (
+            <div
+              key={key}
+              data-quick-label-row={key}
+              className="rounded-lg overflow-hidden"
+              style={{ backgroundColor: colors.bg }}
+            >
+              {/* Main row. On a narrow dialog the controls after the text
+                  field wrap onto a second line instead of being clipped by
+                  the row's overflow-hidden. */}
+              <div className="flex flex-wrap items-center gap-2 p-2">
+                <input
+                  type="text"
+                  data-quick-label-emoji
+                  value={emojiDraft ?? label.emoji}
+                  aria-label={`Emoji for ${name}`}
+                  aria-invalid={emojiInvalid || undefined}
+                  aria-describedby={emojiInvalid ? emojiErrorId : undefined}
+                  title="Change emoji"
+                  autoComplete="off"
+                  spellCheck={false}
+                  onFocus={(e) => e.target.select()}
+                  onChange={(e) => {
+                    const picked = emojiFromFieldInput(e.target.value, label.emoji);
+                    if (!picked) {
+                      setEmojiDraft(key, e.target.value);
+                      return;
+                    }
+                    setEmojiDraft(key, null);
+                    if (picked !== label.emoji) updateLabel(key, { emoji: picked });
+                  }}
+                  onBlur={() => setEmojiDraft(key, null)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Escape' && emojiInvalid) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setEmojiDraft(key, null);
+                    }
+                  }}
+                  className="w-8 py-1 bg-background/80 rounded text-sm text-center leading-none focus:outline-none focus:ring-1 focus:ring-primary/50 flex-shrink-0"
+                  style={emojiInvalid ? { boxShadow: '0 0 0 1px var(--destructive)' } : undefined}
+                />
+                <input
+                  type="text"
+                  data-quick-label-text
+                  value={label.text}
+                  aria-label={`Label text, position ${index + 1}`}
+                  onChange={(e) => {
+                    updateLabel(key, {
+                      text: e.target.value,
+                      id: e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
+                    });
+                  }}
+                  className="flex-1 min-w-0 px-2 py-1 bg-background/80 rounded text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
+                  // The basis is what makes the controls wrap: a row that
+                  // cannot give the text this much room moves them below.
+                  style={{ flexBasis: '8rem' }}
+                />
+                <div className="flex items-center gap-2 ml-auto">
+                  {/* Tip indicator button */}
+                  <button
+                    data-quick-label-tip-toggle
+                    onClick={() => {
+                      if (isEditingTip) {
+                        setEditingTipKey(null);
+                      } else {
+                        setEditingTipKey(key);
+                        setEditingTipValue(label.tip || '');
+                      }
+                    }}
+                    className={`relative p-1 rounded transition-all flex-shrink-0 ${
+                      hasTip
+                        ? 'bg-foreground/10 text-foreground/70 hover:text-foreground border border-foreground/15'
+                        : 'text-muted-foreground/30 hover:text-muted-foreground/60 border border-dashed border-muted-foreground/20 hover:border-muted-foreground/40'
+                    }`}
+                    title={hasTip ? `Tip: ${label.tip}` : 'Add AI instruction tip'}
+                  >
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                    {hasTip && (
+                      <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-foreground/50" />
+                    )}
+                  </button>
+                  <select
+                    value={label.color}
+                    aria-label={`Colour for ${name}`}
+                    onChange={(e) => updateLabel(key, { color: e.target.value })}
+                    className="px-1.5 py-1 bg-background/80 rounded text-[10px] focus:outline-none focus:ring-1 focus:ring-primary/50"
+                  >
+                    {Object.keys(LABEL_COLOR_MAP).map(c => (
+                      <option key={c} value={c}>{c}</option>
+                    ))}
+                  </select>
+                  <span
+                    data-quick-label-shortcut
+                    // Hidden below sm: touch devices that narrow rarely have an Alt key.
+                    className="hidden sm:block text-[10px] text-muted-foreground/50 font-mono w-8 text-center flex-shrink-0"
+                  >
+                    {digit ? shortcutHint(digit) : ''}
+                  </span>
+                  {/* Reorder: position decides which Alt/⌥ digit applies the label. */}
+                  <button
+                    type="button"
+                    data-quick-label-move="up"
+                    disabled={index === 0}
+                    onClick={() => move(index, -1)}
+                    aria-label={`Move ${name} up`}
+                    title="Move up"
+                    className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-30 disabled:pointer-events-none"
+                  >
+                    <ChevronIcon up />
+                  </button>
+                  <button
+                    type="button"
+                    data-quick-label-move="down"
+                    disabled={index === rows.length - 1}
+                    onClick={() => move(index, 1)}
+                    aria-label={`Move ${name} down`}
+                    title="Move down"
+                    className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-30 disabled:pointer-events-none"
+                  >
+                    <ChevronIcon up={false} />
+                  </button>
+                  <button
+                    onClick={() => {
+                      commit(rows.filter((r) => r.key !== key));
+                      setEmojiDraft(key, null);
+                      if (editingTipKey === key) setEditingTipKey(null);
+                    }}
+                    aria-label={`Remove ${name}`}
+                    className="p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors flex-shrink-0"
+                    title="Remove label"
+                  >
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              {emojiInvalid && (
+                <div id={emojiErrorId} className="px-2 pb-2 text-[10px] text-destructive">
+                  {EMOJI_HINT}
+                </div>
+              )}
+              {/* Tip editor — slides open below the row */}
+              {isEditingTip && (
+                <div
+                  className="flex items-center gap-1.5 px-2 pb-2 pt-0"
+                  style={{ animation: 'tip-slide-open 0.15s ease-out' }}
+                >
+                  <svg className="w-3 h-3 text-muted-foreground/40 flex-shrink-0 ml-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  </svg>
+                  <input
+                    type="text"
+                    data-quick-label-tip
+                    value={editingTipValue}
+                    aria-label={`AI instruction tip for ${name}`}
+                    onChange={(e) => setEditingTipValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') saveTip(key);
+                      if (e.key === 'Escape') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setEditingTipKey(null);
+                      }
+                    }}
+                    placeholder="AI instruction tip..."
+                    className="flex-1 px-2 py-1 bg-background/60 rounded text-[10px] text-muted-foreground placeholder:text-muted-foreground/30 focus:outline-none focus:ring-1 focus:ring-primary/50"
+                    autoFocus
+                    onFocus={(e) => { e.target.setSelectionRange(0, 0); e.target.scrollLeft = 0; }}
+                  />
+                  <button
+                    onClick={() => saveTip(key)}
+                    className="p-1 rounded text-muted-foreground/50 hover:text-green-500 hover:bg-green-500/10 transition-colors flex-shrink-0"
+                    title="Save tip"
+                  >
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                    </svg>
+                  </button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <div role="status" aria-live="polite" className="sr-only">{announcement}</div>
+
+      {rows.length < MAX_QUICK_LABELS && (
+        <button
+          onClick={() => {
+            const row: QuickLabelRow = {
+              key: nextRowKey(),
+              label: {
+                id: `custom-${Date.now()}`,
+                emoji: '📌',
+                text: 'New label',
+                color: 'blue',
+              },
+            };
+            commit([...rows, row]);
+            pendingFocus.current = { key: row.key, target: 'text' };
+          }}
+          className="w-full py-1.5 text-xs text-muted-foreground hover:text-foreground border border-dashed border-border rounded-lg hover:border-foreground/30 transition-colors"
+        >
+          + Add label
+        </button>
+      )}
+
+      <div className="text-[10px] text-muted-foreground/70">
+        Use {shortcutHint('1')} through {shortcutHint('0')} when the annotation toolbar is visible to apply a label instantly. The order of the list decides the key; use the arrows to move a label, and click its emoji to change it.
+      </div>
+    </>
+  );
+};