@agent-native/core 0.169.0 → 0.170.0

package/corpus/templates/plan/.agents/skills/secrets/SKILL.md

@@ -19,10 +19,17 @@ data, and generated extension/app content may mention credential **names** such
 as `OPENAI_API_KEY`, but must not contain real API keys, tokens, webhook URLs,
 signing secrets, OAuth refresh tokens, or private Builder/customer data.
 
-Secret values are supplied at runtime through deployment configuration, the
-encrypted `app_secrets` vault, `saveCredential` / `resolveCredential`, OAuth, or
-`${keys.NAME}` substitution. Examples must use obvious placeholders such as
-`<OPENAI_API_KEY>` or `${keys.SLACK_WEBHOOK}`, not real-looking copied values.
+Provider secret values are supplied at runtime through the encrypted
+`app_secrets` vault, `saveCredential` / `resolveCredential`, OAuth, or
+`${keys.NAME}` substitution. Deployment configuration is reserved for
+deploy-level secrets and non-provider configuration. Examples must use obvious
+placeholders such as `<OPENAI_API_KEY>` or `${keys.SLACK_WEBHOOK}`, not
+real-looking copied values.
+
+Provider credentials and provider account identifiers are workspace data. Use
+standard workspace connections and org/workspace vault scopes; never put them
+in `.env` or deployment environment variables, and never add a provider-specific
+action or startup bootstrap just to write a credential for one organization.
 
 ## Credential Modeling Preflight
 

package/corpus/templates/plan/app/routes/settings.tsx

@@ -23,7 +23,10 @@ export function meta() {
 
 export default function SettingsRoute() {
   const t = useT();
-  const agentSettingsTabs = useAgentSettingsTabs();
+  // /extensions redirects here and navigation.view supports "extensions"
+  // (see use-navigation-state.ts), so the settings tab must exist too —
+  // otherwise /settings/extensions silently falls back to General.
+  const agentSettingsTabs = useAgentSettingsTabs({ extensionTools: true });
   useSetPageTitle(t("settings.title"));
 
   const generalSearchEntries = useMemo<SettingsSearchEntry[]>(

package/corpus/templates/plan/app/routes.ts

@@ -1,4 +1,6 @@
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export default flatRoutes() satisfies RouteConfig;
+export default flatRoutes({
+  ignoredRouteFiles: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
+}) satisfies RouteConfig;

package/corpus/templates/plan/changelog/2026-08-22-the-extensions-link-now-opens-the-extensions-tab-instead-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-22
+---
+
+The Extensions link now opens the Extensions tab in Settings instead of silently landing on General.

package/corpus/templates/plan/netlify.toml

@@ -1,6 +1,6 @@
 [build]
 ignore = "node ./scripts/netlify-ignore-build.mjs plan"
-command = "export DATABASE_URL=${NETLIFY_DATABASE_URL:-$DATABASE_URL} && pnpm install && NITRO_PRESET=netlify pnpm --filter plan build && if [ \"${CONTEXT:-}\" = \"production\" ] || [ \"${AGENT_NATIVE_RUN_RELEASE_MIGRATIONS:-}\" = \"1\" ]; then pnpm --filter plan migrate:production; fi"
+command = "if [ \"${agentNativePrebuiltBuild:-}\" = \"true\" ]; then export DATABASE_URL=\"${agentNativePrebuiltDatabaseUrl:?}\" BETTER_AUTH_SECRET=\"${agentNativePrebuiltAuthSecret:?}\"; else export DATABASE_URL=${NETLIFY_DATABASE_URL:-$DATABASE_URL}; fi && pnpm install && NITRO_PRESET=netlify pnpm --filter plan build && if { [ \"${CONTEXT:-}\" = \"production\" ] || [ \"${AGENT_NATIVE_RUN_RELEASE_MIGRATIONS:-}\" = \"1\" ]; } && [ \"${agentNativePrebuiltBuild:-}\" != \"true\" ]; then pnpm --filter plan migrate:production; fi"
 publish = "templates/plan/dist"
 functions = "templates/plan/.netlify/functions-internal"
 

package/corpus/templates/slides/.agents/skills/secrets/SKILL.md

@@ -19,10 +19,17 @@ data, and generated extension/app content may mention credential **names** such
 as `OPENAI_API_KEY`, but must not contain real API keys, tokens, webhook URLs,
 signing secrets, OAuth refresh tokens, or private Builder/customer data.
 
-Secret values are supplied at runtime through deployment configuration, the
-encrypted `app_secrets` vault, `saveCredential` / `resolveCredential`, OAuth, or
-`${keys.NAME}` substitution. Examples must use obvious placeholders such as
-`<OPENAI_API_KEY>` or `${keys.SLACK_WEBHOOK}`, not real-looking copied values.
+Provider secret values are supplied at runtime through the encrypted
+`app_secrets` vault, `saveCredential` / `resolveCredential`, OAuth, or
+`${keys.NAME}` substitution. Deployment configuration is reserved for
+deploy-level secrets and non-provider configuration. Examples must use obvious
+placeholders such as `<OPENAI_API_KEY>` or `${keys.SLACK_WEBHOOK}`, not
+real-looking copied values.
+
+Provider credentials and provider account identifiers are workspace data. Use
+standard workspace connections and org/workspace vault scopes; never put them
+in `.env` or deployment environment variables, and never add a provider-specific
+action or startup bootstrap just to write a credential for one organization.
 
 ## Credential Modeling Preflight
 

package/corpus/templates/slides/actions/patch-deck.ts

@@ -37,6 +37,12 @@ import {
   assertHumanReadableDeckTitle,
   repairGeneratedDeckTitle,
 } from "../shared/deck-title.js";
+import { hashSlideContent } from "../shared/slide-fit.js";
+import {
+  awaitLayoutFitCheck,
+  formatOverflowForTool,
+  type SlideFitResult,
+} from "./_await-fit-check.js";
 
 // ---------------------------------------------------------------------------
 // Per-deck write lock — same pattern as add-slide.ts so all client and agent
@@ -850,21 +856,84 @@ export default defineAction({
         }
       });
 
+      // Start the freshness window right after the SQL write and before
+      // notifying editors — same ordering as add-slide/update-slide — so a
+      // fast render landing before this line isn't discarded as stale.
+      const fitSince = Date.now();
+
       notifyClients(deckId);
 
-      return {
+      const updatedSlideIds = [
+        ...new Set(
+          operations.flatMap((operation) =>
+            operation.op === "patch-slide" || operation.op === "add-slide"
+              ? [operation.slideId]
+              : [],
+          ),
+        ),
+      ];
+
+      // Only slides whose HTML actually changed can newly overflow — an
+      // add-slide always sets content; a patch-slide only when this batch's
+      // operation included `fields.content`. Re-check every one of them in
+      // parallel: a deck-wide restyle can touch dozens of slides, and polling
+      // them one at a time would serialize N fit-check timeouts.
+      const contentChangedSlideIds = [
+        ...new Set(
+          operations.flatMap((operation) =>
+            operation.op === "add-slide" ||
+            (operation.op === "patch-slide" &&
+              operation.fields.content !== undefined)
+              ? [operation.slideId]
+              : [],
+          ),
+        ),
+      ];
+      const finalSlides: Array<{ id?: unknown; content?: unknown }> =
+        Array.isArray(deck.slides) ? deck.slides : [];
+      const fitResults: SlideFitResult[] = await Promise.all(
+        contentChangedSlideIds.map((slideId) => {
+          const slide = finalSlides.find((s) => s.id === slideId);
+          return awaitLayoutFitCheck(
+            slideId,
+            fitSince,
+            5000,
+            hashSlideContent(
+              typeof slide?.content === "string" ? slide.content : "",
+            ),
+          );
+        }),
+      );
+      const overflows = fitResults.filter(
+        (fit): fit is Extract<SlideFitResult, { status: "overflows" }> =>
+          fit.status === "overflows",
+      );
+
+      const base = {
         ok: true,
         deckId,
         updatedAt: now,
-        updatedSlideIds: [
-          ...new Set(
-            operations.flatMap((operation) =>
-              operation.op === "patch-slide" || operation.op === "add-slide"
-                ? [operation.slideId]
-                : [],
-            ),
-          ),
-        ],
+        updatedSlideIds,
+      };
+
+      if (overflows.length === 0) return base;
+
+      return {
+        ...base,
+        layoutOverflow: {
+          overflows: overflows.map(({ measurement }) => ({
+            slideId: measurement.slideId,
+            verticalOverflow: measurement.verticalOverflow,
+            horizontalOverflow: measurement.horizontalOverflow ?? 0,
+            contentWidth: measurement.contentWidth,
+            contentHeight: measurement.contentHeight,
+            viewportWidth: measurement.viewportWidth,
+            viewportHeight: measurement.viewportHeight,
+          })),
+        },
+        message: overflows
+          .map(({ measurement }) => formatOverflowForTool(deckId, measurement))
+          .join("\n\n"),
       };
     });
   },

package/corpus/templates/slides/actions/update-slide.ts

@@ -297,6 +297,11 @@ export default defineAction({
       // structure renders and merges with concurrent typing via the Yjs CRDT.
       let applied = false;
       let notFound = false;
+      // Per-edit outcomes for the `edits` batch (e.g. "insert-after:0" means
+      // that edit's marker matched nothing and it silently no-opped). Stays
+      // undefined for the legacy fullContent/find paths, which have no
+      // per-edit breakdown to report.
+      let editResults: string[] | undefined;
       const previousContent = String(slide.content ?? "");
 
       if (fullContent !== undefined) {
@@ -327,6 +332,7 @@ export default defineAction({
         });
         slide.content = nextContent;
         applied = patched.changed;
+        editResults = patched.applied;
         if (!applied) slide.content = previousContent;
       } else if (find !== undefined) {
         const idx = previousContent.indexOf(find);
@@ -461,6 +467,7 @@ export default defineAction({
         return {
           applied,
           notFound,
+          editResults,
           slide,
           slideIndex,
           contentHash: hashSlideContent(String(slide.content ?? "")),
@@ -473,6 +480,7 @@ export default defineAction({
       return {
         applied,
         notFound,
+        editResults,
         slide,
         slideIndex,
         contentHash: hashSlideContent(String(slide.content ?? "")),
@@ -486,13 +494,14 @@ export default defineAction({
       };
     }
 
-    const { applied } = rmw;
+    const { applied, editResults } = rmw;
     if (!applied) {
       return {
         ok: true,
         deckId,
         slideId,
         applied: false,
+        editResults,
         contentHash: rmw.contentHash,
         deepLink: deckDeepLink(deckId),
       };
@@ -537,6 +546,7 @@ export default defineAction({
       deckId,
       slideId,
       applied,
+      editResults,
       contentHash: rmw.contentHash,
       deepLink: deckDeepLink(deckId),
       ...(rmw.contextMode

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -862,12 +862,22 @@ function MermaidHtmlContent({
   html: string;
   mermaidBlocks: string[];
 }) {
-  // Split on mermaid placeholders and interleave HTML + MermaidRenderer
-  const parts = html.split(/(<div data-mermaid-index="\d+"><\/div>)/);
+  // Split on mermaid placeholders and interleave HTML + MermaidRenderer. The
+  // per-fragment `{ __html }` objects are memoized for the same reason as
+  // BlankSlideContent's `dangerousHtml` above: a fresh literal each render
+  // re-assigns `innerHTML` and wipes the live contentEditable block.
+  const fragments = useMemo(
+    () =>
+      html
+        .split(/(<div data-mermaid-index="\d+"><\/div>)/)
+        .map((part) => ({ __html: part })),
+    [html],
+  );
 
   return (
     <>
-      {parts.map((part, i) => {
+      {fragments.map((fragment, i) => {
+        const part = fragment.__html;
         const match = part.match(/data-mermaid-index="(\d+)"/);
         if (match) {
           const idx = parseInt(match[1], 10);
@@ -881,7 +891,7 @@ function MermaidHtmlContent({
           );
         }
         if (!part.trim()) return null;
-        return <div key={i} dangerouslySetInnerHTML={{ __html: part }} />;
+        return <div key={i} dangerouslySetInnerHTML={fragment} />;
       })}
     </>
   );

package/corpus/templates/slides/app/components/editor/ExportMenu.tsx

@@ -1,8 +1,6 @@
-import {
-  agentNativePath,
-  appBasePath,
-} from "@agent-native/core/client/api-path";
+import { appBasePath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
+import { startWorkspaceProviderOAuth } from "@agent-native/core/client/integrations";
 import {
   IconDownload,
   IconUpload,
@@ -193,53 +191,12 @@ export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
       }
     };
 
-    const handleConnectGoogle = async (target?: Window | null) => {
-      const authUrl = new URL(
-        agentNativePath("/_agent-native/google-docs/auth-url"),
-        window.location.origin,
-      );
-      authUrl.searchParams.set(
-        "return",
-        window.location.pathname + window.location.search,
-      );
-
-      const popup =
-        target ??
-        window.open("", "google-docs-oauth", "popup,width=520,height=720");
-      if (!popup) {
-        toast.error(t("editorExport.exportFailed"), {
-          description: t("editorExport.exportGoogleSlidesError"),
-        });
-        return;
-      }
-
-      try {
-        const response = await fetch(authUrl.toString(), {
-          credentials: "same-origin",
-        });
-        if (!response.ok) {
-          throw new Error(
-            await readErrorMessage(
-              response,
-              t("editorExport.exportGoogleSlidesError"),
-            ),
-          );
-        }
-        const data = (await response.json()) as { url?: unknown };
-        if (typeof data.url !== "string") {
-          throw new Error(t("editorExport.exportGoogleSlidesError"));
-        }
-        popup.location.href = data.url;
-      } catch (err) {
-        popup?.close();
-        console.error("Google connection failed:", err);
-        toast.error(t("editorExport.exportFailed"), {
-          description:
-            err instanceof Error
-              ? err.message
-              : t("editorExport.exportGoogleSlidesError"),
-        });
-      }
+    const handleConnectGoogle = () => {
+      startWorkspaceProviderOAuth("google_drive", {
+        appId: "slides",
+        returnPath: `${window.location.pathname}${window.location.search}`,
+        scope: "user",
+      });
     };
 
     const handleExportGoogleSlides = async () => {
@@ -253,7 +210,8 @@ export const ExportMenu = forwardRef<ExportMenuHandle, ExportMenuProps>(
         const result = await onExportGoogleSlides();
         if ("requiresConnection" in result && result.requiresConnection) {
           googleSlidesImportTarget.current = null;
-          await handleConnectGoogle(target);
+          target?.close();
+          handleConnectGoogle();
           return;
         }
         if (result.url !== null) {

package/corpus/templates/slides/app/components/editor/GoogleDocImportHint.tsx

@@ -1,6 +1,6 @@
 import { agentNativePath } from "@agent-native/core/client/api-path";
-import { oauthRedirectUri } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
+import { startWorkspaceProviderOAuth } from "@agent-native/core/client/integrations";
 import { extractGoogleDocUrls } from "@shared/google-docs";
 import {
   IconAlertCircle,
@@ -228,60 +228,15 @@ export function GoogleDocImportHint({
     return () => onSourceContextChange("");
   }, [onSourceContextChange]);
 
-  const connect = useCallback(async () => {
+  const connect = useCallback(() => {
     setConnecting(true);
     setError(null);
-    const popup = window.open(
-      "about:blank",
-      "google-docs-oauth",
-      "popup,width=520,height=720",
-    );
-    try {
-      const callbackUrl = oauthRedirectUri(
-        "/_agent-native/google-docs/callback",
-      );
-      const authUrl = new URL(endpoint("/_agent-native/google-docs/auth-url"));
-      authUrl.searchParams.set("redirect_uri", callbackUrl);
-      authUrl.searchParams.set(
-        "return",
-        window.location.pathname + window.location.search,
-      );
-      const response = await fetch(authUrl.toString(), {
-        credentials: "same-origin",
-      });
-      const data = await readJson<{
-        url?: string;
-        error?: string;
-        message?: string;
-      }>(response);
-      if (!response.ok || !data.url) {
-        throw new Error(
-          errorFromResponse(response, data, "Could not start Google OAuth"),
-        );
-      }
-      if (!popup) {
-        window.location.href = data.url;
-        return;
-      }
-      popup.location.href = data.url;
-
-      const deadline = Date.now() + 90_000;
-      while (Date.now() < deadline && !popup.closed) {
-        await new Promise((resolve) => window.setTimeout(resolve, 1200));
-        const next = await refreshStatus();
-        if (next?.connected) {
-          popup.close();
-          return;
-        }
-      }
-      await refreshStatus();
-    } catch (caught) {
-      popup?.close();
-      setError(caught instanceof Error ? caught.message : String(caught));
-    } finally {
-      setConnecting(false);
-    }
-  }, [refreshStatus]);
+    startWorkspaceProviderOAuth("google_drive", {
+      appId: "slides",
+      returnPath: `${window.location.pathname}${window.location.search}`,
+      scope: "user",
+    });
+  }, []);
 
   const chooseDocument = useCallback(async () => {
     setChoosing(true);

package/corpus/templates/slides/app/components/editor/GoogleDriveConnectionCta.tsx

@@ -1,6 +1,6 @@
 import { agentNativePath } from "@agent-native/core/client/api-path";
-import { oauthRedirectUri } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
+import { startWorkspaceProviderOAuth } from "@agent-native/core/client/integrations";
 import {
   IconBrandGoogleDrive,
   IconLoader2,
@@ -19,12 +19,6 @@ interface GoogleDocsStatus {
   message?: string;
 }
 
-interface GoogleDocsAuthResponse {
-  url?: string;
-  error?: string;
-  message?: string;
-}
-
 type JsonReadResult<T> = { ok: true; data: T } | { ok: false; error: Error };
 
 function endpoint(path: string): string {
@@ -54,13 +48,7 @@ function responseError(
   );
 }
 
-export interface GoogleDriveConnectionCtaProps {
-  onConnected?: () => void;
-}
-
-export function GoogleDriveConnectionCta({
-  onConnected,
-}: GoogleDriveConnectionCtaProps) {
+export function GoogleDriveConnectionCta() {
   const t = useT();
   const [status, setStatus] = useState<GoogleDocsStatus | null>(null);
   const [loading, setLoading] = useState(true);
@@ -102,70 +90,16 @@ export function GoogleDriveConnectionCta({
 
   const needsReconnect =
     status?.connected === true && status.googleSlidesUrlImportReady === false;
-  const requiresUrlImportAccess =
-    status?.connected === true ||
-    status?.googleSlidesUrlImportReady !== undefined;
-
-  const connect = useCallback(async () => {
+  const connect = useCallback(() => {
     if (connecting) return;
     setConnecting(true);
     setError(null);
-    const popup = window.open(
-      "about:blank",
-      "google-docs-oauth",
-      "popup,width=520,height=720",
-    );
-    try {
-      const authUrl = new URL(endpoint("/_agent-native/google-docs/auth-url"));
-      authUrl.searchParams.set(
-        "redirect_uri",
-        oauthRedirectUri("/_agent-native/google-docs/callback"),
-      );
-      authUrl.searchParams.set(
-        "return",
-        window.location.pathname + window.location.search,
-      );
-      const response = await fetch(authUrl.toString(), {
-        credentials: "same-origin",
-      });
-      const result = await readJson<GoogleDocsAuthResponse>(response);
-      if (!result.ok) throw result.error;
-      if (!response.ok || !result.data.url) {
-        throw responseError(
-          response,
-          result.data,
-          "Could not start Google OAuth",
-        );
-      }
-      if (!popup) {
-        window.location.href = result.data.url;
-        return;
-      }
-      popup.location.href = result.data.url;
-
-      const deadline = Date.now() + 90_000;
-      while (Date.now() < deadline && !popup.closed) {
-        await new Promise((resolve) => window.setTimeout(resolve, 1_200));
-        const next = await refreshStatus();
-        const nextHasUrlImportAccess =
-          next?.googleSlidesUrlImportReady ?? !requiresUrlImportAccess;
-        if (next?.connected && nextHasUrlImportAccess) {
-          popup.close();
-          onConnected?.();
-          return;
-        }
-      }
-      const next = await refreshStatus();
-      const nextHasUrlImportAccess =
-        next?.googleSlidesUrlImportReady ?? !requiresUrlImportAccess;
-      if (next?.connected && nextHasUrlImportAccess) onConnected?.();
-    } catch (caught) {
-      popup?.close();
-      setError(caught instanceof Error ? caught.message : String(caught));
-    } finally {
-      setConnecting(false);
-    }
-  }, [connecting, onConnected, refreshStatus, requiresUrlImportAccess]);
+    startWorkspaceProviderOAuth("google_drive", {
+      appId: "slides",
+      returnPath: `${window.location.pathname}${window.location.search}`,
+      scope: "user",
+    });
+  }, [connecting]);
 
   if (dismissed || loading || (status?.connected && !needsReconnect)) {
     return null;

package/corpus/templates/slides/app/components/editor/GoogleSlidesReferenceImport.tsx

@@ -1,7 +1,7 @@
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import { useActionMutation } from "@agent-native/core/client/hooks";
-import { oauthRedirectUri } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
+import { startWorkspaceProviderOAuth } from "@agent-native/core/client/integrations";
 import {
   IconBrandGoogleDrive,
   IconFolderOpen,
@@ -163,68 +163,16 @@ export function GoogleSlidesReferenceImport({
     [onBusyChange],
   );
 
-  const connect = useCallback(async () => {
+  const connect = useCallback(() => {
     setConnecting(true);
     reportBusy(true);
     setError(null);
-    const popup = window.open(
-      "about:blank",
-      "google-docs-oauth",
-      "popup,width=520,height=720",
-    );
-    try {
-      const callbackUrl = oauthRedirectUri(
-        "/_agent-native/google-docs/callback",
-      );
-      const authUrl = new URL(endpoint("/_agent-native/google-docs/auth-url"));
-      authUrl.searchParams.set("redirect_uri", callbackUrl);
-      authUrl.searchParams.set(
-        "return",
-        window.location.pathname + window.location.search,
-      );
-      const response = await fetch(authUrl.toString(), {
-        credentials: "same-origin",
-      });
-      const result = await readJson<{
-        url?: string;
-        error?: string;
-        message?: string;
-      }>(response);
-      if (!result.ok) throw result.error;
-      const data = result.data;
-      if (!response.ok || !data?.url) {
-        throw new Error(
-          errorFromResponse(
-            response,
-            data ?? {},
-            "Could not start Google OAuth",
-          ),
-        );
-      }
-      if (!popup) {
-        window.location.href = data.url;
-        return;
-      }
-      popup.location.href = data.url;
-
-      const deadline = Date.now() + 90_000;
-      while (Date.now() < deadline && !popup.closed) {
-        await new Promise((resolve) => window.setTimeout(resolve, 1200));
-        const next = await refreshStatus();
-        if (next?.connected) {
-          popup.close();
-          return;
-        }
-      }
-      await refreshStatus();
-    } catch (caught) {
-      popup?.close();
-      setError(caught instanceof Error ? caught.message : String(caught));
-    } finally {
-      setConnecting(false);
-      reportBusy(false);
-    }
-  }, [refreshStatus, reportBusy]);
+    startWorkspaceProviderOAuth("google_drive", {
+      appId: "slides",
+      returnPath: `${window.location.pathname}${window.location.search}`,
+      scope: "user",
+    });
+  }, [reportBusy]);
 
   const chooseDocument = useCallback(async () => {
     setChoosing(true);

package/corpus/templates/slides/app/components/editor/SlideContextToolbar.tsx

@@ -386,7 +386,11 @@ export function SlideContextToolbar({
                   </TooltipTrigger>
                   <TooltipContent>{t("styleInspector.weight")}</TooltipContent>
                 </Tooltip>
-                <DropdownMenuContent align="start" className="w-36">
+                <DropdownMenuContent
+                  align="start"
+                  className="w-36"
+                  {...inlineEditSurfaceProps}
+                >
                   {fontWeightOptions(t).map((option) => (
                     <DropdownMenuItem
                       key={option.value}
@@ -481,7 +485,11 @@ export function SlideContextToolbar({
                   </TooltipTrigger>
                   <TooltipContent>{t("styleInspector.align")}</TooltipContent>
                 </Tooltip>
-                <DropdownMenuContent align="start" className="w-36">
+                <DropdownMenuContent
+                  align="start"
+                  className="w-36"
+                  {...inlineEditSurfaceProps}
+                >
                   {textAlignOptions(t).map((option) => (
                     <DropdownMenuItem
                       key={option.value}