@knotpad/app 0.1.5 → 0.1.7

package/components/layout/notification-bell.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Bell, AlertTriangle } from "lucide-react";
+import Link from "next/link";
+import { useToast } from "@/components/ui/toast";
+
+type Notification = {
+  id: string;
+  type: string;
+  title: string;
+  body: string | null;
+  read: boolean;
+  taskId: string | null;
+  noteId: string | null;
+  createdAt: string;
+};
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
+
+// Left-border accent colour by notification type
+function typeAccent(type: string): string {
+  if (type === "task_assigned")  return "border-l-2 border-l-blue-500";
+  if (type === "task_status")    return "border-l-2 border-l-violet-500";
+  if (type === "invite_accepted")return "border-l-2 border-l-emerald-500";
+  if (type === "task_takeover")  return "border-l-2 border-l-orange-500";
+  if (type === "force_release")  return "border-l-2 border-l-red-500";
+  // task_released, stale_release, and anything else
+  return "border-l-2 border-l-amber-500";
+}
+
+export function NotificationBell() {
+  const [open, setOpen]   = useState(false);
+  const [notifs, setNotifs] = useState<Notification[]>([]);
+  const [fetchError, setFetchError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const ref = useRef<HTMLDivElement>(null);
+  const toast = useToast();
+
+  const unread = notifs.filter((n) => !n.read).length;
+
+  async function fetchNotifs() {
+    try {
+      const res = await fetch("/api/notifications");
+      if (!res.ok) throw new Error(`${res.status}`);
+      setNotifs(await res.json());
+      setFetchError(false);
+    } catch {
+      setFetchError(true);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function markAllRead() {
+    // Optimistic — revert on failure
+    const snapshot = notifs;
+    setNotifs((prev) => prev.map((n) => ({ ...n, read: true })));
+    try {
+      const res = await fetch("/api/notifications", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: "all" }),
+      });
+      if (!res.ok) throw new Error();
+    } catch {
+      setNotifs(snapshot);
+      toast("Couldn't mark notifications read.", "error");
+    }
+  }
+
+  async function clearAll() {
+    const snapshot = notifs;
+    setNotifs([]);
+    try {
+      const res = await fetch("/api/notifications", { method: "DELETE" });
+      if (!res.ok) throw new Error();
+    } catch {
+      setNotifs(snapshot);
+      toast("Couldn't clear notifications.", "error");
+    }
+  }
+
+  async function markOneRead(id: string) {
+    setNotifs((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, read: true } : n))
+    );
+    // Fire-and-forget — the read state is non-critical; no rollback needed
+    fetch("/api/notifications", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ids: [id] }),
+    }).catch(() => {});
+  }
+
+  useEffect(() => {
+    fetchNotifs();
+    const interval = setInterval(fetchNotifs, 30_000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent | TouchEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, []);
+
+  // Esc closes the dropdown.
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => {
+          setOpen((o) => !o);
+          if (!open) fetchNotifs();
+        }}
+        title="Notifications"
+        aria-label={unread > 0 ? `Notifications, ${unread} unread` : "Notifications"}
+        aria-expanded={open}
+        className="relative flex h-10 w-10 items-center justify-center rounded-md text-zinc-500 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-300"
+      >
+        <Bell size={18} />
+        {unread > 0 && (
+          <span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-[9px] font-bold text-white leading-none">
+            {unread > 9 ? "9+" : unread}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-0 mb-2 w-72 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl overflow-hidden z-50">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
+            <span className="text-xs font-semibold text-zinc-400">Notifications</span>
+            {notifs.length > 0 && (
+              <div className="flex items-center gap-3">
+                {unread > 0 && (
+                  <button onClick={markAllRead} className="text-xs text-zinc-500 hover:text-zinc-300">
+                    Mark all read
+                  </button>
+                )}
+                <button onClick={clearAll} className="text-xs text-red-500/70 hover:text-red-400">
+                  Clear all
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Body */}
+          <div className="max-h-80 overflow-y-auto">
+            {fetchError && (
+              <div className="flex items-center gap-2 px-4 py-3 text-xs text-zinc-500">
+                <AlertTriangle size={12} className="shrink-0 text-amber-500" />
+                <span>Couldn't load notifications.</span>
+                <button
+                  onClick={fetchNotifs}
+                  className="ml-auto underline hover:text-zinc-300"
+                >
+                  Retry
+                </button>
+              </div>
+            )}
+
+            {!fetchError && loading && notifs.length === 0 && (
+              <div className="flex items-center justify-center px-4 py-6">
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-zinc-700 border-t-zinc-400" />
+              </div>
+            )}
+
+            {!fetchError && !loading && notifs.length === 0 && (
+              <p className="px-4 py-6 text-center text-xs text-zinc-600">No notifications</p>
+            )}
+
+            {!fetchError && notifs.map((n) => {
+              const href = n.taskId
+                ? `/tasks/${n.taskId}`
+                : n.noteId
+                ? `/notes/${n.noteId}`
+                : undefined;
+
+              const row = (
+                <div
+                  className={`px-3 py-2.5 border-b border-zinc-800 last:border-0 ${typeAccent(n.type)} ${
+                    !n.read ? "bg-zinc-800/40" : ""
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <p className={`text-xs font-medium leading-snug flex-1 min-w-0 ${n.read ? "text-zinc-400" : "text-zinc-200"}`}>
+                      {n.title}
+                    </p>
+                    <span className="shrink-0 text-[10px] text-zinc-600 mt-px">
+                      {timeAgo(n.createdAt)}
+                    </span>
+                  </div>
+                  {n.body && (
+                    <p className="text-xs text-zinc-600 mt-0.5 truncate">{n.body}</p>
+                  )}
+                </div>
+              );
+
+              return href ? (
+                <Link
+                  key={n.id}
+                  href={href}
+                  onClick={() => {
+                    setOpen(false);
+                    if (!n.read) markOneRead(n.id);
+                  }}
+                >
+                  {row}
+                </Link>
+              ) : (
+                <div
+                  key={n.id}
+                  onClick={() => { if (!n.read) markOneRead(n.id); }}
+                  className={!n.read ? "cursor-pointer" : undefined}
+                >
+                  {row}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/layout/paywall-screen.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { AppLogo } from "@/components/branding/app-logo";
+import { SwitchAccountButton } from "@/components/auth/switch-account-button";
+import DownloadCTA from "@/components/download-cta";
+
+/**
+ * Full-page takeover for IS_CLOUD=true users whose workspaces are all FREE.
+ * Knotpad Free is desktop-only (Electron + local PGlite) — web/PWA requires
+ * a Pro personal workspace or membership in a Pro team workspace.
+ */
+export function PaywallScreen() {
+  return (
+    <div className="flex min-h-full flex-col items-center justify-center gap-6 px-6 text-center">
+      <div className="space-y-3">
+        <div className="flex justify-center">
+          <AppLogo className="h-8 w-auto" />
+        </div>
+        <h1 className="text-xl font-semibold text-zinc-100">Cloud access requires Pro</h1>
+        <p className="max-w-sm text-sm text-zinc-400">
+          Knotpad Free runs on the desktop app, with your notes stored locally.
+          To use Knotpad on the web or as an installed PWA, upgrade your
+          personal workspace to Pro — or ask a team admin to invite you to their
+          workspace.
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Link
+          href="/upgrade"
+          className="rounded-md bg-zinc-100 px-5 py-2.5 text-sm font-medium text-zinc-900 hover:bg-zinc-200 transition-colors"
+        >
+          Upgrade to Pro — $5 / mo
+        </Link>
+        <SwitchAccountButton className="rounded-md border border-zinc-700 px-5 py-2.5 text-sm font-medium text-zinc-300 hover:bg-zinc-900 transition-colors" />
+      </div>
+      <div className="space-y-2">
+        <p className="text-xs text-zinc-600">Prefer to stay local?</p>
+        <DownloadCTA />
+      </div>
+    </div>
+  );
+}

package/components/layout/pro-banner.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { X, Cloud } from "lucide-react";
+
+type BillingStatus = {
+  isPro: boolean;
+  memberCount: number;
+  isOwner: boolean;
+};
+
+export function ProBanner({ initialIsPro }: { initialIsPro: boolean }) {
+  const [status, setStatus] = useState<BillingStatus | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+
+  // Background startup check — non-blocking, fires after render
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch("/api/billing/status", { signal: controller.signal })
+      .then((r) => r.json())
+      .then((data) => setStatus(data))
+      .catch(() => {}); // Silently fail if offline
+    return () => controller.abort();
+  }, []);
+
+  // Register / refresh device session
+  useEffect(() => {
+    let deviceId = localStorage.getItem("brief_device_id");
+    if (!deviceId) {
+      deviceId = crypto.randomUUID();
+      localStorage.setItem("brief_device_id", deviceId);
+    }
+    const deviceName = navigator.userAgent.includes("Mac")
+      ? "Mac"
+      : navigator.userAgent.includes("Windows")
+      ? "Windows PC"
+      : navigator.userAgent.includes("Linux")
+      ? "Linux"
+      : "Unknown Device";
+
+    fetch("/api/devices", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ deviceId, deviceName }),
+    }).catch(() => {});
+  }, []);
+
+  const isPro = status?.isPro ?? initialIsPro;
+  const wasProBefore = initialIsPro && !isPro;
+
+  // Lapse banner: was pro → no longer pro
+  if (wasProBefore && !dismissed) {
+    return (
+      <div className="flex items-center justify-between gap-3 border-b border-amber-800/30 bg-amber-950/20 px-6 py-2">
+        <div className="flex items-center gap-2 text-sm text-amber-300">
+          <Cloud size={14} className="shrink-0" />
+          <span>Your Pro subscription has ended. Your notes are safe. Sync paused.</span>
+          {status?.isOwner && (
+            <Link href="/settings/billing" className="ml-1 underline hover:text-amber-200">
+              Reactivate →
+            </Link>
+          )}
+        </div>
+        <button
+          onClick={() => setDismissed(true)}
+          className="shrink-0 text-amber-600 hover:text-amber-400"
+        >
+          <X size={14} />
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+}

package/components/layout/sw-register.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Wipe the offline caches (call on signout so a shared device doesn't serve a
+// previous user's cached pages/data). Exported for the auth/logout flow to call.
+export async function purgeBriefCaches() {
+  if (!("serviceWorker" in navigator)) return;
+  navigator.serviceWorker.controller?.postMessage({ type: "brief-purge" });
+  if ("caches" in window) {
+    const keys = await caches.keys();
+    await Promise.all(keys.map((k) => caches.delete(k)));
+  }
+}
+
+export function SwRegister() {
+  useEffect(() => {
+    if (!("serviceWorker" in navigator)) return;
+    // updateViaCache:"none" so the SW file itself is always revalidated and a new
+    // version (cache bump) activates promptly. scope:"/" per Next.js PWA guide.
+    navigator.serviceWorker
+      .register("/sw.js", { scope: "/", updateViaCache: "none" })
+      .catch(() => {});
+  }, []);
+
+  return null;
+}

package/components/layout/workspace-switcher.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Check, ChevronsUpDown, User, Users, Loader2 } from "lucide-react";
+import type { UserWorkspace } from "@/lib/workspace";
+
+type Props = {
+  workspaces: UserWorkspace[];
+  activeId: string | null;
+};
+
+export function WorkspaceSwitcher({ workspaces, activeId }: Props) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [switchingTo, setSwitchingTo] = useState<string | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const active = workspaces.find((w) => w.id === activeId) ?? workspaces[0];
+
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+
+  async function select(id: string) {
+    if (id === active?.id) { setOpen(false); return; }
+    setSwitchingTo(id);
+    try {
+      const res = await fetch("/api/workspace/active", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ workspaceId: id }),
+      });
+      if (res.ok) {
+        setOpen(false);
+        // The active note may live in the previous workspace — go to the notes
+        // home so the layout re-resolves against the new workspace.
+        router.push("/notes");
+        router.refresh();
+      }
+    } finally {
+      setSwitchingTo(null);
+    }
+  }
+
+  if (workspaces.length === 0 || !active) return null;
+
+  return (
+    <div ref={ref} className="relative border-b border-zinc-800">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-zinc-900 transition-colors"
+      >
+        {active.type === "TEAM" ? <Users size={14} className="shrink-0 text-zinc-400" /> : <User size={14} className="shrink-0 text-zinc-400" />}
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-zinc-200">{active.name}</p>
+          <p className="text-[10px] uppercase tracking-wider text-zinc-600">
+            {active.type === "TEAM" ? "Team" : "Personal"}
+          </p>
+        </div>
+        <ChevronsUpDown size={13} className="shrink-0 text-zinc-600" />
+      </button>
+
+      {open && (
+        <div className="absolute left-2 right-2 top-full z-50 mt-1 rounded-md border border-zinc-700 bg-zinc-900 py-1 shadow-xl">
+          {workspaces.map((w) => (
+            <button
+              key={w.id}
+              onClick={() => select(w.id)}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-zinc-300 hover:bg-zinc-800"
+            >
+              {w.type === "TEAM" ? <Users size={13} className="shrink-0 text-zinc-500" /> : <User size={13} className="shrink-0 text-zinc-500" />}
+              <span className="min-w-0 flex-1 truncate">{w.name}</span>
+              {switchingTo === w.id ? (
+                <Loader2 size={13} className="shrink-0 animate-spin text-zinc-500" />
+              ) : w.id === active.id ? (
+                <Check size={13} className="shrink-0 text-emerald-400" />
+              ) : null}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/notes/mobile-bottom-sheet.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+};
+
+/**
+ * Mobile-only bottom sheet that renders via portal to document.body.
+ * Pins above the virtual keyboard using `position: fixed; bottom: 0`.
+ * Supports backdrop tap and swipe-down to dismiss.
+ * Hidden on desktop (md+) via CSS.
+ */
+export function MobileBottomSheet({ open, onClose, title, children }: Props) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const touchStartY = useRef<number | null>(null);
+
+  // Swipe-down to dismiss
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    touchStartY.current = e.touches[0].clientY;
+  }, []);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (touchStartY.current === null) return;
+    const dy = e.touches[0].clientY - touchStartY.current;
+    if (dy > 50) {
+      touchStartY.current = null;
+      onClose();
+    }
+  }, [onClose]);
+
+  const handleTouchEnd = useCallback(() => {
+    touchStartY.current = null;
+  }, []);
+
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[60] md:hidden"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title ?? "Picker"}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+        aria-hidden
+      />
+
+      {/* Sheet */}
+      <div
+        ref={sheetRef}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        className="absolute bottom-0 left-0 right-0 flex flex-col rounded-t-2xl border-t border-zinc-700 bg-zinc-900 shadow-2xl"
+        style={{
+          maxHeight: "60vh",
+          paddingBottom: "env(safe-area-inset-bottom, 0px)",
+        }}
+      >
+        {/* Drag handle */}
+        <div className="flex justify-center pt-2 pb-1">
+          <div className="h-1 w-10 rounded-full bg-zinc-700" />
+        </div>
+
+        {/* Title */}
+        {title && (
+          <div className="border-b border-zinc-800 px-4 py-2">
+            <span className="text-xs font-medium text-zinc-500">{title}</span>
+          </div>
+        )}
+
+        {/* Content — scrollable */}
+        <div className="overflow-y-auto px-2 py-1">
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/components/notes/note-editor-context-menu.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React from "react";
+
+/** Right-click context menu for text formatting and actions. */
+export function EditorContextMenu({
+  pos,
+  menuRef,
+  onBold,
+  onItalic,
+  onStrike,
+  onMakeTask,
+  onCopyLink,
+}: {
+  pos: { top: number; left: number };
+  menuRef: React.RefObject<HTMLDivElement | null>;
+  onBold: () => void;
+  onItalic: () => void;
+  onStrike: () => void;
+  onMakeTask: () => void;
+  onCopyLink: () => void;
+}) {
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 w-48 rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-xl"
+      style={{ top: pos.top, left: pos.left }}
+    >
+      <button onMouseDown={(e) => { e.preventDefault(); onBold(); }} className="flex w-full items-center gap-2.5 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800">
+        <span className="w-4 text-center font-bold text-zinc-500 text-xs">B</span>Bold
+      </button>
+      <button onMouseDown={(e) => { e.preventDefault(); onItalic(); }} className="flex w-full items-center gap-2.5 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800">
+        <span className="w-4 text-center italic text-zinc-500 text-xs">I</span>Italic
+      </button>
+      <button onMouseDown={(e) => { e.preventDefault(); onStrike(); }} className="flex w-full items-center gap-2.5 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800">
+        <span className="w-4 text-center line-through text-zinc-500 text-xs">S</span>Strike
+      </button>
+      <div className="my-1 border-t border-zinc-800" />
+      <button onMouseDown={(e) => { e.preventDefault(); onMakeTask(); }} className="flex w-full items-center gap-2.5 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800">
+        <span className="w-4 text-center text-zinc-500 text-xs">☐</span>Make task
+      </button>
+      <button onMouseDown={(e) => { e.preventDefault(); onCopyLink(); }} className="flex w-full items-center gap-2.5 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800">
+        <span className="w-4 text-center text-zinc-500 text-xs">🔗</span>Copy link
+      </button>
+    </div>
+  );
+}

package/components/notes/note-editor-dom.ts

@@ -0,0 +1,33 @@
+// Returns pixel coordinates of the character at `pos` within a textarea,
+// relative to the textarea's top-left (scrollTop already subtracted).
+export function getCaretCoords(
+  ta: HTMLTextAreaElement,
+  pos: number
+): { top: number; left: number } {
+  const mirror = document.createElement("div");
+  const style = window.getComputedStyle(ta);
+  for (const prop of [
+    "fontFamily", "fontSize", "fontWeight", "letterSpacing",
+    "lineHeight", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+    "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
+  ] as const) {
+    (mirror.style as unknown as Record<string, string>)[prop] = style[prop];
+  }
+  mirror.style.position = "absolute";
+  mirror.style.visibility = "hidden";
+  mirror.style.whiteSpace = "pre-wrap";
+  mirror.style.wordBreak = "break-word";
+  mirror.style.width = ta.offsetWidth + "px";
+  mirror.style.top = "0";
+  mirror.style.left = "0";
+  mirror.textContent = ta.value.substring(0, pos);
+  const span = document.createElement("span");
+  span.textContent = "\u200B";
+  mirror.appendChild(span);
+  ta.parentElement!.appendChild(mirror);
+  const lineH = parseInt(style.lineHeight) || 24;
+  const top = span.offsetTop - ta.scrollTop + lineH;
+  const left = Math.min(span.offsetLeft, ta.offsetWidth - 256);
+  mirror.remove();
+  return { top, left };
+}