@agent-native/core 0.82.0 → 0.84.0

package/corpus/templates/content/actions/update-document.ts

@@ -10,6 +10,7 @@ import {
   parseDocumentHideFromSearch,
 } from "../server/lib/documents.js";
 import type { DocumentUpdateResponse } from "../shared/api.js";
+import { BUILDER_CMS_BODY_CONTENT_KEY } from "./_builder-cms-source-adapter.js";
 import { reconcileInlineDatabasesForDocument } from "./_content-database-lifecycle.js";
 import { serializeDocumentSource } from "./_document-source.js";
 import {
@@ -33,6 +34,60 @@ function canManageRole(role: string) {
   return role === "owner" || role === "admin";
 }
 
+function builderBodyWithoutImageSourceComponentMarkers(
+  content: string | null | undefined,
+) {
+  return (content ?? "")
+    .replace(/(?:^|\n)<SourceComponent\b[\s\S]*?\/>[ \t]*(?=\n|$)/g, (marker) =>
+      marker.includes('componentName="Image"') ? "\n" : marker,
+    )
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function builderBodyWithoutMarkdownImages(content: string | null | undefined) {
+  return (content ?? "")
+    .replace(
+      /(?:^|\n)!\[(?:\\.|[^\]\\])*\]\(\S+?(?:\s+"[^"]*")?\)[ \t]*(?=\n|$)/g,
+      "\n",
+    )
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function normalizedBuilderBodyProse(content: string | null | undefined) {
+  return (content ?? "")
+    .normalize("NFKC")
+    .replace(/\u00a0/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+export function isStaleBuilderImageSourceComponentSave(args: {
+  incomingContent: string;
+  currentContent: string;
+  sourceContent: string | null | undefined;
+}) {
+  const sourceContent = args.sourceContent ?? "";
+  const currentMatchesSource =
+    normalizedBuilderBodyProse(args.currentContent) ===
+    normalizedBuilderBodyProse(sourceContent);
+  if (
+    !args.incomingContent.includes('componentName="Image"') ||
+    !sourceContent.includes("![") ||
+    sourceContent.includes('componentName="Image"') ||
+    !currentMatchesSource
+  ) {
+    return false;
+  }
+  return (
+    normalizedBuilderBodyProse(
+      builderBodyWithoutImageSourceComponentMarkers(args.incomingContent),
+    ) ===
+    normalizedBuilderBodyProse(builderBodyWithoutMarkdownImages(sourceContent))
+  );
+}
+
 export default defineAction({
   description:
     "Update an existing document's title, content, icon, or favorite status.",
@@ -79,6 +134,44 @@ export default defineAction({
           content = content.slice(h1Match[0].length).trimStart();
         }
       }
+      if (
+        content.includes('componentName="Image"') &&
+        existing.content.includes("![")
+      ) {
+        const [builderBody] = await db
+          .select({
+            sourceValuesJson: schema.contentDatabaseSourceRows.sourceValuesJson,
+          })
+          .from(schema.contentDatabaseSourceRows)
+          .innerJoin(
+            schema.contentDatabaseSources,
+            eq(
+              schema.contentDatabaseSources.id,
+              schema.contentDatabaseSourceRows.sourceId,
+            ),
+          )
+          .where(
+            and(
+              eq(schema.contentDatabaseSourceRows.documentId, id),
+              eq(schema.contentDatabaseSources.sourceType, "builder-cms"),
+            ),
+          )
+          .limit(1);
+        const sourceValues = JSON.parse(
+          builderBody?.sourceValuesJson ?? "{}",
+        ) as Record<string, unknown>;
+        const sourceContent = sourceValues[BUILDER_CMS_BODY_CONTENT_KEY];
+        if (
+          typeof sourceContent === "string" &&
+          isStaleBuilderImageSourceComponentSave({
+            incomingContent: content,
+            currentContent: existing.content,
+            sourceContent,
+          })
+        ) {
+          content = existing.content;
+        }
+      }
     }
 
     // Detect actual changes — a no-op call (e.g. the editor echoing back the

package/corpus/templates/content/app/blocks/SourceComponentBlock.tsx

@@ -0,0 +1,277 @@
+import type { BlockReadProps, BlockSpec } from "@agent-native/core/blocks";
+import { useT } from "@agent-native/core/client";
+import {
+  sourceComponentBlockConfig,
+  type SourceComponentData,
+} from "@shared/source-component-block";
+import {
+  IconBox,
+  IconDatabase,
+  IconExternalLink,
+  IconPhoto,
+  IconLink,
+  IconTable,
+} from "@tabler/icons-react";
+
+function providerLabel(provider: string) {
+  if (provider === "builder") return "Builder";
+  return provider.trim() || "Source";
+}
+
+function safeHttpUrl(value: string | undefined) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+function youtubeEmbedUrl(value: string | undefined) {
+  const url = safeHttpUrl(value);
+  if (!url) return null;
+  if (url.hostname === "youtu.be") {
+    const id = url.pathname.replace(/^\/+/, "").split("/")[0];
+    return id ? `https://www.youtube.com/embed/${id}` : null;
+  }
+  if (
+    url.hostname === "youtube.com" ||
+    url.hostname === "www.youtube.com" ||
+    url.hostname === "m.youtube.com"
+  ) {
+    const id = url.searchParams.get("v");
+    if (id) return `https://www.youtube.com/embed/${id}`;
+    if (url.pathname.startsWith("/embed/")) return url.toString();
+  }
+  return null;
+}
+
+function SourceImagePreview({ url, alt }: { url: string; alt?: string }) {
+  return (
+    <figure className="mt-2 overflow-hidden rounded-md border bg-background">
+      <img
+        src={url}
+        alt={alt || ""}
+        loading="lazy"
+        className="max-h-[520px] w-full object-contain"
+      />
+      {alt ? (
+        <figcaption className="border-t px-2.5 py-2 text-xs leading-5 text-muted-foreground">
+          {alt}
+        </figcaption>
+      ) : null}
+    </figure>
+  );
+}
+
+function SourceEmbedPreview({ url }: { url: string }) {
+  const embedUrl = youtubeEmbedUrl(url);
+  if (embedUrl) {
+    return (
+      <div className="mt-2 overflow-hidden rounded-md border bg-background">
+        <iframe
+          data-plan-interactive
+          className="aspect-video w-full"
+          src={embedUrl}
+          title="Builder embedded video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        />
+      </div>
+    );
+  }
+  return (
+    <a
+      data-plan-interactive
+      className="mt-2 flex min-w-0 items-center gap-2 rounded-md border bg-background px-2.5 py-2 text-xs text-muted-foreground hover:text-foreground"
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <IconLink className="size-4 shrink-0" />
+      <span className="truncate">{url}</span>
+    </a>
+  );
+}
+
+function SourceComponentPreview({ data }: { data: SourceComponentData }) {
+  const t = useT();
+  const preview = data.preview;
+  const previewUrl = preview?.url ?? data.previewUrl;
+  const safePreviewUrl = safeHttpUrl(previewUrl)?.toString();
+  const imageAlt =
+    preview?.fields?.find((field) => field.label.toLowerCase() === "alt")
+      ?.value ?? preview?.summary;
+  if (data.componentName === "Image" && safePreviewUrl) {
+    return <SourceImagePreview url={safePreviewUrl} alt={imageAlt} />;
+  }
+  if (preview?.kind === "table" && preview.table) {
+    return (
+      <div className="mt-2 overflow-hidden rounded-md border bg-background text-xs">
+        <table className="w-full table-fixed border-collapse">
+          <thead className="bg-muted/60 text-muted-foreground">
+            <tr>
+              {preview.table.columns.map((column) => (
+                <th
+                  key={column.id}
+                  className="border-b px-2 py-1.5 text-left font-medium"
+                >
+                  <span className="block truncate">{column.label}</span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {preview.table.rows.length ? (
+              preview.table.rows.map((row, index) => (
+                <tr key={index} className="border-b last:border-b-0">
+                  {preview.table?.columns.map((column) => (
+                    <td key={column.id} className="px-2 py-1.5">
+                      <span className="block truncate">
+                        {row[column.id] ?? ""}
+                      </span>
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td
+                  className="px-2 py-2 text-muted-foreground"
+                  colSpan={Math.max(preview.table.columns.length, 1)}
+                >
+                  {t("editor.sourceComponent.noPreviewRows")}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+        {preview.table.truncated ? (
+          <div className="border-t px-2 py-1.5 text-muted-foreground">
+            {t("editor.sourceComponent.previewTruncated")}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  if (preview?.kind === "embed" && preview.url) {
+    return <SourceEmbedPreview url={preview.url} />;
+  }
+  if (preview?.fields?.length) {
+    return (
+      <div className="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+        {preview.fields.map((field) => (
+          <span
+            key={`${field.label}:${field.value}`}
+            className="rounded border bg-background px-1.5 py-0.5"
+          >
+            {field.label}: {field.value}
+          </span>
+        ))}
+      </div>
+    );
+  }
+  if (data.previewKind === "table") {
+    return (
+      <div className="mt-2 flex flex-wrap items-center gap-2 rounded-md border bg-background px-2.5 py-2 text-xs text-muted-foreground">
+        <IconTable className="size-4 shrink-0" />
+        {(data.previewItems?.length ? data.previewItems : ["Table"]).map(
+          (item) => (
+            <span
+              key={item}
+              className="rounded border bg-muted/40 px-1.5 py-0.5"
+            >
+              {item}
+            </span>
+          ),
+        )}
+      </div>
+    );
+  }
+  if (data.previewKind === "embed" && data.previewUrl) {
+    return <SourceEmbedPreview url={data.previewUrl} />;
+  }
+  if (data.previewItems?.length) {
+    return (
+      <div className="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+        {data.previewItems.map((item) => (
+          <span
+            key={item}
+            className="rounded border bg-background px-1.5 py-0.5"
+          >
+            {item}
+          </span>
+        ))}
+      </div>
+    );
+  }
+  return null;
+}
+
+export function SourceComponentRead({
+  data,
+  blockId,
+}: BlockReadProps<SourceComponentData>) {
+  const t = useT();
+  const label =
+    data.title ||
+    data.componentName ||
+    t("editor.sourceComponent.defaultTitle");
+  const status = data.preview?.status ?? data.previewStatus ?? "unavailable";
+  const statusLabel =
+    status === "available"
+      ? t("editor.sourceComponent.previewAvailable")
+      : status === "warning"
+        ? t("editor.sourceComponent.needsAttention")
+        : t("editor.sourceComponent.previewUnavailable");
+
+  return (
+    <section
+      data-block-id={blockId}
+      data-plan-interactive
+      className="an-block rounded-md border border-dashed bg-muted/20 px-3 py-3 text-sm"
+    >
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <div className="flex min-w-0 items-start gap-2">
+          {data.componentName === "Image" ? (
+            <IconPhoto className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          ) : (
+            <IconBox className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          )}
+          <div className="min-w-0">
+            <div className="truncate font-medium text-foreground">{label}</div>
+            <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+              <span className="inline-flex items-center gap-1">
+                <IconDatabase className="size-3.5" />
+                {providerLabel(data.provider)}
+              </span>
+              <span>{data.componentName}</span>
+              {data.sourceLabel ? <span>{data.sourceLabel}</span> : null}
+            </div>
+          </div>
+        </div>
+        <span className="shrink-0 rounded-full border bg-background px-2 py-0.5 text-[11px] text-muted-foreground">
+          {statusLabel}
+        </span>
+      </div>
+      {data.summary ? (
+        <div className="mt-2 text-sm leading-6 text-muted-foreground">
+          {data.summary}
+        </div>
+      ) : null}
+      <SourceComponentPreview data={data} />
+      <div className="mt-2 flex min-w-0 items-center gap-1 truncate text-[11px] text-muted-foreground">
+        <IconExternalLink className="size-3.5 shrink-0" />
+        <span className="truncate">{data.rawRef}</span>
+      </div>
+    </section>
+  );
+}
+
+export const sourceComponentBlock: BlockSpec<SourceComponentData> = {
+  ...sourceComponentBlockConfig,
+  Read: SourceComponentRead,
+  icon: IconBox,
+};

package/corpus/templates/content/app/blocks/contentBlockRegistry.tsx

@@ -26,6 +26,7 @@ import {
   ContentBlockMarkdownEditor,
 } from "./ContentBlockMarkdown";
 import { inlineDatabaseBlock } from "./InlineDatabaseBlock";
+import { sourceComponentBlock } from "./SourceComponentBlock";
 
 /**
  * Content's BROWSER block registry. Registers the same structured-block library
@@ -58,6 +59,7 @@ registerLibraryBlocks(contentBlockRegistry, {
 for (const block of builderDocsBlocks) {
   contentBlockRegistry.register(block);
 }
+contentBlockRegistry.register(sourceComponentBlock);
 contentBlockRegistry.register(inlineDatabaseBlock);
 
 type ContentBlockRenderContext = BlockRenderContext & {

package/corpus/templates/content/app/components/editor/BubbleToolbar.tsx

@@ -301,11 +301,11 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
                 setLinkUrl("");
               }
             }}
-            className="bg-transparent border-none outline-none text-white text-sm w-40 sm:w-48 px-1 py-1 placeholder:text-gray-400"
+            className="bg-transparent border-none outline-none text-popover-foreground text-sm w-40 sm:w-48 px-1 py-1 placeholder:text-muted-foreground"
           />
           <button
             onClick={handleSetLink}
-            className="text-xs text-blue-400 hover:text-blue-300 px-2 py-1.5 font-medium"
+            className="text-xs text-primary hover:text-primary/80 px-2 py-1.5 font-medium"
           >
             {t("editor.apply")}
           </button>
@@ -318,7 +318,7 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
           {items.map((item, i) => {
             if ("type" in item && item.type === "divider") {
               return (
-                <div key={`d-${i}`} className="w-px h-5 bg-gray-600 mx-0.5" />
+                <div key={`d-${i}`} className="w-px h-5 bg-border mx-0.5" />
               );
             }
             const {
@@ -340,8 +340,8 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
                     className={cn(
                       "p-2 rounded",
                       isActive()
-                        ? "bg-gray-600 text-white"
-                        : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                        ? "bg-accent text-accent-foreground"
+                        : "text-popover-foreground/75 hover:bg-accent hover:text-accent-foreground",
                     )}
                   >
                     <Icon size={16} strokeWidth={2.5} />

package/corpus/templates/content/app/components/editor/DocumentEditor.tsx

@@ -34,6 +34,7 @@ import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useComments } from "@/hooks/use-comments";
+import { useProcessBuilderBodyHydration } from "@/hooks/use-content-database";
 import {
   useDocument,
   useDocuments,
@@ -85,14 +86,18 @@ function adoptConfirmedSaveWatermarks({
   savedAt: string;
   title: string;
   content: string;
-  updates: Record<string, string>;
+  updates: {
+    title?: string;
+    content?: string;
+    icon?: string | null;
+  };
   lastSavedTitleRef: MutableRefObject<FieldSaveWatermark>;
   lastSavedContentRef: MutableRefObject<ContentSaveWatermark>;
 }) {
   if (updates.title !== undefined) {
     lastSavedTitleRef.current = { title, updatedAt: savedAt };
   } else if (
-    updates.content !== undefined &&
+    (updates.content !== undefined || updates.icon !== undefined) &&
     saved?.title === lastSavedTitleRef.current.title
   ) {
     lastSavedTitleRef.current = {
@@ -103,7 +108,7 @@ function adoptConfirmedSaveWatermarks({
   if (updates.content !== undefined) {
     lastSavedContentRef.current = { content, updatedAt: savedAt };
   } else if (
-    updates.title !== undefined &&
+    (updates.title !== undefined || updates.icon !== undefined) &&
     saved?.content === lastSavedContentRef.current.content
   ) {
     lastSavedContentRef.current = {
@@ -326,6 +331,9 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
   const t = useT();
   const updateDocument = useUpdateDocument();
   const queryClient = useQueryClient();
+  const processBuilderBodies = useProcessBuilderBodyHydration(
+    document.databaseMembership?.databaseDocumentId ?? documentId,
+  );
   const canEdit = document.canEdit ?? true;
   const canEditRef = useRef(canEdit);
   canEditRef.current = canEdit;
@@ -358,6 +366,7 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     string | null
   >(document.updatedAt ?? null);
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const promotedBuilderBodyRef = useRef<string | null>(null);
   const pendingDocumentSaveRef = useRef<PendingDocumentSave | null>(null);
   // Separate freshness watermarks for title and content so that a content save
   // never suppresses adopting a newer external title and vice versa.
@@ -388,6 +397,26 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     },
     [t],
   );
+
+  useEffect(() => {
+    const membership = document.databaseMembership;
+    const hydration = membership?.bodyHydration;
+    if (
+      !membership?.sourceId ||
+      !hydration ||
+      (hydration.status !== "pending" && hydration.status !== "error")
+    ) {
+      return;
+    }
+    const promotionKey = `${membership.sourceId}:${documentId}:${hydration.status}:${hydration.version ?? ""}`;
+    if (promotedBuilderBodyRef.current === promotionKey) return;
+    promotedBuilderBodyRef.current = promotionKey;
+    processBuilderBodies.mutate({
+      sourceId: membership.sourceId,
+      documentId,
+      limit: 1,
+    });
+  }, [document.databaseMembership, documentId, processBuilderBodies.mutate]);
   const titleFocusedRef = useRef(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const titleInputRef = useRef<HTMLTextAreaElement>(null);
@@ -1160,7 +1189,19 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
                           }
                           onSelect={(emoji) => {
                             void (async () => {
-                              await persistDocumentUpdates({ icon: emoji });
+                              const saved = await persistDocumentUpdates({
+                                icon: emoji,
+                              });
+                              adoptConfirmedSaveWatermarks({
+                                saved,
+                                savedAt:
+                                  saved?.updatedAt ?? new Date().toISOString(),
+                                title: localTitleRef.current,
+                                content: localContentRef.current,
+                                updates: { icon: emoji },
+                                lastSavedTitleRef,
+                                lastSavedContentRef,
+                              });
                             })().catch(handleBackgroundSaveError);
                           }}
                         />

package/corpus/templates/content/app/components/editor/VisualEditor.tsx

@@ -66,7 +66,10 @@ import {
   type NotionPageLink,
 } from "./extensions/NotionExtensions";
 import { notionFidelityExtensions } from "./extensions/NotionFidelity";
-import { RegistryBlockNode } from "./extensions/registryBlocks";
+import {
+  LockedSourceComponentBlocks,
+  RegistryBlockNode,
+} from "./extensions/registryBlocks";
 import { VideoNode } from "./extensions/VideoNode";
 import {
   getImageFiles,
@@ -1307,6 +1310,7 @@ export function createVisualEditorExtensions({
       // `VisualEditor` below. Mounted after the Notion nodes and before the
       // Markdown extension so the NFM <-> doc round-trip recognizes the node.
       RegistryBlockNode,
+      LockedSourceComponentBlocks,
       ContentReferenceNode.configure({
         currentPath: localFilePath ?? null,
         referenceDepth,