payload-mcp-toolkit 0.8.0 → 0.9.0

package/dist/components/OAuthView.js

@@ -0,0 +1,269 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Banner, Button, Gutter } from '@payloadcms/ui';
+import { agentInstructions } from './agentInstructions';
+import { ConsentPermissions } from './ConsentPermissions';
+import './oauth.css';
+function CopyButton({ text, label }) {
+    const [status, setStatus] = useState('');
+    async function copy() {
+        setStatus('');
+        try {
+            await navigator.clipboard.writeText(text);
+            setStatus('Copied.');
+        } catch  {
+            setStatus('Copy failed. Select the text and copy it.');
+        }
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "mcp-oauth__copy",
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                type: "button",
+                buttonStyle: "secondary",
+                size: "small",
+                margin: false,
+                onClick: copy,
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                role: "status",
+                children: status
+            })
+        ]
+    });
+}
+export function OAuthView({ mode }) {
+    const [data, setData] = useState(null);
+    const [error, setError] = useState('');
+    const [nothingPicked, setNothingPicked] = useState(false);
+    const endpoint = `/api/mcp/oauth/${mode}`;
+    useEffect(()=>{
+        const controller = new AbortController();
+        async function load() {
+            try {
+                const response = await fetch(`${endpoint}${window.location.search}`, {
+                    headers: {
+                        Accept: 'application/json'
+                    },
+                    credentials: 'same-origin',
+                    cache: 'no-store',
+                    signal: controller.signal
+                });
+                if (response.redirected) {
+                    const destination = new URL(response.url);
+                    if (destination.origin === window.location.origin) window.location.assign(destination.href);
+                    return;
+                }
+                if (!response.ok) {
+                    setError(response.status === 403 ? 'Your account cannot authorize this connection.' : 'This request could not be loaded. Start the connection again from your AI app.');
+                    return;
+                }
+                setData(await response.json());
+            } catch  {
+                if (!controller.signal.aborted) setError('The connection could not be loaded. Check your connection and reload this page.');
+            }
+        }
+        void load();
+        return ()=>controller.abort();
+    }, [
+        endpoint
+    ]);
+    const approval = data && 'account' in data ? data : null;
+    const connections = data && 'grants' in data ? data : null;
+    const instructions = connections ? agentInstructions(connections.resource, connections.access) : '';
+    return /*#__PURE__*/ _jsx(Gutter, {
+        children: /*#__PURE__*/ _jsxs("main", {
+            className: "mcp-oauth",
+            children: [
+                /*#__PURE__*/ _jsx("h1", {
+                    children: mode === 'authorize' ? 'Connect your account' : 'AI connections'
+                }),
+                error ? /*#__PURE__*/ _jsx(Banner, {
+                    type: "error",
+                    children: /*#__PURE__*/ _jsx("span", {
+                        role: "alert",
+                        children: error
+                    })
+                }) : !data ? /*#__PURE__*/ _jsx("p", {
+                    role: "status",
+                    children: "Loading connection…"
+                }) : null,
+                approval && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsxs("p", {
+                            children: [
+                                /*#__PURE__*/ _jsx("strong", {
+                                    children: approval.clientName
+                                }),
+                                " is requesting access to your website account."
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("dl", {
+                            className: "mcp-oauth__details",
+                            children: [
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Signed in as"
+                                }),
+                                /*#__PURE__*/ _jsx("dd", {
+                                    children: approval.account
+                                }),
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Permissions"
+                                }),
+                                /*#__PURE__*/ _jsx("dd", {
+                                    children: "What you choose below. Your website permissions still apply. Deleting content and changing global settings are not allowed."
+                                }),
+                                /*#__PURE__*/ _jsx("dt", {
+                                    children: "Duration"
+                                }),
+                                /*#__PURE__*/ _jsx("dd", {
+                                    children: "Up to 30 days. You can disconnect at any time."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("form", {
+                            action: endpoint,
+                            method: "post",
+                            onKeyDown: (e)=>{
+                                if (e.key === 'Enter' && e.target.matches('input[type=checkbox]')) e.preventDefault();
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("input", {
+                                    type: "hidden",
+                                    name: "consent",
+                                    value: approval.consent
+                                }),
+                                /*#__PURE__*/ _jsx(ConsentPermissions, {
+                                    catalog: approval.catalog,
+                                    max: approval.scope.split(' ').includes('mcp:write') ? 'editor' : 'read-only',
+                                    onEmptyChange: setNothingPicked
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "mcp-oauth__actions",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            type: "submit",
+                                            margin: false,
+                                            disabled: nothingPicked,
+                                            extraButtonProps: {
+                                                name: 'decision',
+                                                value: 'allow'
+                                            },
+                                            children: "Allow access"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            type: "submit",
+                                            buttonStyle: "secondary",
+                                            margin: false,
+                                            extraButtonProps: {
+                                                name: 'decision',
+                                                value: 'deny'
+                                            },
+                                            children: "Cancel"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                connections && /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        connections.eligible ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("p", {
+                                    children: "Add this URL as a custom connector in your AI app. Then sign in and approve access."
+                                }),
+                                /*#__PURE__*/ _jsxs("ul", {
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("li", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("strong", {
+                                                    children: "Claude:"
+                                                }),
+                                                " Settings → Connectors → Add custom connector."
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("li", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("strong", {
+                                                    children: "ChatGPT (web):"
+                                                }),
+                                                " turn on Developer mode in Settings, then create an app with this URL and OAuth sign-in."
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("code", {
+                                    className: "mcp-oauth__url",
+                                    children: connections.resource
+                                }),
+                                /*#__PURE__*/ _jsx(CopyButton, {
+                                    text: connections.resource,
+                                    label: "Copy URL"
+                                }),
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: "Agent instructions"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    children: "Paste these into your AI app, for example as project instructions. They tell the assistant how to connect and how to work with your content."
+                                }),
+                                /*#__PURE__*/ _jsx("pre", {
+                                    className: "mcp-oauth__instructions",
+                                    children: instructions
+                                }),
+                                /*#__PURE__*/ _jsx(CopyButton, {
+                                    text: instructions,
+                                    label: "Copy instructions"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx("p", {
+                            children: "Your account cannot connect AI apps. Ask a site administrator for access."
+                        }),
+                        /*#__PURE__*/ _jsx("h2", {
+                            children: "Connected apps"
+                        }),
+                        connections.grants.length ? connections.grants.map((grant)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "mcp-oauth__connection",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("strong", {
+                                                children: grant.clientName
+                                            }),
+                                            /*#__PURE__*/ _jsx("p", {
+                                                children: grant.summary
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("form", {
+                                        action: endpoint,
+                                        method: "post",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("input", {
+                                                type: "hidden",
+                                                name: "consent",
+                                                value: grant.consent
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                type: "submit",
+                                                buttonStyle: "secondary",
+                                                margin: false,
+                                                children: "Disconnect"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, grant.consent)) : /*#__PURE__*/ _jsx("p", {
+                            children: "No active connections."
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=OAuthView.js.map

package/dist/components/OAuthView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/OAuthView.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useState } from 'react'\nimport { Banner, Button, Gutter } from '@payloadcms/ui'\nimport type { Catalog } from '../oauth-permissions'\nimport { agentInstructions } from './agentInstructions'\nimport { ConsentPermissions } from './ConsentPermissions'\nimport './oauth.css'\n\ntype Consent = { consent: string; clientName: string; account: string; scope: string; catalog: Catalog }\ntype Grant = { consent: string; clientName: string; scope: string; summary: string }\ntype Connections = { resource: string; access: 'read-only' | 'editor'; eligible: boolean; grants: Grant[] }\n\nfunction CopyButton({ text, label }: { text: string; label: string }) {\n  const [status, setStatus] = useState('')\n  async function copy() {\n    setStatus('')\n    try {\n      await navigator.clipboard.writeText(text)\n      setStatus('Copied.')\n    } catch {\n      setStatus('Copy failed. Select the text and copy it.')\n    }\n  }\n  return (\n    <div className=\"mcp-oauth__copy\">\n      <Button type=\"button\" buttonStyle=\"secondary\" size=\"small\" margin={false} onClick={copy}>{label}</Button>\n      <span role=\"status\">{status}</span>\n    </div>\n  )\n}\n\nexport function OAuthView({ mode }: { mode: 'authorize' | 'connections' }) {\n  const [data, setData] = useState<Consent | Connections | null>(null)\n  const [error, setError] = useState('')\n  const [nothingPicked, setNothingPicked] = useState(false)\n  const endpoint = `/api/mcp/oauth/${mode}`\n\n  useEffect(() => {\n    const controller = new AbortController()\n    async function load() {\n      try {\n        const response = await fetch(`${endpoint}${window.location.search}`, {\n          headers: { Accept: 'application/json' }, credentials: 'same-origin', cache: 'no-store', signal: controller.signal,\n        })\n        if (response.redirected) {\n          const destination = new URL(response.url)\n          if (destination.origin === window.location.origin) window.location.assign(destination.href)\n          return\n        }\n        if (!response.ok) {\n          setError(response.status === 403 ? 'Your account cannot authorize this connection.' : 'This request could not be loaded. Start the connection again from your AI app.')\n          return\n        }\n        setData(await response.json())\n      } catch {\n        if (!controller.signal.aborted) setError('The connection could not be loaded. Check your connection and reload this page.')\n      }\n    }\n    void load()\n    return () => controller.abort()\n  }, [endpoint])\n\n  const approval = data && 'account' in data ? data : null\n  const connections = data && 'grants' in data ? data : null\n  const instructions = connections ? agentInstructions(connections.resource, connections.access) : ''\n\n  return (\n    <Gutter>\n      <main className=\"mcp-oauth\">\n        <h1>{mode === 'authorize' ? 'Connect your account' : 'AI connections'}</h1>\n        {error ? <Banner type=\"error\"><span role=\"alert\">{error}</span></Banner> : !data ? <p role=\"status\">Loading connection…</p> : null}\n        {approval && (\n          <>\n            <p><strong>{approval.clientName}</strong> is requesting access to your website account.</p>\n            <dl className=\"mcp-oauth__details\">\n              <dt>Signed in as</dt><dd>{approval.account}</dd>\n              <dt>Permissions</dt><dd>What you choose below. Your website permissions still apply. Deleting content and changing global settings are not allowed.</dd>\n              <dt>Duration</dt><dd>Up to 30 days. You can disconnect at any time.</dd>\n            </dl>\n            {/* Enter on a checkbox would submit the form through its first button, Allow access. */}\n            <form action={endpoint} method=\"post\" onKeyDown={e => {\n              if (e.key === 'Enter' && (e.target as HTMLElement).matches('input[type=checkbox]')) e.preventDefault()\n            }}>\n              <input type=\"hidden\" name=\"consent\" value={approval.consent} />\n              <ConsentPermissions\n                catalog={approval.catalog}\n                max={approval.scope.split(' ').includes('mcp:write') ? 'editor' : 'read-only'}\n                onEmptyChange={setNothingPicked}\n              />\n              <div className=\"mcp-oauth__actions\">\n                <Button type=\"submit\" margin={false} disabled={nothingPicked} extraButtonProps={{ name: 'decision', value: 'allow' }}>Allow access</Button>\n                <Button type=\"submit\" buttonStyle=\"secondary\" margin={false} extraButtonProps={{ name: 'decision', value: 'deny' }}>Cancel</Button>\n              </div>\n            </form>\n          </>\n        )}\n        {connections && (\n          <>\n            {connections.eligible ? (\n              <>\n                <p>Add this URL as a custom connector in your AI app. Then sign in and approve access.</p>\n                <ul>\n                  <li><strong>Claude:</strong> Settings → Connectors → Add custom connector.</li>\n                  <li><strong>ChatGPT (web):</strong> turn on Developer mode in Settings, then create an app with this URL and OAuth sign-in.</li>\n                </ul>\n                <code className=\"mcp-oauth__url\">{connections.resource}</code>\n                <CopyButton text={connections.resource} label=\"Copy URL\" />\n                <h2>Agent instructions</h2>\n                <p>Paste these into your AI app, for example as project instructions. They tell the assistant how to connect and how to work with your content.</p>\n                <pre className=\"mcp-oauth__instructions\">{instructions}</pre>\n                <CopyButton text={instructions} label=\"Copy instructions\" />\n              </>\n            ) : <p>Your account cannot connect AI apps. Ask a site administrator for access.</p>}\n            <h2>Connected apps</h2>\n            {connections.grants.length ? connections.grants.map(grant => (\n              <div className=\"mcp-oauth__connection\" key={grant.consent}>\n                <div><strong>{grant.clientName}</strong><p>{grant.summary}</p></div>\n                <form action={endpoint} method=\"post\">\n                  <input type=\"hidden\" name=\"consent\" value={grant.consent} />\n                  <Button type=\"submit\" buttonStyle=\"secondary\" margin={false}>Disconnect</Button>\n                </form>\n              </div>\n            )) : <p>No active connections.</p>}\n          </>\n        )}\n      </main>\n    </Gutter>\n  )\n}\n"],"names":["React","useEffect","useState","Banner","Button","Gutter","agentInstructions","ConsentPermissions","CopyButton","text","label","status","setStatus","copy","navigator","clipboard","writeText","div","className","type","buttonStyle","size","margin","onClick","span","role","OAuthView","mode","data","setData","error","setError","nothingPicked","setNothingPicked","endpoint","controller","AbortController","load","response","fetch","window","location","search","headers","Accept","credentials","cache","signal","redirected","destination","URL","url","origin","assign","href","ok","json","aborted","abort","approval","connections","instructions","resource","access","main","h1","p","strong","clientName","dl","dt","dd","account","form","action","method","onKeyDown","e","key","target","matches","preventDefault","input","name","value","consent","catalog","max","scope","split","includes","onEmptyChange","disabled","extraButtonProps","eligible","ul","li","code","h2","pre","grants","length","map","grant","summary"],"mappings":"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"}

package/dist/components/ScopesTable.d.ts

@@ -1,4 +1,29 @@
 import * as React from 'react';
+/**
+ * Reusable matrix renderer for "items × actions" scope tables.
+ *
+ * Used by both CollectionScopesMatrix (collections × 4 actions) and
+ * GlobalScopesMatrix (globals × 2 actions). The stored shape is
+ * `Array<{ slug: string; actions: string[] }>` — the parent field name
+ * (`collectionScopes` vs `globalScopes`) already encodes which axis the
+ * slugs belong to, so the row payload no longer mirrors that distinction.
+ */
+interface RowValue {
+    slug?: unknown;
+    actions?: unknown;
+}
+type MatrixValue = RowValue[];
+export interface ScopesMatrixProps {
+    /** Rows in the stored `{ slug, actions }[]` shape. */
+    value: MatrixValue | null | undefined;
+    onChange: (rows: MatrixValue) => void;
+    /** Table id; unique on the page. */
+    id: string;
+    items: string[];
+    actions: string[];
+    actionLabels: Record<string, string>;
+    itemHeader: string;
+}
 export interface ScopesTableProps {
     path: string;
     /** Slugs to render as rows. */
@@ -16,4 +41,7 @@ export interface ScopesTableProps {
     /** Copy shown when `items` is empty. */
     emptyMessage: string;
 }
+/** The items × actions checkbox table without form binding. The OAuth consent screen uses it too. */
+export declare function ScopesMatrix(props: ScopesMatrixProps): React.ReactElement;
 export declare function ScopesTable(props: ScopesTableProps): React.ReactElement;
+export {};

package/dist/components/ScopesTable.js

@@ -43,16 +43,30 @@ const headerCellStyle = {
     borderBottom: '1px solid var(--theme-elevation-150)',
     fontWeight: 600
 };
+// The matrix shows row names and column headers visually; this gives each checkbox a spoken name too.
+const hiddenStyle = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+};
+const hiddenLabel = (htmlFor, text)=>/*#__PURE__*/ _jsx("label", {
+        htmlFor: htmlFor,
+        style: hiddenStyle,
+        children: text
+    });
 const labelCellStyle = {
     textAlign: 'left',
     padding: '0.5rem 0.75rem',
     verticalAlign: 'middle'
 };
-export function ScopesTable(props) {
-    const { value, setValue } = useField({
-        path: props.path,
-        hasRows: false
-    });
+/** The items × actions checkbox table without form binding. The OAuth consent screen uses it too. */ export function ScopesMatrix(props) {
+    const { value, onChange: setValue } = props;
     const allowedActionsSet = React.useMemo(()=>new Set(props.actions), [
         props.actions
     ]);
@@ -110,6 +124,145 @@ export function ScopesTable(props) {
     const toggleAll = (checked)=>update((m)=>{
             for (const slug of props.items)m.set(slug, checked ? new Set(props.actions) : new Set());
         });
+    return /*#__PURE__*/ _jsxs("table", {
+        id: props.id,
+        style: {
+            width: '100%',
+            borderCollapse: 'collapse',
+            fontSize: '0.9rem',
+            background: 'var(--theme-input-bg)',
+            border: '1px solid var(--theme-elevation-150)',
+            borderRadius: '4px',
+            overflow: 'hidden'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("thead", {
+                children: /*#__PURE__*/ _jsxs("tr", {
+                    children: [
+                        /*#__PURE__*/ _jsx("th", {
+                            style: {
+                                ...headerCellStyle,
+                                textAlign: 'left'
+                            },
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '0.35rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: props.itemHeader
+                                    }),
+                                    /*#__PURE__*/ _jsx(CheckboxInput, {
+                                        checked: isAllFull,
+                                        partialChecked: isAllPartial && !isAllFull,
+                                        onToggle: (e)=>toggleAll(e.currentTarget.checked),
+                                        label: "All"
+                                    })
+                                ]
+                            })
+                        }),
+                        props.actions.map((action)=>/*#__PURE__*/ _jsx("th", {
+                                style: headerCellStyle,
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                        gap: '0.35rem'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: props.actionLabels[action] ?? action
+                                        }),
+                                        /*#__PURE__*/ _jsx(CheckboxInput, {
+                                            checked: isColumnFull(action),
+                                            id: `${props.id}-col-${action}`,
+                                            Label: hiddenLabel(`${props.id}-col-${action}`, `${props.actionLabels[action] ?? action}: all`),
+                                            partialChecked: isColumnPartial(action) && !isColumnFull(action),
+                                            onToggle: (e)=>toggleColumn(action, e.currentTarget.checked)
+                                        })
+                                    ]
+                                })
+                            }, action))
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("tbody", {
+                children: props.items.map((slug, idx)=>{
+                    const niceName = toWords(slug);
+                    return /*#__PURE__*/ _jsxs("tr", {
+                        style: {
+                            background: idx % 2 === 0 ? 'var(--theme-input-bg)' : 'var(--theme-elevation-25)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("td", {
+                                style: {
+                                    ...labelCellStyle,
+                                    borderTop: idx === 0 ? 'none' : '1px solid var(--theme-elevation-100)'
+                                },
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.6rem'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CheckboxInput, {
+                                            checked: isRowFull(slug),
+                                            id: `${props.id}-row-${idx}`,
+                                            Label: hiddenLabel(`${props.id}-row-${idx}`, `${niceName}: all actions`),
+                                            partialChecked: isRowPartial(slug) && !isRowFull(slug),
+                                            onToggle: (e)=>toggleRow(slug, e.currentTarget.checked)
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            style: {
+                                                display: 'flex',
+                                                flexDirection: 'column'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: niceName
+                                                }),
+                                                /*#__PURE__*/ _jsx("code", {
+                                                    style: {
+                                                        fontSize: '0.75rem',
+                                                        color: 'var(--theme-elevation-500)',
+                                                        background: 'transparent',
+                                                        padding: 0
+                                                    },
+                                                    children: slug
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            }),
+                            props.actions.map((action)=>/*#__PURE__*/ _jsx("td", {
+                                    style: {
+                                        ...cellStyle,
+                                        borderTop: idx === 0 ? 'none' : '1px solid var(--theme-elevation-100)'
+                                    },
+                                    children: /*#__PURE__*/ _jsx(CheckboxInput, {
+                                        checked: isCellChecked(slug, action),
+                                        id: `${props.id}-row-${idx}-${action}`,
+                                        Label: hiddenLabel(`${props.id}-row-${idx}-${action}`, `${niceName}: ${props.actionLabels[action] ?? action}`),
+                                        onToggle: (e)=>toggleCell(slug, action, e.currentTarget.checked)
+                                    })
+                                }, action))
+                        ]
+                    }, slug);
+                })
+            })
+        ]
+    });
+}
+export function ScopesTable(props) {
+    const { value, setValue } = useField({
+        path: props.path,
+        hasRows: false
+    });
     if (props.items.length === 0) {
         return /*#__PURE__*/ _jsxs("div", {
             className: "field-type",
@@ -151,132 +304,14 @@ export function ScopesTable(props) {
                 },
                 children: props.description
             }),
-            /*#__PURE__*/ _jsxs("table", {
+            /*#__PURE__*/ _jsx(ScopesMatrix, {
                 id: `${props.path}-matrix`,
-                style: {
-                    width: '100%',
-                    borderCollapse: 'collapse',
-                    fontSize: '0.9rem',
-                    background: 'var(--theme-input-bg)',
-                    border: '1px solid var(--theme-elevation-150)',
-                    borderRadius: '4px',
-                    overflow: 'hidden'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx("thead", {
-                        children: /*#__PURE__*/ _jsxs("tr", {
-                            children: [
-                                /*#__PURE__*/ _jsx("th", {
-                                    style: {
-                                        ...headerCellStyle,
-                                        textAlign: 'left'
-                                    },
-                                    children: /*#__PURE__*/ _jsxs("div", {
-                                        style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            gap: '0.35rem'
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsx("span", {
-                                                children: props.itemHeader
-                                            }),
-                                            /*#__PURE__*/ _jsx(CheckboxInput, {
-                                                checked: isAllFull,
-                                                partialChecked: isAllPartial && !isAllFull,
-                                                onToggle: (e)=>toggleAll(e.currentTarget.checked),
-                                                label: "All"
-                                            })
-                                        ]
-                                    })
-                                }),
-                                props.actions.map((action)=>/*#__PURE__*/ _jsx("th", {
-                                        style: headerCellStyle,
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            style: {
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                alignItems: 'center',
-                                                gap: '0.35rem'
-                                            },
-                                            children: [
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    children: props.actionLabels[action] ?? action
-                                                }),
-                                                /*#__PURE__*/ _jsx(CheckboxInput, {
-                                                    checked: isColumnFull(action),
-                                                    partialChecked: isColumnPartial(action) && !isColumnFull(action),
-                                                    onToggle: (e)=>toggleColumn(action, e.currentTarget.checked)
-                                                })
-                                            ]
-                                        })
-                                    }, action))
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx("tbody", {
-                        children: props.items.map((slug, idx)=>{
-                            const niceName = toWords(slug);
-                            return /*#__PURE__*/ _jsxs("tr", {
-                                style: {
-                                    background: idx % 2 === 0 ? 'var(--theme-input-bg)' : 'var(--theme-elevation-25)'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx("td", {
-                                        style: {
-                                            ...labelCellStyle,
-                                            borderTop: idx === 0 ? 'none' : '1px solid var(--theme-elevation-100)'
-                                        },
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            style: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: '0.6rem'
-                                            },
-                                            children: [
-                                                /*#__PURE__*/ _jsx(CheckboxInput, {
-                                                    checked: isRowFull(slug),
-                                                    partialChecked: isRowPartial(slug) && !isRowFull(slug),
-                                                    onToggle: (e)=>toggleRow(slug, e.currentTarget.checked)
-                                                }),
-                                                /*#__PURE__*/ _jsxs("div", {
-                                                    style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column'
-                                                    },
-                                                    children: [
-                                                        /*#__PURE__*/ _jsx("span", {
-                                                            children: niceName
-                                                        }),
-                                                        /*#__PURE__*/ _jsx("code", {
-                                                            style: {
-                                                                fontSize: '0.75rem',
-                                                                color: 'var(--theme-elevation-500)',
-                                                                background: 'transparent',
-                                                                padding: 0
-                                                            },
-                                                            children: slug
-                                                        })
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    props.actions.map((action)=>/*#__PURE__*/ _jsx("td", {
-                                            style: {
-                                                ...cellStyle,
-                                                borderTop: idx === 0 ? 'none' : '1px solid var(--theme-elevation-100)'
-                                            },
-                                            children: /*#__PURE__*/ _jsx(CheckboxInput, {
-                                                checked: isCellChecked(slug, action),
-                                                onToggle: (e)=>toggleCell(slug, action, e.currentTarget.checked)
-                                            })
-                                        }, action))
-                                ]
-                            }, slug);
-                        })
-                    })
-                ]
+                value: value,
+                onChange: setValue,
+                items: props.items,
+                actions: props.actions,
+                actionLabels: props.actionLabels,
+                itemHeader: props.itemHeader
             })
         ]
     });