@payloadcms/figma 0.0.1-alpha.9 → 0.1.0-alpha.1

package/dist/endpoints/schema.js

@@ -0,0 +1,27 @@
+import crypto from 'crypto';
+import { configToJSONSchema } from 'payload';
+export const schema = {
+    handler: (req)=>{
+        if (!req.user) {
+            return Response.json({
+                error: 'Unauthorized'
+            }, {
+                status: 401
+            });
+        }
+        const format = req.query?.format;
+        const { jsonSchema } = configToJSONSchema(req.payload.config);
+        const hash = crypto.createHash('sha256').update(JSON.stringify(jsonSchema)).digest('hex');
+        if (format === 'hash') {
+            return Response.json({
+                hash
+            });
+        }
+        return Response.json({
+            hash,
+            schema: jsonSchema
+        });
+    },
+    method: 'get',
+    path: '/figma/schema'
+};

package/dist/exports/client.d.ts

@@ -1,3 +1,4 @@
+export { FigmaAvatar } from '../oauth/components/FigmaAvatar/index.js';
+export { FigmaAvatarCell } from '../oauth/components/FigmaAvatarCell/index.js';
 export { DefaultLoginButton } from '../oauth/components/LoginButton/index.js';
 export { LogoutButton } from '../oauth/components/LogoutButton/index.js';
-//# sourceMappingURL=client.d.ts.map

package/dist/exports/client.js

@@ -1,4 +1,4 @@
+export { FigmaAvatar } from '../oauth/components/FigmaAvatar/index.js';
+export { FigmaAvatarCell } from '../oauth/components/FigmaAvatarCell/index.js';
 export { DefaultLoginButton } from '../oauth/components/LoginButton/index.js';
 export { LogoutButton } from '../oauth/components/LogoutButton/index.js';
-
-//# sourceMappingURL=client.js.map

package/dist/index.d.ts

@@ -1,5 +1,5 @@
+export { contentAPIAdapter } from './db-content-api/index.js';
 export { figmaContentSystem } from './plugin/adapter.js';
 export type { FigmaContentSystemOptions } from './plugin/adapter.js';
-export { buildConfig } from './plugin/build-config.js';
+export { buildFigmaConfig } from './plugin/build-config.js';
 export type { FigmaConfig } from './plugin/build-config.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,6 +1,6 @@
+// Export contentAPIAdapter for testing use cases
+export { contentAPIAdapter } from './db-content-api/index.js';
 // Export database adapter for advanced use cases
 export { figmaContentSystem } from './plugin/adapter.js';
 // Export buildConfig wrapper and its config type
-export { buildConfig } from './plugin/build-config.js';
-
-//# sourceMappingURL=index.js.map
+export { buildFigmaConfig } from './plugin/build-config.js';

package/dist/lib/download-skill.d.ts

@@ -0,0 +1,12 @@
+export type DownloadSkillResult = {
+    detail?: string;
+    ok: false;
+    reason: 'already-installed' | 'empty-extract' | 'error' | 'fetch-failed';
+} | {
+    ok: true;
+};
+export declare function downloadSkill(args: {
+    branch?: string;
+    debug?: boolean;
+    projectDir: string;
+}): Promise<DownloadSkillResult>;

package/dist/lib/download-skill.js

@@ -0,0 +1,77 @@
+import fs from 'fs/promises';
+import { Readable } from 'node:stream';
+import { pipeline } from 'node:stream/promises';
+import path from 'path';
+import { x } from 'tar';
+export async function downloadSkill(args) {
+    const { branch = 'main', debug, projectDir } = args;
+    const destDir = path.join(projectDir, '.claude', 'skills', 'payload');
+    if (await pathExists(path.join(destDir, 'SKILL.md'))) {
+        return {
+            ok: false,
+            reason: 'already-installed'
+        };
+    }
+    const url = `https://codeload.github.com/payloadcms/payload/tar.gz/${branch}`;
+    const filter = `payload-${branch.replace(/^v/, '').replaceAll('/', '-')}/tools/claude-plugin/skills/payload/`;
+    if (debug) {
+        // eslint-disable-next-line no-console
+        console.log(`[download-skill] url=${url} dest=${destDir}`);
+    }
+    try {
+        const res = await fetch(url);
+        if (!res.ok) {
+            return {
+                detail: `${res.status} ${res.statusText}`,
+                ok: false,
+                reason: 'fetch-failed'
+            };
+        }
+        if (!res.body) {
+            return {
+                detail: 'empty response body',
+                ok: false,
+                reason: 'fetch-failed'
+            };
+        }
+        await fs.mkdir(destDir, {
+            recursive: true
+        });
+        await pipeline(Readable.from(res.body), x({
+            cwd: destDir,
+            filter: (p)=>p.includes(filter),
+            strip: filter.split('/').length - 1
+        }));
+        if (!await pathExists(path.join(destDir, 'SKILL.md'))) {
+            await fs.rm(destDir, {
+                force: true,
+                recursive: true
+            });
+            return {
+                ok: false,
+                reason: 'empty-extract'
+            };
+        }
+        return {
+            ok: true
+        };
+    } catch (err) {
+        await fs.rm(destDir, {
+            force: true,
+            recursive: true
+        }).catch(()=>{});
+        return {
+            detail: err instanceof Error ? err.message : String(err),
+            ok: false,
+            reason: 'error'
+        };
+    }
+}
+async function pathExists(p) {
+    try {
+        await fs.access(p);
+        return true;
+    } catch  {
+        return false;
+    }
+}

package/dist/oauth/components/FigmaAvatar/index.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+import './index.scss';
+export declare const FigmaAvatar: React.FC;

package/dist/oauth/components/FigmaAvatar/index.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAuth } from '@payloadcms/ui';
+import { useState } from 'react';
+import { FigmaAvatarPlaceholder, isValidImageUrl } from '../FigmaAvatarPlaceholder/index.js';
+import './index.scss';
+const baseClass = 'figma-avatar';
+export const FigmaAvatar = ()=>{
+    const { user } = useAuth();
+    const [hasError, setHasError] = useState(false);
+    const figmaImageUrl = user?.figmaImageUrl;
+    if (!figmaImageUrl || hasError || !isValidImageUrl(figmaImageUrl)) {
+        return /*#__PURE__*/ _jsx(FigmaAvatarPlaceholder, {
+            size: 25
+        });
+    }
+    return /*#__PURE__*/ _jsx("img", {
+        alt: "Profile",
+        className: `${baseClass}__image`,
+        height: 25,
+        onError: ()=>setHasError(true),
+        src: figmaImageUrl,
+        width: 25
+    });
+};

package/dist/oauth/components/FigmaAvatar/index.scss

@@ -0,0 +1,12 @@
+@layer payload-default {
+  .figma-avatar {
+    &__image {
+      border-radius: 50%;
+      border: 1px solid var(--theme-elevation-200);
+
+      &:hover {
+        border-color: var(--theme-elevation-600);
+      }
+    }
+  }
+}

package/dist/oauth/components/FigmaAvatarCell/index.d.ts

@@ -0,0 +1,4 @@
+import type { DefaultCellComponentProps } from 'payload';
+import type React from 'react';
+import './index.scss';
+export declare const FigmaAvatarCell: React.FC<DefaultCellComponentProps>;

package/dist/oauth/components/FigmaAvatarCell/index.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FigmaAvatarPlaceholder, isValidImageUrl } from '../FigmaAvatarPlaceholder/index.js';
+import './index.scss';
+const baseClass = 'figma-avatar-cell';
+export const FigmaAvatarCell = ({ cellData })=>{
+    const [hasError, setHasError] = useState(false);
+    const figmaImageUrl = cellData;
+    if (!figmaImageUrl || hasError || !isValidImageUrl(figmaImageUrl)) {
+        return /*#__PURE__*/ _jsx(FigmaAvatarPlaceholder, {
+            size: 20
+        });
+    }
+    return /*#__PURE__*/ _jsx("img", {
+        alt: "Avatar",
+        className: `${baseClass}__image`,
+        height: 20,
+        onError: ()=>setHasError(true),
+        src: figmaImageUrl,
+        width: 20
+    });
+};

package/dist/oauth/components/FigmaAvatarCell/index.scss

@@ -0,0 +1,5 @@
+.figma-avatar-cell {
+  &__image {
+    border-radius: 50%;
+  }
+}

package/dist/oauth/components/FigmaAvatarPlaceholder/index.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import './index.scss';
+type FigmaAvatarPlaceholderProps = {
+    size?: number;
+};
+export declare const FigmaAvatarPlaceholder: React.FC<FigmaAvatarPlaceholderProps>;
+export declare function isValidImageUrl(url: string): boolean;
+export {};

package/dist/oauth/components/FigmaAvatarPlaceholder/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+const baseClass = 'figma-avatar-placeholder';
+export const FigmaAvatarPlaceholder = ({ size = 25 })=>/*#__PURE__*/ _jsxs("svg", {
+        className: baseClass,
+        height: size,
+        viewBox: "0 0 25 25",
+        width: size,
+        children: [
+            /*#__PURE__*/ _jsx("circle", {
+                className: `${baseClass}__bg`,
+                cx: "12.5",
+                cy: "12.5",
+                r: "11.5"
+            }),
+            /*#__PURE__*/ _jsx("circle", {
+                className: `${baseClass}__head`,
+                cx: "12.5",
+                cy: "10",
+                r: "4"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: `${baseClass}__body`,
+                d: "M12.5 15c-4 0-7 2-7 4.5v1h14v-1c0-2.5-3-4.5-7-4.5z"
+            })
+        ]
+    });
+export function isValidImageUrl(url) {
+    try {
+        const parsed = new URL(url);
+        return parsed.protocol === 'https:' || parsed.protocol === 'http:';
+    } catch  {
+        return false;
+    }
+}

package/dist/oauth/components/FigmaAvatarPlaceholder/index.scss

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .figma-avatar-placeholder {
+    &__bg {
+      fill: var(--theme-elevation-50);
+      stroke: var(--theme-elevation-200);
+      stroke-width: 1px;
+    }
+
+    &__head,
+    &__body {
+      fill: var(--theme-elevation-200);
+    }
+
+    &:hover {
+      .figma-avatar-placeholder {
+        &__bg {
+          fill: var(--theme-elevation-200);
+          stroke: var(--theme-elevation-600);
+        }
+
+        &__head,
+        &__body {
+          fill: var(--theme-elevation-600);
+        }
+      }
+    }
+  }
+}

package/dist/oauth/components/LoginButton/iframeAutoLogin.d.ts

@@ -0,0 +1,81 @@
+export interface CmsOAuthCodeMessage {
+    code: string;
+    state: string;
+}
+/**
+ * Validate the shape of a message received from the parent window. Accepts
+ * `{ type: 'cms-oauth-code', code: string, state: string }`. Returns null
+ * for anything else. The handler additionally verifies `state` matches the
+ * value the iframe sent on its outbound `mint-cms-oauth-code` request.
+ */
+export declare const parseCmsOAuthCodeMessage: (data: unknown) => CmsOAuthCodeMessage | null;
+export interface ParentOriginSignals {
+    /**
+     * `ancestorOrigins[0]`: immediate embedder origin. `undefined` where the
+     * browser lacks `Location.ancestorOrigins`.
+     */
+    ancestorOrigin: null | string | undefined;
+    /** `window.location.origin` — this iframe's own origin. */
+    ownOrigin: null | string | undefined;
+    /** `document.referrer`. */
+    referrer: null | string | undefined;
+}
+/**
+ * Resolve the exact origin for `window.parent.postMessage`, or `null` if we
+ * can't establish a trusted embedder (caller must then NOT post). We never
+ * target `'*'`: the payload embeds PKCE material in `state`.
+ *
+ *  1. `ancestorOrigin` present (browser-set, unspoofable): trust iff Figma,
+ *     else `null` — no fall-through to weaker signals.
+ *  2. No `ancestorOrigins`: fall back to `referrer`, but only if
+ *     it's a Figma origin and not our own. (Payload's `/admin` -> `/admin/login`
+ *     307 leaves `referrer` as our own origin, never the embedder.)
+ *  3. Otherwise `null`.
+ */
+export declare const resolveParentTargetOrigin: ({ ancestorOrigin, ownOrigin, referrer, }: ParentOriginSignals) => null | string;
+export interface IframeAutoLoginDeps {
+    doFetch: typeof fetch;
+    /**
+     * URL of the plugin's `/meta` endpoint. The iframe fetches this on setup
+     * to get the OAuth params (`client_id`, `redirect_uri`, `scope`,
+     * `code_challenge`, `state`, etc.) it forwards to the parent so the
+     * parent can mint a code via Sinatra.
+     */
+    metaUrl: string;
+    navigate: (url: string) => void;
+    /**
+     * Called on known synchronous failure paths so the host UI can render a
+     * manual fallback (e.g. surface the regular login button) instead of
+     * leaving the user on a blank screen. Not called on cleanup-driven
+     * aborts. Silent failures (parent never responds) are not detected here;
+     * the host is expected to apply its own timeout.
+     */
+    onFailed?: () => void;
+    /**
+     * Exact origin for `postMessage`, from `resolveParentTargetOrigin`. `null`
+     * means no trusted embedder: don't post, trigger `onFailed`. Never `'*'`.
+     */
+    parentTargetOrigin: null | string;
+    postMessageToParent: (message: unknown, targetOrigin: string) => void;
+    win: Pick<Window, 'addEventListener' | 'removeEventListener'>;
+}
+/**
+ * Wire up the iframe auto-login flow:
+ * 1. Fetch the plugin's `/meta` endpoint to get the OAuth params for this
+ *    flow — same params the regular `/admin/login` button would have used.
+ * 2. postMessage to the parent window:
+ *      { type: 'mint-cms-oauth-code', client_id, redirect_uri, scope,
+ *        code_challenge, code_challenge_method, state }
+ *    The parent uses these to mint a code via Sinatra, then echoes `state`
+ *    back so we can correlate response to request.
+ * 3. Listen for the parent's response.
+ * 4. On a valid Figma-origin response whose `state` matches what we sent,
+ *    navigate to `${redirect_uri}?code=${code}&state=${state}` — the same
+ *    URL shape the IdP uses when it 302s back into the manual flow.
+ * 5. `/sso/login` GET handler validates state.sig + PKCE verifier, exchanges
+ *    the code, sets session cookies, and 302s to `/admin`.
+ *
+ * Returns a cleanup function that removes the listener and aborts the meta
+ * fetch — designed to be returned directly from a React useEffect.
+ */
+export declare const setupIframeAutoLogin: (deps: IframeAutoLoginDeps) => (() => void);

package/dist/oauth/components/LoginButton/iframeAutoLogin.js

@@ -0,0 +1,168 @@
+import { isFigmaOrigin } from '../../utilities/figmaHostnames.js';
+/**
+ * Validate the shape of a message received from the parent window. Accepts
+ * `{ type: 'cms-oauth-code', code: string, state: string }`. Returns null
+ * for anything else. The handler additionally verifies `state` matches the
+ * value the iframe sent on its outbound `mint-cms-oauth-code` request.
+ */ export const parseCmsOAuthCodeMessage = (data)=>{
+    if (!data || typeof data !== 'object') {
+        return null;
+    }
+    const obj = data;
+    if (obj.type !== 'cms-oauth-code') {
+        return null;
+    }
+    if (typeof obj.code !== 'string' || obj.code.length === 0) {
+        return null;
+    }
+    if (typeof obj.state !== 'string' || obj.state.length === 0) {
+        return null;
+    }
+    return {
+        code: obj.code,
+        state: obj.state
+    };
+};
+/**
+ * Resolve the exact origin for `window.parent.postMessage`, or `null` if we
+ * can't establish a trusted embedder (caller must then NOT post). We never
+ * target `'*'`: the payload embeds PKCE material in `state`.
+ *
+ *  1. `ancestorOrigin` present (browser-set, unspoofable): trust iff Figma,
+ *     else `null` — no fall-through to weaker signals.
+ *  2. No `ancestorOrigins`: fall back to `referrer`, but only if
+ *     it's a Figma origin and not our own. (Payload's `/admin` -> `/admin/login`
+ *     307 leaves `referrer` as our own origin, never the embedder.)
+ *  3. Otherwise `null`.
+ */ export const resolveParentTargetOrigin = ({ ancestorOrigin, ownOrigin, referrer })=>{
+    if (ancestorOrigin != null) {
+        return isFigmaOrigin(ancestorOrigin) ? ancestorOrigin : null;
+    }
+    if (referrer) {
+        try {
+            const candidate = new URL(referrer).origin;
+            if (candidate !== ownOrigin && isFigmaOrigin(candidate)) {
+                return candidate;
+            }
+        } catch  {
+        // unparseable referrer — fall through
+        }
+    }
+    return null;
+};
+/**
+ * Wire up the iframe auto-login flow:
+ * 1. Fetch the plugin's `/meta` endpoint to get the OAuth params for this
+ *    flow — same params the regular `/admin/login` button would have used.
+ * 2. postMessage to the parent window:
+ *      { type: 'mint-cms-oauth-code', client_id, redirect_uri, scope,
+ *        code_challenge, code_challenge_method, state }
+ *    The parent uses these to mint a code via Sinatra, then echoes `state`
+ *    back so we can correlate response to request.
+ * 3. Listen for the parent's response.
+ * 4. On a valid Figma-origin response whose `state` matches what we sent,
+ *    navigate to `${redirect_uri}?code=${code}&state=${state}` — the same
+ *    URL shape the IdP uses when it 302s back into the manual flow.
+ * 5. `/sso/login` GET handler validates state.sig + PKCE verifier, exchanges
+ *    the code, sets session cookies, and 302s to `/admin`.
+ *
+ * Returns a cleanup function that removes the listener and aborts the meta
+ * fetch — designed to be returned directly from a React useEffect.
+ */ export const setupIframeAutoLogin = (deps)=>{
+    const abortController = new AbortController();
+    // `flow` is captured atomically from the /meta response. Either both
+    // `redirectUri` and `state` are set (after the async fetch completes
+    // successfully), or it's null. Bundling them prevents handleMessage
+    // from using a half-populated state — e.g. an empty `redirectUri`
+    // producing a relative-URL navigation.
+    let flow = null;
+    const handleMessage = (event)=>{
+        // Parse first so we only log rejections for messages that were *intended*
+        // to be `cms-oauth-code`. Unrelated postMessages (browser extensions,
+        // devtools, etc.) return silently with no log noise.
+        const parsed = parseCmsOAuthCodeMessage(event.data);
+        if (!parsed) {
+            return;
+        }
+        if (!isFigmaOrigin(event.origin)) {
+            // eslint-disable-next-line no-console -- surface why auto-login didn't fire
+            console.error(`[payload iframe auto-login] rejected cms-oauth-code: origin "${event.origin}" is not in the Figma allowlist`);
+            return;
+        }
+        if (flow === null) {
+            // eslint-disable-next-line no-console -- surface why auto-login didn't fire
+            console.error('[payload iframe auto-login] rejected cms-oauth-code: message arrived before /meta resolved, so no expected state to compare against');
+            return;
+        }
+        if (parsed.state !== flow.state) {
+            // eslint-disable-next-line no-console -- surface why auto-login didn't fire
+            console.error('[payload iframe auto-login] rejected cms-oauth-code: state mismatch — the parent did not echo back the state the iframe sent');
+            return;
+        }
+        // /sso/login expects the same URL shape the IdP would have produced:
+        // ${redirect_uri}?code=…&state=…
+        deps.navigate(`${flow.redirectUri}?code=${encodeURIComponent(parsed.code)}&state=${encodeURIComponent(parsed.state)}`);
+    };
+    deps.win.addEventListener('message', handleMessage);
+    void (async ()=>{
+        try {
+            const metaRes = await deps.doFetch(deps.metaUrl, {
+                signal: abortController.signal
+            });
+            if (!metaRes.ok) {
+                // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+                console.warn(`[payload iframe auto-login] meta endpoint responded ${metaRes.status}`);
+                deps.onFailed?.();
+                return;
+            }
+            const meta = await metaRes.json();
+            const clientId = meta.params?.client_id;
+            const codeChallenge = meta.params?.code_challenge;
+            const codeChallengeMethod = meta.params?.code_challenge_method;
+            const redirect = meta.params?.redirect_uri;
+            const scope = meta.params?.scope;
+            const state = meta.params?.state;
+            if (typeof clientId !== 'string' || typeof codeChallenge !== 'string' || typeof codeChallengeMethod !== 'string' || typeof redirect !== 'string' || typeof scope !== 'string' || typeof state !== 'string') {
+                // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+                console.warn('[payload iframe auto-login] meta response missing required params');
+                deps.onFailed?.();
+                return;
+            }
+            if (abortController.signal.aborted) {
+                return;
+            }
+            // No trusted embedder origin: refuse to post (don't broadcast PKCE-bearing
+            // `state` to '*'). See `resolveParentTargetOrigin`.
+            if (deps.parentTargetOrigin === null) {
+                // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+                console.warn('[payload iframe auto-login] could not determine a trusted parent origin — falling back to manual login');
+                deps.onFailed?.();
+                return;
+            }
+            flow = {
+                redirectUri: redirect,
+                state
+            };
+            deps.postMessageToParent({
+                type: 'mint-cms-oauth-code',
+                client_id: clientId,
+                code_challenge: codeChallenge,
+                code_challenge_method: codeChallengeMethod,
+                redirect_uri: redirect,
+                scope,
+                state
+            }, deps.parentTargetOrigin);
+        } catch (err) {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            // eslint-disable-next-line no-console -- surface auto-login failures to dev tools
+            console.warn('[payload iframe auto-login] failed to fetch meta', err);
+            deps.onFailed?.();
+        }
+    })();
+    return ()=>{
+        deps.win.removeEventListener('message', handleMessage);
+        abortController.abort();
+    };
+};

package/dist/oauth/components/LoginButton/index.d.ts

@@ -6,4 +6,3 @@ type DefaultLoginButtonProps = {
 };
 export declare const DefaultLoginButton: React.FC<DefaultLoginButtonProps>;
 export {};
-//# sourceMappingURL=index.d.ts.map