@zyncat/ui 0.8.0

package/src/components/composites/tabs/tabs.css

@@ -0,0 +1,208 @@
+/* tabs.css - line tabs for VIEW SWITCHING (overview / activity / settings), sitting on a
+   hairline baseline. NOT a form control: pick Segmented control for 2-3 filter options.
+
+   Anatomy:  .tabs > .tabs__list[role=tablist] > .tab__hover? + .tab* + .tabs__ink
+             .tab > .tab__pad ( Icon? + .tab__label + .tab__count? )
+   States:   :hover - :active - :focus-visible - :disabled - .is-selected
+
+   Two motions, both driven from Tabs.tsx - nothing here transitions them:
+   - the ink ("reaches, then releases"): one persistent node; the edge facing the
+     destination travels first, then the trailing edge settles. animate() keyframes on
+     x + measured width (destination width is unknowable to transforms; scaleX would
+     distort the radius).
+   - the gliding hover: one persistent pill (../motion/glide) that fades in under the
+     first tab touched, springs between pads, and fades out where it rests on leave.
+   Label color, icon weight and press dip remain trivial-tier CSS. */
+
+/* -- Shell - owns the full-width baseline ----------------------------------
+   The hairline is a ::after on the shell (not a border on the scroller) so it
+   spans edge-to-edge while the scroller above it clips, masks and scrolls
+   freely. The scroller gets z-index:1 so the ink paints OVER the hairline. */
+.tabs {
+  position: relative;
+}
+.tabs::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--border-hairline);
+  background: var(--border-default);
+}
+
+/* -- Scroller - the tablist ------------------------------------------------
+   Overflow is honest: the row scrolls (scrollbar hidden) and the clipped edge
+   fades out via a mask. The fade lengths are two custom props flipped by
+   data-fade (set from scroll geometry in Tabs.jsx) - at 0px the mask is fully
+   opaque, i.e. a no-op. Negative margin + matching padding align the first
+   label flush with the container edge while the hover pill still has room. */
+.tabs__list {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: var(--space-1);
+  overflow-x: auto;
+  scrollbar-width: none;
+  margin-inline: calc(var(--space-2) * -1);
+  padding-inline: var(--space-2);
+
+  --tabs-fade-start: 0px;
+  --tabs-fade-end: 0px;
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black var(--tabs-fade-start),
+    black calc(100% - var(--tabs-fade-end)),
+    transparent
+  );
+}
+.tabs__list::-webkit-scrollbar {
+  display: none;
+}
+.tabs__list[data-fade~='start'] {
+  --tabs-fade-start: var(--space-8);
+}
+.tabs__list[data-fade~='end'] {
+  --tabs-fade-end: var(--space-8);
+}
+
+/* -- Tab - the hit target --------------------------------------------------
+   The button is pill + a bottom gap down to the baseline (total height 36px).
+   All visual feedback lives on the inner pill so hover/press/focus read as a
+   soft inset shape, while the ink below stays anchored to the baseline. */
+.tab {
+  appearance: none;
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0 0 var(--space-2);
+  flex: none;
+  display: block;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.tab:focus-visible {
+  outline: none;
+}
+
+.tab__pad {
+  position: relative; /* positioned so every pad paints above the shared glide
+                             pill (z-index 0, first child of the list) */
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--control-height-sm); /* 28 */
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-md);
+  font: var(--type-micro);
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--text-subtle);
+  transition:
+    var(--transition-control),
+    transform var(--duration-fast) var(--ease-standard);
+}
+.tab__pad .icon {
+  display: inline-flex;
+}
+
+/* States - hover strengthens the label (the shared glide pill supplies the
+   background), press dips 1px on a darker fill (tactile, like Button), focus
+   is the composed accent ring, selection is text-strong + the ink. */
+.tab:hover:not(:disabled) .tab__pad {
+  color: var(--text-body);
+}
+.tab:active:not(:disabled) .tab__pad {
+  background: var(--neutral-wash-press);
+  transform: translateY(var(--space-px));
+}
+.tab.is-selected .tab__pad,
+.tab.is-selected:hover:not(:disabled) .tab__pad {
+  color: var(--text-strong);
+}
+.tab:focus-visible .tab__pad {
+  box-shadow: var(--ring-accent);
+}
+.tab:disabled {
+  cursor: not-allowed;
+}
+.tab:disabled .tab__pad {
+  color: var(--text-disabled);
+}
+
+/* -- Count - always mono, always tabular -----------------------------------*/
+.tab__count {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  background: var(--bg-muted);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  transition: var(--transition-colors);
+}
+.tab.is-selected .tab__count {
+  color: var(--text-accent);
+  background: var(--accent-wash);
+}
+.tab:disabled .tab__count {
+  color: var(--text-disabled);
+  background: var(--bg-subtle);
+}
+
+/* -- The gliding hover ------------------------------------------------------
+   One persistent pill, first child of the scroller (../motion/glide writes
+   x/y/width/height/opacity inline; coordinates include scrollLeft, so it
+   scrolls with its tab). z-index 0 + DOM order keep it under every tab's
+   positioned pad in both travel directions. Nothing transitions here. */
+.tab__hover {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+
+/* -- The ink ---------------------------------------------------------------
+   Positioned in the scroller's layout coordinates (offsetLeft space), so it
+   scrolls WITH its tab. Motion writes transform + width at runtime; resting
+   geometry is set the same way, so there is nothing to transition here.
+   EXCEPTION (intentional, mirrors RadioGroup's dot dims): 2px ink height is a
+   bespoke control dim - elevation.css reserves 2px for selected emphasis, but
+   ships no width token for it (--border-emphasis is 1.5px, which renders as
+   sub-pixel fuzz on 1x screens). Do not "fix" it to a token. */
+.tabs__ink {
+  --tabs-ink-h: 2px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: var(--tabs-ink-h);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  pointer-events: none;
+  will-change: transform, width;
+}
+
+/* -- Panel -----------------------------------------------------------------
+   The panel ROOT is static chrome - borders, padding, background put on it
+   by the consumer never move. Only .tab-panel__inner (the content) enters
+   from the direction of travel (Motion, TabPanel). The root is focusable per
+   the APG (tabindex=0) so keyboard users land on content right after the
+   tablist; the ring shows only for keyboard focus. */
+.tab-panel {
+  outline: none;
+  overflow: hidden;
+}
+.tab-panel:focus-visible {
+  box-shadow: var(--ring-accent);
+  border-radius: var(--radius-md);
+}
+.tab-panel__inner {
+  will-change: transform, opacity;
+}

package/src/components/composites/toast/Toast.tsx

@@ -0,0 +1,380 @@
+'use client';
+
+import './toast.css';
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type CSSProperties,
+  type FocusEvent as ReactFocusEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { animate, startDrag, type Layer, type Playback } from '../../../engine';
+import { Presence } from '../../../motion/presence';
+import { Motion } from '../../../motion/element';
+import { UIMotion } from '../../../tokens/motion-tokens';
+import { fireGlint } from '../../internal/glass/glint';
+import { tokenPx } from '../../internal/utils/token-px';
+import { Icon, type IconName } from '../../internal/icon/Icon';
+import { Button } from '../../primitives/button/Button';
+import { UIToast, DEFAULT_TOASTER_CONFIG, type ToastRecord, type ToastTone, type ToasterConfig } from './toast-store';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+const SM = UIMotion;
+const store = UIToast;
+
+const COLLAPSE_GRACE = 140;
+const SWIPE_X = 64;
+const SWIPE_V = 480;
+
+let GAP = 0;
+function stackGap() {
+  if (!GAP) GAP = tokenPx('--space-3') || 12;
+  return GAP;
+}
+
+const TONE_ICON: Partial<Record<ToastTone, IconName>> = {
+  success: 'check-circle',
+  danger: 'warning-circle',
+  warning: 'warning',
+  info: 'info',
+};
+
+function useToneGesture(tone: ToastTone, ref: RefObject<HTMLElement>) {
+  const prevTone = useRef<ToastTone | null>(null);
+  useEffect(() => {
+    const prev = prevTone.current;
+    prevTone.current = tone;
+    if (tone === prev) return;
+    if (tone === 'success') return fireGlint(ref.current);
+    if (tone === 'danger' && ref.current) {
+      const shake = ref.current.firstElementChild as HTMLElement | null;
+      if (!shake) return;
+      const fall = animate(shake, {
+        x: [0, -7, 5, -2, 0],
+        timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base },
+      });
+      fall.finished.then(() => fall.stop());
+      return () => fall.stop();
+    }
+  }, [tone]);
+}
+
+function useReplay<T extends HTMLElement>(token: unknown, build: () => Layer[]) {
+  const ref = useRef<T>(null);
+  const latest = useRef(build);
+  latest.current = build;
+  useLayoutEffect(() => {
+    if (ref.current) animate(ref.current, ...latest.current());
+  }, [token]);
+  return ref;
+}
+
+function ToastItem({
+  t,
+  depth,
+  offset,
+  hidden,
+  behind,
+  frameHeight,
+  isTop,
+  onHeight,
+}: {
+  t: ToastRecord;
+  depth: number;
+  offset: number;
+  hidden: boolean;
+  behind: boolean;
+  frameHeight: number | null;
+  isTop: boolean;
+  onHeight: (id: string, h: number) => void;
+}) {
+  const ref = useRef<HTMLLIElement>(null);
+  const settled = useRef(false);
+  const swipeBack = useRef<Playback | null>(null);
+  useToneGesture(t.tone, ref);
+
+  useLayoutEffect(() => {
+    if (ref.current && ref.current.firstElementChild)
+      onHeight(t.id, (ref.current.firstElementChild as HTMLElement).offsetHeight);
+  });
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.pointerEvents = hidden ? 'none' : 'auto';
+    const y = isTop ? offset : -offset;
+    const scale = 1 - depth * 0.05;
+    if (settled.current) {
+      animate(
+        el,
+        { y: [y], scale: [scale], height: [frameHeight ?? 'auto'], timing: SM.t.settle },
+        { opacity: [hidden ? 0 : 1], timing: SM.t.enter },
+      );
+      return;
+    }
+    settled.current = true;
+    animate(
+      el,
+      { y: [isTop ? -24 : 24, y], scale: [0.97, scale], timing: SM.t.settle },
+      { opacity: [0, hidden ? 0 : 1], timing: SM.t.enter },
+    );
+  }, [offset, depth, hidden, frameHeight, isTop]);
+
+  const onPointerDown = (e: ReactPointerEvent) => {
+    const inner = ref.current?.firstElementChild as HTMLElement | null;
+    if (!t.dismissible || e.button !== 0 || !inner) return;
+    swipeBack.current?.stop();
+    startDrag(e, {
+      onMove: (info) => {
+        const dx = info.offset.x;
+        inner.style.translate = `${dx > 0 ? dx * 0.9 : dx * 0.04}px 0px`;
+      },
+      onEnd: (info) => {
+        if (info.offset.x > SWIPE_X || info.velocity.x > SWIPE_V) {
+          animate(inner, { x: [420], timing: SM.t.exit }).finished.then(() => store.dismiss(t.id));
+          return;
+        }
+        const back = animate(inner, { x: [0], timing: SM.t.settle });
+        swipeBack.current = back;
+        back.finished.then(() => back.stop());
+      },
+    });
+  };
+
+  return (
+    <Motion
+      as="li"
+      ref={ref}
+      exit={{ opacity: [0], scale: [0.96], timing: SM.t.exit }}
+      className="toast glass"
+      data-tone={t.tone}
+      data-behind={behind ? '' : undefined}
+      role={t.tone === 'danger' ? 'alert' : 'status'}
+      aria-atomic="true"
+      onPointerDown={onPointerDown}
+      onKeyDown={(e: ReactKeyboardEvent) => {
+        if (e.key === 'Escape' && t.dismissible) store.dismiss(t.id);
+      }}
+    >
+      {t.node ? <div className="toast__custom">{t.node as ReactNode}</div> : <ToastBody t={t} />}
+    </Motion>
+  );
+}
+
+function ToastBody({ t }: { t: ToastRecord }) {
+  const glyphRef = useReplay<HTMLSpanElement>(t.tone, () => [
+    { scale: [0.5, 1], timing: SM.t.settle },
+    { opacity: [0, 1], timing: SM.t.enter },
+  ]);
+  const textRef = useReplay<HTMLDivElement>(String(t.message) + '-' + String(t.description), () => [
+    { opacity: [0, 1], timing: SM.t.enter },
+  ]);
+  const countRef = useReplay<HTMLSpanElement>(t.count, () => [{ scale: [0.6, 1], timing: SM.t.settle }]);
+
+  return (
+    <div className="toast__inner">
+      {(t.tone !== 'default' || isFinite(t.duration)) && (
+        <span className="toast__icon">
+          {t.tone !== 'default' && (
+            <span ref={glyphRef} className="toast__icon-glyph">
+              {t.tone === 'loading' ? (
+                <span className="toast__spinner" aria-hidden="true"></span>
+              ) : (
+                <Icon name={TONE_ICON[t.tone] || 'info'} weight="fill" />
+              )}
+            </span>
+          )}
+          {isFinite(t.duration) && (
+            <svg key={'ring-' + t.timerKey} className="toast__ring" viewBox="0 0 36 36" aria-hidden="true">
+              <circle className="toast__ring-track" cx="18" cy="18" r="16.5"></circle>
+              <circle
+                className="toast__ring-arc"
+                cx="18"
+                cy="18"
+                r="16.5"
+                pathLength={1}
+                style={{ animationDuration: t.duration + 'ms' }}
+              ></circle>
+            </svg>
+          )}
+        </span>
+      )}
+      <div ref={textRef} className="toast__text">
+        <p className="toast__message">{t.message}</p>
+        {t.description != null && <p className="toast__desc">{t.description}</p>}
+      </div>
+      {t.count > 1 && (
+        <span ref={countRef} className="toast__count">
+          ×{t.count}
+        </span>
+      )}
+      {t.action && (
+        <Button
+          variant="secondary"
+          size="sm"
+          className="toast__action"
+          onClick={() => {
+            if (t.action.onClick) t.action.onClick();
+            store.dismiss(t.id);
+          }}
+        >
+          {t.action.label}
+        </Button>
+      )}
+      {t.dismissible && (
+        <button type="button" className="toast__close" aria-label="Dismiss" onClick={() => store.dismiss(t.id)}>
+          <Icon name="close" size="sm" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function ToastHost({ config, htmlProps }: { config: ToasterConfig; htmlProps?: HTMLAttributes<HTMLOListElement> }) {
+  const { toasts, paused, expanded: hoverExpanded } = useSyncExternalStore(store.subscribe, store.get, store.get);
+  const [heights, setHeights] = useState<Record<string, number>>({});
+  const [ready, setReady] = useState(false);
+  const collapseTimer = useRef<ReturnType<typeof setTimeout> | 0>(0);
+  const hovering = useRef(false);
+
+  useEffect(() => setReady(true), []);
+
+  const onHeight = (id: string, h: number) => setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h }));
+
+  const onHold = () => {
+    hovering.current = true;
+    clearTimeout(collapseTimer.current);
+    store.setExpanded(true);
+    store.pause();
+  };
+  const onRelease = (graced: boolean) => {
+    hovering.current = false;
+    clearTimeout(collapseTimer.current);
+    collapseTimer.current = setTimeout(
+      () => {
+        store.setExpanded(false);
+        store.resume();
+      },
+      graced ? COLLAPSE_GRACE : 0,
+    );
+  };
+
+  useEffect(() => {
+    const onVis = () => {
+      if (document.hidden) store.pause();
+      else if (!hovering.current) store.resume();
+    };
+    document.addEventListener('visibilitychange', onVis);
+    return () => document.removeEventListener('visibilitychange', onVis);
+  }, []);
+
+  useEffect(() => {
+    if (toasts.length === 0) {
+      hovering.current = false;
+      clearTimeout(collapseTimer.current);
+      store.setExpanded(false);
+      store.resume();
+    }
+  }, [toasts.length]);
+
+  if (!ready) return null;
+
+  const isTop = config.position.startsWith('top');
+  const visible = config.visibleToasts;
+  const rendered = visible * 2;
+  const gap = config.gap || stackGap();
+  const expanded = config.expand || hoverExpanded;
+
+  const slice = toasts.slice(-rendered);
+  const n = slice.length;
+  const frontH = n ? heights[slice[n - 1].id] || 0 : 0;
+
+  return createPortal(
+    <ol
+      {...htmlProps}
+      className={cx('toast-viewport', paused && 'is-paused', htmlProps?.className)}
+      data-position={config.position}
+      style={
+        config.offset
+          ? ({ ...htmlProps?.style, '--toast-offset': `${config.offset}px` } as CSSProperties)
+          : htmlProps?.style
+      }
+      aria-label="Notifications"
+      onPointerOver={(e: ReactPointerEvent<HTMLOListElement>) => {
+        if (e.pointerType !== 'touch') onHold();
+      }}
+      onPointerOut={(e: ReactPointerEvent<HTMLOListElement>) => {
+        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) onRelease(true);
+      }}
+      onFocus={onHold}
+      onBlur={(e: ReactFocusEvent<HTMLOListElement>) => {
+        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget as Node)) onRelease(false);
+      }}
+    >
+      <Presence>
+        {slice.map((t, i) => {
+          const depth = n - 1 - i;
+          let offset = depth * gap;
+          if (expanded) {
+            offset = 0;
+            for (let j = i + 1; j < n; j++) offset += (heights[slice[j].id] || 0) + gap;
+          }
+          return (
+            <ToastItem
+              key={t.id}
+              t={t}
+              depth={expanded ? 0 : depth}
+              offset={offset}
+              hidden={!expanded && depth >= visible}
+              behind={!expanded && depth > 0}
+              frameHeight={!expanded && depth > 0 && frontH ? frontH : null}
+              isTop={isTop}
+              onHeight={onHeight}
+            />
+          );
+        })}
+      </Presence>
+    </ol>,
+    document.body,
+  );
+}
+
+function stripUndefined<T extends object>(o: T): Partial<T> {
+  const out: Partial<T> = {};
+  (Object.keys(o) as (keyof T)[]).forEach((k) => {
+    if (o[k] !== undefined) out[k] = o[k];
+  });
+  return out;
+}
+
+export interface ToasterProps extends Partial<ToasterConfig> {
+  /** Standard <ol> attributes (className, style, data-*, ...) forwarded to the toast viewport. */
+  htmlProps?: HTMLAttributes<HTMLOListElement> & DataAttributes;
+}
+
+export function Toaster({ htmlProps, ...props }: ToasterProps): ReactElement {
+  const config: ToasterConfig = { ...DEFAULT_TOASTER_CONFIG, ...stripUndefined(props) };
+
+  useEffect(() => {
+    store.config = config;
+    store.mounted = true;
+    if (config.expand) store.setExpanded(true);
+    return () => {
+      store.mounted = false;
+    };
+  }, [config.position, config.duration, config.visibleToasts, config.gap, config.offset, config.expand]);
+
+  return <ToastHost config={config} htmlProps={htmlProps} />;
+}
+
+export { toast } from './toast-store';