@echothink-ui/motion 0.1.0

package/src/components/types.ts

@@ -0,0 +1,111 @@
+import type * as React from "react";
+import type { EthOperationalStatus, EthSeverity, SurfaceComponentProps } from "@echothink-ui/core";
+
+export interface ProgressTransitionProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+  from?: number;
+  to: number;
+  durationMs?: number;
+  children?: (currentValue: number) => React.ReactNode;
+}
+
+export interface MotionFlowNode {
+  id: string;
+  label: string;
+  status: EthOperationalStatus;
+  x?: number;
+  y?: number;
+}
+
+export interface MotionFlowEdge {
+  from: string;
+  to: string;
+  active?: boolean;
+  status?: EthOperationalStatus;
+}
+
+export interface PipelineFlowAnimationProps extends React.HTMLAttributes<HTMLElement> {
+  nodes: MotionFlowNode[];
+  edges: MotionFlowEdge[];
+}
+
+export interface DAGStatusTransitionProps extends React.HTMLAttributes<HTMLElement> {
+  nodes: MotionFlowNode[];
+  previousNodes?: MotionFlowNode[];
+  edges?: MotionFlowEdge[];
+}
+
+export interface AgentThinkingAnimationProps extends React.HTMLAttributes<HTMLElement> {
+  label?: string;
+}
+
+export type SyncProgressAnimationStatus =
+  | "syncing"
+  | "synced"
+  | "paused"
+  | "stale"
+  | "failed"
+  | "error";
+
+export interface SyncProgressAnimationProps extends React.HTMLAttributes<HTMLElement> {
+  completed?: number;
+  description?: React.ReactNode;
+  label?: React.ReactNode;
+  progress?: number;
+  rate?: React.ReactNode;
+  remaining?: React.ReactNode;
+  source?: React.ReactNode;
+  stage?: React.ReactNode;
+  status?: SyncProgressAnimationStatus;
+  target?: React.ReactNode;
+  total?: number;
+  variant?: "compact" | "detailed";
+}
+
+export type SkeletonLoadingPatternVariant = "article" | "card" | "list" | "table";
+
+export interface SkeletonLoadingPatternProps extends React.HTMLAttributes<HTMLElement> {
+  columns?: number;
+  label?: string;
+  lines?: number;
+  rows?: number;
+  variant?: SkeletonLoadingPatternVariant;
+}
+
+export interface AttentionPulseProps extends React.HTMLAttributes<HTMLElement> {
+  severity?: EthSeverity;
+  maxRepeats?: number;
+}
+
+export interface DocumentLockPulseProps extends React.HTMLAttributes<HTMLElement> {
+  lockedBy?: React.ReactNode;
+  active?: boolean;
+}
+
+export interface StreamingTextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onDone"> {
+  text: string;
+  intervalMs?: number;
+  onDone?: () => void;
+}
+
+export type StepCompletionState = "completed" | "current" | "pending";
+
+export interface StepCompletionAnimationProps extends React.HTMLAttributes<HTMLElement> {
+  completed?: boolean;
+  description?: React.ReactNode;
+  label?: React.ReactNode;
+  state?: StepCompletionState;
+}
+
+export interface StatusChangeAnimationProps extends React.HTMLAttributes<HTMLElement> {
+  status: EthOperationalStatus;
+  previousStatus?: EthOperationalStatus;
+  label?: React.ReactNode;
+}
+
+export type {
+  SurfaceComponentProps,
+  EthOperationalStatus,
+  EthSeverity
+};

package/src/index.test.tsx

@@ -0,0 +1,97 @@
+import { act, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SkeletonLoadingPattern, StepCompletionAnimation, StreamingText } from "./index";
+
+describe("@echothink-ui/motion SkeletonLoadingPattern", () => {
+  it("renders a labelled article skeleton by default", () => {
+    render(<SkeletonLoadingPattern label="Loading request summary" lines={4} />);
+
+    const status = screen.getByRole("status", { name: "Loading request summary" });
+
+    expect(status.getAttribute("data-pattern")).toBe("article");
+    expect(status.querySelectorAll('[data-skeleton-segment="text-line"]')).toHaveLength(4);
+  });
+
+  it("renders table and list patterns for repeated loading surfaces", () => {
+    const { rerender } = render(
+      <SkeletonLoadingPattern columns={4} label="Loading audit table" rows={3} variant="table" />
+    );
+
+    const table = screen.getByRole("status", { name: "Loading audit table" });
+    expect(table.getAttribute("data-pattern")).toBe("table");
+    expect(table.querySelectorAll('[data-skeleton-row="table"]')).toHaveLength(3);
+    expect(table.querySelectorAll("[data-skeleton-cell]")).toHaveLength(12);
+
+    rerender(<SkeletonLoadingPattern label="Loading review queue" rows={3} variant="list" />);
+
+    const list = screen.getByRole("status", { name: "Loading review queue" });
+    expect(list.getAttribute("data-pattern")).toBe("list");
+    expect(list.querySelectorAll('[data-skeleton-row="list"]')).toHaveLength(3);
+  });
+});
+
+describe("@echothink-ui/motion StepCompletionAnimation", () => {
+  it("renders a completed step with semantic completion text and marker", () => {
+    render(<StepCompletionAnimation label="Plan approved" />);
+
+    const status = screen.getByRole("status");
+
+    expect(status.getAttribute("data-state")).toBe("completed");
+    expect(screen.getByText("Plan approved")).toBeTruthy();
+    expect(screen.getByText("Completed")).toBeTruthy();
+    expect(status.querySelector(".eth-motion-step-completion__check")).toBeTruthy();
+  });
+
+  it("renders current and pending states without marking them complete", () => {
+    const { rerender } = render(
+      <StepCompletionAnimation
+        description="Waiting on compliance reviewer"
+        label="Review gate"
+        state="current"
+      />
+    );
+
+    expect(screen.getByRole("status").getAttribute("data-state")).toBe("current");
+    expect(screen.getByText("In progress")).toBeTruthy();
+    expect(screen.getByText("Waiting on compliance reviewer")).toBeTruthy();
+
+    rerender(<StepCompletionAnimation completed={false} label="Publish" />);
+
+    expect(screen.getByRole("status").getAttribute("data-state")).toBe("pending");
+    expect(screen.getByText("Pending")).toBeTruthy();
+  });
+});
+
+describe("@echothink-ui/motion StreamingText", () => {
+  it("marks active streaming text as busy until the reveal completes", () => {
+    vi.useFakeTimers();
+    try {
+      const onDone = vi.fn();
+
+      render(
+        <StreamingText
+          aria-label="Draft stream"
+          intervalMs={10}
+          onDone={onDone}
+          text="Draft ready"
+        />
+      );
+
+      const status = screen.getByRole("status", { name: "Draft stream" });
+      expect(status.getAttribute("aria-busy")).toBe("true");
+      expect(status.getAttribute("data-streaming")).toBe("true");
+      expect(status.textContent).toBe("");
+
+      act(() => {
+        vi.advanceTimersByTime(110);
+      });
+
+      expect(status.textContent).toBe("Draft ready");
+      expect(status.getAttribute("aria-busy")).toBe("false");
+      expect(status.getAttribute("data-streaming")).toBe("false");
+      expect(onDone).toHaveBeenCalledTimes(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/index.tsx

@@ -0,0 +1,44 @@
+export type {
+  AgentThinkingAnimationProps,
+  AttentionPulseProps,
+  DAGStatusTransitionProps,
+  DocumentLockPulseProps,
+  MotionFlowEdge,
+  MotionFlowNode,
+  PipelineFlowAnimationProps,
+  ProgressTransitionProps,
+  SkeletonLoadingPatternVariant,
+  SkeletonLoadingPatternProps,
+  StatusChangeAnimationProps,
+  StepCompletionAnimationProps,
+  StepCompletionState,
+  StreamingTextProps,
+  SyncProgressAnimationProps,
+  SyncProgressAnimationStatus
+} from "./components/types";
+export { AgentThinkingAnimation } from "./components/AgentThinkingAnimation";
+export { AttentionPulse } from "./components/AttentionPulse";
+export { DAGStatusTransition } from "./components/DAGStatusTransition";
+export { DocumentLockPulse } from "./components/DocumentLockPulse";
+export { PipelineFlowAnimation } from "./components/PipelineFlowAnimation";
+export { ProgressTransition } from "./components/ProgressTransition";
+export { SkeletonLoadingPattern } from "./components/SkeletonLoadingPattern";
+export { StatusChangeAnimation } from "./components/StatusChangeAnimation";
+export { StepCompletionAnimation } from "./components/StepCompletionAnimation";
+export { StreamingText } from "./components/StreamingText";
+export { SyncProgressAnimation } from "./components/SyncProgressAnimation";
+
+export const MotionComponentNames = [
+  "ProgressTransition",
+  "PipelineFlowAnimation",
+  "DAGStatusTransition",
+  "AgentThinkingAnimation",
+  "SyncProgressAnimation",
+  "SkeletonLoadingPattern",
+  "AttentionPulse",
+  "DocumentLockPulse",
+  "StreamingText",
+  "StepCompletionAnimation",
+  "StatusChangeAnimation"
+] as const;
+export type MotionComponentName = (typeof MotionComponentNames)[number];