feat: sync files from Google Drive folders into asset library folders

Adds the second asset sync provider, validating the provider
abstraction from the Figma work:

- Google Drive provider (ui/utils/asset-sync/gdrive.ts): connect a
  folder to a Drive folder URL and import its files. Enumeration uses
  the Drive REST files.list API (paginated, shared-drive aware);
  downloads use alt=media. Drive reports md5Checksum up front, so
  unchanged files skip the download entirely. Subfolders and native
  Google editors files (Docs/Sheets/Slides) are skipped in v1.
- OAuth support on the provider interface (authType,
  interactiveLogin, loginLabel, createAuthContext): Drive auth uses
  the same GIS token flow and consent cache as useGapiClient with the
  drive.readonly scope added, so each user syncs with their own Google
  account and Drive's ACL decides access. The connect modal and the
  sync progress modal show a 'Sign in with Google' button instead of a
  token input for oauth providers; sign-in runs within the click
  gesture so the popup isn't blocked.
- Rate limits (429/403 rate-limit reasons) reuse the visible-countdown
  + typed SyncRateLimitError handling from the Figma provider.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Kv5GTb2ddUqL46zSitS6Lf

Author: claude

packages/root-cms/docs/asset-sync-design.md

@@ -362,20 +362,35 @@ download concurrency (default 4) and the provider batches `/v1/images`
 ids (Figma accepts large id lists per call); on 429, back off using the
 `Retry-After` header and resume.
 
-### 5.2 Google Drive provider (future, validates the abstraction)
-
-- `parseSourceUrl`: `https://drive.google.com/drive/folders/<folderId>`.
-- Auth: the existing `useGapiClient` OAuth flow with
-  `drive.readonly` — the `SyncAuthContext` wraps `gapiClient.login()`,
-  so per-user access enforcement works identically (Drive's ACL decides).
-- `listRemoteAssets`: `drive.files.list({q: '<folderId>' in parents})`;
-  Drive supplies `md5Checksum` + `modifiedTime`, so `contentHash` is
-  known **before** download and unchanged files skip download entirely
-  (an optimization Figma can't offer).
-- `download`: existing `downloadFromDrive()` nearly verbatim.
-
-Nothing in the engine, schema, or UI changes — which is the test the
-abstraction has to pass.
+### 5.2 Google Drive provider (`ui/utils/asset-sync/gdrive.ts`)
+
+- `parseSourceUrl`: `https://drive.google.com/drive/folders/<folderId>`
+  (plus `/drive/u/<n>/folders/…` and `open?id=…` forms).
+- Auth: `authType: 'oauth'` — the provider interface grew a small OAuth
+  extension (`interactiveLogin()`, `loginLabel`, `createAuthContext()`)
+  and the UI shows a "Sign in with Google" button instead of a token
+  input. Sign-in uses the same GIS token flow and consent cache as
+  `useGapiClient` (one consent covers both features), with the read-only
+  Drive scope added; the access token is held in memory only. Per-user
+  access enforcement works identically to Figma: Drive's ACL decides.
+  Requires `gapi: {apiKey, clientId}` in the cmsPlugin options.
+- `listRemoteAssets`: Drive REST `files.list` (`'<folderId>' in parents`,
+  paginated, shared-drive aware) via plain `fetch` + Bearer token. Drive
+  supplies `md5Checksum`, so `contentHash` is known **before** download
+  and unchanged files skip the download entirely (an optimization Figma
+  can't offer). There is no cheap folder-level version, so
+  `RemoteAssetList.version` is unset and the whole-sync fast path doesn't
+  apply — a no-change re-sync costs one listing call, zero downloads.
+  v1 scope: direct children only (no subfolder recursion); native Google
+  editors files (Docs/Sheets/Slides) are skipped — no binary content.
+- `download`: `files/<id>?alt=media` with the Bearer token.
+- Rate limits (429 / 403 rate-limit reasons) reuse the Figma provider's
+  pattern: visible countdown, `Retry-After` honored, typed
+  `SyncRateLimitError` on exhaustion.
+
+The engine, schema, and folder UI needed no changes beyond the optional
+OAuth fields on the provider interface — the test the abstraction had to
+pass.
 
 ## 6. Sync engine (`ui/utils/asset-sync/engine.ts`)
 

packages/root-cms/ui/components/AssetBrowser/AssetSyncModals.tsx

@@ -3,6 +3,7 @@ import {showNotification} from '@mantine/notifications';
 import {
   IconAlertTriangle,
   IconBrandFigma,
+  IconBrandGoogleDrive,
   IconCloudDownload,
 } from '@tabler/icons-preact';
 import {ChangeEvent} from 'preact/compat';
@@ -36,6 +37,9 @@ export function SyncProviderIcon(props: {provider?: string; size?: number}) {
   if (props.provider === 'figma') {
     return <IconBrandFigma size={size} />;
   }
+  if (props.provider === 'gdrive') {
+    return <IconBrandGoogleDrive size={size} />;
+  }
   return <IconCloudDownload size={size} />;
 }
 
@@ -66,8 +70,11 @@ export function ConnectSyncModal(props: {
 
   const parsed = useMemo(() => parseSyncSourceUrl(url), [url]);
   const provider: AssetSyncProvider | null = parsed?.provider || null;
-  const hasStoredToken = provider ? !!getProviderToken(provider.id) : false;
-  const showTokenSection = !!provider && (!hasStoredToken || showTokenInput);
+  const isOAuth = provider?.authType === 'oauth';
+  const hasStoredToken =
+    provider && !isOAuth ? !!getProviderToken(provider.id) : false;
+  const showTokenSection =
+    !!provider && !isOAuth && (!hasStoredToken || showTokenInput);
   const folderPath = joinFolderPath(folder.parent, folder.name);
 
   async function onSubmit() {
@@ -84,24 +91,32 @@ export function ConnectSyncModal(props: {
     }
     setSubmitting(true);
     try {
-      const token = tokenInput.trim();
-      if (token) {
-        if (provider.validateToken) {
-          const check = await provider.validateToken(token, parsed.source);
-          if (!check.valid) {
-            setError(
-              check.error ||
-                `The ${provider.label} token appears to be invalid. Check the token and try again.`
-            );
-            setSubmitting(false);
-            return;
+      if (isOAuth) {
+        // Interactive sign-in must happen within the submit click gesture
+        // so the popup isn't blocked. With prior consent this is silent.
+        if (provider.interactiveLogin) {
+          await provider.interactiveLogin();
+        }
+      } else {
+        const token = tokenInput.trim();
+        if (token) {
+          if (provider.validateToken) {
+            const check = await provider.validateToken(token, parsed.source);
+            if (!check.valid) {
+              setError(
+                check.error ||
+                  `The ${provider.label} token appears to be invalid. Check the token and try again.`
+              );
+              setSubmitting(false);
+              return;
+            }
           }
+          setProviderToken(provider.id, token);
+        } else if (!hasStoredToken) {
+          setError(`Enter your ${provider.label} access token.`);
+          setSubmitting(false);
+          return;
         }
-        setProviderToken(provider.id, token);
-      } else if (!hasStoredToken) {
-        setError(`Enter your ${provider.label} access token.`);
-        setSubmitting(false);
-        return;
       }
       const updated = await connectFolderSync(folder, parsed.source);
       showNotification({
@@ -149,24 +164,30 @@ export function ConnectSyncModal(props: {
         }}
       >
         <div className="AssetBrowser__syncModal__text">
-          Sync the exportable assets of a Figma file or node into this folder.
-          Assets marked for export in Figma are imported here and can be
-          re-synced when the designs change.
+          Sync assets from an external source into this folder — the exportable
+          assets of a Figma file or node, or the files of a Google Drive folder.
+          The connection is saved with this folder and can be re-synced when the
+          source changes.
         </div>
         <TextInput
           data-autofocus
           label="Source URL"
-          placeholder="https://www.figma.com/design/..."
+          placeholder="https://www.figma.com/design/… or https://drive.google.com/drive/folders/…"
           description={
             provider
               ? `Source: ${provider.label}`
-              : 'Link to a Figma file, or a specific node ("Copy link to selection" in Figma).'
+              : 'Link to a Figma file/node ("Copy link to selection" in Figma) or a Google Drive folder.'
           }
           value={url}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
             setUrl(e.currentTarget.value)
           }
         />
+        {isOAuth && provider?.tokenHelp && (
+          <div className="AssetBrowser__syncModal__tokenHelp">
+            {provider.tokenHelp.text}
+          </div>
+        )}
         {showTokenSection && provider && (
           <div className="AssetBrowser__syncModal__token">
             <TextInput
@@ -328,6 +349,23 @@ export function SyncProgressModal(props: {
     }
   }
 
+  /** OAuth providers: interactive sign-in (within the click gesture). */
+  async function signInAndRetry() {
+    if (!provider?.interactiveLogin) {
+      return;
+    }
+    setSavingToken(true);
+    setError('');
+    try {
+      await provider.interactiveLogin();
+      setSavingToken(false);
+      run();
+    } catch (err: any) {
+      setError(String(err?.message || err));
+      setSavingToken(false);
+    }
+  }
+
   const running = status === 'running';
 
   return (
@@ -370,7 +408,31 @@ export function SyncProgressModal(props: {
           </div>
         )}
 
-        {status === 'token' && provider && (
+        {status === 'token' && provider && provider.authType === 'oauth' && (
+          <div className="AssetBrowser__syncProgress__token">
+            <div className="AssetBrowser__syncModal__text">
+              {provider.tokenHelp?.text ||
+                `Sign in to ${provider.label} to sync. Only your account's access to the source is used.`}
+            </div>
+            {error && (
+              <div className="AssetBrowser__syncModal__error">{error}</div>
+            )}
+            <div className="AssetBrowser__syncModal__buttons">
+              <Button variant="default" onClick={props.onClose}>
+                Cancel
+              </Button>
+              <Button
+                color="dark"
+                loading={savingToken}
+                onClick={() => signInAndRetry()}
+              >
+                {provider.loginLabel || `Sign in to ${provider.label}`}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {status === 'token' && provider && provider.authType !== 'oauth' && (
           <div className="AssetBrowser__syncProgress__token">
             <div className="AssetBrowser__syncModal__text">
               A {provider.label} access token is needed to sync. Your token is

packages/root-cms/ui/hooks/useGapiClient.ts

@@ -161,7 +161,12 @@ async function loadGapiScript() {
 
 let loadGisScriptPromise: Promise<void> | null = null;
 
-async function loadGisScript() {
+/**
+ * Loads the Google Identity Services script (used for OAuth token flows).
+ * Exported for non-hook consumers (e.g. the Google Drive asset sync
+ * provider in `ui/utils/asset-sync/gdrive.ts`).
+ */
+export async function loadGisScript() {
   if (!loadGisScriptPromise) {
     loadGisScriptPromise = new Promise((resolve, reject) => {
       const script = document.createElement('script');

packages/root-cms/ui/utils/asset-sync/engine.ts

@@ -154,7 +154,10 @@ export async function syncFolder(
   if (!provider) {
     throw new Error(`Unknown sync provider: ${sync.provider}`);
   }
-  const auth = options.auth ?? createBrowserAuthContext(provider.id);
+  const auth =
+    options.auth ??
+    provider.createAuthContext?.() ??
+    createBrowserAuthContext(provider.id);
   const concurrency = options.concurrency || DEFAULT_CONCURRENCY;
 
   // Progress reporting. Providers report transient status (e.g. rate-limit