@spatika/react 1.0.0

package/src/composites/Toast.tsx

@@ -0,0 +1,135 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export type ToastTone = "default" | "success" | "warn" | "danger";
+
+export type ToastItem = {
+  id: string;
+  title: string;
+  description?: string;
+  tone?: ToastTone;
+  durationMs?: number;
+};
+
+type ToastContextValue = {
+  toasts: ToastItem[];
+  toast: (item: Omit<ToastItem, "id"> & { id?: string }) => string;
+  dismiss: (id: string) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+let toastSeq = 0;
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <Toaster />");
+  return ctx;
+}
+
+const toneClass: Record<ToastTone, string> = {
+  default: "border-border/60",
+  success: "border-emerald-500/35 bg-emerald-500/8",
+  warn: "border-amber-500/35 bg-amber-500/8",
+  danger: "border-destructive/35 bg-destructive/8",
+};
+
+export type ToasterProps = {
+  children?: ReactNode;
+  className?: string;
+  position?: "top-right" | "bottom-right" | "top-center" | "bottom-center";
+};
+
+/** App-level toast host + provider. Wrap the app once and call useToast(). */
+export function Toaster({
+  children,
+  className,
+  position = "bottom-right",
+}: ToasterProps) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback(
+    (item: Omit<ToastItem, "id"> & { id?: string }) => {
+      const id = item.id ?? `toast-${++toastSeq}`;
+      const next: ToastItem = {
+        id,
+        title: item.title,
+        description: item.description,
+        tone: item.tone ?? "default",
+        durationMs: item.durationMs ?? 4200,
+      };
+      setToasts((prev) => [...prev, next]);
+      if (next.durationMs && next.durationMs > 0) {
+        window.setTimeout(() => dismiss(id), next.durationMs);
+      }
+      return id;
+    },
+    [dismiss],
+  );
+
+  const value = useMemo(() => ({ toasts, toast, dismiss }), [toasts, toast, dismiss]);
+
+  const positionClass =
+    position === "top-right"
+      ? "top-4 right-4"
+      : position === "top-center"
+        ? "top-4 left-1/2 -translate-x-1/2"
+        : position === "bottom-center"
+          ? "bottom-4 left-1/2 -translate-x-1/2"
+          : "bottom-4 right-4";
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div
+        data-slot="toaster"
+        className={cn(
+          "pointer-events-none fixed z-[200] flex w-[min(calc(100vw-1.5rem),22rem)] flex-col gap-2",
+          positionClass,
+          className,
+        )}
+      >
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            data-slot="toast"
+            className={cn(
+              "pointer-events-auto rounded-2xl border bg-background p-3.5 shadow-[0_22px_50px_-24px_rgba(15,23,42,0.55)] dark:bg-card",
+              toneClass[t.tone ?? "default"],
+            )}
+            role="status"
+          >
+            <div className="flex items-start gap-3">
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-bold text-foreground">{t.title}</p>
+                {t.description ? (
+                  <p className="mt-0.5 text-xs text-muted-foreground">{t.description}</p>
+                ) : null}
+              </div>
+              <button
+                type="button"
+                aria-label="Dismiss"
+                className="rounded-lg p-1 text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
+                onClick={() => dismiss(t.id)}
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

package/src/composites/Toolbar.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export function Toolbar({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="toolbar"
+      className={cn("app-toolbar flex flex-wrap items-center gap-2 px-3 py-2", className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/composites/ViewFiltersPanel.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+import { BottomSheet } from "./BottomSheet";
+
+export type ViewFiltersPanelProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  hasActive?: boolean;
+  onClear?: () => void;
+  trigger?: ReactNode;
+  children: ReactNode;
+  topSection?: ReactNode;
+  className?: string;
+  doneLabel?: string;
+  clearLabel?: string;
+};
+
+/**
+ * View & filters panel — glass bottom sheet with clear / done chrome.
+ * Pass arbitrary filter fields as children for full customization.
+ */
+export function ViewFiltersPanel({
+  open,
+  onOpenChange,
+  title = "View & filters",
+  description,
+  hasActive,
+  onClear,
+  trigger,
+  children,
+  topSection,
+  className,
+  doneLabel = "Done",
+  clearLabel = "Clear",
+}: ViewFiltersPanelProps) {
+  return (
+    <>
+      {trigger}
+      <BottomSheet open={open} onOpenChange={onOpenChange} className={className}>
+        <div className="flex items-start justify-between gap-3 border-b border-border/40 px-4 py-3">
+          <div className="min-w-0">
+            <h2 className="text-base font-black tracking-tight">{title}</h2>
+            {description ? (
+              <p className="mt-0.5 text-xs font-medium text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {hasActive && onClear ? (
+              <Button type="button" variant="ghost" size="sm" onClick={onClear}>
+                {clearLabel}
+              </Button>
+            ) : null}
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label="Close"
+              onClick={() => onOpenChange(false)}
+            >
+              <X className="size-4" />
+            </Button>
+          </div>
+        </div>
+        {topSection}
+        <div className="max-h-[60vh] space-y-5 overflow-y-auto px-4 py-4">{children}</div>
+        <div className="border-t border-border/40 p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]">
+          <Button
+            type="button"
+            className="h-9 w-full rounded-xl text-xs font-black uppercase tracking-widest"
+            onClick={() => onOpenChange(false)}
+          >
+            {doneLabel}
+          </Button>
+        </div>
+      </BottomSheet>
+    </>
+  );
+}

package/src/composites/chrome.test.tsx

@@ -0,0 +1,170 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, afterEach, vi } from "vitest";
+import {
+  FloatingPageChromeBar,
+  FloatingPageChromeIdentity,
+  FloatingPageChromeSearchField,
+} from "./FloatingPageChrome";
+import { FilterSheet } from "./FilterSheet";
+import { CoverHero } from "./CoverHero";
+import { CoverPattern } from "./CoverPattern";
+import { PageStickyHeader } from "./PageStickyHeader";
+import { MobileTabBar } from "./MobileTabBar";
+import { ProfileHero } from "./ProfileHero";
+import { Home } from "lucide-react";
+import { getCoverPattern } from "../lib/cover-pattern";
+import { useCoverChromeBleed } from "../lib/use-cover-chrome-bleed";
+
+describe("FloatingPageChrome", () => {
+  it("renders identity title, count, and search", async () => {
+    const user = userEvent.setup();
+    const onBack = vi.fn();
+    const onChange = vi.fn();
+    render(
+      <FloatingPageChromeBar
+        identity={
+          <FloatingPageChromeIdentity title="People" count={12} onBack={onBack} />
+        }
+        search={
+          <FloatingPageChromeSearchField
+            value="al"
+            onChange={onChange}
+            onClear={() => onChange("")}
+            placeholder="Search people…"
+          />
+        }
+      />,
+    );
+    expect(screen.getByText("People")).toBeInTheDocument();
+    expect(screen.getByText("12")).toBeInTheDocument();
+    await user.click(screen.getByLabelText("Go back"));
+    expect(onBack).toHaveBeenCalled();
+    expect(screen.getByPlaceholderText("Search people…")).toHaveValue("al");
+    expect(document.querySelector(".glass-page-toolbar")).toBeTruthy();
+  });
+
+  it("pins children in a nested scroller", () => {
+    render(
+      <FloatingPageChromeBar
+        identity={<FloatingPageChromeIdentity title="People" count={4} />}
+      >
+        <p>Directory body</p>
+      </FloatingPageChromeBar>,
+    );
+    expect(document.querySelector(".app-page-chrome")).toBeTruthy();
+    expect(document.querySelector(".app-page-chrome-body")).toHaveTextContent("Directory body");
+  });
+});
+
+describe("PageStickyHeader", () => {
+  it("renders title, count, and density slots", () => {
+    render(
+      <PageStickyHeader
+        offsetClassName="top-0"
+        title="Insights"
+        subtitle="Last 30 days"
+        count={8}
+      />,
+    );
+    expect(screen.getByText("Insights")).toBeInTheDocument();
+    expect(screen.getByText("Last 30 days")).toBeInTheDocument();
+    expect(screen.getByText("8")).toBeInTheDocument();
+  });
+});
+
+describe("FilterSheet", () => {
+  it("opens a desktop popover from the chrome trigger", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <FilterSheet
+        open={false}
+        onOpenChange={onOpenChange}
+        title="View & filters"
+        trigger={<button type="button">Filters</button>}
+      >
+        <p>Status</p>
+      </FilterSheet>,
+    );
+    await user.click(screen.getByText("Filters"));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe("CoverPattern", () => {
+  it("seeds a stable scene kind", () => {
+    const a = getCoverPattern({ seed: "alex", hue: 210 });
+    const b = getCoverPattern({ seed: "alex", hue: 210 });
+    expect(a.kind).toBe(b.kind);
+    expect(a.headerInk).toMatch(/light|dark/);
+    expect(a.chromeInk).toMatch(/light|dark/);
+  });
+
+  it("renders a cover pattern node", () => {
+    const { container } = render(<CoverPattern seed="alex" hue={210} />);
+    expect(container.querySelector("[data-cover-pattern]")).toBeTruthy();
+  });
+});
+
+describe("CoverHero", () => {
+  it("renders title, kicker, and facts", () => {
+    render(
+      <CoverHero
+        title="Friday night · Studio district"
+        kicker={<span>Meetup Story</span>}
+        facts={[{ key: "when", label: "When", value: "Fri 14 Mar" }]}
+        avatars={[{ name: "Alex Rivera" }]}
+      />,
+    );
+    expect(screen.getByText("Friday night · Studio district")).toBeInTheDocument();
+    expect(screen.getByText("Meetup Story")).toBeInTheDocument();
+    expect(screen.getByText("When")).toBeInTheDocument();
+  });
+});
+
+describe("ProfileHero", () => {
+  it("renders name, alias, and a notched identity plate", () => {
+    const { container } = render(
+      <ProfileHero name="Alex Chen" alias="Product designer" coverSeed="alex" />,
+    );
+    expect(screen.getByText("Alex Chen")).toBeInTheDocument();
+    expect(screen.getByText("Product designer")).toBeInTheDocument();
+    expect(container.querySelector(".profile-identity")).toBeTruthy();
+    expect(container.querySelector(".profile-identity__plate")).toBeTruthy();
+  });
+});
+
+describe("MobileTabBar", () => {
+  it("renders a floating capsule with an active item", () => {
+    const { container } = render(
+      <MobileTabBar
+        items={[{ id: "home", label: "Home", icon: Home, active: true }]}
+      />,
+    );
+    expect(container.querySelector("[data-app-tabbar]")).toBeTruthy();
+    expect(screen.getByText("Home")).toBeInTheDocument();
+  });
+});
+
+function BleedProbe({ active }: { active: boolean }) {
+  useCoverChromeBleed(active, "light");
+  return <span>probe</span>;
+}
+
+describe("useCoverChromeBleed", () => {
+  afterEach(() => {
+    document.documentElement.removeAttribute("data-cover-chrome-bleed");
+    document.documentElement.removeAttribute("data-cover-chrome-ink");
+    document.documentElement.removeAttribute("data-profile-cover-bleed");
+    document.documentElement.removeAttribute("data-profile-cover-ink");
+  });
+
+  it("sets and clears cover bleed attributes", () => {
+    const { unmount } = render(<BleedProbe active />);
+    expect(document.documentElement.getAttribute("data-cover-chrome-bleed")).toBe("true");
+    expect(document.documentElement.getAttribute("data-cover-chrome-ink")).toBe("light");
+    unmount();
+    expect(document.documentElement.getAttribute("data-cover-chrome-bleed")).toBeNull();
+  });
+});

package/src/composites/smoke.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { EmptyState } from "./EmptyState";
+import { FormField } from "./FormField";
+import { PageHeader } from "./PageHeader";
+import { StatusDot } from "./StatusDot";
+import { EntityCard, EntityCardChip, EntityCardMeta, EntityCardTitle } from "./EntityCard";
+
+describe("composites smoke", () => {
+  it("renders EmptyState", () => {
+    render(<EmptyState title="Nothing here" description="Try again" />);
+    expect(screen.getByText("Nothing here")).toBeInTheDocument();
+    expect(screen.getByText("Try again")).toBeInTheDocument();
+  });
+
+  it("renders PageHeader", () => {
+    render(<PageHeader title="Directory" description="People" />);
+    expect(screen.getByText("Directory")).toBeInTheDocument();
+  });
+
+  it("renders FormField with label", () => {
+    render(
+      <FormField id="email" label="Email">
+        <input id="email" aria-label="Email" />
+      </FormField>,
+    );
+    expect(screen.getByText("Email")).toBeInTheDocument();
+  });
+
+  it("renders StatusDot", () => {
+    const { container } = render(<StatusDot tone="success" />);
+    expect(container.querySelector('[data-slot="status-dot"]')).toBeTruthy();
+  });
+
+  it("renders EntityCard rows", () => {
+    render(
+      <EntityCard interactive>
+        <div>
+          <EntityCardTitle>Alex Chen</EntityCardTitle>
+          <EntityCardMeta>Product designer</EntityCardMeta>
+        </div>
+        <EntityCardChip>Active</EntityCardChip>
+      </EntityCard>,
+    );
+    expect(screen.getByText("Alex Chen")).toBeInTheDocument();
+    expect(screen.getByText("Product designer")).toBeInTheDocument();
+    expect(screen.getByText("Active")).toBeInTheDocument();
+  });
+});