@siteping/widget 0.8.0

package/dist/index.js

@@ -0,0 +1,3689 @@
+// ../../node_modules/.bun/@medv+finder@3.2.0/node_modules/@medv/finder/finder.js
+var config;
+var rootDocument;
+var start;
+function finder(input, options) {
+  start = /* @__PURE__ */ new Date();
+  if (input.nodeType !== Node.ELEMENT_NODE) {
+    throw new Error(`Can't generate CSS selector for non-element node type.`);
+  }
+  if ("html" === input.tagName.toLowerCase()) {
+    return "html";
+  }
+  const defaults = {
+    root: document.body,
+    idName: (name) => true,
+    className: (name) => true,
+    tagName: (name) => true,
+    attr: (name, value) => false,
+    seedMinLength: 1,
+    optimizedMinLength: 2,
+    threshold: 1e3,
+    maxNumberOfTries: 1e4,
+    timeoutMs: void 0
+  };
+  config = { ...defaults, ...options };
+  rootDocument = findRootDocument(config.root, defaults);
+  let path = bottomUpSearch(input, "all", () => bottomUpSearch(input, "two", () => bottomUpSearch(input, "one", () => bottomUpSearch(input, "none"))));
+  if (path) {
+    const optimized = sort(optimize(path, input));
+    if (optimized.length > 0) {
+      path = optimized[0];
+    }
+    return selector(path);
+  } else {
+    throw new Error(`Selector was not found.`);
+  }
+}
+function findRootDocument(rootNode, defaults) {
+  if (rootNode.nodeType === Node.DOCUMENT_NODE) {
+    return rootNode;
+  }
+  if (rootNode === defaults.root) {
+    return rootNode.ownerDocument;
+  }
+  return rootNode;
+}
+function bottomUpSearch(input, limit, fallback) {
+  let path = null;
+  let stack = [];
+  let current = input;
+  let i = 0;
+  while (current) {
+    const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - start.getTime();
+    if (config.timeoutMs !== void 0 && elapsedTime > config.timeoutMs) {
+      throw new Error(`Timeout: Can't find a unique selector after ${elapsedTime}ms`);
+    }
+    let level = maybe(id(current)) || maybe(...attr(current)) || maybe(...classNames(current)) || maybe(tagName(current)) || [any()];
+    const nth = index(current);
+    if (limit == "all") {
+      if (nth) {
+        level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));
+      }
+    } else if (limit == "two") {
+      level = level.slice(0, 1);
+      if (nth) {
+        level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));
+      }
+    } else if (limit == "one") {
+      const [node] = level = level.slice(0, 1);
+      if (nth && dispensableNth(node)) {
+        level = [nthChild(node, nth)];
+      }
+    } else if (limit == "none") {
+      level = [any()];
+      if (nth) {
+        level = [nthChild(level[0], nth)];
+      }
+    }
+    for (let node of level) {
+      node.level = i;
+    }
+    stack.push(level);
+    if (stack.length >= config.seedMinLength) {
+      path = findUniquePath(stack, fallback);
+      if (path) {
+        break;
+      }
+    }
+    current = current.parentElement;
+    i++;
+  }
+  if (!path) {
+    path = findUniquePath(stack, fallback);
+  }
+  if (!path && fallback) {
+    return fallback();
+  }
+  return path;
+}
+function findUniquePath(stack, fallback) {
+  const paths = sort(combinations(stack));
+  if (paths.length > config.threshold) {
+    return fallback ? fallback() : null;
+  }
+  for (let candidate of paths) {
+    if (unique(candidate)) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function selector(path) {
+  let node = path[0];
+  let query = node.name;
+  for (let i = 1; i < path.length; i++) {
+    const level = path[i].level || 0;
+    if (node.level === level - 1) {
+      query = `${path[i].name} > ${query}`;
+    } else {
+      query = `${path[i].name} ${query}`;
+    }
+    node = path[i];
+  }
+  return query;
+}
+function penalty(path) {
+  return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);
+}
+function unique(path) {
+  const css = selector(path);
+  switch (rootDocument.querySelectorAll(css).length) {
+    case 0:
+      throw new Error(`Can't select any node with this selector: ${css}`);
+    case 1:
+      return true;
+    default:
+      return false;
+  }
+}
+function id(input) {
+  const elementId = input.getAttribute("id");
+  if (elementId && config.idName(elementId)) {
+    return {
+      name: "#" + CSS.escape(elementId),
+      penalty: 0
+    };
+  }
+  return null;
+}
+function attr(input) {
+  const attrs = Array.from(input.attributes).filter((attr2) => config.attr(attr2.name, attr2.value));
+  return attrs.map((attr2) => ({
+    name: `[${CSS.escape(attr2.name)}="${CSS.escape(attr2.value)}"]`,
+    penalty: 0.5
+  }));
+}
+function classNames(input) {
+  const names = Array.from(input.classList).filter(config.className);
+  return names.map((name) => ({
+    name: "." + CSS.escape(name),
+    penalty: 1
+  }));
+}
+function tagName(input) {
+  const name = input.tagName.toLowerCase();
+  if (config.tagName(name)) {
+    return {
+      name,
+      penalty: 2
+    };
+  }
+  return null;
+}
+function any() {
+  return {
+    name: "*",
+    penalty: 3
+  };
+}
+function index(input) {
+  const parent = input.parentNode;
+  if (!parent) {
+    return null;
+  }
+  let child = parent.firstChild;
+  if (!child) {
+    return null;
+  }
+  let i = 0;
+  while (child) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      i++;
+    }
+    if (child === input) {
+      break;
+    }
+    child = child.nextSibling;
+  }
+  return i;
+}
+function nthChild(node, i) {
+  return {
+    name: node.name + `:nth-child(${i})`,
+    penalty: node.penalty + 1
+  };
+}
+function dispensableNth(node) {
+  return node.name !== "html" && !node.name.startsWith("#");
+}
+function maybe(...level) {
+  const list = level.filter(notEmpty);
+  if (list.length > 0) {
+    return list;
+  }
+  return null;
+}
+function notEmpty(value) {
+  return value !== null && value !== void 0;
+}
+function* combinations(stack, path = []) {
+  if (stack.length > 0) {
+    for (let node of stack[0]) {
+      yield* combinations(stack.slice(1, stack.length), path.concat(node));
+    }
+  } else {
+    yield path;
+  }
+}
+function sort(paths) {
+  return [...paths].sort((a, b) => penalty(a) - penalty(b));
+}
+function* optimize(path, input, scope = {
+  counter: 0,
+  visited: /* @__PURE__ */ new Map()
+}) {
+  if (path.length > 2 && path.length > config.optimizedMinLength) {
+    for (let i = 1; i < path.length - 1; i++) {
+      if (scope.counter > config.maxNumberOfTries) {
+        return;
+      }
+      scope.counter += 1;
+      const newPath = [...path];
+      newPath.splice(i, 1);
+      const newPathKey = selector(newPath);
+      if (scope.visited.has(newPathKey)) {
+        return;
+      }
+      if (unique(newPath) && same(newPath, input)) {
+        yield newPath;
+        scope.visited.set(newPathKey, true);
+        yield* optimize(newPath, input, scope);
+      }
+    }
+  }
+}
+function same(path, input) {
+  return rootDocument.querySelector(selector(path)) === input;
+}
+
+// src/dom/fingerprint.ts
+var STABLE_ATTRS = ["role", "aria-label", "type", "name", "href", "src", "data-testid", "data-id"];
+function djb2(str) {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) + hash + str.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(36);
+}
+function generateFingerprint(element) {
+  const childCount = element.children.length;
+  let siblingIdx = 0;
+  const parent = element.parentElement;
+  if (parent) {
+    for (const child of parent.children) {
+      if (child === element) break;
+      if (child.tagName === element.tagName) siblingIdx++;
+    }
+  }
+  const attrs = [];
+  for (const attr2 of STABLE_ATTRS) {
+    const val = element.getAttribute(attr2);
+    if (val) attrs.push(`${attr2}=${val}`);
+  }
+  const attrHash = attrs.length > 0 ? djb2(attrs.join(",")) : "0";
+  return `${childCount}:${siblingIdx}:${attrHash}`;
+}
+function scoreFingerprint(candidate, storedFingerprint) {
+  const parts = storedFingerprint.split(":");
+  if (parts.length !== 3) return 0;
+  const [storedChildren, storedSibIdx, storedAttrHash] = parts;
+  const storedChildCount = Number(storedChildren);
+  const storedSibIndex = Number(storedSibIdx);
+  if (Number.isNaN(storedChildCount) || Number.isNaN(storedSibIndex)) return 0;
+  const candidateFp = generateFingerprint(candidate);
+  const [candChildren, candSibIdx, candAttrHash] = candidateFp.split(":");
+  let score = 0;
+  const childDiff = Math.abs(Number(candChildren) - storedChildCount);
+  if (childDiff === 0) score += 0.2;
+  else if (childDiff <= 2) score += 0.1;
+  else if (childDiff <= 5) score += 0.03;
+  const sibDiff = Math.abs(Number(candSibIdx) - storedSibIndex);
+  if (sibDiff === 0) score += 0.4;
+  else if (sibDiff === 1) score += 0.2;
+  else if (sibDiff <= 3) score += 0.08;
+  if (candAttrHash === storedAttrHash) score += 0.4;
+  return score;
+}
+
+// src/dom/text-context.ts
+function adjacentText(element, direction) {
+  const prop = direction === "before" ? "previousElementSibling" : "nextElementSibling";
+  let sibling = element[prop];
+  let attempts = 3;
+  while (sibling && attempts > 0) {
+    const text = sibling.textContent?.trim();
+    if (text) {
+      return direction === "before" ? text.slice(-32) : text.slice(0, 32);
+    }
+    sibling = sibling[prop];
+    attempts--;
+  }
+  return "";
+}
+function neighborText(element) {
+  const prev = element.previousElementSibling?.textContent?.trim().slice(0, 40) ?? "";
+  const next = element.nextElementSibling?.textContent?.trim().slice(0, 40) ?? "";
+  return [prev, next].filter(Boolean).join(" | ");
+}
+
+// src/dom/xpath.ts
+function generateXPath(element) {
+  if (element.id) {
+    const safeId = element.id.includes("'") ? `concat('${element.id.replace(/'/g, `',"'",'`)}')` : `'${element.id}'`;
+    return `//${element.localName}[@id=${safeId}]`;
+  }
+  const segments = [];
+  let current = element;
+  while (current && current !== document.body && segments.length < 6) {
+    const tag = current.localName;
+    const parent = current.parentElement;
+    if (current.id) {
+      const safeId = current.id.includes("'") ? `concat('${current.id.replace(/'/g, `',"'",'`)}')` : `'${current.id}'`;
+      segments.unshift(`/${tag}[@id=${safeId}]`);
+      return "/" + segments.join("");
+    }
+    let position = 1;
+    if (parent) {
+      for (const sibling of parent.children) {
+        if (sibling === current) break;
+        if (sibling.localName === tag) position++;
+      }
+    }
+    segments.unshift(`/${tag}[${position}]`);
+    current = parent;
+  }
+  return "/html/body" + segments.join("");
+}
+
+// src/dom/anchor.ts
+function generateAnchor(element) {
+  const cssSelector = finder(element, {
+    // Filter out CSS-in-JS hashed class names
+    className: (name) => !/^(css|sc|emotion|styled)-/.test(name) && !/^[a-z]{1,3}[A-Za-z0-9]{4,8}$/.test(name),
+    // Prefer stable attributes
+    attr: (name) => ["data-testid", "data-id", "role", "aria-label"].includes(name),
+    // Exclude framework-generated dynamic IDs
+    idName: (name) => !name.startsWith("radix-") && !/^:r[0-9]+:$/.test(name),
+    seedMinLength: 3,
+    optimizedMinLength: 2
+  });
+  const xpath = generateXPath(element);
+  const rawText = element.textContent?.trim() ?? "";
+  const textSnippet = rawText.slice(0, 120);
+  const textPrefix = adjacentText(element, "before");
+  const textSuffix = adjacentText(element, "after");
+  const fingerprint = generateFingerprint(element);
+  const neighbor = neighborText(element);
+  return {
+    cssSelector,
+    xpath,
+    textSnippet,
+    textPrefix,
+    textSuffix,
+    fingerprint,
+    neighborText: neighbor,
+    elementTag: element.tagName,
+    elementId: element.id || void 0
+  };
+}
+function findAnchorElement(rect, root = document.documentElement) {
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const elementAtCenter = document.elementFromPoint(centerX, centerY);
+  if (!elementAtCenter || elementAtCenter === root) return document.body;
+  let candidate = elementAtCenter;
+  let current = elementAtCenter;
+  while (current && current !== document.body) {
+    const bounds = current.getBoundingClientRect();
+    if (bounds.left <= rect.x && bounds.top <= rect.y && bounds.right >= rect.x + rect.width && bounds.bottom >= rect.y + rect.height) {
+      candidate = current;
+      break;
+    }
+    current = current.parentElement;
+  }
+  return candidate;
+}
+function rectToPercentages(rect, anchorBounds) {
+  if (anchorBounds.width <= 0 || anchorBounds.height <= 0) {
+    return { xPct: 0, yPct: 0, wPct: 1, hPct: 1 };
+  }
+  return {
+    xPct: (rect.x - anchorBounds.x) / anchorBounds.width,
+    yPct: (rect.y - anchorBounds.y) / anchorBounds.height,
+    wPct: rect.width / anchorBounds.width,
+    hPct: rect.height / anchorBounds.height
+  };
+}
+
+// src/dom-utils.ts
+function parseSvg(svgString) {
+  const range = document.createRange();
+  const fragment = range.createContextualFragment(svgString);
+  const svg = fragment.firstElementChild;
+  if (!svg || svg.nodeName.toLowerCase() !== "svg") {
+    throw new Error("[siteping] Invalid SVG string");
+  }
+  return svg;
+}
+function el(tag, attrs) {
+  const element = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === "class") {
+        element.className = value;
+      } else if (key === "style") {
+        element.style.cssText = value;
+      } else {
+        element.setAttribute(key, value);
+      }
+    }
+  }
+  return element;
+}
+function setText(element, text) {
+  element.textContent = text;
+}
+function formatRelativeDate(isoString) {
+  const diff = Date.now() - new Date(isoString).getTime();
+  const minutes = Math.floor(diff / 6e4);
+  if (minutes < 1) return "maintenant";
+  if (minutes < 60) return `il y a ${minutes}min`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `il y a ${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `il y a ${days}j`;
+  return new Date(isoString).toLocaleDateString("fr-FR");
+}
+
+// src/icons.ts
+var ICON_SITEPING = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><circle cx="12" cy="10" r="1" fill="currentColor" stroke="none"/><circle cx="8" cy="10" r="1" fill="currentColor" stroke="none"/><circle cx="16" cy="10" r="1" fill="currentColor" stroke="none"/></svg>`;
+var ICON_CHAT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+var ICON_ANNOTATE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v18"/></svg>`;
+var ICON_EYE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
+var ICON_EYE_OFF = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
+var ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+var ICON_SEARCH = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
+var ICON_CHECK = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+var ICON_QUESTION = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+var ICON_CHANGE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`;
+var ICON_BUG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="6" width="8" height="14" rx="4"/><path d="M19 9h2"/><path d="M3 9h2"/><path d="M19 13h2"/><path d="M3 13h2"/><path d="M19 17h2"/><path d="M3 17h2"/><path d="M10 2h4"/></svg>`;
+var ICON_OTHER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`;
+var ICON_UNDO = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>`;
+var ICON_TRASH = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><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"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`;
+
+// src/styles/theme.ts
+var DEFAULT_ACCENT = "#0066ff";
+var HEX6_RE = /^#[0-9a-fA-F]{6}$/;
+var HEX3_RE = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/;
+var HEX8_RE = /^#[0-9a-fA-F]{8}$/;
+function normalizeHex(color) {
+  if (HEX6_RE.test(color)) return color;
+  const short = HEX3_RE.test(color) ? color.match(HEX3_RE) : null;
+  if (short) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
+  if (HEX8_RE.test(color)) return color.slice(0, 7);
+  return DEFAULT_ACCENT;
+}
+function darkenHex(hex, amount) {
+  const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
+  const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
+  const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function buildThemeColors(accent = DEFAULT_ACCENT) {
+  const hex = normalizeHex(accent);
+  const dark = darkenHex(hex, 0.15);
+  return {
+    accent: hex,
+    accentLight: hex + "14",
+    // 8% opacity
+    accentDark: dark,
+    accentGlow: hex + "33",
+    // 20% opacity
+    accentGradient: `linear-gradient(135deg, ${hex}, ${dark})`,
+    bg: "#ffffff",
+    bgHover: "#f8f9fb",
+    text: "#0f172a",
+    textSecondary: "#475569",
+    textTertiary: "#64748b",
+    border: "#e2e8f0",
+    shadow: "rgba(0, 0, 0, 0.06)",
+    // Glass tokens
+    glassBg: "rgba(255, 255, 255, 0.72)",
+    glassBgHeavy: "rgba(255, 255, 255, 0.85)",
+    glassBorder: "rgba(255, 255, 255, 0.35)",
+    glassBorderSubtle: "rgba(255, 255, 255, 0.18)",
+    // Vibrant type colors
+    typeQuestion: "#3b82f6",
+    typeChangement: "#f59e0b",
+    typeBug: "#ef4444",
+    typeAutre: "#64748b",
+    // Pastel backgrounds
+    typeQuestionBg: "#eff6ff",
+    typeChangementBg: "#fffbeb",
+    typeBugBg: "#fef2f2",
+    typeAutreBg: "#f8fafc"
+  };
+}
+function getTypeColor(type, colors) {
+  switch (type) {
+    case "question":
+      return colors.typeQuestion;
+    case "changement":
+      return colors.typeChangement;
+    case "bug":
+      return colors.typeBug;
+    default:
+      return colors.typeAutre;
+  }
+}
+function getTypeBgColor(type, colors) {
+  switch (type) {
+    case "question":
+      return colors.typeQuestionBg;
+    case "changement":
+      return colors.typeChangementBg;
+    case "bug":
+      return colors.typeBugBg;
+    default:
+      return colors.typeAutreBg;
+  }
+}
+function cssVariables(colors) {
+  return `
+    --sp-accent: ${colors.accent};
+    --sp-accent-light: ${colors.accentLight};
+    --sp-accent-dark: ${colors.accentDark};
+    --sp-accent-glow: ${colors.accentGlow};
+    --sp-accent-gradient: ${colors.accentGradient};
+    --sp-bg: ${colors.bg};
+    --sp-bg-hover: ${colors.bgHover};
+    --sp-text: ${colors.text};
+    --sp-text-secondary: ${colors.textSecondary};
+    --sp-text-tertiary: ${colors.textTertiary};
+    --sp-border: ${colors.border};
+    --sp-shadow: ${colors.shadow};
+    --sp-glass-bg: ${colors.glassBg};
+    --sp-glass-bg-heavy: ${colors.glassBgHeavy};
+    --sp-glass-border: ${colors.glassBorder};
+    --sp-glass-border-subtle: ${colors.glassBorderSubtle};
+    --sp-type-question: ${colors.typeQuestion};
+    --sp-type-changement: ${colors.typeChangement};
+    --sp-type-bug: ${colors.typeBug};
+    --sp-type-autre: ${colors.typeAutre};
+    --sp-type-question-bg: ${colors.typeQuestionBg};
+    --sp-type-changement-bg: ${colors.typeChangementBg};
+    --sp-type-bug-bg: ${colors.typeBugBg};
+    --sp-type-autre-bg: ${colors.typeAutreBg};
+    --sp-radius: 12px;
+    --sp-radius-lg: 16px;
+    --sp-radius-xl: 20px;
+    --sp-radius-full: 9999px;
+    --sp-blur: 20px;
+    --sp-blur-heavy: 32px;
+    --sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
+    --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+    --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
+    --sp-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
+    --sp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  `;
+}
+
+// src/popup.ts
+var TYPE_OPTIONS = [
+  { type: "question", label: "Question", icon: ICON_QUESTION },
+  { type: "changement", label: "Changement", icon: ICON_CHANGE },
+  { type: "bug", label: "Bug", icon: ICON_BUG },
+  { type: "autre", label: "Autre", icon: ICON_OTHER }
+];
+var Popup = class {
+  constructor(colors) {
+    this.colors = colors;
+    this.root = el("div", {
+      style: `
+        position:fixed;
+        z-index:2147483647;
+        width:300px;
+        padding:16px;
+        border-radius:16px;
+        background:rgba(255, 255, 255, 0.82);
+        backdrop-filter:blur(24px);
+        -webkit-backdrop-filter:blur(24px);
+        border:1px solid rgba(255, 255, 255, 0.35);
+        box-shadow:0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.04);
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        opacity:0;
+        transform:translateY(8px) scale(0.98);
+        transition:opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+        display:none;
+        -webkit-font-smoothing:antialiased;
+      `
+    });
+    const typeRow = el("div", { style: "display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;" });
+    for (const option of TYPE_OPTIONS) {
+      const btn = document.createElement("button");
+      btn.style.cssText = `
+        height:34px;
+        border-radius:9999px;border:1px solid #e2e8f0;
+        background:rgba(255,255,255,0.8);cursor:pointer;
+        display:flex;align-items:center;justify-content:center;gap:5px;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        font-size:12px;font-weight:500;color:#64748b;
+        transition:all 0.2s ease;
+        padding:0 10px;
+      `;
+      const icon = parseSvg(option.icon);
+      icon.setAttribute("style", "width:13px;height:13px;flex-shrink:0;");
+      btn.appendChild(icon);
+      const labelSpan = document.createElement("span");
+      setText(labelSpan, option.label);
+      btn.appendChild(labelSpan);
+      btn.dataset.type = option.type;
+      btn.addEventListener("click", () => {
+        this.selectType(option.type, typeRow);
+      });
+      btn.addEventListener("mouseenter", () => {
+        if (btn.dataset.type !== this.selectedType) {
+          const bgColor = getTypeBgColor(btn.dataset.type ?? "", this.colors);
+          btn.style.background = bgColor;
+          btn.style.borderColor = getTypeColor(btn.dataset.type ?? "", this.colors) + "40";
+        }
+      });
+      btn.addEventListener("mouseleave", () => {
+        if (btn.dataset.type !== this.selectedType) {
+          btn.style.background = "rgba(255,255,255,0.8)";
+          btn.style.borderColor = "#e2e8f0";
+        }
+      });
+      typeRow.appendChild(btn);
+    }
+    this.textarea = document.createElement("textarea");
+    this.textarea.style.cssText = `
+      width:100%;min-height:72px;max-height:152px;
+      padding:10px 12px;border-radius:12px;
+      border:1px solid #e2e8f0;
+      background:rgba(255,255,255,0.85);
+      color:#0f172a;font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;line-height:1.5;resize:vertical;
+      outline:none;transition:all 0.2s ease;
+      box-sizing:border-box;
+    `;
+    this.textarea.placeholder = "D\xE9crivez votre retour...";
+    this.textarea.setAttribute("aria-label", "Message de feedback");
+    const hint = el("div", {
+      style: `
+        font-size:11px;color:#94a3b8;
+        text-align:right;margin-top:4px;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        letter-spacing:0.01em;
+      `
+    });
+    const isMac = navigator.platform.includes("Mac");
+    setText(hint, isMac ? "\u2318+Entr\xE9e pour envoyer" : "Ctrl+Entr\xE9e pour envoyer");
+    this.textarea.addEventListener("focus", () => {
+      this.textarea.style.borderColor = this.colors.accent;
+      this.textarea.style.boxShadow = `0 0 0 3px ${this.colors.accent}14`;
+      this.textarea.style.background = "#fff";
+    });
+    this.textarea.addEventListener("blur", () => {
+      this.textarea.style.borderColor = "#e2e8f0";
+      this.textarea.style.boxShadow = "none";
+      this.textarea.style.background = "rgba(255,255,255,0.85)";
+    });
+    this.textarea.addEventListener("input", () => {
+      this.updateSubmitState();
+    });
+    this.textarea.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.submit();
+      }
+      if (e.key === "Escape") {
+        this.cancel();
+      }
+    });
+    const btnRow = el("div", { style: "display:flex;justify-content:flex-end;gap:8px;margin-top:12px;" });
+    const cancelBtn = document.createElement("button");
+    cancelBtn.style.cssText = `
+      height:34px;padding:0 16px;border-radius:9999px;
+      border:1px solid #e2e8f0;
+      background:rgba(255,255,255,0.8);
+      color:#64748b;font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;font-weight:500;cursor:pointer;
+      transition:all 0.2s ease;
+    `;
+    setText(cancelBtn, "Annuler");
+    cancelBtn.addEventListener("click", () => this.cancel());
+    cancelBtn.addEventListener("mouseenter", () => {
+      cancelBtn.style.borderColor = this.colors.accent;
+      cancelBtn.style.color = this.colors.accent;
+    });
+    cancelBtn.addEventListener("mouseleave", () => {
+      cancelBtn.style.borderColor = "#e2e8f0";
+      cancelBtn.style.color = "#64748b";
+    });
+    this.submitBtn = document.createElement("button");
+    this.submitBtn.style.cssText = `
+      height:34px;padding:0 18px;border-radius:9999px;
+      border:none;background:${this.colors.accentGradient};
+      color:#fff;font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;font-weight:600;cursor:pointer;
+      opacity:0.35;pointer-events:none;
+      transition:all 0.2s ease;
+      box-shadow:0 2px 8px ${this.colors.accentGlow};
+    `;
+    setText(this.submitBtn, "Envoyer");
+    this.submitBtn.addEventListener("click", () => this.submit());
+    btnRow.appendChild(cancelBtn);
+    btnRow.appendChild(this.submitBtn);
+    this.root.appendChild(typeRow);
+    this.root.appendChild(this.textarea);
+    this.root.appendChild(hint);
+    this.root.appendChild(btnRow);
+    document.body.appendChild(this.root);
+  }
+  colors;
+  root;
+  selectedType = null;
+  textarea;
+  submitBtn;
+  resolve = null;
+  /**
+   * Show the popup near a drawn rectangle and return the user's input.
+   * Returns null if cancelled.
+   */
+  show(rectBounds) {
+    return new Promise((resolve) => {
+      this.resolve = resolve;
+      this.selectedType = null;
+      this.textarea.value = "";
+      this.updateSubmitState();
+      this.resetTypeButtons();
+      let top = rectBounds.bottom + 8;
+      let left = rectBounds.left;
+      if (top + 220 > window.innerHeight) {
+        top = rectBounds.top - 220 - 8;
+      }
+      if (left + 300 > window.innerWidth) {
+        left = rectBounds.right - 300;
+      }
+      left = Math.max(8, left);
+      top = Math.max(8, top);
+      this.root.style.top = `${top}px`;
+      this.root.style.left = `${left}px`;
+      this.root.style.display = "block";
+      requestAnimationFrame(() => {
+        this.root.style.opacity = "1";
+        this.root.style.transform = "translateY(0) scale(1)";
+        this.textarea.focus();
+      });
+    });
+  }
+  selectType(type, container) {
+    this.selectedType = type;
+    const buttons = container.querySelectorAll("button");
+    for (const btn of buttons) {
+      const isActive = btn.dataset.type === type;
+      const color = getTypeColor(btn.dataset.type ?? "", this.colors);
+      const bgColor = getTypeBgColor(btn.dataset.type ?? "", this.colors);
+      btn.style.background = isActive ? bgColor : "rgba(255,255,255,0.8)";
+      btn.style.borderColor = isActive ? color + "60" : "#e2e8f0";
+      btn.style.color = isActive ? color : "#64748b";
+      btn.style.fontWeight = isActive ? "600" : "500";
+    }
+    this.updateSubmitState();
+  }
+  resetTypeButtons() {
+    const buttons = this.root.querySelectorAll("button[data-type]");
+    for (const btn of buttons) {
+      btn.style.background = "rgba(255,255,255,0.8)";
+      btn.style.borderColor = "#e2e8f0";
+      btn.style.color = "#64748b";
+      btn.style.fontWeight = "500";
+    }
+  }
+  updateSubmitState() {
+    const enabled = this.selectedType !== null && this.textarea.value.trim().length > 0;
+    this.submitBtn.style.opacity = enabled ? "1" : "0.35";
+    this.submitBtn.style.pointerEvents = enabled ? "auto" : "none";
+  }
+  submit() {
+    if (!this.selectedType || !this.textarea.value.trim()) return;
+    this.resolve?.({ type: this.selectedType, message: this.textarea.value.trim() });
+    this.resolve = null;
+    this.hideElement();
+  }
+  cancel() {
+    this.resolve?.(null);
+    this.resolve = null;
+    this.hideElement();
+  }
+  hideElement() {
+    this.root.style.opacity = "0";
+    this.root.style.transform = "translateY(8px) scale(0.98)";
+    setTimeout(() => {
+      this.root.style.display = "none";
+    }, 250);
+  }
+  destroy() {
+    this.root.remove();
+  }
+};
+
+// src/annotator.ts
+var Annotator = class {
+  constructor(config2, colors, bus) {
+    this.config = config2;
+    this.colors = colors;
+    this.bus = bus;
+    this.popup = new Popup(colors);
+    this.bus.on("annotation:start", () => this.activate());
+  }
+  config;
+  colors;
+  bus;
+  overlay = null;
+  toolbar = null;
+  drawingRect = null;
+  startX = 0;
+  startY = 0;
+  isDrawing = false;
+  isActive = false;
+  popup;
+  savedOverflow = "";
+  activate() {
+    if (this.isActive) return;
+    this.isActive = true;
+    this.config.onAnnotationStart?.();
+    this.savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    this.overlay = el("div", {
+      style: `
+        position:fixed;inset:0;
+        z-index:2147483646;
+        background:rgba(15, 23, 42, 0.04);
+        cursor:crosshair;
+      `
+    });
+    this.toolbar = el("div", {
+      style: `
+        position:fixed;top:0;left:0;right:0;
+        z-index:2147483647;
+        height:52px;
+        background:rgba(255, 255, 255, 0.82);
+        backdrop-filter:blur(24px);
+        -webkit-backdrop-filter:blur(24px);
+        border-bottom:1px solid rgba(255, 255, 255, 0.35);
+        display:flex;align-items:center;justify-content:center;gap:16px;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        font-size:14px;color:#0f172a;
+        box-shadow:0 4px 16px rgba(0,0,0,0.06);
+        -webkit-font-smoothing:antialiased;
+      `
+    });
+    const dot = el("span", {
+      style: `
+        width:8px;height:8px;border-radius:50%;
+        background:${this.colors.accent};
+        box-shadow:0 0 8px ${this.colors.accentGlow};
+        animation:pulse 1.5s ease-in-out infinite;
+      `
+    });
+    const style = document.createElement("style");
+    style.textContent = `@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}`;
+    this.toolbar.appendChild(style);
+    const instruction = el("span", { style: "font-weight:500;letter-spacing:-0.01em;" });
+    setText(instruction, "Tracez un rectangle sur la zone \xE0 commenter");
+    const cancelBtn = document.createElement("button");
+    cancelBtn.style.cssText = `
+      height:34px;padding:0 18px;border-radius:9999px;
+      border:1px solid #e2e8f0;
+      background:rgba(255,255,255,0.8);
+      color:#64748b;font-family:"Inter",system-ui,-apple-system,sans-serif;
+      font-size:13px;font-weight:500;cursor:pointer;
+      transition:all 0.2s ease;
+    `;
+    setText(cancelBtn, "Annuler");
+    cancelBtn.addEventListener("click", () => this.deactivate());
+    cancelBtn.addEventListener("mouseenter", () => {
+      cancelBtn.style.borderColor = "#ef4444";
+      cancelBtn.style.color = "#ef4444";
+      cancelBtn.style.background = "rgba(239,68,68,0.06)";
+    });
+    cancelBtn.addEventListener("mouseleave", () => {
+      cancelBtn.style.borderColor = "#e2e8f0";
+      cancelBtn.style.color = "#64748b";
+      cancelBtn.style.background = "rgba(255,255,255,0.8)";
+    });
+    this.toolbar.appendChild(dot);
+    this.toolbar.appendChild(instruction);
+    this.toolbar.appendChild(cancelBtn);
+    this.overlay.addEventListener("mousedown", this.onMouseDown);
+    this.overlay.addEventListener("mousemove", this.onMouseMove);
+    this.overlay.addEventListener("mouseup", this.onMouseUp);
+    document.addEventListener("keydown", this.onKeyDown);
+    document.body.appendChild(this.overlay);
+    document.body.appendChild(this.toolbar);
+  }
+  deactivate() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.isDrawing = false;
+    document.body.style.overflow = this.savedOverflow;
+    document.removeEventListener("keydown", this.onKeyDown);
+    this.overlay?.remove();
+    this.toolbar?.remove();
+    this.drawingRect?.remove();
+    this.overlay = null;
+    this.toolbar = null;
+    this.drawingRect = null;
+    this.config.onAnnotationEnd?.();
+    this.bus.emit("annotation:end");
+  }
+  onKeyDown = (e) => {
+    if (e.key === "Escape") this.deactivate();
+  };
+  onMouseDown = (e) => {
+    this.isDrawing = true;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.drawingRect?.remove();
+    this.drawingRect = el("div", {
+      style: `
+        position:fixed;
+        border:2px solid ${this.colors.accent};
+        background:${this.colors.accent}12;
+        pointer-events:none;
+        border-radius:8px;
+        box-shadow:0 0 16px ${this.colors.accentGlow};
+        transition:box-shadow 0.15s ease;
+      `
+    });
+    this.overlay?.appendChild(this.drawingRect);
+  };
+  onMouseMove = (e) => {
+    if (!this.isDrawing || !this.drawingRect) return;
+    const x = Math.min(e.clientX, this.startX);
+    const y = Math.min(e.clientY, this.startY);
+    const w = Math.abs(e.clientX - this.startX);
+    const h = Math.abs(e.clientY - this.startY);
+    this.drawingRect.style.left = `${x}px`;
+    this.drawingRect.style.top = `${y}px`;
+    this.drawingRect.style.width = `${w}px`;
+    this.drawingRect.style.height = `${h}px`;
+  };
+  onMouseUp = async (e) => {
+    if (!this.isDrawing || !this.drawingRect) return;
+    this.isDrawing = false;
+    const x = Math.min(e.clientX, this.startX);
+    const y = Math.min(e.clientY, this.startY);
+    const w = Math.abs(e.clientX - this.startX);
+    const h = Math.abs(e.clientY - this.startY);
+    if (w < 10 || h < 10) {
+      this.drawingRect.remove();
+      this.drawingRect = null;
+      return;
+    }
+    const rectBounds = new DOMRect(x, y, w, h);
+    const result = await this.popup.show(rectBounds);
+    if (!result) {
+      this.drawingRect?.remove();
+      this.drawingRect = null;
+      return;
+    }
+    const annotation = this.buildAnnotation(rectBounds);
+    this.drawingRect?.remove();
+    this.drawingRect = null;
+    this.deactivate();
+    this.bus.emit("annotation:complete", {
+      annotation,
+      type: result.type,
+      message: result.message
+    });
+  };
+  /**
+   * Build an AnnotationPayload from a drawn rectangle.
+   * Temporarily hides the overlay to access the real DOM underneath.
+   */
+  buildAnnotation(rectBounds) {
+    if (this.overlay) this.overlay.style.pointerEvents = "none";
+    const anchorElement = findAnchorElement(rectBounds);
+    if (this.overlay) this.overlay.style.pointerEvents = "auto";
+    const anchor = generateAnchor(anchorElement);
+    const anchorBounds = anchorElement.getBoundingClientRect();
+    const rect = rectToPercentages(rectBounds, anchorBounds);
+    return {
+      anchor,
+      rect,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY,
+      viewportW: window.innerWidth,
+      viewportH: window.innerHeight,
+      devicePixelRatio: window.devicePixelRatio
+    };
+  }
+  destroy() {
+    this.deactivate();
+    this.popup.destroy();
+  }
+};
+
+// src/api-client.ts
+var MAX_RETRIES = 3;
+var TIMEOUT_MS = 1e4;
+var RETRY_QUEUE_KEY = "siteping_retry_queue";
+async function resilientFetch(url, init, retries = MAX_RETRIES) {
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), TIMEOUT_MS);
+    try {
+      const response = await fetch(url, {
+        ...init,
+        signal: controller.signal
+      });
+      clearTimeout(timeout);
+      if (response.ok || response.status >= 400 && response.status < 500) {
+        return response;
+      }
+      if (attempt === retries) return response;
+    } catch (error) {
+      clearTimeout(timeout);
+      if (attempt === retries) throw error;
+    }
+    const baseDelay = 1e3 * 2 ** attempt;
+    const jitter = Math.random() * 1e3 - 500;
+    await new Promise((r) => setTimeout(r, baseDelay + jitter));
+  }
+  throw new Error("Max retries exceeded");
+}
+function queueForRetry(endpoint, payload) {
+  try {
+    const raw = localStorage.getItem(RETRY_QUEUE_KEY);
+    const queue = raw ? JSON.parse(raw) : [];
+    queue.push({ endpoint, payload });
+    localStorage.setItem(RETRY_QUEUE_KEY, JSON.stringify(queue));
+  } catch {
+  }
+}
+async function flushRetryQueue(endpoint) {
+  try {
+    const raw = localStorage.getItem(RETRY_QUEUE_KEY);
+    if (!raw) return;
+    const queue = JSON.parse(raw);
+    const toRetry = queue.filter((e) => e.endpoint === endpoint);
+    if (toRetry.length === 0) return;
+    const failed = [];
+    for (const entry of toRetry) {
+      try {
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(entry.payload)
+        });
+        if (!res.ok) failed.push(entry);
+      } catch {
+        failed.push(entry);
+      }
+    }
+    const remaining = queue.filter((e) => e.endpoint !== endpoint).concat(failed);
+    if (remaining.length > 0) {
+      localStorage.setItem(RETRY_QUEUE_KEY, JSON.stringify(remaining));
+    } else {
+      localStorage.removeItem(RETRY_QUEUE_KEY);
+    }
+  } catch {
+  }
+}
+var ApiClient = class {
+  constructor(endpoint) {
+    this.endpoint = endpoint;
+  }
+  endpoint;
+  async sendFeedback(payload) {
+    try {
+      const response = await resilientFetch(this.endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) {
+        const text = await response.text().catch(() => "Unknown error");
+        throw new Error(`Failed to send feedback: ${response.status} ${text}`);
+      }
+      return await response.json();
+    } catch (error) {
+      queueForRetry(this.endpoint, payload);
+      throw error;
+    }
+  }
+  async getFeedbacks(projectName, options) {
+    const params = new URLSearchParams({ projectName });
+    if (options?.page) params.set("page", String(options.page));
+    if (options?.limit) params.set("limit", String(options.limit));
+    if (options?.type) params.set("type", options.type);
+    if (options?.status) params.set("status", options.status);
+    if (options?.search) params.set("search", options.search);
+    const response = await resilientFetch(`${this.endpoint}?${params.toString()}`, { method: "GET" });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch feedbacks: ${response.status}`);
+    }
+    return await response.json();
+  }
+  async resolveFeedback(id2, resolved) {
+    const response = await resilientFetch(this.endpoint, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id: id2, status: resolved ? "resolved" : "open" })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to update feedback: ${response.status}`);
+    }
+    return await response.json();
+  }
+  async deleteFeedback(id2) {
+    const response = await resilientFetch(this.endpoint, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id: id2 })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to delete feedback: ${response.status}`);
+    }
+  }
+  async deleteAllFeedbacks(projectName) {
+    const response = await resilientFetch(this.endpoint, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ projectName, deleteAll: true })
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to delete all feedbacks: ${response.status}`);
+    }
+  }
+};
+
+// src/events.ts
+var EventBus = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(event, listener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    const set = this.listeners.get(event);
+    set.add(listener);
+    return () => {
+      set.delete(listener);
+    };
+  }
+  emit(event, ...args) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const fn of set) {
+      try {
+        fn(...args);
+      } catch (err) {
+        console.error(`[siteping] Error in event listener for "${String(event)}":`, err);
+      }
+    }
+  }
+  removeAll() {
+    this.listeners.clear();
+  }
+};
+
+// src/fab.ts
+var ITEM_GAP = 54;
+var Fab = class {
+  constructor(shadowRoot, config2, bus) {
+    this.bus = bus;
+    const position = config2.position ?? "bottom-right";
+    const isRight = position === "bottom-right";
+    this.items = [
+      { id: "chat", icon: ICON_CHAT, label: "Messages" },
+      { id: "annotate", icon: ICON_ANNOTATE, label: "Annoter" },
+      { id: "toggle-annotations", icon: ICON_EYE, iconAlt: ICON_EYE_OFF, label: "Annotations" }
+    ];
+    this.fab = document.createElement("button");
+    this.fab.className = `sp-fab sp-fab--${position} sp-anim-fab-in`;
+    this.fab.style.position = "fixed";
+    this.fab.appendChild(parseSvg(ICON_SITEPING));
+    this.fab.setAttribute("aria-label", "Siteping \u2014 Menu feedback");
+    this.fab.setAttribute("aria-expanded", "false");
+    this.fab.addEventListener("click", () => this.toggle());
+    this.radialContainer = document.createElement("div");
+    this.radialContainer.className = `sp-radial sp-radial--${position}`;
+    this.radialContainer.setAttribute("role", "menu");
+    for (let i = 0; i < this.items.length; i++) {
+      const item = this.items[i];
+      const btn = document.createElement("button");
+      btn.className = "sp-radial-item";
+      btn.style.setProperty("--sp-i", String(i));
+      btn.appendChild(parseSvg(item.icon));
+      btn.setAttribute("role", "menuitem");
+      btn.setAttribute("aria-label", item.label);
+      btn.dataset.itemId = item.id;
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.handleItemClick(item.id);
+      });
+      const label = document.createElement("span");
+      label.className = "sp-radial-label";
+      label.textContent = item.label;
+      label.style.cssText = isRight ? "position:absolute; right:54px; top:50%; transform:translateY(-50%); white-space:nowrap;" : "position:absolute; left:54px; top:50%; transform:translateY(-50%); white-space:nowrap;";
+      btn.appendChild(label);
+      this.radialContainer.appendChild(btn);
+    }
+    this.root = document.createElement("div");
+    this.root.appendChild(this.radialContainer);
+    this.root.appendChild(this.fab);
+    shadowRoot.appendChild(this.root);
+    const host = shadowRoot.host;
+    this.onDocumentClick = (e) => {
+      if (this.isOpen && !e.composedPath().includes(host)) {
+        this.close();
+      }
+    };
+    document.addEventListener("click", this.onDocumentClick);
+    this.fab.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.isOpen) this.close();
+    });
+  }
+  bus;
+  root;
+  fab;
+  radialContainer;
+  badgeEl = null;
+  isOpen = false;
+  annotationsVisible = true;
+  items;
+  onDocumentClick;
+  /** Update the badge count. Pass 0 to hide. */
+  updateBadge(count) {
+    if (count <= 0) {
+      this.badgeEl?.remove();
+      this.badgeEl = null;
+      return;
+    }
+    if (!this.badgeEl) {
+      this.badgeEl = document.createElement("span");
+      this.badgeEl.className = "sp-fab-badge";
+      this.fab.appendChild(this.badgeEl);
+    }
+    setText(this.badgeEl, count > 99 ? "99+" : String(count));
+  }
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  open() {
+    this.isOpen = true;
+    this.setFabIcon(ICON_CLOSE);
+    this.fab.setAttribute("aria-expanded", "true");
+    const buttons = this.radialContainer.querySelectorAll(".sp-radial-item");
+    buttons.forEach((btn, i) => {
+      const y = -(16 + ITEM_GAP * (i + 1));
+      btn.style.transform = `translate(0px, ${y}px) scale(1)`;
+      btn.classList.add("sp-radial-item--open");
+    });
+  }
+  close() {
+    this.isOpen = false;
+    this.setFabIcon(ICON_SITEPING);
+    this.fab.setAttribute("aria-expanded", "false");
+    const buttons = this.radialContainer.querySelectorAll(".sp-radial-item");
+    buttons.forEach((btn) => {
+      btn.style.transform = "translate(0, 0) scale(0.8)";
+      btn.classList.remove("sp-radial-item--open");
+    });
+  }
+  setFabIcon(svgStr) {
+    const badge = this.badgeEl;
+    this.fab.replaceChildren(parseSvg(svgStr));
+    if (badge) this.fab.appendChild(badge);
+  }
+  handleItemClick(id2) {
+    this.close();
+    switch (id2) {
+      case "chat":
+        this.bus.emit("panel:toggle", true);
+        break;
+      case "annotate":
+        this.bus.emit("annotation:start");
+        break;
+      case "toggle-annotations": {
+        this.annotationsVisible = !this.annotationsVisible;
+        this.bus.emit("annotations:toggle", this.annotationsVisible);
+        const btn = this.radialContainer.querySelector('[data-item-id="toggle-annotations"]');
+        if (btn) {
+          btn.replaceChildren(parseSvg(this.annotationsVisible ? ICON_EYE : ICON_EYE_OFF));
+        }
+        break;
+      }
+    }
+  }
+  destroy() {
+    document.removeEventListener("click", this.onDocumentClick);
+    this.root.remove();
+  }
+};
+
+// src/identity.ts
+var STORAGE_KEY = "siteping_identity";
+function getIdentity() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed.name && parsed.email) return parsed;
+    return null;
+  } catch {
+    return null;
+  }
+}
+function saveIdentity(identity) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(identity));
+  } catch {
+  }
+}
+
+// src/dom/fuzzy.ts
+function editDistance(a, b) {
+  if (a === b) return 0;
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+  if (a.length > b.length) {
+    const t = a;
+    a = b;
+    b = t;
+  }
+  const aLen = a.length;
+  const bLen = b.length;
+  let prev = new Array(aLen + 1);
+  for (let k = 0; k <= aLen; k++) prev[k] = k;
+  let curr = new Array(aLen + 1);
+  for (let j = 1; j <= bLen; j++) {
+    curr[0] = j;
+    for (let i = 1; i <= aLen; i++) {
+      curr[i] = a[i - 1] === b[j - 1] ? prev[i - 1] : 1 + Math.min(prev[i - 1], prev[i], curr[i - 1]);
+    }
+    const tmp = prev;
+    prev = curr;
+    curr = tmp;
+  }
+  return prev[aLen];
+}
+function similarity(a, b) {
+  if (a === b) return 1;
+  const maxLen = Math.max(a.length, b.length);
+  if (maxLen === 0) return 1;
+  return 1 - editDistance(a, b) / maxLen;
+}
+function fuzzyIncludes(haystack, needle, minScore = 0.6) {
+  if (!needle || !haystack) return 0;
+  if (haystack.includes(needle)) return 1;
+  const nLen = needle.length;
+  if (nLen > haystack.length) {
+    const score = similarity(haystack, needle);
+    return score >= minScore ? score : 0;
+  }
+  let best = 0;
+  const capped = haystack.length > 500 ? haystack.slice(0, 500) : haystack;
+  const limit = capped.length - nLen;
+  for (let i = 0; i <= limit; i++) {
+    const window2 = capped.slice(i, i + nLen);
+    const score = similarity(window2, needle);
+    if (score > best) best = score;
+    if (best >= 0.95) break;
+  }
+  return best >= minScore ? best : 0;
+}
+
+// src/dom/resolver.ts
+var MAX_SCAN_CANDIDATES = 300;
+var TEXT_MATCH_THRESHOLD = 0.3;
+function textMatches(el2, anchor) {
+  if (!anchor.textSnippet) return true;
+  const text = (el2.textContent?.trim() ?? "").slice(0, 500);
+  return fuzzyIncludes(text, anchor.textSnippet, 0.5) > TEXT_MATCH_THRESHOLD;
+}
+function resolveAnchor(anchor) {
+  if (anchor.elementId) {
+    const el2 = document.getElementById(anchor.elementId);
+    if (el2 && el2.tagName === anchor.elementTag && textMatches(el2, anchor)) {
+      return { element: el2, confidence: 1, strategy: "id" };
+    }
+  }
+  try {
+    const el2 = document.querySelector(anchor.cssSelector);
+    if (el2 && el2.tagName === anchor.elementTag && textMatches(el2, anchor)) {
+      return { element: el2, confidence: 0.95, strategy: "css" };
+    }
+  } catch {
+  }
+  try {
+    const result = document.evaluate(anchor.xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+    const el2 = result.singleNodeValue;
+    if (el2 instanceof Element && el2.tagName === anchor.elementTag && textMatches(el2, anchor)) {
+      return { element: el2, confidence: 0.9, strategy: "xpath" };
+    }
+  } catch {
+  }
+  return smartScan(anchor);
+}
+function smartScan(anchor) {
+  const tag = anchor.elementTag.toLowerCase();
+  const candidates = document.querySelectorAll(tag);
+  if (candidates.length === 0) return null;
+  let bestElement = null;
+  let bestScore = 0;
+  const limit = Math.min(candidates.length, MAX_SCAN_CANDIDATES);
+  for (let i = 0; i < limit; i++) {
+    const el2 = candidates[i];
+    const score = scoreCandidate(el2, anchor);
+    if (score > bestScore) {
+      bestScore = score;
+      bestElement = el2;
+      if (bestScore >= 0.85) break;
+    }
+  }
+  if (!bestElement || bestScore < 0.4) return null;
+  return {
+    element: bestElement,
+    confidence: Math.min(bestScore, 0.85),
+    strategy: "scan"
+  };
+}
+function scoreCandidate(candidate, anchor) {
+  let score = 0;
+  let totalWeight = 0;
+  const candidateText = (candidate.textContent?.trim() ?? "").slice(0, 500);
+  if (anchor.textSnippet) {
+    totalWeight += 40;
+    score += fuzzyIncludes(candidateText, anchor.textSnippet, 0.5) * 40;
+  }
+  if (anchor.fingerprint) {
+    totalWeight += 20;
+    score += scoreFingerprint(candidate, anchor.fingerprint) * 20;
+  }
+  if (anchor.textPrefix || anchor.textSuffix) {
+    totalWeight += 20;
+    let contextScore = 0;
+    let contextParts = 0;
+    if (anchor.textPrefix) {
+      const prevText = adjacentText(candidate, "before");
+      contextScore += prevText ? similarity(prevText, anchor.textPrefix) : 0;
+      contextParts++;
+    }
+    if (anchor.textSuffix) {
+      const nextText = adjacentText(candidate, "after");
+      contextScore += nextText ? similarity(nextText, anchor.textSuffix) : 0;
+      contextParts++;
+    }
+    if (contextParts > 0) {
+      score += contextScore / contextParts * 20;
+    }
+  }
+  if (anchor.neighborText) {
+    totalWeight += 20;
+    const candidateNeighbor = neighborText(candidate);
+    score += candidateNeighbor ? similarity(candidateNeighbor, anchor.neighborText) * 20 : 0;
+  }
+  return totalWeight > 0 ? score / totalWeight : 0;
+}
+function resolveAnnotation(anchor, rect) {
+  const resolution = resolveAnchor(anchor);
+  if (!resolution) return null;
+  const bounds = resolution.element.getBoundingClientRect();
+  const absoluteRect = new DOMRect(
+    bounds.x + rect.xPct * bounds.width,
+    bounds.y + rect.yPct * bounds.height,
+    rect.wPct * bounds.width,
+    rect.hPct * bounds.height
+  );
+  return {
+    element: resolution.element,
+    rect: absoluteRect,
+    confidence: resolution.confidence,
+    strategy: resolution.strategy
+  };
+}
+
+// src/markers.ts
+function toAnchorData(a) {
+  return {
+    cssSelector: a.cssSelector,
+    xpath: a.xpath,
+    textSnippet: a.textSnippet,
+    elementTag: a.elementTag,
+    elementId: a.elementId ?? void 0,
+    textPrefix: a.textPrefix,
+    textSuffix: a.textSuffix,
+    fingerprint: a.fingerprint,
+    neighborText: a.neighborText
+  };
+}
+function toRectData(a) {
+  return { xPct: a.xPct, yPct: a.yPct, wPct: a.wPct, hPct: a.hPct };
+}
+var MARKER_OFFSET = 13;
+function markerPosition(rect) {
+  return {
+    top: rect.top + window.scrollY - MARKER_OFFSET,
+    left: rect.right + window.scrollX - MARKER_OFFSET
+  };
+}
+function clusterMarker(cluster, i) {
+  return cluster.entries[i].elements[cluster.elementIndices[i]];
+}
+var HIGHLIGHT_FADE = 300;
+var REPOSITION_DEBOUNCE = 200;
+var LOW_CONFIDENCE_THRESHOLD = 0.7;
+var CLUSTER_DISTANCE = 28;
+var FAN_SPACING = 32;
+var MarkerManager = class {
+  constructor(colors, tooltip, bus) {
+    this.colors = colors;
+    this.tooltip = tooltip;
+    this.bus = bus;
+    this.container = el("div", {
+      style: "position:absolute;top:0;left:0;pointer-events:none;z-index:2147483646;"
+    });
+    this.container.id = "siteping-markers";
+    document.body.appendChild(this.container);
+    this.bus.on("annotations:toggle", (visible) => {
+      this.container.style.display = visible ? "block" : "none";
+    });
+    this.resizeHandler = () => this.scheduleReposition();
+    window.addEventListener("resize", this.resizeHandler, { passive: true });
+    this.mutationObserver = new MutationObserver((mutations) => {
+      const isWidgetMutation = mutations.every(
+        (m) => this.container.contains(m.target) || this.tooltip.contains(m.target)
+      );
+      if (!isWidgetMutation) this.scheduleReposition();
+    });
+    this.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: false,
+      characterData: false
+    });
+    this.onDocumentClickForClusters = (e) => {
+      if (this.container.contains(e.target)) return;
+      this.collapseAllClusters();
+    };
+    document.addEventListener("click", this.onDocumentClickForClusters);
+  }
+  colors;
+  tooltip;
+  bus;
+  container;
+  entries = [];
+  highlightElements = [];
+  pinnedFeedback = null;
+  onDocumentClick = null;
+  repositionTimer = null;
+  mutationObserver = null;
+  resizeHandler = null;
+  clusters = [];
+  onDocumentClickForClusters = null;
+  get count() {
+    return this.entries.length;
+  }
+  scheduleReposition() {
+    if (this.repositionTimer) return;
+    this.repositionTimer = setTimeout(() => {
+      this.repositionTimer = null;
+      this.repositionAll();
+    }, REPOSITION_DEBOUNCE);
+  }
+  repositionAll() {
+    for (const entry of this.entries) {
+      for (let i = 0; i < entry.feedback.annotations.length; i++) {
+        const markerEl = entry.elements[i];
+        if (!markerEl) continue;
+        const annotation = entry.feedback.annotations[i];
+        const resolved = resolveAnnotation(toAnchorData(annotation), toRectData(annotation));
+        if (!resolved) {
+          markerEl.style.display = "none";
+          continue;
+        }
+        const pos = markerPosition(resolved.rect);
+        entry.baseTop = pos.top;
+        entry.baseLeft = pos.left;
+        markerEl.style.display = "flex";
+        this.applyConfidenceStyle(markerEl, resolved.confidence, entry.feedback);
+      }
+    }
+    this.applyClusterPositions();
+  }
+  applyClusterPositions() {
+    for (const cluster of this.clusters) {
+      if (cluster.expanded) {
+        this.applyFanPositions(cluster);
+      } else {
+        this.applyStackPositions(cluster);
+      }
+    }
+  }
+  render(feedbacks) {
+    this.clear();
+    feedbacks.forEach((feedback, i) => {
+      const entry = this.buildEntry(feedback, i + 1);
+      this.entries.push(entry);
+    });
+    this.buildClusters();
+  }
+  addFeedback(feedback, index2) {
+    const entry = this.buildEntry(feedback, index2);
+    for (const m of entry.elements) {
+      m.style.animation = "sp-marker-in 0.35s cubic-bezier(0.34,1.56,0.64,1) both";
+    }
+    this.entries.push(entry);
+    this.buildClusters();
+  }
+  buildEntry(feedback, index2) {
+    const entry = { feedback, elements: [], baseTop: 0, baseLeft: 0 };
+    for (const annotation of feedback.annotations) {
+      const resolved = resolveAnnotation(toAnchorData(annotation), toRectData(annotation));
+      if (!resolved) continue;
+      const pos = markerPosition(resolved.rect);
+      entry.baseTop = pos.top;
+      entry.baseLeft = pos.left;
+      const marker = this.createMarker(index2, feedback, pos);
+      this.applyConfidenceStyle(marker, resolved.confidence, feedback);
+      this.container.appendChild(marker);
+      entry.elements.push(marker);
+    }
+    return entry;
+  }
+  buildClusters() {
+    for (const badge of this.container.querySelectorAll(".sp-cluster-badge")) {
+      badge.remove();
+    }
+    const allItems = [];
+    for (const entry of this.entries) {
+      for (let i = 0; i < entry.elements.length; i++) {
+        allItems.push({ entry, elIdx: i });
+      }
+    }
+    const used = /* @__PURE__ */ new Set();
+    this.clusters = [];
+    for (let i = 0; i < allItems.length; i++) {
+      if (used.has(i)) continue;
+      const cluster = {
+        entries: [allItems[i].entry],
+        elementIndices: [allItems[i].elIdx],
+        expanded: false
+      };
+      used.add(i);
+      for (let j = i + 1; j < allItems.length; j++) {
+        if (used.has(j)) continue;
+        const a = allItems[i].entry;
+        const b = allItems[j].entry;
+        const dist = Math.sqrt((a.baseLeft - b.baseLeft) ** 2 + (a.baseTop - b.baseTop) ** 2);
+        if (dist < CLUSTER_DISTANCE) {
+          cluster.entries.push(b);
+          cluster.elementIndices.push(allItems[j].elIdx);
+          used.add(j);
+        }
+      }
+      this.clusters.push(cluster);
+    }
+    for (const cluster of this.clusters) {
+      if (cluster.entries.length <= 1) continue;
+      this.applyStackPositions(cluster);
+      this.addClusterBadge(cluster);
+    }
+  }
+  applyStackPositions(cluster) {
+    const { baseTop, baseLeft } = cluster.entries[0];
+    const isSolo = cluster.entries.length <= 1;
+    for (let i = 0; i < cluster.entries.length; i++) {
+      const m = clusterMarker(cluster, i);
+      if (!m) continue;
+      m.style.top = `${baseTop + (isSolo ? 0 : i * 3)}px`;
+      m.style.left = `${baseLeft + (isSolo ? 0 : i * 3)}px`;
+      m.style.zIndex = String(i + 1);
+    }
+  }
+  applyFanPositions(cluster) {
+    const { baseTop, baseLeft } = cluster.entries[0];
+    const count = cluster.entries.length;
+    const totalWidth = (count - 1) * FAN_SPACING;
+    const startLeft = baseLeft - totalWidth / 2;
+    for (let i = 0; i < count; i++) {
+      const m = clusterMarker(cluster, i);
+      if (!m) continue;
+      m.style.top = `${baseTop}px`;
+      m.style.left = `${startLeft + i * FAN_SPACING}px`;
+      m.style.zIndex = String(10 + i);
+    }
+  }
+  addClusterBadge(cluster) {
+    const topMarker = clusterMarker(cluster, cluster.entries.length - 1);
+    if (!topMarker) return;
+    const badge = el("div", {
+      class: "sp-cluster-badge",
+      style: `
+        position:absolute;top:-6px;right:-6px;
+        min-width:16px;height:16px;padding:0 4px;
+        border-radius:9999px;
+        background:${this.colors.accent};color:#fff;
+        font-size:10px;font-weight:700;
+        display:flex;align-items:center;justify-content:center;
+        border:1.5px solid #fff;
+        pointer-events:none;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        line-height:1;
+      `
+    });
+    setText(badge, String(cluster.entries.length));
+    topMarker.appendChild(badge);
+  }
+  setBadgesVisible(cluster, visible) {
+    for (let i = 0; i < cluster.entries.length; i++) {
+      const badge = clusterMarker(cluster, i)?.querySelector(".sp-cluster-badge");
+      if (badge) badge.style.display = visible ? "flex" : "none";
+    }
+  }
+  findCluster(marker) {
+    for (const cluster of this.clusters) {
+      if (cluster.entries.length <= 1) continue;
+      for (let i = 0; i < cluster.entries.length; i++) {
+        if (clusterMarker(cluster, i) === marker) return cluster;
+      }
+    }
+    return null;
+  }
+  handleClusterClick(marker, e) {
+    const cluster = this.findCluster(marker);
+    if (!cluster) return false;
+    if (!cluster.expanded) {
+      e.stopPropagation();
+      this.collapseAllClusters();
+      cluster.expanded = true;
+      this.applyFanPositions(cluster);
+      this.setBadgesVisible(cluster, false);
+      return true;
+    }
+    return false;
+  }
+  collapseCluster(cluster) {
+    if (!cluster.expanded) return;
+    cluster.expanded = false;
+    this.applyStackPositions(cluster);
+    this.setBadgesVisible(cluster, true);
+  }
+  collapseAllClusters() {
+    for (const cluster of this.clusters) {
+      this.collapseCluster(cluster);
+    }
+  }
+  applyConfidenceStyle(marker, confidence, feedback) {
+    const isResolved = feedback.status === "resolved";
+    if (confidence < LOW_CONFIDENCE_THRESHOLD && !isResolved) {
+      marker.style.borderStyle = "dashed";
+      marker.style.opacity = "0.7";
+      marker.title = `Position approximative (confiance : ${Math.round(confidence * 100)}%)`;
+    } else {
+      marker.style.borderStyle = "solid";
+      marker.style.opacity = "1";
+      marker.title = "";
+    }
+  }
+  createMarker(number, feedback, pos) {
+    const typeColor = getTypeColor(feedback.type, this.colors);
+    const isResolved = feedback.status === "resolved";
+    const marker = el("div", {
+      style: `
+        position:absolute;
+        top:${pos.top}px;
+        left:${pos.left}px;
+        width:26px;height:26px;
+        border-radius:50%;
+        background:${isResolved ? "rgba(241,245,249,0.9)" : "rgba(255,255,255,0.92)"};
+        backdrop-filter:blur(12px);
+        -webkit-backdrop-filter:blur(12px);
+        border:2px solid ${isResolved ? "#cbd5e1" : typeColor};
+        display:flex;align-items:center;justify-content:center;
+        font-family:"Inter",system-ui,-apple-system,sans-serif;
+        font-size:11px;font-weight:700;
+        color:${isResolved ? "#94a3b8" : typeColor};
+        cursor:pointer;pointer-events:auto;
+        box-shadow:${isResolved ? "0 2px 8px rgba(0,0,0,0.06)" : `0 2px 12px ${typeColor}25, 0 2px 6px rgba(0,0,0,0.06)`};
+        transition:top 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.15s ease, box-shadow 0.15s ease;
+        user-select:none;
+        -webkit-font-smoothing:antialiased;
+      `
+    });
+    marker.dataset.feedbackId = feedback.id;
+    setText(marker, isResolved ? "\u2713" : String(number));
+    marker.addEventListener("mouseenter", () => {
+      marker.style.transform = "scale(1.2)";
+      marker.style.boxShadow = isResolved ? "0 4px 16px rgba(0,0,0,0.1)" : `0 4px 20px ${typeColor}35, 0 4px 12px rgba(0,0,0,0.08)`;
+      this.tooltip.show(feedback, marker.getBoundingClientRect());
+      if (!this.pinnedFeedback) this.showHighlight(feedback);
+    });
+    marker.addEventListener("mouseleave", () => {
+      marker.style.transform = "scale(1)";
+      marker.style.boxShadow = isResolved ? "0 2px 8px rgba(0,0,0,0.06)" : `0 2px 12px ${typeColor}25, 0 2px 6px rgba(0,0,0,0.06)`;
+      this.tooltip.scheduleHide();
+      if (!this.pinnedFeedback) this.clearHighlight();
+    });
+    marker.addEventListener("click", (e) => {
+      if (this.handleClusterClick(marker, e)) return;
+      this.pinHighlight(feedback);
+      this.bus.emit("panel:toggle", true);
+      marker.dispatchEvent(
+        new CustomEvent("sp-marker-click", {
+          detail: { feedbackId: feedback.id },
+          bubbles: true
+        })
+      );
+    });
+    return marker;
+  }
+  highlight(feedbackId) {
+    for (const entry of this.entries) {
+      if (entry.feedback.id === feedbackId) {
+        for (const markerEl of entry.elements) {
+          markerEl.style.animation = "sp-pulse-ring 0.7s ease-out";
+          markerEl.addEventListener(
+            "animationend",
+            () => {
+              markerEl.style.animation = "";
+            },
+            { once: true }
+          );
+        }
+      }
+    }
+  }
+  showHighlight(feedback) {
+    this.removeHighlightElements();
+    for (const annotation of feedback.annotations) {
+      const resolved = resolveAnnotation(toAnchorData(annotation), toRectData(annotation));
+      if (!resolved) continue;
+      const typeColor = getTypeColor(feedback.type, this.colors);
+      const rect = resolved.rect;
+      const highlight = el("div", {
+        style: `
+          position:absolute;
+          top:${rect.top + window.scrollY}px;
+          left:${rect.left + window.scrollX}px;
+          width:${rect.width}px;height:${rect.height}px;
+          border:2px solid ${typeColor};
+          background:${typeColor}0c;
+          border-radius:8px;
+          pointer-events:none;z-index:-1;
+          opacity:0;
+          box-shadow:0 0 16px ${typeColor}20;
+          transition:opacity ${HIGHLIGHT_FADE}ms ease;
+        `
+      });
+      this.container.appendChild(highlight);
+      this.highlightElements.push(highlight);
+      highlight.offsetHeight;
+      highlight.style.opacity = "1";
+    }
+  }
+  pinHighlight(feedback) {
+    this.unpinHighlight();
+    this.showHighlight(feedback);
+    this.pinnedFeedback = feedback;
+    this.onDocumentClick = (e) => {
+      if (this.container.contains(e.target)) return;
+      this.unpinHighlight();
+    };
+    document.addEventListener("click", this.onDocumentClick, { capture: true });
+  }
+  unpinHighlight() {
+    if (this.onDocumentClick) {
+      document.removeEventListener("click", this.onDocumentClick, { capture: true });
+      this.onDocumentClick = null;
+    }
+    this.pinnedFeedback = null;
+    this.clearHighlight();
+  }
+  clearHighlight() {
+    for (const h of this.highlightElements) {
+      h.style.opacity = "0";
+      setTimeout(() => h.remove(), HIGHLIGHT_FADE);
+    }
+    this.highlightElements = [];
+  }
+  removeHighlightElements() {
+    for (const h of this.highlightElements) h.remove();
+    this.highlightElements = [];
+  }
+  clear() {
+    this.unpinHighlight();
+    this.container.replaceChildren();
+    this.entries = [];
+    this.clusters = [];
+  }
+  destroy() {
+    this.unpinHighlight();
+    if (this.repositionTimer) clearTimeout(this.repositionTimer);
+    if (this.resizeHandler) window.removeEventListener("resize", this.resizeHandler);
+    if (this.onDocumentClickForClusters) document.removeEventListener("click", this.onDocumentClickForClusters);
+    this.mutationObserver?.disconnect();
+    this.container.remove();
+  }
+};
+
+// src/panel.ts
+var TYPE_LABELS = {
+  question: "Question",
+  changement: "Changement",
+  bug: "Bug",
+  autre: "Autre"
+};
+var Panel = class {
+  constructor(shadowRoot, colors, bus, apiClient, projectName, markers) {
+    this.colors = colors;
+    this.bus = bus;
+    this.apiClient = apiClient;
+    this.projectName = projectName;
+    this.markers = markers;
+    this.root = el("div", { class: "sp-panel" });
+    const header = el("div", { class: "sp-panel-header" });
+    const title = el("span", { class: "sp-panel-title" });
+    setText(title, "Feedbacks");
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "sp-panel-close";
+    closeBtn.setAttribute("aria-label", "Fermer le panneau");
+    closeBtn.appendChild(parseSvg(ICON_CLOSE));
+    closeBtn.addEventListener("click", () => this.close());
+    this.deleteAllBtn = document.createElement("button");
+    this.deleteAllBtn.className = "sp-btn-delete-all";
+    this.deleteAllBtn.setAttribute("aria-label", "Tout supprimer");
+    this.deleteAllBtn.appendChild(parseSvg(ICON_TRASH));
+    const deleteAllLabel = document.createElement("span");
+    setText(deleteAllLabel, " Tout supprimer");
+    this.deleteAllBtn.appendChild(deleteAllLabel);
+    this.deleteAllBtn.addEventListener("click", () => this.confirmDeleteAll());
+    const headerRight = el("div", { class: "sp-panel-header-right" });
+    headerRight.appendChild(this.deleteAllBtn);
+    headerRight.appendChild(closeBtn);
+    header.appendChild(title);
+    header.appendChild(headerRight);
+    const filters = el("div", { class: "sp-filters" });
+    const searchWrap = el("div", { class: "sp-search-wrap" });
+    const searchIcon = parseSvg(ICON_SEARCH);
+    searchIcon.setAttribute("class", "sp-search-icon");
+    this.searchInput = document.createElement("input");
+    this.searchInput.type = "text";
+    this.searchInput.className = "sp-search";
+    this.searchInput.placeholder = "Rechercher...";
+    this.searchInput.setAttribute("aria-label", "Rechercher dans les feedbacks");
+    this.searchInput.addEventListener("input", () => {
+      if (this.searchTimeout) clearTimeout(this.searchTimeout);
+      this.searchTimeout = setTimeout(() => this.loadFeedbacks(), 200);
+    });
+    searchWrap.appendChild(searchIcon);
+    searchWrap.appendChild(this.searchInput);
+    const chips = el("div", { class: "sp-chips" });
+    const chipOptions = [
+      { value: "all", label: "Tous" },
+      { value: "question", label: "Question" },
+      { value: "changement", label: "Changement" },
+      { value: "bug", label: "Bug" },
+      { value: "autre", label: "Autre" }
+    ];
+    for (const option of chipOptions) {
+      const chip = document.createElement("button");
+      chip.className = `sp-chip ${option.value === "all" ? "sp-chip--active" : ""}`;
+      if (option.value !== "all") {
+        chip.style.borderColor = getTypeColor(option.value, this.colors);
+      }
+      setText(chip, option.label);
+      chip.dataset.filter = option.value;
+      chip.addEventListener("click", () => this.toggleFilter(option.value, chips));
+      chips.appendChild(chip);
+    }
+    filters.appendChild(searchWrap);
+    filters.appendChild(chips);
+    this.listContainer = el("div", { class: "sp-list" });
+    this.root.appendChild(header);
+    this.root.appendChild(filters);
+    this.root.appendChild(this.listContainer);
+    shadowRoot.appendChild(this.root);
+    this.bus.on("panel:toggle", (open) => {
+      open ? this.open() : this.close();
+    });
+    shadowRoot.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.isOpen) this.close();
+    });
+    this.onMarkerClick = ((e) => {
+      this.scrollToFeedback(e.detail.feedbackId);
+    });
+    document.addEventListener("sp-marker-click", this.onMarkerClick);
+  }
+  colors;
+  bus;
+  apiClient;
+  projectName;
+  markers;
+  root;
+  listContainer;
+  searchInput;
+  deleteAllBtn;
+  activeFilters = /* @__PURE__ */ new Set(["all"]);
+  feedbacks = [];
+  isOpen = false;
+  searchTimeout = null;
+  onMarkerClick;
+  async open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.root.classList.add("sp-panel--open");
+    this.bus.emit("open");
+    await this.loadFeedbacks();
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.root.classList.remove("sp-panel--open");
+    this.bus.emit("close");
+  }
+  showLoading() {
+    this.listContainer.replaceChildren();
+    const loading = el("div", { class: "sp-loading" });
+    const spinner = el("div", { class: "sp-spinner" });
+    loading.appendChild(spinner);
+    this.listContainer.appendChild(loading);
+  }
+  showError() {
+    this.listContainer.replaceChildren();
+    const empty = el("div", { class: "sp-empty" });
+    const text = el("div", { class: "sp-empty-text" });
+    setText(text, "Erreur de chargement");
+    const retryBtn = document.createElement("button");
+    retryBtn.className = "sp-btn-ghost";
+    retryBtn.style.marginTop = "8px";
+    setText(retryBtn, "R\xE9essayer");
+    retryBtn.addEventListener("click", () => this.loadFeedbacks());
+    empty.appendChild(text);
+    empty.appendChild(retryBtn);
+    this.listContainer.appendChild(empty);
+  }
+  async loadFeedbacks() {
+    const search = this.searchInput.value.trim() || void 0;
+    const typeFilter = this.activeFilters.has("all") ? void 0 : Array.from(this.activeFilters)[0];
+    const options = { limit: 50 };
+    if (typeFilter) options.type = typeFilter;
+    if (search) options.search = search;
+    const hasContent = this.feedbacks.length > 0;
+    if (!hasContent) this.showLoading();
+    try {
+      const { feedbacks } = await this.apiClient.getFeedbacks(this.projectName, options);
+      this.feedbacks = feedbacks;
+      this.renderList();
+      this.markers.render(feedbacks);
+    } catch (error) {
+      if (!hasContent) this.showError();
+      this.bus.emit("feedback:error", error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+  renderList() {
+    this.listContainer.replaceChildren();
+    if (this.feedbacks.length === 0) {
+      const empty = el("div", { class: "sp-empty" });
+      const emptyText = el("div", { class: "sp-empty-text" });
+      setText(emptyText, "Aucun feedback pour le moment");
+      empty.appendChild(emptyText);
+      this.listContainer.appendChild(empty);
+      return;
+    }
+    this.feedbacks.forEach((feedback, index2) => {
+      const card = this.createCard(feedback, index2 + 1);
+      card.style.setProperty("--sp-card-i", String(index2));
+      this.listContainer.appendChild(card);
+    });
+  }
+  createCard(feedback, number) {
+    const isResolved = feedback.status === "resolved";
+    const typeColor = getTypeColor(feedback.type, this.colors);
+    const card = el("div", {
+      class: `sp-card ${isResolved ? "sp-card--resolved" : ""}`
+    });
+    card.dataset.feedbackId = feedback.id;
+    const bar = el("div", { class: "sp-card-bar" });
+    bar.style.background = isResolved ? "#9ca3af" : typeColor;
+    const body = el("div", { class: "sp-card-body" });
+    const header = el("div", { class: "sp-card-header" });
+    const num = el("span", { class: "sp-card-number" });
+    setText(num, `#${number}`);
+    const badge = el("span", { class: "sp-badge" });
+    const typeBg = getTypeBgColor(feedback.type, this.colors);
+    badge.style.background = typeBg;
+    badge.style.color = typeColor;
+    setText(badge, TYPE_LABELS[feedback.type] ?? feedback.type);
+    const date = el("span", { class: "sp-card-date" });
+    setText(date, formatRelativeDate(feedback.createdAt));
+    header.appendChild(num);
+    header.appendChild(badge);
+    header.appendChild(date);
+    const message = el("div", { class: "sp-card-message" });
+    setText(message, feedback.message);
+    const expandBtn = document.createElement("button");
+    expandBtn.className = "sp-card-expand";
+    setText(expandBtn, "Voir plus");
+    expandBtn.style.display = "none";
+    expandBtn.setAttribute("aria-expanded", "false");
+    expandBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const isExpanded = message.classList.toggle("sp-card-message--expanded");
+      setText(expandBtn, isExpanded ? "Voir moins" : "Voir plus");
+      expandBtn.setAttribute("aria-expanded", String(isExpanded));
+    });
+    requestAnimationFrame(() => {
+      if (message.scrollHeight > message.clientHeight) {
+        expandBtn.style.display = "block";
+      }
+    });
+    const footer = el("div", { class: "sp-card-footer" });
+    const resolveBtn = document.createElement("button");
+    resolveBtn.className = "sp-btn-resolve";
+    if (isResolved) {
+      resolveBtn.appendChild(parseSvg(ICON_UNDO));
+      const span = document.createElement("span");
+      setText(span, " Rouvrir");
+      resolveBtn.appendChild(span);
+    } else {
+      resolveBtn.appendChild(parseSvg(ICON_CHECK));
+      const span = document.createElement("span");
+      setText(span, " R\xE9soudre");
+      resolveBtn.appendChild(span);
+    }
+    resolveBtn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      await this.toggleResolve(feedback, resolveBtn);
+    });
+    const deleteBtn = document.createElement("button");
+    deleteBtn.className = "sp-btn-delete";
+    deleteBtn.appendChild(parseSvg(ICON_TRASH));
+    const deleteLabel = document.createElement("span");
+    setText(deleteLabel, " Supprimer");
+    deleteBtn.appendChild(deleteLabel);
+    deleteBtn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      await this.deleteFeedback(feedback, deleteBtn);
+    });
+    footer.appendChild(resolveBtn);
+    footer.appendChild(deleteBtn);
+    body.appendChild(header);
+    body.appendChild(message);
+    body.appendChild(expandBtn);
+    body.appendChild(footer);
+    card.appendChild(bar);
+    card.appendChild(body);
+    card.addEventListener("mouseenter", () => {
+      this.markers.highlight(feedback.id);
+    });
+    card.addEventListener("click", () => {
+      if (feedback.annotations.length > 0) {
+        const ann = feedback.annotations[0];
+        window.scrollTo({ left: ann.scrollX, top: ann.scrollY, behavior: "smooth" });
+        this.markers.pinHighlight(feedback);
+      }
+    });
+    return card;
+  }
+  async deleteFeedback(feedback, btn) {
+    btn.disabled = true;
+    try {
+      await this.apiClient.deleteFeedback(feedback.id);
+      this.bus.emit("feedback:deleted", feedback.id);
+      await this.loadFeedbacks();
+    } catch (error) {
+      btn.disabled = false;
+      this.bus.emit("feedback:error", error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+  async confirmDeleteAll() {
+    const confirmed = await this.showConfirmDialog(
+      "Tout supprimer",
+      "Supprimer tous les feedbacks de ce projet ? Cette action est irr\xE9versible."
+    );
+    if (!confirmed) return;
+    this.deleteAllBtn.disabled = true;
+    try {
+      await this.apiClient.deleteAllFeedbacks(this.projectName);
+      this.bus.emit("feedback:all-deleted");
+      await this.loadFeedbacks();
+    } catch (error) {
+      this.bus.emit("feedback:error", error instanceof Error ? error : new Error(String(error)));
+    } finally {
+      this.deleteAllBtn.disabled = false;
+    }
+  }
+  showConfirmDialog(title, message) {
+    return new Promise((resolve) => {
+      const backdrop = el("div", { class: "sp-confirm-backdrop" });
+      const titleId = `sp-confirm-title-${Date.now()}`;
+      const messageId = `sp-confirm-msg-${Date.now()}`;
+      const dialog = el("div", { class: "sp-confirm-dialog" });
+      dialog.setAttribute("role", "alertdialog");
+      dialog.setAttribute("aria-modal", "true");
+      dialog.setAttribute("aria-labelledby", titleId);
+      dialog.setAttribute("aria-describedby", messageId);
+      const titleEl = el("div", { class: "sp-confirm-title" });
+      titleEl.id = titleId;
+      setText(titleEl, title);
+      const messageEl = el("div", { class: "sp-confirm-message" });
+      messageEl.id = messageId;
+      setText(messageEl, message);
+      const btnRow = el("div", { class: "sp-confirm-actions" });
+      const cancelBtn = document.createElement("button");
+      cancelBtn.type = "button";
+      cancelBtn.className = "sp-btn-ghost";
+      setText(cancelBtn, "Annuler");
+      const confirmBtn = document.createElement("button");
+      confirmBtn.type = "button";
+      confirmBtn.className = "sp-btn-danger";
+      setText(confirmBtn, "Supprimer");
+      let closed = false;
+      const close = (result) => {
+        if (closed) return;
+        closed = true;
+        backdrop.removeEventListener("keydown", onKeydown);
+        backdrop.style.opacity = "0";
+        dialog.style.transform = "translateY(8px) scale(0.97)";
+        setTimeout(() => {
+          backdrop.remove();
+          resolve(result);
+        }, 200);
+      };
+      const onKeydown = (e) => {
+        const ke = e;
+        if (ke.key === "Escape") {
+          close(false);
+          return;
+        }
+        if (ke.key === "Tab") {
+          ke.preventDefault();
+          const active = backdrop.getRootNode().activeElement;
+          if (active === cancelBtn) {
+            confirmBtn.focus();
+          } else {
+            cancelBtn.focus();
+          }
+        }
+      };
+      backdrop.addEventListener("keydown", onKeydown);
+      cancelBtn.addEventListener("click", () => close(false));
+      confirmBtn.addEventListener("click", () => close(true));
+      backdrop.addEventListener("click", (e) => {
+        if (e.target === backdrop) close(false);
+      });
+      btnRow.appendChild(cancelBtn);
+      btnRow.appendChild(confirmBtn);
+      dialog.appendChild(titleEl);
+      dialog.appendChild(messageEl);
+      dialog.appendChild(btnRow);
+      backdrop.appendChild(dialog);
+      this.root.getRootNode() instanceof ShadowRoot ? this.root.getRootNode().appendChild(backdrop) : this.root.appendChild(backdrop);
+      requestAnimationFrame(() => {
+        backdrop.style.opacity = "1";
+        dialog.style.transform = "translateY(0) scale(1)";
+        cancelBtn.focus();
+      });
+    });
+  }
+  async toggleResolve(feedback, btn) {
+    btn.disabled = true;
+    try {
+      const newResolved = feedback.status !== "resolved";
+      await this.apiClient.resolveFeedback(feedback.id, newResolved);
+      await this.loadFeedbacks();
+    } catch (error) {
+      btn.disabled = false;
+      this.bus.emit("feedback:error", error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+  toggleFilter(value, container) {
+    this.activeFilters.clear();
+    this.activeFilters.add(value);
+    const chips = container.querySelectorAll(".sp-chip");
+    for (const chip of chips) {
+      const isActive = this.activeFilters.has(chip.dataset.filter ?? "");
+      chip.classList.toggle("sp-chip--active", isActive);
+    }
+    this.loadFeedbacks();
+  }
+  scrollToFeedback(feedbackId) {
+    const escapedId = CSS.escape(feedbackId);
+    const card = this.listContainer.querySelector(`[data-feedback-id="${escapedId}"]`);
+    if (card) {
+      card.scrollIntoView({ behavior: "smooth", block: "center" });
+      card.classList.add("sp-anim-flash");
+      card.addEventListener(
+        "animationend",
+        () => {
+          card.classList.remove("sp-anim-flash");
+        },
+        { once: true }
+      );
+    }
+  }
+  /** Refresh the panel after a new feedback is submitted */
+  async refresh() {
+    if (this.isOpen) {
+      await this.loadFeedbacks();
+    }
+  }
+  destroy() {
+    if (this.searchTimeout) clearTimeout(this.searchTimeout);
+    document.removeEventListener("sp-marker-click", this.onMarkerClick);
+    this.root.remove();
+  }
+};
+
+// src/styles/animations.ts
+var SPRING_LINEAR = `linear(0, 0.006, 0.025, 0.06, 0.11, 0.17, 0.25, 0.34, 0.45, 0.56, 0.67, 0.78, 0.88, 0.95, 1.01, 1.04, 1.05, 1.04, 1.02, 1, 0.99, 1)`;
+var EASE_OUT_EXPO = `cubic-bezier(0.16, 1, 0.3, 1)`;
+var SPRING_OVERSHOOT = `cubic-bezier(0.34, 1.56, 0.64, 1)`;
+var EASE_OUT_QUART = `cubic-bezier(0.25, 1, 0.5, 1)`;
+var ANIMATION_CSS = `
+  /* ---- Keyframes ---- */
+
+  @keyframes sp-fab-in {
+    from {
+      transform: scale(0) rotate(-180deg);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sp-fab-glow {
+    0%, 100% { box-shadow: 0 4px 20px var(--sp-accent-glow), 0 2px 8px rgba(0, 0, 0, 0.08); }
+    50% { box-shadow: 0 4px 28px var(--sp-accent-glow), 0 2px 12px rgba(0, 0, 0, 0.1); }
+  }
+
+  @keyframes sp-marker-in {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    60% {
+      transform: scale(1.2);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes sp-pulse-ring {
+    0% {
+      box-shadow: 0 0 0 0 var(--sp-accent-glow);
+    }
+    70% {
+      box-shadow: 0 0 0 8px transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  @keyframes sp-flash-bg {
+    0% { background-color: var(--sp-accent-light); }
+    100% { background-color: transparent; }
+  }
+
+  @keyframes sp-slide-up {
+    from {
+      transform: translateY(8px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes sp-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes sp-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  /* ---- Animation classes ---- */
+
+  .sp-anim-fab-in {
+    animation: sp-fab-in 0.5s ${SPRING_LINEAR} both;
+  }
+
+  .sp-anim-marker-in {
+    animation: sp-marker-in 0.35s ${SPRING_OVERSHOOT} both;
+  }
+
+  .sp-anim-pulse {
+    animation: sp-pulse-ring 0.7s ease-out;
+  }
+
+  .sp-anim-flash {
+    animation: sp-flash-bg 0.5s ${EASE_OUT_QUART};
+  }
+
+  .sp-anim-slide-up {
+    animation: sp-slide-up 0.3s ${EASE_OUT_EXPO} both;
+  }
+
+  .sp-anim-fade-in {
+    animation: sp-fade-in 0.2s ease-out both;
+  }
+
+  /* ---- Transition utilities ---- */
+
+  .sp-panel {
+    transform: translateX(110%);
+    transition: transform 0.4s ${EASE_OUT_EXPO};
+  }
+
+  .sp-panel.sp-panel--open {
+    transform: translateX(0);
+  }
+
+  .sp-radial-item {
+    opacity: 0;
+    pointer-events: none;
+    transform: translate(0, 0) scale(0.8);
+    transition:
+      transform 0.35s ${SPRING_OVERSHOOT},
+      opacity 0.2s ease,
+      background 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .sp-radial-item.sp-radial-item--open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* Stagger delay via CSS custom property --sp-i */
+  .sp-radial-item {
+    transition-delay: calc(var(--sp-i, 0) * 50ms);
+  }
+
+  /* ---- Card stagger animation ---- */
+
+  @keyframes sp-card-in {
+    from {
+      transform: translateY(12px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .sp-card {
+    animation: sp-card-in 0.35s ${EASE_OUT_EXPO} both;
+    animation-delay: calc(var(--sp-card-i, 0) * 40ms);
+  }
+
+  /* ---- Loading spinner ---- */
+
+  @keyframes sp-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .sp-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--sp-border);
+    border-top-color: var(--sp-accent);
+    border-radius: 50%;
+    animation: sp-spin 0.6s linear infinite;
+  }
+
+  /* ---- Badge bounce ---- */
+
+  @keyframes sp-badge-in {
+    0% { transform: scale(0); }
+    60% { transform: scale(1.3); }
+    100% { transform: scale(1); }
+  }
+
+  .sp-fab-badge {
+    animation: sp-badge-in 0.4s ${SPRING_OVERSHOOT} both;
+  }
+
+  /* ---- Reduced motion ---- */
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+`;
+
+// src/styles/base.ts
+function buildStyles(colors) {
+  return `
+    :host {
+      all: initial;
+      position: fixed;
+      z-index: 2147483647;
+      font-family: var(--sp-font);
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--sp-text);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      ${cssVariables(colors)}
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* ============================
+       Focus visible (accessibility)
+       ============================ */
+
+    :focus-visible {
+      outline: 2px solid var(--sp-accent);
+      outline-offset: 2px;
+    }
+
+    /* ============================
+       FAB (Floating Action Button)
+       ============================ */
+
+    .sp-fab {
+      position: fixed;
+      width: 52px;
+      height: 52px;
+      border-radius: var(--sp-radius-full);
+      background: var(--sp-accent-gradient);
+      color: #fff;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow:
+        0 4px 20px var(--sp-accent-glow),
+        0 2px 8px rgba(0, 0, 0, 0.08);
+      transition:
+        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+        box-shadow 0.3s ease;
+      outline: none;
+    }
+
+    .sp-fab:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 3px;
+    }
+
+    .sp-fab:hover {
+      transform: translateY(-2px) scale(1.05);
+      box-shadow:
+        0 8px 28px var(--sp-accent-glow),
+        0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .sp-fab:active {
+      transform: translateY(0) scale(0.95);
+      transition-duration: 0.1s;
+    }
+
+    .sp-fab--bottom-right {
+      bottom: 24px;
+      right: 24px;
+    }
+
+    .sp-fab--bottom-left {
+      bottom: 24px;
+      left: 24px;
+    }
+
+    .sp-fab svg {
+      width: 22px;
+      height: 22px;
+      fill: currentColor;
+      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    /* ---- FAB Badge ---- */
+
+    .sp-fab-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      border-radius: var(--sp-radius-full);
+      background: #ef4444;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid #fff;
+      pointer-events: none;
+      font-family: var(--sp-font);
+      line-height: 1;
+    }
+
+    /* ============================
+       Radial Menu
+       ============================ */
+
+    .sp-radial {
+      position: fixed;
+      pointer-events: none;
+      width: 52px;
+      height: 52px;
+    }
+
+    .sp-radial--bottom-right {
+      bottom: 24px;
+      right: 24px;
+    }
+
+    .sp-radial--bottom-left {
+      bottom: 24px;
+      left: 24px;
+    }
+
+    .sp-radial-item {
+      position: absolute;
+      left: 4px;
+      bottom: 4px;
+      width: 44px;
+      height: 44px;
+      border-radius: var(--sp-radius-full);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      color: var(--sp-text);
+      border: 1px solid var(--sp-glass-border);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--sp-shadow-md);
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .sp-radial-item:hover,
+    .sp-radial-item:focus-visible {
+      background: rgba(255, 255, 255, 0.95);
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
+      box-shadow:
+        var(--sp-shadow-md),
+        0 0 0 3px var(--sp-accent-light);
+      outline: none;
+    }
+
+    .sp-radial-item svg {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      stroke: currentColor;
+      fill: none;
+    }
+
+    .sp-radial-label {
+      white-space: nowrap;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--sp-text);
+      pointer-events: none;
+      opacity: 0;
+      padding: 4px 12px;
+      border-radius: var(--sp-radius);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-sm);
+      transform: translateX(4px);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+
+    .sp-radial-item:hover .sp-radial-label,
+    .sp-radial-item:focus-visible .sp-radial-label {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    /* ============================
+       Panel (Side drawer)
+       ============================ */
+
+    .sp-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 400px;
+      max-width: 100vw;
+      height: 100vh;
+      background: var(--sp-glass-bg);
+      backdrop-filter: blur(var(--sp-blur-heavy));
+      -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+      border-left: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-xl);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    @media (max-width: 480px) {
+      .sp-panel {
+        width: 100vw;
+        border-left: none;
+      }
+    }
+
+    .sp-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+    }
+
+    .sp-panel-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--sp-text);
+      letter-spacing: -0.02em;
+    }
+
+    .sp-panel-close {
+      width: 32px;
+      height: 32px;
+      border-radius: var(--sp-radius);
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sp-text-tertiary);
+      transition: all 0.2s ease;
+    }
+
+    .sp-panel-close:hover {
+      background: var(--sp-bg-hover);
+      color: var(--sp-text);
+    }
+
+    .sp-panel-close svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* ============================
+       Filters & Search
+       ============================ */
+
+    .sp-filters {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .sp-search-wrap {
+      position: relative;
+      margin-bottom: 12px;
+    }
+
+    .sp-search {
+      width: 100%;
+      height: 40px;
+      padding: 0 12px 0 38px;
+      border-radius: var(--sp-radius);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text);
+      font-family: var(--sp-font);
+      font-size: 13px;
+      outline: none;
+      transition: all 0.2s ease;
+    }
+
+    .sp-search::placeholder {
+      color: var(--sp-text-tertiary);
+    }
+
+    .sp-search:focus {
+      border-color: var(--sp-accent);
+      box-shadow: 0 0 0 3px var(--sp-accent-light);
+      background: #fff;
+    }
+
+    .sp-search-icon {
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--sp-text-tertiary);
+      width: 16px;
+      height: 16px;
+      transition: color 0.2s ease;
+    }
+
+    .sp-search:focus ~ .sp-search-icon,
+    .sp-search-wrap:focus-within .sp-search-icon {
+      color: var(--sp-accent);
+    }
+
+    .sp-chips {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    .sp-chip {
+      padding: 5px 14px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text-secondary);
+      font-family: var(--sp-font);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+      letter-spacing: 0.01em;
+    }
+
+    .sp-chip:hover {
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
+      background: var(--sp-accent-light);
+    }
+
+    .sp-chip--active {
+      background: var(--sp-accent-gradient);
+      border-color: transparent;
+      color: #fff;
+      box-shadow: 0 2px 8px var(--sp-accent-glow);
+    }
+
+    .sp-chip--active:hover {
+      background: var(--sp-accent-gradient);
+      border-color: transparent;
+      color: #fff;
+    }
+
+    /* ============================
+       Feedback Cards
+       ============================ */
+
+    .sp-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+    }
+
+    .sp-list::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .sp-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .sp-list::-webkit-scrollbar-thumb {
+      background: var(--sp-border);
+      border-radius: var(--sp-radius-full);
+    }
+
+    .sp-list::-webkit-scrollbar-thumb:hover {
+      background: var(--sp-text-tertiary);
+    }
+
+    .sp-card {
+      display: flex;
+      padding: 14px 16px;
+      margin-bottom: 6px;
+      cursor: pointer;
+      border-radius: var(--sp-radius);
+      background: var(--sp-glass-bg-heavy);
+      border: 1px solid var(--sp-glass-border);
+      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    .sp-card:hover {
+      background: #fff;
+      border-color: var(--sp-border);
+      box-shadow: var(--sp-shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .sp-card:active {
+      transform: translateY(0) scale(0.99);
+      transition-duration: 0.1s;
+    }
+
+    .sp-card-bar {
+      width: 3px;
+      border-radius: var(--sp-radius-full);
+      margin-right: 14px;
+      flex-shrink: 0;
+    }
+
+    .sp-card-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .sp-card-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+
+    .sp-card-number {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--sp-text-tertiary);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .sp-badge {
+      padding: 2px 10px;
+      border-radius: var(--sp-radius-full);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+    }
+
+    .sp-card-date {
+      font-size: 11px;
+      color: var(--sp-text-tertiary);
+      margin-left: auto;
+    }
+
+    .sp-card-message {
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--sp-text);
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .sp-card-message--expanded {
+      -webkit-line-clamp: unset;
+    }
+
+    .sp-card-expand {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--sp-accent);
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: 4px 0;
+      font-family: var(--sp-font);
+      transition: opacity 0.15s ease;
+    }
+
+    .sp-card-expand:hover {
+      opacity: 0.8;
+    }
+
+    .sp-card-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-top: 10px;
+    }
+
+    .sp-btn-resolve,
+    .sp-btn-delete {
+      padding: 5px 14px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: transparent;
+      color: var(--sp-text-secondary);
+      font-family: var(--sp-font);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: all 0.2s ease;
+    }
+
+    .sp-btn-resolve svg,
+    .sp-btn-delete svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .sp-btn-resolve:hover {
+      border-color: #22c55e;
+      color: #22c55e;
+      background: rgba(34, 197, 94, 0.06);
+    }
+
+    .sp-btn-delete:hover {
+      border-color: #ef4444;
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.06);
+    }
+
+    .sp-btn-resolve:disabled,
+    .sp-btn-delete:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* ---- Delete All (header) ---- */
+
+    .sp-panel-header-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .sp-btn-delete-all {
+      padding: 5px 12px;
+      border-radius: var(--sp-radius-full);
+      border: 1px solid var(--sp-border);
+      background: transparent;
+      color: var(--sp-text-tertiary);
+      font-family: var(--sp-font);
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: all 0.2s ease;
+    }
+
+    .sp-btn-delete-all svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    .sp-btn-delete-all:hover {
+      border-color: #ef4444;
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.06);
+    }
+
+    .sp-btn-delete-all:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* ---- Confirm Dialog ---- */
+
+    .sp-confirm-backdrop {
+      position: fixed;
+      inset: 0;
+      background: var(--sp-backdrop, rgba(15, 23, 42, 0.2));
+      backdrop-filter: blur(var(--sp-blur));
+      -webkit-backdrop-filter: blur(var(--sp-blur));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483647;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .sp-confirm-dialog {
+      width: 340px;
+      padding: 28px;
+      border-radius: 20px;
+      background: var(--sp-glass-bg-heavy);
+      backdrop-filter: blur(var(--sp-blur-heavy));
+      -webkit-backdrop-filter: blur(var(--sp-blur-heavy));
+      border: 1px solid var(--sp-glass-border);
+      box-shadow: var(--sp-shadow-xl);
+      font-family: var(--sp-font);
+      transform: translateY(8px) scale(0.97);
+      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .sp-confirm-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--sp-text);
+      letter-spacing: -0.02em;
+      margin-bottom: 8px;
+    }
+
+    .sp-confirm-message {
+      font-size: 14px;
+      color: var(--sp-text-secondary);
+      line-height: 1.5;
+      margin-bottom: 20px;
+    }
+
+    .sp-confirm-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    .sp-btn-danger {
+      height: 40px;
+      padding: 0 22px;
+      border-radius: var(--sp-radius);
+      border: none;
+      background: #ef4444;
+      color: #fff;
+      font-family: var(--sp-font);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
+    }
+
+    .sp-btn-danger:hover {
+      background: #dc2626;
+      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
+      transform: translateY(-1px);
+    }
+
+    .sp-btn-danger:active {
+      transform: translateY(0) scale(0.98);
+      transition-duration: 0.1s;
+    }
+
+    .sp-card--resolved {
+      opacity: 0.5;
+    }
+
+    .sp-card--resolved .sp-card-message {
+      text-decoration: line-through;
+      text-decoration-color: var(--sp-text-tertiary);
+    }
+
+    /* ============================
+       Loading State
+       ============================ */
+
+    .sp-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+    }
+
+    /* ============================
+       Identity Form
+       ============================ */
+
+    .sp-identity-title {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--sp-text);
+      letter-spacing: -0.02em;
+    }
+
+    .sp-input {
+      width: 100%;
+      height: 42px;
+      padding: 0 14px;
+      border-radius: var(--sp-radius);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text);
+      font-family: var(--sp-font);
+      font-size: 14px;
+      outline: none;
+      transition: all 0.2s ease;
+    }
+
+    .sp-input::placeholder {
+      color: var(--sp-text-tertiary);
+    }
+
+    .sp-input:focus {
+      border-color: var(--sp-accent);
+      box-shadow: 0 0 0 3px var(--sp-accent-light);
+      background: #fff;
+    }
+
+    .sp-input-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--sp-text-secondary);
+      margin-bottom: 6px;
+      display: block;
+    }
+
+    /* ============================
+       Buttons
+       ============================ */
+
+    .sp-btn-primary {
+      height: 40px;
+      padding: 0 22px;
+      border-radius: var(--sp-radius);
+      border: none;
+      background: var(--sp-accent-gradient);
+      color: #fff;
+      font-family: var(--sp-font);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px var(--sp-accent-glow);
+    }
+
+    .sp-btn-primary:hover {
+      box-shadow: 0 4px 16px var(--sp-accent-glow);
+      transform: translateY(-1px);
+    }
+
+    .sp-btn-primary:active {
+      transform: translateY(0) scale(0.98);
+      transition-duration: 0.1s;
+    }
+
+    .sp-btn-primary:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+    }
+
+    .sp-btn-ghost {
+      height: 40px;
+      padding: 0 22px;
+      border-radius: var(--sp-radius);
+      border: 1px solid var(--sp-border);
+      background: var(--sp-glass-bg-heavy);
+      color: var(--sp-text-secondary);
+      font-family: var(--sp-font);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .sp-btn-ghost:hover {
+      border-color: var(--sp-accent);
+      color: var(--sp-accent);
+      background: var(--sp-accent-light);
+    }
+
+    /* ============================
+       Empty State
+       ============================ */
+
+    .sp-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 56px 24px;
+      color: var(--sp-text-tertiary);
+      text-align: center;
+      gap: 8px;
+      animation: sp-fade-in 0.3s ease-out both;
+    }
+
+    .sp-empty-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    ${ANIMATION_CSS}
+  `;
+}
+
+// src/tooltip.ts
+var SHOW_DELAY = 120;
+var HIDE_DELAY = 80;
+var Tooltip = class {
+  constructor(colors) {
+    this.colors = colors;
+    this.root = el("div", {
+      style: `
+        position: fixed;
+        z-index: 2147483647;
+        max-width: 280px;
+        padding: 12px 14px;
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.88);
+        backdrop-filter: blur(24px);
+        -webkit-backdrop-filter: blur(24px);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.04);
+        font-family: "Inter", system-ui, -apple-system, sans-serif;
+        pointer-events: auto;
+        opacity: 0;
+        transform: translateY(6px) scale(0.97);
+        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+        visibility: hidden;
+        -webkit-font-smoothing: antialiased;
+      `
+    });
+    this.arrow = el("div", {
+      style: `
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        background: rgba(255, 255, 255, 0.88);
+        border: 1px solid rgba(255, 255, 255, 0.35);
+        transform: rotate(45deg);
+        pointer-events: none;
+      `
+    });
+    this.root.appendChild(this.arrow);
+    this.root.addEventListener("mouseenter", () => this.cancelHide());
+    this.root.addEventListener("mouseleave", () => this.scheduleHide());
+    document.body.appendChild(this.root);
+  }
+  colors;
+  root;
+  arrow;
+  showTimer = null;
+  hideTimer = null;
+  currentFeedbackId = null;
+  show(feedback, anchorRect) {
+    if (this.currentFeedbackId === feedback.id) return;
+    this.cancelHide();
+    this.cancelShow();
+    this.showTimer = setTimeout(() => {
+      this.currentFeedbackId = feedback.id;
+      this.render(feedback);
+      this.position(anchorRect);
+      this.root.style.visibility = "visible";
+      this.root.style.opacity = "1";
+      this.root.style.transform = "translateY(0) scale(1)";
+    }, SHOW_DELAY);
+  }
+  scheduleHide() {
+    this.cancelHide();
+    this.hideTimer = setTimeout(() => this.hide(), HIDE_DELAY);
+  }
+  hide() {
+    this.cancelShow();
+    this.currentFeedbackId = null;
+    this.root.style.opacity = "0";
+    this.root.style.transform = "translateY(6px) scale(0.97)";
+    setTimeout(() => {
+      if (!this.currentFeedbackId) {
+        this.root.style.visibility = "hidden";
+      }
+    }, 200);
+  }
+  cancelShow() {
+    if (this.showTimer) {
+      clearTimeout(this.showTimer);
+      this.showTimer = null;
+    }
+  }
+  cancelHide() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  }
+  render(feedback) {
+    const children = Array.from(this.root.children);
+    for (const child of children) {
+      if (child !== this.arrow) child.remove();
+    }
+    const typeColor = getTypeColor(feedback.type, this.colors);
+    const typeBg = getTypeBgColor(feedback.type, this.colors);
+    const typeLabel = feedback.type.charAt(0).toUpperCase() + feedback.type.slice(1);
+    const header = el("div", { style: "display:flex;align-items:center;gap:8px;margin-bottom:8px;" });
+    const badge = el("span", {
+      style: `
+        padding:3px 10px;border-radius:9999px;
+        font-size:11px;font-weight:600;
+        color:${typeColor};background:${typeBg};
+        letter-spacing:0.02em;
+      `
+    });
+    setText(badge, typeLabel);
+    const date = el("span", { style: "font-size:11px;color:#64748b;margin-left:auto;" });
+    setText(date, formatRelativeDate(feedback.createdAt));
+    header.appendChild(badge);
+    header.appendChild(date);
+    const body = el("div", {
+      style: "font-size:13px;line-height:1.55;color:#0f172a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"
+    });
+    setText(body, feedback.message);
+    this.root.insertBefore(header, this.arrow);
+    this.root.insertBefore(body, this.arrow);
+  }
+  position(anchorRect) {
+    const tooltipRect = this.root.getBoundingClientRect();
+    const gap = 10;
+    let top = anchorRect.top - tooltipRect.height - gap;
+    let left = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;
+    let isAbove = true;
+    if (top < 8) {
+      top = anchorRect.bottom + gap;
+      isAbove = false;
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - tooltipRect.width - 8));
+    this.root.style.top = `${top}px`;
+    this.root.style.left = `${left}px`;
+    const arrowLeft = Math.max(16, Math.min(anchorRect.left + anchorRect.width / 2 - left - 6, tooltipRect.width - 22));
+    if (isAbove) {
+      this.arrow.style.cssText = `
+        position:absolute;
+        width:12px;height:12px;
+        background:rgba(255, 255, 255, 0.88);
+        border-right:1px solid rgba(255, 255, 255, 0.35);
+        border-bottom:1px solid rgba(255, 255, 255, 0.35);
+        transform:rotate(45deg);
+        pointer-events:none;
+        bottom:-6px;
+        left:${arrowLeft}px;
+      `;
+    } else {
+      this.arrow.style.cssText = `
+        position:absolute;
+        width:12px;height:12px;
+        background:rgba(255, 255, 255, 0.88);
+        border-left:1px solid rgba(255, 255, 255, 0.35);
+        border-top:1px solid rgba(255, 255, 255, 0.35);
+        transform:rotate(45deg);
+        pointer-events:none;
+        top:-6px;
+        left:${arrowLeft}px;
+      `;
+    }
+  }
+  /** Check if a DOM node belongs to this tooltip (for MutationObserver filtering). */
+  contains(node) {
+    return this.root.contains(node);
+  }
+  destroy() {
+    this.cancelShow();
+    this.cancelHide();
+    this.root.remove();
+  }
+};
+
+// src/launcher.ts
+function launch(config2) {
+  if (!config2.forceShow) {
+    try {
+      const meta = import.meta;
+      const proc = globalThis.process;
+      const mode = meta.env?.MODE ?? proc?.env?.NODE_ENV;
+      if (mode === "production") {
+        return { destroy: () => {
+        } };
+      }
+    } catch {
+    }
+  }
+  if (window.innerWidth < 768) {
+    return { destroy: () => {
+    } };
+  }
+  const colors = buildThemeColors(config2.accentColor);
+  const bus = new EventBus();
+  const apiClient = new ApiClient(config2.endpoint);
+  if (config2.onOpen) bus.on("open", config2.onOpen);
+  if (config2.onClose) bus.on("close", config2.onClose);
+  if (config2.onFeedbackSent) bus.on("feedback:sent", config2.onFeedbackSent);
+  if (config2.onError) bus.on("feedback:error", config2.onError);
+  if (config2.onAnnotationStart) bus.on("annotation:start", config2.onAnnotationStart);
+  if (config2.onAnnotationEnd) bus.on("annotation:end", config2.onAnnotationEnd);
+  const host = document.createElement("siteping-widget");
+  host.style.cssText = "position:fixed;z-index:2147483647;";
+  const shadowMode = config2.__testMode ? "open" : "closed";
+  const shadow = host.attachShadow({ mode: shadowMode });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(buildStyles(colors));
+  shadow.adoptedStyleSheets = [sheet];
+  document.body.appendChild(host);
+  const tooltip = new Tooltip(colors);
+  const markers = new MarkerManager(colors, tooltip, bus);
+  const fab = new Fab(shadow, config2, bus);
+  const panel = new Panel(shadow, colors, bus, apiClient, config2.projectName, markers);
+  const annotator = new Annotator(config2, colors, bus);
+  const unsubAnnotation = bus.on("annotation:complete", async (data) => {
+    const { annotation, type, message } = data;
+    let identity = getIdentity();
+    if (!identity) {
+      identity = await promptIdentity(shadow);
+      if (!identity) return;
+      saveIdentity(identity);
+    }
+    const payload = {
+      projectName: config2.projectName,
+      type,
+      message,
+      url: window.location.href,
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      userAgent: navigator.userAgent,
+      authorName: identity.name,
+      authorEmail: identity.email,
+      annotations: [annotation],
+      clientId: crypto.randomUUID()
+    };
+    try {
+      const response = await apiClient.sendFeedback(payload);
+      bus.emit("feedback:sent", response);
+      markers.addFeedback(response, markers.count + 1);
+      await panel.refresh();
+    } catch (error) {
+      bus.emit("feedback:error", error instanceof Error ? error : new Error(String(error)));
+    }
+  });
+  apiClient.getFeedbacks(config2.projectName, { limit: 50 }).then(({ feedbacks }) => {
+    markers.render(feedbacks);
+  }).catch(() => {
+  });
+  flushRetryQueue(config2.endpoint);
+  return {
+    destroy: () => {
+      unsubAnnotation();
+      fab.destroy();
+      panel.destroy();
+      annotator.destroy();
+      markers.destroy();
+      tooltip.destroy();
+      bus.removeAll();
+      host.remove();
+    }
+  };
+}
+function promptIdentity(shadowRoot) {
+  return new Promise((resolve) => {
+    const backdrop = document.createElement("div");
+    backdrop.style.cssText = `
+      position:fixed;inset:0;
+      background:rgba(15, 23, 42, 0.2);
+      backdrop-filter:blur(8px);
+      -webkit-backdrop-filter:blur(8px);
+      display:flex;align-items:center;justify-content:center;
+      z-index:2147483647;
+      opacity:0;transition:opacity 0.25s ease;
+    `;
+    const modal = document.createElement("div");
+    modal.style.cssText = `
+      width:340px;padding:28px;border-radius:20px;
+      background:rgba(255, 255, 255, 0.85);
+      backdrop-filter:blur(32px);
+      -webkit-backdrop-filter:blur(32px);
+      border:1px solid rgba(255, 255, 255, 0.35);
+      box-shadow:0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
+      font-family:"Inter",system-ui,-apple-system,sans-serif;
+      transform:translateY(12px) scale(0.97);
+      transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      -webkit-font-smoothing:antialiased;
+    `;
+    const title = document.createElement("div");
+    title.className = "sp-identity-title";
+    title.textContent = "Identifiez-vous";
+    title.style.marginBottom = "20px";
+    const nameLabel = document.createElement("label");
+    nameLabel.className = "sp-input-label";
+    nameLabel.textContent = "Nom";
+    const nameInput = document.createElement("input");
+    nameInput.className = "sp-input";
+    nameInput.type = "text";
+    nameInput.placeholder = "Votre nom";
+    nameInput.style.marginBottom = "14px";
+    const emailLabel = document.createElement("label");
+    emailLabel.className = "sp-input-label";
+    emailLabel.textContent = "Email";
+    const emailInput = document.createElement("input");
+    emailInput.className = "sp-input";
+    emailInput.type = "email";
+    emailInput.placeholder = "votre@email.com";
+    const btnRow = document.createElement("div");
+    btnRow.style.cssText = "display:flex;gap:8px;justify-content:flex-end;margin-top:20px;";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "sp-btn-ghost";
+    cancelBtn.textContent = "Annuler";
+    cancelBtn.addEventListener("click", () => {
+      backdrop.style.opacity = "0";
+      modal.style.transform = "translateY(12px) scale(0.97)";
+      setTimeout(() => {
+        backdrop.remove();
+        resolve(null);
+      }, 250);
+    });
+    const submitBtn = document.createElement("button");
+    submitBtn.className = "sp-btn-primary";
+    submitBtn.textContent = "Continuer";
+    submitBtn.addEventListener("click", () => {
+      const name = nameInput.value.trim();
+      const email = emailInput.value.trim();
+      if (!name || !email) return;
+      backdrop.style.opacity = "0";
+      modal.style.transform = "translateY(12px) scale(0.97)";
+      setTimeout(() => {
+        backdrop.remove();
+        resolve({ name, email });
+      }, 250);
+    });
+    btnRow.appendChild(cancelBtn);
+    btnRow.appendChild(submitBtn);
+    modal.appendChild(title);
+    modal.appendChild(nameLabel);
+    modal.appendChild(nameInput);
+    modal.appendChild(emailLabel);
+    modal.appendChild(emailInput);
+    modal.appendChild(btnRow);
+    backdrop.appendChild(modal);
+    shadowRoot.appendChild(backdrop);
+    requestAnimationFrame(() => {
+      backdrop.style.opacity = "1";
+      modal.style.transform = "translateY(0) scale(1)";
+      nameInput.focus();
+    });
+  });
+}
+
+// src/index.ts
+function initSiteping(config2) {
+  return launch(config2);
+}
+export {
+  initSiteping
+};
+//# sourceMappingURL=index.js.map