@ldlework/feedback 0.1.0

package/dist/index.js

@@ -0,0 +1,1370 @@
+import { createContext, forwardRef, useMemo, useState, useRef, useCallback, useEffect, useContext, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/core/context.tsx
+
+// src/core/geometry.ts
+var NOTE_WIDTH = 224;
+var NOTE_MIN_HEIGHT = 132;
+var PORTS = ["left", "bottom", "right"];
+function knobPoint(note, port, height) {
+  switch (port) {
+    case "left":
+      return { x: note.x, y: note.y + height / 2 };
+    case "right":
+      return { x: note.x + NOTE_WIDTH, y: note.y + height / 2 };
+    case "bottom":
+      return { x: note.x + NOTE_WIDTH / 2, y: note.y + height };
+  }
+}
+var PAD = 14;
+var ARROW_LEN = 12;
+var ARROW_HALF = 6.5;
+function arrowGeometry(start, head) {
+  const origin = { x: Math.min(start.x, head.x) - PAD, y: Math.min(start.y, head.y) - PAD };
+  const s = { x: start.x - origin.x, y: start.y - origin.y };
+  const h = { x: head.x - origin.x, y: head.y - origin.y };
+  const len = Math.hypot(h.x - s.x, h.y - s.y) || 1;
+  const ux = (h.x - s.x) / len;
+  const uy = (h.y - s.y) / len;
+  const base = { x: h.x - ux * ARROW_LEN, y: h.y - uy * ARROW_LEN };
+  return {
+    origin,
+    width: Math.abs(head.x - start.x) + PAD * 2,
+    height: Math.abs(head.y - start.y) + PAD * 2,
+    start: s,
+    base,
+    head: h,
+    wings: [
+      { x: base.x - uy * ARROW_HALF, y: base.y + ux * ARROW_HALF },
+      { x: base.x + uy * ARROW_HALF, y: base.y - ux * ARROW_HALF }
+    ]
+  };
+}
+
+// src/core/document.ts
+var EMPTY_DOC = { notes: [], edges: [] };
+function normalizeDoc(data) {
+  const notes = normalizeNotes(data);
+  const edges = normalizeEdges(isRecord(data) ? data.edges : void 0).filter(
+    (edge) => notes.some((note) => note.id === edge.noteId)
+  );
+  return { notes, edges };
+}
+function normalizeNotes(data) {
+  const raw = Array.isArray(data) ? data : isRecord(data) && Array.isArray(data.notes) ? data.notes : [];
+  return raw.filter(isRecord).map(toNote);
+}
+function normalizeEdges(data) {
+  return Array.isArray(data) ? data.filter(isRecord).map(toEdge) : [];
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function toNote(r) {
+  return {
+    id: typeof r.id === "string" ? r.id : uid(),
+    page: typeof r.page === "string" ? r.page : "/",
+    section: typeof r.section === "string" ? r.section : null,
+    x: Number(r.x) || 0,
+    y: Number(r.y) || 0,
+    text: typeof r.text === "string" ? r.text : "",
+    resolved: r.resolved === true
+  };
+}
+function toEdge(r) {
+  const port = r.port === "left" || r.port === "bottom" || r.port === "right" ? r.port : "right";
+  return {
+    id: typeof r.id === "string" ? r.id : uid(),
+    page: typeof r.page === "string" ? r.page : "/",
+    section: typeof r.section === "string" ? r.section : null,
+    noteId: typeof r.noteId === "string" ? r.noteId : "",
+    port,
+    x: Number(r.x) || 0,
+    y: Number(r.y) || 0,
+    target: toTarget(r.target)
+  };
+}
+function toTarget(data) {
+  if (!isRecord(data) || typeof data.selector !== "string") return null;
+  return { selector: data.selector, text: typeof data.text === "string" ? data.text : null };
+}
+function uid() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return `fb-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+}
+
+// src/core/persistence.ts
+function readDoc(storageKey, seed = EMPTY_DOC) {
+  if (typeof window === "undefined") return seed;
+  const stored = window.localStorage.getItem(storageKey);
+  if (stored === null) return seed;
+  try {
+    return normalizeDoc(JSON.parse(stored));
+  } catch {
+    return seed;
+  }
+}
+function writeDoc(storageKey, doc) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(doc));
+  } catch (err) {
+    console.error("[feedback] failed to persist", err);
+  }
+}
+async function exportDoc(doc, fileName) {
+  const payload = JSON.stringify({ exportedAt: (/* @__PURE__ */ new Date()).toISOString(), ...doc }, null, 2);
+  if (await saveViaPicker(payload, fileName)) return;
+  saveViaDownload(payload, fileName);
+}
+async function importDoc() {
+  const file = await pickFile();
+  if (!file) return null;
+  try {
+    return normalizeDoc(JSON.parse(await file.text()));
+  } catch {
+    return EMPTY_DOC;
+  }
+}
+var JSON_TYPES = [{ description: "JSON", accept: { "application/json": [".json"] } }];
+async function saveViaPicker(text, fileName) {
+  const picker = window.showSaveFilePicker;
+  if (typeof picker !== "function") return false;
+  try {
+    const handle = await picker({ suggestedName: fileName, types: JSON_TYPES });
+    const writable = await handle.createWritable();
+    await writable.write(text);
+    await writable.close();
+    return true;
+  } catch (err) {
+    if (err instanceof DOMException && err.name === "AbortError") return true;
+    return false;
+  }
+}
+function saveViaDownload(text, fileName) {
+  const url = URL.createObjectURL(new Blob([text], { type: "application/json" }));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+async function pickFile() {
+  const picker = window.showOpenFilePicker;
+  if (typeof picker === "function") {
+    try {
+      const [handle] = await picker({ multiple: false, types: JSON_TYPES });
+      return handle ? await handle.getFile() : null;
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return null;
+    }
+  }
+  return pickViaInput();
+}
+function pickViaInput() {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "application/json,.json";
+    input.addEventListener("change", () => resolve(input.files?.[0] ?? null), { once: true });
+    input.click();
+  });
+}
+
+// src/core/useFeedbackDoc.ts
+function useFeedbackDoc(storageKey, seed) {
+  const [doc, setDoc] = useState(
+    () => readDoc(storageKey, seed ? normalizeDoc(seed) : EMPTY_DOC)
+  );
+  useEffect(() => {
+    writeDoc(storageKey, doc);
+  }, [storageKey, doc]);
+  const addNote = useCallback((page, section, x, y) => {
+    const note = { id: uid(), page, section, x, y, text: "", resolved: false };
+    setDoc((d) => ({ ...d, notes: [...d.notes, note] }));
+    return note.id;
+  }, []);
+  const updateNote = useCallback((id, patch) => {
+    setDoc((d) => ({ ...d, notes: d.notes.map((n) => n.id === id ? { ...n, ...patch } : n) }));
+  }, []);
+  const removeNote = useCallback((id) => {
+    setDoc((d) => ({
+      notes: d.notes.filter((n) => n.id !== id),
+      edges: d.edges.filter((e) => e.noteId !== id)
+    }));
+  }, []);
+  const addEdge = useCallback((edge) => {
+    setDoc((d) => ({ ...d, edges: [...d.edges, { ...edge, id: uid() }] }));
+  }, []);
+  const updateEdge = useCallback((id, patch) => {
+    setDoc((d) => ({ ...d, edges: d.edges.map((e) => e.id === id ? { ...e, ...patch } : e) }));
+  }, []);
+  const removeEdge = useCallback((id) => {
+    setDoc((d) => ({ ...d, edges: d.edges.filter((e) => e.id !== id) }));
+  }, []);
+  const replace = useCallback((next) => setDoc(next), []);
+  return {
+    notes: doc.notes,
+    edges: doc.edges,
+    addNote,
+    updateNote,
+    removeNote,
+    addEdge,
+    updateEdge,
+    removeEdge,
+    replace
+  };
+}
+function useLocationNavigation() {
+  const [page, setPage] = useState(() => typeof location === "undefined" ? "/" : location.pathname);
+  useEffect(() => {
+    const sync = () => setPage(location.pathname);
+    window.addEventListener("popstate", sync);
+    return () => window.removeEventListener("popstate", sync);
+  }, []);
+  return useMemo(
+    () => ({
+      page,
+      navigate: (to) => {
+        if (to === location.pathname) return;
+        history.pushState(null, "", to);
+        setPage(to);
+        window.dispatchEvent(new PopStateEvent("popstate"));
+      }
+    }),
+    [page]
+  );
+}
+
+// src/core/submission.ts
+function endpointSubmitter(url, options = {}) {
+  return async (doc) => {
+    const response = await fetch(url, {
+      method: options.method ?? "POST",
+      credentials: options.credentials,
+      headers: { "Content-Type": "application/json", ...options.headers },
+      body: JSON.stringify({ submittedAt: (/* @__PURE__ */ new Date()).toISOString(), ...doc })
+    });
+    if (!response.ok) {
+      throw new Error(`feedback submission failed: ${response.status} ${response.statusText}`);
+    }
+  };
+}
+function resolveSubmitter(submit) {
+  if (submit == null) return null;
+  return typeof submit === "string" ? endpointSubmitter(submit) : submit;
+}
+var FeedbackContext = createContext(null);
+function FeedbackProvider({
+  children,
+  storageKey = "feedback",
+  fileName = "feedback.json",
+  navigation,
+  defaultAnchorX = "center",
+  className,
+  style,
+  initialDoc,
+  submit
+}) {
+  const doc = useFeedbackDoc(storageKey, initialDoc);
+  const submitter = useMemo(() => resolveSubmitter(submit), [submit]);
+  const fallbackNav = useLocationNavigation();
+  const nav = navigation ?? fallbackNav;
+  const [binding, setBinding] = useState(null);
+  const [heights, setHeights] = useState({});
+  const pending = useRef(null);
+  const bindRegion = useCallback((next) => {
+    setBinding(next);
+    if (next?.reveal && pending.current != null) {
+      next.reveal(pending.current);
+      pending.current = null;
+    }
+  }, []);
+  const requestSection = useCallback((section) => {
+    pending.current = section;
+  }, []);
+  const reportHeight = useCallback((id, height) => {
+    setHeights((h) => h[id] === height ? h : { ...h, [id]: height });
+  }, []);
+  const clearHeight = useCallback((id) => {
+    setHeights((h) => {
+      if (!(id in h)) return h;
+      const { [id]: _drop, ...rest } = h;
+      return rest;
+    });
+  }, []);
+  const heightOf = useCallback((id) => heights[id] ?? NOTE_MIN_HEIGHT, [heights]);
+  const region = useMemo(
+    () => ({ element: binding?.element ?? null, anchorX: binding?.anchorX ?? defaultAnchorX }),
+    [binding?.element, binding?.anchorX, defaultAnchorX]
+  );
+  const value = useMemo(
+    () => ({
+      doc,
+      nav,
+      region,
+      section: binding?.section ?? null,
+      reveal: binding?.reveal ?? (() => {
+      }),
+      bindRegion,
+      requestSection,
+      heightOf,
+      reportHeight,
+      clearHeight,
+      fileName,
+      submit: submitter,
+      rootClassName: className ? `fb-root ${className}` : "fb-root",
+      rootStyle: style
+    }),
+    [doc, nav, region, binding, bindRegion, requestSection, heightOf, reportHeight, clearHeight, fileName, submitter, className, style]
+  );
+  return /* @__PURE__ */ jsx(FeedbackContext.Provider, { value, children });
+}
+function useFeedback() {
+  const ctx = useContext(FeedbackContext);
+  if (!ctx) throw new Error("useFeedback must be used within <FeedbackProvider>");
+  return ctx;
+}
+function contentWidth(region) {
+  return region.element?.clientWidth ?? document.documentElement.clientWidth;
+}
+function originX(region) {
+  const width = contentWidth(region);
+  switch (region.anchorX) {
+    case "left":
+      return 0;
+    case "center":
+      return width / 2;
+    case "right":
+      return width;
+  }
+}
+function toContent(clientX, clientY, region) {
+  const origin = originX(region);
+  if (!region.element) {
+    return { x: clientX + window.scrollX - origin, y: clientY + window.scrollY };
+  }
+  const rect = region.element.getBoundingClientRect();
+  return {
+    x: clientX - rect.left + region.element.scrollLeft - origin,
+    y: clientY - rect.top + region.element.scrollTop
+  };
+}
+function useOriginX(region) {
+  const [origin, setOrigin] = useState(() => originX(region));
+  useEffect(() => {
+    const update = () => setOrigin(originX(region));
+    update();
+    window.addEventListener("resize", update);
+    const observer = region.element ? new ResizeObserver(update) : null;
+    if (region.element) observer?.observe(region.element);
+    return () => {
+      window.removeEventListener("resize", update);
+      observer?.disconnect();
+    };
+  }, [region.element, region.anchorX]);
+  return origin;
+}
+function useReview(notes) {
+  const { nav, reveal, requestSection, section } = useFeedback();
+  const [on, setOn] = useState(false);
+  const [includeResolved, setIncludeResolved] = useState(false);
+  const [index, setIndex] = useState(0);
+  const list = useMemo(() => {
+    const ordered = [...notes].sort(compareNotes);
+    return includeResolved ? ordered : ordered.filter((n) => !n.resolved);
+  }, [notes, includeResolved]);
+  const clamped = Math.min(index, Math.max(0, list.length - 1));
+  const current = list[clamped] ?? null;
+  useEffect(() => {
+    if (!on || !current) return;
+    revealNote(current, nav.page, section, nav.navigate, reveal, requestSection);
+    scrollToNote(current.id);
+  }, [on, current?.id]);
+  const go = useCallback(
+    (to) => setIndex(Math.min(Math.max(0, to), Math.max(0, list.length - 1))),
+    [list.length]
+  );
+  const toggle = useCallback(() => {
+    setOn((v) => !v);
+    setIndex(0);
+  }, []);
+  return {
+    on,
+    toggle,
+    includeResolved,
+    toggleIncludeResolved: useCallback(() => setIncludeResolved((v) => !v), []),
+    position: list.length ? clamped + 1 : 0,
+    total: list.length,
+    first: useCallback(() => go(0), [go]),
+    prev: useCallback(() => go(clamped - 1), [go, clamped]),
+    next: useCallback(() => go(clamped + 1), [go, clamped]),
+    last: useCallback(() => go(list.length - 1), [go, list.length]),
+    currentId: current?.id ?? null
+  };
+}
+function revealNote(note, page, section, navigate, reveal, requestSection) {
+  if (note.page !== page) {
+    requestSection(note.section);
+    navigate(note.page);
+  } else if (note.section != null && note.section !== section) {
+    reveal(note.section);
+  }
+}
+function scrollToNote(id) {
+  let tries = 0;
+  const tick = () => {
+    const el = document.querySelector(`[data-note-id="${id}"]`);
+    if (el) {
+      el.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" });
+    } else if (tries++ < 30) {
+      requestAnimationFrame(tick);
+    }
+  };
+  requestAnimationFrame(tick);
+}
+function compareNotes(a, b) {
+  if (a.page !== b.page) return a.page < b.page ? -1 : 1;
+  const sa = a.section ?? "";
+  const sb = b.section ?? "";
+  if (sa !== sb) return sa < sb ? -1 : 1;
+  if (a.y !== b.y) return a.y - b.y;
+  return a.x - b.x;
+}
+var SETTLE_MS = 2500;
+function useSubmission(submitter) {
+  const [status, setStatus] = useState("idle");
+  const inFlight = useRef(false);
+  const timer = useRef(void 0);
+  useEffect(() => () => window.clearTimeout(timer.current), []);
+  const settle = useCallback((outcome) => {
+    setStatus(outcome);
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setStatus("idle"), SETTLE_MS);
+  }, []);
+  const send = useCallback(
+    async (doc) => {
+      if (!submitter || inFlight.current) return;
+      inFlight.current = true;
+      window.clearTimeout(timer.current);
+      setStatus("sending");
+      try {
+        await submitter(doc);
+        settle("sent");
+      } catch (err) {
+        console.error("[feedback] submission failed", err);
+        settle("error");
+      } finally {
+        inFlight.current = false;
+      }
+    },
+    [submitter, settle]
+  );
+  return { status, send };
+}
+
+// src/core/targetAddress.ts
+var MAX_DEPTH = 8;
+var MAX_TEXT = 120;
+function describeTarget(clientX, clientY) {
+  const el = topPageElement(clientX, clientY);
+  return el ? { selector: cssPath(el), text: excerpt(el) } : null;
+}
+function topPageElement(x, y) {
+  for (const el of document.elementsFromPoint(x, y)) {
+    if (!el.closest("[data-feedback]") && el !== document.documentElement && el !== document.body) {
+      return el;
+    }
+  }
+  return null;
+}
+function cssPath(el) {
+  const parts = [];
+  let node = el;
+  while (node && node !== document.body && node !== document.documentElement && parts.length < MAX_DEPTH) {
+    parts.unshift(describeNode(node));
+    node = node.parentElement;
+  }
+  return parts.join(" > ");
+}
+function describeNode(el) {
+  const id = el.id ? `#${esc(el.id)}` : "";
+  const classes = Array.from(el.classList).map((c) => `.${esc(c)}`).join("");
+  return `${el.tagName.toLowerCase()}${id}${classes}${nthOfType(el)}`;
+}
+function nthOfType(el) {
+  const siblings = el.parentElement ? Array.from(el.parentElement.children).filter((c) => c.tagName === el.tagName) : [];
+  return siblings.length < 2 ? "" : `:nth-of-type(${siblings.indexOf(el) + 1})`;
+}
+function excerpt(el) {
+  const text = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  return text.length > MAX_TEXT ? `${text.slice(0, MAX_TEXT)}\u2026` : text;
+}
+function esc(value) {
+  return window.CSS?.escape ? window.CSS.escape(value) : value;
+}
+
+// src/hooks/useEdgeDraft.ts
+var MIN_DRAG = 16;
+function useEdgeDraft({ region, noteById, heightOf, onCommit }) {
+  const [draft, setDraft] = useState(null);
+  const live = useRef(null);
+  const set = (next) => {
+    live.current = next;
+    setDraft(next);
+  };
+  const start = (noteId, port) => {
+    const note = noteById(noteId);
+    if (note) set({ noteId, port, head: knobPoint(note, port, heightOf(noteId)) });
+  };
+  const move = (clientX, clientY) => {
+    const d = live.current;
+    if (d) set({ ...d, head: toContent(clientX, clientY, region) });
+  };
+  const end = (clientX, clientY) => {
+    const d = live.current;
+    const note = d && noteById(d.noteId);
+    if (d && note) {
+      const head = toContent(clientX, clientY, region);
+      const tail = knobPoint(note, d.port, heightOf(d.noteId));
+      if (Math.hypot(head.x - tail.x, head.y - tail.y) > MIN_DRAG) {
+        onCommit(d.noteId, d.port, head, describeTarget(clientX, clientY));
+      }
+    }
+    set(null);
+  };
+  return { draft, start, move, end };
+}
+var pointOf = (e) => ({ x: e.clientX, y: e.clientY });
+function usePointerDrag({ onStart, onMove, onEnd }) {
+  const dragging = useRef(false);
+  const onPointerDown = useCallback(
+    (e) => {
+      dragging.current = true;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      onStart?.(pointOf(e));
+    },
+    [onStart]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (dragging.current) onMove?.(pointOf(e));
+    },
+    [onMove]
+  );
+  const onPointerUp = useCallback(
+    (e) => {
+      if (!dragging.current) return;
+      dragging.current = false;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      onEnd?.(pointOf(e));
+    },
+    [onEnd]
+  );
+  return { onPointerDown, onPointerMove, onPointerUp };
+}
+
+// src/hooks/useSpawnGesture.ts
+var TAP_THRESHOLD = 8;
+function useSpawnGesture(onDrop) {
+  const [ghost, setGhost] = useState(null);
+  const origin = useRef(null);
+  const handlers = usePointerDrag({
+    onStart: (p) => {
+      origin.current = p;
+      setGhost(p);
+    },
+    onMove: setGhost,
+    onEnd: (p) => {
+      setGhost(null);
+      const from = origin.current;
+      const tapped = !from || Math.hypot(p.x - from.x, p.y - from.y) < TAP_THRESHOLD;
+      const drop = tapped ? viewportSpot() : p;
+      onDrop(drop.x, drop.y);
+    }
+  });
+  return { ghost, handlers };
+}
+function viewportSpot() {
+  return { x: window.innerWidth / 2 - NOTE_WIDTH / 2, y: window.innerHeight / 3 };
+}
+function useAutoGrow(text) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [text]);
+  return ref;
+}
+function useElementHeight(ref, onHeight, onGone) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const report = () => onHeight(el.offsetHeight);
+    report();
+    const observer = new ResizeObserver(report);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      onGone();
+    };
+  }, [ref]);
+}
+var IconButton = forwardRef(function IconButton2({ children, variant = "ghost", size = "md", tone = "accent", active = false, badge, className, ...rest }, ref) {
+  const classes = [
+    "fb-btn",
+    `fb-btn--${variant}`,
+    `fb-btn--${size}`,
+    `fb-btn--${tone}`,
+    active ? "is-active" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const button = /* @__PURE__ */ jsx("button", { ref, className: classes, ...rest, children });
+  if (badge == null) return button;
+  return /* @__PURE__ */ jsxs("span", { className: "fb-btn-wrap", children: [
+    button,
+    /* @__PURE__ */ jsx("span", { className: "fb-btn__badge", children: badge })
+  ] });
+});
+function Icon({ size = 16, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": true,
+      ...rest,
+      children
+    }
+  );
+}
+function NoteIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "14" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "11", x2: "15", y2: "11" })
+  ] });
+}
+function SaveIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+  ] });
+}
+function LoadIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+  ] });
+}
+function SendIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+  ] });
+}
+function SentIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] });
+}
+function HelpIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.1 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] });
+}
+function ReviewIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 20, children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 4h6a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 14 11 16 15 12" })
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 14, children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(Icon, { size: 14, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function TrashIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 16, children: [
+    /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+    /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+  ] });
+}
+function GripIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 14, fill: "currentColor", stroke: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "6", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "6", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "18", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "18", r: "1.4" })
+  ] });
+}
+function FirstIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 18, children: [
+    /* @__PURE__ */ jsx("polygon", { points: "19 20 9 12 19 4", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "19", x2: "5", y2: "5" })
+  ] });
+}
+function PrevIcon() {
+  return /* @__PURE__ */ jsx(Icon, { size: 18, children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
+}
+function NextIcon() {
+  return /* @__PURE__ */ jsx(Icon, { size: 18, children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
+}
+function LastIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 18, children: [
+    /* @__PURE__ */ jsx("polygon", { points: "5 4 15 12 5 20", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "19", y1: "5", x2: "19", y2: "19" })
+  ] });
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { size: 18, children: [
+    /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function StickyNote({ note, originX: originX2, autoFocus, current, onMove, onEdit, onToggleResolved, onRemove }) {
+  const { reportHeight, clearHeight } = useFeedback();
+  const rootRef = useRef(null);
+  const bodyRef = useAutoGrow(note.text);
+  useElementHeight(rootRef, (h) => reportHeight(note.id, h), () => clearHeight(note.id));
+  const origin = useRef({ px: 0, py: 0, nx: 0, ny: 0 });
+  const grip = usePointerDrag({
+    onStart: (p) => origin.current = { px: p.x, py: p.y, nx: note.x, ny: note.y },
+    onMove: (p) => {
+      const o = origin.current;
+      onMove(o.nx + (p.x - o.px), Math.max(0, o.ny + (p.y - o.py)));
+    }
+  });
+  const className = [
+    "fb-note",
+    current ? "fb-note--current" : "",
+    note.resolved ? "fb-note--resolved" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-note-id": note.id, className, style: { left: originX2 + note.x, top: note.y, width: NOTE_WIDTH }, children: [
+    /* @__PURE__ */ jsxs("header", { ...grip, className: "fb-note__header", children: [
+      /* @__PURE__ */ jsx(GripIcon, {}),
+      /* @__PURE__ */ jsxs("div", { className: "fb-note__actions", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            tone: "success",
+            active: note.resolved,
+            onClick: onToggleResolved,
+            onPointerDown: stop,
+            title: note.resolved ? "Resolved \u2014 click to reopen" : "Mark resolved",
+            "aria-label": note.resolved ? "Reopen note" : "Mark resolved",
+            children: /* @__PURE__ */ jsx(CheckIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            tone: "danger",
+            onClick: onRemove,
+            onPointerDown: stop,
+            title: "Delete note",
+            "aria-label": "Delete note",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: bodyRef,
+        value: note.text,
+        autoFocus,
+        onChange: (e) => onEdit(e.target.value),
+        placeholder: "Write feedback\u2026",
+        className: "fb-note__body",
+        style: { minHeight: NOTE_MIN_HEIGHT - 28 }
+      }
+    )
+  ] });
+}
+var stop = (e) => e.stopPropagation();
+function NoteKnobs({ note, height, originX: originX2, onStart, onMove, onEnd }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: PORTS.map((port) => {
+    const k = knobPoint(note, port, height);
+    return /* @__PURE__ */ jsx(
+      Knob,
+      {
+        x: originX2 + k.x,
+        y: k.y,
+        onStart: () => onStart(note.id, port),
+        onMove,
+        onEnd
+      },
+      port
+    );
+  }) });
+}
+function Knob({ x, y, onStart, onMove, onEnd }) {
+  const drag = usePointerDrag({
+    onStart,
+    onMove: (p) => onMove(p.x, p.y),
+    onEnd: (p) => onEnd(p.x, p.y)
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...drag,
+      title: "Drag to draw an arrow",
+      "aria-label": "Draw an arrow",
+      className: "fb-knob",
+      style: { left: x, top: y }
+    }
+  );
+}
+function withOrigin(p, originX2) {
+  return { x: originX2 + p.x, y: p.y };
+}
+function svgFrame(geo) {
+  return { left: geo.origin.x, top: geo.origin.y, width: geo.width, height: geo.height };
+}
+function ArrowBody({ geo, color, width }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: geo.start.x,
+        y1: geo.start.y,
+        x2: geo.base.x,
+        y2: geo.base.y,
+        stroke: color,
+        strokeWidth: width,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points: `${geo.head.x},${geo.head.y} ${geo.wings[0].x},${geo.wings[0].y} ${geo.wings[1].x},${geo.wings[1].y}`,
+        fill: color
+      }
+    )
+  ] });
+}
+function Arrow({ start, head, color, width }) {
+  const geo = arrowGeometry(start, head);
+  return /* @__PURE__ */ jsx("svg", { className: "fb-arrow", style: svgFrame(geo), children: /* @__PURE__ */ jsx(ArrowBody, { geo, color, width }) });
+}
+var ACCENT = "var(--fb-accent)";
+var ACCENT_HOVER = "var(--fb-accent-hover)";
+function Edge({ start, head, originX: originX2, selected, onSelect, onMoveHead, onReaim }) {
+  const geo = arrowGeometry(withOrigin(start, originX2), withOrigin(head, originX2));
+  const grab = useRef({ hx: 0, hy: 0, px: 0, py: 0 });
+  const drag = usePointerDrag({
+    onStart: (p) => grab.current = { hx: head.x, hy: head.y, px: p.x, py: p.y },
+    onMove: (p) => onMoveHead(grab.current.hx + (p.x - grab.current.px), grab.current.hy + (p.y - grab.current.py)),
+    onEnd: (p) => onReaim(p.x, p.y)
+  });
+  const color = selected ? ACCENT_HOVER : ACCENT;
+  const select = (e) => {
+    e.stopPropagation();
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+    onSelect();
+  };
+  return /* @__PURE__ */ jsxs("svg", { className: "fb-arrow", style: svgFrame(geo), children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: geo.start.x,
+        y1: geo.start.y,
+        x2: geo.head.x,
+        y2: geo.head.y,
+        stroke: "transparent",
+        strokeWidth: 14,
+        strokeLinecap: "round",
+        className: "fb-edge__hit",
+        onPointerDown: select
+      }
+    ),
+    /* @__PURE__ */ jsx(ArrowBody, { geo, color, width: selected ? 3 : 2 }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: geo.head.x,
+        cy: geo.head.y,
+        r: selected ? 7 : 5,
+        fill: color,
+        stroke: "var(--fb-surface)",
+        strokeWidth: selected ? 2 : 0,
+        className: "fb-edge__head",
+        onPointerDown: (e) => {
+          select(e);
+          drag.onPointerDown(e);
+        },
+        onPointerMove: drag.onPointerMove,
+        onPointerUp: drag.onPointerUp
+      }
+    )
+  ] });
+}
+function DraftEdge({ start, head, originX: originX2 }) {
+  return /* @__PURE__ */ jsx(Arrow, { start: withOrigin(start, originX2), head: withOrigin(head, originX2), color: "var(--fb-accent)", width: 2 });
+}
+function Overlay({ originX: originX2, focusId, reviewCurrentId, reviewing, selectedEdge, onSelectEdge, draft }) {
+  const { doc, region, section, nav, heightOf, rootClassName, rootStyle } = useFeedback();
+  const inScope = (o) => o.page === nav.page && (o.section ?? null) === (section ?? null);
+  const noteById = (id) => doc.notes.find((n) => n.id === id);
+  const pageNotes = doc.notes.filter(inScope);
+  const pageEdges = doc.edges.filter(inScope);
+  const draftNote = draft.draft ? noteById(draft.draft.noteId) : null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { "data-feedback": true, className: `${rootClassName} fb-overlay`, style: rootStyle, children: [
+      pageEdges.map((edge) => {
+        const note = noteById(edge.noteId);
+        if (!note) return null;
+        return /* @__PURE__ */ jsx(
+          Edge,
+          {
+            start: knobPoint(note, edge.port, heightOf(note.id)),
+            head: { x: edge.x, y: edge.y },
+            originX: originX2,
+            selected: selectedEdge === edge.id,
+            onSelect: () => onSelectEdge(edge.id),
+            onMoveHead: (x, y) => doc.updateEdge(edge.id, { x, y }),
+            onReaim: (x, y) => doc.updateEdge(edge.id, { target: describeTarget(x, y) })
+          },
+          edge.id
+        );
+      }),
+      draft.draft && draftNote && /* @__PURE__ */ jsx(DraftEdge, { start: knobPoint(draftNote, draft.draft.port, heightOf(draftNote.id)), head: draft.draft.head, originX: originX2 }),
+      pageNotes.map((note) => /* @__PURE__ */ jsx(
+        StickyNote,
+        {
+          note,
+          originX: originX2,
+          autoFocus: note.id === focusId,
+          current: reviewing && note.id === reviewCurrentId,
+          onMove: (x, y) => doc.updateNote(note.id, { x, y }),
+          onEdit: (text) => doc.updateNote(note.id, { text }),
+          onToggleResolved: () => doc.updateNote(note.id, { resolved: !note.resolved }),
+          onRemove: () => doc.removeNote(note.id)
+        },
+        note.id
+      )),
+      pageNotes.map((note) => /* @__PURE__ */ jsx(
+        NoteKnobs,
+        {
+          note,
+          height: heightOf(note.id),
+          originX: originX2,
+          onStart: draft.start,
+          onMove: draft.move,
+          onEnd: draft.end
+        },
+        `knobs-${note.id}`
+      ))
+    ] }),
+    region.element ?? document.body
+  );
+}
+function GhostNote({ x, y }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "fb-ghost", style: { left: x, top: y, width: NOTE_WIDTH, height: NOTE_MIN_HEIGHT } });
+}
+var SUBMIT_TITLES = {
+  idle: "Send all feedback notes",
+  sending: "Sending feedback\u2026",
+  sent: "Feedback sent",
+  error: "Sending failed \u2014 try again"
+};
+function FeedbackDock({ launcher, onSave, onLoad, onSubmit, submitStatus, onToggleReview, reviewing, onToggleHelp, helpOpen, helpRef, count }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fb-dock", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref: helpRef,
+        variant: "solid",
+        size: "lg",
+        active: helpOpen,
+        "aria-pressed": helpOpen,
+        onClick: onToggleHelp,
+        title: "How feedback works",
+        children: /* @__PURE__ */ jsx(HelpIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...launcher,
+        variant: "solid",
+        size: "lg",
+        badge: count || void 0,
+        title: "Drag onto the page to leave a feedback note",
+        className: "fb-dock__launcher",
+        children: /* @__PURE__ */ jsx(NoteIcon, {})
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "solid",
+        size: "lg",
+        tone: submitStatus === "error" ? "danger" : "success",
+        active: submitStatus === "sent" || submitStatus === "error",
+        onClick: onSubmit,
+        disabled: count === 0 || submitStatus === "sending",
+        className: submitStatus === "sending" ? "fb-dock__send is-sending" : "fb-dock__send",
+        title: SUBMIT_TITLES[submitStatus],
+        children: submitStatus === "sent" ? /* @__PURE__ */ jsx(SentIcon, {}) : /* @__PURE__ */ jsx(SendIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(IconButton, { variant: "solid", size: "lg", onClick: onSave, disabled: count === 0, title: "Save all feedback notes to a file", children: /* @__PURE__ */ jsx(SaveIcon, {}) }),
+    /* @__PURE__ */ jsx(IconButton, { variant: "solid", size: "lg", onClick: onLoad, title: "Load feedback notes from a file", children: /* @__PURE__ */ jsx(LoadIcon, {}) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "solid",
+        size: "lg",
+        active: reviewing,
+        "aria-pressed": reviewing,
+        onClick: onToggleReview,
+        disabled: count === 0,
+        title: reviewing ? "Exit review mode" : "Review the loaded notes",
+        children: /* @__PURE__ */ jsx(ReviewIcon, {})
+      }
+    )
+  ] });
+}
+function Toolbar({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["fb-toolbar", className].filter(Boolean).join(" "), ...rest, children });
+}
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx("span", { className: "fb-toolbar__divider" });
+}
+function ReviewBar({
+  position,
+  total,
+  hasCurrent,
+  currentResolved,
+  includeResolved,
+  onFirst,
+  onPrev,
+  onNext,
+  onLast,
+  onResolveCurrent,
+  onDeleteCurrent,
+  onToggleIncludeResolved,
+  onExit
+}) {
+  const atStart = position <= 1;
+  const atEnd = position >= total;
+  const empty = total === 0;
+  return /* @__PURE__ */ jsxs(Toolbar, { className: "fb-reviewbar", role: "toolbar", "aria-label": "Review notes", children: [
+    /* @__PURE__ */ jsx(IconButton, { onClick: onFirst, disabled: atStart, title: "First note", children: /* @__PURE__ */ jsx(FirstIcon, {}) }),
+    /* @__PURE__ */ jsx(IconButton, { onClick: onPrev, disabled: atStart, title: "Previous note", children: /* @__PURE__ */ jsx(PrevIcon, {}) }),
+    /* @__PURE__ */ jsx("span", { className: "fb-reviewbar__count", children: empty ? "no notes" : `${position} / ${total}` }),
+    /* @__PURE__ */ jsx(IconButton, { onClick: onNext, disabled: atEnd, title: "Next note", children: /* @__PURE__ */ jsx(NextIcon, {}) }),
+    /* @__PURE__ */ jsx(IconButton, { onClick: onLast, disabled: atEnd, title: "Last note", children: /* @__PURE__ */ jsx(LastIcon, {}) }),
+    /* @__PURE__ */ jsx(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tone: "success",
+        active: currentResolved,
+        "aria-pressed": currentResolved,
+        onClick: onResolveCurrent,
+        disabled: !hasCurrent,
+        title: currentResolved ? "Reopen this note" : "Resolve this note",
+        children: /* @__PURE__ */ jsx(CheckIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(IconButton, { tone: "danger", onClick: onDeleteCurrent, disabled: !hasCurrent, title: "Delete this note", children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+    /* @__PURE__ */ jsx(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        active: includeResolved,
+        "aria-pressed": includeResolved,
+        onClick: onToggleIncludeResolved,
+        title: includeResolved ? "Including resolved notes" : "Skipping resolved notes",
+        children: /* @__PURE__ */ jsx(EyeIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(IconButton, { onClick: onExit, title: "Exit review", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+  ] });
+}
+var GAP = 8;
+var MARGIN = 12;
+function useAnchoredPosition(anchor, panelRef) {
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    const place = () => {
+      const panel = panelRef.current;
+      if (!panel || !anchor) return;
+      const a = anchor.getBoundingClientRect();
+      const p = panel.getBoundingClientRect();
+      setPos({
+        left: clamp(a.right - p.width, MARGIN, window.innerWidth - p.width - MARGIN),
+        top: clamp(a.top - p.height - GAP, MARGIN, window.innerHeight - p.height - MARGIN)
+      });
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [anchor, panelRef]);
+  return pos;
+}
+function clamp(value, lo, hi) {
+  return Math.max(lo, Math.min(value, hi));
+}
+function Popover({ anchor, onClose, label, className, style, children }) {
+  const ref = useRef(null);
+  const pos = useAnchoredPosition(anchor, ref);
+  useEffect(() => {
+    const onDown = (e) => {
+      const target = e.target;
+      if (!ref.current?.contains(target) && !anchor?.contains(target)) onClose();
+    };
+    const onKey = (e) => e.key === "Escape" && onClose();
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [anchor, onClose]);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-feedback": true,
+        role: "dialog",
+        "aria-label": label,
+        className: ["fb-popover", className].filter(Boolean).join(" "),
+        style: {
+          top: pos?.top ?? -9999,
+          left: pos?.left ?? -9999,
+          visibility: pos ? "visible" : "hidden",
+          ...style
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
+function HelpGuide({ anchor, onClose }) {
+  const { submit, rootClassName, rootStyle } = useFeedback();
+  return /* @__PURE__ */ jsxs(Popover, { anchor, onClose, label: "How feedback works", className: rootClassName, style: rootStyle, children: [
+    /* @__PURE__ */ jsxs("header", { className: "fb-guide__header", children: [
+      /* @__PURE__ */ jsx("h2", { className: "fb-guide__title", children: "Leaving feedback" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", className: "fb-guide__close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "fb-guide__lead", children: "See something worth flagging? Mark it up right here on the page." }),
+    /* @__PURE__ */ jsxs("ul", { className: "fb-guide__steps", children: [
+      /* @__PURE__ */ jsxs(Step, { icon: /* @__PURE__ */ jsx(NoteIcon, {}), children: [
+        /* @__PURE__ */ jsx("b", { children: "Drop a note." }),
+        " Drag the",
+        " ",
+        /* @__PURE__ */ jsx(InlineIcon, { children: /* @__PURE__ */ jsx(NoteIcon, {}) }),
+        " ",
+        "button onto the page and let go where you want to comment."
+      ] }),
+      /* @__PURE__ */ jsxs(Step, { icon: /* @__PURE__ */ jsx(GripIcon, {}), children: [
+        /* @__PURE__ */ jsx("b", { children: "Move and describe." }),
+        " Drag the note's top bar to slide it anywhere, and click its text to write down what you're flagging."
+      ] }),
+      /* @__PURE__ */ jsxs(Step, { icon: /* @__PURE__ */ jsx(Knob2, {}), children: [
+        /* @__PURE__ */ jsx("b", { children: "Point at it." }),
+        " Drag from a knob on a note's edge to draw an arrow at exactly what you mean. Drag the arrowhead to fine-tune, or select it and press Delete."
+      ] }),
+      /* @__PURE__ */ jsxs(Step, { icon: submit ? /* @__PURE__ */ jsx(SendIcon, {}) : /* @__PURE__ */ jsx(SaveIcon, {}), children: [
+        /* @__PURE__ */ jsx("b", { children: "Send it in." }),
+        " Notes save in your browser as you go. When you're done, hit",
+        " ",
+        submit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(InlineIcon, { children: /* @__PURE__ */ jsx(SendIcon, {}) }),
+          " ",
+          "to submit them."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(InlineIcon, { children: /* @__PURE__ */ jsx(SaveIcon, {}) }),
+          " ",
+          "to download them as a file and send it along."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Step({ icon, children }) {
+  return /* @__PURE__ */ jsxs("li", { className: "fb-guide__step", children: [
+    /* @__PURE__ */ jsx("span", { className: "fb-guide__step-icon", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "fb-guide__step-text", children })
+  ] });
+}
+function InlineIcon({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "fb-guide__inline-icon", children });
+}
+function Knob2() {
+  return /* @__PURE__ */ jsx("span", { className: "fb-guide__knob" });
+}
+function FeedbackLayer() {
+  const { doc, nav, region, section, heightOf, fileName, submit, rootClassName, rootStyle } = useFeedback();
+  const originX2 = useOriginX(region);
+  const review = useReview(doc.notes);
+  const [focusId, setFocusId] = useState(null);
+  const [selectedEdge, setSelectedEdge] = useState(null);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const helpRef = useRef(null);
+  const noteById = useCallback((id) => doc.notes.find((n) => n.id === id), [doc.notes]);
+  const draft = useEdgeDraft({
+    region,
+    noteById,
+    heightOf,
+    onCommit: (noteId, port, head, target) => doc.addEdge({ page: nav.page, section, noteId, port, x: head.x, y: head.y, target })
+  });
+  const spawn = useCallback(
+    (clientX, clientY) => {
+      const { x, y } = toContent(clientX, clientY, region);
+      setFocusId(doc.addNote(nav.page, section, x, Math.max(0, y)));
+    },
+    [doc, nav.page, section, region]
+  );
+  const { ghost, handlers } = useSpawnGesture(spawn);
+  const load = useCallback(async () => {
+    const loaded = await importDoc();
+    if (loaded) doc.replace(loaded);
+  }, [doc]);
+  const save = useCallback(() => void exportDoc({ notes: doc.notes, edges: doc.edges }, fileName), [doc, fileName]);
+  const submission = useSubmission(submit);
+  const send = useCallback(
+    () => void submission.send({ notes: doc.notes, edges: doc.edges }),
+    [submission.send, doc.notes, doc.edges]
+  );
+  useEffect(() => {
+    const clear = () => setSelectedEdge(null);
+    document.addEventListener("pointerdown", clear);
+    return () => document.removeEventListener("pointerdown", clear);
+  }, []);
+  useEffect(() => {
+    if (!selectedEdge) return;
+    const onKey = (e) => {
+      if ((e.key === "Delete" || e.key === "Backspace") && !isEditable(document.activeElement)) {
+        e.preventDefault();
+        doc.removeEdge(selectedEdge);
+        setSelectedEdge(null);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [selectedEdge, doc]);
+  const current = doc.notes.find((n) => n.id === review.currentId) ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Overlay,
+      {
+        originX: originX2,
+        focusId,
+        reviewCurrentId: review.currentId,
+        reviewing: review.on,
+        selectedEdge,
+        onSelectEdge: setSelectedEdge,
+        draft
+      }
+    ),
+    createPortal(
+      /* @__PURE__ */ jsxs("div", { "data-feedback": true, className: rootClassName, style: rootStyle, children: [
+        ghost && /* @__PURE__ */ jsx(GhostNote, { x: ghost.x, y: ghost.y }),
+        review.on && /* @__PURE__ */ jsx(
+          ReviewBar,
+          {
+            position: review.position,
+            total: review.total,
+            hasCurrent: current !== null,
+            currentResolved: current?.resolved ?? false,
+            includeResolved: review.includeResolved,
+            onFirst: review.first,
+            onPrev: review.prev,
+            onNext: review.next,
+            onLast: review.last,
+            onResolveCurrent: () => current && doc.updateNote(current.id, { resolved: !current.resolved }),
+            onDeleteCurrent: () => current && doc.removeNote(current.id),
+            onToggleIncludeResolved: review.toggleIncludeResolved,
+            onExit: review.toggle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FeedbackDock,
+          {
+            launcher: handlers,
+            onSave: save,
+            onLoad: () => void load(),
+            onSubmit: submit ? send : null,
+            submitStatus: submission.status,
+            onToggleReview: review.toggle,
+            reviewing: review.on,
+            onToggleHelp: () => setHelpOpen((open) => !open),
+            helpOpen,
+            helpRef,
+            count: doc.notes.length
+          }
+        ),
+        helpOpen && /* @__PURE__ */ jsx(HelpGuide, { anchor: helpRef.current, onClose: () => setHelpOpen(false) })
+      ] }),
+      document.body
+    )
+  ] });
+}
+function isEditable(el) {
+  if (!el) return false;
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable;
+}
+function FeedbackRegion({ children, anchorX, section = null, onReveal, className, style }) {
+  const ref = useRef(null);
+  const { bindRegion } = useFeedback();
+  const revealRef = useRef(onReveal);
+  revealRef.current = onReveal;
+  const hasReveal = !!onReveal;
+  useEffect(() => {
+    bindRegion({
+      element: ref.current,
+      anchorX,
+      section,
+      reveal: hasReveal ? (s) => revealRef.current?.(s) : void 0
+    });
+    return () => bindRegion(null);
+  }, [anchorX, section, hasReveal, bindRegion]);
+  return /* @__PURE__ */ jsx("div", { ref, className, style: { ...style, position: "relative" }, children });
+}
+
+export { EMPTY_DOC, FeedbackLayer, FeedbackProvider, FeedbackRegion, endpointSubmitter, normalizeDoc };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map