zidane-ui 9.1.1 → 9.1.4

package/src/motion/provider.tsx

@@ -1,63 +0,0 @@
-/**
- * One motion policy for an app: writes the motion vars and switches on
- * `<html>` (`applyMotionVars`, motion/springs.ts) and wraps the tree in
- * motion.dev's `MotionConfig`, so JS and CSS animations follow the same
- * preference. Anything but `full` makes transform / layout values jump
- * (`reducedMotion: 'always'`); components that name no transition get the
- * `settle` curve.
- *
- * Pass `level` / `springs` when the app owns the preference (the desktop
- * app's Appearance settings): they are written to `html[data-motion]` /
- * `[data-springs]`. Omit them to follow those attributes as they are (a
- * site whose pre-paint script sets them from the OS): only the vars are
- * written, and rewritten when the attributes change.
- */
-import { MotionConfig } from 'motion/react';
-import { useLayoutEffect, type ReactNode } from 'react';
-
-import { useMotionLevel, type MotionLevel } from './reduced';
-import { applyMotionVars, DEFAULT_PANEL_MS, motionTransition, useSprings } from './springs';
-
-/** Props of {@link MotionProvider}. */
-export interface MotionProviderProps {
-  /** The motion level; default: follow `html[data-motion]`. */
-  level?: MotionLevel;
-  /** Spring animations; default: follow `html[data-springs]`. */
-  springs?: boolean;
-  /** The panel slider (ms): the `panel` spring's perceived duration. */
-  panelMs?: number;
-  /** The app tree to put under the motion policy. */
-  children: ReactNode;
-}
-
-/**
- * Applies one motion policy to an app: writes the motion variables and switches on `<html>`
- * and wraps the tree in motion.dev's `MotionConfig`, so JS and CSS animations follow the same
- * preference. Anything but `full` makes transform and layout values jump.
- *
- * @param props - See {@link MotionProviderProps}.
- */
-export function MotionProvider({ level, springs, panelMs = DEFAULT_PANEL_MS, children }: MotionProviderProps) {
-  const liveLevel = useMotionLevel();
-  const liveSprings = useSprings();
-  const owned = level !== undefined || springs !== undefined;
-  const resolvedLevel = level ?? liveLevel;
-  const resolvedSprings = springs ?? liveSprings;
-
-  useLayoutEffect(() => {
-    applyMotionVars(
-      document.documentElement,
-      { level: resolvedLevel, springs: resolvedSprings },
-      { panelMs, attributes: owned },
-    );
-  }, [resolvedLevel, resolvedSprings, panelMs, owned]);
-
-  return (
-    <MotionConfig
-      reducedMotion={resolvedLevel === 'full' ? 'never' : 'always'}
-      transition={motionTransition('settle', { level: resolvedLevel, springs: resolvedSprings })}
-    >
-      {children}
-    </MotionConfig>
-  );
-}

package/src/motion/reduced.ts

@@ -1,36 +0,0 @@
-/**
- * The motion level, read from `html[data-motion]`: the one contract every
- * app on the design system sets (the desktop app from its Appearance
- * setting, the website from `prefers-reduced-motion`) and the stylesheets
- * key on. JS-driven animation follows the same switch.
- */
-import { useSyncExternalStore } from 'react';
-
-/**
- * How much the UI animates: `off` is instant, `reduced` keeps only fades, `full` plays all motion.
- */
-export type MotionLevel = 'off' | 'reduced' | 'full';
-
-function read(): MotionLevel {
-  const v = document.documentElement.dataset.motion;
-  return v === 'off' || v === 'reduced' ? v : 'full';
-}
-
-function subscribe(onChange: () => void): () => void {
-  const observer = new MutationObserver(onChange);
-  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-motion'] });
-  return () => observer.disconnect();
-}
-
-/**
- * Returns the current {@link MotionLevel}, read from `html[data-motion]`. It updates when the
- * attribute changes and is `full` when the attribute is missing or on the server.
- */
-export function useMotionLevel(): MotionLevel {
-  return useSyncExternalStore(subscribe, read, () => 'full');
-}
-
-/** True for `off` and `reduced`: skip decorative JS-driven animation. */
-export function useReducedMotion(): boolean {
-  return useMotionLevel() !== 'full';
-}

package/src/motion/roll.tsx

@@ -1,131 +0,0 @@
-/**
- * Odometer text: changed characters roll up or down, unchanged ones hold.
- * Animation in styles/motion.css (`.zg-roll-*`: in on `settle` + `fade`, out
- * on `exit` + `fade-out`).
- */
-import { useEffect, useState, type CSSProperties } from 'react';
-
-import { readExitMs, readMotionMs } from './presence';
-import { useReducedMotion } from './reduced';
-
-/** How long one roll plays, read off the motion vars: the longer of the enter (`settle`, `fade`) and the exit. */
-export const readRollMs = (): number => Math.max(readMotionMs('settle'), readMotionMs('fade'), readExitMs());
-
-/**
- * Direction characters roll in {@link RollingText}: `up` when the value grows, `down` when it
- * shrinks.
- */
-export type RollDirection = 'up' | 'down';
-
-/**
- * Per-character diff for {@link RollingText}, aligned from the RIGHT so the
- * units stay in their column when the number grows a digit (`9.99k` →
- * `10.0k`). Each cell is the new character plus the one it replaces:
- * `null` when unchanged, `''` when the column is new.
- *
- * @param prev - The text before the change.
- * @param next - The text after the change.
- * @returns One cell per character of `next`.
- */
-export function rollCells(prev: string, next: string): { char: string; from: string | null }[] {
-  const shift = prev.length - next.length;
-  return [...next].map((char, i) => {
-    const old = i + shift >= 0 ? prev[i + shift]! : undefined;
-    if (old === char) return { char, from: null }; // unchanged: holds still
-    return { char, from: old ?? '' }; // '' = a new column: rolls in, nothing rolls out
-  });
-}
-
-/** Props for {@link RollingText}. */
-export interface RollingTextProps {
-  /** The formatted text to show. Characters that differ from the previous text roll. */
-  text: string;
-  /**
-   * The number behind `text`. When given, the roll goes down if it fell and up otherwise;
-   * without it, it always rolls up.
-   */
-  value?: number;
-  /** Extra classes on the wrapping element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Text whose changed characters roll like an odometer: up when the value
- * grows, down when it shrinks. Unchanged characters hold still, so a
- * counter ticking `3.51k` → `3.52k` moves one digit. The formatting stays
- * whatever the caller renders (`3.51k`, `$42.057`, `12s`); pass `value` so
- * the direction follows the number rather than the characters. Wrap in
- * {@link SmoothWidth} when the length can change.
- *
- * @param props - Component props.
- */
-export function RollingText({ text, value, className = '', style }: RollingTextProps) {
-  const reduced = useReducedMotion();
-  const [state, setState] = useState<{
-    text: string;
-    prev: string;
-    dir: RollDirection;
-    version: number;
-    /** The `value` that came with `text`: the next change rolls down when it is lower. */
-    value: number | undefined;
-  }>({
-    text,
-    prev: text,
-    dir: 'up',
-    version: 0,
-    value,
-  });
-
-  if (state.text !== text) {
-    // Derive during render (no flash of the new text without its animation).
-    const dir: RollDirection = value !== undefined && state.value !== undefined && value < state.value ? 'down' : 'up';
-    setState({ text, prev: state.text, dir, version: state.version + 1, value });
-  }
-
-  // Drop the rolling layers once the roll has played (the incoming cell
-  // re-renders plain, so this waits out the enter too, not just the exit).
-  useEffect(() => {
-    if (state.prev === state.text) return;
-    const settle = () => setState((s) => (s.version === state.version ? { ...s, prev: s.text } : s));
-    const ms = readRollMs();
-    if (ms <= 0) {
-      settle();
-      return;
-    }
-    const id = setTimeout(settle, ms);
-    return () => clearTimeout(id);
-  }, [state.version, state.prev, state.text]);
-
-  const animate = !reduced && state.prev !== state.text;
-  const cells = animate ? rollCells(state.prev, state.text) : [...state.text].map((char) => ({ char, from: null }));
-
-  return (
-    // One accessible value; the rolling cells are decoration.
-    <span className={`zg-roll ${className}`} style={style} data-dir={state.dir} role="img" aria-label={text}>
-      {cells.map((cell, i) => {
-        const key = `${cells.length - i}`; // right-aligned column identity
-        if (cell.from === null) {
-          return (
-            <span key={key} className="zg-roll-cell" aria-hidden>
-              <span>{cell.char}</span>
-            </span>
-          );
-        }
-        return (
-          <span key={key} className="zg-roll-cell" aria-hidden>
-            {cell.from !== '' && (
-              <span key={`o${state.version}`} className="zg-roll-out">
-                {cell.from}
-              </span>
-            )}
-            <span key={`i${state.version}`} className="zg-roll-in">
-              {cell.char}
-            </span>
-          </span>
-        );
-      })}
-    </span>
-  );
-}

package/src/motion/shimmer.ts

@@ -1,15 +0,0 @@
-/** Label shimmer (`.zg-shimmer` in styles/motion.css), on one shared phase. */
-
-/** One sweep of `.zg-shimmer`; must match its animation in styles/motion.css. */
-export const SHIMMER_MS = 1800;
-
-/**
- * Ref callback for a `.zg-shimmer` label: starts its sweep on a shared
- * phase (the page clock), so a label swapped in mid-sweep carries the band
- * on from where the outgoing one had it, instead of restarting it.
- *
- * @param el - The label element, or `null` when the ref detaches, which does nothing.
- */
-export function syncShimmer(el: HTMLElement | null): void {
-  if (el) el.style.animationDelay = `${-(performance.now() % SHIMMER_MS)}ms`;
-}

package/src/motion/size.tsx

@@ -1,192 +0,0 @@
-/**
- * Width that moves smoothly instead of jumping: `SmoothWidth` eases to its
- * content, `HeldWidth` holds a slot at its widest content until the mode
- * changes. Styles in styles/motion.css.
- */
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { readExitMs } from './presence';
-
-/** Props for {@link SmoothWidth}. */
-export interface SmoothWidthProps {
-  /** The content to size to. */
-  children: ReactNode;
-  /** Extra classes on the outer element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Animates its own width to its content's, so a chip that gains a segment
- * or a digit grows smoothly instead of jumping. The content is measured
- * with a ResizeObserver; the first size applies without a transition.
- *
- * @param props - Component props.
- */
-export function SmoothWidth({ children, className = '', style }: SmoothWidthProps) {
-  const inner = useRef<HTMLSpanElement>(null);
-  const [width, setWidth] = useState<number | null>(null);
-  useLayoutEffect(() => {
-    const el = inner.current;
-    if (!el) return undefined;
-    const measure = () => setWidth(el.offsetWidth);
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-  return (
-    <span className={`zg-smooth-width ${className}`} style={width === null ? style : { width, ...style }}>
-      <span ref={inner} className="zg-smooth-width-inner">
-        {children}
-      </span>
-    </span>
-  );
-}
-
-/**
- * A trailing slot's width, held steady: it grows (easing) as soon as its
- * content needs more room, and never shrinks while `holdKey` stays the
- * same, so a label that changes every half second (`Thinking`, `Ran bun
- * test`, `Thinking`) doesn't make what sits beside it breathe. When
- * `holdKey` changes (a run ends, a session starts needing you), it eases
- * to the new content's width once the outgoing content has faded
- * (`readExitMs()`, at once with motion off). Content sits against the right
- * edge: what grows into view is revealed from the left.
- */
-/*
- * Measurement, batched. Reading a slot's uncapped width means writing its
- * styles, reading a rect, writing them back: done one slot at a time, a
- * list of rows mounting forces one layout PER ROW. Queued and flushed
- * together (a microtask: after the commit's layout effects, before paint),
- * it is writes, ONE layout, reads, writes.
- *
- * A slot's first measure waits past the next paint: until then the slot has
- * no held width and sits at its content's, so there is nothing to show, and
- * a list mounting (a space switch, a conversation's sidebar) paints without a
- * forced layout in its frame. Later measures (the content changed) stay
- * before paint, so a longer label never shows clipped for a frame.
- */
-interface Measured {
-  el: HTMLElement;
-  done: (natural: number) => void;
-}
-const measureQueue = new Map<HTMLElement, Measured>();
-
-function queueMeasure(el: HTMLElement, done: (natural: number) => void): void {
-  if (measureQueue.size === 0) queueMicrotask(flushMeasures);
-  measureQueue.set(el, { el, done });
-}
-
-const firstMeasures = new Map<HTMLElement, Measured>();
-
-/** {@link queueMeasure}, after the next paint (a task queued from the next frame). */
-function queueFirstMeasure(el: HTMLElement, done: (natural: number) => void): void {
-  if (firstMeasures.size === 0) {
-    requestAnimationFrame(() =>
-      setTimeout(() => {
-        const batch = [...firstMeasures.values()];
-        firstMeasures.clear();
-        for (const { el: node, done: report } of batch) queueMeasure(node, report);
-      }, 0),
-    );
-  }
-  firstMeasures.set(el, { el, done });
-}
-
-function flushMeasures(): void {
-  const batch = [...measureQueue.values()].filter((m) => m.el.isConnected);
-  measureQueue.clear();
-  // The content's own width: uncapped for the read (where the slot is
-  // squeezed, the content truncates to it instead of overflowing).
-  for (const { el } of batch) {
-    el.style.maxWidth = 'none';
-    el.style.flex = 'none';
-  }
-  const widths = batch.map(({ el }) => Math.ceil(el.getBoundingClientRect().width));
-  for (const { el } of batch) {
-    el.style.maxWidth = '';
-    el.style.flex = '';
-  }
-  batch.forEach(({ done }, i) => done(widths[i]!));
-}
-
-/** Props for {@link HeldWidth}. */
-export interface HeldWidthProps {
-  /** Identifies the mode of the slot. The held width is released when it changes. */
-  holdKey: string;
-  /** The slot's content. It sits against the right edge. */
-  children: ReactNode;
-  /** Extra classes on the outer element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a trailing slot whose width grows to fit its content and never shrinks while
- * `holdKey` stays the same, so a label that changes often does not make its neighbours move.
- * When `holdKey` changes, it eases to the new content's width once the old content has faded.
- *
- * @param props - Component props.
- */
-export function HeldWidth({ holdKey, children, className = '', style }: HeldWidthProps) {
-  const inner = useRef<HTMLSpanElement>(null);
-  const [width, setWidth] = useState<number | null>(null);
-  const held = useRef(0);
-  const hold = useCallback((natural: number) => {
-    held.current = Math.max(held.current, natural);
-    setWidth(held.current);
-  }, []);
-  const measure = useCallback(() => {
-    // An inert slot is on its way out (a list sliding away): its width no longer matters.
-    if (inner.current && !inner.current.closest('[inert]')) queueMeasure(inner.current, hold);
-  }, [hold]);
-  useLayoutEffect(() => {
-    const el = inner.current;
-    if (!el) return undefined;
-    queueFirstMeasure(el, hold);
-    // The content is capped at the slot (`max-width: 100%`), so its box does
-    // not grow when its text does: watch the text too (a label swap, a digit
-    // the elapsed time gains), and re-measure the uncapped width on each.
-    // Not on the observer's first report (it reports on `observe`): the first measure is above.
-    let observed = false;
-    const ro = new ResizeObserver(() => {
-      if (observed) measure();
-      observed = true;
-    });
-    ro.observe(el);
-    const mo = new MutationObserver(measure);
-    mo.observe(el, { childList: true, subtree: true, characterData: true });
-    return () => {
-      ro.disconnect();
-      mo.disconnect();
-    };
-  }, [measure, hold]);
-  // A new mode: let go of the held width once the old content has left.
-  const firstKey = useRef(holdKey);
-  useEffect(() => {
-    if (holdKey === firstKey.current) return undefined;
-    firstKey.current = holdKey;
-    const release = () => {
-      held.current = 0;
-      measure();
-    };
-    const exitMs = readExitMs();
-    if (exitMs <= 0) {
-      release();
-      return undefined;
-    }
-    // A frame's slack past the exit, so the old content is gone when it measures.
-    const id = setTimeout(release, exitMs + 20);
-    return () => clearTimeout(id);
-  }, [holdKey, measure]);
-  return (
-    <span className={`zg-held-width ${className}`} style={width === null ? style : { width, ...style }}>
-      <span ref={inner} className="zg-held-width-inner">
-        {children}
-      </span>
-    </span>
-  );
-}