@twentyfirstmedia/ui-core 0.1.0 → 0.2.0

package/dist/toast-store.d.ts

@@ -18,6 +18,8 @@ export interface ToastData extends ToastOptions {
     id: string;
     tone: ToastTone;
     duration: number;
+    /** Animating out; removed after `--dur-exit`. */
+    leaving?: boolean;
 }
 /** Shows a toast in the `<Toaster/>`; at most three are visible. Returns its id. */
 export declare function toast(o: ToastOptions | string): string;

package/dist/toast-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-store.d.ts","sourceRoot":"","sources":["../src/toast-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD,oFAAoF;AACpF,wBAAgB,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAWtD;yBAXe,KAAK;sBAYA,MAAM,KAAG,IAAI;qBAIhB,IAAI;;AAKtB,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAG1D;AACD,wBAAgB,SAAS,IAAI,SAAS,EAAE,CAEvC;AAED,wBAAgB,eAAe,IAAI,SAAS,EAAE,CAE7C"}
+{"version":3,"file":"toast-store.d.ts","sourceRoot":"","sources":["../src/toast-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAMD,oFAAoF;AACpF,wBAAgB,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAWtD;yBAXe,KAAK;sBAYA,MAAM,KAAG,IAAI;qBA6BhB,IAAI;;AAKtB,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAG1D;AACD,wBAAgB,SAAS,IAAI,SAAS,EAAE,CAEvC;AAED,wBAAgB,eAAe,IAAI,SAAS,EAAE,CAE7C"}

package/dist/toast-store.js

@@ -15,9 +15,36 @@ export function toast(o) {
     return t.id;
 }
 toast.dismiss = (id) => {
-    list = list.filter((t) => t.id !== id);
+    const ms = exitMs();
+    if (ms <= 0) {
+        list = list.filter((t) => t.id !== id);
+        emit();
+        return;
+    }
+    list = list.map((t) => (t.id === id ? { ...t, leaving: true } : t));
     emit();
+    setTimeout(() => {
+        list = list.filter((t) => t.id !== id);
+        emit();
+    }, ms);
 };
+/** How long a toast takes to leave (0 without motion). */
+function exitMs() {
+    try {
+        if (typeof window === "undefined")
+            return 0;
+        if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
+            return 0;
+        if (document.documentElement.closest("[data-motion]")?.getAttribute("data-motion") === "off")
+            return 0;
+        const raw = getComputedStyle(document.documentElement).getPropertyValue("--dur-exit").trim();
+        const n = parseFloat(raw);
+        return isNaN(n) ? 0 : raw.endsWith("ms") ? n : n * 1000;
+    }
+    catch {
+        return 0;
+    }
+}
 toast.clear = () => {
     list = [];
     emit();

package/dist/toast-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-store.js","sourceRoot":"","sources":["../src/toast-store.ts"],"names":[],"mappings":"AAoBA,IAAI,IAAI,GAAgB,EAAE,CAAC;AAC3B,MAAM,IAAI,GAAG,IAAI,GAAG,EAAc,CAAC;AACnC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5C,oFAAoF;AACpF,MAAM,UAAU,KAAK,CAAC,CAAwB;IAC5C,MAAM,IAAI,GAAiB,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,GAAc;QACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACvC,GAAG,IAAI;QACP,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;KACrD,CAAC;IACF,IAAI,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,OAAO,CAAC,CAAC,EAAE,CAAC;AACd,CAAC;AACD,KAAK,CAAC,OAAO,GAAG,CAAC,EAAU,EAAQ,EAAE;IACnC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AACF,KAAK,CAAC,KAAK,GAAG,GAAS,EAAE;IACvB,IAAI,GAAG,EAAE,CAAC;IACV,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,EAAc;IAC5C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAC/B,CAAC;AACD,MAAM,UAAU,SAAS;IACvB,OAAO,IAAI,CAAC;AACd,CAAC;AACD,MAAM,KAAK,GAAgB,EAAE,CAAC;AAC9B,MAAM,UAAU,eAAe;IAC7B,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"toast-store.js","sourceRoot":"","sources":["../src/toast-store.ts"],"names":[],"mappings":"AAsBA,IAAI,IAAI,GAAgB,EAAE,CAAC;AAC3B,MAAM,IAAI,GAAG,IAAI,GAAG,EAAc,CAAC;AACnC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5C,oFAAoF;AACpF,MAAM,UAAU,KAAK,CAAC,CAAwB;IAC5C,MAAM,IAAI,GAAiB,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,GAAc;QACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACvC,GAAG,IAAI;QACP,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS;QAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;KACrD,CAAC;IACF,IAAI,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,OAAO,CAAC,CAAC,EAAE,CAAC;AACd,CAAC;AACD,KAAK,CAAC,OAAO,GAAG,CAAC,EAAU,EAAQ,EAAE;IACnC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;QACZ,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACvC,IAAI,EAAE,CAAC;QACP,OAAO;IACT,CAAC;IACD,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpE,IAAI,EAAE,CAAC;IACP,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QACvC,IAAI,EAAE,CAAC;IACT,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,0DAA0D;AAC1D,SAAS,MAAM;IACb,IAAI,CAAC;QACH,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO,CAAC,CAAC;QAC5C,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO;YAAE,OAAO,CAAC,CAAC;QAC9E,IAAI,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,YAAY,CAAC,aAAa,CAAC,KAAK,KAAK;YAC1F,OAAO,CAAC,CAAC;QACX,MAAM,GAAG,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAC7F,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC1D,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,CAAC,CAAC;IACX,CAAC;AACH,CAAC;AACD,KAAK,CAAC,KAAK,GAAG,GAAS,EAAE;IACvB,IAAI,GAAG,EAAE,CAAC;IACV,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,EAAc;IAC5C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACb,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAC/B,CAAC;AACD,MAAM,UAAU,SAAS;IACvB,OAAO,IAAI,CAAC;AACd,CAAC;AACD,MAAM,KAAK,GAAgB,EAAE,CAAC;AAC9B,MAAM,UAAU,eAAe;IAC7B,OAAO,KAAK,CAAC;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twentyfirstmedia/ui-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Components, hooks, icons and formatters shared by the Halo and Pro kits.",
   "license": "MIT",
   "author": "Twentyfirst Media (https://twentyfirst.media)",

package/src/components/admin.tsx

@@ -539,7 +539,7 @@ export function MapView(p: MapViewProps) {
       })}
       {cur && (
         <div
-          className="tf-map-pop"
+          className={cx("tf-map-pop", p.surface && "tf-" + p.surface)}
           style={{
             left: Math.min(72, Math.max(28, xy(cur).x)) + "%",
             top: xy(cur).y + "%",
@@ -555,8 +555,12 @@ export function MapView(p: MapViewProps) {
           )}
         </div>
       )}
-      {p.legend && <div className="tf-map-legend">{p.legend}</div>}
-      {p.controls && <div className="tf-map-ctl">{p.controls}</div>}
+      {p.legend && (
+        <div className={cx("tf-map-legend", p.surface && "tf-" + p.surface)}>{p.legend}</div>
+      )}
+      {p.controls && (
+        <div className={cx("tf-map-ctl", p.surface && "tf-" + p.surface)}>{p.controls}</div>
+      )}
     </div>
   );
 }

package/src/components/charts.tsx

@@ -76,7 +76,7 @@ export function BarChart(p: BarChartProps) {
                 height={bh}
                 rx={Math.min(10, bw / 2)}
                 style={{
-                  animationDelay: 120 + i * 55 + "ms",
+                  animationDelay: `calc(var(--enter-delay, 0ms) + ${120 + i * 55}ms * var(--motion-time, 1))`,
                 }}
               >
                 <title>{d.label + ": " + d.value}</title>
@@ -164,7 +164,7 @@ export function LineChart(p: LineChartProps) {
                 d={d}
                 pathLength={1}
                 style={{
-                  animationDelay: 150 + si * 200 + "ms",
+                  animationDelay: `calc(var(--enter-delay, 0ms) + ${150 + si * 200}ms * var(--motion-time, 1))`,
                 }}
               />
               <circle
@@ -430,7 +430,7 @@ export function StackedBarChart(p: StackedBarChartProps) {
                       key={si}
                       className={cx("tf-seg-bar", "tf-sf-" + (s.tint || "ink"))}
                       style={{
-                        animationDelay: 120 + i * 45 + "ms",
+                        animationDelay: `calc(var(--enter-delay, 0ms) + ${120 + i * 45}ms * var(--motion-time, 1))`,
                       }}
                       d={
                         top
@@ -715,7 +715,7 @@ export function Heatmap(p: HeatmapProps) {
                     hov[0] && hov[0][0] === ri && hov[0][1] === ci && "hov",
                   )}
                   style={{
-                    animationDelay: ci * 12 + ri * 30 + "ms",
+                    animationDelay: `calc(var(--enter-delay, 0ms) + ${ci * 12 + ri * 30}ms * var(--motion-time, 1))`,
                   }}
                   onPointerEnter={() => {
                     hov[1]([ri, ci]);

package/src/components/data-display.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { cx, durationToken, reduced } from "../cx.js";
+import { cx, durationToken, enterDelay, reduced } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { useMounted, useScrollFocus } from "../hooks.js";
 import { Avatar, IconButton, TintIcon } from "./foundation.js";
@@ -59,18 +59,20 @@ export function CountUp(p: CountUpProps) {
   const o = parseNum(p.value),
     st = React.useState(o ? fmt(0, o) : String(p.value)),
     last = React.useRef(0),
-    first = React.useRef(true);
+    first = React.useRef(true),
+    el = React.useRef<HTMLSpanElement>(null);
   React.useEffect(() => {
-    if (!o || reduced()) {
+    if (!o || reduced(el.current)) {
       st[1](String(p.value));
       return;
     }
-    const slow = durationToken("--dur-slow", 900);
+    const slow = durationToken("--dur-slow", 900, el.current);
     const from = last.current;
     let start: number | null = null,
       raf = 0;
     const dur = first.current ? p.duration || slow : slow / 2,
-      delay = first.current ? p.delay || 0 : 0;
+      // the first count waits for the card it sits in to come in
+      delay = first.current ? (p.delay || 0) + enterDelay(el.current) : 0;
     first.current = false;
     const target = o;
     function tick(t: number) {
@@ -88,7 +90,11 @@ export function CountUp(p: CountUpProps) {
       cancelAnimationFrame(raf);
     };
   }, [p.value]);
-  return <span className={p.className}>{st[0]}</span>;
+  return (
+    <span ref={el} className={p.className}>
+      {st[0]}
+    </span>
+  );
 }
 export function StatTile(p: StatTileProps) {
   const tint = p.tint || "sky";
@@ -114,7 +120,13 @@ export function Card(p: CardProps) {
   const tint = p.tint && p.tint !== "surface" ? "tf-bg-" + p.tint : null;
   return (
     <article
-      className={cx("tf-card", tint, p.onClick && "tf-card-interactive", p.className)}
+      className={cx(
+        "tf-card",
+        tint,
+        p.onClick && "tf-card-interactive",
+        p.surface && "tf-" + p.surface,
+        p.className,
+      )}
       style={p.style}
       tabIndex={p.onClick ? 0 : undefined}
       onClick={p.onClick}
@@ -177,7 +189,10 @@ export function EventCard(p: EventCardProps) {
 }
 export function Panel(p: PanelProps) {
   return (
-    <section className={cx("tf-panel", p.side && "tf-side", p.className)} style={p.style}>
+    <section
+      className={cx("tf-panel", p.side && "tf-side", p.surface && "tf-" + p.surface, p.className)}
+      style={p.style}
+    >
       {(p.title || p.action) && (
         <div className="tf-header">
           <div>
@@ -211,14 +226,39 @@ export function PageHeader(p: PageHeaderProps) {
     </header>
   );
 }
+const useLayout = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+
 export function Stagger(p: StaggerProps) {
   const st: Record<string, unknown> = { ...p.style };
   if (p.delay) st["--base"] = p.delay + "ms";
+  const ref = React.useRef<HTMLElement>(null);
+  // below the fold, the entrance waits until the group scrolls into view
+  const [waiting, setWaiting] = React.useState(false);
+  useLayout(() => {
+    const el = ref.current;
+    if (!el || p.reveal === false || typeof IntersectionObserver === "undefined" || reduced(el))
+      return;
+    if (el.getBoundingClientRect().top < window.innerHeight) return;
+    setWaiting(true);
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setWaiting(false);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "0px 0px -8% 0px" },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
   return React.createElement(
     p.as || "div",
     {
+      ref,
       className: cx("tf-stagger", p.className),
       style: st,
+      "data-reveal": waiting ? "waiting" : undefined,
     },
     p.children,
   );

package/src/components/developer.tsx

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { leaving, usePresence } from "../presence.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { formatMoney, formatNumber, formatPercent } from "../format.js";
@@ -258,6 +259,7 @@ export function SettingsLayout(p: SettingsLayoutProps) {
 }
 
 export function ShortcutsOverlay(p: ShortcutsOverlayProps) {
+  const pr = usePresence(!!p.open);
   React.useEffect(() => {
     if (!p.open) return;
     function k(e: KeyboardEvent) {
@@ -268,10 +270,10 @@ export function ShortcutsOverlay(p: ShortcutsOverlayProps) {
       document.removeEventListener("keydown", k);
     };
   }, [p.open]);
-  if (!p.open) return null;
+  if (!pr.mounted) return null;
   return (
     <Portal>
-      <div className="tf-overlay">
+      <div {...leaving(pr.closing)} className="tf-overlay">
         <div className="tf-backdrop" onClick={p.onClose} />
         <div
           className="tf-modal tf-shortcuts"

package/src/components/feedback.tsx

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { leaving, usePresence } from "../presence.js";
 import { moveFocus, useId } from "../hooks.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
@@ -178,8 +179,10 @@ export function Menu(p: MenuProps) {
 }
 
 export function Modal(p: ModalProps) {
+  const pr = usePresence(p.open ?? true);
+  if (!pr.mounted) return null;
   return (
-    <div className="tf-modal-wrap" style={p.style}>
+    <div {...leaving(pr.closing)} className="tf-modal-wrap" style={p.style}>
       <div className="tf-backdrop" aria-hidden />
       <div className="tf-modal" role="dialog" aria-modal="true" aria-label={p.title}>
         <span className="tf-modal-close">
@@ -277,7 +280,8 @@ export function ConfirmDialog(p: ConfirmDialogProps) {
   const titleId = useId("confirm");
   const typed = React.useState(""),
     ok = !p.confirmText || typed[0] === p.confirmText,
-    cancel = React.useRef<HTMLButtonElement>(null);
+    cancel = React.useRef<HTMLButtonElement>(null),
+    pr = usePresence(!!p.open);
   React.useEffect(() => {
     if (!p.open) return;
     typed[1]("");
@@ -292,10 +296,10 @@ export function ConfirmDialog(p: ConfirmDialogProps) {
       document.removeEventListener("keydown", k);
     };
   }, [p.open]);
-  if (!p.open) return null;
+  if (!pr.mounted) return null;
   return (
     <Portal>
-      <div className="tf-overlay">
+      <div {...leaving(pr.closing)} className="tf-overlay">
         <div className="tf-backdrop" onClick={p.onCancel} />
         <div
           className="tf-modal tf-confirm"
@@ -371,6 +375,7 @@ export function ToastItem(p: { t: ToastData }) {
   const tint = ALERT_TINT[t.tone] || "mint";
   return (
     <div
+      {...leaving(!!t.leaving)}
       className="tf-toast tf-toast-x"
       role={t.tone === "danger" ? "alert" : "status"}
       onPointerEnter={() => {

package/src/components/forms.tsx

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { leaving, usePresence } from "../presence.js";
 import { cx } from "../cx.js";
 import { useFieldError } from "./form.js";
 import { formatDate, formatNumber, WEEK_START } from "../format.js";
@@ -235,6 +236,7 @@ export function Combobox(p: ComboboxProps) {
     act = React.useState(0),
     ref = React.useRef<HTMLDivElement>(null),
     inp = React.useRef<HTMLInputElement>(null);
+  const openPr = usePresence(!!open[0]);
   useOutside(ref, open[0], () => {
     open[1](false);
     q[1]("");
@@ -358,8 +360,9 @@ export function Combobox(p: ComboboxProps) {
             <Icon name="chevronDown" size={15} />
           </span>
         </div>
-        {open[0] && (
+        {openPr.mounted && (
           <div
+            {...leaving(openPr.closing)}
             className="tf-popover tf-combo-pop"
             id={id + "-list"}
             role="listbox"

package/src/components/index.ts

@@ -192,7 +192,7 @@ export {
   EnergyClass,
 } from "./real-estate.js";
 export { RichTextEditor } from "./rich-text-editor.js";
-export { TopBar, SideRail, Dock, NAV, AppShell } from "./shell.js";
+export { TopBar, SideRail, Dock, FloatingLayout, Ambient, NAV, AppShell } from "./shell.js";
 export { ChatLauncher, CookieConsent, AnnouncementBar } from "./site.js";
 export { StatusShape, StatusIndicator } from "./status.js";
 export { StatusScreen, AuthCard } from "./system.js";

package/src/components/overlays.tsx

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { leaving, usePresence } from "../presence.js";
 import { useControlled, useId, useKeepInView, useOutside } from "../hooks.js";
 import { cx } from "../cx.js";
 import type { PopoverProps, TooltipProps } from "./types.js";
@@ -8,7 +9,8 @@ import type { PopoverProps, TooltipProps } from "./types.js";
 export function Popover(p: PopoverProps) {
   const ref = React.useRef<HTMLSpanElement>(null),
     pop = React.useRef<HTMLDivElement>(null),
-    st = useControlled(p.open, false, p.onOpenChange);
+    st = useControlled(p.open, false, p.onOpenChange),
+    pr = usePresence(st[0]);
   useOutside(ref, st[0], () => {
     st[1](false);
   });
@@ -52,8 +54,9 @@ export function Popover(p: PopoverProps) {
   return (
     <span ref={ref} className={cx("tf-pop-anchor", p.block && "block", p.className)}>
       {trigger}
-      {st[0] && (
+      {pr.mounted && (
         <div
+          {...leaving(pr.closing)}
           ref={pop}
           className={cx(
             "tf-popover",
@@ -88,7 +91,8 @@ export function Tooltip(p: TooltipProps) {
     st = React.useState(!!p.defaultOpen),
     t = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined),
     tip = React.useRef<HTMLSpanElement>(null),
-    side = p.side || "top";
+    side = p.side || "top",
+    pr = usePresence(st[0]);
   // keep a top or bottom tooltip inside the screen (or the scrolling box around it)
   useKeepInView(tip, st[0] && side !== "left" && side !== "right");
   function show() {
@@ -118,8 +122,14 @@ export function Tooltip(p: TooltipProps) {
       {React.cloneElement(child, {
         "aria-describedby": st[0] ? id : undefined,
       })}
-      {st[0] && (
-        <span id={id} ref={tip} role="tooltip" className={cx("tf-tooltip", "tf-tip-" + side)}>
+      {pr.mounted && (
+        <span
+          {...leaving(pr.closing)}
+          id={id}
+          ref={tip}
+          role="tooltip"
+          className={cx("tf-tooltip", "tf-tip-" + side)}
+        >
           {p.label}
           {p.shortcut && <kbd>{p.shortcut}</kbd>}
         </span>

package/src/components/primitives.tsx

@@ -5,6 +5,7 @@
  * the WAI-ARIA authoring practices.
  */
 import * as React from "react";
+import { leaving, usePresence } from "../presence.js";
 import { Icon } from "../Icon.js";
 import { cx } from "../cx.js";
 import { moveFocus, useControlled, useId, useKeepInView } from "../hooks.js";
@@ -230,6 +231,7 @@ export function HoverCard(p: HoverCardProps) {
   const [open, setOpen] = React.useState(false);
   const t = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const card = React.useRef<HTMLDivElement>(null);
+  const pr = usePresence(open);
   useKeepInView(card, open);
   const later = (v: boolean, ms: number) => {
     clearTimeout(t.current);
@@ -251,8 +253,9 @@ export function HoverCard(p: HoverCardProps) {
       }}
     >
       {p.trigger}
-      {open && (
+      {pr.mounted && (
         <div
+          {...leaving(pr.closing)}
           ref={card}
           className={cx(
             "tf-hovercard",

package/src/components/shell.tsx

@@ -1,12 +1,14 @@
 "use client";
 import * as React from "react";
 import { Icon } from "../Icon.js";
-import { cx } from "../cx.js";
+import { cx, reduced } from "../cx.js";
 import { Avatar } from "./foundation.js";
 import type {
   AppShellProps,
   DockItem,
+  AmbientProps,
   DockProps,
+  FloatingLayoutProps,
   NavItem,
   RailItem,
   SideRailProps,
@@ -72,7 +74,7 @@ function railBtn(it: RailItem, i: number) {
       type="button"
       className="tf-rail-btn"
       style={{
-        animationDelay: 200 + i * 50 + "ms",
+        animationDelay: `calc(${200 + i * 50}ms * var(--motion-time, 1))`,
       }}
       aria-label={it.count ? `${it.label}, ${it.count}` : it.label}
       title={it.label}
@@ -96,7 +98,12 @@ export function SideRail(p: SideRailProps) {
 
 export function Dock(p: DockProps) {
   return (
-    <div className="tf-dock" role="toolbar" aria-label={p.label || "Quick actions"}>
+    <div
+      className={cx("tf-dock", p.surface && "tf-" + p.surface, p.className)}
+      style={p.style}
+      role="toolbar"
+      aria-label={p.label || "Quick actions"}
+    >
       {(p.items || []).map((it) => (
         <button
           key={it.label}
@@ -113,6 +120,98 @@ export function Dock(p: DockProps) {
   );
 }
 
+/**
+ * UI floating over a full-bleed background (a map, a 3D scene, a video): four slots along the
+ * edges, glass by default. The background stays interactive wherever no slot sits on it.
+ */
+export function FloatingLayout(p: FloatingLayoutProps) {
+  const surface = p.surface ?? "glass";
+  return (
+    <div
+      className={cx("tf-floating", p.className)}
+      style={{ minHeight: p.height ?? 640, ...p.style }}
+      role="region"
+      aria-label={p.label}
+      data-surface={surface}
+    >
+      {p.background != null && <div className="tf-floating-bg">{p.background}</div>}
+      <div className="tf-floating-ui">
+        {p.top != null && <div className="tf-floating-top">{p.top}</div>}
+        {p.start != null && <div className="tf-floating-start">{p.start}</div>}
+        {p.end != null && <div className="tf-floating-end">{p.end}</div>}
+        {p.bottom != null && <div className="tf-floating-bottom">{p.bottom}</div>}
+      </div>
+      {p.children}
+    </div>
+  );
+}
+
+/**
+ * A calm, living background for glass UI: soft colour fields from the kit that drift slowly, or a
+ * photo or video under a scrim, or your own layer. Sits behind its container's content.
+ */
+export function Ambient(p: AmbientProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [paused, setPaused] = React.useState(false);
+  const animate = p.animate !== false && !p.src && !p.children;
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || !animate || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver((e) => setPaused(!e.some((x) => x.isIntersecting)));
+    io.observe(el);
+    return () => io.disconnect();
+  }, [animate]);
+  const vid = React.useRef<HTMLVideoElement>(null);
+  React.useEffect(() => {
+    const v = vid.current;
+    if (v && reduced(v)) v.pause();
+  }, [p.src]);
+  const colors = p.colors?.length
+    ? p.colors
+    : ["var(--ambient-1)", "var(--ambient-2)", "var(--ambient-3)", "var(--ambient-4)"];
+  const media = !!p.src && !p.children;
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      className={cx(
+        "tf-ambient",
+        p.fixed && "fixed",
+        media && "media",
+        !animate && "still",
+        p.className,
+      )}
+      style={p.style}
+      data-paused={paused ? "" : undefined}
+    >
+      {p.children ??
+        (media ? (
+          p.video ? (
+            <video
+              ref={vid}
+              className="tf-ambient-media"
+              src={p.src}
+              muted
+              loop
+              autoPlay
+              playsInline
+            />
+          ) : (
+            <img className="tf-ambient-media" src={p.src} alt="" />
+          )
+        ) : (
+          colors.map((c, i) => (
+            <span
+              key={i}
+              className="tf-ambient-field"
+              style={{ "--field": c } as React.CSSProperties}
+            />
+          ))
+        ))}
+    </div>
+  );
+}
+
 /** Example navigation shown when `nav` is not given. */
 export const NAV = (): NavItem[] => [
   {
@@ -215,7 +314,7 @@ const DOCK = (): DockItem[] => [
 
 export function AppShell(p: AppShellProps) {
   return (
-    <div className="tf-shell" style={p.style}>
+    <div className={cx("tf-shell", p.className)} style={p.style}>
       <TopBar
         brand={p.brand}
         tag={p.tag}