@agent-native/core-corpus 0.214.0 → 0.216.0

package/corpus/templates/slides-2/app/components/slides-2-editor/Slides2SvglLogoSearchDialog.tsx

@@ -0,0 +1,332 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconLoader2,
+  IconPlus,
+  IconSearch,
+  IconSearchOff,
+} from "@tabler/icons-react";
+import { type FormEvent, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import { isAssetStorageSetupError } from "@/lib/asset-error-copy";
+
+type SvglRoute = string | { light: string; dark: string };
+
+type SvglLogo = {
+  id: number;
+  title: string;
+  category: string | string[];
+  route: SvglRoute;
+};
+
+type ImportedLogoAsset = {
+  id: string;
+  assetId: string;
+  filename: string;
+  type: string;
+};
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onStorageSetup: () => void;
+  onInserted: () => void;
+  deckId?: string;
+  canInsert: boolean;
+  storageConfigured: boolean;
+  onInsert: (
+    assetId: string,
+    filename: string,
+    type: string,
+  ) => Promise<string | null>;
+};
+
+export function Slides2SvglLogoSearchDialog({
+  open,
+  onOpenChange,
+  onStorageSetup,
+  onInserted,
+  deckId,
+  canInsert,
+  storageConfigured,
+  onInsert,
+}: Props) {
+  const t = useT();
+  const [search, setSearch] = useState("");
+  const [submittedSearch, setSubmittedSearch] = useState("");
+  const [pendingLogoId, setPendingLogoId] = useState<number | null>(null);
+  const [savedAssets, setSavedAssets] = useState<
+    Map<number, ImportedLogoAsset>
+  >(() => new Map());
+  const [importError, setImportError] = useState<string | null>(null);
+  const searchQuery = useActionQuery<SvglLogo[]>(
+    "search-svgl-logos",
+    { q: submittedSearch },
+    { enabled: open && submittedSearch.length > 0 },
+  );
+  const importLogo = useActionMutation<
+    ImportedLogoAsset,
+    { route: string; title: string; deckId?: string }
+  >("import-svgl-logo");
+
+  useEffect(() => {
+    if (!open) return;
+    setSearch("");
+    setSubmittedSearch("");
+    setImportError(null);
+    setSavedAssets(new Map());
+  }, [open]);
+
+  const searchLogos = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const query = search.trim();
+    setImportError(null);
+    if (query) setSubmittedSearch(query);
+  };
+
+  const addLogo = async (logo: SvglLogo, route: string) => {
+    if (!canInsert || pendingLogoId !== null) return;
+    if (!storageConfigured) {
+      onStorageSetup();
+      return;
+    }
+    setImportError(null);
+    setPendingLogoId(logo.id);
+    try {
+      const asset =
+        savedAssets.get(logo.id) ??
+        (await importLogo.mutateAsync({
+          route,
+          title: logo.title,
+          ...(deckId ? { deckId } : {}),
+        }));
+      if (!savedAssets.has(logo.id)) {
+        setSavedAssets((current) => new Map(current).set(logo.id, asset));
+      }
+
+      const error = await onInsert(asset.assetId, asset.filename, asset.type);
+      if (error) {
+        setImportError(error);
+        return;
+      }
+
+      onOpenChange(false);
+      onInserted();
+    } catch (error) {
+      const errorCode =
+        error && typeof error === "object" && "errorCode" in error
+          ? error.errorCode
+          : undefined;
+      if (isAssetStorageSetupError(errorCode)) {
+        onStorageSetup();
+        return;
+      }
+      setImportError(t("raw.assetErrors.assetSaveFailed"));
+    } finally {
+      setPendingLogoId(null);
+    }
+  };
+
+  const results = searchQuery.data ?? [];
+  const searchError = t("raw.searchFailed");
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{t("raw.logoSearchTitle")}</DialogTitle>
+          <DialogDescription>
+            <a
+              href="https://svgl.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-2"
+            >
+              svgl.app
+            </a>
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={searchLogos} className="flex gap-2">
+          <div className="relative min-w-0 flex-1">
+            <IconSearch
+              className="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.currentTarget.value)}
+              placeholder={t("raw.searchCompanyPlaceholder")}
+              aria-label={t("raw.searchCompanyPlaceholder")}
+              maxLength={120}
+              className="ps-8"
+            />
+          </div>
+          <Button
+            type="submit"
+            variant="secondary"
+            disabled={!search.trim() || searchQuery.isFetching}
+          >
+            {searchQuery.isFetching ? (
+              <IconLoader2
+                className="me-2 size-4 animate-spin motion-reduce:animate-none"
+                aria-hidden="true"
+              />
+            ) : null}
+            {t("raw.search")}
+          </Button>
+        </form>
+
+        {importError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {importError}
+          </p>
+        ) : null}
+
+        <ScrollArea className="h-[min(58vh,32rem)] rounded-md border border-border">
+          <div className="grid grid-cols-2 gap-3 p-3 sm:grid-cols-3 md:grid-cols-4">
+            {searchQuery.isLoading || searchQuery.isFetching ? (
+              Array.from({ length: 8 }, (_, index) => (
+                <Skeleton key={index} className="aspect-square rounded-md" />
+              ))
+            ) : searchQuery.isError ? (
+              <div
+                role="alert"
+                className="col-span-full flex flex-col items-center gap-2 py-10 text-center text-sm text-destructive"
+              >
+                <p>{searchError}</p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => void searchQuery.refetch()}
+                >
+                  {t("comments.retry")}
+                </Button>
+              </div>
+            ) : !submittedSearch ? (
+              <p className="col-span-full flex flex-col items-center gap-2 py-10 text-center text-sm text-muted-foreground">
+                <IconSearchOff className="size-6" aria-hidden="true" />
+                {t("raw.searchCompanyLogo")}
+              </p>
+            ) : results.length === 0 ? (
+              <p className="col-span-full flex flex-col items-center gap-2 py-10 text-center text-sm text-muted-foreground">
+                <IconSearchOff className="size-6" aria-hidden="true" />
+                {t("raw.noLogosFound")}
+              </p>
+            ) : (
+              results.map((logo) => (
+                <SvglLogoCard
+                  key={logo.id}
+                  logo={logo}
+                  pending={pendingLogoId === logo.id}
+                  disabled={!canInsert || pendingLogoId !== null}
+                  onAdd={addLogo}
+                />
+              ))
+            )}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SvglLogoCard({
+  logo,
+  pending,
+  disabled,
+  onAdd,
+}: {
+  logo: SvglLogo;
+  pending: boolean;
+  disabled: boolean;
+  onAdd: (logo: SvglLogo, route: string) => Promise<void>;
+}) {
+  const t = useT();
+  const [variant, setVariant] = useState<"light" | "dark">("light");
+  const hasVariants = typeof logo.route !== "string";
+  const route =
+    typeof logo.route === "string" ? logo.route : logo.route[variant];
+  const category = Array.isArray(logo.category)
+    ? logo.category.join(", ")
+    : logo.category;
+
+  return (
+    <article className="flex min-w-0 flex-col overflow-hidden rounded-md border border-border bg-card">
+      <div className="flex aspect-square items-center justify-center overflow-hidden bg-muted p-4">
+        <img
+          src={route}
+          alt=""
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          className="size-full object-contain"
+        />
+      </div>
+      <div className="flex min-w-0 flex-col gap-2 border-t border-border p-2">
+        <div className="min-w-0">
+          <div className="truncate text-xs font-medium" title={logo.title}>
+            {logo.title}
+          </div>
+          <div className="truncate text-[10px] text-muted-foreground">
+            {category}
+          </div>
+        </div>
+        {hasVariants ? (
+          <div
+            className="flex w-fit overflow-hidden rounded-md border border-border text-[10px]"
+            role="group"
+            aria-label={t("raw.logoSearchTitle")}
+          >
+            {(["light", "dark"] as const).map((option) => (
+              <Button
+                key={option}
+                type="button"
+                size="sm"
+                variant={variant === option ? "secondary" : "ghost"}
+                aria-pressed={variant === option}
+                onClick={() => setVariant(option)}
+                className="h-6 rounded-none px-2 text-[10px]"
+              >
+                {t(`appMenu.theme${option === "light" ? "Light" : "Dark"}`)}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={disabled}
+          aria-label={`${t("slides2Editor.addLogo")}: ${logo.title}`}
+          onClick={() => void onAdd(logo, route)}
+          className="h-7 gap-1.5 px-2 text-xs"
+        >
+          {pending ? (
+            <IconLoader2
+              className="size-3.5 animate-spin motion-reduce:animate-none"
+              aria-hidden="true"
+            />
+          ) : (
+            <IconPlus className="size-3.5" aria-hidden="true" />
+          )}
+          {pending ? t("designSystemSetup.saving") : t("slides2Editor.addLogo")}
+        </Button>
+      </div>
+    </article>
+  );
+}

package/corpus/templates/slides-2/app/components/slides-2-editor/cross-slide-edit-history.ts

@@ -0,0 +1,151 @@
+import type { SourceEdit } from "./types";
+
+export type CrossSlideEditEntry = {
+  type: "edit";
+  slideId: string;
+  sourceRevision: number;
+  sourceHash: string;
+  edits: SourceEdit[];
+  selection: { line: number; column: number } | null;
+};
+
+export type CrossSlideSourceCommitEntry = {
+  type: "commit";
+  slideId: string;
+  beforeSourceTsx: string;
+  beforeSourceHash: string;
+  afterSourceTsx: string;
+  afterSourceHash: string;
+  selection: { line: number; column: number } | null;
+};
+
+export type CrossSlideHistoryEntry =
+  | CrossSlideEditEntry
+  | CrossSlideSourceCommitEntry;
+
+export type CrossSlideEditHistory = {
+  entries: CrossSlideHistoryEntry[];
+  cursor: number;
+};
+
+export type CrossSlideSourceRestoreRequest = {
+  requestId: string;
+  deckId: string;
+  direction: "undo" | "redo";
+  slideId: string;
+  sourceTsx: string;
+  expectedSourceHash: string;
+  selection: { line: number; column: number } | null;
+};
+
+export type CrossSlideHistorySelection = {
+  requestId: string;
+  slideId: string;
+  sourceRevision: number;
+  sourceHash: string;
+  line: number;
+  column: number;
+};
+
+export const CROSS_SLIDE_EDIT_HISTORY_LIMIT = 50;
+
+export const EMPTY_CROSS_SLIDE_EDIT_HISTORY: CrossSlideEditHistory = {
+  entries: [],
+  cursor: 0,
+};
+
+export function appendCrossSlideEdit(
+  history: CrossSlideEditHistory,
+  entry: Omit<CrossSlideEditEntry, "type">,
+): CrossSlideEditHistory {
+  const entries = [
+    ...history.entries.slice(0, history.cursor),
+    { ...entry, type: "edit" as const, edits: [...entry.edits] },
+  ];
+  return boundCrossSlideHistory(entries, entries.length, entry.slideId);
+}
+
+export function appendCrossSlideSourceCommit(
+  history: CrossSlideEditHistory,
+  entry: Omit<CrossSlideSourceCommitEntry, "type">,
+): CrossSlideEditHistory {
+  const entries = history.entries
+    .slice(0, history.cursor)
+    .filter(
+      (candidate) =>
+        candidate.type !== "edit" || candidate.slideId !== entry.slideId,
+    );
+  const selection =
+    [...history.entries.slice(0, history.cursor)]
+      .reverse()
+      .find(
+        (candidate) =>
+          candidate.type === "edit" && candidate.slideId === entry.slideId,
+      )?.selection ?? entry.selection;
+  entries.push({ ...entry, type: "commit", selection });
+  return boundCrossSlideHistory(entries, entries.length, entry.slideId);
+}
+
+function boundCrossSlideHistory(
+  entries: CrossSlideHistoryEntry[],
+  initialCursor: number,
+  slideId: string,
+): CrossSlideEditHistory {
+  let cursor = initialCursor;
+  const overflow =
+    entries.filter((candidate) => candidate.slideId === slideId).length -
+    CROSS_SLIDE_EDIT_HISTORY_LIMIT;
+  if (overflow <= 0) return { entries, cursor };
+
+  let removed = 0;
+  const boundedEntries = entries.filter((candidate, index) => {
+    if (candidate.slideId !== slideId || removed >= overflow) return true;
+    if (index < cursor) cursor -= 1;
+    removed += 1;
+    return false;
+  });
+  return { entries: boundedEntries, cursor };
+}
+
+export function moveCrossSlideEditHistory(
+  history: CrossSlideEditHistory,
+  direction: "undo" | "redo",
+): { history: CrossSlideEditHistory; entry: CrossSlideHistoryEntry | null } {
+  const entryIndex = direction === "undo" ? history.cursor - 1 : history.cursor;
+  const entry = history.entries[entryIndex] ?? null;
+  if (!entry) return { history, entry: null };
+  return {
+    history: {
+      entries: history.entries,
+      cursor: history.cursor + (direction === "undo" ? -1 : 1),
+    },
+    entry,
+  };
+}
+
+export function clearSlideEditHistory(
+  history: CrossSlideEditHistory,
+  slideId: string,
+): CrossSlideEditHistory {
+  let cursor = 0;
+  const entries = history.entries.filter((entry, index) => {
+    const keep = entry.slideId !== slideId;
+    if (keep && index < history.cursor) cursor += 1;
+    return keep;
+  });
+  return { entries, cursor };
+}
+
+export function projectSlideEditHistory(
+  history: CrossSlideEditHistory,
+  slideId: string,
+): { editBatches: SourceEdit[][]; historyIndex: number } {
+  const editBatches: SourceEdit[][] = [];
+  let historyIndex = 0;
+  history.entries.forEach((entry, index) => {
+    if (entry.type !== "edit" || entry.slideId !== slideId) return;
+    editBatches.push(entry.edits);
+    if (index < history.cursor) historyIndex += 1;
+  });
+  return { editBatches, historyIndex };
+}

package/corpus/templates/slides-2/app/components/slides-2-editor/design-token-presets.ts

@@ -0,0 +1,140 @@
+import type { SlideDesignTokens } from "../slides-2-runtime/protocol";
+
+const DESIGN_PRESETS: readonly SlideDesignTokens[] = [
+  {
+    background: "#f7f5f0", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#1a1814", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#6d4cff", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Georgia",
+    bodyFont: "system-ui",
+    heroScale: 1,
+    bodyScale: 1,
+    radius: 12,
+  },
+  {
+    background: "#0f1115", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#f5f3ee", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#7cc4ff", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Georgia",
+    bodyFont: "system-ui",
+    heroScale: 192 / 168,
+    bodyScale: 32 / 36,
+    radius: 6,
+  },
+  {
+    background: "#eef1f4", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#1c2733", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#ff6a5b", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Helvetica",
+    bodyFont: "system-ui",
+    heroScale: 156 / 168,
+    bodyScale: 30 / 36,
+    radius: 8,
+  },
+  {
+    background: "#fdf6e3", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#073642", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#b58900", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Georgia",
+    bodyFont: "system-ui",
+    heroScale: 144 / 168,
+    bodyScale: 28 / 36,
+    radius: 14,
+  },
+  {
+    background: "#ede2cc", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#3a2a1a", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#2f6e3a", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Times New Roman",
+    bodyFont: "Georgia",
+    heroScale: 1,
+    bodyScale: 32 / 36,
+    radius: 4,
+  },
+  {
+    background: "#ffffff", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#0a0a0a", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#e11d48", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Helvetica",
+    bodyFont: "Helvetica",
+    heroScale: 200 / 168,
+    bodyScale: 28 / 36,
+    radius: 0,
+  },
+  {
+    background: "#fde9d9", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#3a1f3d", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#f97316", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Georgia",
+    bodyFont: "system-ui",
+    heroScale: 184 / 168,
+    bodyScale: 1,
+    radius: 24,
+  },
+  {
+    background: "#e9f5ee", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#0f3324", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#ec4899", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "system-ui",
+    bodyFont: "system-ui",
+    heroScale: 160 / 168,
+    bodyScale: 32 / 36,
+    radius: 16,
+  },
+  {
+    background: "#0a0a0a", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#f3edd9", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#eab308", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Georgia",
+    bodyFont: "Helvetica",
+    heroScale: 200 / 168,
+    bodyScale: 32 / 36,
+    radius: 2,
+  },
+  {
+    background: "#ece2f5", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#2a1c4a", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#facc15", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Georgia",
+    bodyFont: "system-ui",
+    heroScale: 1,
+    bodyScale: 34 / 36,
+    radius: 20,
+  },
+  {
+    background: "#101418", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#a7f3d0", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#fbbf24", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Courier New",
+    bodyFont: "Courier New",
+    heroScale: 144 / 168,
+    bodyScale: 24 / 36,
+    radius: 4,
+  },
+  {
+    background: "#fafafa", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    text: "#0a0a0a", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    accent: "#facc15", // guard:allow-raw-color — saved slide theme preset value, not app chrome.
+    displayFont: "Helvetica",
+    bodyFont: "Helvetica",
+    heroScale: 220 / 168,
+    bodyScale: 32 / 36,
+    radius: 0,
+  },
+];
+
+export function shuffleSlideDesignTokens(
+  current: SlideDesignTokens,
+): SlideDesignTokens {
+  const currentSignature = JSON.stringify(current);
+  const matchesPreset = DESIGN_PRESETS.some(
+    (preset) => JSON.stringify(preset) === JSON.stringify(current),
+  );
+  const available = matchesPreset
+    ? DESIGN_PRESETS.filter(
+        (preset) => JSON.stringify(preset) !== currentSignature,
+      )
+    : DESIGN_PRESETS;
+  const selected = available[Math.floor(Math.random() * available.length)]!;
+  return { ...selected };
+}

package/corpus/templates/slides-2/app/components/slides-2-editor/editor-action-errors.ts

@@ -0,0 +1,47 @@
+const ACTION_ERROR_TRANSLATIONS = {
+  not_authenticated: "editorErrors.signInRequired",
+  deck_not_found: "editorErrors.deckNotFound",
+  slide_not_found: "editorErrors.slideNotFound",
+  slide_source_missing: "editorErrors.slideSourceUnavailable",
+  slide_source_conflict: "editorErrors.slideChanged",
+  slide_content_stale: "editorErrors.slideChanged",
+  slide_field_stale: "editorErrors.slideChanged",
+  deck_revision_conflict: "editorErrors.deckChanged",
+  deck_write_conflict: "editorErrors.deckChanged",
+  slide_source_edit_failed: "editorErrors.slideSaveFailed",
+  slide_source_revision_exhausted: "editorErrors.slideSaveFailed",
+  slide_source_integrity_error: "editorErrors.deckDataUnavailable",
+  invalid_deck_data: "editorErrors.deckDataUnavailable",
+  invalid_slide_data: "editorErrors.deckDataUnavailable",
+  invalid_deck_slide_order: "editorErrors.deckDataUnavailable",
+  duplicate_deck_slide_ids: "editorErrors.deckDataUnavailable",
+  slide_source_owner_required: "editorErrors.signInRequired",
+  comment_thread_resolved: "editorErrors.commentThreadResolved",
+  target_slide_count_reached: "editorErrors.slideLimitReached",
+} as const;
+
+export type EditorActionErrorTranslationKey =
+  | (typeof ACTION_ERROR_TRANSLATIONS)[keyof typeof ACTION_ERROR_TRANSLATIONS]
+  | "editorErrors.commentAnchorChanged";
+
+export function getEditorActionErrorCode(error: unknown): string | undefined {
+  if (!error || typeof error !== "object" || Array.isArray(error)) {
+    return undefined;
+  }
+  const code = (error as { errorCode?: unknown }).errorCode;
+  return typeof code === "string" ? code : undefined;
+}
+
+export function getEditorActionErrorTranslationKey(
+  error: unknown,
+  context?: "comment-anchor",
+): EditorActionErrorTranslationKey | undefined {
+  const code = getEditorActionErrorCode(error);
+  if (!code) return undefined;
+  if (context === "comment-anchor" && code === "slide_source_conflict") {
+    return "editorErrors.commentAnchorChanged";
+  }
+  return ACTION_ERROR_TRANSLATIONS[
+    code as keyof typeof ACTION_ERROR_TRANSLATIONS
+  ];
+}