@knotpad/app 0.1.0 → 0.1.2

package/components/layout/notification-bell.tsx

@@ -1,251 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-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

@@ -1,76 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

@@ -1,90 +0,0 @@
-"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

@@ -1,99 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-// 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 };
-}