@solhun/feedback-kit-web 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1414 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  COMMENT_MAX_CHARS: () => import_feedback_kit_core6.COMMENT_MAX_CHARS,
+  COMMENT_REQUIRED_MESSAGE: () => import_feedback_kit_core6.COMMENT_REQUIRED_MESSAGE,
+  COMMENT_TOO_LONG_MESSAGE: () => import_feedback_kit_core6.COMMENT_TOO_LONG_MESSAGE,
+  ELEMENT_TEXT_MAX_CHARS: () => ELEMENT_TEXT_MAX_CHARS,
+  ElementPickingController: () => ElementPickingController,
+  FLOATING_BUTTON_ID: () => import_feedback_kit_core6.FLOATING_BUTTON_ID,
+  FeedbackKit: () => FeedbackKit,
+  MARKER_KEY_PREFIX: () => MARKER_KEY_PREFIX,
+  MAX_MARKERS_PER_PATH: () => MAX_MARKERS_PER_PATH,
+  MODAL_ACTION_PICK: () => import_feedback_kit_core6.MODAL_ACTION_PICK,
+  MarkerStore: () => MarkerStore,
+  OWN_UI_ATTR: () => OWN_UI_ATTR,
+  PICKING_MODE_KEY: () => PICKING_MODE_KEY,
+  ReportModalController: () => import_feedback_kit_core6.ReportModalController,
+  SCREENSHOT_FAILED_MESSAGE: () => import_feedback_kit_core6.SCREENSHOT_FAILED_MESSAGE,
+  SELECTOR_MAX_DEPTH: () => SELECTOR_MAX_DEPTH,
+  SOURCE_ATTR: () => import_feedback_kit_core5.SOURCE_ATTR,
+  SUBMIT_DONE_MESSAGE: () => import_feedback_kit_core6.SUBMIT_DONE_MESSAGE,
+  SUBMIT_PENDING_MESSAGE: () => import_feedback_kit_core6.SUBMIT_PENDING_MESSAGE,
+  WidgetController: () => import_feedback_kit_core6.WidgetController,
+  captureWebScreenshot: () => captureWebScreenshot,
+  createWebStorage: () => createWebStorage,
+  createWebWidget: () => createWebWidget,
+  cssSelectorPath: () => cssSelectorPath,
+  denormalizePin: () => import_feedback_kit_core6.denormalizePin,
+  describeElement: () => describeElement,
+  isOwnUi: () => isOwnUi2,
+  normalizePin: () => import_feedback_kit_core6.normalizePin,
+  parseSourceAttr: () => import_feedback_kit_core5.parseSourceAttr,
+  reencodeWebScreenshot: () => reencodeWebScreenshot,
+  resolveConfig: () => import_feedback_kit_core4.resolveConfig,
+  shouldShowWidget: () => import_feedback_kit_core4.shouldShowWidget,
+  sourceFromElement: () => import_feedback_kit_core5.sourceFromElement,
+  visibleText: () => visibleText,
+  webContextProviders: () => webContextProviders
+});
+module.exports = __toCommonJS(index_exports);
+var import_feedback_kit_core4 = require("@solhun/feedback-kit-core");
+var import_feedback_kit_core5 = require("@solhun/feedback-kit-core");
+var import_feedback_kit_core6 = require("@solhun/feedback-kit-core");
+
+// src/element-info.ts
+var ELEMENT_TEXT_MAX_CHARS = 200;
+var SELECTOR_MAX_DEPTH = 8;
+var KEPT_ATTRS = [
+  "id",
+  "class",
+  "name",
+  "type",
+  "role",
+  "href",
+  "aria-label",
+  "data-testid",
+  "data-fk-source"
+];
+function cssEscape(value) {
+  const fn = globalThis.CSS?.escape;
+  if (typeof fn === "function") return fn(value);
+  return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
+}
+function nthOfType(el) {
+  const parent = el.parentElement;
+  if (!parent) return 1;
+  let index = 0;
+  for (const child of Array.from(parent.children)) {
+    if (child.tagName === el.tagName) {
+      index += 1;
+      if (child === el) return index;
+    }
+  }
+  return 1;
+}
+function hasTypeSiblings(el) {
+  const parent = el.parentElement;
+  if (!parent) return false;
+  let count = 0;
+  for (const child of Array.from(parent.children)) {
+    if (child.tagName === el.tagName) {
+      count += 1;
+      if (count > 1) return true;
+    }
+  }
+  return false;
+}
+function cssSelectorPath(el) {
+  if (!el || typeof el.tagName !== "string") return null;
+  try {
+    const parts = [];
+    let node = el;
+    let depth = 0;
+    while (node && depth < SELECTOR_MAX_DEPTH) {
+      const tag = node.tagName.toLowerCase();
+      if (tag === "html" || tag === "body") {
+        parts.unshift(tag);
+        break;
+      }
+      const id = node.getAttribute("id");
+      if (id) {
+        parts.unshift(`#${cssEscape(id)}`);
+        break;
+      }
+      parts.unshift(hasTypeSiblings(node) ? `${tag}:nth-of-type(${nthOfType(node)})` : tag);
+      node = node.parentElement;
+      depth += 1;
+    }
+    return parts.length > 0 ? parts.join(" > ") : null;
+  } catch {
+    return null;
+  }
+}
+function visibleText(el) {
+  const raw = el.innerText ?? el.textContent ?? "";
+  const collapsed = raw.replace(/\s+/g, " ").trim();
+  if (collapsed === "") return null;
+  return collapsed.length > ELEMENT_TEXT_MAX_CHARS ? collapsed.slice(0, ELEMENT_TEXT_MAX_CHARS) : collapsed;
+}
+function describeElement(el) {
+  if (!el || typeof el.tagName !== "string") return null;
+  const attributes = {};
+  for (const name of KEPT_ATTRS) {
+    const value = el.getAttribute(name);
+    if (value !== null) attributes[name] = value;
+  }
+  let boundingBox = null;
+  try {
+    const rect = el.getBoundingClientRect();
+    boundingBox = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+  } catch {
+    boundingBox = null;
+  }
+  return {
+    tag: el.tagName.toLowerCase(),
+    id: el.getAttribute("id"),
+    className: el.getAttribute("class"),
+    text: visibleText(el),
+    boundingBox,
+    attributes,
+    selector: cssSelectorPath(el)
+  };
+}
+
+// src/marker-store.ts
+var PICKING_MODE_KEY = "feedback-kit:picking-mode";
+var MARKER_KEY_PREFIX = "feedback-kit:markers:";
+var MAX_MARKERS_PER_PATH = 50;
+function defaultStorage() {
+  try {
+    const ls = globalThis.localStorage;
+    return ls ?? null;
+  } catch {
+    return null;
+  }
+}
+function markerKey(pathname) {
+  return `${MARKER_KEY_PREFIX}${pathname}`;
+}
+var MarkerStore = class {
+  constructor(storage) {
+    this.storage = storage === void 0 ? defaultStorage() : storage;
+  }
+  read(key) {
+    try {
+      return this.storage?.getItem(key) ?? null;
+    } catch {
+      return null;
+    }
+  }
+  write(key, value) {
+    try {
+      this.storage?.setItem(key, value);
+    } catch {
+    }
+  }
+  drop(key) {
+    try {
+      this.storage?.removeItem(key);
+    } catch {
+    }
+  }
+  // ── 지목 모드 ─────────────────────────────────────────────────────────────
+  isPickingActive() {
+    return this.read(PICKING_MODE_KEY) === "1";
+  }
+  setPickingActive(active) {
+    if (active) this.write(PICKING_MODE_KEY, "1");
+    else this.drop(PICKING_MODE_KEY);
+  }
+  // ── 마커 ──────────────────────────────────────────────────────────────────
+  list(pathname) {
+    const raw = this.read(markerKey(pathname));
+    if (!raw) return [];
+    try {
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter((item) => {
+        if (typeof item !== "object" || item === null) return false;
+        const m = item;
+        return typeof m.id === "string" && typeof m.x === "number" && typeof m.y === "number";
+      });
+    } catch {
+      return [];
+    }
+  }
+  /** 같은 id 가 있으면 덮어쓰고, 없으면 뒤에 붙인다. */
+  upsert(pathname, marker) {
+    const current = this.list(pathname);
+    const index = current.findIndex((m) => m.id === marker.id);
+    if (index >= 0) current[index] = marker;
+    else current.push(marker);
+    const trimmed = current.length > MAX_MARKERS_PER_PATH ? current.slice(current.length - MAX_MARKERS_PER_PATH) : current;
+    this.write(markerKey(pathname), JSON.stringify(trimmed));
+    return trimmed;
+  }
+  /** 전송 상태만 바꾼다. 없는 id 면 아무것도 하지 않는다. */
+  updateStatus(pathname, id, status) {
+    const current = this.list(pathname);
+    const index = current.findIndex((m) => m.id === id);
+    if (index < 0) return current;
+    current[index] = { ...current[index], status };
+    this.write(markerKey(pathname), JSON.stringify(current));
+    return current;
+  }
+  clear(pathname) {
+    this.drop(markerKey(pathname));
+  }
+};
+
+// src/picking.ts
+var import_feedback_kit_core = require("@solhun/feedback-kit-core");
+var OWN_UI_ATTR = "data-feedback-kit";
+function defaultDocument() {
+  return globalThis.document ?? null;
+}
+function defaultPathname() {
+  const loc = globalThis.location;
+  return loc?.pathname ?? "/";
+}
+function defaultViewport() {
+  const w = globalThis;
+  return { width: w.innerWidth ?? 0, height: w.innerHeight ?? 0 };
+}
+function isOwnUi(target) {
+  const el = target;
+  if (!el || typeof el.closest !== "function") return false;
+  return el.closest(`[${OWN_UI_ATTR}]`) !== null;
+}
+var ElementPickingController = class {
+  constructor(opts) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.active = false;
+    this.attached = false;
+    this.hovered = null;
+    this.popup = null;
+    this.markers = [];
+    this.pathWatch = null;
+    this.saving = false;
+    this.onClick = (event) => this.handleClick(event);
+    this.onMouseOver = (event) => this.handleMouseOver(event);
+    this.queue = opts.queue;
+    this.createReport = opts.createReport;
+    this.store = opts.store ?? new MarkerStore();
+    this.getPathname = opts.getPathname ?? defaultPathname;
+    this.doc = opts.doc === void 0 ? defaultDocument() : opts.doc;
+    this.getViewport = opts.getViewport ?? defaultViewport;
+    this.lastPathname = this.getPathname();
+    this.markers = this.store.list(this.lastPathname);
+    this.unsubscribeQueue = this.queue.subscribe?.(() => {
+      if (this.reconcileMarkerOutcomes()) this.emit();
+    }) ?? (() => void 0);
+  }
+  // ── 조회 ──────────────────────────────────────────────────────────────────
+  getState() {
+    return {
+      active: this.active,
+      hovered: this.hovered,
+      popup: this.popup,
+      markers: this.markers
+    };
+  }
+  get isActive() {
+    return this.active;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.getState());
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  // ── 모드 on/off ───────────────────────────────────────────────────────────
+  start() {
+    if (this.active) return;
+    this.active = true;
+    this.store.setPickingActive(true);
+    this.attach();
+    this.startPathWatch();
+    this.markers = this.store.list(this.getPathname());
+    this.emit();
+  }
+  /** [지목 종료]. 저장된 플래그까지 지워서 새로고침해도 다시 켜지지 않게 한다. */
+  stop() {
+    this.active = false;
+    this.store.setPickingActive(false);
+    this.detach();
+    this.stopPathWatch();
+    this.hovered = null;
+    this.popup = null;
+    this.emit();
+  }
+  /**
+   * 저장돼 있던 모드를 되살린다. 새로고침·페이지 이동 직후에 한 번 부른다.
+   * @returns 되살아났으면 true.
+   */
+  restore() {
+    if (!this.store.isPickingActive()) {
+      this.markers = this.store.list(this.getPathname());
+      this.emit();
+      return false;
+    }
+    this.start();
+    return true;
+  }
+  /** 경로가 바뀌었을 때 그 경로의 마커로 갈아 끼운다. */
+  syncPath() {
+    this.lastPathname = this.getPathname();
+    this.markers = this.store.list(this.lastPathname);
+    this.reconcileMarkerOutcomes();
+    this.popup = null;
+    this.hovered = null;
+    this.emit();
+    return this.markers;
+  }
+  dispose() {
+    this.detach();
+    this.stopPathWatch();
+    this.unsubscribeQueue();
+    this.listeners.clear();
+  }
+  // ── DOM 이벤트 ────────────────────────────────────────────────────────────
+  attach() {
+    if (this.attached || !this.doc) return;
+    this.doc.addEventListener("click", this.onClick, true);
+    this.doc.addEventListener("mouseover", this.onMouseOver, true);
+    this.attached = true;
+  }
+  detach() {
+    if (!this.attached || !this.doc) return;
+    this.doc.removeEventListener("click", this.onClick, true);
+    this.doc.removeEventListener("mouseover", this.onMouseOver, true);
+    this.attached = false;
+  }
+  handleMouseOver(event) {
+    if (!this.active || isOwnUi(event.target)) return;
+    this.hovered = describeElement(event.target);
+    this.emit();
+  }
+  handleClick(event) {
+    if (!this.active) return;
+    if (isOwnUi(event.target)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (typeof event.stopImmediatePropagation === "function") {
+      event.stopImmediatePropagation();
+    }
+    const mouse = event;
+    this.openAnnotation(event.target, {
+      x: mouse.clientX ?? 0,
+      y: mouse.clientY ?? 0
+    });
+  }
+  // ── 주석 팝업 ─────────────────────────────────────────────────────────────
+  /** 클릭 지점 기준으로 주석 팝업을 연다. 좌표는 해상도 무관한 상대값으로 접어 둔다. */
+  openAnnotation(element, clientPoint) {
+    const point = (0, import_feedback_kit_core.normalizePin)(clientPoint, this.getViewport());
+    this.popup = {
+      element: describeElement(element),
+      point,
+      comment: "",
+      canSave: false
+    };
+    this.emit();
+  }
+  setAnnotationComment(value) {
+    if (!this.popup) return;
+    this.popup = {
+      ...this.popup,
+      comment: value,
+      canSave: value.trim().length > 0 && value.length <= import_feedback_kit_core.COMMENT_MAX_CHARS
+    };
+    this.emit();
+  }
+  /** 취소 — 마커도 제보도 남기지 않는다. 모드는 켜진 채로 둔다. */
+  cancelAnnotation() {
+    this.popup = null;
+    this.emit();
+  }
+  /**
+   * 주석 저장. 마커를 먼저 "전송 중"으로 찍고 나서 보낸다 — 사용자는 결과를 기다리지 않고
+   * 다음 요소로 넘어갈 수 있어야 한다.
+   *
+   * @returns 검증에 걸려 아무것도 하지 않았으면 `null`.
+   */
+  async saveAnnotation() {
+    const popup = this.popup;
+    if (!popup || !popup.canSave || this.saving) return null;
+    this.saving = true;
+    const pathname = this.getPathname();
+    const parts = {
+      kind: "annotation",
+      comment: popup.comment,
+      priority: "unset",
+      screenshot: null,
+      pin: popup.point,
+      element: popup.element
+    };
+    let report;
+    try {
+      report = await this.createReport(parts);
+    } catch {
+      this.popup = null;
+      this.emit();
+      this.saving = false;
+      return null;
+    }
+    const marker = {
+      id: report.clientSubmissionId,
+      x: popup.point.x,
+      y: popup.point.y,
+      selector: popup.element?.selector ?? null,
+      comment: popup.comment,
+      status: "sending",
+      at: report.createdAt
+    };
+    this.markers = this.store.upsert(pathname, marker);
+    this.popup = null;
+    this.emit();
+    let outcome;
+    try {
+      outcome = await this.queue.submit(report);
+    } catch {
+      outcome = { delivered: false, id: null, queued: true };
+    }
+    const next = this.store.updateStatus(
+      pathname,
+      marker.id,
+      outcome.delivered ? "done" : "pending"
+    );
+    if (pathname === this.getPathname()) this.markers = next;
+    this.emit();
+    this.saving = false;
+    return outcome;
+  }
+  startPathWatch() {
+    if (this.pathWatch !== null || typeof setInterval !== "function") return;
+    this.lastPathname = this.getPathname();
+    this.pathWatch = setInterval(() => {
+      const pathname = this.getPathname();
+      if (pathname !== this.lastPathname) this.syncPath();
+    }, 200);
+  }
+  stopPathWatch() {
+    if (this.pathWatch === null) return;
+    clearInterval(this.pathWatch);
+    this.pathWatch = null;
+  }
+  /** 전역 pending 수가 아니라 마커와 같은 clientSubmissionId의 확정 성공만 완료로 바꾼다. */
+  reconcileMarkerOutcomes() {
+    if (!this.queue.getOutcome) return false;
+    let changed = false;
+    for (const marker of this.markers) {
+      const outcome = this.queue.getOutcome(marker.id);
+      if (marker.status !== "done" && outcome?.delivered) {
+        this.markers = this.store.updateStatus(this.lastPathname, marker.id, "done");
+        changed = true;
+      }
+    }
+    return changed;
+  }
+  emit() {
+    const state = this.getState();
+    for (const listener of this.listeners) listener(state);
+  }
+};
+
+// src/screenshot.ts
+var import_html2canvas_pro = __toESM(require("html2canvas-pro"), 1);
+function payload(dataUrl) {
+  const comma = dataUrl.indexOf(",");
+  return comma >= 0 ? dataUrl.slice(comma + 1) : null;
+}
+function isOwnUi2(node) {
+  return node.hasAttribute?.(OWN_UI_ATTR) === true || node.closest?.(`[${OWN_UI_ATTR}]`) !== null;
+}
+var captureWebScreenshot = async () => {
+  const doc = globalThis.document;
+  const view = doc?.defaultView;
+  if (!doc?.documentElement || !view) return null;
+  try {
+    const canvas = await (0, import_html2canvas_pro.default)(doc.documentElement, {
+      // 현재 보이는 화면만. 문서 전체를 그리면 제보와 무관한 영역까지 커진다.
+      width: view.innerWidth,
+      height: view.innerHeight,
+      x: view.scrollX,
+      y: view.scrollY,
+      windowWidth: view.innerWidth,
+      windowHeight: view.innerHeight,
+      // 배율은 2배까지만. 그 위는 용량만 커지고 8 MiB 한도에 먼저 걸린다.
+      scale: Math.min(2, Math.max(1, view.devicePixelRatio || 1)),
+      // 위젯 자신의 UI 는 결과에서 뺀다.
+      ignoreElements: isOwnUi2,
+      // 외부 이미지가 CORS 를 안 열어두면 그것 때문에 전체가 실패할 수 있다.
+      // 못 가져오는 리소스는 건너뛰고 나머지를 그린다.
+      useCORS: true,
+      allowTaint: false,
+      logging: false,
+      backgroundColor: null
+    });
+    return { base64: payload(canvas.toDataURL("image/jpeg", 0.9)) ?? "", contentType: "image/jpeg" };
+  } catch {
+    return null;
+  }
+};
+var reencodeWebScreenshot = async (shot, quality) => {
+  const doc = globalThis.document;
+  if (!doc) return null;
+  try {
+    const image = await new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = () => resolve(null);
+      img.src = `data:${shot.contentType};base64,${shot.base64}`;
+    });
+    if (!image) return null;
+    const canvas = doc.createElement("canvas");
+    canvas.width = image.naturalWidth || image.width;
+    canvas.height = image.naturalHeight || image.height;
+    const context = canvas.getContext("2d");
+    if (!context) return null;
+    context.drawImage(image, 0, 0);
+    const base64 = payload(canvas.toDataURL("image/jpeg", quality));
+    return base64 ? { base64, contentType: "image/jpeg" } : null;
+  } catch {
+    return null;
+  }
+};
+
+// src/widget.ts
+var import_feedback_kit_core2 = require("@solhun/feedback-kit-core");
+function createWebWidget(opts) {
+  const store = opts.store ?? new MarkerStore();
+  const picking = new ElementPickingController({
+    queue: opts.queue,
+    createReport: opts.createReport,
+    store,
+    getPathname: opts.getPathname,
+    doc: opts.doc,
+    getViewport: opts.getViewport
+  });
+  const widget = new import_feedback_kit_core2.WidgetController({
+    ...opts,
+    capture: opts.capture === void 0 ? captureWebScreenshot : opts.capture,
+    reencode: opts.reencode === void 0 ? reencodeWebScreenshot : opts.reencode,
+    platform: "web",
+    // 새로고침·페이지 이동 직후에도 켜져 있던 모드를 그대로 이어받는다.
+    initialPicking: store.isPickingActive(),
+    onPickingChange: (active) => {
+      if (active) picking.start();
+      else picking.stop();
+    }
+  });
+  picking.restore();
+  return {
+    widget,
+    picking,
+    store,
+    dispose() {
+      picking.dispose();
+      widget.dispose();
+    }
+  };
+}
+
+// src/feedback-kit.tsx
+var import_feedback_kit_core3 = require("@solhun/feedback-kit-core");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TOKENS = {
+  ink: "#17202a",
+  muted: "#667085",
+  surface: "#ffffff",
+  subtle: "#f4f6f8",
+  line: "#d7dce2",
+  accent: "#315d73",
+  accentHover: "#274b5d",
+  danger: "#b42318",
+  warning: "#8a5a00",
+  success: "#18794e",
+  shadow: "0 18px 50px rgba(23, 32, 42, 0.2)",
+  radius: "14px"
+};
+var OWN_UI_PROPS = { [OWN_UI_ATTR]: "" };
+var FONT_STACK = "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+var INITIAL_PICKING_STATE = {
+  active: false,
+  hovered: null,
+  popup: null,
+  markers: []
+};
+function screenshotSource(screenshot) {
+  return `data:${screenshot.contentType};base64,${screenshot.base64}`;
+}
+function readScreenshotFile(file) {
+  if (file.type !== "image/png" && file.type !== "image/jpeg") {
+    return Promise.resolve(null);
+  }
+  const contentType = file.type;
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onerror = () => resolve(null);
+    reader.onload = () => {
+      const result = typeof reader.result === "string" ? reader.result : "";
+      const comma = result.indexOf(",");
+      if (comma < 0) {
+        resolve(null);
+        return;
+      }
+      resolve({
+        base64: result.slice(comma + 1),
+        contentType
+      });
+    };
+    reader.readAsDataURL(file);
+  });
+}
+function nextPaint() {
+  return new Promise((resolve) => {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => resolve());
+    } else {
+      setTimeout(resolve, 0);
+    }
+  });
+}
+function focusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(
+      "button:not([disabled]), textarea:not([disabled]), select:not([disabled]), input:not([disabled]):not([type='hidden']), [tabindex]:not([tabindex='-1'])"
+    )
+  ).filter((node) => node.getAttribute("aria-hidden") !== "true");
+}
+function trapTab(event, container) {
+  if (event.key !== "Tab") return;
+  const items = focusableElements(container);
+  if (items.length === 0) {
+    event.preventDefault();
+    return;
+  }
+  const first = items[0];
+  const last = items[items.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey && (active === first || !container.contains(active))) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && (active === last || !container.contains(active))) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+var baseButton = {
+  minHeight: 38,
+  border: `1px solid ${TOKENS.line}`,
+  borderRadius: 9,
+  background: TOKENS.surface,
+  color: TOKENS.ink,
+  padding: "8px 12px",
+  font: "inherit",
+  fontWeight: 650,
+  cursor: "pointer"
+};
+var primaryButton = {
+  ...baseButton,
+  borderColor: TOKENS.accent,
+  background: TOKENS.accent,
+  color: TOKENS.surface
+};
+var inputStyle = {
+  width: "100%",
+  boxSizing: "border-box",
+  border: `1px solid ${TOKENS.line}`,
+  borderRadius: 9,
+  background: TOKENS.surface,
+  color: TOKENS.ink,
+  padding: "10px 11px",
+  font: "inherit"
+};
+function MarkerStatus({ status }) {
+  const presentation = status === "sending" ? { icon: "\u21BB", text: "\uC804\uC1A1 \uC911", color: TOKENS.accent } : status === "done" ? { icon: "\u2713", text: "\uC644\uB8CC", color: TOKENS.success } : { icon: "\u25F7", text: "\uB300\uAE30", color: TOKENS.warning };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", color: presentation.color }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: status === "sending" ? { display: "inline-block", animation: "feedback-kit-spin 900ms linear infinite" } : void 0,
+        children: presentation.icon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: presentation.text })
+  ] });
+}
+function FeedbackKit(props) {
+  const rootRef = (0, import_react.useRef)(null);
+  const floatingButtonRef = (0, import_react.useRef)(null);
+  const modalRef = (0, import_react.useRef)(null);
+  const confirmRef = (0, import_react.useRef)(null);
+  const fileInputRef = (0, import_react.useRef)(null);
+  const previousScreenRef = (0, import_react.useRef)("button");
+  const previousModalOpenRef = (0, import_react.useRef)(false);
+  const previousConfirmVisibleRef = (0, import_react.useRef)(false);
+  const [kit, setKit] = (0, import_react.useState)(null);
+  const [widgetState, setWidgetState] = (0, import_react.useState)(null);
+  const [pickingState, setPickingState] = (0, import_react.useState)(INITIAL_PICKING_STATE);
+  const [announcement, setAnnouncement] = (0, import_react.useState)(null);
+  const {
+    queue,
+    createReport,
+    capture,
+    reencode,
+    screenshotLimitBytes,
+    store,
+    getPathname,
+    doc,
+    getViewport
+  } = props;
+  (0, import_react.useEffect)(() => {
+    const created = createWebWidget({
+      queue,
+      createReport,
+      capture,
+      reencode,
+      screenshotLimitBytes,
+      store,
+      getPathname,
+      doc,
+      getViewport
+    });
+    setKit(created);
+    const unsubscribeWidget = created.widget.subscribe(setWidgetState);
+    const unsubscribePicking = created.picking.subscribe(setPickingState);
+    return () => {
+      unsubscribeWidget();
+      unsubscribePicking();
+      created.dispose();
+    };
+  }, [
+    queue,
+    createReport,
+    capture,
+    reencode,
+    screenshotLimitBytes,
+    store,
+    getPathname,
+    doc,
+    getViewport
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!widgetState) return;
+    const { modal: modal2, screen: screen2 } = widgetState;
+    if (modal2.submitMessage) setAnnouncement(modal2.submitMessage);
+    if (modal2.open && !previousModalOpenRef.current && modal2.focused) {
+      document.querySelector(`[data-fk-focus-id="${modal2.focused}"]`)?.focus();
+    }
+    if (modal2.closeConfirmVisible && !previousConfirmVisibleRef.current) confirmRef.current?.focus();
+    const wasModal = previousScreenRef.current === "modal";
+    if (wasModal && screen2 === "button" && modal2.restoreFocusTo === import_feedback_kit_core3.FLOATING_BUTTON_ID) {
+      void nextPaint().then(() => floatingButtonRef.current?.focus());
+    }
+    previousScreenRef.current = screen2;
+    previousModalOpenRef.current = modal2.open;
+    previousConfirmVisibleRef.current = modal2.closeConfirmVisible;
+  }, [widgetState]);
+  if (!kit || !widgetState) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...OWN_UI_PROPS, "data-feedback-kit-loading": "true" });
+  }
+  const activeKit = kit;
+  const { modal, screen } = widgetState;
+  const draftLocked = modal.submitStatus === "sending" || modal.submitStatus === "pending";
+  async function withOwnUiHidden(action) {
+    const root = rootRef.current;
+    const previousVisibility = root?.style.visibility ?? "";
+    if (root) root.style.visibility = "hidden";
+    try {
+      await nextPaint();
+      await action();
+    } finally {
+      if (root) root.style.visibility = previousVisibility;
+    }
+  }
+  async function openReport() {
+    setAnnouncement(null);
+    await withOwnUiHidden(() => activeKit.widget.openReport());
+  }
+  async function recapture() {
+    await withOwnUiHidden(() => activeKit.widget.modal.recapture());
+  }
+  async function attachFile(event) {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    if (file) {
+      const screenshot = await readScreenshotFile(file);
+      if (screenshot) await activeKit.widget.modal.attachFile(screenshot);
+    }
+    input.value = "";
+  }
+  function closeReport() {
+    activeKit.widget.closeReport();
+  }
+  function handleModalKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (modal.closeConfirmVisible) activeKit.widget.cancelCloseReport();
+      else closeReport();
+      return;
+    }
+    trapTab(event, modal.closeConfirmVisible ? confirmRef.current ?? event.currentTarget : event.currentTarget);
+  }
+  function handleBackdrop(event) {
+    if (event.target === event.currentTarget) closeReport();
+  }
+  function submitReport(event) {
+    event.preventDefault();
+    void activeKit.widget.submitReport();
+  }
+  const floating = screen === "button" || screen === "picking";
+  const hoverBox = pickingState.hovered?.boundingBox;
+  const popup = pickingState.popup;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      ...OWN_UI_PROPS,
+      style: { fontFamily: FONT_STACK, color: TOKENS.ink, fontSize: 14, lineHeight: 1.45 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes feedback-kit-spin{to{transform:rotate(360deg)}}` }),
+        floating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            ref: floatingButtonRef,
+            id: import_feedback_kit_core3.FLOATING_BUTTON_ID,
+            type: "button",
+            disabled: screen === "picking",
+            "aria-label": screen === "picking" ? "\uC694\uC18C \uC9C0\uBAA9 \uC911" : "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
+            onClick: () => void openReport(),
+            style: {
+              ...primaryButton,
+              position: "fixed",
+              right: 24,
+              bottom: 24,
+              zIndex: 2147483600,
+              minWidth: 112,
+              minHeight: 46,
+              borderRadius: 24,
+              boxShadow: TOKENS.shadow,
+              opacity: screen === "picking" ? 0.76 : 1,
+              cursor: screen === "picking" ? "default" : "pointer"
+            },
+            children: screen === "picking" ? "\uC9C0\uBAA9 \uC911" : "\uD53C\uB4DC\uBC31"
+          }
+        ) : null,
+        announcement && !modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            style: {
+              position: "fixed",
+              right: 24,
+              bottom: 82,
+              zIndex: 2147483601,
+              padding: "10px 14px",
+              borderRadius: 10,
+              background: TOKENS.ink,
+              color: TOKENS.surface,
+              boxShadow: TOKENS.shadow
+            },
+            children: announcement
+          }
+        ) : null,
+        screen === "modal" && modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            onMouseDown: handleBackdrop,
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 2147483602,
+              display: "grid",
+              placeItems: "center",
+              padding: 20,
+              background: "rgba(23, 32, 42, 0.48)"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                ref: modalRef,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": "feedback-kit-dialog-title",
+                onKeyDown: handleModalKeyDown,
+                style: {
+                  width: "min(520px, 100%)",
+                  maxHeight: "min(760px, calc(100vh - 40px))",
+                  overflowY: "auto",
+                  boxSizing: "border-box",
+                  border: `1px solid ${TOKENS.line}`,
+                  borderRadius: TOKENS.radius,
+                  background: TOKENS.surface,
+                  padding: 22,
+                  boxShadow: TOKENS.shadow
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: submitReport, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "feedback-kit-dialog-title", style: { margin: "0 0 4px", fontSize: 20 }, children: "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 18px", color: TOKENS.muted }, children: "\uD604\uC7AC \uD654\uBA74\uC758 \uBB38\uC81C\uB098 \uC758\uACAC\uC744 \uB0A8\uACA8\uC8FC\uC138\uC694." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-labelledby": "feedback-kit-screenshot-label", style: { marginBottom: 16 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { id: "feedback-kit-screenshot-label", children: "\uC2A4\uD06C\uB9B0\uC0F7" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          style: {
+                            display: "grid",
+                            placeItems: "center",
+                            minHeight: 150,
+                            marginTop: 7,
+                            overflow: "hidden",
+                            border: `1px solid ${TOKENS.line}`,
+                            borderRadius: 10,
+                            background: TOKENS.subtle
+                          },
+                          children: modal.screenshotStatus === "capturing" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: "\uD654\uBA74 \uCEA1\uCC98 \uC911\u2026" }) : modal.screenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "img",
+                            {
+                              src: screenshotSource(modal.screenshot),
+                              alt: "\uC790\uB3D9 \uCEA1\uCC98\uB41C \uD604\uC7AC \uD654\uBA74 \uBBF8\uB9AC\uBCF4\uAE30",
+                              style: { display: "block", maxWidth: "100%", maxHeight: 260, objectFit: "contain" }
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", style: { padding: 18, color: TOKENS.muted, textAlign: "center" }, children: modal.screenshotMessage ?? "\uC2A4\uD06C\uB9B0\uC0F7 \uC5C6\uC74C" })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }, children: [
+                        modal.screenshot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_REMOVE_SCREENSHOT,
+                            disabled: draftLocked,
+                            onClick: () => kit.widget.modal.removeScreenshot(),
+                            style: baseButton,
+                            children: "\uC81C\uAC70"
+                          }
+                        ) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: draftLocked || modal.screenshotStatus === "capturing",
+                            onClick: () => void recapture(),
+                            style: baseButton,
+                            children: "\uB2E4\uC2DC \uCC0D\uAE30"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: draftLocked,
+                            onClick: () => fileInputRef.current?.click(),
+                            style: baseButton,
+                            children: modal.screenshot ? "\uD30C\uC77C\uB85C \uAD50\uCCB4" : "\uD30C\uC77C\uB85C \uCCA8\uBD80"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "input",
+                          {
+                            ref: fileInputRef,
+                            type: "file",
+                            accept: "image/png,image/jpeg",
+                            tabIndex: -1,
+                            "aria-hidden": "true",
+                            onChange: (event) => void attachFile(event),
+                            style: { display: "none" }
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "feedback-kit-comment", style: { display: "block", fontWeight: 700 }, children: [
+                      "\uCF54\uBA58\uD2B8 ",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "*" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "textarea",
+                      {
+                        id: "feedback-kit-comment",
+                        "data-fk-focus-id": import_feedback_kit_core3.MODAL_FIELD_COMMENT,
+                        value: modal.comment,
+                        disabled: draftLocked,
+                        "aria-required": "true",
+                        "aria-invalid": modal.commentError ? "true" : void 0,
+                        "aria-describedby": modal.commentError ? "feedback-kit-comment-error" : void 0,
+                        onChange: (event) => kit.widget.modal.setComment(event.currentTarget.value),
+                        rows: 5,
+                        placeholder: "\uBB34\uC5C7\uC774 \uBD88\uD3B8\uD588\uB294\uC9C0 \uC54C\uB824\uC8FC\uC138\uC694",
+                        style: { ...inputStyle, marginTop: 7, resize: "vertical" }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { minHeight: 21, marginTop: 3 }, children: modal.commentError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "feedback-kit-comment-error", role: "alert", style: { color: TOKENS.danger }, children: modal.commentError }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: TOKENS.muted }, children: [
+                      modal.comment.length.toLocaleString(),
+                      " / 4,000"
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "feedback-kit-priority", style: { display: "block", marginTop: 10, fontWeight: 700 }, children: "\uC6B0\uC120\uC21C\uC704" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "select",
+                      {
+                        id: "feedback-kit-priority",
+                        "data-fk-focus-id": import_feedback_kit_core3.MODAL_FIELD_PRIORITY,
+                        value: modal.priority,
+                        disabled: draftLocked,
+                        onChange: (event) => kit.widget.modal.setPriority(event.currentTarget.value),
+                        style: { ...inputStyle, marginTop: 7 },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "unset", children: "\uC120\uD0DD \uC548 \uD568" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "normal", children: "\uBCF4\uD1B5" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "high", children: "\uB192\uC74C" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "urgent", children: "\uAE34\uAE09" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        role: "switch",
+                        "aria-checked": "false",
+                        disabled: draftLocked,
+                        "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_PICK,
+                        onClick: () => kit.widget.startPicking(),
+                        style: { ...baseButton, width: "100%", marginTop: 16 },
+                        children: "\uC694\uC18C \uC9C0\uBAA9"
+                      }
+                    ),
+                    modal.submitStatus !== "idle" || modal.pending > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        role: "status",
+                        "aria-live": "polite",
+                        style: {
+                          marginTop: 14,
+                          padding: 11,
+                          borderRadius: 9,
+                          background: TOKENS.subtle,
+                          color: modal.submitStatus === "pending" ? TOKENS.warning : TOKENS.ink
+                        },
+                        children: [
+                          modal.submitStatus === "sending" ? "\uC804\uC1A1 \uC911\u2026" : modal.submitMessage,
+                          modal.pending > 0 ? ` \xB7 \uB300\uAE30 \uD050 ${modal.pending}\uAC74` : "",
+                          modal.showRetry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_RETRY,
+                              onClick: () => void kit.widget.retryReport(),
+                              style: { ...baseButton, marginLeft: 10 },
+                              children: "\uB2E4\uC2DC \uBCF4\uB0B4\uAE30"
+                            }
+                          ) : null
+                        ]
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_CANCEL,
+                          onClick: closeReport,
+                          style: baseButton,
+                          children: "\uCDE8\uC18C"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "submit",
+                          "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_SEND,
+                          disabled: !modal.canSubmit,
+                          style: {
+                            ...primaryButton,
+                            opacity: modal.canSubmit ? 1 : 0.5,
+                            cursor: modal.canSubmit ? "pointer" : "not-allowed"
+                          },
+                          children: modal.submitStatus === "sending" ? "\uC804\uC1A1 \uC911\u2026" : "\uBCF4\uB0B4\uAE30"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  modal.closeConfirmVisible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "fixed",
+                        inset: 0,
+                        zIndex: 2147483604,
+                        display: "grid",
+                        placeItems: "center",
+                        padding: 20,
+                        background: "rgba(23, 32, 42, 0.58)"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ref: confirmRef,
+                          role: "alertdialog",
+                          "aria-modal": "true",
+                          "aria-labelledby": "feedback-kit-close-title",
+                          tabIndex: -1,
+                          style: {
+                            width: "min(360px, 100%)",
+                            boxSizing: "border-box",
+                            borderRadius: 12,
+                            background: TOKENS.surface,
+                            padding: 20,
+                            boxShadow: TOKENS.shadow
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { id: "feedback-kit-close-title", style: { margin: "0 0 6px", fontSize: 17 }, children: "\uC791\uC131 \uC911\uC778 \uB0B4\uC6A9\uC744 \uB2EB\uC744\uAE4C\uC694?" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 16px", color: TOKENS.muted }, children: "\uC544\uC9C1 \uBCF4\uB0B4\uC9C0 \uC54A\uC740 \uCF54\uBA58\uD2B8\uAC00 \uC788\uC2B5\uB2C8\uB2E4." }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => kit.widget.cancelCloseReport(), style: baseButton, children: "\uACC4\uC18D \uC4F0\uAE30" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => kit.widget.confirmCloseReport(), style: primaryButton, children: "\uB2EB\uAE30" })
+                            ] })
+                          ]
+                        }
+                      )
+                    }
+                  ) : null
+                ]
+              }
+            )
+          }
+        ) : null,
+        screen === "picking" && pickingState.active ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            "aria-label": "\uC694\uC18C \uC9C0\uBAA9 \uC624\uBC84\uB808\uC774",
+            style: { position: "fixed", inset: 0, zIndex: 2147483599, pointerEvents: "none" },
+            children: [
+              hoverBox ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    position: "fixed",
+                    left: hoverBox.x,
+                    top: hoverBox.y,
+                    width: hoverBox.width,
+                    height: hoverBox.height,
+                    boxSizing: "border-box",
+                    border: `2px solid ${TOKENS.accent}`,
+                    background: "rgba(49, 93, 115, 0.12)"
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => kit.widget.stopPicking(),
+                  style: {
+                    ...primaryButton,
+                    position: "fixed",
+                    top: 18,
+                    right: 18,
+                    pointerEvents: "auto",
+                    boxShadow: TOKENS.shadow
+                  },
+                  children: "\uC9C0\uBAA9 \uC885\uB8CC"
+                }
+              ),
+              pickingState.markers.map((marker, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  role: "status",
+                  "aria-label": `\uC8FC\uC11D ${index + 1}: ${marker.comment}`,
+                  style: {
+                    position: "fixed",
+                    left: `${marker.x * 100}%`,
+                    top: `${marker.y * 100}%`,
+                    transform: "translate(-13px, -13px)",
+                    display: "grid",
+                    placeItems: "center",
+                    minWidth: 26,
+                    height: 26,
+                    padding: "0 7px",
+                    border: `2px solid ${TOKENS.surface}`,
+                    borderRadius: 16,
+                    background: TOKENS.ink,
+                    color: TOKENS.surface,
+                    boxShadow: "0 3px 10px rgba(23, 32, 42, 0.3)",
+                    pointerEvents: "none",
+                    fontSize: 11,
+                    fontWeight: 700
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkerStatus, { status: marker.status })
+                },
+                marker.id
+              )),
+              popup ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "form",
+                {
+                  "aria-label": "\uC694\uC18C \uC8FC\uC11D",
+                  onSubmit: (event) => {
+                    event.preventDefault();
+                    void kit.picking.saveAnnotation();
+                  },
+                  style: {
+                    position: "fixed",
+                    left: `min(${popup.point.x * 100}vw, calc(100vw - 336px))`,
+                    top: `min(${popup.point.y * 100}vh, calc(100vh - 230px))`,
+                    width: "min(320px, calc(100vw - 32px))",
+                    boxSizing: "border-box",
+                    border: `1px solid ${TOKENS.line}`,
+                    borderRadius: 12,
+                    background: TOKENS.surface,
+                    padding: 14,
+                    boxShadow: TOKENS.shadow,
+                    pointerEvents: "auto"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "feedback-kit-annotation", style: { display: "block", fontWeight: 700 }, children: "\uC774 \uC694\uC18C\uC5D0 \uC8FC\uC11D \uB0A8\uAE30\uAE30" }),
+                    popup.element?.text ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "4px 0 9px", color: TOKENS.muted }, children: popup.element.text }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "textarea",
+                      {
+                        id: "feedback-kit-annotation",
+                        autoFocus: true,
+                        value: popup.comment,
+                        onChange: (event) => kit.picking.setAnnotationComment(event.currentTarget.value),
+                        rows: 4,
+                        placeholder: "\uC758\uACAC\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
+                        style: { ...inputStyle, resize: "vertical" }
+                      }
+                    ),
+                    popup.comment.length > 4e3 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", style: { marginTop: 4, color: TOKENS.danger }, children: "4,000\uC790 \uC774\uD558\uB85C \uC785\uB825\uD574\uC8FC\uC138\uC694" }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 10 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => kit.picking.cancelAnnotation(), style: baseButton, children: "\uCDE8\uC18C" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "submit",
+                          disabled: !popup.canSave,
+                          style: {
+                            ...primaryButton,
+                            opacity: popup.canSave ? 1 : 0.5,
+                            cursor: popup.canSave ? "pointer" : "not-allowed"
+                          },
+                          children: "\uC800\uC7A5"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/storage.ts
+function memoryStorage() {
+  const map = /* @__PURE__ */ new Map();
+  return {
+    getItem: (key) => map.get(key) ?? null,
+    setItem: (key, value) => void map.set(key, value),
+    removeItem: (key) => void map.delete(key)
+  };
+}
+function pickBacking() {
+  try {
+    const ls = globalThis.localStorage;
+    if (!ls) return memoryStorage();
+    const probe = "__feedback_kit_probe__";
+    ls.setItem(probe, "1");
+    ls.removeItem(probe);
+    return ls;
+  } catch {
+    return memoryStorage();
+  }
+}
+function createWebStorage(backing) {
+  const store = backing ?? pickBacking();
+  return {
+    async get(key) {
+      try {
+        return store.getItem(key);
+      } catch {
+        return null;
+      }
+    },
+    async set(key, value) {
+      store.setItem(key, value);
+    },
+    async remove(key) {
+      try {
+        store.removeItem(key);
+      } catch {
+      }
+    }
+  };
+}
+
+// src/providers.ts
+function webContextProviders() {
+  return {
+    getUrl: () => {
+      const loc = globalThis.location;
+      return typeof loc?.href === "string" && loc.href.length > 0 ? loc.href : null;
+    },
+    getWebContext: () => {
+      const g = globalThis;
+      if (!g.location) return null;
+      return {
+        userAgent: g.navigator?.userAgent ?? null,
+        viewport: {
+          width: typeof g.innerWidth === "number" ? g.innerWidth : null,
+          height: typeof g.innerHeight === "number" ? g.innerHeight : null,
+          devicePixelRatio: typeof g.devicePixelRatio === "number" ? g.devicePixelRatio : null
+        }
+      };
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  COMMENT_MAX_CHARS,
+  COMMENT_REQUIRED_MESSAGE,
+  COMMENT_TOO_LONG_MESSAGE,
+  ELEMENT_TEXT_MAX_CHARS,
+  ElementPickingController,
+  FLOATING_BUTTON_ID,
+  FeedbackKit,
+  MARKER_KEY_PREFIX,
+  MAX_MARKERS_PER_PATH,
+  MODAL_ACTION_PICK,
+  MarkerStore,
+  OWN_UI_ATTR,
+  PICKING_MODE_KEY,
+  ReportModalController,
+  SCREENSHOT_FAILED_MESSAGE,
+  SELECTOR_MAX_DEPTH,
+  SOURCE_ATTR,
+  SUBMIT_DONE_MESSAGE,
+  SUBMIT_PENDING_MESSAGE,
+  WidgetController,
+  captureWebScreenshot,
+  createWebStorage,
+  createWebWidget,
+  cssSelectorPath,
+  denormalizePin,
+  describeElement,
+  isOwnUi,
+  normalizePin,
+  parseSourceAttr,
+  reencodeWebScreenshot,
+  resolveConfig,
+  shouldShowWidget,
+  sourceFromElement,
+  visibleText,
+  webContextProviders
+});
+//# sourceMappingURL=index.cjs.map