@taterboom/shiteki 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1237 @@
+// src/components/ShitekiWidget.tsx
+import { useCallback as useCallback9, useEffect as useEffect7, useState as useState11 } from "react";
+import ReactDOM from "react-dom";
+import { AnimatePresence as AnimatePresence3 } from "motion/react";
+
+// src/hooks/useAnnotations.ts
+import { useCallback, useRef, useState } from "react";
+var STORAGE_KEY = "shiteki:annotations";
+function readStored() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(annotations, nextId) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ annotations, nextId }));
+  } catch {
+  }
+}
+function removeStored() {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+  }
+}
+function useAnnotations() {
+  const stored = readStored();
+  const [annotations, setAnnotations] = useState(stored?.annotations ?? []);
+  const nextIdRef = useRef(stored?.nextId ?? 1);
+  const add = useCallback((elementInfo, comment) => {
+    const annotation = {
+      id: nextIdRef.current++,
+      elementInfo,
+      comment,
+      createdAt: Date.now()
+    };
+    setAnnotations((prev) => {
+      const next = [...prev, annotation];
+      writeStored(next, nextIdRef.current);
+      return next;
+    });
+    return annotation;
+  }, []);
+  const remove = useCallback((id) => {
+    setAnnotations((prev) => {
+      const next = prev.filter((a) => a.id !== id);
+      writeStored(next, nextIdRef.current);
+      return next;
+    });
+  }, []);
+  const clear = useCallback(() => {
+    setAnnotations([]);
+    nextIdRef.current = 1;
+    removeStored();
+  }, []);
+  return { annotations, add, remove, clear };
+}
+
+// src/hooks/useConfig.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+var STORAGE_KEY2 = "shiteki:config";
+function readStored2() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY2);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function merge(defaults, stored) {
+  if (!stored) return defaults;
+  return {
+    mode: stored.mode || defaults.mode,
+    endpoint: stored.endpoint || defaults.endpoint,
+    githubToken: stored.githubToken || defaults.githubToken,
+    owner: stored.owner || defaults.owner,
+    repo: stored.repo || defaults.repo,
+    labels: stored.labels ?? defaults.labels
+  };
+}
+function useConfig(defaults) {
+  const [config, setConfig] = useState2(() => merge(defaults, readStored2()));
+  const updateConfig = useCallback2(
+    (partial) => {
+      setConfig((prev) => {
+        const next = { ...prev, ...partial };
+        try {
+          localStorage.setItem(STORAGE_KEY2, JSON.stringify(next));
+        } catch {
+        }
+        return next;
+      });
+    },
+    []
+  );
+  return { config, updateConfig };
+}
+
+// src/hooks/useElementPicker.ts
+import { useCallback as useCallback3, useEffect, useRef as useRef2, useState as useState3 } from "react";
+
+// src/utils/getElementSelector.ts
+function getElementSelector(el) {
+  if (el.id) {
+    return `#${CSS.escape(el.id)}`;
+  }
+  const parts = [];
+  let current = el;
+  while (current && current !== document.documentElement) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      parts.unshift(`#${CSS.escape(current.id)}`);
+      break;
+    }
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current.tagName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-of-type(${index})`;
+      }
+    }
+    parts.unshift(selector);
+    current = parent;
+  }
+  return parts.join(" > ");
+}
+
+// src/utils/getElementInfo.ts
+var CAPTURED_ATTRS = ["id", "class", "role", "data-testid", "href", "type", "name", "aria-label"];
+function getElementInfo(el) {
+  const rect = el.getBoundingClientRect();
+  const attributes = {};
+  for (const attr of CAPTURED_ATTRS) {
+    const value = el.getAttribute(attr);
+    if (value) {
+      attributes[attr] = value;
+    }
+  }
+  return {
+    selector: getElementSelector(el),
+    tagName: el.tagName.toLowerCase(),
+    textContent: (el.textContent ?? "").trim().slice(0, 80),
+    rect: {
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height
+    },
+    attributes
+  };
+}
+
+// src/utils/isShitekiElement.ts
+function isShitekiElement(el) {
+  return !!el.closest(".shiteki-root");
+}
+
+// src/hooks/useElementPicker.ts
+function useElementPicker({ enabled, onElementSelected }) {
+  const [hoveredRect, setHoveredRect] = useState3(null);
+  const onElementSelectedRef = useRef2(onElementSelected);
+  onElementSelectedRef.current = onElementSelected;
+  const handleMouseMove = useCallback3((e) => {
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || isShitekiElement(el)) {
+      setHoveredRect(null);
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    setHoveredRect({
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height
+    });
+  }, []);
+  const handleClick = useCallback3((e) => {
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || isShitekiElement(el)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    const info = getElementInfo(el);
+    setHoveredRect(null);
+    onElementSelectedRef.current(info);
+  }, []);
+  useEffect(() => {
+    if (!enabled) {
+      setHoveredRect(null);
+      return;
+    }
+    document.body.style.cursor = "crosshair";
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.body.style.cursor = "";
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [enabled, handleMouseMove, handleClick]);
+  return { hoveredRect };
+}
+
+// src/hooks/useSubmit.ts
+import { useCallback as useCallback4, useState as useState4 } from "react";
+var SHITEKI_FOOTER = "\n\n---\n*Submitted via [Shiteki](https://github.com/taterboom/shiteki)*";
+async function submitViaEndpoint(config, title, body) {
+  const res = await fetch(`${config.endpoint}/actions/send`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      owner: config.owner,
+      repo: config.repo,
+      data: { title, body, labels: config.labels }
+    })
+  });
+  const json = await res.json();
+  if (!res.ok || !json.success) {
+    throw new Error(json.error ?? "Failed to submit");
+  }
+  return { issueUrl: json.issueUrl, issueNumber: json.issueNumber };
+}
+async function submitDirect(config, title, body) {
+  const issueBody = body + SHITEKI_FOOTER;
+  const res = await fetch(
+    `https://api.github.com/repos/${config.owner}/${config.repo}/issues`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${config.githubToken}`,
+        Accept: "application/vnd.github+json",
+        "User-Agent": "shiteki-widget",
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        title,
+        body: issueBody,
+        labels: config.labels
+      })
+    }
+  );
+  if (!res.ok) {
+    const json2 = await res.json().catch(() => null);
+    throw new Error(json2?.message ?? `GitHub API error (${res.status})`);
+  }
+  const json = await res.json();
+  return { issueUrl: json.html_url, issueNumber: json.number };
+}
+function useSubmit(config) {
+  const [state, setState] = useState4({ status: "idle" });
+  const submit = useCallback4(
+    async (title, body) => {
+      setState({ status: "loading" });
+      try {
+        const result = config.mode === "direct" ? await submitDirect(config, title, body) : await submitViaEndpoint(config, title, body);
+        setState({ status: "success", result });
+      } catch (err) {
+        setState({
+          status: "error",
+          error: err instanceof Error ? err.message : "Unknown error"
+        });
+      }
+    },
+    [config.mode, config.endpoint, config.githubToken, config.owner, config.repo, config.labels]
+  );
+  const reset = useCallback4(() => setState({ status: "idle" }), []);
+  return { state, submit, reset };
+}
+
+// src/hooks/useClipboard.ts
+import { useCallback as useCallback5, useRef as useRef3, useState as useState5 } from "react";
+function useClipboard(timeout = 2e3) {
+  const [copied, setCopied] = useState5(false);
+  const timerRef = useRef3();
+  const copy = useCallback5(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      setCopied(true);
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), timeout);
+    },
+    [timeout]
+  );
+  return { copied, copy };
+}
+
+// src/hooks/useKeyboardShortcuts.ts
+import { useEffect as useEffect2, useRef as useRef4 } from "react";
+function isInputTarget(target) {
+  if (!target || !(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+var DOUBLE_TAP_THRESHOLD = 300;
+function useKeyboardShortcuts(opts) {
+  const lastDRef = useRef4(0);
+  useEffect2(() => {
+    function handleKeyDown(e) {
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (e.key.toLowerCase() === "x" && !isInputTarget(e.target)) {
+        e.preventDefault();
+        opts.onToggleOpen();
+        return;
+      }
+      if (!opts.open) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (opts.mode === "annotating") {
+          opts.onCancelAnnotation();
+        } else if (opts.sendDialogOpen) {
+          opts.onCloseSendDialog();
+        } else if (opts.settingsOpen) {
+          opts.onCloseSettings();
+        } else {
+          opts.onClose();
+        }
+        return;
+      }
+      if (isInputTarget(e.target)) return;
+      const key = e.key.toLowerCase();
+      if (key === "c" && opts.annotationCount > 0) {
+        e.preventDefault();
+        opts.onCopy();
+      } else if (key === "s" && opts.annotationCount > 0) {
+        e.preventDefault();
+        opts.onSend();
+      } else if (key === "d" && opts.annotationCount > 0) {
+        const now = Date.now();
+        if (now - lastDRef.current < DOUBLE_TAP_THRESHOLD) {
+          e.preventDefault();
+          opts.onClear();
+          lastDRef.current = 0;
+        } else {
+          lastDRef.current = now;
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [
+    opts.open,
+    opts.mode,
+    opts.annotationCount,
+    opts.settingsOpen,
+    opts.sendDialogOpen,
+    opts.onCopy,
+    opts.onSend,
+    opts.onClear,
+    opts.onToggleOpen,
+    opts.onClose,
+    opts.onCancelAnnotation,
+    opts.onCloseSettings,
+    opts.onCloseSendDialog
+  ]);
+}
+
+// src/hooks/useShortcutHint.ts
+import { useCallback as useCallback6, useState as useState6 } from "react";
+var STORAGE_KEY3 = "shiteki:shortcut-hint-dismissed";
+function useShortcutHint() {
+  const [showHint, setShowHint] = useState6(() => {
+    try {
+      return !localStorage.getItem(STORAGE_KEY3);
+    } catch {
+      return true;
+    }
+  });
+  const dismissHint = useCallback6(() => {
+    setShowHint(false);
+    try {
+      localStorage.setItem(STORAGE_KEY3, "1");
+    } catch {
+    }
+  }, []);
+  return { showHint, dismissHint };
+}
+
+// src/utils/generatePrompt.ts
+function generatePrompt(annotations) {
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  const pageTitle = document.title || "Untitled";
+  const pageUrl = location.href;
+  const lines = [
+    "# Visual Annotations",
+    "",
+    `**Page:** [${pageTitle}](${pageUrl})`,
+    `**Annotations:** ${annotations.length}`,
+    `**Captured:** ${now}`
+  ];
+  for (const ann of annotations) {
+    const { elementInfo: el } = ann;
+    lines.push(
+      "",
+      "---",
+      "",
+      `## Annotation #${ann.id}`,
+      "",
+      "**What should change:**",
+      `> ${ann.comment}`,
+      "",
+      "**Element:**",
+      `- Tag: \`<${el.tagName}>\``,
+      `- Text: "${el.textContent}"`,
+      `- Selector: \`${el.selector}\``
+    );
+    const attrEntries = Object.entries(el.attributes);
+    if (attrEntries.length > 0) {
+      lines.push(`- Attributes: ${attrEntries.map(([k, v]) => `\`${k}="${v}"\``).join(", ")}`);
+    }
+  }
+  lines.push("");
+  return lines.join("\n");
+}
+
+// src/components/Toolbar.tsx
+import { motion, AnimatePresence } from "motion/react";
+
+// src/utils/spring.ts
+var spring = { type: "spring", bounce: 0.1, duration: 0.3 };
+
+// src/components/Toolbar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Toolbar({
+  open,
+  annotationCount,
+  copied,
+  sending,
+  settingsOpen,
+  onOpen,
+  onCopy,
+  onSend,
+  onClear,
+  onSettings,
+  onClose,
+  showHint,
+  onDismissHint
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      className: "shiteki-toolbar",
+      initial: { opacity: 0, scale: 0 },
+      animate: {
+        opacity: 1,
+        scale: 1,
+        gap: open ? 4 : 0,
+        padding: "6px",
+        background: open ? "#ffffff" : "rgb(37, 99, 235)",
+        borderColor: open ? "#e5e7eb" : "transparent",
+        boxShadow: open ? "0 4px 12px rgba(0, 0, 0, 0.08)" : "0 2px 16px rgba(37, 99, 235, 0.3)"
+      },
+      transition: spring,
+      onClick: !open ? onOpen : void 0,
+      role: !open ? "button" : void 0,
+      "aria-label": !open ? "Open Shiteki" : void 0,
+      style: { cursor: !open ? "pointer" : void 0 },
+      whileHover: !open ? { scale: 1.08, boxShadow: "0 4px 20px rgba(37, 99, 235, 0.4)" } : void 0,
+      whileTap: !open ? { scale: 0.95 } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "shiteki-toolbar-picker", children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: `shiteki-toolbar-btn ${open ? "shiteki-toolbar-btn--active" : ""}`,
+              whileHover: { scale: 1.1 },
+              whileTap: { scale: 0.9 },
+              style: !open ? { color: "#fff", pointerEvents: "none" } : { pointerEvents: "none" },
+              children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+                /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" })
+              ] })
+            }
+          ),
+          open && annotationCount > 0 && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "shiteki-toolbar-badge",
+              initial: { scale: 0 },
+              animate: { scale: 1 },
+              transition: spring,
+              children: annotationCount
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, width: 0 },
+            animate: { opacity: 1, width: "auto" },
+            exit: { opacity: 0, width: 0 },
+            transition: spring,
+            style: { overflow: "hidden", display: "flex", alignItems: "center", gap: 4 },
+            children: [
+              annotationCount > 0 && /* @__PURE__ */ jsx("div", { className: "shiteki-toolbar-sep" }),
+              annotationCount > 0 && /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onCopy, title: "Copy to clipboard", children: copied ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }) }),
+              annotationCount > 0 && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "shiteki-toolbar-btn",
+                  onClick: onSend,
+                  disabled: sending,
+                  title: "Send as GitHub Issue",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                    /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                  ] })
+                }
+              ),
+              annotationCount > 0 && /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onClear, title: "Clear all annotations", children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+                /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `shiteki-toolbar-btn ${settingsOpen ? "shiteki-toolbar-btn--active" : ""}`,
+                  onClick: onSettings,
+                  title: "Settings",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                    /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "shiteki-toolbar-sep" }),
+              /* @__PURE__ */ jsx("button", { className: "shiteki-toolbar-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] }) })
+            ]
+          },
+          "expand"
+        ) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: open && showHint && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "shiteki-shortcut-hint",
+            initial: { opacity: 0, y: 4 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 4 },
+            transition: { duration: 0.15 },
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("kbd", { children: "X" }),
+                " Toggle",
+                /* @__PURE__ */ jsx("kbd", { children: "C" }),
+                " Copy",
+                /* @__PURE__ */ jsx("kbd", { children: "S" }),
+                " Send",
+                /* @__PURE__ */ jsx("kbd", { children: "DD" }),
+                " Clear"
+              ] }),
+              /* @__PURE__ */ jsx("button", { className: "shiteki-shortcut-hint-close", onClick: onDismissHint, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] }) })
+            ]
+          },
+          "hint"
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/ElementHighlight.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ElementHighlight({ rect }) {
+  if (!rect) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "shiteki-highlight",
+      style: {
+        top: rect.top - 1.5,
+        left: rect.left - 1.5,
+        width: rect.width + 3,
+        height: rect.height + 3
+      }
+    }
+  );
+}
+
+// src/components/AnnotationPopover.tsx
+import { useEffect as useEffect3, useRef as useRef5, useState as useState7 } from "react";
+import { motion as motion2 } from "motion/react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AnnotationPopover({ elementInfo, onAdd, onCancel }) {
+  const [comment, setComment] = useState7("");
+  const textareaRef = useRef5(null);
+  const [dragOffset, setDragOffset] = useState7({ x: 0, y: 0 });
+  const dragRef = useRef5(null);
+  useEffect3(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const { rect } = elementInfo;
+  const spaceBelow = window.innerHeight - (rect.top + rect.height);
+  const above = spaceBelow < 250;
+  const top = above ? rect.top - 180 : rect.top + rect.height + 8;
+  let left = rect.left + rect.width / 2 - 160;
+  left = Math.max(12, Math.min(left, window.innerWidth - 332));
+  const yOffset = above ? -8 : 8;
+  const handlePointerDown = (e) => {
+    dragRef.current = { startX: e.clientX, startY: e.clientY, origX: dragOffset.x, origY: dragOffset.y };
+    e.target.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!dragRef.current) return;
+    setDragOffset({
+      x: dragRef.current.origX + e.clientX - dragRef.current.startX,
+      y: dragRef.current.origY + e.clientY - dragRef.current.startY
+    });
+  };
+  const handlePointerUp = () => {
+    dragRef.current = null;
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!comment.trim()) return;
+    onAdd(comment.trim());
+  };
+  return /* @__PURE__ */ jsxs2(
+    motion2.div,
+    {
+      className: "shiteki-popover",
+      style: { top: top + dragOffset.y, left: left + dragOffset.x, transformOrigin: above ? "bottom center" : "top center" },
+      initial: { opacity: 0, scale: 0.95, y: yOffset },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.95, y: yOffset },
+      transition: spring,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "shiteki-popover-info",
+            style: { cursor: "grab" },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsxs2("span", { className: "shiteki-popover-tag", children: [
+                "<",
+                elementInfo.tagName,
+                ">"
+              ] }),
+              elementInfo.textContent && /* @__PURE__ */ jsxs2("span", { className: "shiteki-popover-text", children: [
+                '"',
+                elementInfo.textContent,
+                '"'
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx3(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: "shiteki-popover-textarea",
+              placeholder: "What should change?",
+              value: comment,
+              onChange: (e) => setComment(e.target.value),
+              rows: 3
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "shiteki-popover-actions", children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", className: "shiteki-btn shiteki-btn--ghost", onClick: onCancel, children: "Cancel" }),
+            /* @__PURE__ */ jsx3("button", { type: "submit", className: "shiteki-btn shiteki-btn--primary", disabled: !comment.trim(), children: "Add" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/AnnotationMarkers.tsx
+import { AnimatePresence as AnimatePresence2 } from "motion/react";
+
+// src/hooks/useMarkerPositions.ts
+import { useEffect as useEffect4, useState as useState8 } from "react";
+function useMarkerPositions(annotations) {
+  const [positions, setPositions] = useState8([]);
+  useEffect4(() => {
+    function update() {
+      const newPositions = annotations.map((ann) => {
+        const el = document.querySelector(ann.elementInfo.selector);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          return { id: ann.id, top: rect.top, left: rect.left + rect.width };
+        }
+        const r = ann.elementInfo.rect;
+        return { id: ann.id, top: r.top, left: r.left + r.width };
+      });
+      setPositions(newPositions);
+    }
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [annotations]);
+  return positions;
+}
+
+// src/components/AnnotationMarker.tsx
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function AnnotationMarker({ id, top, left, onRemove }) {
+  return /* @__PURE__ */ jsx4(
+    motion3.div,
+    {
+      className: "shiteki-marker",
+      style: { top: top - 10, left: left - 10 },
+      title: `Annotation #${id} (click to remove)`,
+      onClick: () => onRemove(id),
+      initial: { opacity: 0, scale: 0 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0 },
+      transition: spring,
+      whileHover: { scale: 1.25 },
+      children: id
+    }
+  );
+}
+
+// src/components/AnnotationMarkers.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function AnnotationMarkers({ annotations, onRemove }) {
+  const positions = useMarkerPositions(annotations);
+  return /* @__PURE__ */ jsx5(AnimatePresence2, { children: positions.map((pos) => /* @__PURE__ */ jsx5(
+    AnnotationMarker,
+    {
+      id: pos.id,
+      top: pos.top,
+      left: pos.left,
+      onRemove
+    },
+    pos.id
+  )) });
+}
+
+// src/components/StatusMessage.tsx
+import { useEffect as useEffect5 } from "react";
+import { motion as motion4 } from "motion/react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function StatusMessage({ state, onDismiss }) {
+  useEffect5(() => {
+    if (state.status === "success" || state.status === "error") {
+      const timer = setTimeout(onDismiss, 4e3);
+      return () => clearTimeout(timer);
+    }
+  }, [state.status, onDismiss]);
+  if (state.status === "success") {
+    return /* @__PURE__ */ jsxs3(
+      motion4.div,
+      {
+        className: "shiteki-status shiteki-status--success",
+        initial: { opacity: 0, y: 12, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: 12, scale: 0.95 },
+        transition: spring,
+        children: [
+          "Issue created!",
+          " ",
+          /* @__PURE__ */ jsxs3("a", { href: state.result.issueUrl, target: "_blank", rel: "noopener noreferrer", children: [
+            "#",
+            state.result.issueNumber
+          ] })
+        ]
+      }
+    );
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx6(
+      motion4.div,
+      {
+        className: "shiteki-status shiteki-status--error",
+        initial: { opacity: 0, y: 12, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: 12, scale: 0.95 },
+        transition: spring,
+        children: state.error
+      }
+    );
+  }
+  if (state.status === "loading") {
+    return /* @__PURE__ */ jsx6(
+      motion4.div,
+      {
+        className: "shiteki-status",
+        initial: { opacity: 0, y: 12, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: 12, scale: 0.95 },
+        transition: spring,
+        children: "Sending..."
+      }
+    );
+  }
+  return null;
+}
+
+// src/components/SettingsPanel.tsx
+import { useCallback as useCallback7, useState as useState9 } from "react";
+import { motion as motion5 } from "motion/react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function SettingsPanel({ config, onSave, onCancel }) {
+  const [mode, setMode] = useState9(config.mode);
+  const [endpoint, setEndpoint] = useState9(config.endpoint);
+  const [githubToken, setGithubToken] = useState9(config.githubToken);
+  const [owner, setOwner] = useState9(config.owner);
+  const [repo, setRepo] = useState9(config.repo);
+  const [labels, setLabels] = useState9((config.labels ?? []).join(", "));
+  const handleSave = useCallback7(() => {
+    onSave({
+      mode,
+      endpoint: endpoint.trim(),
+      githubToken: githubToken.trim(),
+      owner: owner.trim(),
+      repo: repo.trim(),
+      labels: labels.split(",").map((l) => l.trim()).filter(Boolean)
+    });
+  }, [mode, endpoint, githubToken, owner, repo, labels, onSave]);
+  return /* @__PURE__ */ jsxs4(
+    motion5.div,
+    {
+      className: "shiteki-settings",
+      initial: { opacity: 0, y: 12 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 12 },
+      transition: spring,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: "shiteki-settings-header", children: "Settings" }),
+        /* @__PURE__ */ jsxs4("div", { className: "shiteki-settings-body", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Submit mode" }),
+            /* @__PURE__ */ jsxs4("div", { className: "shiteki-radio-group", children: [
+              /* @__PURE__ */ jsxs4("label", { className: "shiteki-radio", children: [
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "shiteki-mode",
+                    checked: mode === "endpoint",
+                    onChange: () => setMode("endpoint")
+                  }
+                ),
+                /* @__PURE__ */ jsx7("span", { children: "Endpoint" })
+              ] }),
+              /* @__PURE__ */ jsxs4("label", { className: "shiteki-radio", children: [
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "shiteki-mode",
+                    checked: mode === "direct",
+                    onChange: () => setMode("direct")
+                  }
+                ),
+                /* @__PURE__ */ jsx7("span", { children: "Direct" })
+              ] })
+            ] })
+          ] }),
+          mode === "endpoint" ? /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Endpoint" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                className: "shiteki-settings-input",
+                type: "text",
+                value: endpoint,
+                onChange: (e) => setEndpoint(e.target.value),
+                placeholder: "https://..."
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "GitHub Token" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                className: "shiteki-settings-input",
+                type: "password",
+                value: githubToken,
+                onChange: (e) => setGithubToken(e.target.value),
+                placeholder: "github_pat_..."
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Owner" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                className: "shiteki-settings-input",
+                type: "text",
+                value: owner,
+                onChange: (e) => setOwner(e.target.value),
+                placeholder: "github-username"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Repo" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                className: "shiteki-settings-input",
+                type: "text",
+                value: repo,
+                onChange: (e) => setRepo(e.target.value),
+                placeholder: "repository-name"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("label", { className: "shiteki-settings-field", children: [
+            /* @__PURE__ */ jsx7("span", { className: "shiteki-settings-label", children: "Labels" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                className: "shiteki-settings-input",
+                type: "text",
+                value: labels,
+                onChange: (e) => setLabels(e.target.value),
+                placeholder: "bug, feedback"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "shiteki-settings-actions", children: [
+          /* @__PURE__ */ jsx7("button", { className: "shiteki-btn shiteki-btn--ghost", onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx7("button", { className: "shiteki-btn shiteki-btn--primary", onClick: handleSave, children: "Save" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/SendDialog.tsx
+import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef6, useState as useState10 } from "react";
+import { motion as motion6 } from "motion/react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function SendDialog({ defaultTitle, sending, onConfirm, onCancel }) {
+  const [title, setTitle] = useState10(defaultTitle);
+  const inputRef = useRef6(null);
+  useEffect6(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  const handleSubmit = useCallback8(
+    (e) => {
+      e.preventDefault();
+      if (!title.trim() || sending) return;
+      onConfirm(title.trim());
+    },
+    [title, sending, onConfirm]
+  );
+  return /* @__PURE__ */ jsxs5(
+    motion6.div,
+    {
+      className: "shiteki-popover",
+      style: {
+        position: "fixed",
+        bottom: 76,
+        right: 20,
+        width: 320
+      },
+      initial: { opacity: 0, y: 12 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 12 },
+      transition: spring,
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "shiteki-popover-info", children: /* @__PURE__ */ jsx8("span", { className: "shiteki-popover-tag", children: "Create Issue" }) }),
+        /* @__PURE__ */ jsxs5("form", { className: "shiteki-popover-form", onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              ref: inputRef,
+              className: "shiteki-settings-input",
+              type: "text",
+              value: title,
+              onChange: (e) => setTitle(e.target.value),
+              placeholder: "Issue title"
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "shiteki-popover-actions", children: [
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "shiteki-btn shiteki-btn--ghost",
+                onClick: onCancel,
+                disabled: sending,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "submit",
+                className: "shiteki-btn shiteki-btn--primary",
+                disabled: !title.trim() || sending,
+                children: sending ? "Sending\u2026" : "Send"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles/widget.css
+styleInject('.shiteki-root {\n  --shiteki-primary: #2563eb;\n  --shiteki-primary-hover: #1d4ed8;\n  --shiteki-bg: #ffffff;\n  --shiteki-border: #e5e7eb;\n  --shiteki-text: #111827;\n  --shiteki-text-secondary: #6b7280;\n  --shiteki-radius: 12px;\n  --shiteki-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--shiteki-text);\n  box-sizing: border-box;\n}\n.shiteki-toolbar {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  border-radius: 9999px;\n  z-index: 99999;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  box-shadow: var(--shiteki-shadow);\n}\n.shiteki-toolbar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--shiteki-text);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n.shiteki-toolbar-btn:hover {\n  background: #f3f4f6;\n}\n.shiteki-toolbar-btn:active {\n  transform: scale(0.9);\n}\n.shiteki-toolbar-btn--active {\n  background: var(--shiteki-primary);\n  color: #fff;\n}\n.shiteki-toolbar-btn--active:hover {\n  background: var(--shiteki-primary-hover);\n}\n.shiteki-toolbar-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.shiteki-toolbar-picker {\n  position: relative;\n}\n.shiteki-toolbar-badge {\n  position: absolute;\n  top: -4px;\n  right: -6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: #ef4444;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.shiteki-toolbar-sep {\n  width: 1px;\n  height: 24px;\n  background: var(--shiteki-border);\n  margin: 0 4px;\n}\n.shiteki-highlight {\n  position: fixed;\n  pointer-events: none;\n  border: 1.5px solid var(--shiteki-primary, #2563eb);\n  background: rgba(37, 99, 235, 0.08);\n  z-index: 99997;\n  transition: all 0.05s ease-out;\n  box-sizing: border-box;\n}\n.shiteki-marker {\n  position: fixed;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: var(--shiteki-primary, #2563eb);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 99998;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  user-select: none;\n}\n.shiteki-popover {\n  position: fixed;\n  width: 320px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: var(--shiteki-radius);\n  box-shadow: var(--shiteki-shadow);\n  z-index: 99999;\n  overflow: hidden;\n}\n.shiteki-popover-info {\n  padding: 10px 14px;\n  background: #f9fafb;\n  border-bottom: 1px solid var(--shiteki-border);\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  overflow: hidden;\n}\n.shiteki-popover-tag {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    "SF Mono",\n    Menlo,\n    monospace;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--shiteki-primary);\n  white-space: nowrap;\n}\n.shiteki-popover-text {\n  font-size: 12px;\n  color: var(--shiteki-text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shiteki-popover-form {\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.shiteki-popover-textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: var(--shiteki-text);\n  background: transparent;\n  outline: none;\n  resize: vertical;\n  min-height: 60px;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.shiteki-popover-textarea:focus {\n  border-color: var(--shiteki-primary);\n}\n.shiteki-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.shiteki-btn {\n  padding: 6px 14px;\n  border: none;\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.shiteki-btn:active {\n  transform: scale(0.95);\n}\n.shiteki-btn--primary {\n  background: var(--shiteki-primary);\n  color: #fff;\n}\n.shiteki-btn--primary:hover:not(:disabled) {\n  background: var(--shiteki-primary-hover);\n}\n.shiteki-btn--primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.shiteki-btn--ghost {\n  background: transparent;\n  color: var(--shiteki-text-secondary);\n}\n.shiteki-btn--ghost:hover {\n  background: #f3f4f6;\n}\n.shiteki-status {\n  position: fixed;\n  bottom: 76px;\n  right: 20px;\n  padding: 8px 18px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  box-shadow: var(--shiteki-shadow);\n  font-size: 13px;\n  white-space: nowrap;\n  z-index: 99998;\n}\n.shiteki-status--success {\n  color: #059669;\n}\n.shiteki-status--error {\n  color: #dc2626;\n}\n.shiteki-status a {\n  color: inherit;\n  text-decoration: underline;\n}\n.shiteki-settings {\n  position: fixed;\n  bottom: 76px;\n  right: 20px;\n  width: 280px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: var(--shiteki-radius);\n  box-shadow: var(--shiteki-shadow);\n  z-index: 99999;\n  overflow: hidden;\n}\n.shiteki-settings-header {\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 600;\n  border-bottom: 1px solid var(--shiteki-border);\n  background: #f9fafb;\n}\n.shiteki-settings-body {\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.shiteki-settings-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.shiteki-settings-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--shiteki-text-secondary);\n}\n.shiteki-settings-input {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  font: inherit;\n  font-size: 13px;\n  color: var(--shiteki-text);\n  background: transparent;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.shiteki-settings-input:focus {\n  border-color: var(--shiteki-primary);\n}\n.shiteki-radio-group {\n  display: flex;\n  gap: 12px;\n}\n.shiteki-radio {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.shiteki-radio input[type=radio] {\n  margin: 0;\n  accent-color: var(--shiteki-primary);\n  cursor: pointer;\n}\n.shiteki-settings-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 14px 12px;\n}\n.shiteki-shortcut-hint {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 10px;\n  background: var(--shiteki-bg);\n  border: 1px solid var(--shiteki-border);\n  border-radius: 8px;\n  box-shadow: var(--shiteki-shadow);\n  font-size: 12px;\n  color: var(--shiteki-text-secondary);\n  white-space: nowrap;\n}\n.shiteki-shortcut-hint kbd {\n  display: inline-block;\n  padding: 1px 5px;\n  margin-right: 2px;\n  background: #f3f4f6;\n  border: 1px solid var(--shiteki-border);\n  border-radius: 4px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--shiteki-text);\n  line-height: 1.4;\n  min-width: 19.5px;\n  text-align: center;\n}\n.shiteki-shortcut-hint span {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.shiteki-shortcut-hint-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--shiteki-text-secondary);\n  cursor: pointer;\n  padding: 0;\n}\n.shiteki-shortcut-hint-close:hover {\n  background: #f3f4f6;\n}\n');
+
+// src/components/ShitekiWidget.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ShitekiWidget(props) {
+  const { config, updateConfig } = useConfig(props);
+  const [open, setOpen] = useState11(false);
+  const [mode, setMode] = useState11("idle");
+  const [settingsOpen, setSettingsOpen] = useState11(false);
+  const [sendDialogOpen, setSendDialogOpen] = useState11(false);
+  const [selectedElement, setSelectedElement] = useState11(null);
+  const { annotations, add, remove, clear } = useAnnotations();
+  const { state: submitState, submit, reset: resetSubmit } = useSubmit(config);
+  const { copied, copy } = useClipboard();
+  const { showHint, dismissHint } = useShortcutHint();
+  useEffect7(() => {
+    if (submitState.status === "success") {
+      clear();
+    }
+  }, [submitState.status, clear]);
+  const handleElementSelected = useCallback9((info) => {
+    setSelectedElement(info);
+    setMode("annotating");
+  }, []);
+  const { hoveredRect } = useElementPicker({
+    enabled: open && mode === "picking",
+    onElementSelected: handleElementSelected
+  });
+  const handleOpen = useCallback9(() => {
+    setOpen(true);
+    setMode("picking");
+  }, []);
+  const handleToggleOpen = useCallback9(() => {
+    setOpen((prev) => {
+      if (prev) {
+        setMode("idle");
+        setSelectedElement(null);
+        setSettingsOpen(false);
+      } else {
+        setMode("picking");
+      }
+      return !prev;
+    });
+  }, []);
+  const handleAddAnnotation = useCallback9(
+    (comment) => {
+      if (selectedElement) {
+        add(selectedElement, comment);
+      }
+      setSelectedElement(null);
+      setMode("picking");
+    },
+    [selectedElement, add]
+  );
+  const handleCancelAnnotation = useCallback9(() => {
+    setSelectedElement(null);
+    setMode("picking");
+  }, []);
+  const handleCopy = useCallback9(() => {
+    const prompt = generatePrompt(annotations);
+    copy(prompt);
+  }, [annotations, copy]);
+  const handleSend = useCallback9(() => {
+    setSendDialogOpen(true);
+  }, []);
+  const handleSendConfirm = useCallback9(
+    (title) => {
+      const prompt = generatePrompt(annotations);
+      submit(title, prompt);
+      setSendDialogOpen(false);
+    },
+    [annotations, submit]
+  );
+  const handleSendCancel = useCallback9(() => {
+    setSendDialogOpen(false);
+  }, []);
+  const handleClear = useCallback9(() => {
+    clear();
+    setSelectedElement(null);
+  }, [clear]);
+  const handleClose = useCallback9(() => {
+    setOpen(false);
+    setMode("idle");
+    setSelectedElement(null);
+    setSettingsOpen(false);
+  }, []);
+  const handleToggleSettings = useCallback9(() => {
+    setSettingsOpen((prev) => !prev);
+  }, []);
+  const handleSettingsSave = useCallback9(
+    (partial) => {
+      updateConfig(partial);
+      setSettingsOpen(false);
+    },
+    [updateConfig]
+  );
+  const handleSettingsCancel = useCallback9(() => {
+    setSettingsOpen(false);
+  }, []);
+  useKeyboardShortcuts({
+    open,
+    mode,
+    annotationCount: annotations.length,
+    settingsOpen,
+    sendDialogOpen,
+    onCopy: handleCopy,
+    onSend: handleSend,
+    onClear: handleClear,
+    onToggleOpen: handleToggleOpen,
+    onClose: handleClose,
+    onCancelAnnotation: handleCancelAnnotation,
+    onCloseSettings: handleSettingsCancel,
+    onCloseSendDialog: handleSendCancel
+  });
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs6("div", { className: "shiteki-root", children: [
+      /* @__PURE__ */ jsx9(
+        Toolbar,
+        {
+          open,
+          annotationCount: annotations.length,
+          copied,
+          sending: submitState.status === "loading",
+          settingsOpen,
+          onOpen: handleOpen,
+          onCopy: handleCopy,
+          onSend: handleSend,
+          onClear: handleClear,
+          onSettings: handleToggleSettings,
+          onClose: handleClose,
+          showHint,
+          onDismissHint: dismissHint
+        }
+      ),
+      open && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx9(ElementHighlight, { rect: hoveredRect }),
+        /* @__PURE__ */ jsx9(AnimatePresence3, { children: mode === "annotating" && selectedElement && /* @__PURE__ */ jsx9(
+          AnnotationPopover,
+          {
+            elementInfo: selectedElement,
+            onAdd: handleAddAnnotation,
+            onCancel: handleCancelAnnotation
+          },
+          "popover"
+        ) }),
+        /* @__PURE__ */ jsx9(AnnotationMarkers, { annotations, onRemove: remove }),
+        /* @__PURE__ */ jsxs6(AnimatePresence3, { children: [
+          settingsOpen && /* @__PURE__ */ jsx9(
+            SettingsPanel,
+            {
+              config,
+              onSave: handleSettingsSave,
+              onCancel: handleSettingsCancel
+            },
+            "settings"
+          ),
+          sendDialogOpen && /* @__PURE__ */ jsx9(
+            SendDialog,
+            {
+              defaultTitle: `Visual Annotations (${annotations.length}) \u2014 ${document.title || location.href}`,
+              sending: submitState.status === "loading",
+              onConfirm: handleSendConfirm,
+              onCancel: handleSendCancel
+            },
+            "send-dialog"
+          )
+        ] }),
+        /* @__PURE__ */ jsx9(AnimatePresence3, { children: submitState.status !== "idle" && /* @__PURE__ */ jsx9(StatusMessage, { state: submitState, onDismiss: resetSubmit }, "status") })
+      ] })
+    ] }),
+    document.body
+  );
+}
+export {
+  ShitekiWidget
+};