@david-xpn/llm-ui-feedback 0.1.0

package/dist/index.js

@@ -0,0 +1,992 @@
+"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, {
+  FeedbackWidget: () => FeedbackWidget,
+  clearEntries: () => clearEntries,
+  deleteEntry: () => deleteEntry,
+  loadEntries: () => loadEntries
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/FeedbackWidget.tsx
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/utils/color.ts
+function getContrastColor(hexColor) {
+  const hex = hexColor.replace("#", "");
+  const fullHex = hex.length === 3 ? hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] : hex;
+  const r = parseInt(fullHex.substring(0, 2), 16) / 255;
+  const g = parseInt(fullHex.substring(2, 4), 16) / 255;
+  const b = parseInt(fullHex.substring(4, 6), 16) / 255;
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return luminance > 0.179 ? "#000000" : "#ffffff";
+}
+
+// src/components/FloatingButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FloatingButton({ onClick, active, position, buttonColor }) {
+  const isBottom = position.includes("bottom");
+  const isRight = position.includes("right");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick,
+      "aria-label": active ? "Cancel feedback" : "Add feedback",
+      style: {
+        position: "fixed",
+        [isBottom ? "bottom" : "top"]: 24,
+        [isRight ? "right" : "left"]: 24,
+        zIndex: 99999,
+        width: 48,
+        height: 48,
+        borderRadius: "50%",
+        border: "none",
+        background: active ? "#ef4444" : buttonColor,
+        color: active ? "#fff" : getContrastColor(buttonColor),
+        fontSize: 24,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+        transition: "background 0.15s, transform 0.15s",
+        transform: active ? "rotate(45deg)" : "none"
+      },
+      children: "+"
+    }
+  );
+}
+
+// src/components/PickOverlay.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WIDGET_CONTAINER_ID = "llm-ui-feedback-root";
+function getElementBeneath(x, y) {
+  const container = document.getElementById(WIDGET_CONTAINER_ID);
+  if (container) container.style.display = "none";
+  const el = document.elementFromPoint(x, y);
+  if (container) container.style.display = "";
+  if (el && container?.contains(el)) return null;
+  return el;
+}
+function PickOverlay({ onPick, onCancel }) {
+  const lastOutlinedRef = (0, import_react.useRef)(null);
+  const clearOutline = (0, import_react.useCallback)(() => {
+    if (lastOutlinedRef.current) {
+      lastOutlinedRef.current.style.outline = "";
+      lastOutlinedRef.current = null;
+    }
+  }, []);
+  const handleMouseMove = (0, import_react.useCallback)((e) => {
+    const el = getElementBeneath(e.clientX, e.clientY);
+    clearOutline();
+    if (el && el instanceof HTMLElement) {
+      el.style.outline = "2px solid #3b82f6";
+      lastOutlinedRef.current = el;
+    }
+  }, [clearOutline]);
+  const handleClick = (0, import_react.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      clearOutline();
+      const el = getElementBeneath(e.clientX, e.clientY);
+      if (el) {
+        onPick(el, e.clientX, e.clientY);
+      }
+    },
+    [onPick, clearOutline]
+  );
+  const handleKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        clearOutline();
+        onCancel();
+      }
+    },
+    [onCancel, clearOutline]
+  );
+  (0, import_react.useEffect)(() => {
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+      if (lastOutlinedRef.current) {
+        lastOutlinedRef.current.style.outline = "";
+        lastOutlinedRef.current = null;
+      }
+    };
+  }, [handleMouseMove, handleClick, handleKeyDown]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 99998,
+        background: "rgba(59, 130, 246, 0.08)",
+        padding: "8px 16px",
+        textAlign: "center",
+        fontSize: 14,
+        color: "#1e40af",
+        fontFamily: "system-ui, sans-serif",
+        pointerEvents: "none"
+      },
+      children: [
+        "Click on any element to leave feedback. Press ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Esc" }),
+        " to cancel."
+      ]
+    }
+  );
+}
+
+// src/components/FeedbackDialog.tsx
+var import_react2 = require("react");
+
+// src/utils/prompt.ts
+function buildPrompt(context, comment) {
+  const propsStr = context.components.filter((c) => Object.keys(c.props).length > 0).map((c) => `  ${c.name}: ${JSON.stringify(c.props)}`).join("\n");
+  const lines = [
+    `Page: ${context.url}`,
+    `Component: ${context.componentPath}`
+  ];
+  if (propsStr) {
+    lines.push(`Props:
+${propsStr}`);
+  }
+  if (context.elementText) {
+    lines.push(`Element text: "${context.elementText}"`);
+  }
+  lines.push("", `User feedback: "${comment}"`, "", "Screenshot attached with red X marking the clicked element.");
+  return lines.join("\n");
+}
+
+// src/utils/storage.ts
+var STORAGE_KEY = "llm_ui_feedback_items";
+function loadEntries() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+function saveEntry(entry) {
+  const entries = loadEntries();
+  entries.push(entry);
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+    return { ok: true };
+  } catch (e) {
+    if (e instanceof DOMException && (e.name === "QuotaExceededError" || e.code === 22)) {
+      const oldestWithScreenshot = entries.findIndex((ent) => ent.screenshot !== null);
+      if (oldestWithScreenshot >= 0) {
+        entries[oldestWithScreenshot] = { ...entries[oldestWithScreenshot], screenshot: null };
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+          return { ok: true };
+        } catch {
+        }
+      }
+      return { ok: false, error: "Storage is full. Delete old feedback entries to free space." };
+    }
+    return { ok: false, error: "Failed to save feedback entry." };
+  }
+}
+function deleteEntry(id) {
+  const entries = loadEntries().filter((e) => e.id !== id);
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+}
+function clearEntries() {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+// src/components/FeedbackDialog.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+async function copyToClipboard(text) {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return "success";
+    } catch {
+    }
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.cssText = "position:fixed;left:-9999px;top:-9999px";
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    if (ok) return "fallback-success";
+  } catch {
+  }
+  return "failed";
+}
+function FeedbackDialog({ context, screenshot, onClose }) {
+  const [comment, setComment] = (0, import_react2.useState)("");
+  const [saved, setSaved] = (0, import_react2.useState)(false);
+  const [copyStatus, setCopyStatus] = (0, import_react2.useState)("idle");
+  const [saveError, setSaveError] = (0, import_react2.useState)(null);
+  const [showPromptText, setShowPromptText] = (0, import_react2.useState)(false);
+  const handleSubmit = () => {
+    if (!comment.trim()) return;
+    const prompt = buildPrompt(context, comment);
+    const entry = {
+      id: `f_${Date.now()}`,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      url: context.url,
+      componentPath: context.componentPath,
+      components: context.components,
+      elementText: context.elementText,
+      comment,
+      screenshot,
+      prompt
+    };
+    const result = saveEntry(entry);
+    if (result.ok) {
+      setSaved(true);
+      setSaveError(null);
+    } else {
+      setSaveError(result.error || "Failed to save.");
+    }
+  };
+  const handleCopyPrompt = async () => {
+    const prompt = buildPrompt(context, comment || "(no comment)");
+    const result = await copyToClipboard(prompt);
+    if (result === "failed") {
+      setCopyStatus("failed");
+      setShowPromptText(true);
+    } else {
+      setCopyStatus("copied");
+      setTimeout(() => setCopyStatus("idle"), 2e3);
+    }
+  };
+  const handleDownloadScreenshot = () => {
+    if (!screenshot) return;
+    const link = document.createElement("a");
+    link.download = `feedback_${Date.now()}.png`;
+    link.href = screenshot;
+    link.click();
+  };
+  const copyButtonLabel = copyStatus === "copied" ? "Copied!" : copyStatus === "failed" ? "Copy failed" : "Copy Prompt";
+  const copyButtonBg = copyStatus === "copied" ? "#dcfce7" : copyStatus === "failed" ? "#fee2e2" : "#f3f4f6";
+  const copyButtonColor = copyStatus === "copied" ? "#16a34a" : copyStatus === "failed" ? "#dc2626" : "#374151";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 99999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.4)",
+        fontFamily: "system-ui, sans-serif"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            padding: 24,
+            width: 480,
+            maxWidth: "90vw",
+            maxHeight: "80vh",
+            overflow: "auto",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.2)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: 0, fontSize: 16 }, children: "Leave Feedback" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    fontSize: 20,
+                    cursor: "pointer",
+                    color: "#666"
+                  },
+                  children: "x"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 12, color: "#666", marginBottom: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Page:" }),
+                " ",
+                context.url
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Component:" }),
+                " ",
+                context.componentPath
+              ] }),
+              context.elementText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Element:" }),
+                ' "',
+                context.elementText.slice(0, 100),
+                '"'
+              ] })
+            ] }),
+            screenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "img",
+              {
+                src: screenshot,
+                alt: "Screenshot",
+                style: {
+                  width: "100%",
+                  borderRadius: 8,
+                  border: "1px solid #e5e7eb",
+                  marginBottom: 12
+                }
+              }
+            ),
+            !saved ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "textarea",
+                {
+                  value: comment,
+                  onChange: (e) => setComment(e.target.value),
+                  placeholder: "Describe the issue or suggestion...",
+                  autoFocus: true,
+                  style: {
+                    width: "100%",
+                    minHeight: 80,
+                    padding: 10,
+                    borderRadius: 8,
+                    border: "1px solid #d1d5db",
+                    fontSize: 14,
+                    resize: "vertical",
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              saveError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#dc2626", fontSize: 13, marginTop: 8 }, children: saveError }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleSubmit, style: btnStyle("#3b82f6", "#fff"), children: "Save" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleCopyPrompt, style: btnStyle(copyButtonBg, copyButtonColor), children: copyButtonLabel }),
+                screenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleDownloadScreenshot, style: btnStyle("#f3f4f6", "#374151"), children: "Download Screenshot" })
+              ] })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { textAlign: "center", padding: 16, color: "#16a34a" }, children: [
+              "Saved to localStorage.",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 12, justifyContent: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleCopyPrompt, style: btnStyle(copyButtonBg, copyButtonColor), children: copyButtonLabel }),
+                screenshot && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: handleDownloadScreenshot, style: btnStyle("#f3f4f6", "#374151"), children: "Download Screenshot" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: onClose, style: btnStyle("#3b82f6", "#fff"), children: "Done" })
+              ] })
+            ] }),
+            showPromptText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, color: "#666", marginBottom: 4 }, children: "Could not copy automatically. Select and copy manually:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "textarea",
+                {
+                  readOnly: true,
+                  value: buildPrompt(context, comment || "(no comment)"),
+                  style: {
+                    width: "100%",
+                    minHeight: 120,
+                    padding: 10,
+                    borderRadius: 8,
+                    border: "1px solid #d1d5db",
+                    fontSize: 12,
+                    fontFamily: "monospace",
+                    resize: "vertical",
+                    boxSizing: "border-box",
+                    background: "#f9fafb"
+                  },
+                  onClick: (e) => e.target.select()
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function btnStyle(bg, color) {
+  return {
+    padding: "8px 16px",
+    borderRadius: 6,
+    border: "1px solid #d1d5db",
+    background: bg,
+    color,
+    fontSize: 13,
+    cursor: "pointer"
+  };
+}
+
+// src/components/FeedbackListPanel.tsx
+var import_react3 = require("react");
+
+// src/utils/time.ts
+function relativeTime(iso) {
+  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1e3);
+  if (seconds < 0) return "just now";
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString();
+}
+
+// src/components/EntryCard.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function EntryCard({ entry, onDelete, onCopyPrompt }) {
+  const truncatedComment = entry.comment.length > 80 ? entry.comment.slice(0, 80) + "..." : entry.comment;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        padding: 12,
+        borderBottom: "1px solid #e5e7eb",
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 13, color: "#111827", flex: 1, marginRight: 8 }, children: truncatedComment || "(no comment)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: 11, color: "#9ca3af", whiteSpace: "nowrap", flexShrink: 0 }, children: relativeTime(entry.timestamp) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 11, color: "#6b7280", marginBottom: 4 }, children: entry.url }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 11, color: "#9ca3af", marginBottom: 8 }, children: entry.componentPath }),
+        entry.screenshot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "img",
+          {
+            src: entry.screenshot,
+            alt: "Screenshot thumbnail",
+            style: {
+              width: 60,
+              height: 40,
+              objectFit: "cover",
+              borderRadius: 4,
+              border: "1px solid #e5e7eb",
+              marginBottom: 8,
+              display: "block"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: () => onCopyPrompt(entry.prompt),
+              style: {
+                padding: "4px 10px",
+                fontSize: 11,
+                borderRadius: 4,
+                border: "1px solid #d1d5db",
+                background: "#f9fafb",
+                color: "#374151",
+                cursor: "pointer"
+              },
+              children: "Copy Prompt"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: () => onDelete(entry.id),
+              style: {
+                padding: "4px 10px",
+                fontSize: 11,
+                borderRadius: 4,
+                border: "1px solid #fecaca",
+                background: "#fef2f2",
+                color: "#dc2626",
+                cursor: "pointer"
+              },
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/FeedbackListPanel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+async function copyToClipboard2(text) {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.style.cssText = "position:fixed;left:-9999px;top:-9999px";
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+  }
+  return false;
+}
+function FeedbackListPanel({ onClose, position }) {
+  const [entries, setEntries] = (0, import_react3.useState)(() => loadEntries());
+  const [confirmClear, setConfirmClear] = (0, import_react3.useState)(false);
+  const [copiedId, setCopiedId] = (0, import_react3.useState)(null);
+  const isRight = position.includes("right");
+  const refreshEntries = (0, import_react3.useCallback)(() => {
+    setEntries(loadEntries());
+  }, []);
+  const handleDelete = (0, import_react3.useCallback)(
+    (id) => {
+      deleteEntry(id);
+      refreshEntries();
+    },
+    [refreshEntries]
+  );
+  const handleCopyPrompt = (0, import_react3.useCallback)(async (prompt) => {
+    const ok = await copyToClipboard2(prompt);
+    if (ok) {
+    }
+  }, []);
+  const handleClear = (0, import_react3.useCallback)(() => {
+    if (!confirmClear) {
+      setConfirmClear(true);
+      setTimeout(() => setConfirmClear(false), 3e3);
+      return;
+    }
+    clearEntries();
+    setConfirmClear(false);
+    refreshEntries();
+  }, [confirmClear, refreshEntries]);
+  const sortedEntries = [...entries].reverse();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        [isRight ? "right" : "left"]: 0,
+        bottom: 0,
+        width: 380,
+        maxWidth: "90vw",
+        zIndex: 99999,
+        background: "#fff",
+        boxShadow: isRight ? "-4px 0 24px rgba(0,0,0,0.15)" : "4px 0 24px rgba(0,0,0,0.15)",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              padding: 16,
+              borderBottom: "1px solid #e5e7eb",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { style: { margin: 0, fontSize: 15, color: "#111827" }, children: [
+                "Feedback (",
+                entries.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    fontSize: 20,
+                    cursor: "pointer",
+                    color: "#666",
+                    padding: "0 4px"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: 0 }, children: sortedEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: 32,
+              color: "#9ca3af",
+              fontSize: 13
+            },
+            children: "No feedback entries yet"
+          }
+        ) : sortedEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          EntryCard,
+          {
+            entry,
+            onDelete: handleDelete,
+            onCopyPrompt: handleCopyPrompt
+          },
+          entry.id
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderTop: "1px solid #e5e7eb",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: handleClear,
+                disabled: entries.length === 0,
+                style: {
+                  width: "100%",
+                  padding: "8px 16px",
+                  borderRadius: 6,
+                  border: "1px solid #d1d5db",
+                  background: confirmClear ? "#fef2f2" : "#f9fafb",
+                  color: confirmClear ? "#dc2626" : entries.length === 0 ? "#9ca3af" : "#374151",
+                  fontSize: 13,
+                  cursor: entries.length === 0 ? "default" : "pointer"
+                },
+                children: confirmClear ? "Are you sure? Clear" : "Clear All"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ListButton.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ListButton({ onClick, count, position, buttonColor }) {
+  if (count === 0) return null;
+  const isBottom = position.includes("bottom");
+  const isRight = position.includes("right");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      onClick,
+      "aria-label": `View ${count} feedback entries`,
+      style: {
+        position: "fixed",
+        [isBottom ? "bottom" : "top"]: 80,
+        [isRight ? "right" : "left"]: 24,
+        zIndex: 99999,
+        width: 36,
+        height: 36,
+        borderRadius: "50%",
+        border: "1px solid #d1d5db",
+        background: "#f3f4f6",
+        color: "#374151",
+        fontSize: 16,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
+        padding: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { lineHeight: 1 }, children: "\u2630" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -4,
+              [isRight ? "right" : "left"]: -4,
+              background: buttonColor,
+              color: getContrastColor(buttonColor),
+              fontSize: 10,
+              fontWeight: 600,
+              borderRadius: "50%",
+              width: 18,
+              height: 18,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: 1
+            },
+            children: count > 99 ? "99+" : count
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/utils/fiber.ts
+var minificationWarned = false;
+function getFiber(el) {
+  const key = Object.keys(el).find((k) => k.startsWith("__reactFiber$"));
+  return key ? el[key] : null;
+}
+function pickShortProps(props) {
+  const short = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children") continue;
+    if (typeof value === "function") continue;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      short[key] = value;
+    }
+  }
+  return short;
+}
+function getComponentPath(el, maxDepth = 8) {
+  const fiber = getFiber(el);
+  if (!fiber) return [];
+  const path = [];
+  let current = fiber;
+  while (current && path.length < maxDepth) {
+    if (typeof current.type === "function" || typeof current.type === "object") {
+      const name = current.type?.displayName || current.type?.name || null;
+      if (name) {
+        if (!minificationWarned && name.length <= 2 && /^[a-z]/.test(name)) {
+          minificationWarned = true;
+          console.warn(
+            '[llm-ui-feedback] Component names appear minified (e.g., "' + name + '"). The generated LLM prompts will lack meaningful component paths. To fix, configure your bundler to preserve function names. See: https://github.com/user/llm-ui-feedback/blob/main/docs/production-setup.md'
+          );
+        }
+        path.push({
+          name,
+          props: pickShortProps(current.memoizedProps || {})
+        });
+      }
+    }
+    current = current.return;
+  }
+  return path.reverse();
+}
+
+// src/utils/screenshot.ts
+var import_html2canvas_pro = __toESM(require("html2canvas-pro"));
+async function captureScreenshot(clickX, clickY) {
+  const docX = clickX + window.scrollX;
+  const docY = clickY + window.scrollY;
+  const canvas = await (0, import_html2canvas_pro.default)(document.body, {
+    logging: false,
+    useCORS: true
+  });
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    ctx.strokeStyle = "red";
+    ctx.lineWidth = 3;
+    const size = 14;
+    ctx.beginPath();
+    ctx.moveTo(docX - size, docY - size);
+    ctx.lineTo(docX + size, docY + size);
+    ctx.moveTo(docX + size, docY - size);
+    ctx.lineTo(docX - size, docY + size);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(docX, docY, size + 4, 0, Math.PI * 2);
+    ctx.stroke();
+  }
+  return canvas.toDataURL("image/png");
+}
+
+// src/components/FeedbackWidget.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CONTAINER_ID = "llm-ui-feedback-root";
+function getOrCreateContainer() {
+  let el = document.getElementById(CONTAINER_ID);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = CONTAINER_ID;
+    document.body.appendChild(el);
+  }
+  return el;
+}
+function widgetReducer(state, action) {
+  switch (action.type) {
+    case "START_PICKING":
+      return state.mode === "idle" ? { mode: "picking" } : state;
+    case "CANCEL":
+    case "CLOSE":
+      return { mode: "idle" };
+    case "ELEMENT_PICKED":
+      return { mode: "dialog", context: action.context, screenshot: action.screenshot };
+    case "OPEN_LIST":
+      return state.mode === "idle" ? { mode: "list" } : state;
+    default:
+      return state;
+  }
+}
+function parseHotkey(hotkey) {
+  const parts = hotkey.split("+").map((p) => p.trim().toLowerCase());
+  const key = parts.pop();
+  return {
+    key,
+    ctrl: parts.includes("ctrl"),
+    alt: parts.includes("alt"),
+    shift: parts.includes("shift"),
+    meta: parts.includes("meta")
+  };
+}
+function isEditableTarget(el) {
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (el.isContentEditable) return true;
+  return false;
+}
+function FeedbackWidget({
+  position = "bottom-right",
+  buttonColor = "#3b82f6",
+  hotkey
+} = {}) {
+  const [state, dispatch] = (0, import_react4.useReducer)(widgetReducer, { mode: "idle" });
+  const [entryCount, setEntryCount] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    if (state.mode === "idle") {
+      setEntryCount(loadEntries().length);
+    }
+  }, [state.mode]);
+  (0, import_react4.useEffect)(() => {
+    setEntryCount(loadEntries().length);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!hotkey) return;
+    const parsed = parseHotkey(hotkey);
+    function handler(e) {
+      if (isEditableTarget(document.activeElement)) return;
+      if (e.key.toLowerCase() === parsed.key && e.ctrlKey === parsed.ctrl && e.altKey === parsed.alt && e.shiftKey === parsed.shift && e.metaKey === parsed.meta) {
+        e.preventDefault();
+        dispatch(
+          state.mode === "picking" ? { type: "CANCEL" } : state.mode === "idle" ? { type: "START_PICKING" } : { type: "CLOSE" }
+        );
+      }
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [hotkey, state.mode]);
+  const handleToggle = (0, import_react4.useCallback)(() => {
+    dispatch({ type: "START_PICKING" });
+  }, []);
+  const handlePick = (0, import_react4.useCallback)(async (element, x, y) => {
+    const components = getComponentPath(element);
+    const componentPath = components.map((c) => c.name).join(" > ") || "(no React component found)";
+    const rawText = (element.innerText || element.textContent || "").trim();
+    const elementText = rawText.length > 100 ? rawText.slice(0, 100) + "..." : rawText;
+    const context = {
+      url: window.location.href,
+      componentPath,
+      components,
+      elementText,
+      clickX: x,
+      clickY: y
+    };
+    let screenshot = null;
+    try {
+      screenshot = await captureScreenshot(x, y);
+    } catch {
+    }
+    dispatch({ type: "ELEMENT_PICKED", context, screenshot });
+  }, []);
+  const handleCancel = (0, import_react4.useCallback)(() => {
+    dispatch({ type: "CANCEL" });
+  }, []);
+  const handleClose = (0, import_react4.useCallback)(() => {
+    dispatch({ type: "CLOSE" });
+  }, []);
+  const handleOpenList = (0, import_react4.useCallback)(() => {
+    dispatch({ type: "OPEN_LIST" });
+  }, []);
+  const handleCloseList = (0, import_react4.useCallback)(() => {
+    dispatch({ type: "CLOSE" });
+  }, []);
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      state.mode === "idle" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ListButton,
+        {
+          onClick: handleOpenList,
+          count: entryCount,
+          position,
+          buttonColor
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        FloatingButton,
+        {
+          onClick: state.mode === "picking" ? handleCancel : handleToggle,
+          active: state.mode === "picking",
+          position,
+          buttonColor
+        }
+      ),
+      state.mode === "picking" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PickOverlay, { onPick: handlePick, onCancel: handleCancel }),
+      state.mode === "dialog" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FeedbackDialog, { context: state.context, screenshot: state.screenshot, onClose: handleClose }),
+      state.mode === "list" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FeedbackListPanel, { onClose: handleCloseList, position })
+    ] }),
+    getOrCreateContainer()
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FeedbackWidget,
+  clearEntries,
+  deleteEntry,
+  loadEntries
+});
+//# sourceMappingURL=index.js.map