@efolusi/meridian 1.5.0

package/feedback/Dialog.d.ts

@@ -0,0 +1,13 @@
+export interface DialogProps {
+  open: boolean;
+  /** Called on ✕, ESC, or overlay click; omit to hide ✕ */
+  onClose?: () => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Right-aligned action row on sunken strip */
+  footer?: React.ReactNode;
+  /** Max width px @default 440 */
+  width?: number;
+  children?: React.ReactNode;
+}
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;

package/feedback/Dialog.js

@@ -0,0 +1,107 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-dialog__overlay{position:fixed;inset:0;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center;padding:24px;z-index:var(--z-overlay);animation:ef-fade var(--dur-med) var(--ease-out)}
+.ef-dialog{width:100%;max-width:440px;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);animation:ef-pop var(--dur-slow) var(--ease-spring);overflow:hidden}
+.ef-dialog:focus{outline:none}
+.ef-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 0}
+.ef-dialog__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
+.ef-dialog__desc{font-size:var(--text-md);color:var(--text-secondary);margin-top:6px}
+.ef-dialog__body{padding:16px 24px 24px}
+.ef-dialog__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;background:var(--surface-subtle);border-top:1px solid var(--border-default)}
+@keyframes ef-fade{from{opacity:0}}
+@keyframes ef-pop{from{opacity:0;transform:scale(.94) translateY(8px)}}
+`;
+const FOCUSABLE = 'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])';
+export const Dialog = /*#__PURE__*/React.forwardRef(function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  width = 440,
+  children,
+  ...rest
+}, ref) {
+  injectEfCss('ef-css-dialog', CSS);
+  const panelRef = React.useRef(null);
+  const prevFocus = React.useRef(null);
+  const titleId = React.useId();
+  const descId = React.useId();
+  React.useEffect(() => {
+    if (!open) return;
+    prevFocus.current = document.activeElement;
+    const panel = panelRef.current;
+    const first = panel && panel.querySelector(FOCUSABLE);
+    (first || panel).focus();
+    return () => {
+      if (prevFocus.current && prevFocus.current.focus) prevFocus.current.focus();
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = e => {
+      if (e.key === 'Escape') {
+        if (onClose) onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const panel = panelRef.current;
+      const f = panel ? Array.from(panel.querySelectorAll(FOCUSABLE)).filter(el => !el.disabled) : [];
+      if (!f.length) {
+        e.preventDefault();
+        return;
+      }
+      const i = f.indexOf(document.activeElement);
+      if (e.shiftKey && i <= 0) {
+        e.preventDefault();
+        f[f.length - 1].focus();
+      } else if (!e.shiftKey && (i === -1 || i === f.length - 1)) {
+        e.preventDefault();
+        f[0].focus();
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    className: "ef-dialog__overlay",
+    onMouseDown: e => {
+      if (e.target === e.currentTarget && onClose) onClose();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-dialog",
+    role: "dialog",
+    "aria-modal": "true",
+    ref: panelRef,
+    tabIndex: -1,
+    "aria-labelledby": title ? titleId : undefined,
+    "aria-describedby": description ? descId : undefined,
+    style: {
+      maxWidth: width
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-dialog__head"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-dialog__title",
+    id: titleId
+  }, title), description ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-dialog__desc",
+    id: descId
+  }, description) : null), onClose ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "x",
+    label: "Close",
+    size: "sm",
+    onClick: onClose
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: "ef-dialog__body"
+  }, children), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-dialog__foot"
+  }, footer) : null));
+});

package/feedback/Loader.d.ts

@@ -0,0 +1,12 @@
+export interface LoaderProps {
+  /** 'pulse' | 'shimmer' */
+  variant?: 'pulse' | 'shimmer';
+  /** Trailing animated ellipsis */
+  dots?: boolean;
+  /** Cycle duration in seconds */
+  duration?: number;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Loader(props: LoaderProps): React.JSX.Element;

package/feedback/Loader.js

@@ -0,0 +1,41 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-loader{display:inline-flex;align-items:baseline;font-family:var(--font-sans);font-size:13.5px;color:var(--text-muted)}
+.ef-loader--pulse{animation:ef-loader-pulse var(--ef-loader-dur,1.4s) ease-in-out infinite both}
+@keyframes ef-loader-pulse{0%,100%{opacity:.4}50%{opacity:1}}
+.ef-loader--shimmer{background:linear-gradient(90deg,color-mix(in oklab,currentColor 40%,transparent) 0%,color-mix(in oklab,currentColor 40%,transparent) 35%,currentColor 50%,color-mix(in oklab,currentColor 40%,transparent) 65%,color-mix(in oklab,currentColor 40%,transparent) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ef-loader-shimmer var(--ef-loader-dur,2.2s) linear infinite}
+@keyframes ef-loader-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
+.ef-loader__dots{margin-left:2px;display:inline-flex;-webkit-text-fill-color:currentColor}
+.ef-loader__dots span{animation:ef-loader-dot var(--ef-loader-dur,1.4s) ease-in-out infinite both}
+.ef-loader__dots span:nth-child(2){animation-delay:calc(var(--ef-loader-dur,1.4s)*.14)}
+.ef-loader__dots span:nth-child(3){animation-delay:calc(var(--ef-loader-dur,1.4s)*.28)}
+@keyframes ef-loader-dot{0%,80%,100%{opacity:0}40%{opacity:1}}
+`;
+export function Loader({
+  variant = 'pulse',
+  dots,
+  duration,
+  children = 'Thinking',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-loader', CSS);
+  const vars = duration ? {
+    '--ef-loader-dur': duration + 's'
+  } : null;
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    role: "status",
+    "aria-label": typeof children === 'string' ? children : 'Loading',
+    className: `ef-loader ef-loader--${variant}${className ? ' ' + className : ''}`,
+    style: {
+      ...vars,
+      ...style
+    }
+  }), children, dots ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-loader__dots",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("span", null, "."), /*#__PURE__*/React.createElement("span", null, "."), /*#__PURE__*/React.createElement("span", null, ".")) : null);
+}

package/feedback/Progress.d.ts

@@ -0,0 +1,15 @@
+export interface ProgressProps {
+  /** @default 0 */
+  value?: number;
+  /** @default 100 */
+  max?: number;
+  label?: string;
+  /** Show value right of the label (default = percent) */
+  showValue?: boolean;
+  format?: (value: number, max: number) => string;
+  /** @default 'default' (ink) */
+  tone?: 'default' | 'warning' | 'danger';
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Progress(props: ProgressProps): React.JSX.Element;

package/feedback/Progress.js

@@ -0,0 +1,48 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-progress{display:flex;flex-direction:column;gap:6px}
+.ef-progress__head{display:flex;justify-content:space-between;align-items:baseline}
+.ef-progress__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-primary)}
+.ef-progress__val{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
+.ef-progress__track{height:4px;border-radius:var(--radius-full);background:var(--sand-200);overflow:hidden}
+.ef-progress__fill{height:100%;border-radius:var(--radius-full);background:var(--accent);transition:width var(--dur-slow) var(--ease-out)}
+.ef-progress--warning .ef-progress__fill{background:var(--warning-600)}
+.ef-progress--danger .ef-progress__fill{background:var(--danger-600)}
+`;
+export function Progress({
+  value = 0,
+  max = 100,
+  label,
+  showValue,
+  format,
+  tone = 'default',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-progress', CSS);
+  const pct = Math.min(100, Math.max(0, value / max * 100));
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-progress ef-progress--${tone}${className ? ' ' + className : ''}`,
+    style: style,
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": max
+  }), (label || showValue) && /*#__PURE__*/React.createElement("div", {
+    className: "ef-progress__head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-progress__label"
+  }, label), showValue ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-progress__val"
+  }, format ? format(value, max) : Math.round(pct) + '%') : null), /*#__PURE__*/React.createElement("div", {
+    className: "ef-progress__track"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-progress__fill",
+    style: {
+      width: pct + '%'
+    }
+  })));
+}

package/feedback/Spinner.d.ts

@@ -0,0 +1,9 @@
+export interface SpinnerProps {
+  /** Px @default 16 */
+  size?: number;
+  /** Optional text right of the spinner (also the aria-label) */
+  label?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Spinner(props: SpinnerProps): React.JSX.Element;

package/feedback/Spinner.js

@@ -0,0 +1,38 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+@keyframes ef-spinner{to{transform:rotate(360deg)}}
+.ef-spinner{display:inline-flex;color:var(--text-muted);animation:ef-spinner .7s linear infinite}
+`;
+export function Spinner({
+  size = 16,
+  label,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-spinner', CSS);
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    role: "status",
+    "aria-label": label || 'Loading',
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 8,
+      ...style
+    },
+    className: className
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-spinner"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "loader-circle",
+    size: size
+  })), label ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 'var(--text-sm)',
+      color: 'var(--text-muted)'
+    }
+  }, label) : null);
+}

package/feedback/Toast.d.ts

@@ -0,0 +1,70 @@
+export interface ToastProps {
+  /** @default 'info' */
+  tone?: 'info' | 'success' | 'warning' | 'danger';
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  actionLabel?: string;
+  onAction?: () => void;
+  /** Shows a dismiss ✕ */
+  onClose?: () => void;
+  /**
+   * Live-region role. Inside a `Toaster` the stack owns the live region and each
+   * toast renders with `null`, so a queue announces once rather than as N
+   * competing regions. @default 'status'
+   */
+  role?: 'status' | 'alert' | null;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Toast(props: ToastProps): React.JSX.Element;
+
+export interface ToastStackProps {
+  /** Toasts, stacked fixed bottom-right */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ToastStack(props: ToastStackProps): React.JSX.Element;
+
+export interface ToastOptions {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** @default 'info' */
+  tone?: 'info' | 'success' | 'warning' | 'danger';
+  actionLabel?: string;
+  onAction?: () => void;
+  /**
+   * ms before auto-dismiss; 0 never dismisses.
+   * @default the Toaster's `duration`, or 0 when `actionLabel` is set — a
+   * control must not vanish on a timer the user cannot adjust (WCAG 2.2.1).
+   */
+  duration?: number;
+}
+export interface ToastApi {
+  /** Queue a toast; returns its id. */
+  notify: (options: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+export interface ToasterProps {
+  /** ms before a toast auto-dismisses; 0 never. @default 5000 */
+  duration?: number;
+  /** aria-label of the live region. @default 'Notifications' */
+  label?: string;
+  /** Your app. Toaster renders a Fragment, never a wrapper element. */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+/**
+ * Owns the toast queue: ids, timers, the live region and the portal. Timers
+ * pause while the stack is hovered or focused.
+ *
+ * The hook is published as a static — `Toaster.useToast()` — because only
+ * capitalised exports reach the global namespace.
+ */
+export declare function Toaster(props: ToasterProps): React.JSX.Element;
+export declare namespace Toaster {
+  /** Must be called inside a `<Toaster>`; throws otherwise. */
+  function useToast(): ToastApi;
+}

package/feedback/Toast.js

@@ -0,0 +1,216 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss } from "../forms/Button.js";
+import { Portal } from "../overlay/Portal.js";
+const CSS = `
+.ef-toast{display:flex;align-items:flex-start;gap:10px;width:360px;max-width:100%;padding:12px 14px;background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:ef-toast-in var(--dur-slow) var(--ease-spring)}
+.ef-toast__icon{display:inline-flex;margin-top:1px}
+.ef-toast--success .ef-toast__icon{color:#7FD08D}
+.ef-toast--danger .ef-toast__icon{color:#F49B93}
+.ef-toast--warning .ef-toast__icon{color:#F2C078}
+.ef-toast--info .ef-toast__icon{color:#EFCFAC}
+.ef-toast__title{font-size:var(--text-md);font-weight:var(--weight-semibold);line-height:1.35}
+.ef-toast__desc{font-size:var(--text-sm);color:var(--text-inverse);opacity:.75;margin-top:2px;line-height:1.4}
+.ef-toast__action{margin-top:8px;background:none;border:none;padding:0;color:var(--peach-200);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer}
+.ef-toast__action:hover{color:var(--cream-50);text-decoration:underline}
+.ef-toast .ef-iconbtn{color:rgba(250,249,246,.6)}
+.ef-toast .ef-iconbtn:hover:not(:disabled){background:color-mix(in srgb,var(--text-inverse) 12%,transparent);color:var(--text-inverse)}
+.ef-toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:var(--z-toast)}
+[data-theme="dark"] .ef-toast--success .ef-toast__icon{color:var(--success-600)}
+[data-theme="dark"] .ef-toast--danger .ef-toast__icon{color:var(--danger-600)}
+[data-theme="dark"] .ef-toast--warning .ef-toast__icon{color:var(--warning-600)}
+[data-theme="dark"] .ef-toast--info .ef-toast__icon{color:var(--brand-600)}
+[data-theme="dark"] .ef-toast__action{color:var(--brand-700)}
+[data-theme="dark"] .ef-toast .ef-iconbtn{color:rgba(30,26,20,.55)}
+@keyframes ef-toast-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
+`;
+const ICONS = {
+  success: 'circle-check',
+  danger: 'circle-alert',
+  warning: 'triangle-alert',
+  info: 'info'
+};
+export function Toast({
+  tone = 'info',
+  title,
+  description,
+  actionLabel,
+  onAction,
+  onClose,
+  role = 'status',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-toast', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-toast ef-toast--${tone}${className ? ' ' + className : ''}`,
+    role: role || undefined,
+    style: style
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-toast__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: ICONS[tone] || 'info',
+    size: 18
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-toast__title"
+  }, title), description ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-toast__desc"
+  }, description) : null, actionLabel ? /*#__PURE__*/React.createElement("button", {
+    className: "ef-toast__action",
+    onClick: onAction
+  }, actionLabel) : null), onClose ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "x",
+    label: "Dismiss",
+    size: "sm",
+    onClick: onClose
+  }) : null);
+}
+export function ToastStack({
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-toast', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-toast-stack${className ? ' ' + className : ''}`,
+    style: style
+  }), children);
+}
+const ToastCtx = /*#__PURE__*/React.createContext(null);
+
+/**
+ * The toast queue API: notify, dismiss, dismissAll.
+ *
+ * Lowercase, so the compiler files it under unexposedExports and it never
+ * reaches the global namespace directly. Consumers get it as `Toaster.useToast`
+ * (assigned at the bottom of this file), which is the one sanctioned way to
+ * publish a hook when only capitalised exports are exposed.
+ *
+ * Throws outside a <Toaster> rather than degrading to a no-op: a notification
+ * that silently never appears is the harder bug to find.
+ */
+export function useToast() {
+  const ctx = React.useContext(ToastCtx);
+  if (!ctx) throw new Error('useToast must be called inside a <Toaster>');
+  return ctx;
+}
+
+/**
+ * Owns the toast queue: ids, timers, the live region, and the portal.
+ *
+ * Renders a Fragment around your app plus one portaled stack, so it can sit at
+ * the root without introducing a wrapper element.
+ */
+export function Toaster({
+  duration = 5000,
+  label = 'Notifications',
+  children,
+  ...rest
+}) {
+  injectEfCss('ef-css-toast', CSS);
+  const uid = React.useId();
+  const seq = React.useRef(0);
+  const [toasts, setToasts] = React.useState([]);
+  const timers = React.useRef(new Map());
+  const dismiss = React.useCallback(id => {
+    const rec = timers.current.get(id);
+    if (rec && rec.handle) clearTimeout(rec.handle);
+    timers.current.delete(id);
+    setToasts(list => list.filter(x => x.id !== id));
+  }, []);
+  const arm = React.useCallback((id, ms) => {
+    const rec = {
+      remaining: ms,
+      startedAt: Date.now(),
+      handle: null
+    };
+    rec.handle = setTimeout(() => dismiss(id), ms);
+    timers.current.set(id, rec);
+  }, [dismiss]);
+  const notify = React.useCallback(options => {
+    const id = uid + seq.current++;
+    const {
+      duration: own,
+      ...props
+    } = options || {};
+    // A toast carrying an action must not time out: WCAG 2.2.1 does not allow a
+    // control to disappear on a timer the user cannot adjust.
+    const ms = own != null ? own : props.actionLabel ? 0 : duration;
+    setToasts(list => [...list, {
+      id,
+      props
+    }]);
+    if (ms > 0) arm(id, ms);
+    return id;
+  }, [uid, duration, arm]);
+  const dismissAll = React.useCallback(() => {
+    timers.current.forEach(rec => {
+      if (rec.handle) clearTimeout(rec.handle);
+    });
+    timers.current.clear();
+    setToasts([]);
+  }, []);
+  React.useEffect(() => () => {
+    timers.current.forEach(rec => {
+      if (rec.handle) clearTimeout(rec.handle);
+    });
+    timers.current.clear();
+  }, []);
+
+  // Hovering or focusing the stack holds every pending timer, so a slow reader
+  // or a keyboard user can actually reach the action inside a toast.
+  const pause = () => {
+    timers.current.forEach(rec => {
+      if (!rec.handle) return;
+      clearTimeout(rec.handle);
+      rec.remaining = Math.max(0, rec.remaining - (Date.now() - rec.startedAt));
+      rec.handle = null;
+    });
+  };
+  const resume = () => {
+    // A toast whose time ran out while paused must go on unpause, not become
+    // permanent. Collect them first: dismiss() mutates the map being iterated.
+    const expired = [];
+    timers.current.forEach((rec, id) => {
+      if (rec.handle) return;
+      if (rec.remaining <= 0) {
+        expired.push(id);
+        return;
+      }
+      rec.startedAt = Date.now();
+      rec.handle = setTimeout(() => dismiss(id), rec.remaining);
+    });
+    expired.forEach(dismiss);
+  };
+  const api = React.useMemo(() => ({
+    notify,
+    dismiss,
+    dismissAll
+  }), [notify, dismiss, dismissAll]);
+  return /*#__PURE__*/React.createElement(ToastCtx.Provider, {
+    value: api
+  }, children, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ToastStack, _extends({}, rest, {
+    "aria-label": label,
+    role: "log",
+    "aria-live": "polite",
+    "aria-relevant": "additions",
+    onMouseEnter: pause,
+    onMouseLeave: resume,
+    onFocusCapture: pause,
+    onBlurCapture: resume
+  }), toasts.map(t => /*#__PURE__*/React.createElement(Toast, _extends({
+    key: t.id
+  }, t.props, {
+    role: null,
+    onClose: () => dismiss(t.id)
+  }))))));
+}
+Toaster.useToast = useToast;

package/feedback/Tooltip.d.ts

@@ -0,0 +1,12 @@
+export interface TooltipProps {
+  label: React.ReactNode;
+  /** Preferred side; flips automatically when there is no room. @default 'top' */
+  position?: 'top' | 'bottom';
+  /** Hover delay in ms before showing. Focus always shows immediately. @default 200 */
+  delay?: number;
+  /** The trigger element */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Tooltip(props: TooltipProps): React.JSX.Element;

package/feedback/Tooltip.js

@@ -0,0 +1,86 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Portal, useAnchoredStyle } from "../overlay/Portal.js";
+const CSS = `
+.ef-tooltip{position:relative;display:inline-flex}
+.ef-tooltip__bubble{position:fixed;background:var(--surface-inverse);color:var(--text-inverse);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1.35;padding:5px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:var(--z-tooltip);animation:ef-tooltip-in var(--dur-fast) var(--ease-out)}
+.ef-tooltip__bubble::after{content:'';position:absolute;top:100%;left:var(--ef-tt-arrow,50%);transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--surface-inverse)}
+.ef-tooltip__bubble--bottom::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--surface-inverse)}
+@keyframes ef-tooltip-in{from{opacity:0}to{opacity:1}}
+`;
+export function Tooltip({
+  label,
+  position = 'top',
+  delay = 200,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-tooltip', CSS);
+  const id = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  const bubbleRef = React.useRef(null);
+  const timer = React.useRef(null);
+  const {
+    style: anchored,
+    side
+  } = useAnchoredStyle(ref, bubbleRef, {
+    open,
+    placement: position === 'bottom' ? 'bottom' : 'top',
+    align: 'center',
+    offset: 8
+  });
+
+  // Keep the arrow over the trigger's centre even when the bubble has been
+  // shifted to stay on screen, so it never points at empty space.
+  const [arrowX, setArrowX] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (!open || !ref.current || !bubbleRef.current) {
+      setArrowX(null);
+      return;
+    }
+    const a = ref.current.getBoundingClientRect();
+    const b = bubbleRef.current.getBoundingClientRect();
+    if (!b.width) return;
+    const x = a.left + a.width / 2 - b.left;
+    setArrowX(Math.max(8, Math.min(x, b.width - 8)));
+  }, [open, anchored.left, anchored.top]);
+  const show = immediate => {
+    clearTimeout(timer.current);
+    if (immediate) setOpen(true);else timer.current = setTimeout(() => setOpen(true), delay);
+  };
+  const hide = () => {
+    clearTimeout(timer.current);
+    setOpen(false);
+  };
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const child = React.Children.count(children) === 1 && /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
+    'aria-describedby': open ? id : undefined
+  }) : children;
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: ref,
+    className: `ef-tooltip${className ? ' ' + className : ''}`,
+    style: style,
+    onMouseEnter: () => show(false),
+    onMouseLeave: hide,
+    onFocus: () => show(true),
+    onBlur: hide,
+    onKeyDown: e => {
+      if (e.key === 'Escape') hide();
+    }
+  }), child, open ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("span", {
+    ref: bubbleRef,
+    role: "tooltip",
+    id: id,
+    className: `ef-tooltip__bubble${side === 'bottom' ? ' ef-tooltip__bubble--bottom' : ''}`,
+    style: {
+      ...anchored,
+      ...(arrowX == null ? null : {
+        '--ef-tt-arrow': arrowX + 'px'
+      })
+    }
+  }, label)) : null);
+}