{/* Main content */}
@@ -376,6 +399,6 @@ export function ComponentBuilder({
-
+
);
}
diff --git a/components/sandbox/component-library.tsx b/components/sandbox/component-library.tsx
new file mode 100644
index 0000000..b75eee5
--- /dev/null
+++ b/components/sandbox/component-library.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Copy, Download, Pencil, Plus, Puzzle, Trash2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { CompositeRenderer } from "@/components/composite/composite-renderer";
+import { applyTheme } from "@/lib/theme/css-vars";
+import { ModalOverlay } from "./modal-overlay";
+import type { CompositeDefinition } from "@/lib/composite/types";
+import type { ThemeTokens } from "@/lib/theme/types";
+
+type ComponentLibraryProps = {
+ composites: CompositeDefinition[];
+ themeTokens: ThemeTokens;
+ onEdit: (def: CompositeDefinition) => void;
+ onDuplicate: (def: CompositeDefinition) => void;
+ onDelete: (id: string) => void;
+ onExportOne: (def: CompositeDefinition) => void;
+ onExportAll: () => void;
+ onCreate: () => void;
+ onClose: () => void;
+};
+
+const UNCATEGORIZED = "Uncategorized";
+
+// Intl does the pluralisation and the "ago" phrasing, so there is no date library here
+// and no hand-rolled plural table.
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+const DIVISIONS: [limit: number, unit: Intl.RelativeTimeFormatUnit][] = [
+ [60, "second"],
+ [60, "minute"],
+ [24, "hour"],
+ [7, "day"],
+ [4.34524, "week"],
+ [12, "month"],
+ [Number.POSITIVE_INFINITY, "year"],
+];
+
+/** "-" when the component predates timestamps, "just now" under a minute, else "2 hours ago". */
+export function relativeTime(timestamp: number | undefined, now: number = Date.now()): string {
+ if (typeof timestamp !== "number" || !Number.isFinite(timestamp)) return "-";
+ const seconds = (timestamp - now) / 1000;
+ if (Math.abs(seconds) < 45) return "just now";
+ let value = seconds;
+ for (const [limit, unit] of DIVISIONS) {
+ if (Math.abs(value) < limit) return rtf.format(Math.round(value), unit);
+ value /= limit;
+ }
+ return "-";
+}
+
+function categoryOf(def: CompositeDefinition): string {
+ return def.category?.trim() || UNCATEGORIZED;
+}
+
+function PreviewErrorFallback({ error }: { error: unknown }) {
+ // react-error-boundary v6 types the error as unknown, so narrow before reading .message.
+ const message = error instanceof Error ? error.message : String(error);
+ return (
+
+ !
+
{message}
+
+ );
+}
+
+function LibraryCard({
+ def,
+ themeTokens,
+ onEdit,
+ onDuplicate,
+ onDelete,
+ onExportOne,
+}: {
+ def: CompositeDefinition;
+ themeTokens: ThemeTokens;
+ onEdit: (def: CompositeDefinition) => void;
+ onDuplicate: (def: CompositeDefinition) => void;
+ onDelete: (id: string) => void;
+ onExportOne: (def: CompositeDefinition) => void;
+}) {
+ // One ref per card: the --sandy-* vars are scoped to this card's preview element,
+ // never to document.documentElement.
+ const previewRef = useRef(null);
+
+ useEffect(() => {
+ if (previewRef.current) {
+ applyTheme(themeTokens, previewRef.current);
+ }
+ }, [themeTokens]);
+
+ return (
+
+ {/* Live preview, isolated so one broken definition cannot take down the library */}
+
+
+
+
+
+
+
+
+
{def.name}
+
+ {categoryOf(def)}
+
+
+
+ {def.description && (
+
{def.description}
+ )}
+
+
{`Updated ${relativeTime(def.updatedAt)}`}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function ComponentLibrary({
+ composites,
+ themeTokens,
+ onEdit,
+ onDuplicate,
+ onDelete,
+ onExportOne,
+ onExportAll,
+ onCreate,
+ onClose,
+}: ComponentLibraryProps) {
+ const [search, setSearch] = useState("");
+ const [category, setCategory] = useState("All");
+
+ const categories = useMemo(() => {
+ const seen = new Set(composites.map(categoryOf));
+ return ["All", ...[...seen].sort((a, b) => a.localeCompare(b))];
+ }, [composites]);
+
+ // Deleting the last component in a category removes its chip, but the selected
+ // category is plain state and would keep filtering everything out - leaving an empty
+ // grid with no visible filter to explain it. Treat a category that no longer exists
+ // as no filter, so the stale state is unreachable rather than merely recoverable.
+ const activeCategory = categories.includes(category) ? category : "All";
+
+ const visible = useMemo(() => {
+ const query = search.trim().toLowerCase();
+ return composites
+ .filter((def) => activeCategory === "All" || categoryOf(def) === activeCategory)
+ .filter((def) => {
+ if (!query) return true;
+ return [def.name, def.description ?? "", categoryOf(def)].some((field) =>
+ field.toLowerCase().includes(query),
+ );
+ })
+ .sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0));
+ }, [composites, search, activeCategory]);
+
+ const isEmptyLibrary = composites.length === 0;
+
+ return (
+
+ {/* Header */}
+
+
Component Library
+ {/* Live so that typing in the search field announces the result count, instead
+ of the user having to leave the input and browse the grid to find out. */}
+
+ {visible.length === composites.length
+ ? `${composites.length} ${composites.length === 1 ? "component" : "components"}`
+ : `${visible.length} of ${composites.length} components`}
+
+
+
+
+
+
+ Build a component out of primitives and it shows up here.
+
+
+
+
+ ) : visible.length === 0 ? (
+
+
+
+
No components match this search
+
Try a different term or clear the search.
+
+
+
+ ) : (
+
+ {visible.map((def) => (
+
+ ))}
+
+ )}
+
+
+ );
+}
diff --git a/components/sandbox/modal-overlay.tsx b/components/sandbox/modal-overlay.tsx
new file mode 100644
index 0000000..a6d50c5
--- /dev/null
+++ b/components/sandbox/modal-overlay.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+type ModalOverlayProps = {
+ /** Accessible name for the dialog. */
+ label: string;
+ onClose: () => void;
+ children: React.ReactNode;
+};
+
+/**
+ * Full-screen modal surface for the builder and the library.
+ *
+ * Both used to be a plain `fixed inset-0` div, which paints over the sandbox without
+ * actually being modal: focus stayed on the toolbar button behind it, Tab walked the
+ * invisible editor and toolbar underneath, Escape did nothing, and a screen reader read
+ * the whole covered page as if it were still on screen.
+ *
+ * A native