@agent-native/core 0.88.0 → 0.90.1

package/corpus/templates/calendar/app/components/layout/Sidebar.tsx

@@ -6,22 +6,6 @@ import {
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@agent-native/toolkit/ui/collapsible";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconCalendar,
   IconSettings,
@@ -63,6 +47,22 @@ import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { ThemeToggle } from "@/components/ThemeToggle";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   useExternalCalendars,
   useRemoveExternalCalendar,
@@ -82,6 +82,7 @@ import {
 import { useViewPreferences } from "@/hooks/use-view-preferences";
 import {
   CALENDAR_COLORS,
+  defaultColorForAccount,
   type CalendarColorMode,
 } from "@/lib/calendar-view-preferences";
 import { EVENT_CATEGORY_COLORS } from "@/lib/event-colors";
@@ -434,9 +435,14 @@ function GoogleAccountsSection({
   const t = useT();
   const { toggleHiddenCalendar, isHiddenCalendar } = useCalendarContext();
   const {
-    prefs: { colorMode, singleColor },
-    update: updateViewPreferences,
+    prefs: { colorMode, singleColor, accountColorModes, accountColors },
+    updateAccountColor,
+    updateAccountColorMode,
   } = useViewPreferences();
+  const accountEmails = useMemo(
+    () => accounts.map((account) => account.email),
+    [accounts],
+  );
   const [wantAddAccount, setWantAddAccount] = useState(false);
   const addAccountUrl = useGoogleAddAccountUrl(wantAddAccount);
   const {
@@ -472,12 +478,24 @@ function GoogleAccountsSection({
     setWantAddAccount(true);
   }
 
-  function handlePickColor(color: string) {
-    updateViewPreferences({ colorMode: "single", singleColor: color });
+  function accountColorMode(email: string): CalendarColorMode {
+    return accountColorModes[email] ?? colorMode;
+  }
+
+  function accountColor(email: string): string {
+    return (
+      accountColors[email] ??
+      singleColor ??
+      defaultColorForAccount(email, accountEmails)
+    );
+  }
+
+  function handlePickColor(email: string, color: string) {
+    updateAccountColor(email, color);
   }
 
-  function handleSetColorMode(mode: CalendarColorMode) {
-    updateViewPreferences({ colorMode: mode });
+  function handleSetColorMode(email: string, mode: CalendarColorMode) {
+    updateAccountColorMode(email, mode);
   }
 
   return (
@@ -523,97 +541,106 @@ function GoogleAccountsSection({
         </div>
       </div>
 
-      {accounts.map((account) => (
-        <div
-          key={account.email}
-          className="group flex min-h-7 items-center gap-2 px-3"
-        >
-          <Popover>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                className="shrink-0 cursor-pointer rounded-full p-0.5 hover:ring-2 hover:ring-border"
-              >
-                {colorMode === "multi" ? (
-                  <MultiColorDot
-                    className={cn(
-                      "h-2.5 w-2.5",
-                      isHiddenCalendar("accounts", account.email) &&
-                        "opacity-40",
-                    )}
-                  />
-                ) : (
-                  <span
-                    className={cn(
-                      "block h-2.5 w-2.5 rounded-full",
-                      isHiddenCalendar("accounts", account.email) &&
-                        "opacity-40",
-                    )}
-                    style={{ backgroundColor: singleColor }}
-                  />
-                )}
-              </button>
-            </PopoverTrigger>
-            <PopoverContent side="right" align="start" className="w-auto p-2">
-              <div className="flex flex-wrap gap-1.5" style={{ width: 132 }}>
-                {/* Multicolor "by type" option */}
-                <Tooltip delayDuration={700}>
-                  <TooltipTrigger asChild>
+      {accounts.map((account) => {
+        const mode = accountColorMode(account.email);
+        const color = accountColor(account.email);
+        return (
+          <div
+            key={account.email}
+            className="group flex min-h-7 items-center gap-2 px-3"
+          >
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className="shrink-0 cursor-pointer rounded-full p-0.5 hover:ring-2 hover:ring-border"
+                >
+                  {mode === "multi" ? (
+                    <MultiColorDot
+                      className={cn(
+                        "h-2.5 w-2.5",
+                        isHiddenCalendar("accounts", account.email) &&
+                          "opacity-40",
+                      )}
+                    />
+                  ) : (
+                    <span
+                      className={cn(
+                        "block h-2.5 w-2.5 rounded-full",
+                        isHiddenCalendar("accounts", account.email) &&
+                          "opacity-40",
+                      )}
+                      style={{ backgroundColor: color }}
+                    />
+                  )}
+                </button>
+              </PopoverTrigger>
+              <PopoverContent side="right" align="start" className="w-auto p-2">
+                <div className="flex flex-wrap gap-1.5" style={{ width: 132 }}>
+                  {/* Multicolor "by type" option */}
+                  <Tooltip delayDuration={700}>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          handleSetColorMode(account.email, "multi")
+                        }
+                        className="relative flex h-5 w-5 items-center justify-center rounded-full"
+                      >
+                        <MultiColorDot className="h-5 w-5" />
+                        {mode === "multi" && (
+                          <IconCheck className="absolute inset-0 m-auto h-3 w-3 text-white drop-shadow" />
+                        )}
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      side="top"
+                      className="max-w-[160px] text-xs"
+                    >
+                      {t("sidebar.colorByMeetingType")}
+                    </TooltipContent>
+                  </Tooltip>
+                  {/* Single color options */}
+                  {CALENDAR_COLORS.map((c) => (
                     <button
+                      key={c}
                       type="button"
-                      onClick={() => handleSetColorMode("multi")}
-                      className="relative flex h-5 w-5 items-center justify-center rounded-full"
+                      onClick={() => handlePickColor(account.email, c)}
+                      className="relative h-5 w-5 rounded-full"
+                      style={{ backgroundColor: c }}
                     >
-                      <MultiColorDot className="h-5 w-5" />
-                      {colorMode === "multi" && (
+                      {c === color && mode === "single" && (
                         <IconCheck className="absolute inset-0 m-auto h-3 w-3 text-white drop-shadow" />
                       )}
                     </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top" className="max-w-[160px] text-xs">
-                    {t("sidebar.colorByMeetingType")}
-                  </TooltipContent>
-                </Tooltip>
-                {/* Single color options */}
-                {CALENDAR_COLORS.map((c) => (
-                  <button
-                    key={c}
-                    type="button"
-                    onClick={() => handlePickColor(c)}
-                    className="relative h-5 w-5 rounded-full"
-                    style={{ backgroundColor: c }}
-                  >
-                    {c === singleColor && colorMode === "single" && (
-                      <IconCheck className="absolute inset-0 m-auto h-3 w-3 text-white drop-shadow" />
-                    )}
-                  </button>
-                ))}
-              </div>
-            </PopoverContent>
-          </Popover>
-          <p
-            className={cn(
-              "min-w-0 flex-1 truncate text-xs",
-              isHiddenCalendar("accounts", account.email)
-                ? "text-muted-foreground/40"
-                : "text-muted-foreground",
-            )}
-          >
-            {account.email}
-          </p>
-          <button
-            type="button"
-            onClick={() => toggleHiddenCalendar("accounts", account.email)}
-            className="flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100"
-          >
-            {isHiddenCalendar("accounts", account.email) ? (
-              <IconEyeOff className="h-3 w-3" />
-            ) : (
-              <IconEye className="h-3 w-3" />
-            )}
-          </button>
-        </div>
-      ))}
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p
+              className={cn(
+                "min-w-0 flex-1 truncate text-xs",
+                isHiddenCalendar("accounts", account.email)
+                  ? "text-muted-foreground/40"
+                  : "text-muted-foreground",
+              )}
+            >
+              {account.email}
+            </p>
+            <button
+              type="button"
+              onClick={() => toggleHiddenCalendar("accounts", account.email)}
+              className="flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100"
+            >
+              {isHiddenCalendar("accounts", account.email) ? (
+                <IconEyeOff className="h-3 w-3" />
+              ) : (
+                <IconEye className="h-3 w-3" />
+              )}
+            </button>
+          </div>
+        );
+      })}
     </div>
   );
 }
@@ -684,7 +711,7 @@ export function Sidebar({
         data-open={open ? "true" : "false"}
         data-collapsed={collapsed ? "true" : "false"}
         className={cn(
-          "agent-layout-left-drawer calendar-app-sidebar fixed start-0 top-0 z-50 flex h-full min-w-0 flex-col overflow-hidden border-e border-border bg-card transition-[width,translate] duration-200 ease-out lg:static",
+          "agent-layout-left-drawer calendar-app-sidebar fixed start-0 top-0 z-50 flex h-full min-w-0 flex-col overflow-hidden border-e border-border bg-sidebar transition-[width,translate] duration-200 ease-out lg:static",
           collapsed ? "w-12" : "w-56",
         )}
       >

package/corpus/templates/calendar/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/calendar/app/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/badge";

package/corpus/templates/calendar/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/calendar/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";

package/corpus/templates/calendar/app/components/ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/checkbox";

package/corpus/templates/calendar/app/components/ui/collapsible.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/collapsible";

package/corpus/templates/calendar/app/components/ui/command.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/command";

package/corpus/templates/calendar/app/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dialog";

package/corpus/templates/calendar/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/corpus/templates/calendar/app/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/input";

package/corpus/templates/calendar/app/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/label";

package/corpus/templates/calendar/app/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/templates/calendar/app/components/ui/radio-group.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/radio-group";

package/corpus/templates/calendar/app/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/select";

package/corpus/templates/calendar/app/components/ui/separator.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/separator";

package/corpus/templates/calendar/app/components/ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/skeleton";

package/corpus/templates/calendar/app/components/ui/spinner.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/spinner";

package/corpus/templates/calendar/app/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/switch";

package/corpus/templates/calendar/app/components/ui/table.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/table";

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

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tabs";

package/corpus/templates/calendar/app/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/textarea";

package/corpus/templates/calendar/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,12 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return <ToolkitProvider components={components}>{children}</ToolkitProvider>;
+}

package/corpus/templates/calendar/app/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tooltip";

package/corpus/templates/calendar/app/global.css

@@ -3,6 +3,7 @@
 
 @import "tailwindcss";
 @import "@agent-native/core/styles/agent-native.css";
+@import "@agent-native/toolkit/styles.css";
 
 @source "./**/*.{ts,tsx}";
 

package/corpus/templates/calendar/app/hooks/use-event-drag.ts

@@ -62,6 +62,9 @@ export function useEventDrag({
   const dragStateRef = useRef<DragState | null>(null);
   /** Tracks if a drag just ended - used to suppress popover click */
   const justDraggedRef = useRef(false);
+  /** Latest native pointermove event, flushed to state at most once per frame */
+  const pendingMoveEventRef = useRef<PointerEvent | null>(null);
+  const rafIdRef = useRef<number | null>(null);
 
   const getScrollTop = useCallback(() => {
     return scrollContainerRef.current?.scrollTop ?? 0;
@@ -172,11 +175,9 @@ export function useEventDrag({
     ],
   );
 
-  const onPointerMove = useCallback(
-    (e: PointerEvent) => {
-      const state = dragStateRef.current;
-      if (!state) return;
-
+  /** Pure computation from the latest pointer event + current drag state to the next drag state */
+  const computeNextDragState = useCallback(
+    (state: DragState, e: PointerEvent): DragState => {
       const gridTop = getGridTop();
       const scrollTop = getScrollTop();
       const pointerYInGrid = e.clientY - gridTop + scrollTop;
@@ -217,20 +218,57 @@ export function useEventDrag({
         newTop = originalBottom - newHeight;
       }
 
-      const updated: DragState = {
+      return {
         ...state,
         currentTop: newTop,
         currentHeight: newHeight,
         currentDayIndex: newDayIndex,
         hasMoved,
       };
-      dragStateRef.current = updated;
-      setDragState(updated);
     },
     [getGridTop, getScrollTop, pxToMinutes, hourHeight, days, getDayIndexFromX],
   );
 
+  /** Flush the latest pending pointer event into drag state — runs at most once per animation frame */
+  const flushPendingMove = useCallback(() => {
+    rafIdRef.current = null;
+    const pending = pendingMoveEventRef.current;
+    pendingMoveEventRef.current = null;
+    const state = dragStateRef.current;
+    if (!pending || !state) return;
+
+    const updated = computeNextDragState(state, pending);
+    dragStateRef.current = updated;
+    setDragState(updated);
+  }, [computeNextDragState]);
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (!dragStateRef.current) return;
+      pendingMoveEventRef.current = e;
+      if (rafIdRef.current === null) {
+        rafIdRef.current = requestAnimationFrame(flushPendingMove);
+      }
+    },
+    [flushPendingMove],
+  );
+
+  /** Cancel any scheduled rAF flush and apply the latest pending pointer position synchronously */
+  const flushAndCancelPendingMove = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    const pending = pendingMoveEventRef.current;
+    pendingMoveEventRef.current = null;
+    const state = dragStateRef.current;
+    if (pending && state) {
+      dragStateRef.current = computeNextDragState(state, pending);
+    }
+  }, [computeNextDragState]);
+
   const onPointerUp = useCallback(() => {
+    flushAndCancelPendingMove();
     const state = dragStateRef.current;
     if (!state) return;
 
@@ -270,9 +308,20 @@ export function useEventDrag({
 
     dragStateRef.current = null;
     setDragState(null);
-  }, [pxToMinutes, days, startHour, onEventTimeChange]);
+  }, [
+    flushAndCancelPendingMove,
+    pxToMinutes,
+    days,
+    startHour,
+    onEventTimeChange,
+  ]);
 
   const cancelDrag = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    pendingMoveEventRef.current = null;
     dragStateRef.current = null;
     setDragState(null);
   }, []);
@@ -293,6 +342,11 @@ export function useEventDrag({
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("keydown", onKeyDown);
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      pendingMoveEventRef.current = null;
     };
   }, [dragState, onPointerMove, onPointerUp, cancelDrag]);
 

package/corpus/templates/calendar/app/hooks/use-google-auth.ts

@@ -32,6 +32,11 @@ interface DesktopAuthOptions {
   timeoutMs?: number;
 }
 
+interface DesktopGlobals {
+  agentNativeDesktop?: unknown;
+  electronAPI?: unknown;
+}
+
 function bodyError(
   body: any,
   raw: string | undefined,
@@ -185,9 +190,15 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const [isPending, setIsPending] = useState(false);
   const isDesktopGoogleAuth = useMemo(() => {
-    if (typeof navigator === "undefined") return false;
+    if (typeof window === "undefined" || typeof navigator === "undefined") {
+      return false;
+    }
+    const desktopGlobals = window as Window & DesktopGlobals;
     return (
-      /AgentNativeDesktop/i.test(navigator.userAgent) && !isInBuilderFrame()
+      (/AgentNativeDesktop/i.test(navigator.userAgent) ||
+        !!desktopGlobals.agentNativeDesktop ||
+        !!desktopGlobals.electronAPI) &&
+      !isInBuilderFrame()
     );
   }, []);
 
@@ -215,7 +226,6 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
         desktop: "1",
         flow_id: flowId,
       });
-      let popup: Window | null = null;
       const reportError = (issue: DesktopAuthIssue) => {
         clearPoll();
         setIsPending(false);
@@ -249,12 +259,7 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
         };
       };
       const openAuthUrl = (url: string) => {
-        if (popup && !popup.closed) {
-          popup.location.href = url;
-          return true;
-        }
-        popup = window.open(url, "_blank");
-        return !!popup;
+        window.open(url, "_blank");
       };
 
       const startedAt = Date.now();
@@ -264,16 +269,6 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
         await onSuccess?.(result);
       };
 
-      popup = window.open("about:blank", "_blank");
-      if (!popup) {
-        reportError({
-          code: "popup_blocked",
-          message:
-            "Calendar could not open Google sign-in. Allow popups and try again.",
-        });
-        return true;
-      }
-
       void (async () => {
         try {
           const path = startOptions.addAccount
@@ -283,15 +278,8 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
             agentNativePath(`${path}?${params.toString()}`),
             { credentials: "include" },
           );
-          if (!openAuthUrl(url)) {
-            reportError({
-              code: "popup_blocked",
-              message:
-                "Calendar could not open Google sign-in. Allow popups and try again.",
-            });
-          }
+          openAuthUrl(url);
         } catch (err) {
-          popup?.close();
           reportError(authStartIssue(err));
         }
       })();