@echothink-ui/motion 0.1.0

package/src/components/SkeletonLoadingPattern.tsx

@@ -0,0 +1,248 @@
+import * as React from "react";
+import type { SkeletonLoadingPatternProps, SkeletonLoadingPatternVariant } from "./types";
+import { MotionStyles, usePrefersReducedMotion } from "./motionUtils";
+
+const articleLineWidths = ["96%", "88%", "100%", "92%", "76%", "84%", "68%", "80%"];
+const listLineWidths = ["76%", "88%", "64%", "82%", "70%", "90%"];
+const tableCellWidths = ["72%", "92%", "58%", "84%", "66%", "78%"];
+
+export function SkeletonLoadingPattern({
+  columns = 4,
+  label = "Loading content",
+  lines = 3,
+  rows,
+  variant = "article",
+  className,
+  style,
+  role = "status",
+  "aria-busy": ariaBusy = true,
+  "aria-label": ariaLabel,
+  ...props
+}: SkeletonLoadingPatternProps) {
+  const reduced = usePrefersReducedMotion();
+  const pattern = normalizePattern(variant);
+  const lineCount = clampCount(lines, 1, 8);
+  const rowCount = clampCount(rows ?? (pattern === "table" ? 4 : 3), 1, 8);
+  const columnCount = clampCount(columns, 2, 6);
+  const classes = [
+    "eth-motion-skeleton-loading",
+    `eth-motion-skeleton-loading--${pattern}`,
+    reduced ? "eth-motion-reduced" : undefined,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <section
+      {...props}
+      aria-busy={ariaBusy}
+      aria-label={ariaLabel ?? label}
+      className={classes}
+      data-eth-component="SkeletonLoadingPattern"
+      data-pattern={pattern}
+      role={role}
+      style={style}
+    >
+      <MotionStyles />
+      {renderPattern(pattern, lineCount, rowCount, columnCount)}
+    </section>
+  );
+}
+
+function renderPattern(
+  pattern: SkeletonLoadingPatternVariant,
+  lines: number,
+  rows: number,
+  columns: number
+) {
+  switch (pattern) {
+    case "card":
+      return <CardPattern lines={lines} />;
+    case "list":
+      return <ListPattern rows={rows} />;
+    case "table":
+      return <TablePattern columns={columns} rows={rows} />;
+    case "article":
+    default:
+      return <ArticlePattern lines={lines} />;
+  }
+}
+
+function ArticlePattern({ lines }: { lines: number }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--article"
+    >
+      <div className="eth-motion-skeleton-loading__article-header">
+        <SkeletonBlock
+          className="eth-motion-skeleton-loading__block--eyebrow"
+          segment="eyebrow"
+          style={{ inlineSize: "7rem" }}
+        />
+        <SkeletonBlock
+          className="eth-motion-skeleton-loading__block--title"
+          segment="title"
+          style={{ inlineSize: "min(22rem, 74%)" }}
+        />
+      </div>
+      <div className="eth-motion-skeleton-loading__article-body">
+        {Array.from({ length: lines }).map((_, index) => (
+          <SkeletonBlock
+            key={index}
+            className="eth-motion-skeleton-loading__block--line"
+            segment="text-line"
+            style={{ inlineSize: articleLineWidths[index % articleLineWidths.length] }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CardPattern({ lines }: { lines: number }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--card"
+    >
+      <SkeletonBlock className="eth-motion-skeleton-loading__block--media" segment="media" />
+      <div className="eth-motion-skeleton-loading__card-body">
+        <SkeletonBlock
+          className="eth-motion-skeleton-loading__block--title"
+          segment="title"
+          style={{ inlineSize: "78%" }}
+        />
+        {Array.from({ length: lines }).map((_, index) => (
+          <SkeletonBlock
+            key={index}
+            className="eth-motion-skeleton-loading__block--line"
+            segment="text-line"
+            style={{ inlineSize: articleLineWidths[(index + 2) % articleLineWidths.length] }}
+          />
+        ))}
+      </div>
+      <div className="eth-motion-skeleton-loading__card-metrics">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <SkeletonBlock
+            key={index}
+            className="eth-motion-skeleton-loading__block--metric"
+            segment="metric"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ListPattern({ rows }: { rows: number }) {
+  return (
+    <div
+      aria-hidden="true"
+      className="eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--list"
+    >
+      {Array.from({ length: rows }).map((_, index) => (
+        <div
+          className="eth-motion-skeleton-loading__list-row"
+          data-skeleton-row="list"
+          key={index}
+        >
+          <SkeletonBlock className="eth-motion-skeleton-loading__block--avatar" segment="avatar" />
+          <div className="eth-motion-skeleton-loading__list-copy">
+            <SkeletonBlock
+              className="eth-motion-skeleton-loading__block--line"
+              segment="text-line"
+              style={{ inlineSize: listLineWidths[index % listLineWidths.length] }}
+            />
+            <SkeletonBlock
+              className="eth-motion-skeleton-loading__block--caption"
+              segment="caption"
+              style={{ inlineSize: listLineWidths[(index + 2) % listLineWidths.length] }}
+            />
+          </div>
+          <SkeletonBlock
+            className="eth-motion-skeleton-loading__block--tag"
+            segment="tag"
+            style={{ inlineSize: index % 2 === 0 ? "4.25rem" : "3.25rem" }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TablePattern({ columns, rows }: { columns: number; rows: number }) {
+  const gridStyle = { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+
+  return (
+    <div
+      aria-hidden="true"
+      className="eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--table"
+    >
+      <div className="eth-motion-skeleton-loading__table-header" style={gridStyle}>
+        {Array.from({ length: columns }).map((_, index) => (
+          <SkeletonBlock
+            key={index}
+            className="eth-motion-skeleton-loading__block--column"
+            segment="column-header"
+            style={{ inlineSize: tableCellWidths[(index + 1) % tableCellWidths.length] }}
+          />
+        ))}
+      </div>
+      {Array.from({ length: rows }).map((_, rowIndex) => (
+        <div
+          className="eth-motion-skeleton-loading__table-row"
+          data-skeleton-row="table"
+          key={rowIndex}
+          style={gridStyle}
+        >
+          {Array.from({ length: columns }).map((_, columnIndex) => (
+            <SkeletonBlock
+              cell
+              key={columnIndex}
+              className="eth-motion-skeleton-loading__block--cell"
+              segment="cell"
+              style={{
+                inlineSize: tableCellWidths[(rowIndex + columnIndex) % tableCellWidths.length]
+              }}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SkeletonBlock({
+  cell,
+  className,
+  segment,
+  style
+}: {
+  cell?: boolean;
+  className?: string;
+  segment: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <span
+      className={`eth-motion-skeleton-loading__block ${className ?? ""}`}
+      data-skeleton-cell={cell ? "" : undefined}
+      data-skeleton-segment={segment}
+      style={style}
+    />
+  );
+}
+
+function clampCount(value: number, min: number, max: number) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, Math.floor(value)));
+}
+
+function normalizePattern(
+  variant: SkeletonLoadingPatternProps["variant"]
+): SkeletonLoadingPatternVariant {
+  if (variant === "card" || variant === "list" || variant === "table") return variant;
+  return "article";
+}

package/src/components/StatusChangeAnimation.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { StatusChangeAnimation } from "./StatusChangeAnimation";
+
+describe("@echothink-ui/motion StatusChangeAnimation", () => {
+  it("renders and announces the semantic status transition", () => {
+    render(
+      <StatusChangeAnimation label="Build pipeline" previousStatus="queued" status="running" />
+    );
+
+    const status = screen.getByRole("status", {
+      name: "Build pipeline changed from Queued to Running"
+    });
+
+    expect(status).toBeTruthy();
+    expect(screen.getByText("Build pipeline")).toBeTruthy();
+    expect(screen.getByText("Queued")).toBeTruthy();
+    expect(screen.getByText("Running")).toBeTruthy();
+  });
+});

package/src/components/StatusChangeAnimation.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import type { StatusChangeAnimationProps } from "./types";
+import { MotionStyles, statusColor, usePrefersReducedMotion } from "./motionUtils";
+
+export function StatusChangeAnimation({
+  status,
+  previousStatus,
+  label,
+  className,
+  children,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: StatusChangeAnimationProps) {
+  const reduced = usePrefersReducedMotion();
+  const changed = previousStatus !== undefined && previousStatus !== status;
+  const statusLabel = formatStatusLabel(status);
+  const previousStatusLabel = previousStatus ? formatStatusLabel(previousStatus) : undefined;
+  const displayLabel = children ?? label ?? "Status";
+  const announcementLabel = textFromNode(label) ?? textFromNode(children) ?? "Status";
+  const announcement =
+    changed && previousStatusLabel
+      ? `${announcementLabel} changed from ${previousStatusLabel} to ${statusLabel}`
+      : `${announcementLabel} is ${statusLabel}`;
+  const rootClassName = [
+    "eth-motion-status-change",
+    `eth-motion-status-change--${status}`,
+    changed ? "eth-motion-status-change--changed" : null,
+    reduced ? "eth-motion-reduced" : null,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <span
+      {...props}
+      aria-atomic="true"
+      aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : announcement)}
+      aria-labelledby={ariaLabelledBy}
+      className={rootClassName}
+      data-current-status={status}
+      data-eth-component="StatusChangeAnimation"
+      data-previous-status={previousStatus}
+      role="status"
+      style={{
+        "--eth-motion-status-color": statusColor(status),
+        "--eth-motion-status-previous-color": previousStatus
+          ? statusColor(previousStatus)
+          : statusColor(status),
+        ...style
+      } as React.CSSProperties}
+    >
+      <MotionStyles />
+      <span className="eth-motion-status-change__indicator" aria-hidden="true">
+        {changed ? <span className="eth-motion-status-change__previous-dot" /> : null}
+        {changed ? <span className="eth-motion-status-change__connector" /> : null}
+        <span className="eth-motion-status-change__current-dot" />
+      </span>
+      <span className="eth-motion-status-change__content">
+        <span className="eth-motion-status-change__label">{displayLabel}</span>
+        <span className="eth-motion-status-change__state">
+          {changed && previousStatusLabel ? (
+            <>
+              <span className="eth-motion-status-change__previous">{previousStatusLabel}</span>
+              <span className="eth-motion-status-change__separator">to</span>
+              <span className="eth-motion-status-change__current">{statusLabel}</span>
+            </>
+          ) : (
+            <span className="eth-motion-status-change__current">{statusLabel}</span>
+          )}
+        </span>
+      </span>
+    </span>
+  );
+}
+
+function formatStatusLabel(status: string) {
+  return status
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function textFromNode(node: React.ReactNode) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  return undefined;
+}

package/src/components/StepCompletionAnimation.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import type { StepCompletionAnimationProps } from "./types";
+import { MotionStyles, usePrefersReducedMotion } from "./motionUtils";
+
+const stateLabels = {
+  completed: "Completed",
+  current: "In progress",
+  pending: "Pending"
+} as const;
+
+export function StepCompletionAnimation({
+  completed = true,
+  description,
+  label = "Step completed",
+  state,
+  className,
+  children,
+  role = "status",
+  "aria-live": ariaLive = "polite",
+  ...props
+}: StepCompletionAnimationProps) {
+  const reduced = usePrefersReducedMotion();
+  const resolvedState = state ?? (completed ? "completed" : "pending");
+  const stateLabel = stateLabels[resolvedState];
+  const stepClassName = [
+    "eth-motion-step-completion",
+    `eth-motion-step-completion--${resolvedState}`,
+    reduced ? "eth-motion-reduced" : undefined,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <span
+      {...props}
+      aria-live={ariaLive}
+      className={stepClassName}
+      data-eth-component="StepCompletionAnimation"
+      data-state={resolvedState}
+      role={role}
+    >
+      <MotionStyles />
+      <span className="eth-motion-step-completion__marker" aria-hidden="true">
+        {resolvedState === "completed" ? (
+          <svg
+            className="eth-motion-step-completion__check"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              className="eth-motion-step-completion__check-path"
+              d="M3.5 8.4 6.5 11.4 12.8 4.6"
+            />
+          </svg>
+        ) : (
+          <span className="eth-motion-step-completion__dot" />
+        )}
+      </span>
+      <span className="eth-motion-step-completion__content">
+        {children ?? (
+          <>
+            <span className="eth-motion-step-completion__label">{label}</span>
+            <span className="eth-motion-step-completion__state">{stateLabel}</span>
+            {description ? (
+              <span className="eth-motion-step-completion__description">{description}</span>
+            ) : null}
+          </>
+        )}
+      </span>
+    </span>
+  );
+}

package/src/components/StreamingText.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import type { StreamingTextProps } from "./types";
+import { MotionStyles, usePrefersReducedMotion } from "./motionUtils";
+
+export function StreamingText({
+  text,
+  intervalMs = 18,
+  onDone,
+  className,
+  role = "status",
+  "aria-busy": ariaBusy,
+  "aria-live": ariaLive = "polite",
+  ...props
+}: StreamingTextProps) {
+  const reduced = usePrefersReducedMotion();
+  const shouldAnimate = !reduced && intervalMs > 0 && text.length > 0;
+  const [visible, setVisible] = React.useState(shouldAnimate ? "" : text);
+  const [done, setDone] = React.useState(!shouldAnimate);
+  const onDoneRef = React.useRef(onDone);
+
+  React.useEffect(() => {
+    onDoneRef.current = onDone;
+  }, [onDone]);
+
+  React.useEffect(() => {
+    if (!shouldAnimate) {
+      setVisible(text);
+      setDone(true);
+      onDoneRef.current?.();
+      return;
+    }
+
+    setVisible("");
+    setDone(false);
+    let index = 0;
+    const timer = window.setInterval(() => {
+      index += 1;
+      setVisible(text.slice(0, index));
+      if (index >= text.length) {
+        window.clearInterval(timer);
+        setDone(true);
+        onDoneRef.current?.();
+      }
+    }, intervalMs);
+    return () => window.clearInterval(timer);
+  }, [text, intervalMs, shouldAnimate]);
+
+  const streaming = shouldAnimate && !done;
+  const classes = [
+    "eth-motion-streaming-text",
+    streaming
+      ? "eth-motion-streaming-text--streaming"
+      : "eth-motion-streaming-text--complete",
+    reduced ? "eth-motion-reduced" : undefined,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <>
+      <MotionStyles />
+      <span
+        {...props}
+        aria-busy={ariaBusy ?? streaming}
+        aria-live={ariaLive}
+        className={classes}
+        data-eth-component="StreamingText"
+        data-streaming={streaming ? "true" : "false"}
+        role={role}
+      >
+        <span className="eth-motion-streaming-text__content">{visible}</span>
+        <span aria-hidden="true" className="eth-motion-streaming-text__cursor" />
+      </span>
+    </>
+  );
+}

package/src/components/SyncProgressAnimation.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SyncProgressAnimation } from "./SyncProgressAnimation";
+
+describe("@echothink-ui/motion SyncProgressAnimation", () => {
+  it("renders detailed sync progress with replication metadata", () => {
+    render(
+      <SyncProgressAnimation
+        completed={1280}
+        label="Syncing mailbox"
+        progress={64}
+        rate="240 messages/min"
+        remaining="2 min"
+        source="IMAP primary"
+        stage="Applying labels"
+        target="Search index"
+        total={2000}
+        variant="detailed"
+      />
+    );
+
+    const status = screen.getByRole("status", {
+      name: "Syncing mailbox Syncing, 64% complete, 1280 of 2000 items"
+    });
+
+    expect(status.getAttribute("data-sync-status")).toBe("syncing");
+    expect(status.getAttribute("data-sync-progress")).toBe("64");
+
+    const progressbar = screen.getByRole("progressbar", {
+      name: "Sync transfer progress"
+    });
+
+    expect(progressbar.getAttribute("aria-valuenow")).toBe("64");
+    expect(screen.getByText("IMAP primary")).toBeTruthy();
+    expect(screen.getByText("Search index")).toBeTruthy();
+    expect(screen.getByText("Applying labels")).toBeTruthy();
+  });
+
+  it("keeps the default presentation compact for inline usage", () => {
+    render(<SyncProgressAnimation label="Syncing mailbox" />);
+
+    const status = screen.getByRole("status", {
+      name: "Syncing mailbox Syncing"
+    });
+
+    expect(status.className).toContain("eth-motion-sync-progress--compact");
+    expect(status.querySelector('[role="progressbar"]')).toBeNull();
+  });
+});