@washi-ui/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,981 @@
+// src/useWashi.ts
+import { useRef, useState, useEffect, useCallback } from "react";
+import {
+  Washi
+} from "@washi-ui/core";
+function useWashi(options) {
+  const {
+    adapter,
+    initialMode = "view",
+    mountOptions,
+    onPinPlaced,
+    onCommentClick,
+    onCommentUpdate,
+    onCommentDelete
+  } = options;
+  const iframeRef = useRef(null);
+  const washiRef = useRef(null);
+  const [mode, setModeState] = useState(initialMode);
+  const [comments, setComments] = useState([]);
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    washiRef.current = new Washi(adapter);
+    return () => {
+      washiRef.current?.unmount();
+      washiRef.current = null;
+    };
+  }, [adapter]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    const washi = washiRef.current;
+    if (!iframe || !washi) return;
+    const handleLoad = async () => {
+      try {
+        await washi.mount(iframe, mountOptions);
+        setComments(washi.getComments());
+        if (initialMode !== "view") {
+          washi.setMode(initialMode);
+        }
+        setIsReady(true);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsReady(false);
+      }
+    };
+    if (iframe.contentDocument?.readyState === "complete") {
+      handleLoad();
+    } else {
+      iframe.addEventListener("load", handleLoad);
+    }
+    return () => {
+      iframe.removeEventListener("load", handleLoad);
+    };
+  }, [mountOptions, initialMode]);
+  useEffect(() => {
+    const washi = washiRef.current;
+    if (!washi || !isReady) return;
+    const unsubscribers = [];
+    if (onPinPlaced) {
+      unsubscribers.push(
+        washi.on("pin:placed", (event) => {
+          onPinPlaced(event);
+        })
+      );
+    }
+    if (onCommentClick) {
+      unsubscribers.push(
+        washi.on("comment:clicked", (comment) => {
+          onCommentClick(comment);
+        })
+      );
+    }
+    if (onCommentUpdate) {
+      unsubscribers.push(
+        washi.on(
+          "comment:updated",
+          (data) => {
+            onCommentUpdate(data);
+          }
+        )
+      );
+    }
+    if (onCommentDelete) {
+      unsubscribers.push(
+        washi.on("comment:deleted", (id) => {
+          onCommentDelete(id);
+        })
+      );
+    }
+    return () => {
+      unsubscribers.forEach((unsub) => unsub());
+    };
+  }, [isReady, onPinPlaced, onCommentClick, onCommentUpdate, onCommentDelete]);
+  const setMode = useCallback((newMode) => {
+    const washi = washiRef.current;
+    if (!washi) return;
+    try {
+      washi.setMode(newMode);
+      setModeState(newMode);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, []);
+  const addComment = useCallback(async (input) => {
+    const washi = washiRef.current;
+    if (!washi) throw new Error("Washi is not initialized");
+    const comment = await washi.addComment(input);
+    setComments(washi.getComments());
+    return comment;
+  }, []);
+  const updateComment = useCallback(
+    async (id, updates) => {
+      const washi = washiRef.current;
+      if (!washi) throw new Error("Washi is not initialized");
+      await washi.updateComment(id, updates);
+      setComments(washi.getComments());
+    },
+    []
+  );
+  const deleteComment = useCallback(async (id) => {
+    const washi = washiRef.current;
+    if (!washi) throw new Error("Washi is not initialized");
+    await washi.deleteComment(id);
+    setComments(washi.getComments());
+  }, []);
+  return {
+    iframeRef,
+    mode,
+    setMode,
+    comments,
+    addComment,
+    updateComment,
+    deleteComment,
+    isReady,
+    error
+  };
+}
+
+// src/WashiProvider.tsx
+import {
+  createContext,
+  useContext,
+  useRef as useRef2,
+  useState as useState2,
+  useEffect as useEffect2,
+  useCallback as useCallback2,
+  useMemo
+} from "react";
+import {
+  Washi as Washi2
+} from "@washi-ui/core";
+import { jsx } from "react/jsx-runtime";
+var WashiContext = createContext(null);
+function WashiProvider({
+  adapter,
+  initialMode = "view",
+  mountOptions,
+  children
+}) {
+  const washiRef = useRef2(null);
+  if (!washiRef.current) {
+    washiRef.current = new Washi2(adapter);
+  }
+  const iframeRef = useRef2(null);
+  const iframeLoadCleanupRef = useRef2(null);
+  const washiEventCleanupsRef = useRef2([]);
+  const pinPlacedCallbacksRef = useRef2(
+    /* @__PURE__ */ new Set()
+  );
+  const clickCallbacksRef = useRef2(/* @__PURE__ */ new Set());
+  const [mode, setModeState] = useState2(initialMode);
+  const [comments, setComments] = useState2([]);
+  const [isReady, setIsReady] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [activeComment, setActiveCommentState] = useState2(null);
+  const [iframeElState, setIframeElState] = useState2(null);
+  useEffect2(() => {
+    return () => {
+      washiRef.current?.unmount();
+    };
+  }, []);
+  const refreshComments = useCallback2(() => {
+    const washi = washiRef.current;
+    if (washi) {
+      setComments(washi.getComments());
+    }
+  }, []);
+  const registerIframe = useCallback2(
+    (iframe) => {
+      iframeLoadCleanupRef.current?.();
+      iframeLoadCleanupRef.current = null;
+      washiEventCleanupsRef.current.forEach((fn) => fn());
+      washiEventCleanupsRef.current = [];
+      iframeRef.current = iframe;
+      setIframeElState(iframe);
+      if (!iframe) {
+        if (washiRef.current) {
+          washiRef.current.unmount();
+          setIsReady(false);
+          setComments([]);
+        }
+        return;
+      }
+      if (!washiRef.current) return;
+      const washi = washiRef.current;
+      const handleLoad = async () => {
+        try {
+          await washi.mount(iframe, mountOptions);
+          if (iframeRef.current !== iframe) return;
+          setComments(washi.getComments());
+          if (initialMode !== "view") {
+            washi.setMode(initialMode);
+          }
+          setIsReady(true);
+          setError(null);
+          washiEventCleanupsRef.current.push(
+            washi.on("pin:placed", (event) => {
+              pinPlacedCallbacksRef.current.forEach((cb) => cb(event));
+            })
+          );
+          washiEventCleanupsRef.current.push(
+            washi.on("comment:clicked", (comment) => {
+              clickCallbacksRef.current.forEach((cb) => cb(comment));
+            })
+          );
+          washiEventCleanupsRef.current.push(
+            washi.on("comment:updated", () => {
+              setComments(washi.getComments());
+            })
+          );
+          washiEventCleanupsRef.current.push(
+            washi.on("comment:deleted", () => {
+              setComments(washi.getComments());
+            })
+          );
+        } catch (err) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          setIsReady(false);
+        }
+      };
+      if (iframe.contentDocument?.readyState === "complete") {
+        handleLoad();
+      } else {
+        iframe.addEventListener("load", handleLoad);
+        iframeLoadCleanupRef.current = () => iframe.removeEventListener("load", handleLoad);
+      }
+    },
+    [mountOptions, initialMode]
+  );
+  const setMode = useCallback2((newMode) => {
+    const washi = washiRef.current;
+    if (!washi) return;
+    try {
+      washi.setMode(newMode);
+      setModeState(newMode);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, []);
+  const addComment = useCallback2(async (input) => {
+    const washi = washiRef.current;
+    if (!washi) throw new Error("Washi is not initialized");
+    const comment = await washi.addComment(input);
+    setComments(washi.getComments());
+    return comment;
+  }, []);
+  const updateComment = useCallback2(
+    async (id, updates) => {
+      const washi = washiRef.current;
+      if (!washi) throw new Error("Washi is not initialized");
+      await washi.updateComment(id, updates);
+      setComments(washi.getComments());
+    },
+    []
+  );
+  const deleteComment = useCallback2(async (id) => {
+    const washi = washiRef.current;
+    if (!washi) throw new Error("Washi is not initialized");
+    await washi.deleteComment(id);
+    setComments(washi.getComments());
+  }, []);
+  const onPinPlaced = useCallback2(
+    (callback) => {
+      pinPlacedCallbacksRef.current.add(callback);
+      return () => {
+        pinPlacedCallbacksRef.current.delete(callback);
+      };
+    },
+    []
+  );
+  const onCommentClick = useCallback2(
+    (callback) => {
+      clickCallbacksRef.current.add(callback);
+      return () => {
+        clickCallbacksRef.current.delete(callback);
+      };
+    },
+    []
+  );
+  const setActivePin = useCallback2((commentId) => {
+    const washi = washiRef.current;
+    if (washi) {
+      washi.setActivePin(commentId);
+    }
+  }, []);
+  const getCommentIndex = useCallback2((commentId) => {
+    const washi = washiRef.current;
+    if (washi) {
+      return washi.getCommentIndex(commentId);
+    }
+    return -1;
+  }, []);
+  const setActiveComment = useCallback2((comment) => {
+    setActiveCommentState(comment);
+    const washi = washiRef.current;
+    if (washi) {
+      washi.setActivePin(comment?.id ?? null);
+    }
+  }, []);
+  const value = useMemo(
+    () => ({
+      washi: washiRef.current,
+      iframeEl: iframeElState,
+      mode,
+      setMode,
+      comments,
+      addComment,
+      updateComment,
+      deleteComment,
+      refreshComments,
+      isReady,
+      error,
+      registerIframe,
+      onPinPlaced,
+      onCommentClick,
+      setActivePin,
+      getCommentIndex,
+      activeComment,
+      setActiveComment
+    }),
+    [
+      iframeElState,
+      mode,
+      setMode,
+      comments,
+      addComment,
+      updateComment,
+      deleteComment,
+      refreshComments,
+      isReady,
+      error,
+      registerIframe,
+      onPinPlaced,
+      onCommentClick,
+      setActivePin,
+      getCommentIndex,
+      activeComment,
+      setActiveComment
+    ]
+  );
+  return /* @__PURE__ */ jsx(WashiContext.Provider, { value, children });
+}
+function useWashiContext() {
+  const context = useContext(WashiContext);
+  if (!context) {
+    throw new Error("useWashiContext must be used within a WashiProvider");
+  }
+  return context;
+}
+
+// src/WashiFrame.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function WashiFrame({ src, className, style, ...props }) {
+  const { registerIframe } = useWashiContext();
+  const iframeRef = useRef3(null);
+  useEffect3(() => {
+    if (iframeRef.current) {
+      registerIframe(iframeRef.current);
+    }
+    return () => {
+      registerIframe(null);
+    };
+  }, [registerIframe]);
+  return /* @__PURE__ */ jsx2(
+    "iframe",
+    {
+      ref: iframeRef,
+      src,
+      className,
+      style,
+      ...props
+    }
+  );
+}
+
+// src/CommentList.tsx
+import React2 from "react";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+function CommentList({
+  renderComment,
+  filter,
+  sort,
+  emptyState,
+  className,
+  style
+}) {
+  const { comments, updateComment, deleteComment } = useWashiContext();
+  let displayComments = [...comments];
+  if (filter) {
+    displayComments = displayComments.filter(filter);
+  }
+  if (sort) {
+    displayComments.sort(sort);
+  }
+  if (displayComments.length === 0 && emptyState) {
+    return /* @__PURE__ */ jsx3(Fragment, { children: emptyState });
+  }
+  return /* @__PURE__ */ jsx3("div", { className, style, children: displayComments.map((comment) => {
+    const actions = {
+      onResolve: async () => {
+        await updateComment(comment.id, { resolved: !comment.resolved });
+      },
+      onDelete: async () => {
+        await deleteComment(comment.id);
+      },
+      onUpdate: async (updates) => {
+        await updateComment(comment.id, updates);
+      }
+    };
+    return /* @__PURE__ */ jsx3(React2.Fragment, { children: renderComment(comment, actions) }, comment.id);
+  }) });
+}
+
+// src/WashiToolBubble.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var positionStyles = {
+  "bottom-right": { bottom: 24, right: 24 },
+  "bottom-left": { bottom: 24, left: 24 },
+  "top-right": { top: 24, right: 24 },
+  "top-left": { top: 24, left: 24 }
+};
+function PencilIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+    /* @__PURE__ */ jsx4("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+  ] });
+}
+function ChatIcon() {
+  return /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+}
+function WashiToolBubble({
+  position = "bottom-right",
+  sidebarOpen = false,
+  onSidebarToggle,
+  accentColor = "#667eea"
+}) {
+  const { mode, setMode, isReady, comments } = useWashiContext();
+  const [hoveredBtn, setHoveredBtn] = useState3(null);
+  const isAnnotate = mode === "annotate";
+  const commentCount = comments.length;
+  const badgeLabel = commentCount > 99 ? "99+" : String(commentCount);
+  const pillStyle = {
+    position: "fixed",
+    ...positionStyles[position],
+    zIndex: 9998,
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "6px",
+    borderRadius: "999px",
+    backgroundColor: "rgba(255,255,255,0.92)",
+    backdropFilter: "blur(8px)",
+    WebkitBackdropFilter: "blur(8px)",
+    boxShadow: "0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08)",
+    border: "1px solid rgba(0,0,0,0.06)"
+  };
+  const btnBase = {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 40,
+    height: 40,
+    borderRadius: "50%",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.15s, box-shadow 0.15s, color 0.15s",
+    outline: "none"
+  };
+  const pencilActive = isAnnotate;
+  const pencilDisabled = !isReady;
+  const pencilStyle = {
+    ...btnBase,
+    backgroundColor: pencilActive ? accentColor : hoveredBtn === "pencil" ? "rgba(0,0,0,0.06)" : "transparent",
+    color: pencilActive ? "#fff" : "#374151",
+    opacity: pencilDisabled ? 0.5 : 1,
+    cursor: pencilDisabled ? "not-allowed" : "pointer",
+    boxShadow: pencilActive ? `0 0 0 3px ${accentColor}33` : "none"
+  };
+  const chatStyle = {
+    ...btnBase,
+    backgroundColor: sidebarOpen ? "rgba(0,0,0,0.06)" : hoveredBtn === "chat" ? "rgba(0,0,0,0.06)" : "transparent",
+    color: "#374151"
+  };
+  const badgeStyle = {
+    position: "absolute",
+    top: 4,
+    right: 4,
+    minWidth: 16,
+    height: 16,
+    borderRadius: "999px",
+    backgroundColor: accentColor,
+    color: "#fff",
+    fontSize: "10px",
+    fontWeight: 700,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 3px",
+    lineHeight: 1,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: pillStyle, children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        style: pencilStyle,
+        disabled: pencilDisabled,
+        title: isAnnotate ? "Exit annotate mode" : "Enter annotate mode",
+        onClick: () => !pencilDisabled && setMode(isAnnotate ? "view" : "annotate"),
+        onMouseEnter: () => setHoveredBtn("pencil"),
+        onMouseLeave: () => setHoveredBtn(null),
+        children: /* @__PURE__ */ jsx4(PencilIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        style: chatStyle,
+        title: sidebarOpen ? "Close comments" : "Open comments",
+        onClick: onSidebarToggle,
+        onMouseEnter: () => setHoveredBtn("chat"),
+        onMouseLeave: () => setHoveredBtn(null),
+        children: [
+          /* @__PURE__ */ jsx4(ChatIcon, {}),
+          commentCount > 0 && /* @__PURE__ */ jsx4("span", { style: badgeStyle, children: badgeLabel })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/WashiCommentsSidebar.tsx
+import { useState as useState4, useEffect as useEffect4 } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var BUBBLE_EDGE = 24;
+var BUBBLE_HEIGHT = 52;
+var GAP = 10;
+function getPanelBounds(position) {
+  const reserved = BUBBLE_EDGE + BUBBLE_HEIGHT + GAP;
+  switch (position) {
+    case "bottom-right":
+      return { top: 0, right: 0, bottom: reserved };
+    case "bottom-left":
+      return { top: 0, left: 0, bottom: reserved };
+    case "top-right":
+      return { top: reserved, right: 0, bottom: 0 };
+    case "top-left":
+      return { top: reserved, left: 0, bottom: 0 };
+  }
+}
+var KEYFRAMES_ID = "__washi-panel-kf__";
+if (typeof document !== "undefined" && !document.getElementById(KEYFRAMES_ID)) {
+  const style = document.createElement("style");
+  style.id = KEYFRAMES_ID;
+  style.textContent = `
+    @keyframes washi-panel-in-right  { from { transform: translateX(100%);  opacity: 0; } to { transform: translateX(0);   opacity: 1; } }
+    @keyframes washi-panel-out-right { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
+    @keyframes washi-panel-in-left   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0);   opacity: 1; } }
+    @keyframes washi-panel-out-left  { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
+  `;
+  document.head.appendChild(style);
+}
+var ANIM_DURATION = 240;
+function WashiCommentsSidebar({
+  open,
+  onClose,
+  position = "bottom-right",
+  accentColor = "#667eea"
+}) {
+  const { comments, updateComment, deleteComment } = useWashiContext();
+  const [visible, setVisible] = useState4(open);
+  const [phase, setPhase] = useState4(open ? "in" : "out");
+  useEffect4(() => {
+    if (open) {
+      setVisible(true);
+      const raf = requestAnimationFrame(() => setPhase("in"));
+      return () => cancelAnimationFrame(raf);
+    } else {
+      setPhase("out");
+      const t = setTimeout(() => setVisible(false), ANIM_DURATION);
+      return () => clearTimeout(t);
+    }
+  }, [open]);
+  if (!visible) return null;
+  const sortedComments = [...comments].sort((a, b) => a.createdAt - b.createdAt);
+  const side = position.endsWith("right") ? "right" : "left";
+  const animName = phase === "in" ? `washi-panel-in-${side}` : `washi-panel-out-${side}`;
+  const panelStyle = {
+    position: "fixed",
+    ...getPanelBounds(position),
+    width: 320,
+    zIndex: 9999,
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#f9fafb",
+    boxShadow: side === "right" ? "-4px 0 24px rgba(0,0,0,0.10)" : "4px 0 24px rgba(0,0,0,0.10)",
+    borderLeft: side === "right" ? "1px solid #e5e7eb" : "none",
+    borderRight: side === "left" ? "1px solid #e5e7eb" : "none",
+    animation: `${animName} ${ANIM_DURATION}ms cubic-bezier(0.4,0,0.2,1) forwards`,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsxs2("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "16px 20px",
+      borderBottom: "1px solid #e5e7eb",
+      backgroundColor: "#fff",
+      flexShrink: 0
+    }, children: [
+      /* @__PURE__ */ jsxs2("span", { style: { fontSize: "1rem", fontWeight: 600, color: "#1f2937" }, children: [
+        "Comments (",
+        comments.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: onClose,
+          title: "Close",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 30,
+            height: 30,
+            border: "none",
+            borderRadius: 6,
+            backgroundColor: "transparent",
+            cursor: "pointer",
+            color: "#9ca3af",
+            fontSize: 14,
+            padding: 0
+          },
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5("div", { style: { flex: 1, overflowY: "auto", padding: "12px" }, children: sortedComments.length === 0 ? /* @__PURE__ */ jsxs2("div", { style: {
+      textAlign: "center",
+      padding: "40px 20px",
+      color: "#9ca3af",
+      fontSize: "0.875rem"
+    }, children: [
+      /* @__PURE__ */ jsx5("p", { style: { marginBottom: 8 }, children: "No comments yet." }),
+      /* @__PURE__ */ jsx5("p", { children: "Use the annotate tool to add one." })
+    ] }) : sortedComments.map((comment, index) => {
+      const color = comment.color || accentColor;
+      const borderColor = comment.resolved ? "#10b981" : color;
+      const badgeBg = comment.resolved ? "#10b981" : color;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            backgroundColor: "#fff",
+            border: "1px solid #e5e7eb",
+            borderLeft: `3px solid ${borderColor}`,
+            borderRadius: 8,
+            padding: "12px",
+            marginBottom: 10,
+            opacity: comment.resolved ? 0.7 : 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx5("span", { style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 20,
+                  height: 20,
+                  borderRadius: "50%",
+                  backgroundColor: badgeBg,
+                  color: "#fff",
+                  fontSize: "0.7rem",
+                  fontWeight: 700,
+                  marginRight: 8,
+                  flexShrink: 0
+                }, children: comment.resolved ? "\u2713" : index + 1 }),
+                /* @__PURE__ */ jsxs2("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: [
+                  "(",
+                  comment.x.toFixed(1),
+                  "%, ",
+                  comment.y.toFixed(1),
+                  "%)"
+                ] })
+              ] }),
+              comment.resolved && /* @__PURE__ */ jsx5("span", { style: { fontSize: "0.75rem", color: "#059669", fontWeight: 500 }, children: "Resolved" })
+            ] }),
+            /* @__PURE__ */ jsx5("p", { style: { fontSize: "0.875rem", color: "#374151", marginBottom: 10, lineHeight: 1.5 }, children: comment.text }),
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  style: {
+                    padding: "4px 10px",
+                    fontSize: "0.75rem",
+                    border: "none",
+                    borderRadius: 4,
+                    cursor: "pointer",
+                    backgroundColor: "#e0e7ff",
+                    color: "#4f46e5"
+                  },
+                  onClick: () => updateComment(comment.id, { resolved: !comment.resolved }),
+                  children: comment.resolved ? "Unresolve" : "Resolve"
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  style: {
+                    padding: "4px 10px",
+                    fontSize: "0.75rem",
+                    border: "none",
+                    borderRadius: 4,
+                    cursor: "pointer",
+                    backgroundColor: "#fee2e2",
+                    color: "#dc2626"
+                  },
+                  onClick: () => deleteComment(comment.id),
+                  children: "Delete"
+                }
+              )
+            ] })
+          ]
+        },
+        comment.id
+      );
+    }) })
+  ] });
+}
+
+// src/WashiPinDialog.tsx
+import { useState as useState5, useEffect as useEffect5 } from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function WashiPinDialog({ accentColor = "#667eea", onComment }) {
+  const { onPinPlaced, addComment, setMode, iframeEl } = useWashiContext();
+  const [pending, setPending] = useState5(null);
+  const [text, setText] = useState5("");
+  useEffect5(() => {
+    return onPinPlaced((event) => {
+      const containerW = iframeEl?.clientWidth ?? window.innerWidth;
+      const containerH = iframeEl?.clientHeight ?? window.innerHeight;
+      setText("");
+      setPending({
+        x: event.x,
+        y: event.y,
+        pixelX: event.x / 100 * containerW,
+        pixelY: event.y / 100 * containerH,
+        containerW,
+        containerH
+      });
+    });
+  }, [onPinPlaced, iframeEl]);
+  if (!pending) return null;
+  const handleSubmit = async () => {
+    if (!text.trim()) return;
+    const comment = await addComment({ x: pending.x, y: pending.y, text: text.trim(), color: accentColor });
+    setPending(null);
+    setMode("view");
+    onComment?.(comment);
+  };
+  const handleCancel = () => setPending(null);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && e.metaKey) handleSubmit();
+    if (e.key === "Escape") handleCancel();
+  };
+  const POPOVER_WIDTH = 280;
+  const left = Math.min(
+    Math.max(pending.pixelX - POPOVER_WIDTH / 2, 8),
+    pending.containerW - POPOVER_WIDTH - 8
+  );
+  const showAbove = pending.pixelY > pending.containerH * 0.65;
+  const top = showAbove ? pending.pixelY - 172 : pending.pixelY + 16;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx6("div", { style: { position: "fixed", inset: 0, zIndex: 9999 }, onClick: handleCancel }),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left,
+          top,
+          width: POPOVER_WIDTH,
+          zIndex: 1e4,
+          backgroundColor: "#fff",
+          borderRadius: 12,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10)",
+          border: "1px solid rgba(0,0,0,0.06)",
+          padding: "14px 16px",
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+        },
+        children: [
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsx6("span", { style: { fontSize: "0.875rem", fontWeight: 600, color: "#1f2937" }, children: "Add comment" }),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                onClick: handleCancel,
+                style: {
+                  border: "none",
+                  background: "none",
+                  cursor: "pointer",
+                  color: "#9ca3af",
+                  fontSize: 14,
+                  padding: "2px 4px",
+                  borderRadius: 4
+                },
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6(
+            "textarea",
+            {
+              style: {
+                width: "100%",
+                height: 80,
+                padding: "8px 10px",
+                border: "1px solid #e5e7eb",
+                borderRadius: 8,
+                fontSize: "0.8125rem",
+                resize: "none",
+                boxSizing: "border-box",
+                lineHeight: 1.5,
+                fontFamily: "inherit",
+                color: "#374151",
+                outline: "none"
+              },
+              placeholder: "Leave a comment...",
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onKeyDown: handleKeyDown,
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 10 }, children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                style: {
+                  padding: "6px 12px",
+                  fontSize: "0.8125rem",
+                  border: "1px solid #e5e7eb",
+                  borderRadius: 6,
+                  backgroundColor: "#fff",
+                  cursor: "pointer",
+                  color: "#6b7280"
+                },
+                onClick: handleCancel,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                style: {
+                  padding: "6px 12px",
+                  fontSize: "0.8125rem",
+                  border: "none",
+                  borderRadius: 6,
+                  backgroundColor: accentColor,
+                  color: "#fff",
+                  cursor: text.trim() ? "pointer" : "not-allowed",
+                  opacity: text.trim() ? 1 : 0.5
+                },
+                onClick: handleSubmit,
+                disabled: !text.trim(),
+                children: "Add"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/WashiUI.tsx
+import { useState as useState6 } from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var SPINNER_ID = "__washi-ui-spinner__";
+if (typeof document !== "undefined" && !document.getElementById(SPINNER_ID)) {
+  const style = document.createElement("style");
+  style.id = SPINNER_ID;
+  style.textContent = `@keyframes __washi-spin { to { transform: rotate(360deg); } }`;
+  document.head.appendChild(style);
+}
+function WashiUI({
+  position = "bottom-right",
+  accentColor = "#667eea",
+  showLoader = true
+}) {
+  const { isReady } = useWashiContext();
+  const [sidebarOpen, setSidebarOpen] = useState6(false);
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    showLoader && !isReady && /* @__PURE__ */ jsx7(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 100,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(255,255,255,0.9)"
+        },
+        children: /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: "50%",
+              border: "3px solid #e5e7eb",
+              borderTopColor: accentColor,
+              animation: "__washi-spin 1s linear infinite"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      WashiToolBubble,
+      {
+        position,
+        accentColor,
+        sidebarOpen,
+        onSidebarToggle: () => setSidebarOpen((o) => !o)
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      WashiCommentsSidebar,
+      {
+        open: sidebarOpen,
+        onClose: () => setSidebarOpen(false),
+        position,
+        accentColor
+      }
+    ),
+    /* @__PURE__ */ jsx7(WashiPinDialog, { accentColor })
+  ] });
+}
+export {
+  CommentList,
+  WashiCommentsSidebar,
+  WashiFrame,
+  WashiPinDialog,
+  WashiProvider,
+  WashiToolBubble,
+  WashiUI,
+  useWashi,
+  useWashiContext
+};
+//# sourceMappingURL=index.mjs.map