@vvedantb/ui 0.12.1 → 0.13.0

package/src/artifacts/artifact-dialogs.tsx

@@ -0,0 +1,153 @@
+import { useState, type ReactNode } from "react";
+import { toast } from "sonner";
+import { useRequestConfirm } from "../../app/src/confirm/useRequestConfirm";
+import { ConfirmDialog } from "../ui/confirm-dialog";
+import { Input } from "../ui/input";
+
+export type ArtifactRenameDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  onSave: () => void;
+  pending?: boolean;
+};
+
+/** "Rename artifact" dialog with one name field. Enter saves. Save stays disabled while the name is blank. */
+export function ArtifactRenameDialog({ open, onOpenChange, value, onValueChange, onSave, pending }: ArtifactRenameDialogProps) {
+  const blank = value.trim().length === 0;
+  return (
+    <ConfirmDialog.Root alert={false} pending={pending} open={open} onOpenChange={onOpenChange}>
+      <ConfirmDialog.Content className="max-w-sm">
+        <ConfirmDialog.Header>
+          <ConfirmDialog.Title>Rename artifact</ConfirmDialog.Title>
+          <ConfirmDialog.Description>Choose a new name.</ConfirmDialog.Description>
+        </ConfirmDialog.Header>
+        <Input
+          autoFocus
+          value={value}
+          aria-label="Artifact name"
+          onChange={(event) => onValueChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter" || blank || pending) return;
+            event.preventDefault();
+            onSave();
+          }}
+        />
+        <ConfirmDialog.Footer>
+          <ConfirmDialog.Cancel variant="secondary" />
+          <ConfirmDialog.Action disabled={blank} onClick={onSave}>
+            Save
+          </ConfirmDialog.Action>
+        </ConfirmDialog.Footer>
+      </ConfirmDialog.Content>
+    </ConfirmDialog.Root>
+  );
+}
+
+export type ArtifactDeleteDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  onConfirm: () => void;
+  pending?: boolean;
+};
+
+/** "Delete <title>?" confirmation. Cancel is focused on open. */
+export function ArtifactDeleteDialog({ open, onOpenChange, title, onConfirm, pending }: ArtifactDeleteDialogProps) {
+  return (
+    <ConfirmDialog.Root alert={false} focusCancel pending={pending} open={open} onOpenChange={onOpenChange}>
+      <ConfirmDialog.Content className="max-w-sm" role="alertdialog">
+        <ConfirmDialog.Header>
+          <ConfirmDialog.Title>Delete &quot;{title}&quot;?</ConfirmDialog.Title>
+          <ConfirmDialog.Description>This cannot be undone.</ConfirmDialog.Description>
+        </ConfirmDialog.Header>
+        <ConfirmDialog.Footer>
+          <ConfirmDialog.Cancel variant="secondary" />
+          <ConfirmDialog.Action variant="destructive" onClick={onConfirm}>
+            Delete
+          </ConfirmDialog.Action>
+        </ConfirmDialog.Footer>
+      </ConfirmDialog.Content>
+    </ConfirmDialog.Root>
+  );
+}
+
+export type ArtifactEditCallbacks = {
+  /** Called with the trimmed new title. The dialog closes when it resolves and stays open when it rejects. */
+  onRename?: (title: string) => void | Promise<void>;
+  /** Called after the delete dialog, or straight away on an Alt-click. */
+  onDelete?: () => void | Promise<void>;
+};
+
+/**
+ * Rename and delete dialog state shared by the card and the viewer. `dialogs`
+ * must be rendered; `requestDelete(event)` skips the dialog on an Alt-click.
+ */
+export function useArtifactEditDialogs({ title, onRename, onDelete }: ArtifactEditCallbacks & { title: string }) {
+  const [renameOpen, setRenameOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(title);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const { request } = useRequestConfirm();
+
+  const run = async (action: () => void | Promise<void>, failure: string, close: () => void) => {
+    setPending(true);
+    try {
+      await action();
+      close();
+    } catch {
+      toast.error(failure);
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const rename = () => {
+    const next = renameValue.trim();
+    if (!onRename || next.length === 0) return;
+    if (next === title) {
+      setRenameOpen(false);
+      return;
+    }
+    void run(() => onRename(next), "Couldn't rename artifact", () => setRenameOpen(false));
+  };
+
+  const remove = () => {
+    if (!onDelete) return;
+    void run(onDelete, "Couldn't delete artifact", () => setDeleteOpen(false));
+  };
+
+  const dialogs: ReactNode = (
+    <>
+      {onRename ? (
+        <ArtifactRenameDialog
+          open={renameOpen}
+          onOpenChange={setRenameOpen}
+          value={renameValue}
+          onValueChange={setRenameValue}
+          onSave={rename}
+          pending={pending}
+        />
+      ) : null}
+      {onDelete ? (
+        <ArtifactDeleteDialog
+          open={deleteOpen}
+          onOpenChange={setDeleteOpen}
+          title={title}
+          onConfirm={remove}
+          pending={pending}
+        />
+      ) : null}
+    </>
+  );
+
+  return {
+    startRename: () => {
+      setRenameValue(title);
+      setRenameOpen(true);
+    },
+    requestDelete: (event?: { altKey?: boolean }) => request(() => setDeleteOpen(true), remove, event),
+    dialogs,
+  };
+}

package/src/artifacts/artifact-file.ts

@@ -0,0 +1,26 @@
+import { toast } from "sonner";
+import { ARTIFACT_FORMAT_FILES, artifactFileName, type ArtifactFormat } from "@vvedantb/server";
+
+/** Saves `body` as a file named after `title`, with the extension and MIME type of `format`. */
+export function downloadArtifactBody(title: string, format: ArtifactFormat, body: string): void {
+  const url = URL.createObjectURL(new Blob([body], { type: ARTIFACT_FORMAT_FILES[format].mime }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = artifactFileName(title, format);
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/** Copies `body` to the clipboard and toasts the outcome. */
+export async function copyArtifactBody(body: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(body);
+    toast.success("Copied");
+  } catch {
+    toast.error("Couldn't copy");
+  }
+}
+
+export function openArtifactInNewTab(href: string): void {
+  window.open(href, "_blank", "noopener");
+}

package/src/artifacts/artifact-frame.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useEffect, useRef, type ComponentProps } from "react";
+import { z } from "zod";
+import {
+  ARTIFACT_PORT_TYPE,
+  ARTIFACT_READY_TYPE,
+  ARTIFACT_STATE_DEBOUNCE_MS,
+  ARTIFACT_STATE_MAX_WAIT_MS,
+  ARTIFACT_STATE_RESULT_TYPE,
+  ARTIFACT_STATE_TYPE,
+  applyArtifactStateOp,
+  createTrailingMaxDebounce,
+  parseArtifactStateOp,
+  wrapArtifactDocument,
+  type ArtifactFormat,
+  type ArtifactStateMap,
+  type ArtifactTemplateName,
+} from "@vvedantb/server";
+import { cn } from "../utils/cn";
+
+/**
+ * Where one user's state for one artifact lives. `load` runs once per
+ * document; `save` gets the whole map (replace, not merge) after the debounce
+ * and on `pagehide` or unmount. Keep the object stable for an artifact: a new
+ * store reloads the frame.
+ */
+export type ArtifactStateStore = {
+  load(): Promise<ArtifactStateMap>;
+  save(data: ArtifactStateMap): Promise<void>;
+  /** A failed load or save. After a failed load the frame starts empty and never saves, so it cannot overwrite the stored state. */
+  onError?(error: Error, phase: "load" | "save"): void;
+};
+
+export type ArtifactFrameProps = Omit<ComponentProps<"iframe">, "src" | "srcDoc" | "sandbox" | "title" | "ref"> & {
+  body: string;
+  format: ArtifactFormat;
+  /** The iframe's accessible name, and the heading of a built-in template when the body has none. */
+  title: string;
+  /** From `stateSpec.template`. */
+  template?: ArtifactTemplateName;
+  /** Without a store the state starts empty and lives until the frame unmounts. */
+  store?: ArtifactStateStore;
+  /** Extra globals for the guest state API, e.g. `["app"]` for `window.app.state`. */
+  stateGlobalAliases?: readonly string[];
+  /** Save this long after the last change. Default `ARTIFACT_STATE_DEBOUNCE_MS` (5 s). */
+  saveDelayMs?: number;
+  /** Save at least this often while changes keep coming. Default `ARTIFACT_STATE_MAX_WAIT_MS` (30 s). */
+  saveMaxWaitMs?: number;
+};
+
+function toError(reason: Error | string | object | null | undefined): Error {
+  return reason instanceof Error ? reason : new Error(String(reason));
+}
+
+// The save in flight for each store, so a reload (another version, say) reads after it.
+const savesInFlight = new WeakMap<ArtifactStateStore, Promise<void>>();
+
+/**
+ * Renders an artifact in an iframe with `sandbox="allow-scripts"` (never
+ * `allow-same-origin`) and the CSP from `wrapArtifactDocument`, and answers
+ * the guest's `window.artifactState` calls over a MessageChannel. State
+ * comes from `store.load()` before the document is written, so the guest
+ * starts with its snapshot; changes are saved through `store.save()`.
+ */
+export function ArtifactFrame({
+  body,
+  format,
+  title,
+  template,
+  store,
+  stateGlobalAliases,
+  saveDelayMs = ARTIFACT_STATE_DEBOUNCE_MS,
+  saveMaxWaitMs = ARTIFACT_STATE_MAX_WAIT_MS,
+  className,
+  ...props
+}: ArtifactFrameProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  // A string, so a new array with the same names does not reload the frame.
+  const aliasKey = (stateGlobalAliases ?? []).join(",");
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const readyMessage = z.object({ type: z.literal(ARTIFACT_READY_TYPE) });
+    const stateMessage = z.object({
+      type: z.literal(ARTIFACT_STATE_TYPE),
+      requestId: z.number(),
+      op: z.string(),
+      key: z.string().optional(),
+      value: z.string().optional(),
+    });
+    let cancelled = false;
+    let canSave = store !== undefined;
+    let data: ArtifactStateMap = {};
+    let port: MessagePort | undefined;
+
+    const persist = createTrailingMaxDebounce(
+      () => {
+        if (!store || !canSave) return;
+        savesInFlight.set(
+          store,
+          store.save(data).catch((reason) => store.onError?.(toError(reason), "save")),
+        );
+      },
+      saveDelayMs,
+      saveMaxWaitMs,
+    );
+
+    const answer = (event: MessageEvent) => {
+      const parsed = stateMessage.safeParse(event.data);
+      if (!parsed.success) return;
+      const { requestId } = parsed.data;
+      const op = parseArtifactStateOp(parsed.data);
+      const result = op ? applyArtifactStateOp(data, op) : { data, value: null, error: "Malformed state request." };
+      if (op && !result.error) {
+        data = result.data;
+        if (op.op === "set" || op.op === "remove" || op.op === "reset") persist.schedule();
+      }
+      port?.postMessage({
+        type: ARTIFACT_STATE_RESULT_TYPE,
+        requestId,
+        ok: !result.error,
+        value: result.value,
+        error: result.error,
+      });
+    };
+
+    const onWindowMessage = (event: MessageEvent) => {
+      const guest = iframe.contentWindow;
+      if (!guest || event.source !== guest || !readyMessage.safeParse(event.data).success) return;
+      // A new document (or a reload of this one) gets a fresh channel.
+      port?.close();
+      const channel = new MessageChannel();
+      port = channel.port1;
+      port.onmessage = answer;
+      guest.postMessage({ type: ARTIFACT_PORT_TYPE }, "*", [channel.port2]);
+    };
+
+    const write = (snapshot: ArtifactStateMap) => {
+      iframe.srcdoc = wrapArtifactDocument(body, format, snapshot, {
+        title,
+        template,
+        stateGlobalAliases: aliasKey === "" ? [] : aliasKey.split(","),
+      });
+    };
+
+    const flush = () => persist.flushNow();
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") flush();
+    };
+
+    window.addEventListener("message", onWindowMessage);
+    window.addEventListener("pagehide", flush);
+    document.addEventListener("visibilitychange", onVisibility);
+
+    if (store) {
+      (savesInFlight.get(store) ?? Promise.resolve()).then(() => store.load()).then(
+        (loaded) => {
+          if (cancelled) return;
+          data = loaded;
+          write(loaded);
+        },
+        (reason) => {
+          if (cancelled) return;
+          canSave = false;
+          store.onError?.(toError(reason), "load");
+          write({});
+        },
+      );
+    } else {
+      write({});
+    }
+
+    return () => {
+      cancelled = true;
+      persist.flushNow();
+      persist.cancel();
+      window.removeEventListener("message", onWindowMessage);
+      window.removeEventListener("pagehide", flush);
+      document.removeEventListener("visibilitychange", onVisibility);
+      port?.close();
+    };
+  }, [body, format, title, template, store, aliasKey, saveDelayMs, saveMaxWaitMs]);
+
+  return (
+    <iframe
+      {...props}
+      ref={iframeRef}
+      title={title}
+      sandbox="allow-scripts"
+      className={cn("block border-0 bg-white", className)}
+    />
+  );
+}

package/src/artifacts/artifact-list-toolbar.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from "react";
+import { IconChevronDown, IconFilter, IconLayoutGrid, IconList } from "@tabler/icons-react";
+import { ARTIFACT_TYPES, type ArtifactType } from "@vvedantb/server";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ToolbarSearchInput } from "../ui/toolbar-search-input";
+import { cn } from "../utils/cn";
+import type { ArtifactLayout } from "./artifact-card";
+import { ARTIFACT_TYPE_LABELS, ArtifactTypeIcon } from "./artifact-type-icon";
+
+const ALL = "all";
+const LAYOUTS: readonly ArtifactLayout[] = ["grid", "list"];
+
+export type ArtifactListToolbarProps = {
+  query: string;
+  onQueryChange: (query: string) => void;
+  /** Selected type; `undefined` is "All types". */
+  type?: ArtifactType;
+  /** Omit to hide the type filter. */
+  onTypeChange?: (type: ArtifactType | undefined) => void;
+  /** Types offered in the filter. Default every `ARTIFACT_TYPES` entry. */
+  types?: readonly ArtifactType[];
+  layout?: ArtifactLayout;
+  /** Omit to hide the grid and list toggle. */
+  onLayoutChange?: (layout: ArtifactLayout) => void;
+  /** Default "Search artifacts...". */
+  searchPlaceholder?: string;
+  /** Extra controls at the end, e.g. a create button. */
+  children?: ReactNode;
+  className?: string;
+};
+
+/** Search field, type filter and grid or list toggle above an `ArtifactList`. Controlled: it holds no state. */
+export function ArtifactListToolbar({
+  query,
+  onQueryChange,
+  type,
+  onTypeChange,
+  types = ARTIFACT_TYPES,
+  layout = "grid",
+  onLayoutChange,
+  searchPlaceholder = "Search artifacts...",
+  children,
+  className,
+}: ArtifactListToolbarProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      <ToolbarSearchInput
+        value={query}
+        onChange={onQueryChange}
+        placeholder={searchPlaceholder}
+        label="Search artifacts"
+      />
+      {onTypeChange ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              aria-label="Filter by type"
+              startContent={type ? <ArtifactTypeIcon type={type} /> : <IconFilter size={16} />}
+              endContent={<IconChevronDown size={14} className="text-muted-foreground" />}
+            >
+              {type ? ARTIFACT_TYPE_LABELS[type] : "All types"}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent fitViewport suppressAltKey restoreScrollLockOnClose align="start">
+            <DropdownMenuRadioGroup
+              value={type ?? ALL}
+              onValueChange={(value) => onTypeChange(types.find((candidate) => candidate === value))}
+            >
+              <DropdownMenuRadioItem value={ALL}>All types</DropdownMenuRadioItem>
+              <DropdownMenuSeparator />
+              {types.map((candidate) => (
+                <DropdownMenuRadioItem key={candidate} value={candidate}>
+                  {ARTIFACT_TYPE_LABELS[candidate]}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+      {onLayoutChange ? (
+        <div className="flex items-center gap-1">
+          {LAYOUTS.map((option) => (
+            <Button
+              key={option}
+              size="icon-sm"
+              variant="ghost"
+              aria-label={option === "grid" ? "Grid view" : "List view"}
+              aria-pressed={layout === option}
+              className={layout === option ? "bg-default text-foreground" : undefined}
+              onClick={() => onLayoutChange(option)}
+            >
+              {option === "grid" ? <IconLayoutGrid size={16} /> : <IconList size={16} />}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {children ? <div className="ml-auto flex items-center gap-2">{children}</div> : null}
+    </div>
+  );
+}

package/src/artifacts/artifact-list.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+import { EmptyState } from "../ui/empty-state";
+import { cn } from "../utils/cn";
+import { ArtifactCard, type ArtifactCardActions, type ArtifactLayout } from "./artifact-card";
+import type { ArtifactSummary } from "./types";
+
+export type ArtifactListProps = ArtifactCardActions & {
+  artifacts: readonly ArtifactSummary[];
+  /** `"grid"` (default): tiles in up to three columns. `"list"`: compact rows. */
+  layout?: ArtifactLayout;
+  /** Default "No artifacts yet". */
+  emptyTitle?: ReactNode;
+  /** Default "Artifacts you save show up here." */
+  emptyDescription?: ReactNode;
+  /** Buttons under the empty message, e.g. a create button. */
+  emptyActions?: ReactNode;
+  className?: string;
+};
+
+/** Artifacts as a grid or a list of `ArtifactCard`s, or an empty state when there are none. */
+export function ArtifactList({
+  artifacts,
+  layout = "grid",
+  emptyTitle = "No artifacts yet",
+  emptyDescription = "Artifacts you save show up here.",
+  emptyActions,
+  className,
+  ...actions
+}: ArtifactListProps) {
+  if (artifacts.length === 0) {
+    return (
+      <EmptyState.Root className={cn("min-h-80 flex-1", className)}>
+        <EmptyState.Icon icon={IconLayoutDashboard} size={28} className="opacity-50" />
+        <EmptyState.Title>{emptyTitle}</EmptyState.Title>
+        <EmptyState.Description className="max-w-sm text-xs leading-relaxed">{emptyDescription}</EmptyState.Description>
+        {emptyActions ? <EmptyState.Actions>{emptyActions}</EmptyState.Actions> : null}
+      </EmptyState.Root>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        layout === "list" ? "flex flex-col gap-0.5" : "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        className,
+      )}
+    >
+      {artifacts.map((artifact) => (
+        <ArtifactCard key={artifact.id} artifact={artifact} layout={layout} {...actions} />
+      ))}
+    </div>
+  );
+}

package/src/artifacts/artifact-render.tsx

@@ -0,0 +1,50 @@
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
+import { CodeBlock } from "../ai-elements/code-block";
+import { cn } from "../utils/cn";
+import { ArtifactFrame, type ArtifactFrameProps } from "./artifact-frame";
+import type { ArtifactDocument } from "./types";
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+
+export type ArtifactRenderProps = Pick<ArtifactFrameProps, "store" | "stateGlobalAliases"> & {
+  artifact: Pick<ArtifactDocument, "title" | "format" | "language" | "stateSpec" | "body">;
+  className?: string;
+};
+
+/**
+ * An artifact body by format: Markdown with Streamdown, code with `CodeBlock`,
+ * and HTML, SVG and typed JSON (quiz, flashcards) in an `ArtifactFrame`.
+ */
+export function ArtifactRender({ artifact, store, stateGlobalAliases, className }: ArtifactRenderProps) {
+  if (artifact.format === "markdown") {
+    return (
+      <div className={cn("overflow-auto p-4", className)}>
+        <Streamdown plugins={streamdownPlugins}>{artifact.body}</Streamdown>
+      </div>
+    );
+  }
+  if (artifact.format === "code") {
+    return (
+      <CodeBlock
+        code={artifact.body}
+        language={artifact.language ?? "text"}
+        className={cn("overflow-auto rounded-none", className)}
+      />
+    );
+  }
+  return (
+    <ArtifactFrame
+      body={artifact.body}
+      format={artifact.format}
+      title={artifact.title}
+      template={artifact.stateSpec?.template}
+      store={store}
+      stateGlobalAliases={stateGlobalAliases}
+      className={cn("h-72 w-full", className)}
+    />
+  );
+}

package/src/artifacts/artifact-type-icon.tsx

@@ -0,0 +1,61 @@
+import {
+  IconCards,
+  IconChartInfographic,
+  IconCode,
+  IconFileText,
+  IconListCheck,
+  IconPresentation,
+  IconReport,
+  IconSchema,
+  IconSitemap,
+  type TablerIcon,
+} from "@tabler/icons-react";
+import type { ArtifactType } from "@vvedantb/server";
+import { cn } from "../utils/cn";
+
+const ICONS: Record<ArtifactType, TablerIcon> = {
+  document: IconFileText,
+  report: IconReport,
+  slides: IconPresentation,
+  infographic: IconChartInfographic,
+  mindmap: IconSitemap,
+  quiz: IconListCheck,
+  flashcards: IconCards,
+  diagram: IconSchema,
+  code: IconCode,
+};
+
+/** Display name of each artifact type, for filters and labels. */
+export const ARTIFACT_TYPE_LABELS: Record<ArtifactType, string> = {
+  document: "Document",
+  report: "Report",
+  slides: "Slides",
+  infographic: "Infographic",
+  mindmap: "Mind map",
+  quiz: "Quiz",
+  flashcards: "Flashcards",
+  diagram: "Diagram",
+  code: "Code",
+};
+
+export type ArtifactTypeIconProps = {
+  type: ArtifactType;
+  /** Pixel size. Default 16. */
+  size?: number;
+  stroke?: number;
+  className?: string;
+};
+
+/** Tabler icon for an artifact type. Decorative (`aria-hidden`); muted by default. */
+export function ArtifactTypeIcon({ type, size = 16, stroke, className }: ArtifactTypeIconProps) {
+  const TypeIcon = ICONS[type];
+  return (
+    <TypeIcon
+      size={size}
+      stroke={stroke}
+      aria-hidden
+      data-artifact-type={type}
+      className={cn("shrink-0 text-muted-foreground", className)}
+    />
+  );
+}