@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/FieldMessage.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React from "react";
+
+/* The label above a field and the line under it, shared by every form
+   control so they read as one family.                                */
+
+export function FieldLabel({
+  id,
+  htmlFor,
+  children,
+}: {
+  id?: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+}) {
+  const className =
+    "text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong";
+  return htmlFor ? (
+    <label id={id} htmlFor={htmlFor} className={className}>
+      {children}
+    </label>
+  ) : (
+    <span id={id} className={className}>
+      {children}
+    </span>
+  );
+}
+
+/* An error wins over a hint; either is announced through `id` */
+export function FieldMessage({ id, error, hint }: { id?: string; error?: string; hint?: string }) {
+  if (error) {
+    return (
+      <p id={id} role="alert" className="text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5">
+        <svg aria-hidden width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10" />
+          <path strokeLinecap="round" d="M12 8v4m0 4h.01" />
+        </svg>
+        {error}
+      </p>
+    );
+  }
+  if (hint) {
+    return (
+      <p id={id} className="text-[11.5px] text-ink-muted mt-0.5">
+        {hint}
+      </p>
+    );
+  }
+  return null;
+}
+
+/* A small raised key that sits inside a field or a panel: steppers,
+   month arrows, clear buttons. It sinks flush while held.            */
+export function FieldKey({
+  label,
+  disabled,
+  onClick,
+  onPress,
+  onRelease,
+  focusable = true,
+  size = 28,
+  children,
+}: {
+  label: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  /** Pointer went down (for hold-to-repeat) */
+  onPress?: () => void;
+  onRelease?: () => void;
+  focusable?: boolean;
+  size?: number;
+  children: React.ReactNode;
+}) {
+  const [pressed, setPressed] = React.useState(false);
+  const release = () => {
+    setPressed(false);
+    onRelease?.();
+  };
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      tabIndex={focusable ? undefined : -1}
+      disabled={disabled}
+      onClick={onClick}
+      onPointerDown={(e) => {
+        if (e.button !== 0) return;
+        if (!focusable) e.preventDefault(); // keep focus in the field
+        setPressed(true);
+        onPress?.();
+      }}
+      onPointerUp={release}
+      onPointerLeave={() => pressed && release()}
+      onPointerCancel={release}
+      className="grid shrink-0 cursor-pointer place-items-center rounded-[9px] text-ink-muted transition-[box-shadow,color,opacity] duration-150 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink disabled:opacity-35 disabled:pointer-events-none"
+      style={{
+        width: size,
+        height: size,
+        background: "var(--face)",
+        boxShadow: pressed ? "var(--face-pressed)" : "var(--key-shadow)",
+      }}
+    >
+      <svg
+        aria-hidden
+        width="12"
+        height="12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        viewBox="0 0 24 24"
+        style={{
+          transform: pressed ? "translateY(0.5px) scale(0.92)" : "none",
+          transition: "transform 150ms var(--ease-spring)",
+        }}
+      >
+        {children}
+      </svg>
+    </button>
+  );
+}

package/dist/registry/FileUpload.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import React, { useEffect, useId, useRef, useState } from "react";
+import { Button } from "./Button";
+import { CloseButton } from "./CloseButton";
+import { FieldLabel, FieldMessage } from "./FieldMessage";
+
+export interface UploadItem {
+  id: string;
+  file: File;
+  /** 0–100 while uploading */
+  progress: number;
+  status: "ready" | "uploading" | "done" | "error";
+  error?: string;
+}
+
+interface FileUploadProps {
+  /** Same as the input's accept: "image/*", ".pdf,.docx" */
+  accept?: string;
+  multiple?: boolean;
+  /** In bytes; bigger files land with an error instead of uploading */
+  maxSize?: number;
+  maxFiles?: number;
+  /** Upload each file as it lands. Call onProgress with 0–100; throw to fail it */
+  upload?: (file: File, onProgress: (pct: number) => void) => Promise<void>;
+  /** Every change to the list: added, progressed, finished, removed */
+  onChange?: (items: UploadItem[]) => void;
+  label?: string;
+  hint?: string;
+  /** The words in the empty tray */
+  prompt?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function formatBytes(n: number) {
+  if (n < 1024) return `${n} b`;
+  const units = ["kb", "mb", "gb"];
+  let i = -1;
+  do {
+    n /= 1024;
+    i++;
+  } while (n >= 1024 && i < units.length - 1);
+  return `${n.toFixed(n < 10 ? 1 : 0)} ${units[i]}`;
+}
+
+/* Matches a file against an accept string the way the browser's picker does */
+function accepts(file: File, accept?: string) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const r = rule.trim().toLowerCase();
+    if (r.startsWith(".")) return file.name.toLowerCase().endsWith(r);
+    if (r.endsWith("/*")) return file.type.startsWith(r.slice(0, -1));
+    return file.type === r;
+  });
+}
+
+let seq = 0;
+
+/* Something you fill, so it's built as a field: a wide sunken tray. Drag
+   files over it and it lifts flush and draws its border, the way an
+   Input does when it takes focus. What you drop lands inside it as
+   raised chips; each has a groove along its foot that fills while it
+   uploads, then fades once it's done.                               */
+export function FileUpload({
+  accept,
+  multiple = true,
+  maxSize,
+  maxFiles,
+  upload,
+  onChange,
+  label,
+  hint,
+  prompt,
+  disabled = false,
+  className = "",
+}: FileUploadProps) {
+  const uid = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [items, setItems] = useState<UploadItem[]>([]);
+  const [previews, setPreviews] = useState<Record<string, string>>({});
+  const [over, setOver] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const depth = useRef(0);
+
+  // Report every change to the list, after it renders
+  const report = useRef(onChange);
+  useEffect(() => {
+    report.current = onChange;
+  });
+  useEffect(() => {
+    report.current?.(items);
+  }, [items]);
+
+  // Image previews are object URLs; give them back when they're gone
+  const urls = useRef(previews);
+  useEffect(() => {
+    urls.current = previews;
+  });
+  useEffect(() => () => Object.values(urls.current).forEach(URL.revokeObjectURL), []);
+
+  const patch = (id: string, p: Partial<UploadItem>) =>
+    setItems((list) => list.map((it) => (it.id === id ? { ...it, ...p } : it)));
+
+  const start = (item: UploadItem) => {
+    if (!upload) return;
+    patch(item.id, { status: "uploading", progress: 0 });
+    upload(item.file, (pct) => patch(item.id, { progress: Math.max(0, Math.min(100, pct)) }))
+      .then(() => patch(item.id, { status: "done", progress: 100 }))
+      .catch((err: unknown) =>
+        patch(item.id, { status: "error", error: err instanceof Error ? err.message : "upload failed" }),
+      );
+  };
+
+  const add = (files: FileList | File[]) => {
+    if (disabled) return;
+    let list = Array.from(files);
+    if (!multiple) list = list.slice(0, 1);
+    const room = maxFiles ? Math.max(0, maxFiles - (multiple ? items.length : 0)) : Infinity;
+    setNotice(list.length > room ? `only ${maxFiles} file${maxFiles === 1 ? "" : "s"} can go in` : null);
+    const next: UploadItem[] = list.slice(0, room).map((file) => {
+      const id = `${uid}-${++seq}`;
+      if (!accepts(file, accept)) return { id, file, progress: 0, status: "error", error: "not a type this takes" };
+      if (maxSize && file.size > maxSize)
+        return { id, file, progress: 0, status: "error", error: `over ${formatBytes(maxSize)}` };
+      return { id, file, progress: 0, status: "ready" };
+    });
+    const shots: Record<string, string> = {};
+    next.forEach((it) => {
+      if (it.file.type.startsWith("image/") && it.status !== "error") shots[it.id] = URL.createObjectURL(it.file);
+    });
+    if (!multiple) Object.values(previews).forEach(URL.revokeObjectURL);
+    setPreviews((p) => (multiple ? { ...p, ...shots } : shots));
+    setItems((cur) => (multiple ? [...cur, ...next] : next));
+    next.filter((it) => it.status === "ready").forEach(start);
+  };
+
+  const remove = (id: string) => {
+    if (previews[id]) URL.revokeObjectURL(previews[id]);
+    setPreviews((p) => {
+      const rest = { ...p };
+      delete rest[id];
+      return rest;
+    });
+    setItems((list) => list.filter((it) => it.id !== id));
+  };
+
+  const browse = () => !disabled && inputRef.current?.click();
+  const full = !!maxFiles && multiple && items.length >= maxFiles;
+  const empty = items.length === 0;
+
+  return (
+    <div className={["group/field flex w-full flex-col gap-1.5", className].join(" ")}>
+      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}
+
+      {/* The tray: a field, so data-open gives it Input's focused well */}
+      <div
+        role="group"
+        aria-labelledby={label ? `${uid}-label` : undefined}
+        aria-describedby={hint ? `${uid}-hint` : undefined}
+        data-open={over || undefined}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          if (disabled) return;
+          depth.current++;
+          setOver(true);
+        }}
+        onDragOver={(e) => e.preventDefault()}
+        onDragLeave={() => {
+          // dragleave fires for every child crossed; only the last one counts
+          if (--depth.current <= 0) setOver(false);
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          depth.current = 0;
+          setOver(false);
+          add(e.dataTransfer.files);
+        }}
+        className={[
+          "field relative flex flex-col rounded-[18px] p-2",
+          disabled ? "pointer-events-none opacity-40" : "",
+        ].join(" ")}
+      >
+        {empty ? (
+          <div
+            className="flex cursor-pointer flex-col items-center gap-3.5 px-6 py-9 text-center"
+            onClick={(e) => e.target === e.currentTarget && browse()}
+          >
+            <span className="flex flex-col gap-1">
+              <span className="text-[14px] font-medium text-ink tracking-[-0.01em]">
+                {over ? "let go to drop them in" : prompt ?? (multiple ? "drop files here" : "drop a file here")}
+              </span>
+              {hint && (
+                <span id={`${uid}-hint`} className="text-[12px] text-ink-muted">
+                  {hint}
+                </span>
+              )}
+            </span>
+            <Button variant="secondary" size="sm" onClick={browse} disabled={disabled}>
+              {multiple ? "choose files" : "choose a file"}
+            </Button>
+          </div>
+        ) : (
+          <>
+            <ul aria-label="files" className="flex flex-col gap-1.5">
+              {items.map((it) => (
+                <FileChip key={it.id} item={it} preview={previews[it.id]} onRemove={() => remove(it.id)} />
+              ))}
+            </ul>
+            <div className="flex items-center justify-between gap-3 pl-2.5 pr-0.5 pt-2.5 pb-0.5">
+              <span id={`${uid}-hint`} className="truncate text-[12px] text-ink-muted">
+                {over ? "let go to add them" : hint ?? `${items.length} file${items.length === 1 ? "" : "s"}`}
+              </span>
+              {!full && (
+                <Button variant="secondary" size="sm" onClick={browse} disabled={disabled}>
+                  {multiple ? "add more" : "replace"}
+                </Button>
+              )}
+            </div>
+          </>
+        )}
+
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          tabIndex={-1}
+          aria-hidden
+          className="sr-only"
+          onChange={(e) => {
+            if (e.target.files) add(e.target.files);
+            e.target.value = ""; // so picking the same file again still fires
+          }}
+        />
+      </div>
+
+      {notice && <FieldMessage error={notice} />}
+    </div>
+  );
+}
+
+/* A raised chip sitting in the tray. The groove along its foot is a
+   Progress track in miniature; it fills, then fades once the file is up. */
+function FileChip({ item, preview, onRemove }: { item: UploadItem; preview?: string; onRemove: () => void }) {
+  const failed = item.status === "error";
+  const meta = failed
+    ? item.error
+    : item.status === "uploading"
+      ? `${formatBytes(item.file.size)} · ${Math.round(item.progress)}%`
+      : item.status === "done"
+        ? `${formatBytes(item.file.size)} · uploaded`
+        : formatBytes(item.file.size);
+  return (
+    <li
+      className="relative flex items-center gap-3 overflow-hidden rounded-[12px] pt-2.5 pb-3.5 pl-2.5 pr-2"
+      style={{
+        background: "var(--face)",
+        boxShadow: "var(--thumb-shadow)",
+        animation: "select-option-in 320ms var(--ease-out-soft) both",
+      }}
+    >
+      {preview && (
+        // eslint-disable-next-line @next/next/no-img-element -- a local object URL, nothing to optimise
+        <img
+          src={preview}
+          alt=""
+          className="h-9 w-9 shrink-0 rounded-[8px] object-cover"
+          style={{ boxShadow: "inset 0 0 0 1px var(--hairline), var(--key-shadow)" }}
+        />
+      )}
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="truncate text-[13px] font-medium text-ink">{item.file.name}</span>
+        <span
+          className={[
+            "flex items-center gap-1 truncate text-[11.5px] tabular-nums",
+            failed ? "text-danger" : "text-ink-muted",
+          ].join(" ")}
+        >
+          {item.status === "done" && (
+            <svg aria-hidden width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2.75" viewBox="0 0 24 24" className="text-success">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          )}
+          {meta}
+        </span>
+      </span>
+      <CloseButton size="sm" label={`remove ${item.file.name}`} onClick={onRemove} />
+
+      {/* The groove along the chip's foot */}
+      <span
+        aria-hidden={item.status !== "uploading"}
+        role={item.status === "uploading" ? "progressbar" : undefined}
+        aria-label={item.status === "uploading" ? `uploading ${item.file.name}` : undefined}
+        aria-valuenow={item.status === "uploading" ? Math.round(item.progress) : undefined}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="absolute inset-x-2.5 bottom-[6px] h-[3px] rounded-full transition-opacity duration-500"
+        style={{
+          background: "var(--track)",
+          boxShadow: "var(--track-shadow)",
+          opacity: item.status === "uploading" ? 1 : 0,
+          transitionDelay: item.status === "done" ? "400ms" : "0ms",
+        }}
+      >
+        <span
+          className="block h-full rounded-full"
+          style={{
+            width: `${item.progress}%`,
+            background: "var(--face-inverse)",
+            transition: "width 300ms var(--ease-out-soft)",
+          }}
+        />
+      </span>
+    </li>
+  );
+}

package/dist/registry/Floating.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { RefObject, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+
+/* ── Portal ───────────────────────────────────────────────────────── */
+/* Anything that floats over the page is rendered at the end of <body>.
+   Left where it was declared, a panel lives inside whatever stacking
+   context its parents made (a transform, a filter, an isolate), and a
+   later sibling on the page can paint straight over it, whatever its
+   z-index says.                                                     */
+const noop = () => () => {};
+
+export function Portal({ children }: { children: React.ReactNode }) {
+  const client = useSyncExternalStore(noop, () => true, () => false);
+  return client ? createPortal(children, document.body) : null;
+}
+
+/* Layers, lowest first: dialogs, then toasts, then anything anchored to
+   a control (so a select inside a modal opens over the modal), then
+   tooltips over all of it.                                          */
+export const LAYER = { dialog: 90, toast: 95, floating: 100, tooltip: 110 } as const;
+
+/* ── Anchored position ────────────────────────────────────────────── */
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+
+const OPPOSITE: Record<Side, Side> = { top: "bottom", bottom: "top", left: "right", right: "left" };
+const PAD = 8;
+
+interface AnchorOptions {
+  open: boolean;
+  side?: Side;
+  align?: Align;
+  /** Space between the anchor and the panel */
+  gap?: number;
+  /** Make the panel at least as wide as the anchor (selects, comboboxes) */
+  matchWidth?: boolean;
+}
+
+/* Places a fixed-position panel next to its anchor: on the side asked
+   for unless the other side has more room, then nudged back inside the
+   viewport. Follows the anchor while the page scrolls or resizes. The
+   position is written straight onto the element, so scrolling never
+   re-renders the component.                                         */
+export function useAnchoredPosition(
+  anchor: RefObject<HTMLElement | null>,
+  { open, side = "bottom", align = "start", gap = 8, matchWidth = false }: AnchorOptions,
+) {
+  const [placed, setPlaced] = useState<Side>(side);
+  const floating = useRef<HTMLElement | null>(null);
+
+  const update = useCallback(() => {
+    const a = anchor.current?.getBoundingClientRect();
+    const el = floating.current;
+    if (!a || !el) return;
+    if (matchWidth) el.style.minWidth = `${a.width}px`;
+
+    // offset sizes ignore the enter transform, so these are the settled size
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const vw = document.documentElement.clientWidth;
+    const vh = window.innerHeight;
+    const room: Record<Side, number> = { top: a.top, bottom: vh - a.bottom, left: a.left, right: vw - a.right };
+    const vertical = side === "top" || side === "bottom";
+    const need = (vertical ? h : w) + gap + PAD;
+
+    let s = side;
+    if (room[s] < need && room[OPPOSITE[s]] > room[s]) s = OPPOSITE[s];
+
+    let top: number;
+    let left: number;
+    if (s === "top" || s === "bottom") {
+      top = s === "bottom" ? a.bottom + gap : a.top - gap - h;
+      left = align === "start" ? a.left : align === "end" ? a.right - w : a.left + (a.width - w) / 2;
+    } else {
+      left = s === "right" ? a.right + gap : a.left - gap - w;
+      top = align === "start" ? a.top : align === "end" ? a.bottom - h : a.top + (a.height - h) / 2;
+    }
+    left = Math.max(PAD, Math.min(left, vw - w - PAD));
+    top = Math.max(PAD, Math.min(top, vh - h - PAD));
+
+    el.style.top = `${Math.round(top)}px`;
+    el.style.left = `${Math.round(left)}px`;
+    el.dataset.side = s;
+    setPlaced(s);
+  }, [anchor, side, align, gap, matchWidth]);
+
+  /* Attach this as the panel's ref: it's placed before its first paint */
+  const setFloating = useCallback(
+    (el: HTMLElement | null) => {
+      floating.current = el;
+      if (el) update();
+    },
+    [update],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    let frame = 0;
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
+    };
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    // The panel can change size while open (a filtered list, a new month)
+    const ro = new ResizeObserver(schedule);
+    if (floating.current) ro.observe(floating.current);
+    if (anchor.current) ro.observe(anchor.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      ro.disconnect();
+    };
+  }, [open, update, anchor]);
+
+  return { setFloating, side: placed, floatingRef: floating, update };
+}
+
+/* Where the panel grows from, and where it slides in from, for each side */
+export const ORIGIN: Record<Side, string> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+export const ENTER_FROM: Record<Side, string> = {
+  top: "translateY(4px)",
+  bottom: "translateY(-4px)",
+  left: "translateX(4px)",
+  right: "translateX(-4px)",
+};

package/dist/registry/HoverCard.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import React, { useEffect, useId, useRef, useState } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, Side, useAnchoredPosition } from "./Floating";
+
+interface HoverCardProps {
+  /** What you hover: a link, a name, an avatar */
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  side?: Side;
+  align?: "start" | "center" | "end";
+  /** Milliseconds to wait before opening, and before closing */
+  openDelay?: number;
+  closeDelay?: number;
+  className?: string;
+}
+
+/* A preview that floats up when you rest the pointer on something, like
+   a profile behind a username. It waits a beat before opening, stays
+   open while the pointer crosses into it, and opens on keyboard focus
+   too. It's a preview: anything in it should also be reachable by
+   following the trigger.                                          */
+export function HoverCard({
+  trigger,
+  children,
+  side = "bottom",
+  align = "center",
+  openDelay = 450,
+  closeDelay = 200,
+  className = "",
+}: HoverCardProps) {
+  const uid = useId();
+  const ref = useRef<HTMLSpanElement>(null);
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { setFloating, side: placed } = useAnchoredPosition(ref, { open: mounted, side, align, gap: 10 });
+
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+
+  useEffect(() => {
+    if (open) {
+      const id = requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+      return () => cancelAnimationFrame(id);
+    }
+    const t = setTimeout(() => setMounted(false), 180);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  const later = (next: boolean, ms: number) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(next), ms);
+  };
+  // Touch has no hover; a tap goes through to the trigger instead
+  const enter = (e: React.PointerEvent) => e.pointerType !== "touch" && later(true, openDelay);
+  const leave = (e: React.PointerEvent) => e.pointerType !== "touch" && later(false, closeDelay);
+
+  return (
+    <span
+      ref={ref}
+      className={["inline-flex", className].join(" ")}
+      onPointerEnter={enter}
+      onPointerLeave={leave}
+      onFocus={() => later(true, 0)}
+      onBlur={() => later(false, closeDelay)}
+    >
+      {React.isValidElement(trigger)
+        ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {
+            "aria-describedby": mounted ? `${uid}-card` : undefined,
+          })
+        : trigger}
+      {mounted && (
+        <Portal>
+          <div
+            ref={setFloating}
+            id={`${uid}-card`}
+            onPointerEnter={enter}
+            onPointerLeave={leave}
+            className="w-[300px] max-w-[calc(100vw-16px)] rounded-[18px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]"
+            style={{
+              position: "fixed",
+              top: 0,
+              left: 0,
+              zIndex: LAYER.floating,
+              transformOrigin: ORIGIN[placed],
+              opacity: visible ? 1 : 0,
+              transform: visible ? "none" : `${ENTER_FROM[placed]} scale(0.96)`,
+              background: "var(--panel-bezel)",
+              boxShadow: "var(--overlay-shadow)",
+            }}
+          >
+            <div className="rounded-[13px] bg-panel-face p-4 text-[13px] text-ink-body" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+              {children}
+            </div>
+          </div>
+        </Portal>
+      )}
+    </span>
+  );
+}