@alreadyso/annotate 0.1.0

package/README.md

@@ -0,0 +1,69 @@
+# @alreadyso/annotate
+
+A lightweight annotation overlay for React apps that creates Already sessions and posts notes + timeline events.
+
+## Usage
+
+```tsx
+import { AlreadyAnnotate } from "@alreadyso/annotate";
+
+export function App() {
+  return (
+    <>
+      <YourApp />
+      <AlreadyAnnotate
+        teamId="YOUR_TEAM_ID"
+        teamSlug="your-team-slug"
+        webAppUrl="http://localhost:3000"
+        authToken="SUPABASE_ACCESS_TOKEN"
+        openOnSave
+      />
+    </>
+  );
+}
+```
+
+## Overlay Helper
+
+If you want the component to fetch an auth token on mount, use `AlreadyAnnotateOverlay`:
+
+```tsx
+import { AlreadyAnnotateOverlay } from "@alreadyso/annotate";
+
+async function getAuthToken() {
+  // Replace with your auth/session lookup.
+  return localStorage.getItem("access_token");
+}
+
+export function App() {
+  return (
+    <>
+      <YourApp />
+      <AlreadyAnnotateOverlay
+        teamId="YOUR_TEAM_ID"
+        teamSlug="your-team-slug"
+        getAuthToken={getAuthToken}
+      />
+    </>
+  );
+}
+```
+
+## Props
+
+- `teamId` (required): Team UUID for the session.
+- `teamSlug` (optional): Used to open the session in the web app after save.
+- `webAppUrl` (optional): Defaults to `http://localhost:3000`.
+- `authToken` (optional): Supabase access token for user auth.
+- `apiKey` (optional): Agent API key (alternative to `authToken`).
+- `useCookies` (optional): Send cookies with requests (for same-origin use).
+- `defaultStatus` (optional): Session status to set after saving. Defaults to `todo`.
+- `openOnSave` (optional): Open the session after save if `teamSlug` is set. Defaults to `true`.
+- `blockInteractions` (optional): Prevent underlying clicks while annotating. Defaults to `true`.
+- `accentColor` (optional): Accent color for the overlay UI.
+- `sessionTitle` (optional): Override the session title.
+
+## Notes
+
+- This component writes notes to `session_notes` and annotation events to `session_timeline`.
+- The `Save to Already` action uses `/api/sessions/start`, `/api/sessions/:id/data`, and `/api/sessions/:id`.

package/dist/AlreadyAnnotate.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export type SessionStatus = "in_session" | "uploading" | "todo" | "in_progress" | "needs_feedback" | "done" | "pending" | "completed" | "cancelled";
+export type Annotation = {
+    id: string;
+    selector: string;
+    label: string;
+    text?: string;
+    selectedText?: string;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    comment: string;
+    url: string;
+    createdAt: string;
+};
+export type AlreadyAnnotateProps = {
+    teamId: string;
+    teamSlug?: string;
+    webAppUrl?: string;
+    authToken?: string;
+    apiKey?: string;
+    useCookies?: boolean;
+    defaultStatus?: SessionStatus;
+    openOnSave?: boolean;
+    blockInteractions?: boolean;
+    accentColor?: string;
+    sessionTitle?: string;
+    onSaveComplete?: (sessionId: string) => void;
+};
+export declare function AlreadyAnnotate({ teamId, teamSlug, webAppUrl, authToken, apiKey, useCookies, defaultStatus, openOnSave, blockInteractions, accentColor, sessionTitle, onSaveComplete, }: AlreadyAnnotateProps): React.ReactPortal | null;

package/dist/AlreadyAnnotate.js

@@ -0,0 +1,468 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const DEFAULT_WEB_URL = "http://localhost:3000";
+const DEFAULT_ACCENT = "#2563eb";
+function nowIso() {
+    return new Date().toISOString();
+}
+function safeText(input, max = 140) {
+    if (!input)
+        return "";
+    const cleaned = input.replace(/\s+/g, " ").trim();
+    if (!cleaned)
+        return "";
+    return cleaned.length > max ? cleaned.slice(0, max - 1) + "…" : cleaned;
+}
+function getSelectedTextForElement(element) {
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed)
+        return undefined;
+    const text = selection.toString().trim();
+    if (!text)
+        return undefined;
+    if (selection.rangeCount === 0)
+        return text;
+    const range = selection.getRangeAt(0);
+    const container = range.commonAncestorContainer;
+    if (container instanceof Node && element.contains(container)) {
+        return text;
+    }
+    return text;
+}
+function cssEscape(value) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+    }
+    return value.replace(/[^a-zA-Z0-9_-]/g, "\\$");
+}
+function buildSelector(element) {
+    const testId = element.getAttribute("data-testid") || element.getAttribute("data-test") || element.getAttribute("data-qa");
+    if (testId)
+        return `[data-testid=\"${cssEscape(testId)}\"]`;
+    if (element.id)
+        return `#${cssEscape(element.id)}`;
+    const parts = [];
+    let current = element;
+    while (current && current !== document.body) {
+        const tag = current.tagName.toLowerCase();
+        let part = tag;
+        const classList = Array.from(current.classList).filter(Boolean).slice(0, 2);
+        if (classList.length > 0) {
+            part += "." + classList.map((cls) => cssEscape(cls)).join(".");
+        }
+        const siblings = Array.from(current.parentElement?.children || []).filter((node) => node.tagName.toLowerCase() === tag);
+        if (siblings.length > 1) {
+            const index = siblings.indexOf(current) + 1;
+            part += `:nth-of-type(${index})`;
+        }
+        parts.unshift(part);
+        if (current.id)
+            break;
+        current = current.parentElement;
+    }
+    return parts.join(" > ");
+}
+function buildLabel(element) {
+    const text = safeText(element.textContent, 60);
+    if (text)
+        return text;
+    if (element.id)
+        return `#${element.id}`;
+    const classes = Array.from(element.classList).slice(0, 2).join(".");
+    if (classes)
+        return `${element.tagName.toLowerCase()}.${classes}`;
+    return element.tagName.toLowerCase();
+}
+function buildNotesDocument(annotations, title, url) {
+    const content = [];
+    const header = `Annotations: ${title}`;
+    content.push({ type: "paragraph", content: [{ type: "text", text: header }] });
+    content.push({ type: "paragraph", content: [{ type: "text", text: `URL: ${url}` }] });
+    content.push({ type: "paragraph", content: [{ type: "text", text: `Captured: ${nowIso()}` }] });
+    annotations.forEach((annotation, index) => {
+        const number = index + 1;
+        const comment = annotation.comment || "(no comment)";
+        content.push({
+            type: "paragraph",
+            content: [{ type: "text", text: `${number}. ${comment}` }],
+        });
+        content.push({
+            type: "paragraph",
+            content: [{ type: "text", text: `Selector: ${annotation.selector}` }],
+        });
+        content.push({
+            type: "paragraph",
+            content: [{ type: "text", text: `Element: ${annotation.label}` }],
+        });
+        if (annotation.selectedText) {
+            content.push({
+                type: "paragraph",
+                content: [{ type: "text", text: `Selected: \"${annotation.selectedText}\"` }],
+            });
+        }
+        const rect = annotation.rect;
+        content.push({
+            type: "paragraph",
+            content: [{ type: "text", text: `Bounds: x=${Math.round(rect.x)}, y=${Math.round(rect.y)}, w=${Math.round(rect.width)}, h=${Math.round(rect.height)}` }],
+        });
+    });
+    return { type: "doc", content };
+}
+function buildTimeline(annotations) {
+    return annotations.map((annotation, index) => ({
+        t: index,
+        type: "annotation",
+        data: {
+            filename: `annotation-${index + 1}`,
+            selector: annotation.selector,
+            label: annotation.label,
+            comment: annotation.comment,
+            url: annotation.url,
+            rect: annotation.rect,
+            selectedText: annotation.selectedText || null,
+        },
+    }));
+}
+function isEventInsideOverlay(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return Boolean(target.closest("[data-already-annotate-ui]"));
+}
+function isIgnoredTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return true;
+    if (target.closest("[data-already-annotate-ignore]"))
+        return true;
+    return false;
+}
+export function AlreadyAnnotate({ teamId, teamSlug, webAppUrl = DEFAULT_WEB_URL, authToken, apiKey, useCookies = false, defaultStatus = "todo", openOnSave = true, blockInteractions = true, accentColor = DEFAULT_ACCENT, sessionTitle, onSaveComplete, }) {
+    const [portalRoot, setPortalRoot] = useState(null);
+    const [isActive, setIsActive] = useState(false);
+    const [hoverRect, setHoverRect] = useState(null);
+    const hoveredElementRef = useRef(null);
+    const animationFrameRef = useRef(null);
+    const previousCursorRef = useRef("");
+    const [annotations, setAnnotations] = useState([]);
+    const [draft, setDraft] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [lastSessionId, setLastSessionId] = useState(null);
+    const pageTitle = useMemo(() => {
+        if (typeof document === "undefined")
+            return "Annotations";
+        return sessionTitle || document.title || window.location.pathname;
+    }, [sessionTitle]);
+    const pageUrl = useMemo(() => {
+        if (typeof window === "undefined")
+            return "";
+        return window.location.href;
+    }, []);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const root = document.createElement("div");
+        root.setAttribute("data-already-annotate-root", "true");
+        document.body.appendChild(root);
+        setPortalRoot(root);
+        return () => {
+            document.body.removeChild(root);
+        };
+    }, []);
+    const resetHover = useCallback(() => {
+        hoveredElementRef.current = null;
+        setHoverRect(null);
+    }, []);
+    const updateHoverRect = useCallback((element) => {
+        if (!element) {
+            resetHover();
+            return;
+        }
+        const rect = element.getBoundingClientRect();
+        setHoverRect(rect);
+    }, [resetHover]);
+    const handleMouseMove = useCallback((event) => {
+        if (!isActive)
+            return;
+        if (isEventInsideOverlay(event.target) || isIgnoredTarget(event.target)) {
+            resetHover();
+            return;
+        }
+        const target = event.target;
+        if (!target || target === document.body || target === document.documentElement) {
+            resetHover();
+            return;
+        }
+        hoveredElementRef.current = target;
+        if (animationFrameRef.current)
+            return;
+        animationFrameRef.current = window.requestAnimationFrame(() => {
+            animationFrameRef.current = null;
+            updateHoverRect(target);
+        });
+    }, [isActive, resetHover, updateHoverRect]);
+    const handleClick = useCallback((event) => {
+        if (!isActive)
+            return;
+        if (event.button !== 0)
+            return;
+        if (isEventInsideOverlay(event.target) || isIgnoredTarget(event.target))
+            return;
+        if (blockInteractions) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const target = event.target;
+        if (!target || target === document.body || target === document.documentElement)
+            return;
+        const rect = target.getBoundingClientRect();
+        const selector = buildSelector(target);
+        const label = buildLabel(target);
+        const text = safeText(target.textContent, 120);
+        const selectedText = getSelectedTextForElement(target);
+        setDraft({
+            selector,
+            label,
+            text,
+            selectedText,
+            rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+            comment: "",
+            url: pageUrl,
+        });
+    }, [blockInteractions, isActive, pageUrl]);
+    const handleKeyDown = useCallback((event) => {
+        if (!isActive)
+            return;
+        if (event.key !== "Escape")
+            return;
+        if (draft) {
+            setDraft(null);
+            return;
+        }
+        setIsActive(false);
+    }, [draft, isActive]);
+    useEffect(() => {
+        if (!isActive) {
+            resetHover();
+            return;
+        }
+        previousCursorRef.current = document.body.style.cursor;
+        document.body.style.cursor = "crosshair";
+        window.addEventListener("mousemove", handleMouseMove, true);
+        window.addEventListener("click", handleClick, true);
+        window.addEventListener("keydown", handleKeyDown, true);
+        const handleScroll = () => {
+            if (!hoveredElementRef.current)
+                return;
+            updateHoverRect(hoveredElementRef.current);
+        };
+        window.addEventListener("scroll", handleScroll, true);
+        window.addEventListener("resize", handleScroll, true);
+        return () => {
+            document.body.style.cursor = previousCursorRef.current;
+            window.removeEventListener("mousemove", handleMouseMove, true);
+            window.removeEventListener("click", handleClick, true);
+            window.removeEventListener("keydown", handleKeyDown, true);
+            window.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("resize", handleScroll, true);
+        };
+    }, [handleClick, handleKeyDown, handleMouseMove, isActive, resetHover, updateHoverRect]);
+    const handleSaveDraft = useCallback(() => {
+        if (!draft)
+            return;
+        const id = typeof crypto !== "undefined" && "randomUUID" in crypto
+            ? crypto.randomUUID()
+            : String(Date.now());
+        const newAnnotation = {
+            ...draft,
+            id,
+            createdAt: nowIso(),
+        };
+        setAnnotations((prev) => [newAnnotation, ...prev]);
+        setDraft(null);
+    }, [draft]);
+    const handleDeleteAnnotation = useCallback((id) => {
+        setAnnotations((prev) => prev.filter((item) => item.id !== id));
+    }, []);
+    const buildHeaders = useCallback(() => {
+        const headers = {
+            "Content-Type": "application/json",
+            "X-Team-Id": teamId,
+        };
+        if (apiKey) {
+            headers["X-API-Key"] = apiKey;
+        }
+        else if (authToken) {
+            headers["Authorization"] = `Bearer ${authToken}`;
+        }
+        return headers;
+    }, [apiKey, authToken, teamId]);
+    const createSession = useCallback(async () => {
+        const response = await fetch(`${webAppUrl}/api/sessions/start`, {
+            method: "POST",
+            headers: buildHeaders(),
+            body: JSON.stringify({ title: pageTitle, source: "web" }),
+            credentials: useCookies ? "include" : "omit",
+        });
+        const payload = await response.json();
+        if (!response.ok) {
+            throw new Error(payload.error || payload.message || `Failed to create session (${response.status})`);
+        }
+        if (!payload.session_id) {
+            throw new Error("Session creation succeeded but no session_id returned");
+        }
+        return payload.session_id;
+    }, [buildHeaders, pageTitle, useCookies, webAppUrl]);
+    const updateSessionData = useCallback(async (sessionId) => {
+        const notes = buildNotesDocument(annotations, pageTitle, pageUrl);
+        const timeline = buildTimeline(annotations);
+        const response = await fetch(`${webAppUrl}/api/sessions/${sessionId}/data`, {
+            method: "PATCH",
+            headers: buildHeaders(),
+            body: JSON.stringify({
+                title: pageTitle,
+                duration_seconds: 0,
+                notes,
+                timeline,
+            }),
+            credentials: useCookies ? "include" : "omit",
+        });
+        const payload = await response.json();
+        if (!response.ok) {
+            throw new Error(payload.error || payload.message || `Failed to save session data (${response.status})`);
+        }
+    }, [annotations, buildHeaders, pageTitle, pageUrl, useCookies, webAppUrl]);
+    const updateSessionStatus = useCallback(async (sessionId) => {
+        if (!defaultStatus || defaultStatus === "in_session" || defaultStatus === "uploading") {
+            return;
+        }
+        const response = await fetch(`${webAppUrl}/api/sessions/${sessionId}`, {
+            method: "PATCH",
+            headers: buildHeaders(),
+            body: JSON.stringify({ status: defaultStatus }),
+            credentials: useCookies ? "include" : "omit",
+        });
+        const payload = await response.json();
+        if (!response.ok) {
+            throw new Error(payload.error || payload.message || `Failed to update session status (${response.status})`);
+        }
+    }, [buildHeaders, defaultStatus, useCookies, webAppUrl]);
+    const handleSaveToAlready = useCallback(async () => {
+        if (annotations.length === 0) {
+            setError("Add at least one annotation before saving.");
+            return;
+        }
+        setError(null);
+        setSaving(true);
+        try {
+            const sessionId = await createSession();
+            await updateSessionData(sessionId);
+            await updateSessionStatus(sessionId);
+            setLastSessionId(sessionId);
+            onSaveComplete?.(sessionId);
+            if (openOnSave && teamSlug) {
+                const url = `${webAppUrl}/t/${teamSlug}/sessions/${sessionId}`;
+                window.open(url, "_blank", "noopener,noreferrer");
+            }
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Failed to save session";
+            setError(message);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [annotations.length, createSession, onSaveComplete, openOnSave, teamSlug, updateSessionData, updateSessionStatus, webAppUrl]);
+    const panel = (_jsxs("div", { "data-already-annotate-ui": true, style: {
+            position: "fixed",
+            right: 16,
+            bottom: 16,
+            width: 320,
+            background: "#0f172a",
+            color: "#f8fafc",
+            borderRadius: 12,
+            boxShadow: "0 12px 30px rgba(15, 23, 42, 0.35)",
+            fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif",
+            zIndex: 2147483647,
+        }, children: [_jsxs("div", { style: { padding: "12px 12px 8px" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600 }, children: "Already Annotate" }), _jsx("button", { type: "button", onClick: () => setIsActive((prev) => !prev), style: {
+                                    background: isActive ? accentColor : "#1e293b",
+                                    color: "#fff",
+                                    border: "none",
+                                    borderRadius: 999,
+                                    padding: "6px 12px",
+                                    fontSize: 12,
+                                    cursor: "pointer",
+                                }, children: isActive ? "Stop" : "Annotate" })] }), _jsx("div", { style: { marginTop: 6, fontSize: 12, color: "#94a3b8" }, children: isActive ? "Click elements to add notes." : "Toggle to start capturing." })] }), draft && (_jsxs("div", { style: { borderTop: "1px solid #1e293b", padding: 12 }, children: [_jsx("div", { style: { fontSize: 12, color: "#cbd5f5", marginBottom: 6 }, children: "New annotation" }), _jsx("div", { style: { fontSize: 12, color: "#e2e8f0", marginBottom: 6 }, children: draft.label }), _jsx("textarea", { rows: 3, value: draft.comment, onChange: (event) => setDraft({ ...draft, comment: event.target.value }), placeholder: "Describe the issue or request...", style: {
+                            width: "100%",
+                            borderRadius: 8,
+                            border: "1px solid #1e293b",
+                            background: "#0b1220",
+                            color: "#f8fafc",
+                            padding: 8,
+                            fontSize: 12,
+                            resize: "vertical",
+                        } }), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: [_jsx("button", { type: "button", onClick: handleSaveDraft, style: {
+                                    flex: 1,
+                                    background: accentColor,
+                                    border: "none",
+                                    borderRadius: 8,
+                                    padding: "6px 10px",
+                                    color: "#fff",
+                                    fontSize: 12,
+                                    cursor: "pointer",
+                                }, children: "Add" }), _jsx("button", { type: "button", onClick: () => setDraft(null), style: {
+                                    flex: 1,
+                                    background: "#1e293b",
+                                    border: "none",
+                                    borderRadius: 8,
+                                    padding: "6px 10px",
+                                    color: "#e2e8f0",
+                                    fontSize: 12,
+                                    cursor: "pointer",
+                                }, children: "Cancel" })] })] })), _jsxs("div", { style: { borderTop: "1px solid #1e293b", padding: 12 }, children: [_jsxs("div", { style: { fontSize: 12, color: "#94a3b8", marginBottom: 6 }, children: [annotations.length, " annotations"] }), _jsxs("div", { style: { maxHeight: 160, overflowY: "auto", display: "grid", gap: 8 }, children: [annotations.map((annotation) => (_jsxs("div", { style: {
+                                    borderRadius: 8,
+                                    background: "#0b1220",
+                                    padding: 8,
+                                    border: "1px solid #1e293b",
+                                }, children: [_jsx("div", { style: { fontSize: 12, color: "#e2e8f0" }, children: annotation.comment || "(no comment)" }), _jsx("div", { style: { fontSize: 11, color: "#94a3b8", marginTop: 4 }, children: annotation.label }), _jsx("button", { type: "button", onClick: () => handleDeleteAnnotation(annotation.id), style: {
+                                            marginTop: 6,
+                                            background: "transparent",
+                                            border: "none",
+                                            color: "#f87171",
+                                            fontSize: 11,
+                                            cursor: "pointer",
+                                            padding: 0,
+                                        }, children: "Remove" })] }, annotation.id))), annotations.length === 0 && (_jsx("div", { style: { fontSize: 12, color: "#64748b" }, children: "No annotations yet." }))] }), error && (_jsx("div", { style: { marginTop: 8, fontSize: 12, color: "#fca5a5" }, children: error })), lastSessionId && (_jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "#94a3b8" }, children: ["Last session: ", lastSessionId] })), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 10 }, children: [_jsx("button", { type: "button", onClick: handleSaveToAlready, disabled: saving, style: {
+                                    flex: 1,
+                                    background: accentColor,
+                                    border: "none",
+                                    borderRadius: 8,
+                                    padding: "8px 10px",
+                                    color: "#fff",
+                                    fontSize: 12,
+                                    cursor: saving ? "not-allowed" : "pointer",
+                                    opacity: saving ? 0.7 : 1,
+                                }, children: saving ? "Saving..." : "Save to Already" }), _jsx("button", { type: "button", onClick: () => setAnnotations([]), style: {
+                                    background: "#1e293b",
+                                    border: "none",
+                                    borderRadius: 8,
+                                    padding: "8px 10px",
+                                    color: "#e2e8f0",
+                                    fontSize: 12,
+                                    cursor: "pointer",
+                                }, children: "Clear" })] })] })] }));
+    const highlight = hoverRect && isActive && (_jsx("div", { "data-already-annotate-ui": true, style: {
+            position: "fixed",
+            left: hoverRect.x,
+            top: hoverRect.y,
+            width: hoverRect.width,
+            height: hoverRect.height,
+            border: `2px solid ${accentColor}`,
+            background: `${accentColor}22`,
+            pointerEvents: "none",
+            zIndex: 2147483646,
+        } }));
+    if (!portalRoot)
+        return null;
+    return createPortal(_jsxs(_Fragment, { children: [highlight, panel] }), portalRoot);
+}

package/dist/AlreadyAnnotateOverlay.d.ts

@@ -0,0 +1,7 @@
+import { type AlreadyAnnotateProps } from "./AlreadyAnnotate";
+export type AlreadyAnnotateOverlayProps = Omit<AlreadyAnnotateProps, "authToken"> & {
+    authToken?: string | null;
+    getAuthToken?: () => Promise<string | null>;
+    enabled?: boolean;
+};
+export declare function AlreadyAnnotateOverlay({ authToken, getAuthToken, enabled, webAppUrl, apiKey, ...rest }: AlreadyAnnotateOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/AlreadyAnnotateOverlay.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { AlreadyAnnotate } from "./AlreadyAnnotate";
+export function AlreadyAnnotateOverlay({ authToken, getAuthToken, enabled = true, webAppUrl, apiKey, ...rest }) {
+    const [resolvedToken, setResolvedToken] = useState(authToken ?? null);
+    const resolvedWebAppUrl = useMemo(() => {
+        if (webAppUrl)
+            return webAppUrl;
+        if (typeof window === "undefined")
+            return undefined;
+        return window.location.origin;
+    }, [webAppUrl]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        if (getAuthToken && (authToken === undefined || authToken === null)) {
+            let active = true;
+            getAuthToken()
+                .then((token) => {
+                if (active)
+                    setResolvedToken(token ?? null);
+            })
+                .catch(() => {
+                if (active)
+                    setResolvedToken(null);
+            });
+            return () => {
+                active = false;
+            };
+        }
+        setResolvedToken(authToken ?? null);
+    }, [authToken, enabled, getAuthToken]);
+    if (!enabled)
+        return null;
+    if (!apiKey && !resolvedToken)
+        return null;
+    return (_jsx(AlreadyAnnotate, { ...rest, apiKey: apiKey, authToken: resolvedToken ?? undefined, webAppUrl: resolvedWebAppUrl }));
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { AlreadyAnnotate } from "./AlreadyAnnotate";
+export { AlreadyAnnotateOverlay } from "./AlreadyAnnotateOverlay";
+export type { AlreadyAnnotateProps, Annotation, SessionStatus } from "./AlreadyAnnotate";
+export type { AlreadyAnnotateOverlayProps } from "./AlreadyAnnotateOverlay";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { AlreadyAnnotate } from "./AlreadyAnnotate";
+export { AlreadyAnnotateOverlay } from "./AlreadyAnnotateOverlay";

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@alreadyso/annotate",
+  "version": "0.1.0",
+  "description": "Annotation overlay for creating Already sessions from React apps.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.4.0"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch"
+  }
+}