@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/TimePicker.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import React, { useId, useRef, useState } from "react";
+import { ClearKey } from "./DatePicker";
+import { Portal } from "./Floating";
+import { FieldLabel, FieldMessage } from "./FieldMessage";
+import { useFloatingPanel } from "./useFloatingPanel";
+
+interface TimePickerProps {
+  /** 24-hour "HH:mm", like "14:30" */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (time: string | null) => void;
+  /** Minutes between choices in the minute column */
+  step?: number;
+  /** Show 1–12 with am / pm instead of 0–23 */
+  hour12?: boolean;
+  /** Earliest and latest times, as "HH:mm" */
+  min?: string;
+  max?: string;
+  label?: string;
+  hint?: string;
+  error?: string;
+  placeholder?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  name?: string;
+  className?: string;
+}
+
+const pad = (n: number) => String(n).padStart(2, "0");
+const toMinutes = (t?: string | null) => {
+  if (!t) return null;
+  const m = /^(\d{1,2}):(\d{2})$/.exec(t);
+  return m ? Number(m[1]) * 60 + Number(m[2]) : null;
+};
+const fromMinutes = (m: number) => `${pad(Math.floor(m / 60))}:${pad(m % 60)}`;
+
+export function formatTime(t: string, hour12: boolean) {
+  const m = toMinutes(t);
+  if (m === null) return t;
+  const h = Math.floor(m / 60);
+  return hour12 ? `${h % 12 || 12}:${pad(m % 60)} ${h < 12 ? "am" : "pm"}` : fromMinutes(m);
+}
+
+type Column = "hour" | "minute" | "period";
+
+/* A field that opens a panel of columns: hours, minutes and, for a
+   12-hour clock, am / pm. The chosen cell in each is a raised key in the
+   inverse material. Arrows move within a column and between columns;
+   Enter or picking a minute closes it.                              */
+export function TimePicker({
+  value,
+  defaultValue = null,
+  onChange,
+  step = 15,
+  hour12 = false,
+  min,
+  max,
+  label,
+  hint,
+  error,
+  placeholder = "pick a time",
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  name,
+  className = "",
+}: TimePickerProps) {
+  const uid = useId();
+  const ref = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [internal, setInternal] = useState<string | null>(defaultValue);
+  const current = value !== undefined ? value : internal;
+  const total = toMinutes(current);
+  const { open, mounted, toggle, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    onEscape: () => buttonRef.current?.focus(),
+  });
+  const messageId = error || hint ? `${uid}-message` : undefined;
+
+  const lo = toMinutes(min) ?? 0;
+  const hi = toMinutes(max) ?? 24 * 60 - 1;
+  const hour = total === null ? null : Math.floor(total / 60);
+  const minute = total === null ? null : total % 60;
+
+  const set = (t: string | null) => {
+    setInternal(t);
+    onChange?.(t);
+  };
+
+  /* Picks a time, nudging the minutes into range when the hour changes */
+  const choose = (h: number, m: number) => {
+    let t = h * 60 + m;
+    if (t < lo) t = lo;
+    if (t > hi) t = hi;
+    set(fromMinutes(t));
+  };
+
+  const hours = hour12 ? Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i)) : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step).filter((m) => m < 60);
+  const isPm = hour !== null && hour >= 12;
+  const to24 = (h12: number, pm: boolean) => (h12 % 12) + (pm ? 12 : 0);
+
+  const hourOff = (h24: number) => h24 * 60 + 59 < lo || h24 * 60 > hi;
+  const minuteOff = (m: number) => hour !== null && (hour * 60 + m < lo || hour * 60 + m > hi);
+
+  type Cell = { key: string; label: string; selected: boolean; off: boolean; pick: () => void };
+  const columns: { id: Column; label: string; cells: Cell[] }[] = [
+    {
+      id: "hour",
+      label: "hour",
+      cells: hours.map((h) => {
+        const h24 = hour12 ? to24(h, isPm) : h;
+        return {
+          key: `h${h}`,
+          label: hour12 ? String(h) : pad(h),
+          selected: hour === h24,
+          off: hourOff(h24),
+          pick: () => choose(h24, minute ?? 0),
+        };
+      }),
+    },
+    {
+      id: "minute",
+      label: "minute",
+      cells: minutes.map((m) => ({
+        key: `m${m}`,
+        label: pad(m),
+        selected: minute === m,
+        off: minuteOff(m),
+        pick: () => {
+          choose(hour ?? Math.floor(lo / 60), m);
+          close();
+          buttonRef.current?.focus();
+        },
+      })),
+    },
+  ];
+  if (hour12) {
+    columns.push({
+      id: "period",
+      label: "am or pm",
+      cells: (["am", "pm"] as const).map((p) => {
+        const pm = p === "pm";
+        const h24 = to24(hour === null ? 12 : hour % 12 || 12, pm);
+        return {
+          key: p,
+          label: p,
+          selected: hour !== null && isPm === pm,
+          off: pm ? hi < 12 * 60 : lo >= 12 * 60,
+          pick: () => choose(h24, minute ?? 0),
+        };
+      }),
+    });
+  }
+
+  const colRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  /* Each column scrolls its chosen cell into the middle when it mounts */
+  const attachColumn = (id: Column) => (el: HTMLDivElement | null) => {
+    colRefs.current[id] = el;
+    const sel = el?.querySelector<HTMLElement>('[aria-selected="true"]');
+    if (!el || el.dataset.scrolled) return;
+    el.dataset.scrolled = "1";
+    if (sel) el.scrollTop = sel.offsetTop - el.clientHeight / 2 + sel.offsetHeight / 2;
+    // The panel lives at the end of <body>, so focus goes to it rather than waiting for Tab
+    if (id === "hour") el.focus({ preventScroll: true });
+  };
+
+  const onColumnKey = (ci: number) => (e: React.KeyboardEvent) => {
+    const col = columns[ci];
+    const enabled = col.cells.map((c, i) => (c.off ? -1 : i)).filter((i) => i >= 0);
+    const at = col.cells.findIndex((c) => c.selected);
+    const pos = enabled.indexOf(at);
+    const focusCol = (n: number) =>
+      colRefs.current[columns[Math.max(0, Math.min(columns.length - 1, n))].id]?.focus();
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const d = e.key === "ArrowDown" ? 1 : -1;
+      const next = enabled[pos < 0 ? 0 : (pos + d + enabled.length) % enabled.length];
+      // the minute column closes on pick; from the keyboard, just move
+      if (col.id === "minute") choose(hour ?? Math.floor(lo / 60), minutes[next]);
+      else col.cells[next]?.pick();
+      requestAnimationFrame(() =>
+        colRefs.current[col.id]?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" }),
+      );
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusCol(ci + 1);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusCol(ci - 1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      close();
+      buttonRef.current?.focus();
+    }
+  };
+
+  return (
+    <div className={["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" ")}>
+      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}
+      <div ref={ref} className={["relative", fullWidth ? "w-full" : "inline-block w-44", className].join(" ")}>
+        {/* The field's error styling keys off aria-invalid, as Input's does */}
+        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
+        <button
+          ref={buttonRef}
+          type="button"
+          disabled={disabled}
+          onClick={toggle}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={messageId}
+          data-open={open || undefined}
+          className={[
+            "field group/time relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]",
+            clearable && current ? "pr-10" : "pr-4",
+            "focus:outline-none disabled:opacity-40 disabled:pointer-events-none",
+          ].join(" ")}
+        >
+          <svg
+            aria-hidden
+            width="15"
+            height="15"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            viewBox="0 0 24 24"
+            className={[
+              "shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]",
+              open ? "scale-110 text-ink-soft" : "text-ink-faint group-hover/time:text-ink-body",
+            ].join(" ")}
+          >
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+          <span id={`${uid}-value`} className={["tabular-nums", current ? "font-medium text-ink" : "text-ink-faint"].join(" ")}>
+            {current ? formatTime(current, hour12) : placeholder}
+          </span>
+        </button>
+        {clearable && current && !disabled && (
+          <ClearKey
+            label="clear time"
+            onClear={() => {
+              set(null);
+              buttonRef.current?.focus();
+            }}
+          />
+        )}
+        {name && <input type="hidden" name={name} value={current ?? ""} />}
+      </div>
+
+      {mounted && (
+        <Portal>
+          <div
+            ref={setFloating}
+            role="dialog"
+            aria-label={label ? `choose ${label}` : "choose a time"}
+            className="rounded-[16px] p-1.5"
+            style={panelStyle}
+          >
+            <div className="flex gap-1 rounded-[11px] bg-panel-face p-1.5" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+              {columns.map((col, ci) => (
+                <div
+                  key={col.id}
+                  ref={attachColumn(col.id)}
+                  role="listbox"
+                  aria-label={col.label}
+                  tabIndex={0}
+                  onKeyDown={onColumnKey(ci)}
+                  className="flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-[9px] p-0.5 scroll-thin outline-none focus-visible:ring-2 focus-visible:ring-ink"
+                  style={{ scrollbarWidth: "none" }}
+                >
+                  {col.cells.map((c) => (
+                    <div
+                      key={c.key}
+                      role="option"
+                      aria-selected={c.selected}
+                      aria-disabled={c.off || undefined}
+                      onClick={() => !c.off && c.pick()}
+                      className={[
+                        "grid h-8 shrink-0 place-items-center rounded-[8px] text-[13px] tabular-nums transition-colors duration-100",
+                        c.off
+                          ? "cursor-not-allowed text-ink-ghost"
+                          : c.selected
+                            ? "cursor-pointer font-semibold text-ink-inverse"
+                            : "cursor-pointer text-ink-body hover:bg-surface-active hover:text-ink",
+                      ].join(" ")}
+                      style={
+                        c.selected && !c.off
+                          ? {
+                              background: "var(--face-inverse)",
+                              boxShadow: "var(--face-inverse-shadow)",
+                              textShadow: "var(--emboss-inverse)",
+                            }
+                          : undefined
+                      }
+                    >
+                      {c.label}
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        </Portal>
+      )}
+      <FieldMessage id={messageId} error={error} hint={hint} />
+    </div>
+  );
+}

package/dist/registry/Timeline.tsx

@@ -20,17 +20,17 @@ interface TimelineProps {
    lamp; the variant only changes the lamp's colour. Nodes are joined by
    one continuous groove, and titles sit on the node's centre line.     */
 const lamp: Record<TimelineVariant, string> = {
-  default: "#262626",
-  success: "#10b981",
-  warning: "#f59e0b",
-  accent: "#8b5cf6",
+  default: "var(--lamp-default)",
+  success: "var(--lamp-success)",
+  warning: "var(--lamp-warning)",
+  accent: "var(--lamp-accent)",
 };
 
 const iconText: Record<TimelineVariant, string> = {
-  default: "text-neutral-600",
-  success: "text-emerald-600",
-  warning: "text-amber-600",
-  accent: "text-violet-600",
+  default: "text-ink-body",
+  success: "text-success-soft",
+  warning: "text-warning",
+  accent: "text-accent-soft",
 };
 
 export function Timeline({ items, className = "" }: TimelineProps) {
@@ -40,7 +40,7 @@ export function Timeline({ items, className = "" }: TimelineProps) {
       style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
     >
       <ol
-        className="bg-white rounded-[13px] px-5 py-5 flex flex-col"
+        className="bg-panel-face rounded-[13px] px-5 py-5 flex flex-col"
         style={{ boxShadow: "var(--panel-face-shadow)" }}
       >
         {items.map((item, index) => {
@@ -63,14 +63,14 @@ export function Timeline({ items, className = "" }: TimelineProps) {
                   "relative w-6 h-6 rounded-full flex items-center justify-center shrink-0",
                   iconText[variant],
                 ].join(" ")}
-                style={{ background: "var(--face-light)", boxShadow: "var(--tile-light-shadow)" }}
+                style={{ background: "var(--face)", boxShadow: "var(--tile-shadow)" }}
               >
                 {item.icon ?? (
                   <span
                     className="w-2 h-2 rounded-full"
                     style={{
                       background: lamp[variant],
-                      boxShadow: `0 0 6px ${lamp[variant]}66, inset 0 1px 1px rgba(255,255,255,0.35)`,
+                      boxShadow: `0 0 6px color-mix(in srgb, ${lamp[variant]} 40%, transparent), var(--lamp-lip)`,
                     }}
                   />
                 )}
@@ -78,17 +78,17 @@ export function Timeline({ items, className = "" }: TimelineProps) {
 
               <div className="flex-1 min-w-0">
                 <div className="flex items-baseline justify-between gap-3">
-                  <p className="text-[13.5px] font-medium text-neutral-900 leading-6 tracking-[-0.005em]">
+                  <p className="text-[13.5px] font-medium text-ink leading-6 tracking-[-0.005em]">
                     {item.title}
                   </p>
                   {item.date && (
-                    <time className="text-[12px] text-neutral-400 tabular-nums shrink-0">
+                    <time className="text-[12px] text-ink-faint tabular-nums shrink-0">
                       {item.date}
                     </time>
                   )}
                 </div>
                 {item.description && (
-                  <p className="text-[13px] text-neutral-500 leading-relaxed mt-0.5">
+                  <p className="text-[13px] text-ink-muted leading-relaxed mt-0.5">
                     {item.description}
                   </p>
                 )}

package/dist/registry/Toast.tsx

@@ -41,7 +41,7 @@ const variantConfig: Record<
   { tile: string; icon: React.ReactNode }
 > = {
   default: {
-    tile: "var(--face-dark)",
+    tile: "var(--face-inverse)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="10" />
@@ -50,7 +50,7 @@ const variantConfig: Record<
     ),
   },
   success: {
-    tile: "linear-gradient(180deg, #10b981 0%, #059669 100%)",
+    tile: "var(--tile-success)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
@@ -58,7 +58,7 @@ const variantConfig: Record<
     ),
   },
   warning: {
-    tile: "linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%)",
+    tile: "var(--tile-warning)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
@@ -66,7 +66,7 @@ const variantConfig: Record<
     ),
   },
   error: {
-    tile: "linear-gradient(180deg, #f87171 0%, #dc2626 100%)",
+    tile: "var(--tile-error)",
     icon: (
       <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.75" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -199,26 +199,29 @@ function ToastCard({
         style={{ background: "var(--panel-bezel)", boxShadow: "var(--overlay-shadow)" }}
       >
         <div
-          className="bg-white rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3"
+          className="bg-panel-face rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3"
           style={{ boxShadow: "var(--panel-face-shadow)" }}
         >
           <div
             aria-hidden
-            className="shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center text-white"
+            className={[
+              "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center",
+              // the default tile is the inverse face; status tiles stay white-on-colour
+              tile === "var(--face-inverse)" ? "text-ink-inverse" : "text-white",
+            ].join(" ")}
             style={{
               background: tile,
-              boxShadow:
-                "0 0 3px rgba(0,0,0,0.212), 0 1px 2px rgba(0,0,0,0.15), inset 0 2px 3px -2px rgba(255,255,255,0.188)",
+              boxShadow: "var(--tile-status-shadow)",
             }}
           >
             {icon}
           </div>
           <div className="flex-1 min-w-0 pt-[5px]">
-            <p className="text-[13px] font-semibold text-neutral-900 leading-tight tracking-[-0.01em]">
+            <p className="text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]">
               {item.title}
             </p>
             {item.description && (
-              <p className="text-[12.5px] text-neutral-500 mt-1 leading-relaxed">
+              <p className="text-[12.5px] text-ink-muted mt-1 leading-relaxed">
                 {item.description}
               </p>
             )}
@@ -371,8 +374,8 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
               }}
             >
               <span
-                className="text-[10.5px] font-medium text-neutral-500 px-2 py-0.5 rounded-full"
-                style={{ background: "var(--face-light)", boxShadow: "var(--face-light-shadow)" }}
+                className="text-[10.5px] font-medium text-ink-muted px-2 py-0.5 rounded-full"
+                style={{ background: "var(--face)", boxShadow: "var(--face-shadow)" }}
               >
                 +{showCount} more
               </span>

package/dist/registry/Toggle.tsx

@@ -42,12 +42,12 @@ export function Toggle({
       {(label || description) && (
         <div className="flex flex-col gap-0.5 min-w-0">
           {label && (
-            <span id={`${uid}-label`} className="text-[13px] font-medium text-neutral-900 leading-snug">
+            <span id={`${uid}-label`} className="text-[13px] font-medium text-ink leading-snug">
               {label}
             </span>
           )}
           {description && (
-            <span id={`${uid}-desc`} className="text-[12px] text-neutral-500 leading-relaxed">
+            <span id={`${uid}-desc`} className="text-[12px] text-ink-muted leading-relaxed">
               {description}
             </span>
           )}
@@ -68,14 +68,12 @@ export function Toggle({
         className={[
           "relative shrink-0 w-[46px] h-[26px] rounded-[13px] cursor-pointer",
           "transition-[background-color,box-shadow] duration-200 ease-out",
-          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900",
-          isOn ? "bg-neutral-900" : "bg-neutral-200/70",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+          isOn ? "bg-track-on" : "bg-track",
         ].join(" ")}
         style={{
           /* The track is a recessed channel; the knob is a raised face inside it */
-          boxShadow: isOn
-            ? "inset 0 1px 3px rgba(0,0,0,0.5), inset 0 0 2px rgba(0,0,0,0.3), 0 1px 2px -1px rgba(255,255,255,0.48)"
-            : "inset 0 1px 2px rgba(17,17,17,0.12), inset 0 0 2px rgba(17,17,17,0.12), 0 1px 2px -1px rgba(255,255,255,0.64)",
+          boxShadow: isOn ? "var(--track-on-shadow)" : "var(--track-shadow)",
         }}
       >
         <span
@@ -85,9 +83,8 @@ export function Toggle({
             left: 3,
             /* The knob stretches while held, like a finger dragging it */
             width: pressed ? 24 : 20,
-            background: "var(--face-light)",
-            boxShadow:
-              "0 0 3px rgba(17,17,17,0.119), 0 1px 2px rgba(0,0,0,0.14), 0 3px 6px -1px rgba(0,0,0,0.12), inset 0 2px 3px -2px rgba(255,255,255,1), inset 0 -2px 3px -2px rgba(0,0,0,0.04)",
+            background: "var(--face)",
+            boxShadow: "var(--knob-shadow)",
             transform: `translateX(${isOn ? (pressed ? 16 : 20) : 0}px) translateY(-50%)`,
             transition:
               "transform 260ms var(--ease-spring), width 200ms var(--ease-out-soft)",

package/dist/registry/Tooltip.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useCallback, useEffect, useId } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from "./Floating";
 
 type TooltipPosition = "top" | "bottom" | "left" | "right";
 
@@ -11,20 +12,6 @@ interface TooltipProps {
   className?: string;
 }
 
-const origin: Record<TooltipPosition, string> = {
-  top: "origin-bottom",
-  bottom: "origin-top",
-  left: "origin-right",
-  right: "origin-left",
-};
-
-const enterTranslate: Record<TooltipPosition, string> = {
-  top: "translate-y-1",
-  bottom: "-translate-y-1",
-  left: "translate-x-1",
-  right: "-translate-x-1",
-};
-
 export function Tooltip({
   content,
   position = "top",
@@ -34,9 +21,7 @@ export function Tooltip({
   const [open, setOpen] = useState(false);
   const [visible, setVisible] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const [coords, setCoords] = useState({ top: 0, left: 0 });
   const triggerRef = useRef<HTMLDivElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
   const enterTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const exitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const autoHideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -65,54 +50,18 @@ export function Tooltip({
     }
   }, [hide]);
 
+  // Mounted during render; the effect only waits for it to paint
+  if (open && !mounted) setMounted(true);
+
   useEffect(() => {
     if (open) {
-      setMounted(true);
       requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
     }
   }, [open]);
 
-  const measure = useCallback(() => {
-    if (!triggerRef.current || !tooltipRef.current) return;
-    const tr = triggerRef.current.getBoundingClientRect();
-    const tp = tooltipRef.current.getBoundingClientRect();
-    const gap = 7;
-
-    let top = 0;
-    let left = 0;
-
-    switch (position) {
-      case "top":
-        top = -(tp.height + gap);
-        left = (tr.width - tp.width) / 2;
-        break;
-      case "bottom":
-        top = tr.height + gap;
-        left = (tr.width - tp.width) / 2;
-        break;
-      case "left":
-        top = (tr.height - tp.height) / 2;
-        left = -(tp.width + gap);
-        break;
-      case "right":
-        top = (tr.height - tp.height) / 2;
-        left = tr.width + gap;
-        break;
-    }
-
-    const viewportPadding = 8;
-    const absLeft = triggerRef.current.getBoundingClientRect().left + left;
-    const overflowRight = absLeft + tp.width - (window.innerWidth - viewportPadding);
-    const overflowLeft = viewportPadding - absLeft;
-    if (overflowRight > 0) left -= overflowRight;
-    if (overflowLeft > 0) left += overflowLeft;
-
-    setCoords({ top, left });
-  }, [position]);
-
-  useEffect(() => {
-    if (mounted) measure();
-  }, [mounted, measure]);
+  /* Portalled to the body and placed before its first paint, flipping
+     to the other side when there's no room                           */
+  const { setFloating, side } = useAnchoredPosition(triggerRef, { open: mounted, side: position, align: "center", gap: 7 });
 
   useEffect(() => {
     if (!open) return;
@@ -183,29 +132,28 @@ export function Tooltip({
           })
         : children}
       {mounted && (
+        <Portal>
         <div
-          ref={tooltipRef}
+          ref={setFloating}
           id={`${uid}-tip`}
           role="tooltip"
-          className={[
-            "absolute z-50 px-2.5 py-1.5 rounded-[9px] text-white text-[11.5px] font-medium whitespace-nowrap pointer-events-none",
-            "transition-[opacity,transform,scale,translate] duration-150 ease-[var(--ease-spring)]",
-            origin[position],
-            visible
-              ? "opacity-100 scale-100 translate-x-0 translate-y-0"
-              : ["opacity-0 scale-95", enterTranslate[position]].join(" "),
-          ].join(" ")}
+          className="px-2.5 py-1.5 rounded-[9px] text-ink-inverse text-[11.5px] font-medium whitespace-nowrap pointer-events-none transition-[opacity,transform] duration-150 ease-[var(--ease-spring)]"
           style={{
-            top: coords.top,
-            left: coords.left,
-            background: "var(--face-dark)",
-            boxShadow:
-              "0 0 3px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.22), 0 8px 24px -4px rgba(0,0,0,0.3), inset 0 2px 3px -2px rgba(255,255,255,0.105)",
-            textShadow: "0 -1px 0 rgba(0,0,0,0.4)",
+            position: "fixed",
+            top: 0,
+            left: 0,
+            zIndex: LAYER.tooltip,
+            transformOrigin: ORIGIN[side],
+            opacity: visible ? 1 : 0,
+            transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.95)`,
+            background: "var(--face-inverse)",
+            boxShadow: "var(--tooltip-shadow)",
+            textShadow: "var(--emboss-inverse)",
           }}
         >
           {content}
         </div>
+        </Portal>
       )}
     </div>
   );