@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/content/app/components/editor/database/navigation-state.ts

@@ -172,6 +172,7 @@ export function databaseNavigationState({
     | "rowDensity"
     | "openPagesIn"
     | "formQuestions"
+    | "itemLayout"
   >;
   searchQuery?: string;
   sorts?: DatabaseSort[];
@@ -286,6 +287,8 @@ export function databaseNavigationState({
         : undefined,
     databaseFormQuestions:
       activeView.type === "form" ? activeView.formQuestions : undefined,
+    databaseItemLayout:
+      activeView.type === "list" ? (activeView.itemLayout ?? null) : undefined,
     databaseVisibleItemCount: visibleItemCount,
     databaseTotalItemCount: totalItemCount,
     databaseVisibleItems: databaseVisibleItemSummaries(

package/corpus/templates/content/app/components/editor/database/settings.tsx

@@ -2066,7 +2066,7 @@ function SourceDetailsFieldPicker({
                   className={cn(
                     "flex size-4 shrink-0 items-center justify-center rounded border",
                     selected.has(field.id)
-                      ? "border-[#2383e2] bg-[#2383e2] text-white"
+                      ? "border-database-blue bg-database-blue text-database-blue-foreground"
                       : "border-muted-foreground/40 text-transparent",
                   )}
                 >
@@ -2644,7 +2644,7 @@ function DatabaseSettingsSwitch({
       <span
         className={cn(
           "relative h-5 w-9 rounded-full transition-colors",
-          checked ? "bg-[#2383e2]" : "bg-muted-foreground/25",
+          checked ? "bg-database-blue" : "bg-muted-foreground/25",
         )}
       >
         <span
@@ -2683,7 +2683,7 @@ function DatabaseSettingsLayoutPanel({
             className={cn(
               "flex h-16 flex-col items-center justify-center gap-1 rounded-md border text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               activeView.type === type
-                ? "border-[#2383e2] bg-[#2383e2]/5 text-[#2383e2]"
+                ? "border-database-blue bg-database-blue/5 text-database-blue"
                 : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
             onClick={() => onViewTypeChange(type)}

package/corpus/templates/content/app/components/editor/database/view-config.ts

@@ -3,6 +3,7 @@ import type {
   ContentDatabaseViewConfig,
   ContentDatabaseViewType,
 } from "@shared/api";
+import { contentDatabaseItemLayoutField } from "@shared/database-item-layout";
 
 import {
   type DatabaseColumnCalculation,
@@ -60,6 +61,7 @@ export function createDatabaseView(
     rowDensity: normalizeClientDatabaseRowDensity(values.rowDensity),
     openPagesIn: normalizeClientDatabaseOpenPagesIn(values.openPagesIn),
     formQuestions: normalizeClientDatabaseFormQuestions(values.formQuestions),
+    ...contentDatabaseItemLayoutField(values.itemLayout),
   };
 }
 
@@ -219,6 +221,7 @@ export function duplicateDatabaseView(
       rowDensity: view.rowDensity,
       openPagesIn: view.openPagesIn,
       formQuestions: view.formQuestions,
+      itemLayout: view.itemLayout,
     },
     view.type,
   );
@@ -360,6 +363,7 @@ function normalizeClientDatabaseView(
       rowDensity: normalizeClientDatabaseRowDensity(value.rowDensity),
       openPagesIn: normalizeClientDatabaseOpenPagesIn(value.openPagesIn),
       formQuestions: normalizeClientDatabaseFormQuestions(value.formQuestions),
+      itemLayout: value.itemLayout,
     },
     type,
   );

package/corpus/templates/content/app/components/editor/document-flush-participant.ts

@@ -0,0 +1,253 @@
+import {
+  compareAndSetClientAppState,
+  readClientAppState,
+} from "@agent-native/core/client/application-state";
+import {
+  flushAckKey,
+  isDocumentFlushRequest,
+  type DocumentFlushAck,
+  type DocumentFlushClaim,
+  type DocumentFlushRequest,
+  type FlushEditorIdentity,
+} from "@shared/document-flush-protocol";
+
+export type FlushLocalSnapshot = {
+  identity: string;
+  generation: number;
+  observation: number;
+  valueEpoch: number;
+  visualVersion: object | null;
+  title: string;
+  content: string;
+  clean: boolean;
+  claim: DocumentFlushClaim | null;
+};
+
+function unchanged(a: FlushLocalSnapshot, b: FlushLocalSnapshot): boolean {
+  return (
+    a.identity === b.identity &&
+    a.generation === b.generation &&
+    a.observation === b.observation &&
+    a.valueEpoch === b.valueEpoch &&
+    a.visualVersion === b.visualVersion &&
+    a.title === b.title &&
+    a.content === b.content
+  );
+}
+
+// Save reconciliation can replace current values without creating an authored generation.
+export function createFlushObservedRef(
+  initial: string,
+  changed: () => void,
+): { current: string } {
+  let value = initial;
+  return {
+    get current() {
+      return value;
+    },
+    set current(next: string) {
+      if (next !== value) changed();
+      value = next;
+    },
+  };
+}
+
+export function createDocumentFlushParticipant(input: {
+  identity: () => FlushEditorIdentity | null;
+  documentId: () => string;
+  snapshot: (propertyId?: string) => FlushLocalSnapshot;
+  drain: (propertyId?: string) => Promise<void>;
+  read?: typeof readClientAppState;
+  compare?: typeof compareAndSetClientAppState;
+}) {
+  const read = input.read ?? readClientAppState;
+  const compare = input.compare ?? compareAndSetClientAppState;
+  const running = new Set<string>();
+  const completed = new Set<string>();
+  let lastRequestId: string | null = null;
+  let prepared: {
+    requestId: string;
+    prepareToken: string;
+    stabilityToken: string;
+    snapshot: FlushLocalSnapshot;
+  } | null = null;
+
+  return async function respond(value: unknown): Promise<void> {
+    if (
+      !isDocumentFlushRequest(value) ||
+      value.id !== input.documentId() ||
+      value.expiresAt <= Date.now()
+    )
+      return;
+    const request = value;
+    if (lastRequestId !== request.requestId) {
+      completed.clear();
+      lastRequestId = request.requestId;
+    }
+    const identity = input.identity();
+    if (
+      !identity ||
+      !request.targets.some(
+        (target) =>
+          target.clientId === identity.clientId &&
+          target.editorSessionId === identity.editorSessionId,
+      )
+    )
+      return;
+    const key = flushAckKey(request, identity.clientId);
+    if (running.has(key) || completed.has(key)) return;
+    running.add(key);
+    const abort = new AbortController();
+    const timer = setTimeout(
+      () => abort.abort(new Error("Document flush expired")),
+      request.expiresAt - Date.now(),
+    );
+    async function bounded<T>(work: Promise<T>): Promise<T> {
+      if (abort.signal.aborted) throw abort.signal.reason;
+      let listener!: () => void;
+      try {
+        return await Promise.race([
+          work,
+          new Promise<never>((_, reject) => {
+            listener = () => reject(abort.signal.reason);
+            abort.signal.addEventListener("abort", listener, { once: true });
+          }),
+        ]);
+      } finally {
+        abort.signal.removeEventListener("abort", listener);
+      }
+    }
+    const envelope = {
+      protocol: request.protocol,
+      id: request.id,
+      requestId: request.requestId,
+      phase: request.phase,
+      phaseToken: request.phaseToken,
+      ...identity,
+    };
+    const stillCurrent = async () => {
+      const current = await bounded(
+        read<DocumentFlushRequest>(`flush-request-${request.id}`, {
+          signal: abort.signal,
+        }),
+      );
+      return (
+        isDocumentFlushRequest(current) &&
+        input.documentId() === request.id &&
+        current.requestId === request.requestId &&
+        current.id === request.id &&
+        current.phase === request.phase &&
+        current.prepareToken === request.prepareToken &&
+        current.phaseToken === request.phaseToken &&
+        current.expiresAt > Date.now() &&
+        input.identity()?.editorSessionId === identity!.editorSessionId &&
+        input.identity()?.clientId === identity!.clientId
+      );
+    };
+    async function publish(ack: DocumentFlushAck) {
+      if (!(await stillCurrent()))
+        throw new Error("Document flush phase changed before acknowledgment");
+      if (!(await bounded(compare(key, null, ack, { signal: abort.signal })))) {
+        throw new Error("Document flush acknowledgment CAS was refused");
+      }
+      if (!(await stillCurrent())) {
+        if (!(await bounded(compare(key, ack, null, { signal: abort.signal }))))
+          throw new Error(
+            "Document flush late acknowledgment cleanup CAS was refused",
+          );
+      }
+    }
+    let preparingSnapshot: FlushLocalSnapshot | null = null;
+    try {
+      let ack: DocumentFlushAck;
+      if (request.phase === "verify") {
+        // This synchronous observation follows delivery of the post-capture token.
+        const current = input.snapshot(request.propertyId);
+        ack =
+          prepared?.requestId === request.requestId &&
+          prepared.prepareToken === request.prepareToken &&
+          current.clean &&
+          unchanged(prepared.snapshot, current)
+            ? {
+                ...envelope,
+                status: "verified",
+                stabilityToken: prepared.stabilityToken,
+              }
+            : { ...envelope, status: "changed" };
+      } else {
+        prepared = null;
+        const before = input.snapshot(request.propertyId);
+        preparingSnapshot = before;
+        await bounded(input.drain(request.propertyId));
+        let after = input.snapshot(request.propertyId);
+        // A drained editor can still be waiting for peer/save convergence.
+        while (!after.clean && unchanged(before, after)) {
+          await bounded(
+            new Promise<void>((resolve) => setTimeout(resolve, 25)),
+          );
+          after = input.snapshot(request.propertyId);
+        }
+        if (!unchanged(before, after)) ack = { ...envelope, status: "changed" };
+        else {
+          let claim = after.claim;
+          if (request.propertyId) {
+            const bytes = await bounded(
+              crypto.subtle.digest(
+                "SHA-256",
+                new TextEncoder().encode(after.content),
+              ),
+            );
+            claim = {
+              kind: "property",
+              propertyId: request.propertyId,
+              contentHash: `sha256:${Array.from(new Uint8Array(bytes), (byte) => byte.toString(16).padStart(2, "0")).join("")}`,
+            };
+          }
+          const current = input.snapshot(request.propertyId);
+          if (!current.clean || !unchanged(after, current))
+            ack = { ...envelope, status: "changed" };
+          else if (!claim)
+            ack = {
+              ...envelope,
+              status: "error",
+              errorCode: "editor_save_unacknowledged",
+            };
+          else {
+            const stabilityToken = crypto.randomUUID();
+            prepared = {
+              requestId: request.requestId,
+              prepareToken: request.prepareToken,
+              stabilityToken,
+              snapshot: after,
+            };
+            ack = { ...envelope, status: "prepared", stabilityToken, claim };
+          }
+        }
+      }
+      await publish(ack);
+      completed.add(key);
+    } catch (error) {
+      // Publication failures stay failures: the server sees a missing ACK and refuses freshness.
+      if (!abort.signal.aborted) {
+        try {
+          await publish({
+            ...envelope,
+            ...(preparingSnapshot &&
+            !unchanged(preparingSnapshot, input.snapshot(request.propertyId))
+              ? { status: "changed" as const }
+              : { status: "error" as const, errorCode: "editor_flush_failed" }),
+          });
+        } catch (publicationError) {
+          console.error("Document flush acknowledgment failed", {
+            error,
+            publicationError,
+            requestId: request.requestId,
+          });
+        }
+      }
+    } finally {
+      clearTimeout(timer);
+      running.delete(key);
+    }
+  };
+}

package/corpus/templates/content/app/components/editor/editor-transaction-meta.ts

@@ -0,0 +1,28 @@
+import type { NodeViewProps } from "@tiptap/react";
+
+import { LOCAL_FILE_USER_EDIT_META } from "./extensions/LocalMdxComponentNode";
+
+// Marks a change to the document that isn't an edit to the page, so it isn't
+// saved: the editor repairing a document it has just loaded, such as table
+// headers, or a block storing interface state on its node, such as whether a
+// video's source panel is open.
+export const EDITOR_NON_EDIT_META = "contentEditorNonEdit";
+
+// A block's menu, not the editor, holds focus when it deletes the block, and a
+// delete that leaves the page empty saves only when marked as the user's.
+export function deleteNodeFromMenu({
+  editor,
+  getPos,
+  node,
+}: Pick<NodeViewProps, "editor" | "getPos" | "node">) {
+  const from = typeof getPos === "function" ? getPos() : undefined;
+  if (typeof from !== "number") return;
+  editor
+    .chain()
+    .command(({ tr }) => {
+      tr.setMeta(LOCAL_FILE_USER_EDIT_META, true);
+      return true;
+    })
+    .deleteRange({ from, to: from + node.nodeSize })
+    .run();
+}

package/corpus/templates/content/app/components/editor/extensions/AudioBlock.tsx

@@ -46,6 +46,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
+import { deleteNodeFromMenu } from "../editor-transaction-meta";
 import { audioUploadErrorMessage, uploadAudioFile } from "../image-upload";
 import type { ContentAudioOptions } from "./AudioNode";
 
@@ -145,7 +146,6 @@ async function copyAudio(
 export function AudioBlock({
   node,
   editor,
-  deleteNode,
   selected,
   updateAttributes,
   extension,
@@ -173,6 +173,7 @@ export function AudioBlock({
   const options = extension.options as ContentAudioOptions;
   const canMutateMediaNow = () =>
     editor.isEditable && (options.canMutateMedia?.() ?? true);
+  const deleteNode = () => deleteNodeFromMenu({ editor, getPos, node });
   const isEditable = canMutateMediaNow();
   const src = node.attrs.src as string;
   const isUploading = Boolean(node.attrs.uploadId);

package/corpus/templates/content/app/components/editor/extensions/ImageBlock.tsx

@@ -54,7 +54,9 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
+import { deleteNodeFromMenu } from "../editor-transaction-meta";
 import { createImagePickerId } from "../image-upload";
+import { storedBodyImageFailed } from "../stored-body-images";
 import type { ContentImageOptions } from "./ImageNode";
 
 type ImageSourceTab = "upload" | "assets" | "link";
@@ -494,7 +496,6 @@ function buildAltTextArticleContext({
 export function ImageBlock({
   node,
   editor,
-  deleteNode,
   selected,
   updateAttributes,
   extension,
@@ -518,7 +519,6 @@ export function ImageBlock({
   const [lightboxZoomed, setLightboxZoomed] = useState(false);
   const [moreMenuOpen, setMoreMenuOpen] = useState(false);
   const [isGeneratingAlt, setIsGeneratingAlt] = useState(false);
-  const [imageLoadFailed, setImageLoadFailed] = useState(false);
   const altInputRef = useRef<HTMLInputElement>(null);
   const emptyBlockRef = useRef<HTMLDivElement>(null);
   const lightboxImageRef = useRef<HTMLImageElement>(null);
@@ -527,6 +527,7 @@ export function ImageBlock({
   const options = extension.options as ContentImageOptions;
   const canMutateMediaNow = () =>
     editor.isEditable && (options.canMutateMedia?.() ?? true);
+  const deleteNode = () => deleteNodeFromMenu({ editor, getPos, node });
   const isEditable = canMutateMediaNow();
   const src = node.attrs.src as string;
   const alt = (node.attrs.alt as string) || "";
@@ -536,10 +537,30 @@ export function ImageBlock({
   const width = normalizedImageWidth(node.attrs.width);
   const activeWidth = dragWidth ?? width;
   const controlsVisible = isEditable && (isHovered || selected);
+  // A source the stored body on screen failed to load starts failed, so the
+  // block keeps the stored body's height; it still loads the source itself,
+  // since that failure may belong to another block or have passed.
+  const [failure, setFailure] = useState<{
+    src: string;
+    ownLoad: boolean;
+  } | null>(() =>
+    storedBodyImageFailed(src) ? { src, ownLoad: false } : null,
+  );
+  if (failure && failure.src !== src) setFailure(null);
+  const imageLoadFailed = failure?.src === src;
+  const awaitingOwnLoad = failure?.src === src && !failure.ownLoad;
 
   useEffect(() => {
-    setImageLoadFailed(false);
-  }, [src]);
+    if (!awaitingOwnLoad) return;
+    const probe = new Image();
+    probe.onload = () => setFailure(null);
+    probe.onerror = () => setFailure({ src, ownLoad: true });
+    probe.src = src;
+    return () => {
+      probe.onload = null;
+      probe.onerror = null;
+    };
+  }, [awaitingOwnLoad, src]);
 
   useEffect(() => {
     if (!sourcePanelOpen && !selected) return;
@@ -1081,8 +1102,8 @@ export function ImageBlock({
             alt={alt || ""}
             className="media-block__content"
             draggable={false}
-            onLoad={() => setImageLoadFailed(false)}
-            onError={() => setImageLoadFailed(true)}
+            onLoad={() => setFailure(null)}
+            onError={() => setFailure({ src, ownLoad: true })}
             onDoubleClick={(event) => {
               event.preventDefault();
               event.stopPropagation();

package/corpus/templates/content/app/components/editor/extensions/LocalMdxComponentNode.tsx

@@ -116,7 +116,6 @@ function LocalComponentInputEditor({
         ...liveNode.attrs,
         ...nextAttrs,
       });
-      tr.setMeta(LOCAL_FILE_USER_EDIT_META, true);
       editor.view.dispatch(tr);
       return;
     }

package/corpus/templates/content/app/components/editor/extensions/NotionExtensions.tsx

@@ -84,7 +84,7 @@ function readElementAttributes(
   return attrs;
 }
 
-function parseAttrsJson(
+export function parseAttrsJson(
   attrsJson: string | null | undefined,
 ): Record<string, string> {
   if (!attrsJson) return {};
@@ -132,7 +132,7 @@ function serializeAtomTag(
     : `<${tagName}${serializeTagAttributes(attrs)} />`;
 }
 
-function humanizeTag(tagName: string): string {
+export function humanizeTag(tagName: string): string {
   return tagName.replace(/[_-]/g, " ");
 }
 
@@ -165,7 +165,7 @@ function getNotionPageId(attrs: Record<string, string>) {
   );
 }
 
-function safeExternalPageUrl(input: string | null): string | null {
+export function safeExternalPageUrl(input: string | null): string | null {
   if (!input) return null;
   try {
     const url = new URL(input);
@@ -294,7 +294,7 @@ export function outdentDirectToggleChild(editor: Editor): boolean {
   return true;
 }
 
-function normalizeIndentAttr(value: unknown): number {
+export function normalizeIndentAttr(value: unknown): number {
   const parsed =
     typeof value === "number"
       ? value

package/corpus/templates/content/app/components/editor/extensions/SuggestionHighlight.ts

@@ -187,6 +187,18 @@ function deletionWidget(spec: SuggestionHighlightSpec, active: boolean) {
   };
 }
 
+const documentSources = new WeakMap<ProseMirrorNode, string>();
+
+/** The editor document's Markdown, serialized once per immutable document. */
+export function editorDocumentSource(doc: ProseMirrorNode): string {
+  let source = documentSources.get(doc);
+  if (source === undefined) {
+    source = docToNfm(doc.toJSON());
+    documentSources.set(doc, source);
+  }
+  return source;
+}
+
 function insertionAtOperationAnchor(
   doc: ProseMirrorNode,
   from: number,
@@ -227,7 +239,7 @@ export function acceptedSuggestionAtRange(
   before: SuggestionPresentationContext,
   after: SuggestionPresentationContext,
 ): boolean {
-  const source = docToNfm(doc.toJSON());
+  const source = editorDocumentSource(doc);
   const beforeText = before.source.slice(before.from, before.to);
   const afterText = after.source.slice(after.from, after.to);
   const operation = (
@@ -331,7 +343,7 @@ function buildDecorations(
     return normalized;
   };
   const settledContent = specs.some((spec) => spec.settling)
-    ? canonicalizeContent(docToNfm(doc.toJSON()))
+    ? canonicalizeContent(editorDocumentSource(doc))
     : null;
 
   for (const spec of specs) {
@@ -474,6 +486,16 @@ export function createSuggestionHighlightPlugin(): Plugin<SuggestionHighlightSta
           if (meta.specs !== undefined) specs = meta.specs;
           if (meta.activeId !== undefined) activeId = meta.activeId;
         } else if (tr.docChanged) {
+          // Collaboration redraws the whole Page when the editor's plugins
+          // change; an identical Page keeps every highlight where it was.
+          if (tr.before.eq(tr.doc))
+            return {
+              ...value,
+              decorations: DecorationSet.create(
+                tr.doc,
+                value.decorations.find(),
+              ),
+            };
           specs = specs
             .map((spec) => ({
               ...spec,

package/corpus/templates/content/app/components/editor/extensions/VideoBlock.tsx

@@ -46,6 +46,10 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
+import {
+  deleteNodeFromMenu,
+  EDITOR_NON_EDIT_META,
+} from "../editor-transaction-meta";
 import { uploadVideoFile, videoUploadErrorMessage } from "../image-upload";
 import type { ContentVideoOptions } from "./VideoNode";
 
@@ -145,7 +149,6 @@ async function copyVideo(
 export function VideoBlock({
   node,
   editor,
-  deleteNode,
   selected,
   updateAttributes,
   extension,
@@ -170,6 +173,7 @@ export function VideoBlock({
   const options = extension.options as ContentVideoOptions;
   const canMutateMediaNow = () =>
     editor.isEditable && (options.canMutateMedia?.() ?? true);
+  const deleteNode = () => deleteNodeFromMenu({ editor, getPos, node });
   const isEditable = canMutateMediaNow();
   const src = node.attrs.src as string;
   const sourcePanelOpen = node.attrs.sourcePanelOpen === true;
@@ -181,14 +185,29 @@ export function VideoBlock({
   const activeWidth = dragWidth ?? width;
   const controlsVisible = isEditable && (isHovered || selected);
 
-  function setSourcePanelOpen(open: boolean) {
+  // The panel's state lives on the node, so it reaches other tabs, but it
+  // isn't part of the page and changing it doesn't save.
+  function setSourcePanel(panel: {
+    sourcePanelOpen: boolean;
+    sourceTab?: VideoSourceTab;
+  }) {
     if (!canMutateMediaNow()) return;
-    updateAttributes({ sourcePanelOpen: open });
+    editor.commands.command(({ tr }) => {
+      const pos = typeof getPos === "function" ? getPos() : undefined;
+      const current = typeof pos === "number" ? tr.doc.nodeAt(pos) : null;
+      if (typeof pos !== "number" || !current) return false;
+      tr.setNodeMarkup(pos, undefined, { ...current.attrs, ...panel });
+      tr.setMeta(EDITOR_NON_EDIT_META, true).setMeta("addToHistory", false);
+      return true;
+    });
+  }
+
+  function setSourcePanelOpen(open: boolean) {
+    setSourcePanel({ sourcePanelOpen: open });
   }
 
   function setSourceTab(tab: VideoSourceTab) {
-    if (!canMutateMediaNow()) return;
-    updateAttributes({ sourcePanelOpen: true, sourceTab: tab });
+    setSourcePanel({ sourcePanelOpen: true, sourceTab: tab });
   }
 
   useEffect(() => {
@@ -232,7 +251,7 @@ export function VideoBlock({
     if (!canMutateMediaNow()) return;
     setVideoUrl("");
     setSourcePanelDismissed(false);
-    updateAttributes({ sourcePanelOpen: true, sourceTab: "upload" });
+    setSourcePanel({ sourcePanelOpen: true, sourceTab: "upload" });
   }
 
   function handleLightboxOpenChange(open: boolean) {