@agent-native/core 0.97.0 → 0.98.1

package/corpus/templates/macros/app/components/ui/progress.tsx

@@ -16,7 +16,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-foreground/80 transition-all duration-500 ease-out"
+      className="h-full w-full flex-1 bg-foreground/80 transition-transform duration-500 ease-out"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

package/corpus/templates/macros/app/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm hover:text-foreground",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-[color,background-color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm hover:text-foreground",
       className,
     )}
     {...props}

package/corpus/templates/macros/app/i18n/ar-SA.ts

@@ -58,6 +58,8 @@ const messages = {
     optional: "اختياري",
     saveChanges: "حفظ التغييرات",
     saving: "جار الحفظ...",
+    loadFailed: "تعذر تحميل هذه البيانات",
+    retry: "إعادة المحاولة",
   },
   seo: {
     homeTitle:

package/corpus/templates/macros/app/i18n/de-DE.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "Optional",
     saveChanges: "Anderungen speichern",
     saving: "Speichern...",
+    loadFailed: "Diese Daten konnten nicht geladen werden",
+    retry: "Erneut versuchen",
   },
   seo: {
     homeTitle:

package/corpus/templates/macros/app/i18n/en-US.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "Optional",
     saveChanges: "Save Changes",
     saving: "Saving...",
+    loadFailed: "Couldn't load this data",
+    retry: "Retry",
   },
   seo: {
     homeTitle: "Agent-Native Macros - Open Source AI calorie and macro tracker",

package/corpus/templates/macros/app/i18n/es-ES.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "Opcional",
     saveChanges: "Guardar cambios",
     saving: "Guardando...",
+    loadFailed: "No se pudieron cargar estos datos",
+    retry: "Reintentar",
   },
   seo: {
     homeTitle:

package/corpus/templates/macros/app/i18n/fr-FR.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "Facultatif",
     saveChanges: "Enregistrer les modifications",
     saving: "Enregistrement...",
+    loadFailed: "Impossible de charger ces données",
+    retry: "Réessayer",
   },
   seo: {
     homeTitle:

package/corpus/templates/macros/app/i18n/hi-IN.ts

@@ -58,6 +58,8 @@ const messages = {
     optional: "वैकल्पिक",
     saveChanges: "बदलाव सहेजें",
     saving: "सहेजा जा रहा है...",
+    loadFailed: "यह डेटा लोड नहीं हो सका",
+    retry: "फिर कोशिश करें",
   },
   seo: {
     homeTitle: "Agent-Native Macros - ओपन सोर्स AI कैलोरी और मैक्रो ट्रैकर",

package/corpus/templates/macros/app/i18n/ja-JP.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "任意",
     saveChanges: "変更を保存",
     saving: "保存中...",
+    loadFailed: "このデータを読み込めませんでした",
+    retry: "再試行",
   },
   seo: {
     homeTitle: "Agent-Native Macros - オープンソース AI カロリー・マクロ記録",

package/corpus/templates/macros/app/i18n/ko-KR.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "선택 사항",
     saveChanges: "변경 사항 저장",
     saving: "저장 중...",
+    loadFailed: "이 데이터를 불러올 수 없습니다",
+    retry: "다시 시도",
   },
   seo: {
     homeTitle: "Agent-Native Macros - 오픈 소스 AI 칼로리 및 매크로 추적기",

package/corpus/templates/macros/app/i18n/pt-BR.ts

@@ -59,6 +59,8 @@ const messages = {
     optional: "Opcional",
     saveChanges: "Salvar alterações",
     saving: "Salvando...",
+    loadFailed: "Não foi possível carregar estes dados",
+    retry: "Tentar novamente",
   },
   seo: {
     homeTitle:

package/corpus/templates/macros/app/i18n/zh-CN.ts

@@ -57,6 +57,8 @@ const messages = {
     optional: "可选",
     saveChanges: "保存更改",
     saving: "正在保存...",
+    loadFailed: "无法加载这些数据",
+    retry: "重试",
   },
   seo: {
     homeTitle: "Agent-Native Macros - 开源 AI 卡路里和宏量营养追踪器",

package/corpus/templates/macros/app/i18n/zh-TW.ts

@@ -57,6 +57,8 @@ const messages = {
     optional: "可選",
     saveChanges: "儲存更改",
     saving: "正在儲存...",
+    loadFailed: "無法載入這些資料",
+    retry: "重試",
   },
   seo: {
     homeTitle: "Agent-Native Macros - 開放原始碼 AI 卡路裡和宏量營養追蹤器",

package/corpus/templates/macros/app/root.tsx

@@ -169,9 +169,6 @@ export default function Root() {
     createAgentNativeQueryClient({
       defaultOptions: {
         queries: {
-          // Macros UI refetches on focus to pick up meals logged in other
-          // browser tabs or mobile, which don't always arrive via DB sync.
-          refetchOnWindowFocus: true,
           // Flat retry: macros data errors are usually transient network
           // issues, not auth failures, so a flat count is sufficient.
           retry: 1,

package/corpus/templates/macros/app/routes/_index.tsx

@@ -19,6 +19,7 @@ import { AddMealDialog } from "@/components/AddMealDialog";
 import { DailyProgress } from "@/components/DailyProgress";
 import { ExerciseCard } from "@/components/ExerciseCard";
 import { MealCard } from "@/components/MealCard";
+import { QueryErrorState } from "@/components/QueryErrorState";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { VoiceDictation } from "@/components/VoiceDictation";
@@ -68,18 +69,14 @@ export default function IndexPage() {
     }).catch(() => {});
   }, [dateStr]);
 
-  const { data: rawMeals, isLoading: mealsLoading } = useActionQuery(
-    "list-meals",
-    { date: dateStr },
-  );
+  const mealsQuery = useActionQuery("list-meals", { date: dateStr });
+  const { data: rawMeals, isLoading: mealsLoading } = mealsQuery;
   const serverMeals = Array.isArray(rawMeals) ? rawMeals : [];
   const { rows: meals, hasOptimisticRows: hasOptimisticMeals } =
     useOptimisticLogRows("meal", serverMeals, dateStr);
 
-  const { data: rawExercises, isLoading: exercisesLoading } = useActionQuery(
-    "list-exercises",
-    { date: dateStr },
-  );
+  const exercisesQuery = useActionQuery("list-exercises", { date: dateStr });
+  const { data: rawExercises, isLoading: exercisesLoading } = exercisesQuery;
   const serverExercises = Array.isArray(rawExercises) ? rawExercises : [];
   const { rows: exercises, hasOptimisticRows: hasOptimisticExercises } =
     useOptimisticLogRows("exercise", serverExercises, dateStr);
@@ -153,9 +150,16 @@ export default function IndexPage() {
         </div>
 
         {/* Daily Summary Hero */}
-        <section className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+        <section>
           {isLoading ? (
             <Skeleton className="h-[280px] w-full rounded-2xl" />
+          ) : mealsQuery.isError || exercisesQuery.isError ? (
+            <QueryErrorState
+              onRetry={() => {
+                void mealsQuery.refetch();
+                void exercisesQuery.refetch();
+              }}
+            />
           ) : (
             <DailyProgress
               totalCalories={mealTotals.calories}
@@ -171,7 +175,7 @@ export default function IndexPage() {
         {/* Triple Column Layout */}
         <div className="macros-entry-grid">
           {/* Meals */}
-          <section className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
+          <section className="space-y-4">
             <div className="flex items-center justify-between px-1">
               <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 {t("meals.title")}
@@ -196,6 +200,8 @@ export default function IndexPage() {
                   <Skeleton className="h-16 w-full rounded-xl" />
                   <Skeleton className="h-16 w-full rounded-xl" />
                 </>
+              ) : mealsQuery.isError ? (
+                <QueryErrorState onRetry={() => void mealsQuery.refetch()} />
               ) : meals.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-card border border-dashed border-border">
                   <div className="p-3 rounded-full bg-emerald-500/10 mb-3">
@@ -232,7 +238,7 @@ export default function IndexPage() {
           </section>
 
           {/* Exercises */}
-          <section className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
+          <section className="space-y-4">
             <div className="flex items-center justify-between px-1">
               <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                 {t("exercise.title")}
@@ -254,6 +260,10 @@ export default function IndexPage() {
             <div className="space-y-2">
               {exercisesLoading && !hasOptimisticExercises ? (
                 <Skeleton className="h-16 w-full rounded-xl" />
+              ) : exercisesQuery.isError ? (
+                <QueryErrorState
+                  onRetry={() => void exercisesQuery.refetch()}
+                />
               ) : exercises.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-card border border-dashed border-border">
                   <div className="p-3 rounded-full bg-orange-500/10 mb-3">
@@ -291,7 +301,7 @@ export default function IndexPage() {
           </section>
 
           {/* Weight */}
-          <section className="macros-weight-section animate-in fade-in slide-in-from-bottom-4 duration-500 delay-300">
+          <section className="macros-weight-section">
             <WeightTracker currentDate={date} />
           </section>
         </div>

package/corpus/templates/macros/app/routes/analytics.tsx

@@ -14,6 +14,7 @@ import {
   ReferenceLine,
 } from "recharts";
 
+import { QueryErrorState } from "@/components/QueryErrorState";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Select,
@@ -77,16 +78,19 @@ export default function AnalyticsPage() {
   const endDate = formatLocalDate(new Date());
   const startDate = getStartDate(timeRange);
 
-  const { data: rawHistory, isLoading } = useActionQuery("meals-history", {
+  const historyQuery = useActionQuery("meals-history", {
     startDate,
     endDate,
   });
+  const { data: rawHistory, isLoading } = historyQuery;
   const history = Array.isArray(rawHistory) ? rawHistory : [];
 
-  const { data: rawWeightHistory, isLoading: weightLoading } = useActionQuery(
-    "weights-history",
-    { startDate, endDate },
-  );
+  const weightHistoryQuery = useActionQuery("weights-history", {
+    startDate,
+    endDate,
+  });
+  const { data: rawWeightHistory, isLoading: weightLoading } =
+    weightHistoryQuery;
   const weightHistory = Array.isArray(rawWeightHistory) ? rawWeightHistory : [];
 
   const weightStats = {
@@ -207,6 +211,11 @@ export default function AnalyticsPage() {
                 <TabsContent key={tab} value={tab} className="mt-0">
                   {isLoading ? (
                     <Skeleton className="h-[250px] w-full rounded-xl" />
+                  ) : historyQuery.isError ? (
+                    <QueryErrorState
+                      compact
+                      onRetry={() => void historyQuery.refetch()}
+                    />
                   ) : history.length > 0 ? (
                     <ResponsiveContainer width="100%" height={250}>
                       <LineChart
@@ -307,11 +316,18 @@ export default function AnalyticsPage() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <WeeklyCaloriesChart
-              history={history}
-              isLoading={isLoading}
-              dailyGoal={GOAL_CALORIES}
-            />
+            {historyQuery.isError ? (
+              <QueryErrorState
+                compact
+                onRetry={() => void historyQuery.refetch()}
+              />
+            ) : (
+              <WeeklyCaloriesChart
+                history={history}
+                isLoading={isLoading}
+                dailyGoal={GOAL_CALORIES}
+              />
+            )}
           </CardContent>
         </Card>
 
@@ -379,6 +395,11 @@ export default function AnalyticsPage() {
                 <TabsContent key={tab} value={tab} className="mt-0">
                   {weightLoading ? (
                     <Skeleton className="h-[250px] w-full rounded-xl" />
+                  ) : weightHistoryQuery.isError ? (
+                    <QueryErrorState
+                      compact
+                      onRetry={() => void weightHistoryQuery.refetch()}
+                    />
                   ) : weightHistory.length > 0 ? (
                     <div className="space-y-2">
                       {tab === "trend" && (

package/corpus/templates/macros/changelog/2026-07-11-daily-tracking-now-loads-and-updates-more-quickly.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-11
+---
+
+Daily tracking now loads immediately and updates progress more smoothly.

package/corpus/templates/macros/changelog/2026-07-11-data-load-failures-now-show-a-clear-error-with-a-retry-actio.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-11
+---
+
+Data load failures now show a clear error with a retry action instead of empty nutrition logs or charts.

package/corpus/templates/mail/.agents/skills/frontend-design/SKILL.md

@@ -48,7 +48,7 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 
 - **Typography**: Use the product's existing type system first. For net-new public pages, choose characterful but readable type and keep sizing appropriate to the surface.
 - **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes and default purple/blue gradients unless the brand demands them.
-- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library.
+- **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library. Never `transition-all` — list the properties that actually change (e.g. `transition-[opacity,transform]`). Use the shared easing tokens defined in `packages/core/src/styles/agent-native.css` instead of hand-typing curves: `var(--ease-drawer)` (260ms, drawers/app chrome), `var(--ease-collapse)` (200ms, expand/collapse), `var(--ease-out-strong)` (snappy entrances) — in Tailwind, `ease-[var(--ease-collapse)]`. Enter/exit with ease-out, never `ease-in`. Overlays that zoom in must set the Radix origin var (e.g. `origin-[--radix-popover-content-transform-origin]`). Animate `transform`/`opacity`, not width/height/padding/box-shadow. Gate looping or large-movement animations with `motion-reduce:`. Command palettes and keyboard-triggered actions get no animation.
 - **Composition**: Match the workflow. Operational apps should be dense and scannable; marketing or portfolio pages can be more immersive.
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.

package/corpus/templates/mail/.agents/skills/real-time-sync/SKILL.md

@@ -30,7 +30,7 @@ The agent modifies data in SQL, but the UI runs in the browser. SSE bridges same
    useDbSync({ queryClient });
    ```
 
-   For each non-own event, `useDbSync` bumps a per-source counter (e.g. `dashboards`, `analyses`, `settings`, `action`) and invalidates a small fixed list of framework-internal prefixes (`["action"]`, `["app-state"]`, `["__set_url__"]`, etc.). It does **not** blanket-invalidate templates' own data queries for ordinary domain events — that caused a request storm in production. The exception is `source: "action"`: a successful mutating action is the framework-wide "agent changed app data" signal, so `useDbSync` also refreshes active React Query observers as a compatibility safety net for custom apps that have not yet moved every read to `useActionQuery` or source-versioned query keys.
+   For each non-own event, `useDbSync` bumps a per-source counter (e.g. `dashboards`, `analyses`, `settings`, `action`) and invalidates a small fixed list of framework-internal prefixes (`["action"]`, `["app-state"]`, `["__set_url__"]`, etc.). It does **not** blanket-invalidate templates' own data queries — that caused request storms in production. A successful mutating action refreshes active `useActionQuery` observers under the `["action"]` prefix. Browser actions carry a tab id so their originating tab ignores the sync echo while other tabs refresh. Legacy apps can opt into broader compatibility with `actionInvalidatePredicate`, but first-party apps should use action-backed or source-versioned query keys. Idle fallback polling runs once per minute; active agent work temporarily uses the faster cadence.
 
 3. **Templates fold per-source counters into their query keys.** This is the pattern that makes "agent writes show up without a manual refresh" reliable:
 
@@ -117,7 +117,7 @@ useQuery({
 | UI not updating after agent writes | Is `useDbSync` called with the correct `queryClient`? Does the affected query have an active observer?         |
 | Poll endpoint not responding       | Is `/_agent-native/poll` accessible? Is the server running?                                                    |
 | SSE not connecting                 | Is `/_agent-native/events` accessible and authenticated? Polling should still keep the UI fresh as fallback.   |
-| High CPU / event storms            | The agent is writing rapidly. Add `staleTime` to queries to debounce refetches.                                |
+| High CPU / event storms            | Use targeted source keys, settle bursty list counters, and avoid broad action invalidation.                   |
 
 ## Jitter Prevention
 

package/corpus/templates/mail/.env.example

@@ -2,6 +2,11 @@
 # GOOGLE_CLIENT_ID=
 # GOOGLE_CLIENT_SECRET=
 
+# Preferred low-scope Google credentials for "Continue with Google" app login.
+# Falls back to GOOGLE_CLIENT_ID/GOOGLE_CLIENT_SECRET above when unset.
+# GOOGLE_SIGN_IN_CLIENT_ID=
+# GOOGLE_SIGN_IN_CLIENT_SECRET=
+
 # OAuth state signing — REQUIRED in prod for Google OAuth flows
 # Falls back to BETTER_AUTH_SECRET if unset; setting it explicitly is recommended
 # Generate via: openssl rand -hex 32
@@ -17,14 +22,14 @@
 
 # Inbound email webhooks (Resend / SendGrid)
 # REQUIRED in prod when inbound email is enabled — webhooks fail-closed without it
-# EMAIL_INBOUND_WEBHOOK_SECRET=
-
-# Slack draft intake (optional)
-# SLACK_BOT_TOKEN=
-# SLACK_SIGNING_SECRET=
-# ANTHROPIC_API_KEY=
-# A2A_SECRET=
-
-# Background jobs — in production these run automatically.
-# Set to 1 to enable locally, 0 to disable in production.
-# RUN_BACKGROUND_JOBS=1
+# EMAIL_INBOUND_WEBHOOK_SECRET=
+
+# Slack draft intake (optional)
+# SLACK_BOT_TOKEN=
+# SLACK_SIGNING_SECRET=
+# ANTHROPIC_API_KEY=
+# A2A_SECRET=
+
+# Background jobs — in production these run automatically.
+# Set to 1 to enable locally, 0 to disable in production.
+# RUN_BACKGROUND_JOBS=1

package/corpus/templates/mail/actions/list-emails.ts

@@ -4,19 +4,16 @@ import { getUserSetting } from "@agent-native/core/settings";
 import { emailMessageMatchesSearch } from "@shared/search.js";
 import { z } from "zod";
 
-import {
-  buildGmailEmailSearchQuery,
-  filterInboxScopedThreadMessages,
-} from "../server/lib/gmail-query.js";
 import {
   getClients,
-  DEFAULT_THREAD_RECENT_MESSAGE_CANDIDATE_LIMIT,
-  listGmailMessages,
-  gmailToEmailMessage,
   fetchGmailLabelMap,
   isConnected,
 } from "../server/lib/google-auth.js";
-import { getSyntheticEmailsForView } from "../server/lib/jobs.js";
+import {
+  getSnoozedThreadIds,
+  getSyntheticEmailsForView,
+} from "../server/lib/jobs.js";
+import { listInboxEmails } from "../server/lib/list-inbox-emails.js";
 
 const cliBoolean = z
   .union([z.boolean(), z.enum(["true", "false"])])
@@ -188,34 +185,31 @@ export default defineAction({
         }),
       );
 
-      const gmailQuery = buildGmailEmailSearchQuery({ view, q: query });
-      const effectiveQuery =
-        view === "all" && !query ? "" : gmailQuery || "in:inbox -in:sent";
-      const { messages, errors, resultSizeEstimate } = await listGmailMessages(
-        effectiveQuery,
-        limit,
+      const listResult = await listInboxEmails({
         ownerEmail,
-        undefined,
-        {
-          mode: "threads",
-          threadCandidateLimit: query ? 500 : undefined,
-          threadRecentMessageCandidateLimit:
-            !query && (view === "inbox" || view === "unread")
-              ? DEFAULT_THREAD_RECENT_MESSAGE_CANDIDATE_LIMIT
-              : undefined,
-        },
-      );
+        view,
+        q: query,
+        limit,
+        threadFormat: "full",
+        threadCandidateLimit: query ? 500 : undefined,
+        accountTokens: clients,
+        labelMap,
+      });
 
-      if (errors.length > 0 && messages.length === 0) {
-        throw new Error(errors.map((e) => `${e.email}: ${e.error}`).join("; "));
+      if (!listResult.ok) {
+        return JSON.stringify(
+          {
+            error: listResult.message,
+            ...(listResult.isQuotaError && {
+              retryAfterSeconds: listResult.retryAfterSeconds,
+            }),
+          },
+          null,
+          2,
+        );
       }
 
-      let emails = messages
-        .map((m) => gmailToEmailMessage(m, m._accountEmail, labelMap))
-        .sort(
-          (a: any, b: any) =>
-            new Date(b.date).getTime() - new Date(a.date).getTime(),
-        );
+      let emails: any[] = listResult.emails;
 
       if (accountFilter) {
         emails = emails.filter(
@@ -223,7 +217,6 @@ export default defineAction({
         );
       }
 
-      emails = filterInboxScopedThreadMessages(emails, view);
       emails = latestPerThread(emails).slice(0, limit);
 
       const payload = compact ? toCompact(emails) : emails;
@@ -233,8 +226,8 @@ export default defineAction({
             emails: payload,
             threadCount: emails.length,
             unreadInPage: emails.filter((e: any) => e.hasUnread).length,
-            ...(resultSizeEstimate !== undefined && {
-              totalEstimate: resultSizeEstimate,
+            ...(listResult.resultSizeEstimate !== undefined && {
+              totalEstimate: listResult.resultSizeEstimate,
             }),
           },
           null,
@@ -284,6 +277,17 @@ export default defineAction({
       emails = emails.filter((e) => emailMessageMatchesSearch(e, query));
     }
 
+    // Filter out snoozed emails, matching the REST handler's demo-mode
+    // behavior. Skip when searching so snoozed hits surface too.
+    if (!query && (view === "inbox" || view === "unread")) {
+      const snoozedIds = await getSnoozedThreadIds(ownerEmail);
+      if (snoozedIds.size > 0) {
+        emails = emails.filter(
+          (e) => !snoozedIds.has(e.threadId) && !snoozedIds.has(e.id),
+        );
+      }
+    }
+
     emails = latestPerThread(emails).slice(0, limit);
     const payload = compact ? toCompact(emails) : emails;
     if (includeCounts) {

package/corpus/templates/mail/app/components/email/ComposeModal.tsx

@@ -19,7 +19,7 @@ import {
   IconTrash,
   IconPlus,
 } from "@tabler/icons-react";
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import type { CSSProperties } from "react";
 import { toast } from "sonner";
 
@@ -359,6 +359,54 @@ export function ComposeModal({
   };
 
   const composeRef = useRef<HTMLDivElement>(null);
+  const composeAnimationRef = useRef<Animation | null>(null);
+
+  const animateComposeLayout = useCallback((updateLayout: () => void) => {
+    const compose = composeRef.current;
+    const before = compose?.getBoundingClientRect();
+
+    updateLayout();
+
+    if (
+      !compose ||
+      !before ||
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      const after = compose.getBoundingClientRect();
+      if (after.width === 0 || after.height === 0) return;
+
+      const translateX = before.left - after.left;
+      const translateY = before.top - after.top;
+      const scaleX = before.width / after.width;
+      const scaleY = before.height / after.height;
+
+      composeAnimationRef.current?.cancel();
+      composeAnimationRef.current = compose.animate(
+        [
+          {
+            transform: `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`,
+            transformOrigin: "top left",
+          },
+          { transform: "none", transformOrigin: "top left" },
+        ],
+        {
+          duration: 200,
+          easing: "cubic-bezier(0.23, 1, 0.32, 1)",
+        },
+      );
+    });
+  }, []);
+
+  useEffect(
+    () => () => {
+      composeAnimationRef.current?.cancel();
+    },
+    [],
+  );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Only handle shortcuts for events originating within the compose window
@@ -518,7 +566,7 @@ export function ComposeModal({
     <div
       ref={composeRef}
       className={cn(
-        "compose-window fixed z-50 flex w-full flex-col bg-card transition-[width,height,top,bottom] duration-150 sm:rounded-t-xl",
+        "compose-window fixed z-50 flex w-full flex-col bg-card sm:rounded-t-xl",
         minimized
           ? "bottom-0 h-11 rounded-t-xl sm:w-[540px]"
           : isExpanded
@@ -610,8 +658,10 @@ export function ComposeModal({
                     : t("mail.compose.minimizeCompose")
                 }
                 onClick={() => {
-                  setIsExpanded(false);
-                  setMinimized(!minimized);
+                  animateComposeLayout(() => {
+                    setIsExpanded(false);
+                    setMinimized(!minimized);
+                  });
                 }}
               >
                 <IconMinus className="h-3.5 w-3.5" />
@@ -637,8 +687,10 @@ export function ComposeModal({
                   }
                   aria-pressed={isExpanded}
                   onClick={() => {
-                    setMinimized(false);
-                    setIsExpanded((value) => !value);
+                    animateComposeLayout(() => {
+                      setMinimized(false);
+                      setIsExpanded((value) => !value);
+                    });
                   }}
                 >
                   {isExpanded ? (