@slugbase/ui 0.0.0

package/src/components/Skeleton.tsx

@@ -0,0 +1,94 @@
+import type { CSSProperties, ReactNode } from "react";
+
+export type SkeletonProps = {
+  className?: string;
+  style?: CSSProperties;
+  testId?: string;
+  children?: ReactNode;
+};
+
+/** Shimmer placeholder block - prototype `.sk` pattern (spec §23). */
+export function Skeleton({
+  className = "",
+  style,
+  testId,
+  children,
+}: SkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={`animate-shimmer rounded-sm bg-[linear-gradient(90deg,var(--raised)_0%,var(--raised-2)_50%,var(--raised)_100%)] bg-[length:200%_100%] motion-reduce:animate-none ${className}`}
+      data-testid={testId}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type SkeletonListProps = {
+  rows?: number;
+  testId?: string;
+};
+
+/** Horizontal list-row skeletons for table/list surfaces. */
+export function SkeletonList({ rows = 6, testId = "skeleton-list" }: SkeletonListProps) {
+  return (
+    <div className="flex flex-col gap-sp-3" data-testid={testId} aria-busy="true" aria-live="polite">
+      {Array.from({ length: rows }).map((_, index) => (
+        <div
+          key={index}
+          className="flex items-center gap-sp-5 rounded-lg border border-[color:var(--border-subtle)] bg-raised px-sp-5 py-sp-5"
+        >
+          <Skeleton className="h-8 w-8 shrink-0 rounded-md" />
+          <div className="flex min-w-0 flex-1 flex-col gap-sp-3">
+            <Skeleton className="h-3 w-[85%]" />
+            <Skeleton className="h-2.5 w-[55%]" />
+          </div>
+          <Skeleton className="ml-auto h-8 w-20 shrink-0" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export type SkeletonCardGridProps = {
+  count?: number;
+  testId?: string;
+};
+
+/** Card grid skeleton matching bookmark grid loading state in the prototype. */
+export function SkeletonCardGrid({
+  count = 9,
+  testId = "skeleton-card-grid",
+}: SkeletonCardGridProps) {
+  return (
+    <div
+      className="grid gap-sp-4 sm:grid-cols-2 lg:grid-cols-3"
+      data-testid={testId}
+      aria-busy="true"
+      aria-live="polite"
+    >
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          key={index}
+          className="flex flex-col gap-sp-5 rounded-lg border border-[color:var(--border-subtle)] bg-raised p-sp-5"
+        >
+          <div className="flex gap-sp-4">
+            <Skeleton className="h-8 w-8 shrink-0 rounded-md" />
+            <div className="flex min-w-0 flex-1 flex-col gap-sp-3">
+              <Skeleton className="h-3 w-[85%]" />
+              <Skeleton className="h-2.5 w-[55%]" />
+            </div>
+          </div>
+          <Skeleton className="h-2.5 w-[70%]" />
+          <Skeleton className="h-[22px] w-[120px] rounded-sm" />
+          <div className="mt-sp-2 flex gap-sp-3">
+            <Skeleton className="h-2.5 w-[70px]" />
+            <Skeleton className="ml-auto h-4 w-10 rounded-sm" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/SlugBadge.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export type SlugBadgeProps = {
+  slug: string;
+  icon?: ReactNode;
+  className?: string;
+};
+
+/**
+ * Inline slug address pill - accent-subtle bg, mono small font.
+ * Matches prototype `.slug-line` pattern from app.css.
+ * Used on bookmark cards and table rows.
+ */
+export function SlugBadge({ slug, icon, className = "" }: SlugBadgeProps) {
+  return (
+    <span
+      className={`inline-flex max-w-full items-center gap-[6px] rounded-sm border border-[color:var(--accent-border)] bg-accent-subtle text-accent-text ${className}`}
+      style={{
+        height: "22px",
+        padding: "0 7px 0 6px",
+        fontFamily: "var(--font-mono)",
+        fontSize: "var(--text-small)",
+        fontWeight: "var(--weight-medium)",
+        lineHeight: "1",
+      }}
+    >
+      {icon ? (
+        <span aria-hidden="true" className="shrink-0 opacity-80">
+          {icon}
+        </span>
+      ) : null}
+      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{slug}</span>
+    </span>
+  );
+}

package/src/components/Tag.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+export type TagProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+/**
+ * Tag pill - `#` prefix at 45% opacity, mono micro font.
+ * Matches prototype `.tag` pattern from app.css.
+ */
+export function Tag({ children, className = "" }: TagProps) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 whitespace-nowrap rounded-sm border border-[color:var(--border-subtle)] bg-raised-2 text-fg-muted ${className}`}
+      style={{
+        height: "19px",
+        padding: "0 7px",
+        fontFamily: "var(--font-mono)",
+        fontSize: "var(--text-micro)",
+        fontWeight: "var(--weight-medium)",
+        lineHeight: "1",
+      }}
+    >
+      <span aria-hidden="true" style={{ opacity: 0.45 }}>
+        #
+      </span>
+      {children}
+    </span>
+  );
+}

package/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,60 @@
+import type { ThemePreference } from "../theme/theme-types.js";
+import { useTheme } from "../theme/theme-context.js";
+
+export type ThemeSwitcherLabels = {
+  group: string;
+  light: string;
+  dark: string;
+  auto: string;
+};
+
+const OPTIONS: ThemePreference[] = ["light", "dark", "auto"];
+
+export type ThemeSwitcherProps = {
+  labels: ThemeSwitcherLabels;
+};
+
+export function ThemeSwitcher({ labels }: ThemeSwitcherProps) {
+  const { preference, setPreference } = useTheme();
+
+  const labelFor = (value: ThemePreference): string => {
+    switch (value) {
+      case "light":
+        return labels.light;
+      case "dark":
+        return labels.dark;
+      case "auto":
+        return labels.auto;
+    }
+  };
+
+  return (
+    <div
+      className="inline-flex rounded-md border border-[color:var(--border)] bg-raised p-sp-2"
+      role="group"
+      aria-label={labels.group}
+      data-testid="theme-switcher"
+    >
+      {OPTIONS.map((value) => {
+        const active = preference === value;
+        return (
+          <button
+            key={value}
+            type="button"
+            aria-pressed={active}
+            className={
+              active
+                ? "rounded-sm bg-accent px-sp-5 py-sp-3 text-small font-medium text-accent-fg transition-micro"
+                : "rounded-sm px-sp-5 py-sp-3 text-small text-fg-muted transition-micro hover:bg-raised-2 hover:text-fg"
+            }
+            onClick={() => {
+              setPreference(value);
+            }}
+          >
+            {labelFor(value)}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ToastProvider.spec.tsx

@@ -0,0 +1,60 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ToastProvider, useToast } from "./ToastProvider.js";
+
+function ToastHarness() {
+  const { toast } = useToast();
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        toast({ title: "Saved", description: "Profile updated", kind: "success" });
+      }}
+    >
+      Show toast
+    </button>
+  );
+}
+
+describe("ToastProvider", () => {
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it("shows and dismisses toasts with keyboard-friendly controls", () => {
+    render(
+      <ToastProvider dismissLabel="Dismiss notification">
+        <ToastHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Show toast" }));
+    expect(screen.getByRole("status")).toBeTruthy();
+    expect(screen.getByText("Saved")).toBeTruthy();
+    expect(screen.getByText("Profile updated")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss notification" }));
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  it("auto-dismisses after the default duration", () => {
+    vi.useFakeTimers();
+    render(
+      <ToastProvider dismissLabel="Dismiss notification">
+        <ToastHarness />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Show toast" }));
+    expect(screen.getByText("Saved")).toBeTruthy();
+
+    act(() => {
+      vi.advanceTimersByTime(3200);
+    });
+
+    expect(screen.queryByText("Saved")).toBeNull();
+    vi.useRealTimers();
+  });
+});

package/src/components/ToastProvider.tsx

@@ -0,0 +1,167 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type ToastKind = "success" | "info" | "warning" | "danger";
+
+export type ToastInput = {
+  title: ReactNode;
+  description?: ReactNode;
+  kind?: ToastKind;
+  durationMs?: number;
+};
+
+type ToastRecord = ToastInput & {
+  id: string;
+};
+
+export type ToastContextValue = {
+  toast: (input: ToastInput) => string;
+  dismiss: (id: string) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const DEFAULT_DURATION_MS = 3200;
+
+const kindClasses: Record<ToastKind, string> = {
+  success: "bg-[color:var(--success-subtle)] text-success-text",
+  info: "bg-[color:var(--accent-subtle)] text-accent-text",
+  warning: "bg-[color:var(--warning-subtle)] text-warning-text",
+  danger: "bg-[color:var(--danger-subtle)] text-danger-text",
+};
+
+export type ToastProviderProps = {
+  children: ReactNode;
+  dismissLabel: string;
+};
+
+function ToastViewport({
+  items,
+  onDismiss,
+  dismissLabel,
+}: {
+  items: ToastRecord[];
+  onDismiss: (id: string) => void;
+  dismissLabel: string;
+}) {
+  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  useEffect(() => {
+    const timers = timersRef.current;
+    for (const item of items) {
+      if (timers.has(item.id)) continue;
+      const duration = item.durationMs ?? DEFAULT_DURATION_MS;
+      timers.set(
+        item.id,
+        setTimeout(() => {
+          onDismiss(item.id);
+          timers.delete(item.id);
+        }, duration),
+      );
+    }
+    return () => {
+      for (const timer of timers.values()) {
+        clearTimeout(timer);
+      }
+      timers.clear();
+    };
+  }, [items, onDismiss]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div
+      className="pointer-events-none fixed bottom-sp-7 right-sp-7 z-[120] flex max-w-[min(100vw-2rem,360px)] flex-col gap-sp-4"
+      aria-live="polite"
+      aria-relevant="additions"
+      data-testid="toast-viewport"
+    >
+      {items.map((item) => {
+        const kind = item.kind ?? "success";
+        return (
+          <div
+            key={item.id}
+            className="pointer-events-auto flex animate-toast-in items-start gap-sp-4 rounded-lg border border-[color:var(--border-strong)] bg-overlay p-sp-5 shadow-overlay motion-reduce:animate-none"
+            data-testid={`toast-${item.id}`}
+            role="status"
+          >
+            <span
+              aria-hidden="true"
+              className={`grid h-[26px] w-[26px] shrink-0 place-items-center rounded-md ${kindClasses[kind]}`}
+            >
+              <span className="h-2 w-2 rounded-full bg-current" />
+            </span>
+            <div className="min-w-0 flex-1 text-left">
+              <p
+                className="m-0 text-fg"
+                style={{ fontSize: "var(--text-body)", lineHeight: "var(--lh-body)" }}
+              >
+                {item.title}
+              </p>
+              {item.description ? (
+                <p
+                  className="mt-sp-1 m-0 text-fg-subtle"
+                  style={{ fontSize: "var(--text-small)", lineHeight: "var(--lh-small)" }}
+                >
+                  {item.description}
+                </p>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              className="shrink-0 rounded-sm px-sp-2 py-sp-1 text-fg-subtle transition-colors hover:bg-raised hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+              onClick={() => {
+                onDismiss(item.id);
+              }}
+              aria-label={dismissLabel}
+            >
+              ×
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ToastProvider({ children, dismissLabel }: ToastProviderProps) {
+  const [items, setItems] = useState<ToastRecord[]>([]);
+
+  const dismiss = useCallback((id: string) => {
+    setItems((current) => current.filter((item) => item.id !== id));
+  }, []);
+
+  const toast = useCallback((input: ToastInput) => {
+    const id =
+      typeof crypto !== "undefined" && "randomUUID" in crypto
+        ? crypto.randomUUID()
+        : `${String(Date.now())}-${Math.random().toString(16).slice(2)}`;
+    setItems((current) => [...current, { ...input, id }]);
+    return id;
+  }, []);
+
+  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastViewport items={items} onDismiss={dismiss} dismissLabel={dismissLabel} />
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return context;
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,33 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { ReactNode } from "react";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export type TooltipContentProps = {
+  children: ReactNode;
+  className?: string;
+  testId?: string;
+  sideOffset?: number;
+};
+
+export function TooltipContent({
+  children,
+  className = "",
+  testId,
+  sideOffset = 4,
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-testid={testId}
+        sideOffset={sideOffset}
+        className={`z-[130] max-w-[280px] rounded-md border border-[color:var(--border-subtle)] bg-overlay px-sp-4 py-sp-3 text-small text-fg shadow-overlay ${className}`}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="fill-[color:var(--overlay)]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}

package/src/components/__snapshots__/AppShell.spec.tsx.snap

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppShell > matches base layout snapshot 1`] = `
+<div>
+  <div
+    class="grid h-screen overflow-hidden bg-canvas font-sans text-body text-fg"
+    data-testid="app-shell"
+    style="grid-template-columns: 248px 1fr;"
+  >
+    <aside
+      class="flex min-h-0 flex-col overflow-y-auto border-r border-[color:var(--border-subtle)] bg-base"
+      data-testid="app-shell-sidebar"
+    >
+      <div>
+        Sidebar content
+      </div>
+    </aside>
+    <div
+      class="flex min-h-0 min-w-0 flex-col overflow-hidden"
+    >
+      <header
+        class="flex shrink-0 items-center border-b border-[color:var(--border-subtle)]"
+        data-testid="app-shell-topbar"
+        style="height: 52px;"
+      >
+        <div>
+          TopBar content
+        </div>
+      </header>
+      <main
+        class="flex-1 overflow-y-auto bg-canvas p-sp-7"
+        data-testid="app-shell-main"
+      >
+        <p>
+          Content
+        </p>
+      </main>
+    </div>
+  </div>
+</div>
+`;

package/src/components/auth-kit.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AuthHeading, AuthShell, ErrorBanner } from "./auth-kit.js";
+
+describe("AuthShell", () => {
+  it("renders brand copy and form children", () => {
+    render(
+      <AuthShell
+        brand={{
+          headline: "Headline",
+          subline: "Subline",
+          footer: "Footer",
+        }}
+        showSlugRows={false}
+      >
+        <AuthHeading title="Sign in" />
+        <ErrorBanner message="Invalid credentials" />
+      </AuthShell>,
+    );
+
+    expect(screen.getByRole("heading", { name: "Sign in" })).toBeTruthy();
+    expect(screen.getByRole("alert").textContent).toContain("Invalid credentials");
+  });
+});