@payloadcms/figma 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/imageSizeOptions.d.ts

@@ -0,0 +1,23 @@
+import type { RequestInitCfPropertiesImage } from '@cloudflare/workers-types';
+type CloudflareWorkerImageOptions = RequestInitCfPropertiesImage;
+export declare const supportedCloudflareImageOptionKeys: readonly ["anim", "background", "blur", "border", "brightness", "compression", "contrast", "dpr", "fit", "flip", "format", "gamma", "gravity", "height", "metadata", "quality", "rotate", "saturation", "segment", "sharpen", "trim", "upscale", "width", "zoom"];
+type SupportedCloudflareImageOptionKey = (typeof supportedCloudflareImageOptionKeys)[number];
+type SupportedCloudflareImageOptions = Pick<CloudflareWorkerImageOptions, SupportedCloudflareImageOptionKey>;
+type CloudflareImageSizeFormat = Exclude<NonNullable<SupportedCloudflareImageOptions['format']>, 'json' | 'svg'>;
+type CloudflareImageSizeOptionsExceptFormat = Omit<SupportedCloudflareImageOptions, 'format'>;
+/**
+ * Options accepted for a reusable Payload image-size preset.
+ *
+ * Presets can control the generated image, but cannot use remote overlays or
+ * forward authentication to an image origin. Formats that do not produce a
+ * supported stored image are also excluded.
+ */
+export type CloudflareImageSizeOptions = {
+    format?: CloudflareImageSizeFormat;
+} & CloudflareImageSizeOptionsExceptFormat;
+declare module 'payload' {
+    interface RegisteredImageSizeOptions {
+        figma: CloudflareImageSizeOptions;
+    }
+}
+export {};

package/dist/imageSizeOptions.js

@@ -0,0 +1,26 @@
+export const supportedCloudflareImageOptionKeys = [
+    'anim',
+    'background',
+    'blur',
+    'border',
+    'brightness',
+    'compression',
+    'contrast',
+    'dpr',
+    'fit',
+    'flip',
+    'format',
+    'gamma',
+    'gravity',
+    'height',
+    'metadata',
+    'quality',
+    'rotate',
+    'saturation',
+    'segment',
+    'sharpen',
+    'trim',
+    'upscale',
+    'width',
+    'zoom'
+];

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { contentAPIAdapter } from './db-content-api/index.js';
+export type { CloudflareImageSizeOptions } from './imageSizeOptions.js';
 export { figmaContentSystem } from './plugin/adapter.js';
 export type { FigmaContentSystemOptions } from './plugin/adapter.js';
 export { buildFigmaConfig } from './plugin/build-config.js';

package/dist/lib/write-agent-config.d.ts

@@ -0,0 +1,12 @@
+export type WriteAgentConfigResult = {
+    agentsMd: 'appended' | 'created' | 'unchanged';
+    claudeMd: 'appended' | 'created' | 'unchanged';
+};
+/**
+ * Write the root AI-agent pointer files so assistants can find the Payload
+ * skill bundled in node_modules. Idempotent: creates when absent, appends the
+ * pointer when a file exists without it, and no-ops when already present.
+ */
+export declare function writeAgentConfigFiles(args: {
+    projectDir: string;
+}): Promise<WriteAgentConfigResult>;

package/dist/lib/write-agent-config.js

@@ -0,0 +1,52 @@
+import fs from 'fs/promises';
+import path from 'path';
+const SKILL_POINTER_PATH = 'node_modules/payload/skills/payload/SKILL.md';
+const AGENTS_BLOCK = `# AI Agent
+
+For any Payload-related work, reference the skill at
+\`${SKILL_POINTER_PATH}\`.
+`;
+const CLAUDE_IMPORT = '@AGENTS.md';
+/**
+ * Write the root AI-agent pointer files so assistants can find the Payload
+ * skill bundled in node_modules. Idempotent: creates when absent, appends the
+ * pointer when a file exists without it, and no-ops when already present.
+ */ export async function writeAgentConfigFiles(args) {
+    const agentsMd = await ensureFileContains({
+        content: AGENTS_BLOCK,
+        filePath: path.join(args.projectDir, 'AGENTS.md'),
+        marker: SKILL_POINTER_PATH
+    });
+    const claudeMd = await ensureFileContains({
+        content: `${CLAUDE_IMPORT}\n`,
+        filePath: path.join(args.projectDir, 'CLAUDE.md'),
+        marker: CLAUDE_IMPORT
+    });
+    return {
+        agentsMd,
+        claudeMd
+    };
+}
+async function ensureFileContains(args) {
+    const existing = await readFileOrNull(args.filePath);
+    if (existing === null) {
+        await fs.writeFile(args.filePath, args.content, 'utf8');
+        return 'created';
+    }
+    if (existing.includes(args.marker)) {
+        return 'unchanged';
+    }
+    const separator = existing.endsWith('\n') ? '\n' : '\n\n';
+    await fs.writeFile(args.filePath, `${existing}${separator}${args.content}`, 'utf8');
+    return 'appended';
+}
+async function readFileOrNull(filePath) {
+    try {
+        return await fs.readFile(filePath, 'utf8');
+    } catch (err) {
+        if (err instanceof Error && 'code' in err && err.code === 'ENOENT') {
+            return null;
+        }
+        throw err;
+    }
+}

package/dist/oauth/defaults.d.ts

@@ -1,6 +1,7 @@
 import type { CollectionConfig, EmailField, TextField } from 'payload';
 import type { VerifyFunction } from './types.js';
 export declare const DEFAULT_USER_INFO_COOKIE_NAME = "figma-user-info";
+export declare const FIGMA_OAUTH_CALLBACK_PATH = "/users/sso/login";
 export declare const defaultScope: string[];
 export declare const defaultUsernameField: TextField;
 export declare const defaultVerify: ({ collection, strategyName, userInfoCookieName, usernameField, }: {

package/dist/oauth/defaults.js

@@ -3,6 +3,7 @@ import { v4 as uuid } from 'uuid';
 import { hasUserTokenPropsChanged } from './utilities/hasUserTokenPropsChanged.js';
 import { isDuplicateKeyError } from './utilities/isDuplicateKeyError.js';
 export const DEFAULT_USER_INFO_COOKIE_NAME = 'figma-user-info';
+export const FIGMA_OAUTH_CALLBACK_PATH = '/users/sso/login';
 function getFigmaUserInfo(headers, cookieName) {
     try {
         const cookies = parseCookies(headers);

package/dist/oauth/endpoints/getLoginEndpoint.js

@@ -6,7 +6,8 @@ import { createDebugLogger } from '../utilities/createDebugLogger.js';
 import { establishSession } from '../utilities/establishSession.js';
 import { exchangeCodeForAccessToken } from '../utilities/exchangeCodeForAccessToken.js';
 import { extractOrigin } from '../utilities/extractOrigin.js';
-import { buildCsrfCookieClearHeader, OAUTH_STATE_CSRF_COOKIE_NAME } from '../utilities/getAuthorizeURL.js';
+import { getAdminCollectionSlug } from '../utilities/getAdminCollectionSlug.js';
+import { buildCsrfCookieClearHeader, getOAuthCallbackPath, OAUTH_STATE_CSRF_COOKIE_NAME } from '../utilities/getAuthorizeURL.js';
 import { isAbsoluteURL } from '../utilities/isAbsoluteURL.js';
 export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug, pluginOptions, strategy })=>({
         handler: async (req)=>{
@@ -151,7 +152,11 @@ export const getLoginEndpoint = ({ collection, collectionOptions, endpointSlug,
                 }
                 const redirectUri = formatAdminURL({
                     apiRoute: config.routes?.api || '/api',
-                    path: `/${collection.slug}/${endpointSlug}/login`,
+                    path: getOAuthCallbackPath({
+                        adminCollectionSlug: getAdminCollectionSlug(config),
+                        collection,
+                        endpointSlug
+                    }),
                     serverURL: redirectServerURL
                 });
                 debugLogger.info({

package/dist/oauth/index.js

@@ -1,5 +1,5 @@
 import { fieldAffectsData } from 'payload/shared';
-import { defaultVerify } from './defaults.js';
+import { defaultVerify, FIGMA_OAUTH_CALLBACK_PATH } from './defaults.js';
 import { getLoginEndpoint } from './endpoints/getLoginEndpoint.js';
 import { getLogoutEndpoint } from './endpoints/getLogoutEndpoint.js';
 import { getMetaEndpoint } from './endpoints/getMetaEndpoint.js';
@@ -50,6 +50,7 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                 path: '@payloadcms/figma/client#DefaultLoginButton'
             };
         }
+        let callbackEndpoint;
         return {
             ...config,
             admin: {
@@ -148,6 +149,20 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                         usernameField
                     })
                 });
+                const loginEndpoint = getLoginEndpoint({
+                    collection: existingCollection,
+                    collectionOptions,
+                    endpointSlug,
+                    pluginOptions,
+                    strategy
+                });
+                const collectionCallbackPath = `/${existingCollection.slug}/${endpointSlug}/login`;
+                if (existingCollection.slug === adminCollectionSlug && FIGMA_OAUTH_CALLBACK_PATH !== collectionCallbackPath) {
+                    callbackEndpoint = {
+                        ...loginEndpoint,
+                        path: FIGMA_OAUTH_CALLBACK_PATH
+                    };
+                }
                 const authStrategy = {
                     name: `${existingCollection.slug}-${strategyName}`,
                     // Bind 'this' to ensure the authenticate function has the correct context
@@ -180,13 +195,7 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                     },
                     endpoints: [
                         ...existingCollection.endpoints || [],
-                        getLoginEndpoint({
-                            collection: existingCollection,
-                            collectionOptions,
-                            endpointSlug,
-                            pluginOptions,
-                            strategy
-                        }),
+                        loginEndpoint,
                         getMetaEndpoint({
                             collection: existingCollection,
                             collectionOptions,
@@ -237,6 +246,12 @@ export const oAuth2Plugin = (pluginOptions)=>(config)=>{
                         ]
                     }
                 };
-            })
+            }),
+            endpoints: [
+                ...config.endpoints ?? [],
+                ...callbackEndpoint ? [
+                    callbackEndpoint
+                ] : []
+            ]
         };
     };

package/dist/oauth/utilities/getAdminCollectionSlug.d.ts

@@ -1,2 +1,2 @@
 import type { Config } from 'payload';
-export declare const getAdminCollectionSlug: (config: Config) => string;
+export declare const getAdminCollectionSlug: (config: Pick<Config, "admin" | "collections">) => string;

package/dist/oauth/utilities/getAuthorizeURL.d.ts

@@ -45,6 +45,9 @@ export interface AuthorizeURLResult {
     csrfNonce: string;
     params: AuthorizeURLParams;
 }
+export declare const getOAuthCallbackPath: ({ adminCollectionSlug, collection, endpointSlug, }: {
+    adminCollectionSlug: string;
+} & Pick<Args, "collection" | "endpointSlug">) => `/${string}`;
 export declare const getAuthorizeURL: ({ collection, collectionOptions, endpointSlug, existingCsrfNonce, failedRedirect, payload, pluginOptions, redirect, serverURLOverride, strategy, }: Args) => Promise<AuthorizeURLResult>;
 /**
  * Name of the HttpOnly cookie that carries the browser-bound CSRF nonce

package/dist/oauth/utilities/getAuthorizeURL.js

@@ -1,7 +1,9 @@
 import crypto from 'crypto';
 import * as QueryString from 'qs-esm';
 import { v4 as uuid } from 'uuid';
-import { defaultScope } from '../defaults.js';
+import { defaultScope, FIGMA_OAUTH_CALLBACK_PATH } from '../defaults.js';
+import { getAdminCollectionSlug } from './getAdminCollectionSlug.js';
+export const getOAuthCallbackPath = ({ adminCollectionSlug, collection, endpointSlug })=>collection.slug === adminCollectionSlug ? FIGMA_OAUTH_CALLBACK_PATH : `/${collection.slug}/${endpointSlug}/login`;
 export const getAuthorizeURL = async ({ collection, collectionOptions, endpointSlug, existingCsrfNonce, failedRedirect, payload, pluginOptions, redirect, serverURLOverride, strategy })=>{
     const { redirectServerURL } = pluginOptions;
     await strategy.ensureMeta();
@@ -30,7 +32,11 @@ export const getAuthorizeURL = async ({ collection, collectionOptions, endpointS
         state.failedRedirect = failedRedirect;
     }
     const baseRedirectURL = redirectServerURL || payload.config.serverURL || state.serverURL;
-    const loginRedirectURL = encodeURI(`${baseRedirectURL}${payload.config.routes?.api || '/api'}/${collection.slug}/${endpointSlug}/login`);
+    const loginRedirectURL = encodeURI(`${baseRedirectURL}${payload.config.routes?.api || '/api'}${getOAuthCallbackPath({
+        adminCollectionSlug: getAdminCollectionSlug(payload.config),
+        collection,
+        endpointSlug
+    })}`);
     const params = {
         client_id: collectionOptions.clientID,
         code_challenge,

package/dist/plugin/build-config.js

@@ -11,6 +11,7 @@ import { scheduleExtractPlugin } from '../deploy/schedule-extract-plugin.js';
 import { health } from '../endpoints/health.js';
 import { schema } from '../endpoints/schema.js';
 import { oAuth2Plugin } from '../oauth/index.js';
+import { getAdminCollectionSlug } from '../oauth/utilities/getAdminCollectionSlug.js';
 import { createStorageClient } from '../storage-content-api/client.js';
 import { contentApiStorageAdapter } from '../storage-content-api/index.js';
 import { translations as figmaTranslations } from '../translations/index.js';
@@ -19,6 +20,7 @@ import { getEnvVarSync } from '../utils/env-management.js';
 import * as log from '../utils/log.js';
 import { logMissingCliAuth } from './auth-preflight.js';
 import { logMissingContentSystemId } from './bootstrap-preflight.js';
+import { LIMIT_REACHED_VIEW_KEY, LIMIT_REACHED_VIEW_PATH } from './cloud-limits/routes.js';
 import { getDevCookieNames } from './dev-cookie-names.js';
 import { createSandboxUploadFetchPlugin } from './sandbox-upload-fetch.js';
 /**
@@ -30,7 +32,7 @@ import { createSandboxUploadFetchPlugin } from './sandbox-upload-fetch.js';
  * KEEP_IN_SYNC(cloudflare/wrangler/sites-worker/src/auth.ts): FIGMA_INTERNAL_FORWARDED_HAS_AUTH_BYPASS_HEADER
  */ export const FIGMA_INTERNAL_FORWARDED_HAS_AUTH_BYPASS_HEADER = 'figma-internal-forwarded-has-auth-bypass';
 /**
- * Fields added to users collection for Figma profile info
+ * Fields added to the configured Payload Admin collection for Figma profile info
  */ const figmaUserFields = [
     {
         name: 'figmaHandle',
@@ -280,7 +282,8 @@ export async function buildFigmaConfig(config) {
     }
     // Determine database adapter based on environment
     let db;
-    if (config.figma.useContentSystem === false) {
+    const usesContentSystem = config.figma.useContentSystem !== false;
+    if (!usesContentSystem) {
         db = config.db;
     } else if (process.env.FIGMA_CONTENT_API_ACCESS_KEY) {
         db = contentAPIAdapter({
@@ -316,6 +319,7 @@ export async function buildFigmaConfig(config) {
         });
     }
     const userJobsAccessRun = config.jobs?.access?.run;
+    const adminCollectionSlug = getAdminCollectionSlug(config);
     // Build complete config with Figma platform defaults
     const configWithFigmaDefaults = {
         ...config,
@@ -386,7 +390,7 @@ export async function buildFigmaConfig(config) {
             oAuth2Plugin({
                 collections: [
                     {
-                        slug: 'users',
+                        slug: adminCollectionSlug,
                         // Use adapter because Figma app doesn't support OIDC scopes
                         authorizationURLParams: {
                             response_mode: 'query',
@@ -414,9 +418,10 @@ export async function buildFigmaConfig(config) {
             })
         ]
     };
-    // Inject figma fields into users collection
+    // Inject Figma-managed identity fields only into the Payload Admin collection.
     const collections = configWithFigmaDefaults.collections?.map((col)=>{
-        const withSlugTracker = {
+        const views = col.admin?.components?.views;
+        const withLimitView = usesContentSystem ? {
             ...col,
             admin: {
                 ...col.admin,
@@ -428,20 +433,28 @@ export async function buildFigmaConfig(config) {
                             '@payloadcms/figma/client#FigmaCloudLimitSlugTracker',
                             ...col.admin?.components?.edit?.beforeDocumentControls ?? []
                         ]
+                    },
+                    views: {
+                        ...views,
+                        [LIMIT_REACHED_VIEW_KEY]: {
+                            Component: '@payloadcms/figma/views#LimitReachedView',
+                            exact: true,
+                            path: LIMIT_REACHED_VIEW_PATH
+                        }
                     }
                 }
             }
-        };
-        if (col.slug === 'users') {
+        } : col;
+        if (col.slug === adminCollectionSlug) {
             return {
-                ...withSlugTracker,
+                ...withLimitView,
                 fields: [
                     ...col.fields || [],
                     ...figmaUserFields
                 ]
             };
         }
-        return withSlugTracker;
+        return withLimitView;
     });
     if (collections) {
         configWithFigmaDefaults.collections = collections;

package/dist/plugin/cloud-limits/CloudLimitModal/index.d.ts

@@ -1,9 +1,8 @@
 import './index.scss';
 type Props = {
-    adminRoute: string;
     collectionLabel?: string;
-    collectionSlug?: string;
+    collectionListURL?: string;
     onRetry: () => void;
 };
-export declare function FigmaCloudLimitDocumentCountModal({ adminRoute, collectionLabel, collectionSlug, onRetry, }: Props): import("react").JSX.Element;
+export declare function FigmaCloudLimitDocumentCountModal({ collectionLabel, collectionListURL, onRetry, }: Props): import("react").JSX.Element;
 export {};

package/dist/plugin/cloud-limits/CloudLimitModal/index.js

@@ -1,25 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, DialogBody, DialogCancel, DialogFooter, DialogHeader, DialogModal, useModal, useTranslation } from '@payloadcms/ui';
-import { useRouter } from 'next/navigation.js';
-import { useCallback } from 'react';
 import { ExternalLinkIcon } from '../icons/ExternalLinkIcon.js';
 import { cloudLimitDocumentCountModalSlug } from '../shared.js';
 import './index.scss';
 const baseClass = 'figma-cloud-limit-modal';
-export function FigmaCloudLimitDocumentCountModal({ adminRoute, collectionLabel, collectionSlug, onRetry }) {
+export function FigmaCloudLimitDocumentCountModal({ collectionLabel, collectionListURL, onRetry }) {
     const { t } = useTranslation();
     const { closeModal } = useModal();
-    const router = useRouter();
-    const handleReviewClick = useCallback(()=>{
-        closeModal(cloudLimitDocumentCountModalSlug);
-        router.push(`${adminRoute}/collections/${collectionSlug}`);
-    }, [
-        adminRoute,
-        closeModal,
-        collectionSlug,
-        router
-    ]);
     return /*#__PURE__*/ _jsxs(DialogModal, {
         size: "small",
         slug: cloudLimitDocumentCountModalSlug,
@@ -38,10 +26,10 @@ export function FigmaCloudLimitDocumentCountModal({ adminRoute, collectionLabel,
                 children: /*#__PURE__*/ _jsxs("div", {
                     className: `${baseClass}__footer`,
                     children: [
-                        collectionLabel && collectionSlug ? /*#__PURE__*/ _jsxs("button", {
+                        collectionLabel && collectionListURL ? /*#__PURE__*/ _jsxs("a", {
                             className: `${baseClass}__review-btn`,
-                            onClick: handleReviewClick,
-                            type: "button",
+                            href: collectionListURL,
+                            onClick: ()=>closeModal(cloudLimitDocumentCountModalSlug),
                             children: [
                                 /*#__PURE__*/ _jsx("span", {
                                     className: `${baseClass}__review-btn-label`,

package/dist/plugin/cloud-limits/CloudLimitModal/index.scss

@@ -23,6 +23,11 @@
     min-width: 0;
     padding: 0;
 
+    .btn__content,
+    .btn__label {
+      min-width: 0;
+    }
+
     &:hover {
       color: var(--ramp-blue-700);
     }

package/dist/plugin/cloud-limits/CloudLimitProvider/index.d.ts

@@ -1,7 +1,4 @@
 import type { ReactNode } from 'react';
-/**
- * Surfaces Content API cloud-limit errors in the admin UI.
- */
 export declare function FigmaCloudLimitProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;