@humaan/payload-plugin-ai-assistant 0.0.0-stage → 0.1.1

package/dist/admin/PageContextBridge.js

@@ -0,0 +1,72 @@
+'use client';
+import { useConfig, useDocumentInfo, useForm, useFormModified } from '@payloadcms/ui';
+import { useEffect, useRef } from 'react';
+import { registerOpenDocument } from './openDocument.js';
+/**
+ * Rendered before the document controls on every collection and global the assistant can read.
+ * It renders nothing. It tells the assistant drawer which document is open and how to read its form.
+ */ export function PageContextBridge() {
+    const { collectionSlug, globalSlug, id, title, setData } = useDocumentInfo();
+    const { getData, reset } = useForm();
+    const modified = useFormModified();
+    const { config } = useConfig();
+    const apiRoute = config.routes?.api ?? '/api';
+    const slug = globalSlug ?? collectionSlug;
+    const documentId = id === undefined || id === null ? undefined : String(id);
+    // Read when the assistant asks, so the registration stays put while the editor types.
+    const latest = useRef({
+        getData,
+        modified,
+        reset,
+        setData
+    });
+    useEffect(()=>{
+        latest.current = {
+            getData,
+            modified,
+            reset,
+            setData
+        };
+    });
+    useEffect(()=>{
+        if (!slug) {
+            return;
+        }
+        return registerOpenDocument({
+            context: {
+                kind: globalSlug ? 'global' : 'collection',
+                slug,
+                ...documentId ? {
+                    id: documentId
+                } : {},
+                label: title || slug
+            },
+            getData: ()=>latest.current.getData(),
+            isModified: ()=>latest.current.modified,
+            // The same reload Payload uses to revert a document: fetch the saved draft, then rebuild the form from it.
+            reload: async ()=>{
+                const url = globalSlug ? `${apiRoute}/globals/${globalSlug}?depth=0&draft=true` : `${apiRoute}/${slug}/${documentId}?depth=0&draft=true`;
+                const response = await fetch(url, {
+                    credentials: 'include'
+                });
+                if (!response.ok) {
+                    throw new Error('The saved changes could not be loaded into the editor.');
+                }
+                const doc = await response.json();
+                await latest.current.reset(doc);
+                if (doc && typeof doc === 'object') {
+                    latest.current.setData(doc);
+                }
+            }
+        });
+    }, [
+        slug,
+        globalSlug,
+        documentId,
+        title,
+        apiRoute
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=PageContextBridge.js.map

package/dist/admin/PageContextBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/PageContextBridge.tsx"],"sourcesContent":["'use client'\n\nimport { useConfig, useDocumentInfo, useForm, useFormModified } from '@payloadcms/ui'\nimport { useEffect, useRef } from 'react'\n\nimport { registerOpenDocument } from './openDocument.js'\n\n/**\n * Rendered before the document controls on every collection and global the assistant can read.\n * It renders nothing. It tells the assistant drawer which document is open and how to read its form.\n */\nexport function PageContextBridge() {\n  const { collectionSlug, globalSlug, id, title, setData } = useDocumentInfo()\n  const { getData, reset } = useForm()\n  const modified = useFormModified()\n  const { config } = useConfig()\n  const apiRoute = config.routes?.api ?? '/api'\n  const slug = globalSlug ?? collectionSlug\n  const documentId = id === undefined || id === null ? undefined : String(id)\n\n  // Read when the assistant asks, so the registration stays put while the editor types.\n  const latest = useRef({ getData, modified, reset, setData })\n  useEffect(() => {\n    latest.current = { getData, modified, reset, setData }\n  })\n\n  useEffect(() => {\n    if (!slug) {\n      return\n    }\n    return registerOpenDocument({\n      context: {\n        kind: globalSlug ? 'global' : 'collection',\n        slug,\n        ...(documentId ? { id: documentId } : {}),\n        label: title || slug,\n      },\n      getData: () => latest.current.getData(),\n      isModified: () => latest.current.modified,\n      // The same reload Payload uses to revert a document: fetch the saved draft, then rebuild the form from it.\n      reload: async () => {\n        const url = globalSlug\n          ? `${apiRoute}/globals/${globalSlug}?depth=0&draft=true`\n          : `${apiRoute}/${slug}/${documentId}?depth=0&draft=true`\n        const response = await fetch(url, { credentials: 'include' })\n        if (!response.ok) {\n          throw new Error('The saved changes could not be loaded into the editor.')\n        }\n        const doc: unknown = await response.json()\n        await latest.current.reset(doc)\n        if (doc && typeof doc === 'object') {\n          latest.current.setData(doc as Record<string, unknown>)\n        }\n      },\n    })\n  }, [slug, globalSlug, documentId, title, apiRoute])\n\n  return null\n}\n"],"names":["useConfig","useDocumentInfo","useForm","useFormModified","useEffect","useRef","registerOpenDocument","PageContextBridge","collectionSlug","globalSlug","id","title","setData","getData","reset","modified","config","apiRoute","routes","api","slug","documentId","undefined","String","latest","current","context","kind","label","isModified","reload","url","response","fetch","credentials","ok","Error","doc","json"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,eAAe,EAAEC,OAAO,EAAEC,eAAe,QAAQ,iBAAgB;AACrF,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEzC,SAASC,oBAAoB,QAAQ,oBAAmB;AAExD;;;CAGC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAEC,UAAU,EAAEC,EAAE,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGX;IAC3D,MAAM,EAAEY,OAAO,EAAEC,KAAK,EAAE,GAAGZ;IAC3B,MAAMa,WAAWZ;IACjB,MAAM,EAAEa,MAAM,EAAE,GAAGhB;IACnB,MAAMiB,WAAWD,OAAOE,MAAM,EAAEC,OAAO;IACvC,MAAMC,OAAOX,cAAcD;IAC3B,MAAMa,aAAaX,OAAOY,aAAaZ,OAAO,OAAOY,YAAYC,OAAOb;IAExE,sFAAsF;IACtF,MAAMc,SAASnB,OAAO;QAAEQ;QAASE;QAAUD;QAAOF;IAAQ;IAC1DR,UAAU;QACRoB,OAAOC,OAAO,GAAG;YAAEZ;YAASE;YAAUD;YAAOF;QAAQ;IACvD;IAEAR,UAAU;QACR,IAAI,CAACgB,MAAM;YACT;QACF;QACA,OAAOd,qBAAqB;YAC1BoB,SAAS;gBACPC,MAAMlB,aAAa,WAAW;gBAC9BW;gBACA,GAAIC,aAAa;oBAAEX,IAAIW;gBAAW,IAAI,CAAC,CAAC;gBACxCO,OAAOjB,SAASS;YAClB;YACAP,SAAS,IAAMW,OAAOC,OAAO,CAACZ,OAAO;YACrCgB,YAAY,IAAML,OAAOC,OAAO,CAACV,QAAQ;YACzC,2GAA2G;YAC3Ge,QAAQ;gBACN,MAAMC,MAAMtB,aACR,GAAGQ,SAAS,SAAS,EAAER,WAAW,mBAAmB,CAAC,GACtD,GAAGQ,SAAS,CAAC,EAAEG,KAAK,CAAC,EAAEC,WAAW,mBAAmB,CAAC;gBAC1D,MAAMW,WAAW,MAAMC,MAAMF,KAAK;oBAAEG,aAAa;gBAAU;gBAC3D,IAAI,CAACF,SAASG,EAAE,EAAE;oBAChB,MAAM,IAAIC,MAAM;gBAClB;gBACA,MAAMC,MAAe,MAAML,SAASM,IAAI;gBACxC,MAAMd,OAAOC,OAAO,CAACX,KAAK,CAACuB;gBAC3B,IAAIA,OAAO,OAAOA,QAAQ,UAAU;oBAClCb,OAAOC,OAAO,CAACb,OAAO,CAACyB;gBACzB;YACF;QACF;IACF,GAAG;QAACjB;QAAMX;QAAYY;QAAYV;QAAOM;KAAS;IAElD,OAAO;AACT"}

package/dist/admin/Pill.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type PillTone = 'info' | 'neutral' | 'success' | 'warning';
+interface PillProps {
+    children: ReactNode;
+    /** A collection or global slug. Gives the pill a dot in that collection's colour. */
+    entity?: string;
+    tone?: PillTone;
+}
+/** A short label. The text carries the meaning; tone and the collection dot only help scanning. */
+export declare function Pill({ tone, entity, children }: PillProps): import("react").JSX.Element;
+export {};

package/dist/admin/Pill.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './AiAssistantPanel.module.scss';
+/** A short label. The text carries the meaning; tone and the collection dot only help scanning. */ export function Pill({ tone = 'neutral', entity, children }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        className: styles.assistant__pill,
+        "data-tone": tone,
+        style: entity ? {
+            '--pill-hue': hueOf(entity)
+        } : undefined,
+        children: [
+            entity ? /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": "true",
+                className: styles['assistant__pill-dot']
+            }) : null,
+            children
+        ]
+    });
+}
+/** The same collection always gets the same colour. */ function hueOf(slug) {
+    let hash = 0;
+    for (const character of slug){
+        hash = (hash * 31 + character.charCodeAt(0)) % 360;
+    }
+    return hash;
+}
+
+//# sourceMappingURL=Pill.js.map

package/dist/admin/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/Pill.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react'\n\nimport styles from './AiAssistantPanel.module.scss'\n\nexport type PillTone = 'info' | 'neutral' | 'success' | 'warning'\n\ninterface PillProps {\n  children: ReactNode\n  /** A collection or global slug. Gives the pill a dot in that collection's colour. */\n  entity?: string\n  tone?: PillTone\n}\n\n/** A short label. The text carries the meaning; tone and the collection dot only help scanning. */\nexport function Pill({ tone = 'neutral', entity, children }: PillProps) {\n  return (\n    <span\n      className={styles.assistant__pill}\n      data-tone={tone}\n      style={entity ? ({ '--pill-hue': hueOf(entity) } as CSSProperties) : undefined}\n    >\n      {entity ? <span aria-hidden=\"true\" className={styles['assistant__pill-dot']} /> : null}\n      {children}\n    </span>\n  )\n}\n\n/** The same collection always gets the same colour. */\nfunction hueOf(slug: string): number {\n  let hash = 0\n  for (const character of slug) {\n    hash = (hash * 31 + character.charCodeAt(0)) % 360\n  }\n  return hash\n}\n"],"names":["styles","Pill","tone","entity","children","span","className","assistant__pill","data-tone","style","hueOf","undefined","aria-hidden","slug","hash","character","charCodeAt"],"mappings":";AAEA,OAAOA,YAAY,iCAAgC;AAWnD,iGAAiG,GACjG,OAAO,SAASC,KAAK,EAAEC,OAAO,SAAS,EAAEC,MAAM,EAAEC,QAAQ,EAAa;IACpE,qBACE,MAACC;QACCC,WAAWN,OAAOO,eAAe;QACjCC,aAAWN;QACXO,OAAON,SAAU;YAAE,cAAcO,MAAMP;QAAQ,IAAsBQ;;YAEpER,uBAAS,KAACE;gBAAKO,eAAY;gBAAON,WAAWN,MAAM,CAAC,sBAAsB;iBAAO;YACjFI;;;AAGP;AAEA,qDAAqD,GACrD,SAASM,MAAMG,IAAY;IACzB,IAAIC,OAAO;IACX,KAAK,MAAMC,aAAaF,KAAM;QAC5BC,OAAO,AAACA,CAAAA,OAAO,KAAKC,UAAUC,UAAU,CAAC,EAAC,IAAK;IACjD;IACA,OAAOF;AACT"}

package/dist/admin/PlanCard.d.ts

@@ -0,0 +1,14 @@
+import type { AssistantChange, PlanStatus, SubmitPlanOutput } from '../types.js';
+interface PlanCardProps {
+    apiRoute: string;
+    onOutcome: (planId: string, update: {
+        changes?: AssistantChange[];
+        status: PlanStatus;
+    }) => void;
+    output: Extract<SubmitPlanOutput, {
+        ok: true;
+    }>;
+}
+/** A plan the assistant proposed. Nothing is written until the editor chooses Proceed. */
+export declare function PlanCard({ output, apiRoute, onOutcome }: PlanCardProps): import("react").JSX.Element;
+export {};

package/dist/admin/PlanCard.js

@@ -0,0 +1,465 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@payloadcms/ui';
+import { useId, useState } from 'react';
+import styles from './AiAssistantPanel.module.scss';
+import { currentOpenDocument } from './openDocument.js';
+import { Pill } from './Pill.js';
+import { useEntityLabel } from './useEntityLabel.js';
+/** A plan the assistant proposed. Nothing is written until the editor chooses Proceed. */ export function PlanCard({ output, apiRoute, onOutcome }) {
+    const headingId = useId();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState('');
+    const [editor, setEditor] = useState();
+    const { plan, status } = output;
+    const proceed = async ()=>{
+        setError('');
+        setPending(true);
+        try {
+            // Only the plan's id: the files it saves are already stored, and the server reads them from there.
+            const response = await fetch(`${apiRoute}/ai-assistant/apply`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    planId: plan.id
+                })
+            }).catch(()=>{
+                throw new Error('The changes could not be sent. Check your connection and choose Proceed again.');
+            });
+            const payload = await response.json().catch(()=>null);
+            if (!response.ok) {
+                throw new Error(messageOf(payload) ?? 'The changes could not be saved.');
+            }
+            const changes = payload && typeof payload === 'object' && 'changes' in payload && Array.isArray(payload.changes) ? payload.changes : [];
+            onOutcome(plan.id, {
+                status: 'applied',
+                changes
+            });
+            setEditor(await syncOpenEditor(changes));
+        } catch (caught) {
+            setError(caught instanceof Error && caught.message ? caught.message : 'The changes could not be saved.');
+        } finally{
+            setPending(false);
+        }
+    };
+    const loadIntoEditor = async ()=>{
+        const open = currentOpenDocument();
+        if (!open) {
+            return;
+        }
+        setEditor(await reloadEditor(open));
+    };
+    const cancel = async ()=>{
+        setError('');
+        setPending(true);
+        try {
+            const response = await fetch(`${apiRoute}/ai-assistant/cancel`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    planId: plan.id
+                })
+            });
+            if (!response.ok) {
+                throw new Error(messageOf(await response.json().catch(()=>null)) ?? 'The plan could not be cancelled.');
+            }
+            onOutcome(plan.id, {
+                status: 'cancelled'
+            });
+        } catch (caught) {
+            setError(caught instanceof Error && caught.message ? caught.message : 'The plan could not be cancelled.');
+        } finally{
+            setPending(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-labelledby": headingId,
+        className: styles.assistant__plan,
+        "data-status": status,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.assistant__planHeader,
+                children: [
+                    /*#__PURE__*/ _jsx("h4", {
+                        className: styles.assistant__planTitle,
+                        id: headingId,
+                        children: plan.blocked ? 'Needs a decision' : 'Plan'
+                    }),
+                    /*#__PURE__*/ _jsx(Pill, {
+                        tone: statusTone[status],
+                        children: statusLabel[status]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: styles.assistant__text,
+                children: plan.summary
+            }),
+            plan.blocked ? /*#__PURE__*/ _jsx(Decision, {
+                plan: plan
+            }) : /*#__PURE__*/ _jsx(Operations, {
+                plan: plan
+            }),
+            status === 'applied' ? /*#__PURE__*/ _jsx(Changes, {
+                changes: output.changes ?? []
+            }) : null,
+            editor === 'reloaded' ? /*#__PURE__*/ _jsx("p", {
+                className: styles.assistant__meta,
+                children: "The page behind this panel now shows these changes."
+            }) : null,
+            editor === 'unsaved' ? /*#__PURE__*/ _jsxs("div", {
+                className: styles.assistant__notice,
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: styles.assistant__meta,
+                        children: "This page has edits you have not saved, so the editor still shows them. Loading the saved changes replaces your unsaved edits."
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "secondary",
+                        margin: false,
+                        onClick: ()=>void loadIntoEditor(),
+                        size: "small",
+                        type: "button",
+                        children: "Load saved changes"
+                    })
+                ]
+            }) : null,
+            editor === 'failed' ? /*#__PURE__*/ _jsx("p", {
+                className: styles.assistant__error,
+                role: "alert",
+                children: "The changes were saved, but the editor could not be refreshed. Reload the page to see them."
+            }) : null,
+            status === 'cancelled' ? /*#__PURE__*/ _jsx("p", {
+                className: styles.assistant__meta,
+                children: "Cancelled. Nothing was saved."
+            }) : null,
+            status === 'proposed' ? /*#__PURE__*/ _jsx(_Fragment, {
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: styles.assistant__actions,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "primary",
+                            disabled: pending,
+                            margin: false,
+                            onClick: ()=>void proceed(),
+                            size: "small",
+                            type: "button",
+                            children: "Proceed"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "secondary",
+                            disabled: pending,
+                            margin: false,
+                            onClick: ()=>void cancel(),
+                            size: "small",
+                            type: "button",
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            }) : null,
+            error ? /*#__PURE__*/ _jsx("p", {
+                className: styles.assistant__error,
+                role: "alert",
+                children: error
+            }) : null
+        ]
+    });
+}
+/**
+ * When a plan updates the document that is open, its form still shows the old values. Reload it,
+ * unless the editor has unsaved edits there: those are theirs to keep or replace.
+ */ async function syncOpenEditor(changes) {
+    const open = currentOpenDocument();
+    if (!open) {
+        return undefined;
+    }
+    const { kind, slug, id } = open.context;
+    const touched = changes.some((change)=>change.action === 'updated' && change.collection === slug && (kind === 'global' || change.id === id));
+    if (!touched) {
+        return undefined;
+    }
+    if (open.isModified()) {
+        return 'unsaved';
+    }
+    return reloadEditor(open);
+}
+async function reloadEditor(open) {
+    try {
+        await open.reload();
+        return 'reloaded';
+    } catch  {
+        return 'failed';
+    }
+}
+const statusLabel = {
+    proposed: 'Ready to review',
+    blocked: 'Waiting on you',
+    applied: 'Saved',
+    cancelled: 'Cancelled'
+};
+const statusTone = {
+    proposed: 'info',
+    blocked: 'warning',
+    applied: 'success',
+    cancelled: 'neutral'
+};
+function Decision({ plan }) {
+    const entityLabel = useEntityLabel();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("ul", {
+                className: styles.assistant__list,
+                children: plan.questions.map((question)=>/*#__PURE__*/ _jsx("li", {
+                        children: question
+                    }, question))
+            }),
+            plan.candidates.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                className: styles.assistant__list,
+                children: plan.candidates.map((candidate)=>/*#__PURE__*/ _jsxs("li", {
+                        children: [
+                            /*#__PURE__*/ _jsx(Pill, {
+                                entity: candidate.slug,
+                                children: entityLabel(candidate.slug, candidate.kind)
+                            }),
+                            ' ',
+                            candidate.href ? /*#__PURE__*/ _jsx("a", {
+                                href: candidate.href,
+                                children: candidate.label
+                            }) : candidate.label
+                        ]
+                    }, `${candidate.slug}-${candidate.id ?? candidate.label}`))
+            }) : null,
+            /*#__PURE__*/ _jsx("p", {
+                className: styles.assistant__meta,
+                children: "Reply below to choose."
+            })
+        ]
+    });
+}
+function Operations({ plan }) {
+    const entityLabel = useEntityLabel();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            plan.operations.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                className: styles.assistant__ops,
+                children: plan.operations.map((operation, index)=>/*#__PURE__*/ _jsxs("li", {
+                        className: styles.assistant__op,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: styles.assistant__opHeader,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Pill, {
+                                        tone: operation.action === 'create' ? 'success' : 'info',
+                                        children: operation.action === 'create' ? 'Create' : 'Update'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Pill, {
+                                        entity: operation.slug,
+                                        children: entityLabel(operation.slug, operation.kind)
+                                    }),
+                                    /*#__PURE__*/ _jsx(SavePill, {
+                                        immediate: operation.savesImmediately
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: styles.assistant__opLabel,
+                                children: operation.href ? /*#__PURE__*/ _jsx("a", {
+                                    href: operation.href,
+                                    children: operation.label
+                                }) : operation.label
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: styles.assistant__meta,
+                                children: operation.summary
+                            }),
+                            operation.fieldChanges && operation.fieldChanges.length > 0 ? /*#__PURE__*/ _jsx(FieldChanges, {
+                                changes: operation.fieldChanges
+                            }) : operation.fields.length > 0 ? /*#__PURE__*/ _jsxs("p", {
+                                className: styles.assistant__meta,
+                                children: [
+                                    "Fields: ",
+                                    operation.fields.join(', ')
+                                ]
+                            }) : null
+                        ]
+                    }, `${operation.slug}-${operation.id ?? index}`))
+            }) : null,
+            plan.files.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                className: styles.assistant__ops,
+                children: plan.files.map((file)=>/*#__PURE__*/ _jsxs("li", {
+                        className: styles.assistant__op,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: styles.assistant__opHeader,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Pill, {
+                                        children: "Upload"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Pill, {
+                                        entity: file.collection,
+                                        children: entityLabel(file.collection)
+                                    }),
+                                    /*#__PURE__*/ _jsx(SavePill, {
+                                        immediate: file.savesImmediately
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: styles.assistant__opLabel,
+                                children: file.name
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: styles.assistant__meta,
+                                children: file.note
+                            })
+                        ]
+                    }, file.index))
+            }) : null
+        ]
+    });
+}
+function SavePill({ immediate }) {
+    return immediate ? /*#__PURE__*/ _jsx(Pill, {
+        tone: "warning",
+        children: "Saves immediately"
+    }) : /*#__PURE__*/ _jsx(Pill, {
+        children: "Draft"
+    });
+}
+/** Native disclosure, so it works with a keyboard and screen reader and the values stay in the page. */ function FieldChanges({ changes }) {
+    return /*#__PURE__*/ _jsxs("details", {
+        className: styles.assistant__diff,
+        open: changes.length <= 3,
+        children: [
+            /*#__PURE__*/ _jsxs("summary", {
+                children: [
+                    "Show changes ",
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: styles.assistant__meta,
+                        children: [
+                            "(",
+                            changes.length,
+                            ")"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("dl", {
+                className: styles.assistant__diffList,
+                children: changes.map((change)=>/*#__PURE__*/ _jsxs("div", {
+                        className: styles.assistant__diffItem,
+                        children: [
+                            /*#__PURE__*/ _jsxs("dt", {
+                                className: styles.assistant__diffPath,
+                                children: [
+                                    /*#__PURE__*/ _jsx("code", {
+                                        children: change.path
+                                    }),
+                                    change.added ? /*#__PURE__*/ _jsx(Pill, {
+                                        tone: "success",
+                                        children: "Added blocks"
+                                    }) : null
+                                ]
+                            }),
+                            change.before !== undefined ? /*#__PURE__*/ _jsxs("dd", {
+                                className: styles.assistant__diffValue,
+                                "data-side": "before",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.assistant__diffLabel,
+                                        children: "Now"
+                                    }),
+                                    change.media?.before ? /*#__PURE__*/ _jsx(Media, {
+                                        media: change.media.before
+                                    }) : change.before
+                                ]
+                            }) : null,
+                            /*#__PURE__*/ _jsxs("dd", {
+                                className: styles.assistant__diffValue,
+                                "data-side": "after",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.assistant__diffLabel,
+                                        children: change.before === undefined ? 'New' : 'Proposed'
+                                    }),
+                                    change.media?.after ? /*#__PURE__*/ _jsx(Media, {
+                                        media: change.media.after
+                                    }) : change.after
+                                ]
+                            })
+                        ]
+                    }, change.path))
+            })
+        ]
+    });
+}
+/** A file in a diff. The thumbnail is decorative; the name says which file it is. */ function Media({ media }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        className: styles.assistant__media,
+        children: [
+            media.thumbnail ? // A plain img: an admin preview of an existing upload, already resized by its own URL.
+            /*#__PURE__*/ _jsx("img", {
+                alt: "",
+                className: styles.assistant__mediaThumb,
+                height: 40,
+                loading: "lazy",
+                src: media.thumbnail,
+                width: 40
+            }) : /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": "true",
+                className: styles.assistant__mediaThumb
+            }),
+            /*#__PURE__*/ _jsxs("span", {
+                children: [
+                    media.label,
+                    media.pending ? /*#__PURE__*/ _jsx("span", {
+                        className: styles.assistant__meta,
+                        children: " (attached, saved on Proceed)"
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+function Changes({ changes }) {
+    if (changes.length === 0) {
+        return /*#__PURE__*/ _jsx("p", {
+            className: styles.assistant__meta,
+            children: "Saved. There is no document to open."
+        });
+    }
+    return /*#__PURE__*/ _jsx("ul", {
+        className: styles.assistant__list,
+        children: changes.map((change)=>/*#__PURE__*/ _jsxs("li", {
+                children: [
+                    /*#__PURE__*/ _jsx("a", {
+                        href: change.href,
+                        children: change.label
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: styles.assistant__meta,
+                        children: [
+                            ' ',
+                            change.action,
+                            change.detail ? `. ${change.detail}` : ''
+                        ]
+                    })
+                ]
+            }, change.href))
+    });
+}
+function messageOf(payload) {
+    if (payload && typeof payload === 'object' && 'message' in payload && typeof payload.message === 'string') {
+        return payload.message;
+    }
+    return undefined;
+}
+
+//# sourceMappingURL=PlanCard.js.map