@designfever/web-review-kit 0.1.0

package/dist/index.cjs

@@ -0,0 +1,3524 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_REVIEW_VIEWPORTS: () => DEFAULT_REVIEW_VIEWPORTS,
+  DF_SHEET_REVIEW_SOURCE: () => DF_SHEET_REVIEW_SOURCE,
+  REVIEW_WORKFLOW_STATUS_OPTIONS: () => REVIEW_WORKFLOW_STATUS_OPTIONS,
+  createWebReviewKit: () => createWebReviewKit,
+  dfSheetAdapter: () => dfSheetAdapter,
+  findReviewViewportPreset: () => findReviewViewportPreset,
+  getNumberedReviewItems: () => getNumberedReviewItems,
+  getReviewItemScope: () => getReviewItemScope,
+  getReviewItemScopeLabel: () => getReviewItemScopeLabel,
+  getReviewViewportScope: () => getReviewViewportScope,
+  localAdapter: () => localAdapter,
+  normalizeReviewItemStatus: () => normalizeReviewItemStatus,
+  supabaseAdapter: () => supabaseAdapter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/route.ts
+function getItemRouteKey(item) {
+  return item.routeKey || normalizeRoutePath(item.normalizedPath);
+}
+function normalizeRoutePath(pathname) {
+  const [pathWithoutQuery] = pathname.split(/[?#]/);
+  const path = (pathWithoutQuery || "/").replace(/\/index\.html$/, "/");
+  return path.startsWith("/") ? path : `/${path}`;
+}
+
+// src/status.ts
+var REVIEW_WORKFLOW_STATUS_OPTIONS = [
+  { value: "todo", label: "\uC791\uC5C5\uC804" },
+  { value: "doing", label: "\uC791\uC5C5\uC911" },
+  { value: "review", label: "\uAC80\uD1A0 \uD544\uC694" },
+  { value: "hold", label: "\uBCF4\uB958" },
+  { value: "done", label: "\uC644\uB8CC" }
+];
+function normalizeReviewItemStatus(status) {
+  if (status === "resolved") return "done";
+  if (status === "open" || !status) return "todo";
+  return status;
+}
+function matchesReviewItemStatus(itemStatus, queryStatus) {
+  return normalizeReviewItemStatus(itemStatus) === normalizeReviewItemStatus(queryStatus);
+}
+
+// src/adapters/local.ts
+var DEFAULT_STORAGE_KEY = "df-web-review-kit:items";
+function localAdapter(options = {}) {
+  const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
+  const write = (items) => {
+    window.localStorage.setItem(storageKey, JSON.stringify(items));
+  };
+  const read = () => {
+    if (typeof window === "undefined") return [];
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return [];
+    try {
+      const value = JSON.parse(raw);
+      if (!Array.isArray(value)) return [];
+      let changed = false;
+      const items = value.flatMap((item) => {
+        const normalized = normalizeStoredReviewItem(item);
+        if (!normalized || normalized !== item) changed = true;
+        return normalized ? [normalized] : [];
+      });
+      const numberedItems = ensureStoredReviewNumbers(items);
+      if (numberedItems !== items) changed = true;
+      if (changed) write(numberedItems);
+      return numberedItems;
+    } catch {
+      return [];
+    }
+  };
+  return {
+    async get(id) {
+      return read().find((item) => item.id === id) ?? null;
+    },
+    async list(query) {
+      return read().filter((item) => {
+        if (item.projectId !== query.projectId) return false;
+        const queryRouteKey = query.routeKey ?? query.normalizedPath;
+        if (queryRouteKey && getItemRouteKey(item) !== queryRouteKey) {
+          return false;
+        }
+        if (query.status && !matchesReviewItemStatus(item.status, query.status)) {
+          return false;
+        }
+        return true;
+      });
+    },
+    async create(item) {
+      const items = read();
+      items.unshift(item);
+      write(items);
+      return item;
+    },
+    async update(id, patch) {
+      const items = read();
+      const index = items.findIndex((item) => item.id === id);
+      if (index < 0) {
+        throw new Error(`Review item not found: ${id}`);
+      }
+      const next = {
+        ...items[index],
+        ...patch,
+        id,
+        createdAt: items[index].createdAt,
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      items[index] = next;
+      write(items);
+      return next;
+    },
+    async remove(id) {
+      write(read().filter((item) => item.id !== id));
+    }
+  };
+}
+function normalizeStoredReviewItem(value) {
+  if (!value || typeof value !== "object") return void 0;
+  const raw = value;
+  const kind = raw.kind === "text" ? "note" : raw.kind === "capture" ? "area" : raw.kind;
+  if (kind !== "note" && kind !== "area") return void 0;
+  const { screenshot: _screenshot, ...item } = raw;
+  if (kind === raw.kind && _screenshot === void 0) {
+    return raw;
+  }
+  return {
+    ...item,
+    kind
+  };
+}
+function ensureStoredReviewNumbers(items) {
+  const usedNumbers = /* @__PURE__ */ new Set();
+  let maxNumber = 0;
+  let changed = false;
+  items.forEach((item) => {
+    const number = normalizeReviewNumber(item.reviewNumber);
+    if (!number) {
+      changed = true;
+      return;
+    }
+    if (usedNumbers.has(number)) {
+      changed = true;
+      return;
+    }
+    usedNumbers.add(number);
+    maxNumber = Math.max(maxNumber, number);
+  });
+  if (!changed) return items;
+  let nextNumber = maxNumber + 1;
+  const assignedNumbers = /* @__PURE__ */ new Set();
+  const numberById = /* @__PURE__ */ new Map();
+  [...items].sort((a, b) => {
+    const createdOrder = a.createdAt.localeCompare(b.createdAt);
+    if (createdOrder !== 0) return createdOrder;
+    return a.id.localeCompare(b.id);
+  }).forEach((item) => {
+    const storedNumber = normalizeReviewNumber(item.reviewNumber);
+    const reviewNumber = storedNumber && !assignedNumbers.has(storedNumber) ? storedNumber : nextNumber++;
+    assignedNumbers.add(reviewNumber);
+    numberById.set(item.id, reviewNumber);
+  });
+  return items.map((item) => {
+    const reviewNumber = numberById.get(item.id);
+    return item.reviewNumber === reviewNumber ? item : { ...item, reviewNumber };
+  });
+}
+function normalizeReviewNumber(value) {
+  if (typeof value !== "number") return void 0;
+  if (!Number.isInteger(value) || value < 1) return void 0;
+  return value;
+}
+
+// src/adapters/df-sheet.ts
+var DF_SHEET_REVIEW_SOURCE = "df-web-review-kit";
+var REVIEW_METADATA_VERSION = 1;
+function dfSheetAdapter(options) {
+  return {
+    async get(id) {
+      const issue = await requestDfSheet(
+        `/api/issues/${encodeURIComponent(id)}`,
+        options
+      );
+      return issueToReviewItem(issue, options);
+    },
+    async list(query) {
+      const params = new URLSearchParams();
+      params.set("project_id", options.projectId);
+      params.set("page_id", options.pageId);
+      params.set("review_source", options.source ?? DF_SHEET_REVIEW_SOURCE);
+      if (query.routeKey ?? query.normalizedPath) {
+        params.set("review_route_key", query.routeKey ?? query.normalizedPath ?? "");
+      }
+      const issues = await requestDfSheet(
+        `/api/issues?${params.toString()}`,
+        options
+      );
+      return issues.flatMap((issue) => {
+        const item = issueToReviewItem(issue, options);
+        return item ? [item] : [];
+      });
+    },
+    async create(item) {
+      const metadata = createReviewMetadata(item, options);
+      const draftDescription = buildIssueDescription(item, metadata);
+      const created = await requestDfSheet("/api/issues", options, {
+        method: "POST",
+        body: JSON.stringify({
+          project_id: options.projectId,
+          page_id: options.pageId,
+          title: buildIssueTitle(item),
+          description: draftDescription,
+          type: options.issueType ?? "task",
+          types: [options.issueType ?? "task"],
+          status: "todo",
+          priority: options.priority ?? "medium",
+          links: metadata.reviewUrl ?? null,
+          review_metadata: metadata
+        })
+      });
+      const externalIssueId = created.id;
+      const externalIssueUrl = buildIssueUrl(options, externalIssueId);
+      const finalMetadata = {
+        ...metadata,
+        externalIssueId,
+        externalIssueUrl,
+        reviewUrl: buildReviewUrl(item, options, externalIssueId),
+        submittedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        submitStatus: "submitted"
+      };
+      const patched = await requestDfSheet(
+        `/api/issues/${encodeURIComponent(externalIssueId)}`,
+        options,
+        {
+          method: "PATCH",
+          body: JSON.stringify({
+            description: buildIssueDescription(item, finalMetadata),
+            links: finalMetadata.reviewUrl,
+            review_metadata: finalMetadata
+          })
+        }
+      );
+      return issueToReviewItem(patched, options) ?? {
+        ...item,
+        id: externalIssueId,
+        externalIssueId,
+        externalIssueUrl,
+        submittedAt: finalMetadata.submittedAt,
+        submitStatus: "submitted",
+        updatedAt: finalMetadata.submittedAt ?? item.updatedAt
+      };
+    },
+    async update() {
+      throw new Error("df-sheet review items are read-only in review-kit.");
+    },
+    async remove() {
+      throw new Error("df-sheet review items are read-only in review-kit.");
+    }
+  };
+}
+function createReviewMetadata(item, options) {
+  return {
+    source: options.source ?? DF_SHEET_REVIEW_SOURCE,
+    schema: DF_SHEET_REVIEW_SOURCE,
+    version: REVIEW_METADATA_VERSION,
+    reviewProjectId: options.reviewProjectId ?? item.projectId,
+    id: item.id,
+    reviewNumber: item.reviewNumber,
+    projectId: item.projectId,
+    routeKey: item.routeKey,
+    pageUrl: item.pageUrl,
+    originalUrl: item.originalUrl,
+    normalizedPath: item.normalizedPath,
+    scope: item.scope,
+    kind: item.kind,
+    title: item.title,
+    comment: item.comment,
+    status: item.status,
+    viewport: item.viewport,
+    devicePixelRatio: item.devicePixelRatio,
+    scroll: item.scroll,
+    anchor: item.anchor,
+    marker: item.marker,
+    selection: item.selection,
+    createdAt: item.createdAt,
+    updatedAt: item.updatedAt,
+    reviewUrl: buildReviewUrl(item, options)
+  };
+}
+function issueToReviewItem(issue, options) {
+  const metadata = getReviewMetadata(issue);
+  if (!metadata) return null;
+  const routeKey = metadata.routeKey ?? metadata.normalizedPath ?? "/";
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    id: issue.id,
+    reviewNumber: metadata.reviewNumber,
+    projectId: metadata.reviewProjectId ?? metadata.projectId ?? options.reviewProjectId ?? options.projectId,
+    routeKey,
+    pageUrl: metadata.pageUrl ?? metadata.originalUrl ?? toAbsoluteReviewUrl(routeKey),
+    originalUrl: metadata.originalUrl,
+    normalizedPath: metadata.normalizedPath ?? routeKey,
+    scope: metadata.scope,
+    kind: normalizeKind(metadata.kind),
+    title: metadata.title ?? issue.title,
+    comment: metadata.comment ?? issue.title,
+    status: mapIssueStatus(issue.status ?? metadata.status),
+    viewport: metadata.viewport ?? { width: 390, height: 720 },
+    devicePixelRatio: metadata.devicePixelRatio,
+    scroll: metadata.scroll,
+    anchor: metadata.anchor,
+    marker: metadata.marker,
+    selection: metadata.selection,
+    externalIssueId: issue.id,
+    externalIssueUrl: metadata.externalIssueUrl ?? buildIssueUrl(options, issue.id),
+    submittedAt: metadata.submittedAt ?? issue.created_at,
+    submitStatus: "submitted",
+    createdAt: metadata.createdAt ?? issue.created_at ?? now,
+    updatedAt: issue.updated_at ?? metadata.updatedAt ?? issue.created_at ?? now
+  };
+}
+function getReviewMetadata(issue) {
+  const metadata = issue.review_metadata;
+  if (!metadata || typeof metadata !== "object") return null;
+  const value = metadata;
+  if (value.source !== DF_SHEET_REVIEW_SOURCE) return null;
+  return value;
+}
+async function requestDfSheet(path, options, init = {}) {
+  const url = new URL(path, getDfSheetBaseUrl(options)).toString();
+  const headers = new Headers(init.headers);
+  headers.set("Accept", "application/json");
+  if (init.body && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json");
+  }
+  if (options.token) {
+    headers.set("Authorization", `Bearer ${options.token}`);
+  }
+  const response = await fetch(url, {
+    ...init,
+    headers,
+    credentials: "include"
+  });
+  const json = await response.json().catch(() => null);
+  if (!response.ok || !json?.success || json.data === void 0) {
+    throw new Error(
+      json?.message ?? json?.error ?? `df-sheet request failed: ${response.status}`
+    );
+  }
+  return json.data;
+}
+function getDfSheetBaseUrl(options) {
+  const baseUrl = options.baseUrl?.trim();
+  if (baseUrl) return baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+  if (typeof window !== "undefined") return window.location.origin;
+  return "http://localhost";
+}
+function buildIssueTitle(item) {
+  const reviewId = formatReviewItemIndexId(item);
+  const idPrefix = reviewId ? `${reviewId} ` : "";
+  const prefix = item.kind === "area" ? "[Area]" : "[Note]";
+  const summary = item.title || item.comment.split("\n")[0] || "Review item";
+  return `${idPrefix}${prefix} ${summary}`.slice(0, 120);
+}
+function buildIssueDescription(item, metadata) {
+  const reviewId = formatReviewItemIndexId(item);
+  return [
+    "df-web-review-kit issue",
+    "",
+    reviewId ? `Review ID: ${reviewId}` : null,
+    `Kind: ${item.kind}`,
+    `Page: ${item.routeKey || item.normalizedPath || "/"}`,
+    `Viewport: ${Math.round(item.viewport.width)}x${Math.round(item.viewport.height)}`,
+    item.scroll ? `Scroll: ${Math.round(item.scroll.x)},${Math.round(item.scroll.y)}` : null,
+    item.anchor?.selector ? `Selector: ${item.anchor.selector}` : null,
+    item.marker?.viewport ? `Point: ${Math.round(item.marker.viewport.x)},${Math.round(item.marker.viewport.y)}` : null,
+    item.selection?.viewport ? `Area: ${Math.round(item.selection.viewport.x)},${Math.round(item.selection.viewport.y)},${Math.round(item.selection.viewport.width)},${Math.round(item.selection.viewport.height)}` : null,
+    metadata.reviewUrl ? `Review link: ${metadata.reviewUrl}` : null,
+    "",
+    "Note:",
+    item.comment
+  ].filter((line) => line !== null).join("\n");
+}
+function formatReviewItemIndexId(item) {
+  if (typeof item.reviewNumber === "number" && item.reviewNumber > 0) {
+    return `#${item.reviewNumber}`;
+  }
+  return /^\d+$/.test(item.id) ? `#${item.id}` : void 0;
+}
+function buildReviewUrl(item, options, issueId) {
+  if (typeof window === "undefined") return void 0;
+  const prefix = options.reviewPathPrefix ?? "/review";
+  const url = new URL(prefix, window.location.origin);
+  url.searchParams.set("source", "df-sheet");
+  url.searchParams.set("target", item.routeKey || item.normalizedPath || "/");
+  url.searchParams.set("w", String(Math.round(item.viewport.width)));
+  url.searchParams.set("h", String(Math.round(item.viewport.height)));
+  if (issueId) url.searchParams.set("item", issueId);
+  return url.toString();
+}
+function buildIssueUrl(options, issueId) {
+  const path = `/projects/${options.projectId}/issues/${issueId}`;
+  return options.baseUrl ? new URL(path, getDfSheetBaseUrl(options)).toString() : path;
+}
+function toAbsoluteReviewUrl(path) {
+  if (typeof window === "undefined") return path;
+  return new URL(path, window.location.origin).toString();
+}
+function normalizeKind(value) {
+  return value === "area" ? "area" : "note";
+}
+function mapIssueStatus(value) {
+  if (value === "done" || value === "review" || value === "todo") return value;
+  if (value === "in_progress") return "doing";
+  if (value === "on_hold") return "hold";
+  return "todo";
+}
+
+// src/adapters/supabase.ts
+var DEFAULT_SUPABASE_REVIEW_TABLE = "review_items";
+var DEFAULT_SUPABASE_REVIEW_SOURCE = "supabase";
+var DEFAULT_SUPABASE_CREATE_REVIEW_ITEM_RPC = "create_review_item";
+function supabaseAdapter(options) {
+  const tableName = options.table ?? DEFAULT_SUPABASE_REVIEW_TABLE;
+  const source = options.source ?? DEFAULT_SUPABASE_REVIEW_SOURCE;
+  const fromTable = () => options.client.from(tableName);
+  return {
+    async get(id) {
+      const row = await unwrapResponse(
+        fromTable().select("*").eq("id", id).maybeSingle(),
+        "supabase get review item"
+      );
+      return row ? rowToReviewItem(row, options) : null;
+    },
+    async list(query) {
+      let request = fromTable().select("*").eq("project_id", query.projectId).eq("source", query.source ?? source);
+      const routeKey = query.routeKey ?? query.normalizedPath;
+      if (routeKey) {
+        request = request.eq("route_key", routeKey);
+      }
+      if (query.status) {
+        request = request.eq(
+          "status",
+          normalizeReviewItemStatus(query.status)
+        );
+      }
+      const rows = await unwrapResponse(
+        request.order("updated_at", { ascending: false }),
+        "supabase list review items"
+      );
+      return (rows ?? []).flatMap((row) => {
+        const item = rowToReviewItem(row, options);
+        return item ? [item] : [];
+      });
+    },
+    async create(item) {
+      const nextItem = normalizeItemForSupabaseCreate(item, source, options);
+      if (options.unsafeClientReviewNumberFallback) {
+        return createItemWithClientReviewNumber(
+          nextItem,
+          source,
+          options,
+          fromTable
+        );
+      }
+      return createItemWithRpc(nextItem, source, options);
+    },
+    async update(id, patch) {
+      const current = await this.get(id);
+      if (!current) throw new Error(`Review item not found: ${id}`);
+      const nextStatus = patch.status ? normalizeReviewItemStatus(patch.status) : current.status;
+      const nextItem = {
+        ...current,
+        ...patch,
+        id,
+        status: nextStatus,
+        createdAt: current.createdAt,
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      const patchRow = itemToRowPatch(nextItem, source, options);
+      const updated = await unwrapResponse(
+        fromTable().update(patchRow).eq("id", id).select("*").single(),
+        "supabase update review item"
+      );
+      return rowToReviewItem(updated, options) ?? nextItem;
+    },
+    async remove(id) {
+      await unwrapResponse(
+        fromTable().delete().eq("id", id),
+        "supabase delete review item"
+      );
+    }
+  };
+}
+function normalizeItemForSupabaseCreate(item, source, options) {
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  const id = createSupabaseReviewItemId();
+  const normalizedStatus = normalizeReviewItemStatus(item.status);
+  const routeKey = item.routeKey || item.normalizedPath || "/";
+  const viewport = item.viewport ?? { width: 390, height: 720 };
+  const nextItem = {
+    ...item,
+    id,
+    reviewNumber: void 0,
+    projectId: options.projectId,
+    routeKey,
+    normalizedPath: item.normalizedPath || routeKey,
+    viewport,
+    status: normalizedStatus,
+    externalIssueId: id,
+    externalIssueUrl: buildSupabaseReviewUrl(
+      { routeKey, normalizedPath: item.normalizedPath || routeKey, viewport },
+      source,
+      options,
+      id
+    ),
+    submittedAt: item.submittedAt ?? now,
+    submitStatus: item.submitStatus ?? "submitted",
+    createdAt: now,
+    updatedAt: now
+  };
+  return {
+    ...nextItem,
+    externalIssueUrl: nextItem.externalIssueUrl ?? buildSupabaseReviewUrl(nextItem, source, options)
+  };
+}
+async function createItemWithRpc(item, source, options) {
+  const rpcName = options.createRpc ?? DEFAULT_SUPABASE_CREATE_REVIEW_ITEM_RPC;
+  if (!options.client.rpc) {
+    throw new Error(
+      `supabase create review item: ${rpcName} rpc is required`
+    );
+  }
+  const row = await unwrapResponse(
+    options.client.rpc(rpcName, {
+      p_id: item.id,
+      p_project_id: options.projectId,
+      p_route_key: item.routeKey || item.normalizedPath || "/",
+      p_source: source,
+      p_status: normalizeReviewItemStatus(item.status),
+      p_item: item
+    }),
+    `supabase create review item rpc ${rpcName}`
+  );
+  return rowToReviewItem(row, options) ?? item;
+}
+async function createItemWithClientReviewNumber(item, source, options, fromTable) {
+  for (let attempt = 0; attempt < 5; attempt += 1) {
+    const reviewNumber = await getNextReviewNumber(
+      options.projectId,
+      source,
+      fromTable
+    );
+    const nextItem = { ...item, reviewNumber };
+    const row = itemToRow(nextItem, source, options);
+    const created = await fromTable().insert(row).select("*").single();
+    if (!created.error) {
+      return rowToReviewItem(created.data, options) ?? nextItem;
+    }
+    if (created.error.code === "23505" && attempt < 4) {
+      continue;
+    }
+    throw new Error(
+      `supabase create review item: ${created.error.message ?? created.error.code ?? "failed"}`
+    );
+  }
+  throw new Error("supabase create review item: failed");
+}
+async function getNextReviewNumber(projectId, source, fromTable) {
+  const rows = await unwrapResponse(
+    fromTable().select("review_number").eq("project_id", projectId).eq("source", source).order("review_number", { ascending: false }).limit(1),
+    "supabase get next review number"
+  );
+  const maxNumber = normalizeReviewNumber2(rows?.[0]?.review_number) ?? 0;
+  return maxNumber + 1;
+}
+function itemToRow(item, source, options) {
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  const updatedAt = item.updatedAt || now;
+  return {
+    id: item.id,
+    project_id: options.projectId,
+    route_key: item.routeKey || item.normalizedPath || "/",
+    source,
+    review_number: item.reviewNumber ?? null,
+    status: normalizeReviewItemStatus(item.status),
+    item: {
+      ...item,
+      projectId: options.projectId,
+      status: normalizeReviewItemStatus(item.status),
+      updatedAt
+    },
+    created_at: item.createdAt || now,
+    updated_at: updatedAt
+  };
+}
+function itemToRowPatch(item, source, options) {
+  const row = itemToRow(item, source, options);
+  return {
+    route_key: row.route_key,
+    review_number: row.review_number,
+    status: row.status,
+    item: row.item,
+    updated_at: row.updated_at
+  };
+}
+function rowToReviewItem(row, options) {
+  if (!row.item || typeof row.item !== "object") return null;
+  const item = row.item;
+  const status = normalizeReviewItemStatus(
+    row.status || item.status || "todo"
+  );
+  const routeKey = row.route_key || item.routeKey || item.normalizedPath || "/";
+  const viewport = item.viewport ?? { width: 390, height: 720 };
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    ...item,
+    id: row.id,
+    reviewNumber: row.review_number ?? item.reviewNumber,
+    projectId: row.project_id || item.projectId || options.projectId,
+    routeKey,
+    pageUrl: item.pageUrl || toAbsoluteReviewUrl2(routeKey),
+    normalizedPath: item.normalizedPath || routeKey,
+    kind: item.kind === "area" ? "area" : "note",
+    comment: item.comment || "",
+    status,
+    viewport,
+    externalIssueId: item.externalIssueId ?? row.id,
+    externalIssueUrl: item.externalIssueUrl ?? buildSupabaseReviewUrl(
+      { routeKey, normalizedPath: routeKey, viewport },
+      row.source,
+      options,
+      row.id
+    ),
+    submittedAt: item.submittedAt ?? row.created_at,
+    submitStatus: item.submitStatus ?? "submitted",
+    createdAt: item.createdAt ?? row.created_at ?? now,
+    updatedAt: row.updated_at ?? item.updatedAt ?? now
+  };
+}
+async function unwrapResponse(request, label) {
+  const { data, error } = await request;
+  if (error) {
+    throw new Error(`${label}: ${error.message ?? error.code ?? "failed"}`);
+  }
+  return data;
+}
+function buildSupabaseReviewUrl(item, source, options, itemId) {
+  if (typeof window === "undefined") return void 0;
+  const prefix = options.reviewPathPrefix ?? "/review";
+  const url = new URL(prefix, window.location.origin);
+  url.searchParams.set("source", source);
+  url.searchParams.set("target", item.routeKey || item.normalizedPath || "/");
+  url.searchParams.set("w", String(Math.round(item.viewport.width)));
+  url.searchParams.set("h", String(Math.round(item.viewport.height)));
+  if (itemId) url.searchParams.set("item", itemId);
+  return url.toString();
+}
+function toAbsoluteReviewUrl2(path) {
+  if (typeof window === "undefined") return path;
+  return new URL(path, window.location.origin).toString();
+}
+function normalizeReviewNumber2(value) {
+  if (typeof value !== "number") return void 0;
+  if (!Number.isInteger(value) || value < 1) return void 0;
+  return value;
+}
+function createSupabaseReviewItemId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `review-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+// src/core/overlay-style.ts
+function createStyleElement() {
+  const style = document.createElement("style");
+  style.textContent = `
+    :host {
+      color-scheme: dark;
+      --df-review-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --df-review-font-size-2xs: 10px;
+      --df-review-font-size-xs: 11px;
+      --df-review-font-size-sm: 12px;
+      --df-review-font-size-md: 13px;
+      --df-review-font-size-xl: 15px;
+      --df-review-space-1: 4px;
+      --df-review-space-1-5: 6px;
+      --df-review-space-2: 8px;
+      --df-review-space-2-5: 10px;
+      --df-review-space-3: 12px;
+      --df-review-space-3-5: 14px;
+      --df-review-space-4: 16px;
+      --df-review-control-height-sm: 32px;
+      --df-review-control-height-md: 34px;
+      --df-review-radius-xs: 3px;
+      --df-review-radius-sm: 6px;
+      --df-review-radius-md: 8px;
+      --df-review-radius-pill: 999px;
+      --df-review-color-canvas: #111820;
+      --df-review-color-panel: #1f2428;
+      --df-review-color-panel-strong: #15191d;
+      --df-review-color-control: #2c3338;
+      --df-review-color-control-hover: #3b444b;
+      --df-review-color-border: rgba(255, 255, 255, 0.14);
+      --df-review-color-border-strong: rgba(255, 255, 255, 0.18);
+      --df-review-color-text: #f7f7f2;
+      --df-review-color-text-muted: rgba(247, 247, 242, 0.62);
+      --df-review-color-text-subtle: rgba(247, 247, 242, 0.46);
+      --df-review-color-accent: #d7ff5f;
+      --df-review-color-accent-contrast: #171b1e;
+      --df-review-color-accent-soft: rgba(215, 255, 95, 0.16);
+      --df-review-color-accent-ring: rgba(215, 255, 95, 0.6);
+      --df-review-color-area: #63d7c7;
+      --df-review-color-error: #ffb7a7;
+      --df-review-shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.34);
+      --df-review-shadow-popover: 0 16px 38px rgba(0, 0, 0, 0.32);
+      --df-review-shadow-highlight: 0 10px 30px rgba(0, 0, 0, 0.22);
+      font-family: var(--df-review-font-sans);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .dfwr-shell {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 500;
+      pointer-events: none;
+    }
+
+    .dfwr-shell.is-open {
+      display: block;
+    }
+
+    .dfwr-panel {
+      position: fixed;
+      right: 16px;
+      top: 16px;
+      z-index: 3;
+      width: min(380px, calc(100vw - 32px));
+      max-height: calc(100vh - 32px);
+      overflow: auto;
+      pointer-events: auto;
+      color: var(--df-review-color-text);
+      background: var(--df-review-color-panel);
+      border: 1px solid var(--df-review-color-border);
+      border-radius: var(--df-review-radius-md);
+      box-shadow: var(--df-review-shadow-panel);
+    }
+
+    .dfwr-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 14px 14px 10px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .dfwr-title {
+      font-size: 15px;
+      font-weight: 700;
+      line-height: 1.25;
+    }
+
+    .dfwr-meta {
+      max-width: 292px;
+      margin-top: 4px;
+      overflow: hidden;
+      color: rgba(247, 247, 242, 0.56);
+      font-size: var(--df-review-font-size-xs);
+      line-height: 1.35;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dfwr-toolbar,
+    .dfwr-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 12px 14px;
+    }
+
+    .dfwr-body,
+    .dfwr-list {
+      padding: 0 14px 14px;
+    }
+
+    .dfwr-list {
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      padding-top: 12px;
+    }
+
+    .dfwr-button,
+    .dfwr-icon-button {
+      appearance: none;
+      border: 1px solid var(--df-review-color-border-strong);
+      background: var(--df-review-color-control);
+      color: var(--df-review-color-text);
+      cursor: pointer;
+      font: inherit;
+    }
+
+    .dfwr-button {
+      min-height: var(--df-review-control-height-md);
+      padding: 0 12px;
+      border-radius: var(--df-review-radius-sm);
+      font-size: var(--df-review-font-size-sm);
+      font-weight: 650;
+    }
+
+    .dfwr-button:hover,
+    .dfwr-icon-button:hover,
+    .dfwr-button.is-active {
+      border-color: rgba(255, 255, 255, 0.4);
+      background: var(--df-review-color-control-hover);
+    }
+
+    .dfwr-button.is-primary {
+      border-color: var(--df-review-color-accent);
+      background: var(--df-review-color-accent);
+      color: var(--df-review-color-accent-contrast);
+    }
+
+    .dfwr-icon-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 32px;
+      height: var(--df-review-control-height-sm);
+      padding: 0 8px;
+      border-radius: var(--df-review-radius-sm);
+      font-size: var(--df-review-font-size-xs);
+      font-weight: 700;
+      line-height: 1;
+      text-transform: uppercase;
+    }
+
+    .dfwr-marker-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    .dfwr-area-preview-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 3;
+      pointer-events: none;
+    }
+
+    .dfwr-selection-highlight {
+      position: fixed;
+      z-index: 1;
+      border: 2px solid #d7ff5f;
+      border-radius: var(--df-review-radius-xs);
+      background: rgba(215, 255, 95, 0.08);
+      box-shadow:
+        0 0 0 1px rgba(31, 36, 40, 0.72),
+        0 0 0 9999px rgba(0, 0, 0, 0.12),
+        0 10px 30px rgba(0, 0, 0, 0.22);
+      animation: dfwr-selection-pulse 900ms ease 0s 2;
+    }
+
+    .dfwr-selection-highlight.is-draft {
+      border-color: #63d7c7;
+      background: rgba(99, 215, 199, 0.1);
+      box-shadow:
+        0 0 0 1px rgba(31, 36, 40, 0.72),
+        0 0 0 9999px rgba(0, 0, 0, 0.08),
+        0 10px 30px rgba(0, 0, 0, 0.2);
+      animation: none;
+    }
+
+    .dfwr-dom-hover {
+      position: fixed;
+      z-index: 2;
+      border: 1px solid #d7ff5f;
+      border-radius: var(--df-review-radius-xs);
+      background: rgba(215, 255, 95, 0.1);
+      box-shadow:
+        0 0 0 1px rgba(31, 36, 40, 0.72),
+        0 0 0 9999px rgba(0, 0, 0, 0.08);
+      pointer-events: none;
+    }
+
+    .dfwr-dom-hover[hidden] {
+      display: none;
+    }
+
+    .dfwr-bound-marker,
+    .dfwr-item-scope {
+      --dfwr-scope: #7cc7ff;
+      --dfwr-scope-rgb: 124, 199, 255;
+    }
+
+    .dfwr-bound-marker.is-scope-tablet,
+    .dfwr-item-scope.is-scope-tablet {
+      --dfwr-scope: #63d7c7;
+      --dfwr-scope-rgb: 99, 215, 199;
+    }
+
+    .dfwr-bound-marker.is-scope-desktop,
+    .dfwr-item-scope.is-scope-desktop {
+      --dfwr-scope: #f3b75f;
+      --dfwr-scope-rgb: 243, 183, 95;
+    }
+
+    .dfwr-bound-marker.is-scope-wide,
+    .dfwr-item-scope.is-scope-wide {
+      --dfwr-scope: #c99cff;
+      --dfwr-scope-rgb: 201, 156, 255;
+    }
+
+    .dfwr-bound-marker.is-scope-dom,
+    .dfwr-item-scope.is-scope-dom {
+      --dfwr-scope: #ff8f61;
+      --dfwr-scope-rgb: 255, 143, 97;
+    }
+
+    .dfwr-item-target-highlight,
+    .dfwr-item-target-label {
+      --dfwr-item-color: #7cc7ff;
+      --dfwr-item-color-rgb: 124, 199, 255;
+    }
+
+    .dfwr-item-target-highlight.is-mode-area,
+    .dfwr-item-target-label.is-mode-area {
+      --dfwr-item-color: #63d7c7;
+      --dfwr-item-color-rgb: 99, 215, 199;
+    }
+
+    .dfwr-item-target-highlight.is-mode-dom,
+    .dfwr-item-target-label.is-mode-dom {
+      --dfwr-item-color: #ff8f61;
+      --dfwr-item-color-rgb: 255, 143, 97;
+    }
+
+    .dfwr-item-target-highlight {
+      position: fixed;
+      z-index: 2;
+      border: 2px solid var(--dfwr-item-color);
+      border-radius: 4px;
+      background: rgba(var(--dfwr-item-color-rgb), 0.08);
+      box-shadow:
+        0 0 0 1px rgba(31, 36, 40, 0.78),
+        0 0 0 9999px rgba(0, 0, 0, 0.08),
+        0 12px 30px rgba(0, 0, 0, 0.24);
+      pointer-events: none;
+    }
+
+    .dfwr-item-target-highlight.is-fallback {
+      border-style: dashed;
+    }
+
+    .dfwr-item-target-highlight.is-highlighted {
+      border-width: 3px;
+      background: rgba(var(--dfwr-item-color-rgb), 0.12);
+    }
+
+    .dfwr-item-target-highlight.is-highlighted::after {
+      content: "";
+      position: absolute;
+      inset: -6px;
+      border: 2px solid var(--dfwr-item-color);
+      border-radius: var(--df-review-radius-md);
+      opacity: 0;
+      animation: dfwr-target-ring-blink 1000ms ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    .dfwr-item-target-label {
+      position: fixed;
+      z-index: 3;
+      display: inline-flex;
+      align-items: center;
+      min-width: 24px;
+      height: 20px;
+      padding: 0 7px;
+      border: 1px solid var(--dfwr-item-color);
+      border-radius: 4px;
+      background: var(--dfwr-item-color);
+      box-shadow:
+        0 0 0 3px rgba(var(--dfwr-item-color-rgb), 0.2),
+        0 8px 18px rgba(0, 0, 0, 0.28);
+      color: #111820;
+      font-size: var(--df-review-font-size-2xs);
+      font-weight: 900;
+      line-height: 1;
+      pointer-events: none;
+    }
+
+    .dfwr-item-target-label.is-highlighted {
+      animation: dfwr-selected-blink 1000ms ease-in-out infinite;
+    }
+
+    .dfwr-bound-marker {
+      position: fixed;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      min-width: 28px;
+      height: 22px;
+      padding: 0 6px;
+      transform: translate(-50%, -50%);
+      border: 1px solid var(--dfwr-scope);
+      border-radius: var(--df-review-radius-pill);
+      background: var(--df-review-color-panel);
+      box-shadow: 0 0 0 4px rgba(var(--dfwr-scope-rgb), 0.18);
+      color: var(--dfwr-scope);
+      font-size: var(--df-review-font-size-2xs);
+      font-weight: 800;
+    }
+
+    .dfwr-bound-marker.is-highlighted {
+      min-width: 32px;
+      height: 26px;
+      border-width: 2px;
+      box-shadow:
+        0 0 0 5px rgba(var(--dfwr-scope-rgb), 0.22),
+        0 12px 26px rgba(0, 0, 0, 0.34);
+      animation: dfwr-selected-blink 1000ms ease-in-out infinite;
+    }
+
+    .dfwr-bound-marker.is-fallback {
+      border-style: dashed;
+    }
+
+    .dfwr-bound-marker.is-note-callout,
+    .dfwr-bound-marker.is-note-callout.is-highlighted {
+      --dfwr-scope: #7cc7ff;
+      --dfwr-scope-rgb: 124, 199, 255;
+      min-width: 0;
+      width: 0;
+      height: 0;
+      padding: 0;
+      transform: none;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      color: var(--dfwr-scope);
+      animation: none;
+      overflow: visible;
+    }
+
+    .dfwr-bound-marker.is-note-callout::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 8px;
+      height: 8px;
+      transform: translate(-50%, -50%);
+      border: 2px solid #111820;
+      border-radius: var(--df-review-radius-pill);
+      background: var(--dfwr-scope);
+      box-shadow:
+        0 0 0 3px rgba(var(--dfwr-scope-rgb), 0.22),
+        0 6px 16px rgba(0, 0, 0, 0.28);
+    }
+
+    .dfwr-bound-marker.is-note-callout.is-highlighted::before {
+      animation: dfwr-note-dot-pulse 1000ms ease-in-out infinite;
+    }
+
+    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-icon {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 31px;
+      height: 2px;
+      transform: rotate(-42deg);
+      transform-origin: left center;
+      border-radius: var(--df-review-radius-pill);
+      background: currentColor;
+      opacity: 1;
+    }
+
+    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-icon::before,
+    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-icon::after {
+      display: none;
+    }
+
+    .dfwr-bound-marker.is-note-callout .dfwr-bound-marker-number {
+      position: absolute;
+      left: 24px;
+      top: -41px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 28px;
+      height: 20px;
+      padding: 0 7px;
+      border: 1px solid var(--dfwr-scope);
+      border-radius: 4px;
+      background: var(--dfwr-scope);
+      box-shadow:
+        0 0 0 3px rgba(var(--dfwr-scope-rgb), 0.18),
+        0 8px 18px rgba(0, 0, 0, 0.28);
+      color: #111820;
+      text-align: center;
+      line-height: 1;
+      white-space: nowrap;
+    }
+
+    .dfwr-bound-marker.is-note-callout.is-highlighted .dfwr-bound-marker-icon,
+    .dfwr-bound-marker.is-note-callout.is-highlighted .dfwr-bound-marker-number {
+      animation: dfwr-selected-blink 1000ms ease-in-out infinite;
+    }
+
+    .dfwr-area-preview-layer .dfwr-bound-marker {
+      border-color: #63d7c7;
+      background: var(--df-review-color-panel);
+      box-shadow:
+        0 0 0 5px rgba(99, 215, 199, 0.2),
+        0 12px 26px rgba(0, 0, 0, 0.3);
+      color: #63d7c7;
+    }
+
+    .dfwr-bound-marker-icon {
+      position: relative;
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      flex: 0 0 auto;
+    }
+
+    .dfwr-bound-marker-icon::before,
+    .dfwr-bound-marker-icon::after {
+      content: "";
+      position: absolute;
+      display: block;
+    }
+
+    .dfwr-bound-marker-icon::before {
+      inset: 1px 2px;
+      border: 1.5px solid currentColor;
+      border-radius: 2px;
+    }
+
+    .dfwr-bound-marker.is-scope-mobile .dfwr-bound-marker-icon::before {
+      inset: 0 2.5px;
+      border-radius: 2px;
+    }
+
+    .dfwr-bound-marker.is-scope-tablet .dfwr-bound-marker-icon::before {
+      inset: 0.5px 1.5px;
+      border-radius: 2px;
+    }
+
+    .dfwr-bound-marker.is-scope-desktop .dfwr-bound-marker-icon::before {
+      inset: 1px 0 3px;
+      border-radius: 1px;
+    }
+
+    .dfwr-bound-marker.is-scope-desktop .dfwr-bound-marker-icon::after {
+      left: 3px;
+      right: 3px;
+      bottom: 0;
+      height: 1.5px;
+      background: currentColor;
+    }
+
+    .dfwr-bound-marker.is-scope-wide .dfwr-bound-marker-icon::before {
+      inset: 2px 0;
+      border-radius: 1px;
+    }
+
+    .dfwr-bound-marker.is-scope-dom .dfwr-bound-marker-icon::before {
+      inset: 2px;
+      border-radius: 1px;
+      transform: rotate(45deg);
+    }
+
+    .dfwr-bound-marker-number {
+      min-width: 6px;
+      text-align: center;
+      line-height: 1;
+    }
+
+    .dfwr-note-draft {
+      position: fixed;
+      inset: 0;
+      z-index: 4;
+      pointer-events: none;
+    }
+
+    .dfwr-note-pin {
+      appearance: none;
+      position: fixed;
+      z-index: 5;
+      width: 18px;
+      height: 18px;
+      padding: 0;
+      transform: translate(-50%, -50%);
+      border: 2px solid #1f2428;
+      border-radius: var(--df-review-radius-pill);
+      background: var(--df-review-color-accent);
+      box-shadow:
+        0 0 0 4px rgba(215, 255, 95, 0.22),
+        0 8px 18px rgba(0, 0, 0, 0.28);
+      cursor: grab;
+      pointer-events: auto;
+    }
+
+    .dfwr-note-pin:active {
+      cursor: grabbing;
+    }
+
+    .dfwr-note-popover {
+      position: fixed;
+      z-index: 4;
+      width: min(320px, calc(100vw - 24px));
+      padding: 12px;
+      pointer-events: auto;
+      color: var(--df-review-color-text);
+      background: var(--df-review-color-panel);
+      border: 1px solid rgba(215, 255, 95, 0.56);
+      border-radius: var(--df-review-radius-md);
+      box-shadow: var(--df-review-shadow-popover);
+    }
+
+    .dfwr-area-draft {
+      position: fixed;
+      right: 16px;
+      top: 16px;
+      z-index: 4;
+      width: min(360px, calc(100vw - 32px));
+      max-height: calc(100vh - 32px);
+      overflow: auto;
+      padding: 12px;
+      pointer-events: auto;
+      color: var(--df-review-color-text);
+      background: var(--df-review-color-panel);
+      border: 1px solid rgba(215, 255, 95, 0.56);
+      border-radius: var(--df-review-radius-md);
+      box-shadow: var(--df-review-shadow-popover);
+    }
+
+    .dfwr-note-popover .dfwr-actions {
+      padding: 0;
+    }
+
+    .dfwr-area-draft .dfwr-actions {
+      padding: 0;
+    }
+
+    .dfwr-form {
+      display: grid;
+      gap: 10px;
+    }
+
+    .dfwr-textarea {
+      width: 100%;
+      min-height: 92px;
+      resize: vertical;
+      border: 1px solid rgba(255, 255, 255, 0.16);
+      border-radius: var(--df-review-radius-sm);
+      padding: 10px;
+      color: var(--df-review-color-text);
+      background: var(--df-review-color-panel-strong);
+      font: inherit;
+      font-size: var(--df-review-font-size-md);
+      line-height: 1.45;
+    }
+
+    .dfwr-textarea:focus {
+      outline: 2px solid var(--df-review-color-accent-ring);
+      outline-offset: 1px;
+    }
+
+    .dfwr-empty,
+    .dfwr-error {
+      margin: 0;
+      color: rgba(247, 247, 242, 0.62);
+      font-size: var(--df-review-font-size-sm);
+      line-height: 1.45;
+    }
+
+    .dfwr-error {
+      color: var(--df-review-color-error);
+    }
+
+    .dfwr-preview,
+    .dfwr-thumb {
+      display: block;
+      width: 100%;
+      border: 1px solid var(--df-review-color-border);
+      border-radius: var(--df-review-radius-sm);
+      object-fit: cover;
+      background: var(--df-review-color-canvas);
+    }
+
+    .dfwr-preview {
+      max-height: 180px;
+    }
+
+    .dfwr-thumb {
+      max-height: 120px;
+      margin-top: 10px;
+    }
+
+    .dfwr-list-heading {
+      margin-bottom: 10px;
+      color: rgba(247, 247, 242, 0.74);
+      font-size: var(--df-review-font-size-sm);
+      font-weight: 700;
+    }
+
+    .dfwr-item {
+      display: flex;
+      gap: 12px;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+      cursor: pointer;
+    }
+
+    .dfwr-item:first-of-type {
+      border-top: 0;
+    }
+
+    .dfwr-item:focus-visible {
+      outline: 2px solid rgba(215, 255, 95, 0.72);
+      outline-offset: 4px;
+    }
+
+    .dfwr-item-body {
+      min-width: 0;
+      flex: 1;
+    }
+
+    .dfwr-item-badges {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    .dfwr-item-scope,
+    .dfwr-item-kind {
+      display: inline-flex;
+      align-items: center;
+      min-height: 20px;
+      border-radius: var(--df-review-radius-pill);
+      padding: 0 7px;
+      font-size: var(--df-review-font-size-2xs);
+      font-weight: 800;
+      line-height: 1;
+      letter-spacing: 0;
+      text-transform: uppercase;
+    }
+
+    .dfwr-item-scope {
+      border: 1px solid rgba(var(--dfwr-scope-rgb), 0.38);
+      background: rgba(var(--dfwr-scope-rgb), 0.12);
+      color: var(--dfwr-scope);
+    }
+
+    .dfwr-item-kind {
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      background: rgba(255, 255, 255, 0.05);
+      color: rgba(247, 247, 242, 0.64);
+    }
+
+    .dfwr-item-comment {
+      margin: 4px 0;
+      color: var(--df-review-color-text);
+      font-size: var(--df-review-font-size-md);
+      line-height: 1.42;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+    }
+
+    .dfwr-item-date {
+      color: rgba(247, 247, 242, 0.46);
+      font-size: var(--df-review-font-size-xs);
+    }
+
+    .dfwr-item-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex: 0 0 auto;
+    }
+
+    .dfwr-text-layer,
+    .dfwr-element-layer,
+    .dfwr-area-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1;
+      pointer-events: auto;
+    }
+
+    .dfwr-text-layer {
+      cursor: crosshair;
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .dfwr-element-layer {
+      cursor: cell;
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .dfwr-area-layer {
+      cursor: crosshair;
+      background: rgba(0, 0, 0, 0.22);
+    }
+
+    .dfwr-area-box {
+      position: fixed;
+      z-index: 2;
+      width: 0;
+      height: 0;
+      border: 1px solid #d7ff5f;
+      background: rgba(215, 255, 95, 0.16);
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
+    }
+
+    @keyframes dfwr-marker-pulse {
+      0% {
+        transform: translate(-50%, -50%) scale(0.92);
+      }
+      45% {
+        transform: translate(-50%, -50%) scale(1.1);
+      }
+      100% {
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+
+    @keyframes dfwr-note-dot-pulse {
+      0% {
+        transform: translate(-50%, -50%) scale(0.88);
+      }
+      45% {
+        transform: translate(-50%, -50%) scale(1.3);
+      }
+      100% {
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+
+    @keyframes dfwr-selected-blink {
+      0%,
+      100% {
+        opacity: 0.78;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes dfwr-target-ring-blink {
+      0%,
+      100% {
+        opacity: 0;
+        transform: scale(0.98);
+      }
+      50% {
+        opacity: 0.82;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes dfwr-selection-pulse {
+      0% {
+        opacity: 0.72;
+      }
+      45% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.86;
+      }
+    }
+
+    @media (max-width: 520px) {
+      .dfwr-panel {
+        right: 8px;
+        top: 8px;
+        width: calc(100vw - 16px);
+        max-height: calc(100vh - 16px);
+      }
+    }
+  `;
+  return style;
+}
+
+// src/core/review-scope.ts
+var DEFAULT_REVIEW_VIEWPORTS = [
+  { label: "Mobile", width: 390, height: 720, scope: "mobile" },
+  { label: "Tablet", width: 768, height: 1024, scope: "tablet" },
+  { label: "Desktop", width: 1440, height: 900, scope: "desktop" },
+  { label: "Wide", width: 1980, height: 1080, scope: "wide" }
+];
+var REVIEW_SCOPE_LABELS = {
+  mobile: "Mobile",
+  tablet: "Tablet",
+  desktop: "Desktop",
+  wide: "Wide",
+  dom: "Element"
+};
+var normalizeReviewItemScope = (value) => {
+  if (value === "element") return "dom";
+  if (value === "mobile" || value === "tablet" || value === "desktop" || value === "wide" || value === "dom") {
+    return value;
+  }
+  return void 0;
+};
+var getViewportPresetDistance = (preset, viewport) => Math.abs(preset.width - viewport.width) + Math.abs(preset.height - viewport.height);
+var inferViewportScope = (preset) => {
+  if (preset.scope) return preset.scope;
+  const label = preset.label.toLowerCase();
+  if (label.includes("mobile") || label.includes("phone")) return "mobile";
+  if (label.includes("tablet") || label.includes("pad")) return "tablet";
+  if (label.includes("wide") || label.includes("1980") || label.includes("1940") || label.includes("1920")) {
+    return "wide";
+  }
+  if (label.includes("desktop")) return "desktop";
+  if (preset.width >= 1800) return "wide";
+  if (preset.width >= 1e3) return "desktop";
+  if (preset.width >= 700) return "tablet";
+  return "mobile";
+};
+function findReviewViewportPreset(viewport, presets = DEFAULT_REVIEW_VIEWPORTS) {
+  const fallback = presets[0] ?? DEFAULT_REVIEW_VIEWPORTS[0];
+  const exact = presets.find(
+    (preset) => preset.width === viewport.width && preset.height === viewport.height
+  );
+  if (exact) return exact;
+  return presets.reduce((closest, preset) => {
+    const closestDistance = getViewportPresetDistance(closest, viewport);
+    const presetDistance = getViewportPresetDistance(preset, viewport);
+    return presetDistance < closestDistance ? preset : closest;
+  }, fallback);
+}
+function getReviewViewportScope(viewport, presets = DEFAULT_REVIEW_VIEWPORTS) {
+  return inferViewportScope(findReviewViewportPreset(viewport, presets));
+}
+function getReviewItemScope(item, presets = DEFAULT_REVIEW_VIEWPORTS) {
+  const scope = normalizeReviewItemScope(item.scope);
+  if (scope && scope !== "dom") return scope;
+  return getReviewViewportScope(item.viewport, presets);
+}
+function getReviewItemScopeLabel(item, presets = DEFAULT_REVIEW_VIEWPORTS) {
+  const scope = getReviewItemScope(item, presets);
+  if (scope === "dom") return REVIEW_SCOPE_LABELS.dom;
+  const preset = findReviewViewportPreset(item.viewport, presets);
+  return preset.label || REVIEW_SCOPE_LABELS[scope];
+}
+function getNumberedReviewItems(items, presets = DEFAULT_REVIEW_VIEWPORTS) {
+  const numbers = /* @__PURE__ */ new Map();
+  const usedNumbers = /* @__PURE__ */ new Set();
+  let nextNumber = getNextReviewItemNumber(items);
+  [...items].sort((a, b) => {
+    const createdOrder = a.createdAt.localeCompare(b.createdAt);
+    if (createdOrder !== 0) return createdOrder;
+    return a.id.localeCompare(b.id);
+  }).forEach((item) => {
+    const storedNumber = getReviewItemNumber(item);
+    const number = storedNumber && !usedNumbers.has(storedNumber) ? storedNumber : nextNumber++;
+    usedNumbers.add(number);
+    numbers.set(item.id, number);
+  });
+  return items.map((item) => {
+    const scope = getReviewItemScope(item, presets);
+    const label = getReviewItemScopeLabel(item, presets);
+    const number = numbers.get(item.id) ?? 0;
+    return {
+      item,
+      scope,
+      label,
+      number,
+      displayLabel: `#${number}`
+    };
+  });
+}
+function getReviewItemNumber(item) {
+  return normalizeReviewNumber3(item.reviewNumber);
+}
+function getNextReviewItemNumber(items) {
+  const maxNumber = items.reduce((max, item) => {
+    const number = getReviewItemNumber(item);
+    return number ? Math.max(max, number) : max;
+  }, 0);
+  return maxNumber + 1;
+}
+function normalizeReviewNumber3(value) {
+  if (typeof value !== "number") return void 0;
+  if (!Number.isInteger(value) || value < 1) return void 0;
+  return value;
+}
+
+// src/core/web-review-kit-app.ts
+var ROOT_ID = "df-web-review-kit-root";
+var INTERNAL_QUERY_PARAMS = ["__dfwr_target"];
+function createWebReviewKit(options) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return createNoopController();
+  }
+  const app = new WebReviewKitApp(options);
+  app.mount();
+  return {
+    open: () => app.open(),
+    close: () => app.close(),
+    toggle: () => app.toggle(),
+    setMode: (mode) => app.setMode(mode),
+    getMode: () => app.getMode(),
+    highlightItem: (itemId) => app.highlightItem(itemId),
+    setHiddenItemIds: (itemIds) => app.setHiddenItemIds(itemIds),
+    reload: () => app.reload(),
+    getItems: () => app.getItems(),
+    destroy: () => app.destroy()
+  };
+}
+var WebReviewKitApp = class {
+  constructor(options) {
+    this.options = options;
+    this.isOpen = false;
+    this.mode = "idle";
+    this.items = [];
+    this.isSelectingArea = false;
+    this.handleKeyDown = (event) => {
+      if (event.key === "Escape" && this.cancelMode()) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (!isHotkey(event, this.hotkey)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.toggle();
+    };
+    this.handleViewportChange = () => {
+      if (!this.isOpen || this.renderFrame) return;
+      this.renderFrame = window.requestAnimationFrame(() => {
+        this.renderFrame = void 0;
+        this.render();
+      });
+    };
+    this.adapter = options.adapter ?? localAdapter();
+    this.hotkey = options.hotkeys?.qa ?? "Shift+Q";
+  }
+  mount() {
+    if (this.root) return;
+    const existing = document.getElementById(ROOT_ID);
+    if (existing) existing.remove();
+    this.root = document.createElement("div");
+    this.root.id = ROOT_ID;
+    this.root.style.display = "contents";
+    this.shadow = this.root.attachShadow({ mode: "open" });
+    document.body.appendChild(this.root);
+    document.addEventListener("keydown", this.handleKeyDown, true);
+    window.addEventListener("scroll", this.handleViewportChange, true);
+    window.addEventListener("resize", this.handleViewportChange);
+    this.render();
+  }
+  destroy() {
+    document.removeEventListener("keydown", this.handleKeyDown, true);
+    window.removeEventListener("scroll", this.handleViewportChange, true);
+    window.removeEventListener("resize", this.handleViewportChange);
+    if (this.renderFrame) {
+      window.cancelAnimationFrame(this.renderFrame);
+      this.renderFrame = void 0;
+    }
+    this.root?.remove();
+    this.root = void 0;
+    this.shadow = void 0;
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    void this.reload();
+  }
+  close() {
+    this.isOpen = false;
+    this.setModeState("idle");
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    this.isSelectingArea = false;
+    this.render();
+  }
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+      return;
+    }
+    this.open();
+  }
+  setMode(mode) {
+    if (!this.isOpen) {
+      this.isOpen = true;
+    }
+    this.setModeState(this.mode === mode ? "idle" : mode);
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    this.render();
+  }
+  getMode() {
+    return this.mode;
+  }
+  getItems() {
+    return this.items;
+  }
+  highlightItem(itemId) {
+    if (!itemId) {
+      this.clearHighlightedItem();
+      return;
+    }
+    if (!this.isOpen) {
+      this.isOpen = true;
+    }
+    this.highlightedItemId = itemId;
+    this.render();
+  }
+  setHiddenItemIds(itemIds) {
+    this.hiddenItemIds = itemIds ? new Set(itemIds) : void 0;
+    this.updateHiddenItemsStyle();
+  }
+  clearHighlightedItem() {
+    if (!this.highlightedItemId) return;
+    this.highlightedItemId = void 0;
+    this.render();
+  }
+  createHiddenItemsStyleElement() {
+    const style = document.createElement("style");
+    style.dataset.dfwrHiddenItems = "true";
+    style.textContent = this.getHiddenItemsCss();
+    return style;
+  }
+  updateHiddenItemsStyle() {
+    if (!this.shadow) return;
+    let style = this.shadow.querySelector(
+      'style[data-dfwr-hidden-items="true"]'
+    );
+    if (!style) {
+      style = this.createHiddenItemsStyleElement();
+      this.shadow.prepend(style);
+      return;
+    }
+    style.textContent = this.getHiddenItemsCss();
+  }
+  getHiddenItemsCss() {
+    if (!this.hiddenItemIds?.size) return "";
+    return Array.from(this.hiddenItemIds).map(
+      (itemId) => `[data-review-item-id="${cssEscape(itemId)}"] { display: none !important; }`
+    ).join("\n");
+  }
+  setModeState(mode) {
+    if (this.mode === mode) return;
+    this.mode = mode;
+    this.options.onModeChange?.(mode);
+  }
+  cancelMode() {
+    if (this.mode === "idle" && !this.noteDraft && !this.areaDraft && !this.isSelectingArea) {
+      return false;
+    }
+    this.setModeState("idle");
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    this.isSelectingArea = false;
+    this.render();
+    return true;
+  }
+  getEnvironment() {
+    const target = typeof this.options.target === "function" ? this.options.target() : this.options.target;
+    if (!target) {
+      return {
+        window,
+        document,
+        viewportRect: {
+          left: 0,
+          top: 0,
+          width: window.innerWidth,
+          height: window.innerHeight
+        },
+        overlayRect: {
+          left: 0,
+          top: 0,
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      };
+    }
+    try {
+      const rect = target.getViewportRect?.() ?? {
+        left: 0,
+        top: 0,
+        width: target.window.innerWidth,
+        height: target.window.innerHeight
+      };
+      const overlayRect = target.getOverlayRect?.() ?? rect;
+      return {
+        window: target.window,
+        document: target.document,
+        viewportRect: {
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height
+        },
+        overlayRect: {
+          left: overlayRect.left,
+          top: overlayRect.top,
+          width: overlayRect.width,
+          height: overlayRect.height
+        }
+      };
+    } catch {
+      return void 0;
+    }
+  }
+  async reload() {
+    const environment = this.getEnvironment();
+    if (!environment) return this.items;
+    this.items = await this.adapter.list({
+      projectId: this.options.projectId,
+      routeKey: getRouteKey(environment)
+    });
+    this.options.onItemsChange?.(this.items);
+    if (this.isOpen) {
+      this.render();
+    }
+    return this.items;
+  }
+  render() {
+    if (!this.shadow) return;
+    this.shadow.replaceChildren();
+    this.shadow.append(createStyleElement());
+    this.shadow.append(this.createHiddenItemsStyleElement());
+    const shell = document.createElement("div");
+    shell.className = `dfwr-shell${this.isOpen ? " is-open" : ""}`;
+    shell.setAttribute("aria-hidden", this.isOpen ? "false" : "true");
+    if (this.options.ui?.panel !== false) {
+      this.panel = document.createElement("div");
+      this.panel.className = "dfwr-panel";
+      this.panel.setAttribute("role", "dialog");
+      this.panel.setAttribute("aria-label", "Web review kit");
+      this.panel.append(
+        this.createHeader(),
+        this.createToolbar(),
+        this.createBody(),
+        this.createList()
+      );
+      shell.append(this.panel);
+    } else {
+      this.panel = void 0;
+    }
+    shell.append(this.createMarkerLayer());
+    if (this.isOpen && (this.mode === "note" || this.mode === "element")) {
+      shell.append(
+        this.noteDraft ? this.createNotePopover(this.noteDraft) : this.mode === "element" ? this.createElementLayer() : this.createNoteLayer()
+      );
+    }
+    if (this.isOpen && this.mode === "area" && !this.areaDraft) {
+      shell.append(this.createAreaLayer());
+    }
+    if (this.isOpen && this.mode === "area" && this.areaDraft && this.options.ui?.panel === false) {
+      if (this.areaDraft.selection) {
+        shell.append(this.createAreaDraftOverlay(this.areaDraft));
+      }
+      shell.append(this.createAreaDraftPopover(this.areaDraft));
+    }
+    this.shadow.append(shell);
+  }
+  createHeader() {
+    const header = document.createElement("div");
+    header.className = "dfwr-header";
+    const title = document.createElement("div");
+    title.className = "dfwr-title";
+    title.textContent = "Review Kit";
+    const meta = document.createElement("div");
+    meta.className = "dfwr-meta";
+    meta.textContent = getRouteKey(this.getEnvironment());
+    const titleGroup = document.createElement("div");
+    titleGroup.append(title, meta);
+    const close = document.createElement("button");
+    close.className = "dfwr-icon-button";
+    close.type = "button";
+    close.textContent = "x";
+    close.setAttribute("aria-label", "Close");
+    close.addEventListener("click", () => this.close());
+    header.append(titleGroup, close);
+    return header;
+  }
+  createToolbar() {
+    const toolbar = document.createElement("div");
+    toolbar.className = "dfwr-toolbar";
+    toolbar.append(
+      this.createToolbarButton("Note", this.mode === "note", () => {
+        this.setModeState(this.mode === "note" ? "idle" : "note");
+        this.noteDraft = void 0;
+        this.areaDraft = void 0;
+        this.render();
+      }),
+      this.createToolbarButton("Element", this.mode === "element", () => {
+        this.setModeState(this.mode === "element" ? "idle" : "element");
+        this.noteDraft = void 0;
+        this.areaDraft = void 0;
+        this.render();
+      }),
+      this.createToolbarButton(
+        this.isSelectingArea ? "Selecting" : "Area",
+        this.mode === "area",
+        () => {
+          this.setModeState(this.mode === "area" ? "idle" : "area");
+          this.noteDraft = void 0;
+          this.areaDraft = void 0;
+          this.render();
+        }
+      ),
+      this.createToolbarButton("Refresh", false, () => {
+        void this.reload();
+      })
+    );
+    return toolbar;
+  }
+  createToolbarButton(label, active, onClick) {
+    const button = document.createElement("button");
+    button.className = `dfwr-button${active ? " is-active" : ""}`;
+    button.type = "button";
+    button.textContent = label;
+    button.addEventListener("click", onClick);
+    return button;
+  }
+  createBody() {
+    const body = document.createElement("div");
+    body.className = "dfwr-body";
+    if (this.mode === "idle") {
+      const empty = document.createElement("p");
+      empty.className = "dfwr-empty";
+      empty.textContent = "Add a note or mark an area.";
+      body.append(empty);
+      return body;
+    }
+    if (this.mode === "note" || this.mode === "element") {
+      body.append(this.createNoteBody());
+      return body;
+    }
+    body.append(this.createAreaForm());
+    return body;
+  }
+  createNoteBody() {
+    const empty = document.createElement("p");
+    empty.className = "dfwr-empty";
+    empty.textContent = this.noteDraft ? "Write the note in the page box." : this.mode === "element" ? "Click an element to add QA." : "Click on the page to place a note.";
+    return empty;
+  }
+  createNotePopover(draft) {
+    const environment = this.getEnvironment();
+    const group = document.createElement("div");
+    group.className = "dfwr-note-draft";
+    if (!environment) return group;
+    const hostPoint = toHostPoint(draft.marker.viewport, environment);
+    if (draft.selection) {
+      group.append(
+        this.createSelectionHighlight(
+          toViewportSelection(draft.selection.viewport),
+          environment,
+          true
+        )
+      );
+    }
+    const pin = document.createElement("button");
+    pin.className = "dfwr-note-pin";
+    pin.type = "button";
+    pin.setAttribute("aria-label", "Move note point");
+    pin.style.left = `${hostPoint.x}px`;
+    pin.style.top = `${hostPoint.y}px`;
+    const popover = document.createElement("div");
+    const position = getPopoverPosition(hostPoint, environment);
+    popover.className = "dfwr-note-popover";
+    popover.style.left = `${position.left}px`;
+    popover.style.top = `${position.top}px`;
+    const form = document.createElement("form");
+    form.className = "dfwr-form";
+    const meta = document.createElement("div");
+    meta.className = "dfwr-item-date";
+    meta.textContent = formatNoteDraftMeta(draft);
+    const textarea = document.createElement("textarea");
+    textarea.className = "dfwr-textarea";
+    textarea.placeholder = "Review comment";
+    textarea.rows = 4;
+    textarea.value = draft.comment ?? "";
+    textarea.addEventListener("input", () => {
+      if (!this.noteDraft) return;
+      this.noteDraft = {
+        ...this.noteDraft,
+        comment: textarea.value
+      };
+    });
+    const actions = this.createFormActions("Save note", () => {
+      const comment = textarea.value.trim();
+      if (!comment) return;
+      void this.createItem({
+        kind: "note",
+        comment,
+        viewport: draft.viewport,
+        anchor: draft.anchor,
+        marker: draft.marker,
+        selection: draft.selection
+      });
+    });
+    form.append(meta, textarea, actions);
+    popover.append(form);
+    group.append(pin, popover);
+    this.attachDraftPinDrag(pin, popover, meta, textarea);
+    window.setTimeout(() => textarea.focus(), 0);
+    return group;
+  }
+  createAreaForm() {
+    const form = document.createElement("form");
+    form.className = "dfwr-form";
+    if (!this.areaDraft) {
+      const empty = document.createElement("p");
+      empty.className = "dfwr-empty";
+      empty.textContent = "Drag on the page to select an area.";
+      form.append(empty);
+      return form;
+    }
+    const meta = document.createElement("div");
+    meta.className = "dfwr-item-date";
+    meta.textContent = formatAreaDraftMeta(this.areaDraft);
+    form.append(meta);
+    const textarea = document.createElement("textarea");
+    textarea.className = "dfwr-textarea";
+    textarea.placeholder = "Area comment";
+    textarea.rows = 4;
+    const actions = this.createFormActions("Save area", () => {
+      const comment = textarea.value.trim();
+      if (!comment || !this.areaDraft) return;
+      void this.createItem({
+        kind: "area",
+        comment,
+        viewport: this.areaDraft.viewport,
+        anchor: this.areaDraft.anchor,
+        marker: this.areaDraft.marker,
+        selection: this.areaDraft.selection
+      });
+    });
+    form.append(textarea, actions);
+    return form;
+  }
+  createAreaDraftOverlay(draft) {
+    const layer = document.createElement("div");
+    layer.className = "dfwr-area-preview-layer";
+    const environment = this.getEnvironment();
+    if (!environment || !draft.selection) return layer;
+    const selection = toViewportSelection(draft.selection.viewport);
+    layer.append(this.createSelectionHighlight(selection, environment, true));
+    if (draft.marker) {
+      const hostPoint = toHostPoint(draft.marker.viewport, environment);
+      layer.append(
+        this.createMarkerElement(
+          void 0,
+          hostPoint,
+          "\u2022",
+          getReviewViewportScope(
+            draft.viewport,
+            this.options.viewports?.presets
+          ),
+          true,
+          true
+        )
+      );
+    }
+    return layer;
+  }
+  createAreaDraftPopover(draft) {
+    const environment = this.getEnvironment();
+    const popover = document.createElement("div");
+    popover.className = "dfwr-area-draft";
+    if (environment && draft.selection) {
+      const selection = toHostSelection(
+        toViewportSelection(draft.selection.viewport),
+        environment
+      );
+      const position = getAreaPopoverPosition(selection, environment);
+      popover.style.left = `${position.left}px`;
+      popover.style.top = `${position.top}px`;
+      popover.style.right = "auto";
+    }
+    popover.append(this.createAreaForm());
+    return popover;
+  }
+  createFormActions(saveLabel, onSave) {
+    const actions = document.createElement("div");
+    actions.className = "dfwr-actions";
+    const save = document.createElement("button");
+    save.className = "dfwr-button is-primary";
+    save.type = "button";
+    save.textContent = saveLabel;
+    save.addEventListener("click", onSave);
+    const cancel = document.createElement("button");
+    cancel.className = "dfwr-button";
+    cancel.type = "button";
+    cancel.textContent = "Cancel";
+    cancel.addEventListener("click", () => {
+      this.setModeState("idle");
+      this.noteDraft = void 0;
+      this.areaDraft = void 0;
+      this.render();
+    });
+    actions.append(save, cancel);
+    return actions;
+  }
+  createList() {
+    const section = document.createElement("div");
+    section.className = "dfwr-list";
+    const heading = document.createElement("div");
+    heading.className = "dfwr-list-heading";
+    heading.textContent = `Review items (${this.items.length})`;
+    section.append(heading);
+    if (this.items.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "dfwr-empty";
+      empty.textContent = "No review items on this page.";
+      section.append(empty);
+      return section;
+    }
+    for (const numberedItem of getNumberedReviewItems(
+      this.items,
+      this.options.viewports?.presets
+    )) {
+      section.append(this.createListItem(numberedItem));
+    }
+    return section;
+  }
+  createListItem(numberedItem) {
+    const { item } = numberedItem;
+    const row = document.createElement("article");
+    row.className = "dfwr-item";
+    row.tabIndex = 0;
+    row.setAttribute("role", "button");
+    row.setAttribute(
+      "aria-label",
+      `Restore review item: ${item.title ?? item.comment}`
+    );
+    row.addEventListener("click", () => {
+      void this.restoreItem(item);
+    });
+    row.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      void this.restoreItem(item);
+    });
+    const body = document.createElement("div");
+    body.className = "dfwr-item-body";
+    const badges = document.createElement("div");
+    badges.className = "dfwr-item-badges";
+    const scope = document.createElement("div");
+    scope.className = `dfwr-item-scope is-scope-${numberedItem.scope}`;
+    scope.textContent = numberedItem.displayLabel;
+    const kind = document.createElement("div");
+    kind.className = "dfwr-item-kind";
+    kind.textContent = item.kind;
+    badges.append(scope, kind);
+    const comment = document.createElement("p");
+    comment.className = "dfwr-item-comment";
+    comment.textContent = item.comment;
+    const date = document.createElement("time");
+    date.className = "dfwr-item-date";
+    date.dateTime = item.createdAt;
+    date.textContent = formatItemMeta(item);
+    body.append(badges, comment, date);
+    const actions = document.createElement("div");
+    actions.className = "dfwr-item-actions";
+    actions.addEventListener("click", (event) => event.stopPropagation());
+    actions.addEventListener("keydown", (event) => event.stopPropagation());
+    const remove = document.createElement("button");
+    remove.className = "dfwr-icon-button";
+    remove.type = "button";
+    remove.textContent = "x";
+    remove.setAttribute("aria-label", "Delete");
+    remove.addEventListener("click", (event) => {
+      event.stopPropagation();
+      void this.adapter.remove(item.id).then(() => this.reload());
+    });
+    actions.append(remove);
+    row.append(body, actions);
+    return row;
+  }
+  createMarkerLayer() {
+    const layer = document.createElement("div");
+    layer.className = "dfwr-marker-layer";
+    const environment = this.getEnvironment();
+    if (!environment) return layer;
+    const currentScope = getReviewViewportScope(
+      getViewportSize(environment),
+      this.options.viewports?.presets
+    );
+    getNumberedReviewItems(
+      this.items,
+      this.options.viewports?.presets
+    ).forEach((numberedItem) => {
+      const { item, scope, number, displayLabel } = numberedItem;
+      if (!shouldShowMarkerForScope(scope, currentScope)) {
+        return;
+      }
+      const isHighlighted = item.id === this.highlightedItemId;
+      const highlightMode = getReviewItemHighlightMode(item);
+      if (highlightMode !== "note") {
+        const selection = getItemHighlightSelection(item, environment);
+        if (selection) {
+          layer.append(
+            ...this.createItemHighlightElements(
+              selection.viewport,
+              environment,
+              item,
+              String(number),
+              selection.isBound,
+              isHighlighted
+            )
+          );
+          return;
+        }
+      }
+      const point = getBoundMarkerPoint(item, environment);
+      if (!point || !isPointInViewport(point.viewport, environment)) {
+        return;
+      }
+      const hostPoint = toHostPoint(point.viewport, environment);
+      const marker = this.createMarkerElement(
+        item.id,
+        hostPoint,
+        String(number),
+        scope,
+        point.isBound,
+        isHighlighted,
+        highlightMode === "note" ? "note" : "default"
+      );
+      marker.title = `${displayLabel} / ${item.comment}
+${formatItemMeta(item)}`;
+      layer.append(marker);
+    });
+    return layer;
+  }
+  createItemHighlightElements(selection, environment, item, label, isBound, isHighlighted) {
+    const rect = toHostSelection(selection, environment);
+    const mode = getReviewItemHighlightMode(item);
+    const highlight = document.createElement("div");
+    highlight.className = [
+      "dfwr-item-target-highlight",
+      `is-mode-${mode}`,
+      isBound ? "is-bound" : "is-fallback",
+      isHighlighted ? "is-highlighted" : ""
+    ].filter(Boolean).join(" ");
+    highlight.style.left = `${rect.left}px`;
+    highlight.style.top = `${rect.top}px`;
+    highlight.style.width = `${rect.width}px`;
+    highlight.style.height = `${rect.height}px`;
+    highlight.dataset.reviewItemId = item.id;
+    const labelElement = document.createElement("div");
+    labelElement.className = [
+      "dfwr-item-target-label",
+      `is-mode-${mode}`,
+      isHighlighted ? "is-highlighted" : ""
+    ].filter(Boolean).join(" ");
+    labelElement.textContent = `#${label}`;
+    labelElement.style.left = `${Math.max(4, rect.left)}px`;
+    labelElement.style.top = `${Math.max(4, rect.top - 24)}px`;
+    labelElement.dataset.reviewItemId = item.id;
+    return [highlight, labelElement];
+  }
+  createSelectionHighlight(selection, environment, isDraft) {
+    const rect = toHostSelection(selection, environment);
+    const highlight = document.createElement("div");
+    highlight.className = `dfwr-selection-highlight${isDraft ? " is-draft" : ""}`;
+    highlight.style.left = `${rect.left}px`;
+    highlight.style.top = `${rect.top}px`;
+    highlight.style.width = `${rect.width}px`;
+    highlight.style.height = `${rect.height}px`;
+    return highlight;
+  }
+  createMarkerElement(itemId, hostPoint, label, scope, isBound, isHighlighted, variant = "default") {
+    const isNoteCallout = variant === "note";
+    const marker = document.createElement("div");
+    marker.className = [
+      "dfwr-bound-marker",
+      isNoteCallout ? "is-note-callout" : "",
+      `is-scope-${scope}`,
+      isBound ? "is-bound" : "is-fallback",
+      isHighlighted ? "is-highlighted" : ""
+    ].filter(Boolean).join(" ");
+    marker.style.left = `${hostPoint.x}px`;
+    marker.style.top = `${hostPoint.y}px`;
+    marker.dataset.scope = scope;
+    if (itemId) {
+      marker.dataset.reviewItemId = itemId;
+    }
+    const iconElement = document.createElement("span");
+    iconElement.className = "dfwr-bound-marker-icon";
+    iconElement.setAttribute("aria-hidden", "true");
+    const labelElement = document.createElement("span");
+    labelElement.className = "dfwr-bound-marker-number";
+    labelElement.textContent = isNoteCallout ? `#${label}` : label;
+    marker.append(iconElement, labelElement);
+    return marker;
+  }
+  attachDraftPinDrag(pin, popover, meta, textarea) {
+    let isDragging = false;
+    const moveDraftUi = (hostPoint) => {
+      const environment = this.getEnvironment();
+      if (!environment) return;
+      const nextPoint = clampPoint(toTargetPoint(hostPoint, environment), environment);
+      const nextHostPoint = toHostPoint(nextPoint, environment);
+      const position = getPopoverPosition(nextHostPoint, environment);
+      pin.style.left = `${nextHostPoint.x}px`;
+      pin.style.top = `${nextHostPoint.y}px`;
+      popover.style.left = `${position.left}px`;
+      popover.style.top = `${position.top}px`;
+      if (!this.noteDraft) return;
+      this.noteDraft = {
+        ...this.noteDraft,
+        marker: {
+          ...this.noteDraft.marker,
+          viewport: roundPoint(nextPoint)
+        },
+        comment: textarea.value
+      };
+      meta.textContent = formatNoteDraftMeta(this.noteDraft);
+    };
+    pin.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      isDragging = true;
+      pin.setPointerCapture(event.pointerId);
+    });
+    pin.addEventListener("pointermove", (event) => {
+      if (!isDragging || !pin.hasPointerCapture(event.pointerId)) return;
+      event.preventDefault();
+      moveDraftUi({
+        x: event.clientX,
+        y: event.clientY
+      });
+    });
+    pin.addEventListener("pointerup", (event) => {
+      if (!isDragging || !pin.hasPointerCapture(event.pointerId)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      isDragging = false;
+      pin.releasePointerCapture(event.pointerId);
+      const nextPoint = toTargetPointFromHostEvent(event, this.getEnvironment());
+      void (this.mode === "element" ? this.bindElementDraftToPoint(nextPoint, textarea.value) : this.bindNoteDraftToPoint(nextPoint, textarea.value));
+    });
+  }
+  createNoteLayer() {
+    const layer = document.createElement("div");
+    layer.className = "dfwr-text-layer";
+    const environment = this.getEnvironment();
+    if (environment) {
+      placeLayerOverTarget(layer, environment);
+    }
+    layer.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      void this.createNoteDraft(
+        toTargetPointFromHostEvent(event, this.getEnvironment())
+      );
+    });
+    return layer;
+  }
+  createElementLayer() {
+    const layer = document.createElement("div");
+    layer.className = "dfwr-element-layer";
+    const environment = this.getEnvironment();
+    const hover = document.createElement("div");
+    hover.className = "dfwr-dom-hover";
+    hover.hidden = true;
+    layer.append(hover);
+    if (environment) {
+      placeLayerOverTarget(layer, environment);
+    }
+    const updateHover = (point) => {
+      const nextEnvironment = this.getEnvironment();
+      if (!nextEnvironment) return;
+      const anchor = getDomAnchorFromPoint(
+        clampPoint(point, nextEnvironment),
+        this.options.anchors?.attribute,
+        nextEnvironment
+      );
+      const selection = anchor ? getElementViewportSelection(anchor, nextEnvironment) : void 0;
+      if (!selection) {
+        hover.hidden = true;
+        return;
+      }
+      const rect = toHostSelection(selection, nextEnvironment);
+      hover.hidden = false;
+      hover.style.left = `${rect.left}px`;
+      hover.style.top = `${rect.top}px`;
+      hover.style.width = `${rect.width}px`;
+      hover.style.height = `${rect.height}px`;
+    };
+    layer.addEventListener("pointermove", (event) => {
+      updateHover(toTargetPointFromHostEvent(event, this.getEnvironment()));
+    });
+    layer.addEventListener("pointerleave", () => {
+      hover.hidden = true;
+    });
+    layer.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      void this.createElementDraft(
+        toTargetPointFromHostEvent(event, this.getEnvironment())
+      );
+    });
+    return layer;
+  }
+  async createNoteDraft(point) {
+    await this.bindNoteDraftToPoint(point);
+  }
+  async createElementDraft(point) {
+    await this.bindElementDraftToPoint(point);
+  }
+  async bindNoteDraftToPoint(point, comment) {
+    const environment = this.getEnvironment();
+    if (!environment) return;
+    const viewport = getViewportSize(environment);
+    const nextPoint = clampPoint(point, environment);
+    const draft = await this.withOverlayHidden(() => {
+      const selection = getPointSelection(nextPoint);
+      const anchor = getDomAnchor(
+        selection,
+        this.options.anchors?.attribute,
+        environment
+      );
+      const marker = {
+        viewport: roundPoint(nextPoint),
+        relative: anchor ? getRelativePoint(nextPoint, anchor, environment) : void 0
+      };
+      return {
+        viewport,
+        anchor,
+        marker,
+        comment
+      };
+    });
+    this.noteDraft = draft;
+    this.render();
+  }
+  async bindElementDraftToPoint(point, comment) {
+    const environment = this.getEnvironment();
+    if (!environment) return;
+    const viewport = getViewportSize(environment);
+    const nextPoint = clampPoint(point, environment);
+    const draft = await this.withOverlayHidden(() => {
+      const anchor = getDomAnchorFromPoint(
+        nextPoint,
+        this.options.anchors?.attribute,
+        environment
+      );
+      const elementSelection = anchor ? getElementViewportSelection(anchor, environment) : void 0;
+      const selection = elementSelection ?? getPointSelection(nextPoint);
+      const markerPoint = getSelectionCenter(selection);
+      const reviewSelection = elementSelection ? {
+        viewport: toPublicSelection(elementSelection),
+        relative: getRelativeSelection(
+          elementSelection,
+          anchor,
+          environment
+        )
+      } : void 0;
+      const marker = {
+        viewport: roundPoint(markerPoint),
+        relative: anchor ? getRelativePoint(markerPoint, anchor, environment) : void 0
+      };
+      return {
+        viewport,
+        anchor,
+        marker,
+        selection: reviewSelection,
+        comment
+      };
+    });
+    this.noteDraft = draft;
+    this.render();
+  }
+  createAreaLayer() {
+    const layer = document.createElement("div");
+    layer.className = "dfwr-area-layer";
+    const environment = this.getEnvironment();
+    if (environment) {
+      placeLayerOverTarget(layer, environment);
+    }
+    const box = document.createElement("div");
+    box.className = "dfwr-area-box";
+    layer.append(box);
+    let startX = 0;
+    let startY = 0;
+    let selection;
+    const updateBox = (event) => {
+      const nextPoint = toTargetPointFromHostEvent(
+        event,
+        this.getEnvironment()
+      );
+      const left = Math.min(startX, nextPoint.x);
+      const top = Math.min(startY, nextPoint.y);
+      const width = Math.abs(nextPoint.x - startX);
+      const height = Math.abs(nextPoint.y - startY);
+      const hostPoint = toHostPoint(
+        { x: left, y: top },
+        this.getEnvironment()
+      );
+      selection = { left, top, width, height };
+      box.style.left = `${hostPoint.x}px`;
+      box.style.top = `${hostPoint.y}px`;
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+    };
+    layer.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      layer.setPointerCapture(event.pointerId);
+      const startPoint = toTargetPointFromHostEvent(
+        event,
+        this.getEnvironment()
+      );
+      startX = startPoint.x;
+      startY = startPoint.y;
+      updateBox(event);
+    });
+    layer.addEventListener("pointermove", (event) => {
+      if (!layer.hasPointerCapture(event.pointerId)) return;
+      updateBox(event);
+    });
+    layer.addEventListener("pointerup", (event) => {
+      if (!layer.hasPointerCapture(event.pointerId)) return;
+      layer.releasePointerCapture(event.pointerId);
+      updateBox(event);
+      if (!selection || selection.width < 8 || selection.height < 8) return;
+      this.isSelectingArea = true;
+      this.render();
+      void this.createAreaDraft(selection);
+    });
+    return layer;
+  }
+  async createAreaDraft(selection) {
+    const environment = this.getEnvironment();
+    if (!environment) return;
+    const viewport = getViewportSize(environment);
+    this.areaDraft = await this.withOverlayHidden(() => {
+      const anchor = getDomAnchor(
+        selection,
+        this.options.anchors?.attribute,
+        environment
+      );
+      const relativeSelection = anchor ? getRelativeSelection(selection, anchor, environment) : void 0;
+      const marker = createSelectionCenterMarker(
+        selection,
+        anchor,
+        environment
+      );
+      const reviewSelection = {
+        viewport: toPublicSelection(selection),
+        relative: relativeSelection
+      };
+      return {
+        viewport,
+        anchor,
+        marker,
+        selection: reviewSelection
+      };
+    });
+    this.isSelectingArea = false;
+    this.setModeState("area");
+    this.render();
+  }
+  async withOverlayHidden(callback) {
+    if (!this.root) return callback();
+    const previousDisplay = this.root.style.display;
+    this.root.style.display = "none";
+    try {
+      return await callback();
+    } finally {
+      this.root.style.display = previousDisplay;
+    }
+  }
+  async createItem(input) {
+    const environment = this.getEnvironment();
+    if (!environment) return;
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const routeKey = getRouteKey(environment);
+    const viewport = input.viewport ?? getViewportSize(environment);
+    const reviewNumber = await this.getNextReviewNumber();
+    const item = {
+      id: createId(),
+      reviewNumber,
+      projectId: this.options.projectId,
+      routeKey,
+      pageUrl: getPageUrl(environment),
+      originalUrl: getOriginalUrl(environment),
+      normalizedPath: routeKey,
+      scope: input.scope ?? getReviewViewportScope(viewport, this.options.viewports?.presets),
+      kind: input.kind,
+      title: input.comment.split("\n")[0]?.slice(0, 80),
+      comment: input.comment,
+      status: "todo",
+      viewport,
+      devicePixelRatio: environment.window.devicePixelRatio || 1,
+      scroll: {
+        x: environment.window.scrollX,
+        y: environment.window.scrollY
+      },
+      anchor: input.anchor,
+      marker: input.marker,
+      selection: input.selection,
+      createdAt: now,
+      updatedAt: now
+    };
+    await this.adapter.create(item);
+    this.setModeState("idle");
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    this.highlightItem(item.id);
+    await this.reload();
+  }
+  async getNextReviewNumber() {
+    const items = await this.adapter.list({
+      projectId: this.options.projectId
+    });
+    return getNextReviewItemNumber(items);
+  }
+  async restoreItem(item) {
+    this.setModeState("idle");
+    this.noteDraft = void 0;
+    this.areaDraft = void 0;
+    if (this.options.onRestoreItem) {
+      await this.options.onRestoreItem(item);
+      return;
+    }
+    const environment = this.getEnvironment();
+    if (!environment) return;
+    const scroll = item.scroll;
+    if (scroll) {
+      runWithAutoScrollBehavior(environment.document, () => {
+        setDocumentScrollInstantly(environment, scroll);
+      });
+      await waitForNextFrame(environment);
+    }
+    this.highlightItem(item.id);
+    this.render();
+  }
+};
+function rectanglesIntersect(a, b) {
+  return a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
+}
+function waitForNextFrame(environment) {
+  return new Promise((resolve) => {
+    (environment?.window ?? window).requestAnimationFrame(() => resolve());
+  });
+}
+function getDomAnchor(selection, configuredAttribute = "data-qa-id", environment) {
+  const x = selection.left + selection.width / 2;
+  const y = selection.top + selection.height / 2;
+  return getDomAnchorFromPoint({ x, y }, configuredAttribute, environment);
+}
+function getDomAnchorFromPoint(point, configuredAttribute = "data-qa-id", environment) {
+  const target = environment.document.elementFromPoint(point.x, point.y);
+  if (!target) return void 0;
+  const candidates = createAnchorCandidates(target, configuredAttribute);
+  const primary = candidates[0];
+  if (!primary) return void 0;
+  return {
+    ...primary,
+    candidates,
+    htmlSnippet: getElementHtmlSnippet(
+      getAnchorSourceElement(target, primary, configuredAttribute) ?? target
+    ),
+    source: getDomSourceHint(target)
+  };
+}
+function getElementViewportSelection(anchor, environment) {
+  const element = getAnchorElement(anchor, environment);
+  if (!element) return void 0;
+  const rect = element.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return void 0;
+  return {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function createAnchorCandidates(target, configuredAttribute) {
+  const candidates = [];
+  const anchoredByAttribute = target.closest(`[${configuredAttribute}]`);
+  if (anchoredByAttribute) {
+    const value = anchoredByAttribute.getAttribute(configuredAttribute);
+    if (value) {
+      candidates.push({
+        selector: `[${configuredAttribute}="${cssEscape(value)}"]`,
+        strategy: "configured-attribute",
+        confidence: 0.98,
+        textFingerprint: getTextFingerprint(anchoredByAttribute)
+      });
+    }
+  }
+  if (isMeaningfulId(target.id)) {
+    candidates.push({
+      selector: `#${cssEscape(target.id)}`,
+      strategy: "id",
+      confidence: 0.94,
+      textFingerprint: getTextFingerprint(target)
+    });
+  }
+  const targetClassName = getMeaningfulClassName(target);
+  if (targetClassName) {
+    candidates.push({
+      selector: `${target.tagName.toLowerCase()}.${cssEscape(targetClassName)}`,
+      strategy: "class",
+      confidence: 0.82,
+      textFingerprint: getTextFingerprint(target)
+    });
+  }
+  candidates.push({
+    selector: getDomPath(target),
+    strategy: "dom-path",
+    confidence: 0.9,
+    textFingerprint: getTextFingerprint(target)
+  });
+  const parent = target.parentElement;
+  const anchoredById = parent ? findClosest(parent, (element) => isMeaningfulId(element.id)) : void 0;
+  if (anchoredById?.id) {
+    candidates.push({
+      selector: `#${cssEscape(anchoredById.id)}`,
+      strategy: "id",
+      confidence: 0.72,
+      textFingerprint: getTextFingerprint(anchoredById)
+    });
+  }
+  const anchoredByClass = parent ? findClosest(parent, (element) => Boolean(getMeaningfulClassName(element))) : void 0;
+  const className = anchoredByClass ? getMeaningfulClassName(anchoredByClass) : void 0;
+  if (anchoredByClass && className) {
+    candidates.push({
+      selector: `${anchoredByClass.tagName.toLowerCase()}.${cssEscape(
+        className
+      )}`,
+      strategy: "class",
+      confidence: 0.58,
+      textFingerprint: getTextFingerprint(anchoredByClass)
+    });
+  }
+  return dedupeAnchorCandidates(candidates);
+}
+function getAnchorSourceElement(target, candidate, configuredAttribute) {
+  if (candidate.strategy === "configured-attribute") {
+    return target.closest(`[${configuredAttribute}]`);
+  }
+  if (candidate.strategy === "dom-path") return target;
+  try {
+    return target.closest(candidate.selector);
+  } catch {
+    return target;
+  }
+}
+function getElementHtmlSnippet(element, maxLength = 1e3) {
+  const html = decodeHtmlEntities(element.outerHTML.replace(/\s+/g, " ").trim());
+  if (html.length <= maxLength) return html;
+  return `${html.slice(0, maxLength - 3)}...`;
+}
+function decodeHtmlEntities(value) {
+  return value.replace(
+    /&(#\d+|#x[\da-f]+|lt|gt|quot|apos|amp);/gi,
+    (match, entity) => {
+      const normalized = entity.toLowerCase();
+      if (normalized === "lt") return "<";
+      if (normalized === "gt") return ">";
+      if (normalized === "quot") return '"';
+      if (normalized === "apos") return "'";
+      if (normalized === "amp") return "&";
+      const codePoint = normalized.startsWith("#x") ? Number.parseInt(normalized.slice(2), 16) : Number.parseInt(normalized.slice(1), 10);
+      return Number.isFinite(codePoint) ? String.fromCodePoint(codePoint) : match;
+    }
+  );
+}
+function getDomSourceHint(target) {
+  const sourceElement = target.closest(
+    "[data-file], [data-component], [data-section-index], [data-section-id]"
+  );
+  if (!sourceElement) return void 0;
+  const dataset = sourceElement.dataset;
+  const source = {
+    component: dataset.component,
+    file: dataset.file,
+    sectionId: dataset.sectionId,
+    sectionIndex: dataset.sectionIndex
+  };
+  return Object.values(source).some(Boolean) ? source : void 0;
+}
+function getRelativeSelection(selection, anchor, environment) {
+  const element = getAnchorElement(anchor, environment);
+  if (!element) return void 0;
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return void 0;
+  return {
+    x: roundRatio((selection.left - rect.left) / rect.width),
+    y: roundRatio((selection.top - rect.top) / rect.height),
+    width: roundRatio(selection.width / rect.width),
+    height: roundRatio(selection.height / rect.height)
+  };
+}
+function getRelativePoint(point, anchor, environment) {
+  const element = getAnchorElement(anchor, environment);
+  if (!element) return void 0;
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return void 0;
+  return {
+    x: roundRatio((point.x - rect.left) / rect.width),
+    y: roundRatio((point.y - rect.top) / rect.height)
+  };
+}
+function getBoundMarkerPoint(item, environment) {
+  const marker = getItemMarker(item);
+  if (!marker) return void 0;
+  if (item.anchor && marker.relative) {
+    const resolved = resolveAnchorElement(item.anchor, environment);
+    const element = resolved?.element;
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        return {
+          viewport: roundPoint({
+            x: rect.left + rect.width * marker.relative.x,
+            y: rect.top + rect.height * marker.relative.y
+          }),
+          isBound: true,
+          confidence: resolved.confidence,
+          selector: resolved.candidate.selector
+        };
+      }
+    }
+  }
+  const sourceScroll = item.scroll ?? { x: 0, y: 0 };
+  return {
+    viewport: roundPoint({
+      x: marker.viewport.x + sourceScroll.x - environment.window.scrollX,
+      y: marker.viewport.y + sourceScroll.y - environment.window.scrollY
+    }),
+    isBound: false,
+    confidence: 0
+  };
+}
+function getBoundSelection(item, environment) {
+  const selection = getItemSelection(item);
+  if (!selection?.viewport) return void 0;
+  if (item.anchor && selection.relative) {
+    const resolved = resolveAnchorElement(item.anchor, environment);
+    const element = resolved?.element;
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        return {
+          viewport: {
+            left: rect.left + rect.width * selection.relative.x,
+            top: rect.top + rect.height * selection.relative.y,
+            width: rect.width * selection.relative.width,
+            height: rect.height * selection.relative.height
+          },
+          isBound: true,
+          confidence: resolved.confidence,
+          selector: resolved.candidate.selector
+        };
+      }
+    }
+  }
+  const sourceScroll = item.scroll ?? { x: 0, y: 0 };
+  const viewportSelection = toViewportSelection(selection.viewport);
+  return {
+    viewport: {
+      left: viewportSelection.left + sourceScroll.x - environment.window.scrollX,
+      top: viewportSelection.top + sourceScroll.y - environment.window.scrollY,
+      width: viewportSelection.width,
+      height: viewportSelection.height
+    },
+    isBound: false,
+    confidence: 0
+  };
+}
+function getItemHighlightSelection(item, environment) {
+  if (item.kind === "area") {
+    return getVisibleHighlightSelection(
+      [
+        getBoundSelection(item, environment),
+        getAnchorHighlightSelection(item, environment),
+        getPointHighlightSelection(item, environment)
+      ],
+      environment
+    );
+  }
+  if (isDomReviewItem(item)) {
+    return getVisibleHighlightSelection(
+      [
+        getAnchorHighlightSelection(item, environment),
+        getBoundSelection(item, environment),
+        getPointHighlightSelection(item, environment)
+      ],
+      environment
+    );
+  }
+  return getVisibleHighlightSelection(
+    [
+      getAnchorHighlightSelection(item, environment),
+      getBoundSelection(item, environment),
+      getPointHighlightSelection(item, environment)
+    ],
+    environment
+  );
+}
+function getAnchorHighlightSelection(item, environment) {
+  if (!item.anchor) return void 0;
+  const viewport = getElementViewportSelection(item.anchor, environment);
+  if (!viewport) return void 0;
+  return {
+    viewport,
+    isBound: true
+  };
+}
+function getPointHighlightSelection(item, environment) {
+  const point = getBoundMarkerPoint(item, environment);
+  if (!point) return void 0;
+  const size = 16;
+  return {
+    viewport: {
+      left: point.viewport.x - size / 2,
+      top: point.viewport.y - size / 2,
+      width: size,
+      height: size
+    },
+    isBound: point.isBound
+  };
+}
+function getVisibleHighlightSelection(candidates, environment) {
+  return candidates.find(
+    (candidate) => Boolean(candidate && isSelectionInViewport(candidate.viewport, environment))
+  );
+}
+function getReviewItemHighlightMode(item) {
+  if (isDomReviewItem(item)) return "dom";
+  if (item.kind === "area") return "area";
+  return "note";
+}
+function isDomReviewItem(item) {
+  return item.scope === "dom" || item.kind === "note" && Boolean(item.anchor && getItemSelection(item));
+}
+function getItemMarker(item) {
+  if (item.marker) return item.marker;
+  const selection = getItemSelection(item);
+  if (!selection?.viewport) return void 0;
+  return {
+    viewport: roundPoint(getSelectionCenter(selection.viewport)),
+    relative: selection.relative ? roundPoint(getSelectionCenter(selection.relative)) : void 0
+  };
+}
+function getItemSelection(item) {
+  const value = item.selection;
+  if (!value) return void 0;
+  if ("viewport" in value && isRelativeSelection(value.viewport)) {
+    return value;
+  }
+  if (isRelativeSelection(value)) {
+    return {
+      viewport: value
+    };
+  }
+  return void 0;
+}
+function shouldShowMarkerForScope(scope, currentScope) {
+  return scope === currentScope;
+}
+function createSelectionCenterMarker(selection, anchor, environment) {
+  const centerPoint = getSelectionCenter(selection);
+  return {
+    viewport: roundPoint(centerPoint),
+    relative: anchor ? getRelativePoint(centerPoint, anchor, environment) : void 0
+  };
+}
+function getAnchorElement(anchor, environment) {
+  return typeof anchor === "string" ? queryAnchorElement(anchor, environment) : resolveAnchorElement(anchor, environment)?.element;
+}
+function resolveAnchorElement(anchor, environment) {
+  const matches = getAnchorCandidates(anchor).flatMap((candidate) => {
+    const match = queryBestAnchorCandidate(
+      candidate,
+      candidate.textFingerprint ?? anchor.textFingerprint,
+      environment
+    );
+    if (!match) return [];
+    const confidence = roundRatio(
+      (candidate.confidence ?? 0.5) * match.score
+    );
+    return [{
+      element: match.element,
+      candidate,
+      confidence
+    }];
+  });
+  return matches.sort((a, b) => b.confidence - a.confidence)[0];
+}
+function getAnchorCandidates(anchor) {
+  return dedupeAnchorCandidates([
+    anchor,
+    ...anchor.candidates ?? []
+  ]);
+}
+function dedupeAnchorCandidates(candidates) {
+  const seen = /* @__PURE__ */ new Set();
+  return candidates.filter((candidate) => {
+    const key = `${candidate.strategy}:${candidate.selector}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+function queryBestAnchorCandidate(candidate, textFingerprint, environment) {
+  const elements = queryAnchorElements(candidate.selector, environment);
+  if (elements.length === 0) return void 0;
+  if (!textFingerprint) {
+    return {
+      element: elements[0],
+      score: 1
+    };
+  }
+  return elements.map((element) => ({
+    element,
+    score: getTextFingerprintScore(
+      textFingerprint,
+      getTextFingerprint(element)
+    )
+  })).sort((a, b) => b.score - a.score)[0];
+}
+function queryAnchorElement(selector, environment) {
+  return queryAnchorElements(selector, environment)[0];
+}
+function queryAnchorElements(selector, environment) {
+  try {
+    return Array.from(environment.document.querySelectorAll(selector));
+  } catch {
+    return [];
+  }
+}
+function getPointSelection(point) {
+  return {
+    left: point.x,
+    top: point.y,
+    width: 1,
+    height: 1
+  };
+}
+function toViewportSelection(selection) {
+  return {
+    left: selection.x,
+    top: selection.y,
+    width: selection.width,
+    height: selection.height
+  };
+}
+function toPublicSelection(selection) {
+  return {
+    x: Math.round(selection.left),
+    y: Math.round(selection.top),
+    width: Math.round(selection.width),
+    height: Math.round(selection.height)
+  };
+}
+function getSelectionCenter(selection) {
+  if ("left" in selection) {
+    return {
+      x: selection.left + selection.width / 2,
+      y: selection.top + selection.height / 2
+    };
+  }
+  return {
+    x: selection.x + selection.width / 2,
+    y: selection.y + selection.height / 2
+  };
+}
+function isRelativeSelection(value) {
+  if (!value || typeof value !== "object") return false;
+  const selection = value;
+  return typeof selection.x === "number" && typeof selection.y === "number" && typeof selection.width === "number" && typeof selection.height === "number";
+}
+function findClosest(start, predicate) {
+  let element = start;
+  const root = start.ownerDocument.documentElement;
+  while (element && element !== root) {
+    if (predicate(element)) return element;
+    element = element.parentElement;
+  }
+  return void 0;
+}
+function getDomPath(element) {
+  const parts = [];
+  let current = element;
+  const ownerDocument = element.ownerDocument;
+  while (current && current !== ownerDocument.body && current !== ownerDocument.documentElement) {
+    const parent = current.parentElement;
+    const tag = current.tagName.toLowerCase();
+    if (!parent) {
+      parts.unshift(tag);
+      break;
+    }
+    const currentTagName = current.tagName;
+    const siblings = Array.from(parent.children).filter(
+      (child) => child.tagName === currentTagName
+    );
+    const index = siblings.indexOf(current) + 1;
+    parts.unshift(`${tag}:nth-of-type(${index})`);
+    current = parent;
+  }
+  return `body > ${parts.join(" > ")}`;
+}
+function getTextFingerprint(element) {
+  const text = element.textContent?.replace(/\s+/g, " ").trim();
+  return text ? text.slice(0, 120) : void 0;
+}
+function getTextFingerprintScore(expected, actual) {
+  if (!expected) return 1;
+  if (!actual) return 0.5;
+  if (expected === actual) return 1;
+  if (actual.includes(expected) || expected.includes(actual)) return 0.82;
+  const expectedTokens = getFingerprintTokens(expected);
+  const actualTokens = new Set(getFingerprintTokens(actual));
+  if (expectedTokens.length === 0 || actualTokens.size === 0) return 0.5;
+  const matches = expectedTokens.filter((token) => actualTokens.has(token));
+  return clamp(matches.length / expectedTokens.length, 0.25, 0.76);
+}
+function getFingerprintTokens(value) {
+  return value.toLowerCase().split(/[\s/|,.:;()[\]{}"'`~!?<>]+/).map((token) => token.trim()).filter((token) => token.length > 1);
+}
+function isMeaningfulId(value) {
+  const normalized = value.trim().toLowerCase();
+  if (normalized.length <= 1) return false;
+  return ![
+    "app",
+    "main",
+    "page",
+    "root",
+    "__next",
+    "__nuxt"
+  ].includes(normalized);
+}
+function getMeaningfulClassName(element) {
+  return Array.from(element.classList).find((name) => isMeaningfulClass(name));
+}
+function isMeaningfulClass(value) {
+  const normalized = value.trim();
+  if ([
+    "absolute",
+    "block",
+    "contents",
+    "fixed",
+    "flex",
+    "grid",
+    "hidden",
+    "relative",
+    "sticky"
+  ].includes(normalized)) {
+    return false;
+  }
+  return normalized.length > 2 && !normalized.includes(":") && !/^(aspect|basis|bg|border|bottom|col|content|delay|duration|ease|font|from|gap|grow|h|inset|items|justify|leading|left|m|max-h|max-w|mb|ml|mr|mt|mx|my|min-h|min-w|object|opacity|order|origin|overflow|p|pb|pl|place|pointer|pr|pt|px|py|right|rotate|rounded|row|scale|self|shadow|shrink|text|to|top|tracking|transition|translate|via|w|z)-/.test(
+    normalized
+  ) && !normalized.startsWith("mq-");
+}
+function isHotkey(event, hotkey) {
+  const parts = hotkey.split("+").map((part) => part.trim().toLowerCase()).filter(Boolean);
+  const key = parts.find(
+    (part) => !["shift", "ctrl", "control", "alt", "meta", "cmd"].includes(part)
+  );
+  if (!key) return false;
+  if (parts.includes("shift") !== event.shiftKey) return false;
+  if ((parts.includes("ctrl") || parts.includes("control")) !== event.ctrlKey) {
+    return false;
+  }
+  if (parts.includes("alt") !== event.altKey) return false;
+  if ((parts.includes("meta") || parts.includes("cmd")) !== event.metaKey) {
+    return false;
+  }
+  return isHotkeyKey(event, key);
+}
+function isHotkeyKey(event, key) {
+  const normalizedKey = key.toLowerCase();
+  if (event.key.toLowerCase() === normalizedKey) return true;
+  if (getHotkeyCode(normalizedKey) === event.code) return true;
+  const aliases = {
+    q: ["\u3142", "\u3143"]
+  };
+  return aliases[normalizedKey]?.includes(event.key) ?? false;
+}
+function getHotkeyCode(key) {
+  if (/^[a-z]$/.test(key)) return `Key${key.toUpperCase()}`;
+  if (/^[0-9]$/.test(key)) return `Digit${key}`;
+  return void 0;
+}
+function getPageUrl(environment) {
+  const location = environment?.window.location ?? window.location;
+  const search = getPublicSearch(location);
+  return `${location.origin}${location.pathname}${search}${location.hash}`;
+}
+function getOriginalUrl(environment) {
+  const location = environment?.window.location ?? window.location;
+  const search = getPublicSearch(location);
+  return `${location.origin}${location.pathname}${search}${location.hash}`;
+}
+function getRouteKey(environment) {
+  const location = environment?.window.location ?? window.location;
+  return normalizeRoutePath(location.pathname);
+}
+function getPublicSearch(location) {
+  const params = new URLSearchParams(location.search);
+  INTERNAL_QUERY_PARAMS.forEach((key) => params.delete(key));
+  const value = params.toString();
+  return value ? `?${value}` : "";
+}
+function createId() {
+  if ("randomUUID" in crypto) return crypto.randomUUID();
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function formatDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString(void 0, {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatAreaDraftMeta(draft) {
+  const parts = [`viewport ${formatSize(draft.viewport)}`];
+  if (draft.selection) {
+    parts.push(`rect ${formatSelection(draft.selection.viewport)}`);
+  }
+  if (draft.marker) {
+    parts.push(`point ${formatPoint(draft.marker.viewport)}`);
+  }
+  return parts.join(" / ");
+}
+function formatNoteDraftMeta(draft) {
+  const parts = [
+    `viewport ${formatSize(draft.viewport)}`,
+    `point ${formatPoint(draft.marker.viewport)}`
+  ];
+  if (draft.anchor) {
+    parts.push(formatAnchorMeta(draft.anchor));
+  }
+  return parts.join(" / ");
+}
+function formatItemMeta(item) {
+  const parts = [formatDate(item.createdAt)];
+  const marker = getItemMarker(item);
+  const selection = getItemSelection(item);
+  if (item.viewport) {
+    parts.push(`viewport ${formatSize(item.viewport)}`);
+  }
+  if (marker) {
+    parts.push(`point ${formatPoint(marker.viewport)}`);
+  }
+  if (selection) {
+    parts.push(`rect ${formatSelection(selection.viewport)}`);
+  }
+  if (item.anchor) {
+    parts.push(formatAnchorMeta(item.anchor));
+  }
+  return parts.join(" / ");
+}
+function formatSize(size) {
+  return `${Math.round(size.width)}x${Math.round(size.height)}`;
+}
+function formatPoint(point) {
+  return `${Math.round(point.x)},${Math.round(point.y)}`;
+}
+function formatSelection(selection) {
+  return [
+    Math.round(selection.x),
+    Math.round(selection.y),
+    Math.round(selection.width),
+    Math.round(selection.height)
+  ].join(",");
+}
+function formatAnchorMeta(anchor) {
+  const parts = [`dom ${anchor.strategy}`];
+  if (typeof anchor.confidence === "number") {
+    parts.push(`${Math.round(anchor.confidence * 100)}%`);
+  }
+  const candidates = getAnchorCandidates(anchor);
+  if (candidates.length > 1) {
+    parts.push(`${candidates.length} candidates`);
+  }
+  return parts.join(" ");
+}
+function getViewportSize(environment) {
+  const targetWindow = environment?.window ?? window;
+  return {
+    width: targetWindow.innerWidth,
+    height: targetWindow.innerHeight
+  };
+}
+function roundPoint(point) {
+  return {
+    x: Math.round(point.x),
+    y: Math.round(point.y)
+  };
+}
+function runWithAutoScrollBehavior(targetDocument, callback) {
+  const elements = [
+    targetDocument.documentElement,
+    targetDocument.body
+  ].filter((element) => Boolean(element));
+  const previousValues = elements.map((element) => element.style.scrollBehavior);
+  elements.forEach((element) => {
+    element.style.scrollBehavior = "auto";
+  });
+  try {
+    callback();
+  } finally {
+    elements.forEach((element, index) => {
+      element.style.scrollBehavior = previousValues[index] ?? "";
+    });
+  }
+}
+function setDocumentScrollInstantly(environment, position) {
+  const scrollElement = environment.document.scrollingElement;
+  if (scrollElement) {
+    scrollElement.scrollLeft = Math.max(0, Math.round(position.x));
+    scrollElement.scrollTop = Math.max(0, Math.round(position.y));
+    return;
+  }
+  environment.window.scrollTo(
+    Math.max(0, Math.round(position.x)),
+    Math.max(0, Math.round(position.y))
+  );
+}
+function isPointInViewport(point, environment) {
+  const viewport = getViewportSize(environment);
+  return point.x >= 0 && point.y >= 0 && point.x <= viewport.width && point.y <= viewport.height;
+}
+function isSelectionInViewport(selection, environment) {
+  const viewport = getViewportSize(environment);
+  return rectanglesIntersect(selection, {
+    left: 0,
+    top: 0,
+    width: viewport.width,
+    height: viewport.height
+  });
+}
+function clampPoint(point, environment) {
+  const viewport = getViewportSize(environment);
+  return {
+    x: clamp(point.x, 0, viewport.width),
+    y: clamp(point.y, 0, viewport.height)
+  };
+}
+function getPopoverPosition(point, environment, options) {
+  const bounds = getPopoverBounds(environment);
+  const margin = 12;
+  const width = Math.min(
+    options?.width ?? 320,
+    Math.max(240, bounds.width - margin * 2)
+  );
+  const estimatedHeight = options?.estimatedHeight ?? 178;
+  const offset = options?.offset ?? 12;
+  return {
+    left: clamp(
+      point.x + offset,
+      bounds.left + margin,
+      bounds.left + bounds.width - width - margin
+    ),
+    top: clamp(
+      point.y + offset,
+      bounds.top + margin,
+      bounds.top + bounds.height - estimatedHeight - margin
+    )
+  };
+}
+function getAreaPopoverPosition(selection, environment) {
+  return getPopoverPosition(
+    {
+      x: selection.left + selection.width,
+      y: selection.top
+    },
+    environment,
+    {
+      width: 360,
+      estimatedHeight: 206
+    }
+  );
+}
+function getPopoverBounds(environment) {
+  if (!environment) {
+    return {
+      left: 0,
+      top: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  }
+  return environment.overlayRect;
+}
+function toHostPoint(point, environment) {
+  if (!environment) return point;
+  return {
+    x: point.x + environment.viewportRect.left,
+    y: point.y + environment.viewportRect.top
+  };
+}
+function toHostSelection(selection, environment) {
+  return {
+    left: selection.left + environment.viewportRect.left,
+    top: selection.top + environment.viewportRect.top,
+    width: selection.width,
+    height: selection.height
+  };
+}
+function toTargetPoint(point, environment) {
+  if (!environment) return point;
+  return {
+    x: point.x - environment.viewportRect.left,
+    y: point.y - environment.viewportRect.top
+  };
+}
+function toTargetPointFromHostEvent(event, environment) {
+  return toTargetPoint(
+    {
+      x: event.clientX,
+      y: event.clientY
+    },
+    environment
+  );
+}
+function placeLayerOverTarget(layer, environment) {
+  layer.style.left = `${environment.viewportRect.left}px`;
+  layer.style.top = `${environment.viewportRect.top}px`;
+  layer.style.width = `${environment.viewportRect.width}px`;
+  layer.style.height = `${environment.viewportRect.height}px`;
+  layer.style.right = "auto";
+  layer.style.bottom = "auto";
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function roundRatio(value) {
+  return Math.round(value * 1e4) / 1e4;
+}
+function cssEscape(value) {
+  if ("CSS" in window && typeof window.CSS.escape === "function") {
+    return window.CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+}
+function createNoopController() {
+  return {
+    open() {
+    },
+    close() {
+    },
+    toggle() {
+    },
+    setMode() {
+    },
+    getMode() {
+      return "idle";
+    },
+    highlightItem() {
+    },
+    setHiddenItemIds() {
+    },
+    async reload() {
+      return [];
+    },
+    getItems() {
+      return [];
+    },
+    destroy() {
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_REVIEW_VIEWPORTS,
+  DF_SHEET_REVIEW_SOURCE,
+  REVIEW_WORKFLOW_STATUS_OPTIONS,
+  createWebReviewKit,
+  dfSheetAdapter,
+  findReviewViewportPreset,
+  getNumberedReviewItems,
+  getReviewItemScope,
+  getReviewItemScopeLabel,
+  getReviewViewportScope,
+  localAdapter,
+  normalizeReviewItemStatus,
+  supabaseAdapter
+});
+//# sourceMappingURL=index.cjs.map