import { useClock } from "./clock.jsx";

/**
 * A per-frame color field over a region: given a glyph cell's local position
 * `(x, y)` within a `width`×`height` box, return its packed 24-bit fg, or
 * `undefined` to leave the painted color as-is.
 */

/** What an {@link Effect} is handed each frame to build its field. */

/**
 * A reusable animation. Called every frame with the current {@link EffectEnv},
 * it returns the {@link AnimationField} sampled for each glyph cell. See
 * `shimmer`, `wave`, and `pulse` in `./effects.ts`.
 */

/**
 * Runs an {@link Effect} as a paint-time color filter over its children, so the
 * animation sweeps across whatever they paint — text, a spinner glyph, nested
 * boxes — purely by screen position. Children stay plain; nothing needs to be
 * animation-aware:
 *
 * ```tsx
 * <Animated effect={shimmer({ baseColor: "#666", highlightColor: "#fff" })}>
 *   <Spinner />
 *   <text>{` ${verb}…`}</text>
 * </Animated>
 * ```
 *
 * The named `Shimmer` / `Wave` / `Pulse` wrappers cover the common effects.
 */
export function Animated(props) {
  const time = props.time ?? useClock(props.tick ?? 50);
  // Rebuilds the field each tick; the changed prop re-paints the region.
  const colorField = () => props.effect({
    t: time(),
    paused: props.paused ?? false
  });
  return <box flexDirection="row" colorField={colorField()}>
			{props.children}
		</box>;
}
//# sourceMappingURL=animated.jsx.map