@wizardingcode/shibaox-tui 0.1.0

package/src/motion/fade-in-text.tsx

@@ -0,0 +1,93 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+import { type OptimizedBuffer, type RenderContext, RGBA, type TextOptions } from '@opentui/core';
+import { extend, type JSX } from '@opentui/solid';
+import { splitProps } from 'solid-js';
+import { useMotion } from './config.js';
+import { MaskedTextRenderable } from './masked-text.js';
+import { coast, smootherstep } from './pulse.js';
+
+type FadeInTextOptions = TextOptions & { backdrop?: RGBA; enabled?: boolean };
+
+const DURATION = 200;
+const FEATHER = 8;
+const clamp = (value: number) => Math.max(0, Math.min(1, value));
+
+class FadeInTextRenderable extends MaskedTextRenderable {
+  private _backdrop = RGBA.defaultBackground();
+  private _enabled = true;
+  private elapsed = 0;
+
+  constructor(ctx: RenderContext, options: FadeInTextOptions) {
+    super(ctx, options);
+    this.matrix[15] = 1;
+    this.updateBackdrop();
+    if (options.backdrop) this.backdrop = options.backdrop;
+    if (options.enabled === false) this.enabled = false;
+    this.live = this._enabled;
+  }
+
+  set backdrop(value: RGBA) {
+    if (value.equals(this._backdrop)) return;
+    this._backdrop = value;
+    this.updateBackdrop();
+    this.requestRender();
+  }
+
+  set enabled(value: boolean) {
+    if (value === this._enabled) return;
+    this._enabled = value;
+    this.live = value && this.elapsed < DURATION;
+    this.requestRender();
+  }
+
+  private updateBackdrop() {
+    this.matrix[3] = this._backdrop.r;
+    this.matrix[7] = this._backdrop.g;
+    this.matrix[11] = this._backdrop.b;
+  }
+
+  override render(buffer: OptimizedBuffer, deltaTime: number): void {
+    if (!this._enabled || this.elapsed >= DURATION) {
+      super.render(buffer, deltaTime);
+      return;
+    }
+    if (
+      !this.visible ||
+      this.isDestroyed ||
+      !Number.isFinite(this.width) ||
+      this.width <= 0 ||
+      this.height <= 0
+    )
+      return;
+    this.elapsed = Math.min(DURATION, this.elapsed + deltaTime);
+    this.renderMasked(buffer, 1, (end) => {
+      const progress = this.elapsed / DURATION;
+      const front = -FEATHER + coast(progress) * (end + FEATHER * 2);
+      return (column) => 1 - smootherstep(clamp((front - column) / FEATHER));
+    });
+    if (this.elapsed >= DURATION) this.live = false;
+  }
+}
+
+extend({ fade_in_text: FadeInTextRenderable });
+
+declare module '@opentui/solid' {
+  interface OpenTUIComponents {
+    fade_in_text: typeof FadeInTextRenderable;
+  }
+}
+
+type Props = Omit<JSX.IntrinsicElements['text'], 'ref'> & { animate?: boolean; backdrop?: RGBA };
+
+/** Text that sweeps in from the left over 200 ms when it first appears. */
+export function FadeInText(props: Props): JSX.Element {
+  const motion = useMotion();
+  const [local, text] = splitProps(props, ['animate', 'backdrop']);
+  return (
+    <fade_in_text
+      {...text}
+      backdrop={local.backdrop}
+      enabled={(local.animate ?? true) && motion()}
+    />
+  );
+}

package/src/motion/masked-text.ts

@@ -0,0 +1,62 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+import { OptimizedBuffer, RGBA, TargetChannel, TextRenderable } from '@opentui/core';
+
+const TRANSPARENT = RGBA.fromValues(0, 0, 0, 0);
+const CONTINUATION = 0xc0000000 | 0;
+
+/** A text renderable that paints itself through a per-column intensity mask (shimmer, fade-in). */
+export class MaskedTextRenderable extends TextRenderable {
+  protected readonly matrix = new Float32Array(16);
+  private scratch: OptimizedBuffer | undefined;
+  private mask = new Float32Array(0);
+
+  protected renderMasked(
+    buffer: OptimizedBuffer,
+    initialStrength: number,
+    shade: (width: number) => (column: number) => number,
+  ): void {
+    if (!this.scratch)
+      this.scratch = OptimizedBuffer.create(this.width, this.height, this._ctx.widthMethod, {
+        respectAlpha: true,
+      });
+    if (this.scratch.width !== this.width || this.scratch.height !== this.height)
+      this.scratch.resize(this.width, this.height);
+
+    this.scratch.clear(TRANSPARENT);
+    this.scratch.drawTextBuffer(this.textBufferView, 0, 0);
+    const characters = this.scratch.buffers.char;
+    let end = 0;
+    for (let row = 0; row < this.height; row++) {
+      let column = this.width;
+      while (
+        column > 0 &&
+        (characters[row * this.width + column - 1] === 32 ||
+          characters[row * this.width + column - 1] === 0)
+      )
+        column--;
+      end = Math.max(end, column);
+    }
+    const intensity = shade(end);
+    if (this.mask.length !== this.width * this.height * 3)
+      this.mask = new Float32Array(this.width * this.height * 3);
+    let strength = initialStrength;
+    for (let cell = 0; cell < characters.length; cell++) {
+      const column = cell % this.width;
+      // Wide glyph continuation cells retain the head cell's intensity.
+      if (((characters[cell] ?? 0) & CONTINUATION) !== CONTINUATION) strength = intensity(column);
+      this.mask[cell * 3] = column;
+      this.mask[cell * 3 + 1] = Math.floor(cell / this.width);
+      this.mask[cell * 3 + 2] = strength;
+    }
+    this.scratch.colorMatrix(this.matrix, this.mask, 1, TargetChannel.FG);
+    buffer.drawFrameBuffer(this.screenX, this.screenY, this.scratch);
+    this.markClean();
+    this._ctx.addToHitGrid(this.screenX, this.screenY, this.width, this.height, this.num);
+  }
+
+  override destroy(): void {
+    this.scratch?.destroy();
+    this.scratch = undefined;
+    super.destroy();
+  }
+}

package/src/motion/one-cell-motion.ts

@@ -0,0 +1,100 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+import { octantGlyph } from './subcell.js';
+
+export interface OneCellMotion {
+  frames: string[];
+  interval: number;
+  levels?: number[];
+  intro?: Pick<OneCellMotion, 'frames' | 'interval' | 'levels'>;
+  once?: boolean;
+  pace?: { initial: number; final: number; after: number; duration: number };
+}
+
+export function oneCellFrame(
+  animation: OneCellMotion,
+  elapsed: number,
+): { glyph: string; level: number; complete: boolean } {
+  const introDuration = animation.intro
+    ? animation.intro.frames.length * animation.intro.interval
+    : 0;
+  const intro = elapsed < introDuration;
+  const clip = intro && animation.intro ? animation.intro : animation;
+  const pace = animation.pace;
+  const progress = pace ? Math.max(0, Math.min(1, (elapsed - pace.after) / pace.duration)) : 0;
+  // Integrate the changing rate so slowing down does not jump or restart the motion.
+  const time = intro
+    ? elapsed
+    : !pace
+      ? elapsed - introDuration
+      : (elapsed - introDuration) * pace.initial +
+        (pace.final - pace.initial) *
+          (pace.duration * (progress ** 3 - progress ** 4 / 2) +
+            Math.max(0, elapsed - pace.after - pace.duration));
+  const frame = Math.floor((time * clip.frames.length) / (clip.interval * clip.frames.length));
+  const index =
+    !intro && animation.once ? Math.min(frame, clip.frames.length - 1) : frame % clip.frames.length;
+  return {
+    glyph: clip.frames[index] ?? ' ',
+    level: clip.levels?.[index] ?? 1,
+    complete: !intro && !!animation.once && frame >= clip.frames.length - 1,
+  };
+}
+
+export const SEED_WORK: OneCellMotion = {
+  frames: Array.from({ length: 40 }, () => '▪'),
+  interval: 40,
+  levels: Array.from(
+    { length: 40 },
+    (_, index) => 0.3 + (0.7 * (1 - Math.cos((index / 40) * 2 * Math.PI))) / 2,
+  ),
+  intro: {
+    frames: Array.from({ length: 80 }, () => '▪'),
+    interval: 40,
+    levels: Array.from({ length: 80 }, (_, index) => {
+      const phase = index / 80;
+      return (
+        0.3 + 0.7 * (phase < 0.125 ? phase / 0.125 : phase < 0.375 ? 1 : ((1 - phase) / 0.625) ** 3)
+      );
+    }),
+  },
+  pace: { initial: 1.25, final: 0.5, after: 30_000, duration: 30_000 },
+};
+
+const WORK_PACE = { initial: 1.2, final: 0.96, after: 30_000, duration: 30_000 };
+const lower = [2, 3, 5, 7, 6, 4];
+
+export const BLOCK_LOW_COMET: OneCellMotion = {
+  frames: lower.flatMap((point, index, path) => {
+    const leading = (1 << point) | (1 << (path[(index + 5) % 6] ?? 0));
+    const full = leading | (1 << (path[(index + 4) % 6] ?? 0));
+    return [full, full, full, leading, leading].map(octantGlyph);
+  }),
+  interval: 40,
+  pace: WORK_PACE,
+};
+
+export const BLOCK_SOFT_SWEEP: OneCellMotion = {
+  frames: [0x14, 0x14, 0x14, 0x1c, 0x3c, 0x38, 0x28, 0x28, 0x28, 0x38, 0x3c, 0x1c].map(octantGlyph),
+  interval: 100,
+  pace: WORK_PACE,
+};
+
+export const BLOCK_SOFT_SLIDE: OneCellMotion = {
+  frames: [0x14, 0x14, 0x14, 0x14, 0x14, 0x28, 0x28, 0x28, 0x28, 0x28].map(octantGlyph),
+  interval: 100,
+  levels: [0.55, 0.85, 1, 0.85, 0.55, 0.55, 0.85, 1, 0.85, 0.55],
+};
+
+export const WORK_SPINNERS = {
+  'block-soft-sweep': BLOCK_SOFT_SWEEP,
+  'block-soft-slide': BLOCK_SOFT_SLIDE,
+  'block-low-comet': BLOCK_LOW_COMET,
+  seed: SEED_WORK,
+} satisfies Record<string, OneCellMotion>;
+
+export const SEED_LAUNCH: OneCellMotion = {
+  frames: Array.from({ length: 21 }, (_, index) => (index < 10 ? '▫' : '▪')),
+  interval: 40,
+  levels: (SEED_WORK.levels ?? []).slice(0, 21),
+  once: true,
+};

package/src/motion/pulse.ts

@@ -0,0 +1,38 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+// The pulse math of opencode's tab-pulse: shaped sweeps and attack/decay envelopes.
+const clamp = (value: number) => Math.max(0, Math.min(1, value));
+
+export const smootherstep = (value: number): number =>
+  value * value * value * (value * (value * 6 - 15) + 10);
+
+/** Intensity of a sweep with a soft head ahead of `front` and a long tail behind it. */
+export const intensityAt = (index: number, front: number, head: number, tail: number): number => {
+  const distance = front - index;
+  return distance < 0
+    ? smootherstep(clamp(1 + distance / head))
+    : smootherstep(clamp(1 - distance / tail));
+};
+
+/** Eases the ends of a 0..1 progress so a sweep starts and stops gently. */
+export const coast = (value: number): number => {
+  const ramp = 0.2;
+  if (value < ramp) return (value * value) / (2 * ramp * (1 - ramp));
+  if (value > 1 - ramp) return 1 - ((1 - value) * (1 - value)) / (2 * ramp * (1 - ramp));
+  return (value - ramp / 2) / (1 - ramp);
+};
+
+/** Rise to peak over the attack fraction, then settle to rest over the remainder. */
+export const attackDecay = (
+  progress: number,
+  attack: number,
+  peak: number,
+  rest: number,
+): number =>
+  progress < attack
+    ? peak * smootherstep(clamp(progress / attack))
+    : peak - (peak - rest) * smootherstep(clamp((progress - attack) / (1 - attack)));
+
+const COMPLETION_ATTACK = 0.12;
+/** Opacity of the completion pulse over a 0..1 progress. */
+export const completionPulseOpacity = (progress: number): number =>
+  attackDecay(progress, COMPLETION_ATTACK, 1, 0);

package/src/motion/shimmer-text.tsx

@@ -0,0 +1,78 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+import { type OptimizedBuffer, type RenderContext, RGBA, type TextOptions } from '@opentui/core';
+import { extend, type JSX } from '@opentui/solid';
+import { splitProps } from 'solid-js';
+import { useMotion } from './config.js';
+import { MaskedTextRenderable } from './masked-text.js';
+import { coast, intensityAt } from './pulse.js';
+
+type ShimmerTextOptions = TextOptions & { shimmer: RGBA; enabled?: boolean };
+
+const DURATION = 1200;
+
+class ShimmerTextRenderable extends MaskedTextRenderable {
+  private _shimmer = RGBA.defaultForeground();
+  private _enabled = true;
+  private elapsed = 0;
+
+  constructor(ctx: RenderContext, options: ShimmerTextOptions) {
+    super(ctx, options);
+    this.matrix[15] = 1;
+    if (options.shimmer) this.shimmer = options.shimmer;
+    if (options.enabled === false) this.enabled = false;
+    this.live = this._enabled;
+  }
+
+  set shimmer(value: RGBA) {
+    if (value.equals(this._shimmer)) return;
+    this._shimmer = value;
+    this.matrix[3] = value.r;
+    this.matrix[7] = value.g;
+    this.matrix[11] = value.b;
+    this.requestRender();
+  }
+
+  set enabled(value: boolean) {
+    if (value === this._enabled) return;
+    this._enabled = value;
+    this.live = value;
+    this.requestRender();
+  }
+
+  override render(buffer: OptimizedBuffer, deltaTime: number): void {
+    if (!this._enabled) {
+      super.render(buffer, deltaTime);
+      return;
+    }
+    if (
+      !this.visible ||
+      this.isDestroyed ||
+      !Number.isFinite(this.width) ||
+      this.width <= 0 ||
+      this.height <= 0
+    )
+      return;
+    this.elapsed = (this.elapsed + deltaTime) % DURATION;
+    this.renderMasked(buffer, 0, (end) => {
+      const front = -4 + coast(this.elapsed / DURATION) * (end + 22);
+      return (column) => intensityAt(column, front, 4, 18);
+    });
+  }
+}
+
+extend({ shimmer_text: ShimmerTextRenderable });
+
+declare module '@opentui/solid' {
+  interface OpenTUIComponents {
+    shimmer_text: typeof ShimmerTextRenderable;
+  }
+}
+
+type Props = Omit<JSX.IntrinsicElements['text'], 'ref'> & { shimmer: RGBA };
+
+/** Text with a light sweep travelling across it (the "working" affordance). */
+export function ShimmerText(props: Props): JSX.Element {
+  const motion = useMotion();
+  const [local, text] = splitProps(props, ['shimmer']);
+  return <shimmer_text {...text} shimmer={local.shimmer} enabled={motion()} />;
+}

package/src/motion/spinner.tsx

@@ -0,0 +1,101 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+import { type ColorInput, parseColor, RGBA } from '@opentui/core';
+import type { JSX } from '@opentui/solid';
+import { getComponentCatalogue } from '@opentui/solid/components';
+import { registerSpinner } from 'opentui-spinner/solid';
+import { createEffect, createMemo, createSignal, onCleanup, Show } from 'solid-js';
+import { useMotion } from './config.js';
+import { type OneCellMotion, oneCellFrame } from './one-cell-motion.js';
+
+if (!getComponentCatalogue().spinner) registerSpinner();
+
+export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+/** A braille spinner with an optional label; without motion it is a still `⋯`. */
+export function Spinner(props: { children?: JSX.Element; color?: ColorInput }): JSX.Element {
+  const motion = useMotion();
+  const color = () => props.color ?? RGBA.defaultForeground();
+  return (
+    <Show
+      when={motion()}
+      fallback={
+        <text fg={color()}>
+          {props.children ? (
+            <>
+              {'⋯ '}
+              {props.children}
+            </>
+          ) : (
+            '⋯'
+          )}
+        </text>
+      }
+    >
+      <box flexDirection="row" gap={1} flexShrink={props.children ? 1 : 0}>
+        <box flexShrink={0}>
+          <spinner frames={SPINNER_FRAMES} interval={80} color={color()} />
+        </box>
+        <Show when={props.children}>
+          <text fg={color()}>{props.children}</text>
+        </Show>
+      </box>
+    </Show>
+  );
+}
+
+/** One cell of motion (octant sweeps) for a working node; without motion a still glyph. */
+export function OneCellSpinner(props: {
+  animation: OneCellMotion;
+  color: ColorInput;
+  paused?: boolean;
+  still?: string;
+}): JSX.Element {
+  const motion = useMotion();
+  const [elapsed, setElapsed] = createSignal(0);
+  const sequenced = () =>
+    !!props.animation.intro || !!props.animation.once || !!props.animation.pace;
+  const frame = createMemo(() => oneCellFrame(props.animation, elapsed()));
+  const base = createMemo(() => parseColor(props.color));
+  const color = createMemo(() => {
+    if (sequenced()) {
+      const c = RGBA.clone(base());
+      c.a *= frame().level;
+      return c;
+    }
+    return base();
+  });
+
+  createEffect(() => {
+    props.animation;
+    setElapsed(0);
+  });
+  createEffect(() => {
+    if (!sequenced() || !motion() || props.paused || frame().complete) return;
+    let previous = performance.now();
+    const timer = setInterval(
+      () => {
+        const now = performance.now();
+        setElapsed((value) => value + (now - previous));
+        previous = now;
+      },
+      Math.max(
+        1000 / 60,
+        Math.min(40, props.animation.interval / (props.animation.pace?.initial ?? 1)),
+      ),
+    );
+    onCleanup(() => clearInterval(timer));
+  });
+
+  return (
+    <box width={1} height={1} flexShrink={0}>
+      <Show when={motion()} fallback={<text fg={base()}>{props.still ?? '▪'}</text>}>
+        <spinner
+          frames={sequenced() ? [frame().glyph] : props.animation.frames}
+          interval={props.animation.interval}
+          autoplay={!props.paused && !sequenced()}
+          color={color()}
+        />
+      </Show>
+    </box>
+  );
+}

package/src/motion/subcell.ts

@@ -0,0 +1,40 @@
+// Adapted from opencode (MIT) — https://github.com/anomalyco/opencode
+// Masks use row-major bits in a 2x4 grid. Unicode reuses these older glyphs
+// instead of duplicating them in the otherwise mask-ordered octant block.
+const OCTANTS = new Map<number, string>([
+  [0x00, ' '],
+  [0x01, '\u{1cea8}'],
+  [0x02, '\u{1ceab}'],
+  [0x03, '\u{1fb82}'],
+  [0x05, '▘'],
+  [0x0a, '▝'],
+  [0x0f, '▀'],
+  [0x14, '\u{1fbe6}'],
+  [0x28, '\u{1fbe7}'],
+  [0x3f, '\u{1fb85}'],
+  [0x40, '\u{1cea3}'],
+  [0x50, '▖'],
+  [0x55, '▌'],
+  [0x5a, '▞'],
+  [0x5f, '▛'],
+  [0x80, '\u{1cea0}'],
+  [0xa0, '▗'],
+  [0xa5, '▚'],
+  [0xaa, '▐'],
+  [0xaf, '▜'],
+  [0xc0, '▂'],
+  [0xf0, '▄'],
+  [0xf5, '▙'],
+  [0xfa, '▟'],
+  [0xfc, '▆'],
+  [0xff, '█'],
+]);
+
+export function octantGlyph(mask: number): string {
+  return (
+    OCTANTS.get(mask) ??
+    String.fromCodePoint(
+      0x1cd00 + mask - [...OCTANTS.keys()].filter((value) => value < mask).length,
+    )
+  );
+}