@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/animations/spinning-counter.css

@@ -0,0 +1,52 @@
+/* Spinning counter — transitions.dev 26.
+   One column per digit clips a 0-9 strip; JS translates each strip up by
+   (spins * 10 + digit) cells and staggers the columns. The motion streak is an
+   SVG feGaussianBlur with stdDeviation="0 Y" decayed per column: a CSS blur()
+   is isotropic and would smear the digit sideways. Use `digit-pop-in.css` when
+   a number simply updates in place. */
+:root {
+  --reel-dur: 1400ms;
+  --reel-cell: 30px;
+  --reel-spin-blur: var(--blur-medium, 3px);
+  --reel-stagger: 90ms;
+  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.t-reel {
+  display: inline-flex;
+  align-items: center;
+  height: var(--reel-cell);
+  font-variant-numeric: tabular-nums;
+}
+/* Soft-fade the window edges rather than hard-cropping the strip. */
+.t-reel-col {
+  position: relative;
+  height: var(--reel-cell);
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    #000 22%,
+    #000 78%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
+}
+.t-reel-strip {
+  display: flex;
+  flex-direction: column;
+  will-change: transform, filter;
+}
+.t-reel-digit {
+  height: var(--reel-cell);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-reel-strip {
+    transition: none !important;
+    filter: none !important;
+  }
+}

package/src/animations/success-check.css

@@ -0,0 +1,120 @@
+/* Transitions.dev — Success check */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    Wrap your icon (SVG, image, anything) in .t-success-check.
+    The wrapper drives fade + rotate + blur + Y-bob; if your
+    icon is an SVG <path>, it gets the stroke-draw animation.
+
+      <span class="t-success-check" data-state="out" aria-hidden="true">
+        <svg viewBox="0 0 48 48" fill="none">…</svg>
+      </span>
+
+  Trigger:
+    Cold load is data-state="out" (opacity 0; no animation).
+    Show: set data-state="in".
+
+  Replace the stroke-dasharray placeholder (20) with the result
+  of path.getTotalLength() for your path, or set it inline in JS.
+*/
+
+:root {
+  --check-opacity-dur: var(--duration-very-slow, 500ms);
+  --check-rotate-dur: var(--duration-very-slow, 500ms);
+  --check-rotate-from: 80deg;
+  --check-bob-dur: var(--duration-very-slow, 500ms);
+  --check-y-amount: 40px;
+  --check-blur-dur: var(--duration-very-slow, 500ms);
+  --check-blur-from: 10px;
+  --check-path-dur: var(--duration-very-slow, 500ms);
+  --check-path-delay: 80ms;
+  --check-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-opacity: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-rotate: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-bob: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-path: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Wrapper drives the appear animation; it doesn't own any
+   sizing or color so you can drop in any icon. */
+.t-success-check {
+  display: inline-block;
+  transform-origin: center;
+  opacity: 0;
+  will-change: transform, opacity, filter;
+}
+/* overflow: visible keeps the stroke from clipping while it
+   draws; display: block kills the inline whitespace under SVGs. */
+.t-success-check svg {
+  display: block;
+  overflow: visible;
+}
+/* Stroke-draw setup. Replace 20 with the result of
+   path.getTotalLength() for your path; round caps mean any
+   sub-pixel overshoot is invisible. */
+.t-success-check svg path {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+}
+
+.t-success-check[data-state="in"] {
+  animation:
+    t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,
+    t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,
+    t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards,
+    t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards;
+}
+.t-success-check[data-state="in"] svg path {
+  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms)
+    forwards;
+}
+
+@keyframes t-check-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes t-check-rotate {
+  from {
+    transform: rotate(var(--check-rotate-from));
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+@keyframes t-check-blur {
+  from {
+    filter: blur(var(--check-blur-from));
+  }
+  to {
+    filter: blur(0);
+  }
+}
+@keyframes t-check-bob {
+  from {
+    translate: 0 var(--check-y-amount);
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes t-check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-check {
+    animation: none !important;
+    opacity: 1;
+  }
+  .t-success-check svg path {
+    animation: none !important;
+    stroke-dashoffset: 0 !important;
+  }
+}

package/src/animations/text-swap.css

@@ -0,0 +1,40 @@
+/* Transitions.dev — Text swap */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+:root {
+  --text-swap-dur: 200ms;
+  --text-swap-translate-y: var(--distance-base, 8px);
+  --text-swap-blur: var(--blur-small, 2px);
+  --text-swap-ease: var(--ease-out, ease-out);
+}
+
+.t-text-swap {
+  display: inline-block;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition:
+    transform var(--text-swap-dur) var(--text-swap-ease),
+    filter var(--text-swap-dur) var(--text-swap-ease),
+    opacity var(--text-swap-dur) var(--text-swap-ease);
+  will-change: transform, filter, opacity;
+}
+
+.t-text-swap.is-exit {
+  transform: translateY(calc(var(--text-swap-translate-y) * -1));
+  filter: blur(var(--text-swap-blur));
+  opacity: 0;
+}
+
+.t-text-swap.is-enter-start {
+  transform: translateY(var(--text-swap-translate-y));
+  filter: blur(var(--text-swap-blur));
+  opacity: 0;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-text-swap {
+    transition: none !important;
+  }
+}

package/src/animations/text-swap.ts

@@ -0,0 +1,40 @@
+export interface SwapTextOptions {
+  durationMs?: number;
+}
+
+function parseDuration(value: string | null | undefined): number {
+  if (!value) return 200;
+  const trimmed = value.trim();
+  if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
+  if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1000;
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) ? parsed : 200;
+}
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function swapText(el: HTMLElement, newText: string, opts?: SwapTextOptions): void {
+  if (prefersReducedMotion()) {
+    el.textContent = newText;
+    el.classList.remove("is-exit", "is-enter-start");
+    return;
+  }
+
+  const durationMs =
+    opts?.durationMs ?? parseDuration(getComputedStyle(el).getPropertyValue("--text-swap-dur"));
+  el.classList.add("t-text-swap", "is-exit");
+
+  window.setTimeout(() => {
+    el.textContent = newText;
+    el.classList.remove("is-exit");
+    el.classList.add("is-enter-start");
+
+    requestAnimationFrame(() => {
+      void el.offsetHeight; // read to force a reflow between the two class changes
+      el.classList.remove("is-enter-start");
+    });
+  }, durationMs);
+}

package/src/animations/thinking-states.css

@@ -0,0 +1,65 @@
+/* Thinking states — transitions.dev 28.
+   A status line that swaps copy while a model works. This file owns only the
+   swap: JS exits the old line upward and enters the new one from below, held
+   back by --think-gap. The sweep is `.t-shimmer` from shimmer-text.css — put
+   both classes on the line and keep data-text in sync with the text, or the
+   shimmer paints the wrong words. The hidden sizer carries your longest state
+   and is what stops the box resizing mid-swap. */
+:root {
+  --think-hold: 2000ms;
+  --think-swap: var(--duration-quick, 150ms);
+  --think-gap: 50ms;
+  --think-distance: var(--distance-base, 8px);
+  --think-blur: var(--blur-small, 2px);
+  --think-ease: var(--ease-in-out, ease-in-out);
+}
+
+/* Set your type on .t-think: the sizer only reports the right width if it is
+   set in the same font as the line it stands in for. */
+.t-think {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+}
+.t-think-sizer {
+  display: block;
+  visibility: hidden;
+  white-space: nowrap;
+}
+.t-think-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  white-space: nowrap;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition:
+    transform var(--think-swap) var(--think-ease),
+    filter var(--think-swap) var(--think-ease),
+    opacity var(--think-swap) var(--think-ease);
+  will-change: transform, filter, opacity;
+}
+
+/* The outgoing line floats over the box so both halves animate at once. */
+.t-think-text.is-exit {
+  transform: translateY(calc(var(--think-distance) * -1));
+  filter: blur(var(--think-blur));
+  opacity: 0;
+}
+.t-think-text.is-enter-start {
+  transition: none;
+  transform: translateY(var(--think-distance));
+  filter: blur(var(--think-blur));
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-think-text {
+    transition: none !important;
+    transform: none !important;
+    filter: none !important;
+  }
+}

package/src/animations/upstream-coverage.test.ts

@@ -0,0 +1,65 @@
+/*
+ * The free transitions.dev catalogue has to stay fully owned.
+ */
+
+/*
+ * `pnpm sync:transitions` reports an unowned slug, but only when someone runs it.
+ */
+
+/*
+ * This asserts the same contract offline, off the lockfile, so a sync that lands a new upstream transition cannot be committed without a home for it.
+ */
+
+/*
+ * The homes are not all in this folder: fifteen live on the component that already did the job. See README.md.
+ */
+
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { describe, expect, it } from "vite-plus/test";
+
+/** The runner's cwd is the workspace root or the package; find the package. */
+function packageRoot(): string {
+  let dir = process.cwd();
+  for (;;) {
+    if (existsSync(join(dir, ".upstream", "transitions.lock.json"))) return dir;
+    const candidate = join(dir, "packages", "ui");
+    if (existsSync(join(candidate, ".upstream", "transitions.lock.json"))) return candidate;
+    const parent = dirname(dir);
+    if (parent === dir) throw new Error("transitions.lock.json not found");
+    dir = parent;
+  }
+}
+
+type Lock = {
+  free: number;
+  entries: Record<string, { name: string; sha256: string; local: string | null }>;
+};
+
+const PKG = packageRoot();
+const SRC = resolve(PKG, "src");
+const lock: Lock = JSON.parse(
+  readFileSync(join(PKG, ".upstream", "transitions.lock.json"), "utf8"),
+);
+
+describe("transitions.dev coverage", () => {
+  it("vendors every free transition", () => {
+    expect(Object.keys(lock.entries)).toHaveLength(lock.free);
+  });
+
+  it("gives every free transition an owner that exists", () => {
+    const orphans = Object.entries(lock.entries)
+      .filter(([, entry]) => !entry.local || !existsSync(resolve(SRC, entry.local)))
+      .map(([slug, entry]) => `${slug} -> ${entry.local ?? "(nothing)"}`);
+    expect(orphans).toEqual([]);
+  });
+
+  it("keeps the barrel importing every file in this folder", () => {
+    const dir = join(SRC, "animations");
+    const barrel = readFileSync(join(dir, "index.css"), "utf8");
+    const missing = readdirSync(dir)
+      .filter((file) => file.endsWith(".css") && file !== "index.css")
+      .filter((file) => !barrel.includes(`"./${file}"`));
+    expect(missing).toEqual([]);
+  });
+});

package/src/components/copy/clipboard.test.ts

@@ -0,0 +1,206 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { copyRichText, copyText } from "./clipboard.js";
+
+// Mock navigator.clipboard
+const mockClipboard = {
+  write: vi.fn(),
+  writeText: vi.fn(),
+};
+
+// Mock ClipboardItem
+const mockClipboardItem = vi.fn();
+
+describe("clipboard", () => {
+  beforeEach(() => {
+    vi.stubGlobal("navigator", { clipboard: mockClipboard });
+    vi.stubGlobal("ClipboardItem", mockClipboardItem);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  describe("copyRichText", () => {
+    it("copies HTML with modern Clipboard API", async () => {
+      mockClipboard.write.mockResolvedValue(undefined);
+
+      const result = await copyRichText("<p>Hello <strong>World</strong></p>", "Hello World");
+
+      expect(result).toBe(true);
+      expect(mockClipboardItem).toHaveBeenCalledWith({
+        "text/html": expect.any(Blob),
+        "text/plain": expect.any(Blob),
+      });
+      expect(mockClipboard.write).toHaveBeenCalledTimes(1);
+    });
+
+    it("extracts plain text from HTML when not provided", async () => {
+      mockClipboard.write.mockResolvedValue(undefined);
+
+      await copyRichText("<p>Test</p>");
+
+      // Verify ClipboardItem was called with both HTML and plain text blobs
+      expect(mockClipboardItem).toHaveBeenCalled();
+    });
+
+    it("falls back to plain text when Clipboard API fails", async () => {
+      mockClipboard.write.mockRejectedValue(new Error("Not supported"));
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const result = await copyRichText("<p>Test</p>", "Test");
+
+      expect(result).toBe(true);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith("Test");
+    });
+
+    it("returns false when both methods fail", async () => {
+      mockClipboard.write.mockRejectedValue(new Error("Not supported"));
+      mockClipboard.writeText.mockRejectedValue(new Error("Blocked"));
+
+      const result = await copyRichText("<p>Test</p>", "Test");
+
+      expect(result).toBe(false);
+    });
+
+    it("creates correct blob types", async () => {
+      mockClipboard.write.mockResolvedValue(undefined);
+
+      await copyRichText("<b>Bold</b>", "Bold");
+
+      const clipboardItemCall = mockClipboardItem.mock.calls[0][0];
+
+      expect(clipboardItemCall["text/html"]).toBeInstanceOf(Blob);
+      expect(clipboardItemCall["text/html"].type).toBe("text/html");
+      expect(clipboardItemCall["text/plain"]).toBeInstanceOf(Blob);
+      expect(clipboardItemCall["text/plain"].type).toBe("text/plain");
+    });
+  });
+
+  describe("copyText", () => {
+    it("copies text successfully", async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const result = await copyText("Hello World");
+
+      expect(result).toBe(true);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith("Hello World");
+    });
+
+    it("returns false on failure", async () => {
+      mockClipboard.writeText.mockRejectedValue(new Error("Permission denied"));
+
+      const result = await copyText("Test");
+
+      expect(result).toBe(false);
+    });
+
+    it("handles empty string", async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const result = await copyText("");
+
+      expect(result).toBe(true);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith("");
+    });
+
+    it("handles special characters", async () => {
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const result = await copyText("Hello <>&\"' World");
+
+      expect(result).toBe(true);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith("Hello <>&\"' World");
+    });
+  });
+});
+
+// Test htmlToPlainText server-side conversion (via copyRichText behavior)
+describe("htmlToPlainText (server-side)", () => {
+  beforeEach(() => {
+    // Remove document to simulate server environment
+    vi.stubGlobal("document", undefined);
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        write: vi.fn().mockRejectedValue(new Error("Server")),
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+    vi.stubGlobal("ClipboardItem", vi.fn());
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("converts line breaks", async () => {
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        write: vi.fn().mockRejectedValue(new Error()),
+        writeText: mockWriteText,
+      },
+    });
+
+    await copyRichText("Line 1<br>Line 2<br/>Line 3");
+
+    expect(mockWriteText).toHaveBeenCalledWith("Line 1\nLine 2\nLine 3");
+  });
+
+  it("converts paragraph tags", async () => {
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        write: vi.fn().mockRejectedValue(new Error()),
+        writeText: mockWriteText,
+      },
+    });
+
+    await copyRichText("<p>Para 1</p><p>Para 2</p>");
+
+    expect(mockWriteText).toHaveBeenCalledWith("Para 1\n\nPara 2");
+  });
+
+  it("converts list items to bullets", async () => {
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        write: vi.fn().mockRejectedValue(new Error()),
+        writeText: mockWriteText,
+      },
+    });
+
+    await copyRichText("<ul><li>Item 1</li><li>Item 2</li></ul>");
+
+    expect(mockWriteText).toHaveBeenCalledWith("• Item 1\n• Item 2");
+  });
+
+  it("strips remaining HTML tags", async () => {
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        write: vi.fn().mockRejectedValue(new Error()),
+        writeText: mockWriteText,
+      },
+    });
+
+    await copyRichText("<div><span>Hello</span> <strong>World</strong></div>");
+
+    expect(mockWriteText).toHaveBeenCalledWith("Hello World");
+  });
+
+  it("decodes HTML entities", async () => {
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      clipboard: {
+        write: vi.fn().mockRejectedValue(new Error()),
+        writeText: mockWriteText,
+      },
+    });
+
+    // The function decodes &nbsp; to space, &amp; to &, &lt; to <, &gt; to >
+    await copyRichText("Hello&nbsp;World &amp; Friends &lt;3&gt;");
+
+    expect(mockWriteText).toHaveBeenCalledWith("Hello World & Friends <3>");
+  });
+});

package/src/components/copy/clipboard.ts

@@ -0,0 +1,49 @@
+import { tryCatchAsync } from "@heyramzi/utils";
+
+/**
+ * The one write to the clipboard. A rejected permission, a missing gesture and
+ * an insecure origin get one answer: false. The caller decides what to show.
+ */
+
+/** Plain text. Returns false when the browser refused the write. */
+export async function copyText(value: string): Promise<boolean> {
+  const result = await tryCatchAsync(() => navigator.clipboard.writeText(value));
+  return result.ok;
+}
+
+/**
+ * HTML plus a plain-text twin: Gmail keeps the formatting, Cmd+Shift+V stays
+ * readable. Falls back to plain text.
+ */
+export async function copyRichText(html: string, plainText?: string): Promise<boolean> {
+  const text = plainText ?? htmlToPlainText(html);
+  const result = await tryCatchAsync(() =>
+    navigator.clipboard.write([
+      new ClipboardItem({
+        "text/html": new Blob([html], { type: "text/html" }),
+        "text/plain": new Blob([text], { type: "text/plain" }),
+      }),
+    ]),
+  );
+  return result.ok ? true : copyText(text);
+}
+
+/** The plain-text twin of an HTML fragment. */
+export function htmlToPlainText(html: string): string {
+  if (typeof document === "undefined") {
+    return html
+      .replace(/<br\s*\/?>/gi, "\n")
+      .replace(/<\/p>/gi, "\n\n")
+      .replace(/<\/li>/gi, "\n")
+      .replace(/<li>/gi, "• ")
+      .replace(/<[^>]+>/g, "")
+      .replace(/&nbsp;/g, " ")
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .trim();
+  }
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  return div.textContent || div.innerText || "";
+}

package/src/components/copy/copied.svelte.ts

@@ -0,0 +1,39 @@
+import { copyText } from "./clipboard.js";
+
+/**
+ * The copied flag for a surface whose affordance is a whole row or card rather
+ * than a `CopyButton`. Keyed, so one instance serves a list of rows.
+ */
+export class Copied {
+  /** The key that last copied, or null. Empty string when a surface has one. */
+  key = $state<string | null>(null);
+  #timer: ReturnType<typeof setTimeout> | null = null;
+
+  /** True when anything copied; with a key, true only for that one. */
+  is(key = ""): boolean {
+    return this.key === key;
+  }
+
+  /** Writes, then holds the check for `hold` ms. False when the write failed. */
+  async copy(value: string, key = "", hold = 1400): Promise<boolean> {
+    if (!(await copyText(value))) return false;
+    this.mark(key, hold);
+    return true;
+  }
+
+  /** The confirmation without the write, for a copy this class did not make. */
+  mark(key = "", hold = 1400): void {
+    this.key = key;
+    if (this.#timer) clearTimeout(this.#timer);
+    this.#timer = setTimeout(() => {
+      this.key = null;
+      this.#timer = null;
+    }, hold);
+  }
+
+  reset(): void {
+    if (this.#timer) clearTimeout(this.#timer);
+    this.#timer = null;
+    this.key = null;
+  }
+}