@agent-native/core 0.76.11 → 0.76.13

package/corpus/README.md

@@ -27,5 +27,5 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 1928
-- template files: 4250
+- core files: 1929
+- template files: 4251

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @agent-native/core
 
+## 0.76.13
+
+### Patch Changes
+
+- d12772c: Durable background agent-chat: raise the foreground circuit-breaker's claim grace
+  from 8s to 15s (`BACKGROUND_CLAIM_GRACE_MS`). Heavy apps (observed on analytics
+  in prod) take longer than 8s to cold-start the background function and reach
+  `claimBackgroundRun`, so the foreground recovered inline every time — adding ~8s
+  latency per turn and never using the 15-minute background budget. 15s lets the
+  slow-but-alive workers win the claim while staying well within the foreground's
+  ~40s soft-timeout; a genuinely dead worker still falls back to inline.
+
+## 0.76.12
+
+### Patch Changes
+
+- 93292e4: Improve localization coverage by localizing framework error screens and docs UI surfaces, and add a baseline-aware i18n guard that fails on new raw visible UI strings.
+- 93292e4: Localize shared feedback and docs block chrome while tightening the i18n raw-literal guard.
+
 ## 0.76.11
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.76.11",
+  "version": "0.76.13",
   "type": "module",
   "engines": {
     "node": ">=22"

package/corpus/core/src/agent/production-agent.ts

@@ -153,11 +153,14 @@ export { PROVIDER_TO_ENV };
 /**
  * Grace window + poll interval for the foreground circuit-breaker that confirms
  * a background worker actually CLAIMED a 202-dispatched run before recovering
- * inline. The grace is long enough for a cold-start worker to win the claim
- * (~1-2s typical) and short enough to recover quickly within the foreground's
- * ~40s soft-timeout.
+ * inline. The grace must cover the worker's cold-start + per-request init before
+ * it reaches `claimBackgroundRun`: light apps win the claim in ~1-2s, but heavy
+ * apps (e.g. analytics) were observed in prod taking >8s, so an 8s grace made
+ * their worker lose the race every time and always fall back to inline (adding
+ * ~8s latency with no background budget). 15s covers the slow apps while staying
+ * well within the foreground's ~40s soft-timeout.
  */
-export const BACKGROUND_CLAIM_GRACE_MS = 8_000;
+export const BACKGROUND_CLAIM_GRACE_MS = 15_000;
 export const BACKGROUND_CLAIM_POLL_MS = 400;
 
 export type BackgroundDispatchOutcome =

package/corpus/core/src/client/FeedbackButton.tsx

@@ -13,6 +13,8 @@ import { IconMessage2, IconCheck } from "@tabler/icons-react";
 import { cn } from "./utils.js";
 import { useSession } from "./use-session.js";
 import { getFeedbackClientContext } from "./feedback-context.js";
+import { useLocale } from "./i18n.js";
+import { DEFAULT_LOCALE, type LocaleCode } from "../localization/shared.js";
 
 const DEFAULT_FEEDBACK_URL =
   "https://forms.agent-native.com/f/agent-native-feedback/_16ewV";
@@ -27,10 +29,142 @@ interface FormSchema {
   fieldId: string;
 }
 
-const DEFAULT_PLACEHOLDER =
-  "What's working, what's broken, or what would you change?";
-const DEFAULT_SUBMIT_TEXT = "Send feedback";
-const DEFAULT_SUCCESS_MESSAGE = "Thanks for the feedback!";
+const FEEDBACK_COPY: Record<
+  LocaleCode,
+  {
+    label: string;
+    placeholder: string;
+    submit: string;
+    submitting: string;
+    success: string;
+    loadError: string;
+    invalidUrl: string;
+    emptyError: string;
+    sendError: string;
+    keyboardHint: string;
+  }
+> = {
+  "en-US": {
+    label: "Feedback",
+    placeholder: "What's working, what's broken, or what would you change?",
+    submit: "Send feedback",
+    submitting: "Sending...",
+    success: "Thanks for the feedback!",
+    loadError: "Couldn't load feedback form",
+    invalidUrl: "Invalid feedback URL",
+    emptyError: "Please write something first",
+    sendError: "Couldn't send feedback",
+    keyboardHint: "{{shortcut}}+Enter to send",
+  },
+  "zh-CN": {
+    label: "反馈",
+    placeholder: "哪些地方好用、哪里坏了，或你想改什么？",
+    submit: "发送反馈",
+    submitting: "正在发送...",
+    success: "感谢你的反馈！",
+    loadError: "无法加载反馈表单",
+    invalidUrl: "反馈 URL 无效",
+    emptyError: "请先写点内容",
+    sendError: "无法发送反馈",
+    keyboardHint: "{{shortcut}}+Enter 发送",
+  },
+  "es-ES": {
+    label: "Comentarios",
+    placeholder: "¿Qué funciona, qué falla o qué cambiarías?",
+    submit: "Enviar comentarios",
+    submitting: "Enviando...",
+    success: "Gracias por tus comentarios.",
+    loadError: "No se pudo cargar el formulario",
+    invalidUrl: "URL de comentarios no válida",
+    emptyError: "Escribe algo primero",
+    sendError: "No se pudieron enviar los comentarios",
+    keyboardHint: "{{shortcut}}+Enter para enviar",
+  },
+  "fr-FR": {
+    label: "Retour",
+    placeholder: "Qu'est-ce qui marche, casse ou devrait changer ?",
+    submit: "Envoyer",
+    submitting: "Envoi...",
+    success: "Merci pour votre retour.",
+    loadError: "Impossible de charger le formulaire",
+    invalidUrl: "URL de retour invalide",
+    emptyError: "Écrivez quelque chose d'abord",
+    sendError: "Impossible d'envoyer le retour",
+    keyboardHint: "{{shortcut}}+Entrée pour envoyer",
+  },
+  "de-DE": {
+    label: "Feedback",
+    placeholder: "Was funktioniert, was ist kaputt, was würdest du ändern?",
+    submit: "Feedback senden",
+    submitting: "Wird gesendet...",
+    success: "Danke für dein Feedback!",
+    loadError: "Feedback-Formular konnte nicht geladen werden",
+    invalidUrl: "Ungültige Feedback-URL",
+    emptyError: "Bitte zuerst etwas schreiben",
+    sendError: "Feedback konnte nicht gesendet werden",
+    keyboardHint: "{{shortcut}}+Enter zum Senden",
+  },
+  "ja-JP": {
+    label: "フィードバック",
+    placeholder: "良い点、問題点、変更したい点を教えてください。",
+    submit: "送信",
+    submitting: "送信中...",
+    success: "フィードバックありがとうございます。",
+    loadError: "フォームを読み込めませんでした",
+    invalidUrl: "フィードバック URL が無効です",
+    emptyError: "先に内容を入力してください",
+    sendError: "送信できませんでした",
+    keyboardHint: "{{shortcut}}+Enter で送信",
+  },
+  "ko-KR": {
+    label: "피드백",
+    placeholder: "잘 되는 점, 깨진 점, 바꾸고 싶은 점을 알려주세요.",
+    submit: "피드백 보내기",
+    submitting: "보내는 중...",
+    success: "피드백 감사합니다.",
+    loadError: "피드백 양식을 불러올 수 없습니다",
+    invalidUrl: "피드백 URL이 올바르지 않습니다",
+    emptyError: "먼저 내용을 입력해 주세요",
+    sendError: "피드백을 보낼 수 없습니다",
+    keyboardHint: "{{shortcut}}+Enter로 보내기",
+  },
+  "pt-BR": {
+    label: "Feedback",
+    placeholder: "O que funciona, quebrou ou você mudaria?",
+    submit: "Enviar feedback",
+    submitting: "Enviando...",
+    success: "Obrigado pelo feedback!",
+    loadError: "Não foi possível carregar o formulário",
+    invalidUrl: "URL de feedback inválida",
+    emptyError: "Escreva algo primeiro",
+    sendError: "Não foi possível enviar o feedback",
+    keyboardHint: "{{shortcut}}+Enter para enviar",
+  },
+  "hi-IN": {
+    label: "फ़ीडबैक",
+    placeholder: "क्या काम कर रहा है, क्या टूटा है, या आप क्या बदलना चाहेंगे?",
+    submit: "फ़ीडबैक भेजें",
+    submitting: "भेजा जा रहा है...",
+    success: "फ़ीडबैक के लिए धन्यवाद!",
+    loadError: "फ़ीडबैक फ़ॉर्म लोड नहीं हुआ",
+    invalidUrl: "फ़ीडबैक URL अमान्य है",
+    emptyError: "पहले कुछ लिखें",
+    sendError: "फ़ीडबैक भेजा नहीं जा सका",
+    keyboardHint: "भेजने के लिए {{shortcut}}+Enter",
+  },
+  "ar-SA": {
+    label: "ملاحظات",
+    placeholder: "ما الذي يعمل، وما المعطل، وما الذي تريد تغييره؟",
+    submit: "إرسال الملاحظات",
+    submitting: "جار الإرسال...",
+    success: "شكرا لملاحظاتك!",
+    loadError: "تعذر تحميل نموذج الملاحظات",
+    invalidUrl: "رابط الملاحظات غير صالح",
+    emptyError: "اكتب شيئا أولا",
+    sendError: "تعذر إرسال الملاحظات",
+    keyboardHint: "{{shortcut}}+Enter للإرسال",
+  },
+};
 
 function parseTarget(url: string): ParsedTarget | null {
   try {
@@ -114,7 +248,7 @@ const honeypotStyle: CSSProperties = {
 
 export function FeedbackButton({
   variant = "sidebar",
-  label = "Feedback",
+  label,
   url = DEFAULT_FEEDBACK_URL,
   className,
   side,
@@ -128,6 +262,9 @@ export function FeedbackButton({
 }: FeedbackButtonProps) {
   const target = parseTarget(url);
   const { session } = useSession();
+  const { locale } = useLocale();
+  const copy = FEEDBACK_COPY[locale] ?? FEEDBACK_COPY[DEFAULT_LOCALE];
+  const resolvedLabel = label ?? copy.label;
 
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
@@ -163,10 +300,10 @@ export function FeedbackButton({
         .then((s) => setSchema(s))
         .catch((err) => {
           console.error("[FeedbackButton] schema load failed", err);
-          setError("Couldn't load feedback form");
+          setError(copy.loadError);
         });
     } else {
-      setError("Invalid feedback URL");
+      setError(copy.invalidUrl);
     }
     const t = setTimeout(() => textareaRef.current?.focus(), 30);
     return () => {
@@ -184,7 +321,7 @@ export function FeedbackButton({
       if (!target || submitting) return;
       const trimmed = value.trim();
       if (!trimmed) {
-        setError("Please write something first");
+        setError(copy.emptyError);
         return;
       }
       setSubmitting(true);
@@ -223,7 +360,7 @@ export function FeedbackButton({
         closeTimerRef.current = setTimeout(() => setOpen(false), 1400);
       } catch (err) {
         setSubmitting(false);
-        setError(err instanceof Error ? err.message : "Couldn't send feedback");
+        setError(err instanceof Error ? err.message : copy.sendError);
       }
     },
     [
@@ -236,6 +373,8 @@ export function FeedbackButton({
       chatSessionId,
       chatStorageKey,
       setOpen,
+      copy.emptyError,
+      copy.sendError,
     ],
   );
 
@@ -254,7 +393,7 @@ export function FeedbackButton({
             <PopoverPrimitive.Trigger asChild>
               <button
                 type="button"
-                aria-label={label}
+                aria-label={resolvedLabel}
                 className={cn(
                   "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50",
                   className,
@@ -269,7 +408,7 @@ export function FeedbackButton({
               sideOffset={6}
               className="z-[300] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95"
             >
-              {label}
+              {resolvedLabel}
             </TooltipPrimitive.Content>
           </TooltipPrimitive.Portal>
         </TooltipPrimitive.Root>
@@ -280,14 +419,14 @@ export function FeedbackButton({
       <PopoverPrimitive.Trigger asChild>
         <button
           type="button"
-          aria-label={label}
+          aria-label={resolvedLabel}
           className={cn(
             "flex h-8 items-center gap-2 rounded-md border border-border bg-transparent px-3 text-sm text-muted-foreground transition hover:border-foreground/40 hover:text-foreground",
             className,
           )}
         >
           <IconMessage2 size={14} stroke={1.5} />
-          <span>{label}</span>
+          <span>{resolvedLabel}</span>
         </button>
       </PopoverPrimitive.Trigger>
     );
@@ -302,14 +441,14 @@ export function FeedbackButton({
           )}
         >
           <IconMessage2 className="h-4 w-4" />
-          <span>{label}</span>
+          <span>{resolvedLabel}</span>
         </button>
       </PopoverPrimitive.Trigger>
     );
   }
 
   const resolvedSide = side ?? (variant === "sidebar" ? "top" : "bottom");
-  const resolvedPlaceholder = placeholder ?? DEFAULT_PLACEHOLDER;
+  const resolvedPlaceholder = placeholder ?? copy.placeholder;
 
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
@@ -329,7 +468,7 @@ export function FeedbackButton({
                 <IconCheck size={20} stroke={2.5} />
               </div>
               <div className="text-sm font-medium text-foreground">
-                {DEFAULT_SUCCESS_MESSAGE}
+                {copy.success}
               </div>
             </div>
           ) : (
@@ -363,14 +502,19 @@ export function FeedbackButton({
                   )}
                 >
                   {error ??
-                    `${/Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘" : "Ctrl"}+Enter to send`}
+                    copy.keyboardHint.replace(
+                      "{{shortcut}}",
+                      /Mac|iPhone|iPad/.test(navigator.userAgent)
+                        ? "⌘"
+                        : "Ctrl",
+                    )}
                 </div>
                 <button
                   type="submit"
                   disabled={submitting || !value.trim()}
                   className="inline-flex h-8 items-center justify-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                 >
-                  {submitting ? "Sending…" : DEFAULT_SUBMIT_TEXT}
+                  {submitting ? copy.submitting : copy.submit}
                 </button>
               </div>
             </form>

package/corpus/core/src/client/blocks/library/AnnotatedCodeBlock.tsx

@@ -27,6 +27,7 @@ import {
 } from "./annotation-rail.js";
 import { CodeFilenameLabel } from "./code-filename-label.js";
 import { DevInput, DevLabel, DevTextarea } from "./dev-doc-ui.js";
+import { useBlockCopy } from "./block-copy.js";
 
 /**
  * "Explain this code" walkthrough block: a standard syntax-highlighted code
@@ -158,6 +159,7 @@ function AnnotatedCodeRead({
   summary,
   ctx,
 }: BlockReadProps<AnnotatedCodeData>) {
+  const copy = useBlockCopy();
   // On-hover popover (anchored to the right of the code) replaces the old
   // persistent rail: nothing is visible when idle. `codeRef` measures the code
   // block's right edge; `hover` carries the active index + captured geometry.
@@ -312,7 +314,11 @@ function AnnotatedCodeRead({
         tabIndex={isAnnotated ? 0 : undefined}
         role={isAnnotated ? "button" : undefined}
         aria-expanded={isAnnotated ? isActive : undefined}
-        aria-label={isAnnotated ? `Line ${lineNo} annotation` : undefined}
+        aria-label={
+          isAnnotated
+            ? copy.lineAnnotation.replace("{{line}}", String(lineNo))
+            : undefined
+        }
         className={cn(
           "relative flex w-full",
           isAnnotated && "cursor-pointer",
@@ -494,7 +500,10 @@ function AnnotatedCodeRead({
                   ···
                 </span>
                 <span className="flex-1 text-[11px] text-plan-muted/70">
-                  {hiddenCount} lines — click to expand
+                  {copy.hiddenLinesExpand.replace(
+                    "{{count}}",
+                    String(hiddenCount),
+                  )}
                 </span>
               </button>
             );

package/corpus/core/src/client/blocks/library/ApiEndpointBlock.tsx

@@ -22,6 +22,7 @@ import {
   API_ENDPOINT_METHODS,
   API_PARAM_LOCATIONS,
 } from "./api-endpoint.config.js";
+import { useBlockCopy } from "./block-copy.js";
 import { JsonExplorerSurface } from "./JsonExplorerBlock.js";
 import {
   DevBadge,
@@ -127,31 +128,33 @@ const CHANGE_INK: Record<ApiEndpointChange, string> = {
  */
 function ChangeChip({
   change,
+  label = CHANGE_LABEL[change],
   variant = "glyph",
   className,
 }: {
   change: ApiEndpointChange;
+  label?: string;
   variant?: "glyph" | "label";
   className?: string;
 }) {
   if (variant === "label") {
     return (
       <span
-        title={CHANGE_LABEL[change]}
+        title={label}
         className={cn(
           "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide",
           CHANGE_BADGE[change],
           className,
         )}
       >
-        {CHANGE_LABEL[change]}
+        {label}
       </span>
     );
   }
   return (
     <span
-      title={CHANGE_LABEL[change]}
-      aria-label={CHANGE_LABEL[change]}
+      title={label}
+      aria-label={label}
       className={cn(
         "flex size-4 shrink-0 items-center justify-center rounded text-[10px] font-bold leading-none",
         CHANGE_BADGE[change],
@@ -402,6 +405,13 @@ export function ApiEndpointRead({
   ctx,
 }: BlockReadProps<ApiEndpointData>) {
   const [open, setOpen] = useState(false);
+  const copy = useBlockCopy();
+  const changeLabel: Record<ApiEndpointChange, string> = {
+    added: copy.added,
+    modified: copy.modified,
+    removed: copy.removed,
+    renamed: copy.renamed,
+  };
 
   const params = data.params ?? [];
   const responses = data.responses ?? [];
@@ -467,10 +477,16 @@ export function ApiEndpointRead({
           >
             {data.path}
           </span>
-          {data.change && <ChangeChip change={data.change} variant="label" />}
+          {data.change && (
+            <ChangeChip
+              change={data.change}
+              label={changeLabel[data.change]}
+              variant="label"
+            />
+          )}
           {data.deprecated && (
             <DevBadge className="shrink-0 border-amber-500/40 text-amber-600 dark:text-amber-300">
-              Deprecated
+              {copy.deprecated}
             </DevBadge>
           )}
           {(data.summary || summary) && (
@@ -481,7 +497,7 @@ export function ApiEndpointRead({
           {data.auth && (
             <IconLock
               className="size-3.5 shrink-0 text-plan-muted"
-              aria-label="Requires authentication"
+              aria-label={copy.requiresAuthentication}
             />
           )}
         </button>
@@ -495,7 +511,9 @@ export function ApiEndpointRead({
               <div className="mb-4 flex items-center gap-2 text-xs text-plan-muted">
                 <IconLock className="size-3.5 shrink-0" />
                 <span>
-                  <span className="font-medium text-plan-text">Auth:</span>{" "}
+                  <span className="font-medium text-plan-text">
+                    {copy.auth}:
+                  </span>{" "}
                   {data.auth}
                 </span>
               </div>
@@ -510,17 +528,21 @@ export function ApiEndpointRead({
             {params.length > 0 && (
               <div className="mt-5">
                 <div className="text-xs font-semibold uppercase tracking-wide text-plan-muted">
-                  Parameters
+                  {copy.parameters}
                 </div>
                 <div className="mt-2 overflow-hidden rounded-lg border border-plan-line">
                   <table className="w-full border-collapse text-sm">
                     <thead>
                       <tr className="bg-accent/30 text-left text-xs uppercase tracking-wide text-plan-muted">
-                        <th className="px-3 py-2 font-medium">Name</th>
-                        <th className="px-3 py-2 font-medium">In</th>
-                        <th className="px-3 py-2 font-medium">Type</th>
-                        <th className="px-3 py-2 font-medium">Required</th>
-                        <th className="px-3 py-2 font-medium">Description</th>
+                        <th className="px-3 py-2 font-medium">{copy.name}</th>
+                        <th className="px-3 py-2 font-medium">{copy.in}</th>
+                        <th className="px-3 py-2 font-medium">{copy.type}</th>
+                        <th className="px-3 py-2 font-medium">
+                          {copy.requiredColumn}
+                        </th>
+                        <th className="px-3 py-2 font-medium">
+                          {copy.description}
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
@@ -556,7 +578,12 @@ export function ApiEndpointRead({
                                 >
                                   {param.name}
                                 </span>
-                                {change && <ChangeChip change={change} />}
+                                {change && (
+                                  <ChangeChip
+                                    change={change}
+                                    label={changeLabel[change]}
+                                  />
+                                )}
                               </span>
                             </td>
                             <td className="px-3 py-2">
@@ -589,11 +616,11 @@ export function ApiEndpointRead({
                                 current={
                                   param.required ? (
                                     <span className="font-medium text-red-600 dark:text-red-300">
-                                      required
+                                      {copy.required}
                                     </span>
                                   ) : (
                                     <span className="text-plan-muted">
-                                      optional
+                                      {copy.optional}
                                     </span>
                                   )
                                 }
@@ -615,7 +642,7 @@ export function ApiEndpointRead({
               <div className="mt-5">
                 <div className="flex items-center gap-2">
                   <span className="text-xs font-semibold uppercase tracking-wide text-plan-muted">
-                    Request body
+                    {copy.requestBody}
                   </span>
                   {data.request?.contentType && (
                     <span className="rounded bg-accent/40 px-1.5 py-0.5 font-mono text-[11px] text-plan-muted">
@@ -636,7 +663,7 @@ export function ApiEndpointRead({
             {responses.length > 0 && (
               <div className="mt-5">
                 <div className="text-xs font-semibold uppercase tracking-wide text-plan-muted">
-                  Responses
+                  {copy.responses}
                 </div>
                 <div className="mt-2 flex flex-col gap-3">
                   {responses.map((response, index) => (

package/corpus/core/src/client/blocks/library/MermaidBlock.tsx

@@ -5,6 +5,7 @@ import type { BlockEditProps, BlockReadProps } from "../types.js";
 import type { MermaidData } from "./mermaid.config.js";
 import { DevInput, DevLabel } from "./dev-doc-ui.js";
 import { DiagramLightbox } from "./diagram.js";
+import { useBlockCopy } from "./block-copy.js";
 
 /**
  * Read + Edit renderers for a `mermaid` block — a Mermaid diagram definition
@@ -163,6 +164,7 @@ function MermaidDiagram({
   idSeed: string;
 }) {
   const isDark = useIsDark();
+  const copy = useBlockCopy();
   // Only render the diagram after mount: `mermaid` is client-only and SSR has no
   // DOM for it to measure against.
   const [mounted, setMounted] = useState(false);
@@ -225,7 +227,7 @@ function MermaidDiagram({
   if (!mounted) {
     return (
       <div className="mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted">
-        Loading diagram…
+        {copy.loadingDiagram}
       </div>
     );
   }
@@ -237,7 +239,7 @@ function MermaidDiagram({
           {source}
         </pre>
         <p className="text-sm text-plan-muted">
-          Could not render diagram: {state.error}
+          {copy.couldNotRenderDiagram}: {state.error}
         </p>
       </div>
     );
@@ -246,7 +248,7 @@ function MermaidDiagram({
   if (!state.svg) {
     return (
       <div className="mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted">
-        Add a diagram definition to render it.
+        {copy.addDiagramDefinition}
       </div>
     );
   }
@@ -263,8 +265,8 @@ function MermaidDiagram({
         type="button"
         data-plan-interactive
         onClick={() => setExpanded(true)}
-        aria-label="Expand diagram"
-        title="Expand diagram"
+        aria-label={copy.expandDiagram}
+        title={copy.expandDiagram}
         className="an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100"
       >
         <IconArrowsMaximize className="size-4" />