@agent-native/core-corpus 0.214.0 → 0.216.0

package/corpus/templates/slides-2/app/components/deck/DeckCard.tsx

@@ -0,0 +1,304 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  CreativeContextShareSheet,
+  useCreativeContextLab,
+} from "@agent-native/creative-context/client";
+import { VisibilityBadge } from "@agent-native/toolkit/sharing";
+import {
+  IconBuildingCommunity,
+  IconDots,
+  IconTrash,
+  IconCopy,
+  IconPencil,
+  IconPlus,
+  IconShare2,
+  IconStar,
+  IconStarFilled,
+} from "@tabler/icons-react";
+import { useState, useRef } from "react";
+import { Link } from "react-router";
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import type { Deck } from "@/context/DeckContext";
+import { getDeckListingPreviewFrameStyle } from "@/lib/deck-preview-frame";
+
+import ShareDialog from "../editor/ShareDialog";
+import SlideRenderer from "./SlideRenderer";
+
+interface DeckCardProps {
+  deck: Deck;
+  onDelete: (id: string) => void;
+  onRename: (id: string, newTitle: string) => void;
+  onDuplicate: (id: string) => void;
+  onToggleStar: (id: string, starred: boolean) => void;
+  isWorkspaceDefault?: boolean;
+  canSetWorkspaceDefault?: boolean;
+  onSetWorkspaceDefault?: (id: string, isDefault: boolean) => void;
+}
+
+export default function DeckCard({
+  deck,
+  onDelete,
+  onRename,
+  onDuplicate,
+  onToggleStar,
+  isWorkspaceDefault = false,
+  canSetWorkspaceDefault = false,
+  onSetWorkspaceDefault,
+}: DeckCardProps) {
+  const t = useT();
+  const creativeContextEnabled = useCreativeContextLab();
+  const firstSlide = deck.previewSlide ?? deck.slides?.[0];
+  const previewFrameStyle = getDeckListingPreviewFrameStyle(deck.aspectRatio);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [renameValue, setRenameValue] = useState(deck.title);
+  const [contextOpen, setContextOpen] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
+  const pendingRenameRef = useRef(false);
+  const pendingDeleteRef = useRef(false);
+  const pendingWorkspaceDefaultRef = useRef(false);
+  const pendingShareRef = useRef(false);
+
+  const commitRename = () => {
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== deck.title) {
+      onRename(deck.id, trimmed);
+    }
+    setIsRenaming(false);
+  };
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      commitRename();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsRenaming(false);
+    }
+  };
+
+  const startRename = () => {
+    pendingRenameRef.current = true;
+    setMenuOpen(false);
+  };
+
+  return (
+    <div className="agent-template-library-card group relative min-w-0">
+      <Link
+        to={`/deck/${deck.id}`}
+        className="agent-template-library-primary block overflow-hidden rounded-xl border border-transparent bg-card transition-[background-color,border-color] duration-200 hover:border-border hover:bg-accent/30"
+        onClick={(e) => {
+          if (isRenaming) e.preventDefault();
+        }}
+      >
+        {/* Slide Preview */}
+        <div className="agent-template-library-preview relative flex items-center justify-center bg-muted/30">
+          {firstSlide && (
+            <div className="relative overflow-hidden" style={previewFrameStyle}>
+              <SlideRenderer
+                slide={firstSlide}
+                className="rounded-none"
+                aspectRatio={deck.aspectRatio}
+                slidePosition={
+                  deck.slides?.length
+                    ? { number: 1, count: deck.slides.length }
+                    : undefined
+                }
+              />
+            </div>
+          )}
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-foreground/80 via-transparent to-transparent opacity-60" />
+        </div>
+
+        {/* Info */}
+        <div className="agent-template-library-caption">
+          <div className="flex items-center gap-2 min-w-0">
+            {isRenaming ? (
+              <input
+                autoFocus
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onBlur={commitRename}
+                onKeyDown={handleRenameKeyDown}
+                onFocus={(e) => e.currentTarget.select()}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                className="flex-1 min-w-0 bg-transparent border-b border-border text-sm font-medium text-foreground outline-none"
+              />
+            ) : (
+              <h3 className="font-medium text-sm text-foreground truncate flex-1">
+                {deck.title}
+              </h3>
+            )}
+            <VisibilityBadge visibility={deck.visibility} />
+          </div>
+        </div>
+      </Link>
+
+      {/* Star + menu buttons - always visible on touch devices */}
+      <div className="absolute top-2 end-2 flex items-center gap-1">
+        {deck.createdByMe !== false && (
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onToggleStar(deck.id, !deck.starred);
+            }}
+            className={`rounded-md border border-border bg-foreground/60 p-2 text-background backdrop-blur-sm hover:bg-foreground/80 sm:p-1.5 ${
+              deck.starred
+                ? ""
+                : "sm:invisible sm:pointer-events-none sm:opacity-0 sm:group-hover:visible sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 sm:group-focus-within:visible sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100"
+            }`}
+            aria-label={
+              deck.starred ? t("home.unstarDeck") : t("home.starDeck")
+            }
+            aria-pressed={Boolean(deck.starred)}
+          >
+            {deck.starred ? (
+              <IconStarFilled className="h-3.5 w-3.5 text-primary" />
+            ) : (
+              <IconStar className="h-3.5 w-3.5 text-background/70" />
+            )}
+          </button>
+        )}
+        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              className={`rounded-md border border-border bg-foreground/60 p-2 text-background backdrop-blur-sm hover:bg-foreground/80 sm:p-1.5 ${
+                menuOpen
+                  ? "sm:visible sm:pointer-events-auto sm:opacity-100"
+                  : "sm:invisible sm:pointer-events-none sm:opacity-0 sm:group-hover:visible sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 sm:group-focus-within:visible sm:group-focus-within:pointer-events-auto sm:group-focus-within:opacity-100"
+              }`}
+              aria-label={t("raw.deckOptions")}
+            >
+              <IconDots className="w-3.5 h-3.5 text-background/70" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className="w-56"
+            onCloseAutoFocus={(e) => {
+              if (pendingRenameRef.current) {
+                e.preventDefault();
+                pendingRenameRef.current = false;
+                setRenameValue(deck.title);
+                setIsRenaming(true);
+              }
+              if (pendingWorkspaceDefaultRef.current) {
+                e.preventDefault();
+                pendingWorkspaceDefaultRef.current = false;
+                onSetWorkspaceDefault?.(deck.id, !isWorkspaceDefault);
+              }
+              if (pendingShareRef.current) {
+                e.preventDefault();
+                pendingShareRef.current = false;
+                setTimeout(() => setShareOpen(true), 0);
+              }
+              if (pendingDeleteRef.current) {
+                e.preventDefault();
+                pendingDeleteRef.current = false;
+                setTimeout(() => onDelete(deck.id), 0);
+              }
+            }}
+          >
+            <DropdownMenuItem
+              onSelect={(e) => {
+                e.preventDefault();
+                startRename();
+              }}
+            >
+              <IconPencil className="w-3.5 h-3.5 me-2" />
+              {t("deckCard.rename")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => onDuplicate(deck.id)}>
+              <IconCopy className="w-3.5 h-3.5 me-2" />
+              {t("deckCard.duplicate")}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                pendingShareRef.current = true;
+                setMenuOpen(false);
+              }}
+            >
+              <IconShare2 className="w-3.5 h-3.5 me-2" />
+              {t("share.title")}
+            </DropdownMenuItem>
+            {creativeContextEnabled ? (
+              <DropdownMenuItem
+                onSelect={(event) => {
+                  event.preventDefault();
+                  setMenuOpen(false);
+                  setContextOpen(true);
+                }}
+              >
+                <IconPlus className="w-3.5 h-3.5 me-2" />
+                {t("creativeContext.addToContext" /* i18n-key-ignore */)}
+              </DropdownMenuItem>
+            ) : null}
+            {canSetWorkspaceDefault && onSetWorkspaceDefault && (
+              <DropdownMenuItem
+                onSelect={(event) => {
+                  event.preventDefault();
+                  pendingWorkspaceDefaultRef.current = true;
+                  setMenuOpen(false);
+                }}
+              >
+                <IconBuildingCommunity className="w-3.5 h-3.5 me-2" />
+                {isWorkspaceDefault
+                  ? t("home.clearWorkspaceDefault")
+                  : t("home.setWorkspaceDefault")}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+                pendingDeleteRef.current = true;
+                setMenuOpen(false);
+              }}
+              className="text-destructive focus:text-destructive"
+            >
+              <IconTrash className="w-3.5 h-3.5 me-2" />
+              {t("deckCard.delete")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      {creativeContextEnabled ? (
+        <CreativeContextShareSheet
+          open={contextOpen}
+          onOpenChange={setContextOpen}
+          resource={{
+            appId: "slides",
+            resourceType: "deck",
+            resourceId: deck.id,
+            title: deck.title,
+            updatedAt: deck.updatedAt,
+            visibility: deck.visibility,
+            preview: { kind: "document", label: "Deck" },
+          }}
+          canManage={deck.createdByMe}
+        />
+      ) : null}
+      <ShareDialog deck={deck} open={shareOpen} onOpenChange={setShareOpen} />
+    </div>
+  );
+}

package/corpus/templates/slides-2/app/components/deck/DeckFilterMenu.tsx

@@ -0,0 +1,83 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconChevronDown } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { DeckFilter } from "@/lib/deck-filter";
+
+export function DeckFilterMenu({
+  value,
+  onChange,
+}: {
+  value: DeckFilter;
+  onChange: (value: DeckFilter) => void;
+}) {
+  const t = useT();
+  const optionLabels: Record<DeckFilter, string> = {
+    all: t("home.ownedByAnyone"),
+    mine: t("home.ownedByMe"),
+    "not-mine": t("home.sharedWithMe"),
+  };
+  const label = optionLabels[value];
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          aria-label={label}
+          className="h-9 shrink-0 gap-2"
+        >
+          <span className="grid">
+            {Object.entries(optionLabels).map(([filter, option]) => (
+              <span
+                key={filter}
+                aria-hidden="true"
+                className="invisible col-start-1 row-start-1 whitespace-nowrap"
+              >
+                {option}
+              </span>
+            ))}
+            <span className="col-start-1 row-start-1 whitespace-nowrap">
+              {label}
+            </span>
+          </span>
+          <IconChevronDown className="size-4" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(nextValue) => {
+            if (
+              nextValue === "mine" ||
+              nextValue === "all" ||
+              nextValue === "not-mine"
+            ) {
+              onChange(nextValue);
+            }
+          }}
+        >
+          <DropdownMenuRadioItem value="all" indicator="check">
+            {t("home.ownedByAnyone")}
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="mine" indicator="check">
+            {t("home.ownedByMe")}
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="not-mine" indicator="check">
+            {t("home.sharedWithMe")}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default DeckFilterMenu;

package/corpus/templates/slides-2/app/components/deck/ExcalidrawSlide.tsx

@@ -0,0 +1,183 @@
+import DOMPurify from "dompurify";
+import {
+  useEffect,
+  useRef,
+  useCallback,
+  useState,
+  lazy,
+  Suspense,
+} from "react";
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+const Excalidraw = lazy(async () => {
+  await import("@excalidraw/excalidraw/index.css");
+  const mod = await import("@excalidraw/excalidraw");
+  return { default: mod.Excalidraw };
+});
+
+export interface ExcalidrawData {
+  elements: any[];
+  appState?: Record<string, any>;
+  files?: Record<string, any>;
+}
+
+interface ExcalidrawSlideProps {
+  initialData?: string;
+  onChange?: (data: string) => void;
+  readOnly?: boolean;
+}
+
+export function parseExcalidrawData(json?: string): ExcalidrawData | null {
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    // coercion-ok: Malformed drawings become a typed null; thumbnails surface it as an error and editors start empty.
+    return null;
+  }
+}
+
+export function ExcalidrawSlide({
+  initialData,
+  onChange,
+  readOnly = false,
+}: ExcalidrawSlideProps) {
+  const excalidrawRef = useRef<any>(null);
+  const [mounted, setMounted] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastSerializedRef = useRef<string>(initialData || "");
+
+  const parsed = parseExcalidrawData(initialData);
+
+  const handleChange = useCallback(
+    (elements: readonly any[], appState: any, files: any) => {
+      if (readOnly || !onChange) return;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const data: ExcalidrawData = {
+          elements: elements.filter((el: any) => !el.isDeleted),
+          appState: {
+            viewBackgroundColor: appState.viewBackgroundColor,
+            gridSize: appState.gridSize,
+          },
+          files: files || {},
+        };
+        const serialized = JSON.stringify(data);
+        if (serialized !== lastSerializedRef.current) {
+          lastSerializedRef.current = serialized;
+          onChange(serialized);
+        }
+      }, 500);
+    },
+    [onChange, readOnly],
+  );
+
+  useEffect(() => {
+    setMounted(true);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  if (!mounted) {
+    return <Skeleton className="w-full h-full bg-accent" />;
+  }
+
+  return (
+    <div className="w-full h-full" style={{ minHeight: 200 }}>
+      <Suspense fallback={<Skeleton className="w-full h-full bg-accent" />}>
+        <Excalidraw
+          excalidrawAPI={(api: any) => {
+            excalidrawRef.current = api;
+          }}
+          initialData={{
+            elements: parsed?.elements || [],
+            appState: {
+              theme: "dark",
+              viewBackgroundColor: "transparent",
+              ...(parsed?.appState || {}),
+            },
+            files: parsed?.files,
+          }}
+          onChange={handleChange}
+          viewModeEnabled={readOnly}
+          zenModeEnabled={readOnly}
+          UIOptions={{
+            canvasActions: readOnly
+              ? {
+                  changeViewBackgroundColor: false,
+                  export: false,
+                  loadScene: false,
+                  saveToActiveFile: false,
+                  toggleTheme: false,
+                }
+              : {},
+          }}
+        />
+      </Suspense>
+    </div>
+  );
+}
+
+export function ExcalidrawThumbnail({ data }: { data: string }) {
+  const [svg, setSvg] = useState<string>("");
+  const [renderState, setRenderState] = useState<"pending" | "ready" | "error">(
+    "pending",
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setSvg("");
+    setRenderState("pending");
+    const parsed = parseExcalidrawData(data);
+    if (!parsed?.elements?.length) {
+      setRenderState("error");
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    void import("@excalidraw/excalidraw")
+      .then(async (mod) => {
+        const svgEl = await mod.exportToSvg({
+          elements: parsed.elements,
+          appState: {
+            theme: "dark",
+            viewBackgroundColor: "transparent",
+            exportWithDarkMode: true,
+            ...(parsed.appState || {}),
+          },
+          files: parsed.files || {},
+        });
+        const sanitized = DOMPurify.sanitize(svgEl.outerHTML, {
+          USE_PROFILES: { svg: true, svgFilters: true },
+        });
+        if (cancelled) return;
+        setSvg(sanitized);
+        setRenderState("ready");
+      })
+      .catch(() => {
+        if (!cancelled) setRenderState("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [data]);
+
+  if (renderState === "pending") {
+    return <div data-excalidraw-renderer="pending" />;
+  }
+  if (renderState === "error") {
+    return <div data-excalidraw-renderer="error" aria-hidden="true" />;
+  }
+
+  return (
+    <div
+      data-excalidraw-renderer="ready"
+      className="w-full h-full flex items-center justify-center [&_svg]:max-w-full [&_svg]:max-h-full"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

package/corpus/templates/slides-2/app/components/deck/MermaidRenderer.tsx

@@ -0,0 +1,126 @@
+import { useT } from "@agent-native/core/client/i18n";
+import DOMPurify from "dompurify";
+import { useEffect, useRef, useState } from "react";
+
+type MermaidModule = typeof import("mermaid");
+
+let mermaidLoader: Promise<MermaidModule["default"]> | null = null;
+function loadMermaid(): Promise<MermaidModule["default"]> {
+  if (!mermaidLoader) {
+    mermaidLoader = import("mermaid")
+      .then((mod) => {
+        const mermaid = mod.default;
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: "dark",
+          themeVariables: {
+            darkMode: true,
+            background: "transparent",
+            primaryColor: "#1a1a2e", // guard:allow-raw-color — Mermaid content palette for generated slide diagrams.
+            primaryTextColor: "#e0e0e0", // guard:allow-raw-color — Mermaid content palette for generated slide diagrams.
+            primaryBorderColor: "#00E5FF", // guard:allow-raw-color — Mermaid content palette for generated slide diagrams.
+            lineColor: "#00E5FF", // guard:allow-raw-color — Mermaid content palette for generated slide diagrams.
+            secondaryColor: "#16213e", // guard:allow-raw-color — Mermaid content palette for generated slide diagrams.
+            tertiaryColor: "#0f3460", // guard:allow-raw-color — Mermaid content palette for generated slide diagrams.
+            fontFamily: "Poppins, sans-serif",
+          },
+          flowchart: { curve: "basis" },
+        });
+        return mermaid;
+      })
+      .catch((error) => {
+        mermaidLoader = null;
+        throw error;
+      });
+  }
+  return mermaidLoader;
+}
+
+let idCounter = 0;
+
+interface MermaidRendererProps {
+  definition: string;
+  className?: string;
+  index?: number;
+}
+
+export function MermaidRenderer({
+  definition,
+  className,
+  index,
+}: MermaidRendererProps) {
+  const t = useT();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  useEffect(() => {
+    setSvg("");
+    setError("");
+    if (!definition.trim()) return;
+
+    let cancelled = false;
+    const id = `mermaid-${++idCounter}`;
+
+    loadMermaid()
+      .then((mermaid) => mermaid.render(id, definition.trim()))
+      .then(({ svg: renderedSvg }) => {
+        if (cancelled) return;
+        const sanitized = DOMPurify.sanitize(renderedSvg, {
+          USE_PROFILES: { svg: true, svgFilters: true },
+          ADD_TAGS: ["foreignObject", "text", "tspan", "textPath"],
+          ADD_ATTR: [
+            "dominant-baseline",
+            "text-anchor",
+            "dy",
+            "font-family",
+            "font-size",
+          ],
+        });
+        setSvg(sanitized);
+        setError("");
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err?.message || t("raw.invalidMermaidSyntax"));
+        setSvg("");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [definition, t]);
+
+  if (error) {
+    return (
+      <div
+        data-mermaid-index={index}
+        data-mermaid-state="error"
+        className={`flex items-center justify-center p-4 text-xs text-destructive/70 ${className || ""}`}
+      >
+        <pre className="whitespace-pre-wrap">{error}</pre>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div
+        data-mermaid-index={index}
+        data-mermaid-state={definition.trim() ? "pending" : "empty"}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      data-mermaid-index={index}
+      data-mermaid-state="ready"
+      className={`flex items-center justify-center [&_svg]:max-w-full [&_svg]:max-h-full ${className || ""}`}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}