canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/schema-editor/CollectionEditor.js

@@ -5,17 +5,41 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * A collection has a name (machine-readable id), label (display name), and
  * entries (entry types defining what content can be created). Create mode
- * requires at least one entry type; edit mode only allows changing name and
- * label (entry types are managed separately).
+ * stages everything locally and sends it with "Create collection"; Cancel
+ * discards it. Edit mode stages name, label and slug until "Save collection
+ * details", but every entry-type add, update and remove saves to the branch
+ * at once. The footer's dismiss button says what leaving does: "Discard
+ * changes" while details are staged, "Close" once an entry-type change has
+ * saved or may have, else "Cancel" (which would promise a revert it cannot do
+ * after one).
  */
-import { useState, useCallback, useEffect } from 'react';
-import { Modal, Stack, TextInput, Group, Button, Alert, Text, Paper, ActionIcon, Menu, Divider, Badge, } from '@mantine/core';
-import { IconAlertCircle, IconPlus, IconDotsVertical, IconTrash, IconEdit, IconStar, } from '@tabler/icons-react';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { Modal, Stack, TextInput, Group, Button, Alert, Text, Paper, ActionIcon, Menu, Title, Badge, Tooltip, } from '@mantine/core';
+import { IconAlertCircle, IconAlertTriangle, IconRestore, IconCheck, IconPlus, IconDotsVertical, IconTrash, IconEdit, IconStar, } from '@tabler/icons-react';
 import { EntryTypeEditor } from './EntryTypeEditor.js';
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal.js';
+import { DestructiveMenuItem } from '../components/DestructiveMenuItem.js';
 import { getErrorMessage } from '../../utils/error.js';
-export function CollectionEditor({ isOpen, editingCollection, parentPath, availableSchemas, onSave, onAddEntryType, onUpdateEntryType, onRemoveEntryType, onClose, isSaving = false, error = null, }) {
+import { slugOf } from './collection-draft.js';
+/** Whether a listed entry type holds every field an add or update sent. */
+function showsFields(entryType, fields) {
+    return Object.entries(fields).every(([key, value]) => key === 'default'
+        ? !!entryType.default === !!value
+        : entryType[key] === value);
+}
+function usageOf(entryType) {
+    return 'usageCount' in entryType ? (entryType.usageCount ?? 0) : 0;
+}
+export function CollectionEditor({ isOpen, editingCollection, parentPath, availableSchemas, onSave, onAddEntryType, onUpdateEntryType, onRemoveEntryType, onReloadEntryTypes, onClose, isSaving = false, error = null, restored = null, onDiscardRestored, }) {
     const isEditMode = editingCollection !== null;
+    // Read when the dialog opens only: dropping it later must not reset what the user has typed.
+    const restoredRef = useRef(restored);
+    restoredRef.current = restored;
+    const [showingRestored, setShowingRestored] = useState(false);
+    const nameInputRef = useRef(null);
+    // Staged removals, latest last; Undo stays in the dialog, as a toast's is outside the focus trap.
+    const [stagedRemovals, setStagedRemovals] = useState([]);
+    const stagedRemoval = stagedRemovals.at(-1);
     const [formData, setFormData] = useState({
         name: '',
         label: '',
@@ -29,33 +53,95 @@ export function CollectionEditor({ isOpen, editingCollection, parentPath, availa
     const [editingEntryTypeIndex, setEditingEntryTypeIndex] = useState(null);
     const [entryTypeSaving, setEntryTypeSaving] = useState(false);
     const [entryTypeError, setEntryTypeError] = useState(null);
+    const [errorDismissed, setErrorDismissed] = useState(false);
+    // Edit mode renders this list rather than `editingCollection.entries`, a snapshot taken when
+    // the dialog opened that the parent never refreshes. Each immediate action patches it.
+    const [entryTypes, setEntryTypes] = useState(() => editingCollection?.entries ?? []);
+    // True once an immediate entry-type change has saved, or may have, in this opening of the dialog.
+    const [entryTypeChanged, setEntryTypeChanged] = useState(false);
+    const [entryTypeStatus, setEntryTypeStatus] = useState('');
+    // An unanswered remove the re-read did not settle, shown above the list.
+    const [entryTypeUnanswered, setEntryTypeUnanswered] = useState(null);
+    // An unanswered add or update the re-read did not settle, shown in the entry type dialog,
+    // which stays open with the user's input.
+    const [entryTypeWarning, setEntryTypeWarning] = useState(null);
+    const [removeFailure, setRemoveFailure] = useState(null);
+    const [removing, setRemoving] = useState(false);
+    const [menuOpenFor, setMenuOpenFor] = useState(null);
+    // Closing an overlay returns focus to its opener, but a row's menu item is gone once it acts,
+    // so Mantine's own return lands nowhere. `row` names the trigger to focus; null is the heading.
+    const [focusRequest, setFocusRequest] = useState(null);
+    const triggerRefs = useRef(new Map());
+    const entryTypesHeadingRef = useRef(null);
     const [deleteEntryTypeModalOpen, setDeleteEntryTypeModalOpen] = useState(false);
     const [deletingEntryType, setDeletingEntryType] = useState(null);
     useEffect(() => {
         if (isOpen) {
+            const prefill = restoredRef.current;
             if (editingCollection) {
                 setFormData({
-                    name: editingCollection.name,
-                    label: editingCollection.label || '',
-                    entries: [], // Entry types are managed separately in edit mode
+                    name: prefill?.name ?? editingCollection.name,
+                    label: prefill?.label ?? (editingCollection.label || ''),
+                    entries: [], // Edit mode keeps its entry types in `entryTypes`
                 });
-                // Slug is the logical path's last segment before its embedded id (e.g. "posts.abc123" -> "posts").
-                const pathParts = editingCollection.logicalPath.split('/');
-                const lastPart = pathParts[pathParts.length - 1];
-                const slugPart = lastPart?.split('.')[0] || '';
-                setSlug(slugPart);
+                setEntryTypes(editingCollection.entries);
+                setSlug(prefill?.slug ?? slugOf(editingCollection.logicalPath));
             }
             else {
                 setFormData({
-                    name: '',
-                    label: '',
-                    entries: [],
+                    name: prefill?.name ?? '',
+                    label: prefill?.label ?? '',
+                    entries: prefill?.entries ?? [],
                 });
                 setSlug('');
+                setEntryTypes([]);
             }
+            setShowingRestored(!!prefill);
+            setStagedRemovals([]);
             setValidationError(null);
+            setEntryTypeChanged(false);
+            setEntryTypeStatus('');
+            setEntryTypeUnanswered(null);
+            setRemoveFailure(null);
+        }
+        else {
+            // The parent closes this dialog (and nulls `editingCollection`) when details save, so a
+            // sub-dialog left open would stage into a closed dialog in create mode.
+            setEntryTypeEditorOpen(false);
+            setEditingEntryType(null);
+            setEditingEntryTypeIndex(null);
+            setEntryTypeError(null);
+            setDeleteEntryTypeModalOpen(false);
         }
     }, [isOpen, editingCollection]);
+    useEffect(() => {
+        setErrorDismissed(false);
+    }, [error, isOpen, editingCollection]);
+    useEffect(() => {
+        if (!focusRequest)
+            return;
+        // Runs after the overlay's own focus return, which Mantine's useFocusReturn delays by 10ms.
+        const timer = window.setTimeout(() => {
+            const target = focusRequest.row === null
+                ? entryTypesHeadingRef.current
+                : triggerRefs.current.get(focusRequest.row);
+            target?.focus();
+            setFocusRequest(null);
+        }, 50);
+        return () => window.clearTimeout(timer);
+    }, [focusRequest]);
+    const discardRestored = useCallback(() => {
+        setFormData({
+            name: editingCollection?.name ?? '',
+            label: editingCollection?.label ?? '',
+            entries: [],
+        });
+        setSlug(editingCollection ? slugOf(editingCollection.logicalPath) : '');
+        setShowingRestored(false);
+        setStagedRemovals([]);
+        onDiscardRestored?.();
+        nameInputRef.current?.focus();
+    }, [editingCollection, onDiscardRestored]);
     const updateField = useCallback((field, value) => {
         setFormData((prev) => ({ ...prev, [field]: value }));
         setValidationError(null);
@@ -92,9 +178,7 @@ export function CollectionEditor({ isOpen, editingCollection, parentPath, availa
             if (formData.label !== (editingCollection?.label || '')) {
                 updates.label = formData.label || undefined;
             }
-            const pathParts = editingCollection?.logicalPath.split('/') || [];
-            const lastPart = pathParts[pathParts.length - 1];
-            const currentSlug = lastPart?.split('.')[0] || '';
+            const currentSlug = editingCollection ? slugOf(editingCollection.logicalPath) : '';
             if (slug && slug !== currentSlug) {
                 updates.slug = slug;
             }
@@ -126,18 +210,101 @@ export function CollectionEditor({ isOpen, editingCollection, parentPath, availa
         setEntryTypeError(null);
         setEntryTypeEditorOpen(true);
     }, []);
+    const announceEntryTypeChange = useCallback((message) => {
+        setEntryTypeStatus(message);
+        setEntryTypeChanged(true);
+    }, []);
+    /**
+     * After an entry-type action the server never answered, which may have landed: re-reads the
+     * list from the branch and shows it, and counts the action as a possible change (the footer
+     * reads "Close"). Resolves to the re-read list, or null when it could not be read.
+     */
+    const reloadEntryTypes = useCallback(async (collectionPath) => {
+        setEntryTypeChanged(true);
+        const reloaded = await (onReloadEntryTypes?.(collectionPath) ?? Promise.resolve(null)).catch((err) => {
+            console.error(err);
+            return null;
+        });
+        if (reloaded)
+            setEntryTypes(reloaded);
+        return reloaded;
+    }, [onReloadEntryTypes]);
+    const closeEntryTypeEditor = useCallback(() => {
+        setEntryTypeEditorOpen(false);
+        setEditingEntryType(null);
+        setEditingEntryTypeIndex(null);
+        setEntryTypeError(null);
+        setEntryTypeWarning(null);
+    }, []);
+    // Esc, the close button and a click outside all land here; closing mid-request would hide
+    // the request's result.
+    const dismissEntryTypeEditor = useCallback(() => {
+        if (entryTypeSaving)
+            return;
+        const editedName = editingEntryType?.name;
+        closeEntryTypeEditor();
+        if (editedName)
+            setFocusRequest({ row: editedName });
+    }, [entryTypeSaving, editingEntryType, closeEntryTypeEditor]);
     const handleEntryTypeSave = useCallback(async (data, isNew) => {
+        const editedName = isNew ? undefined : editingEntryType?.name;
+        const finish = () => {
+            closeEntryTypeEditor();
+            if (editedName)
+                setFocusRequest({ row: editedName });
+        };
         if (isEditMode && editingCollection) {
+            // The server skips undefined fields, so a cleared label or max items keeps its stored
+            // value: the list shows what was stored, and an update with none saves nothing.
+            const stored = Object.fromEntries(Object.entries(data).filter(([, value]) => value !== undefined));
+            if (!isNew && Object.keys(stored).length === 0) {
+                finish();
+                return;
+            }
             setEntryTypeSaving(true);
             setEntryTypeError(null);
+            setEntryTypeWarning(null);
+            setEntryTypeStatus('');
+            setEntryTypeUnanswered(null);
+            setRemoveFailure(null);
             try {
-                // Absent props (optional chaining short-circuits to `undefined`) are
-                // treated as success — there's nothing to report back for them.
-                const result = isNew
-                    ? await onAddEntryType?.(editingCollection.logicalPath, data)
-                    : editingEntryType
-                        ? await onUpdateEntryType?.(editingCollection.logicalPath, editingEntryType.name, data)
-                        : undefined;
+                // An absent callback leaves `result` undefined: nothing was saved, so nothing is
+                // applied locally or announced.
+                let result;
+                if (isNew) {
+                    const entryType = data;
+                    result = await onAddEntryType?.(editingCollection.logicalPath, entryType);
+                    if (result?.ok) {
+                        setEntryTypes((prev) => [...prev, { ...entryType, usageCount: 0 }]);
+                        announceEntryTypeChange(`Entry type "${entryType.name}" added`);
+                    }
+                }
+                else if (editingEntryType) {
+                    const name = editingEntryType.name;
+                    result = await onUpdateEntryType?.(editingCollection.logicalPath, name, data);
+                    if (result?.ok) {
+                        setEntryTypes((prev) => prev.map((et) => (et.name === name ? { ...et, ...stored } : et)));
+                        announceEntryTypeChange(`Entry type "${name}" updated`);
+                    }
+                }
+                if (result && !result.ok && result.unanswered) {
+                    // The re-read settles it when the branch already shows the change. Otherwise this
+                    // dialog keeps the input: re-sending an update sends the same change, and re-sending
+                    // an add that had landed is refused because the name exists (`schema-store.ts`).
+                    const name = isNew ? data.name : editingEntryType?.name;
+                    const reloaded = await reloadEntryTypes(editingCollection.logicalPath);
+                    const now = reloaded?.find((et) => et.name === name);
+                    if (name && now && showsFields(now, stored)) {
+                        announceEntryTypeChange(`Entry type "${name}" ${isNew ? 'added' : 'updated'}`);
+                        closeEntryTypeEditor();
+                        setFocusRequest({ row: name });
+                        return;
+                    }
+                    setEntryTypeWarning(isNew
+                        ? `"${name}" may not have been added. Select "Add entry type" to try again: if it was added, you'll be told it already exists.`
+                        : 'The change may not have been saved. Select "Save entry type" to send it again.');
+                    return;
+                }
                 if (result && !result.ok) {
                     setEntryTypeError(result.error);
                     return;
@@ -168,9 +335,7 @@ export function CollectionEditor({ isOpen, editingCollection, parentPath, availa
                 }));
             }
         }
-        setEntryTypeEditorOpen(false);
-        setEditingEntryType(null);
-        setEditingEntryTypeIndex(null);
+        finish();
     }, [
         isEditMode,
         editingCollection,
@@ -178,45 +343,179 @@ export function CollectionEditor({ isOpen, editingCollection, parentPath, availa
         editingEntryTypeIndex,
         onAddEntryType,
         onUpdateEntryType,
+        announceEntryTypeChange,
+        reloadEntryTypes,
+        closeEntryTypeEditor,
     ]);
+    const displayEntryTypes = isEditMode
+        ? entryTypes
+        : formData.entries;
+    // Create mode stages entry types, so a removal goes at once with an Undo; edit mode's saves at
+    // once with no restore, so it confirms (docs/ux-guidelines.md, Destructive actions).
+    const removeStagedEntryType = useCallback((entryType, index) => {
+        const names = formData.entries.map((et) => et.name);
+        const neighbour = names[index + 1] ?? names[index - 1] ?? null;
+        setFormData((prev) => ({ ...prev, entries: prev.entries.filter((_, i) => i !== index) }));
+        setStagedRemovals((prev) => [...prev, { entryType, index }]);
+        setFocusRequest({ row: neighbour });
+    }, [formData.entries]);
+    const undoStagedRemoval = useCallback(() => {
+        if (!stagedRemoval)
+            return;
+        const { entryType, index } = stagedRemoval;
+        // Into the list as it is now, unless an entry type of that name was added since.
+        setFormData((prev) => prev.entries.some((et) => et.name === entryType.name)
+            ? prev
+            : {
+                ...prev,
+                entries: [...prev.entries.slice(0, index), entryType, ...prev.entries.slice(index)],
+            });
+        setStagedRemovals((prev) => prev.slice(0, -1));
+        setFocusRequest({ row: entryType.name });
+    }, [stagedRemoval]);
     const handleRemoveEntryType = useCallback((entryType, index) => {
-        setDeletingEntryType({ entryType, index });
+        if (!isEditMode) {
+            removeStagedEntryType(entryType, index);
+            return;
+        }
+        setDeletingEntryType({ entryType });
         setDeleteEntryTypeModalOpen(true);
+    }, [isEditMode, removeStagedEntryType]);
+    // Only closes: the target is replaced on the next open, so the message stays put while the
+    // dialog fades out.
+    const closeRemoveConfirm = useCallback(() => {
+        setDeleteEntryTypeModalOpen(false);
     }, []);
-    const confirmRemoveEntryType = useCallback(() => {
+    const cancelRemoveConfirm = useCallback(() => {
+        closeRemoveConfirm();
+        if (deletingEntryType)
+            setFocusRequest({ row: deletingEntryType.entryType.name });
+    }, [closeRemoveConfirm, deletingEntryType]);
+    const removeEntryType = useCallback(async (name) => {
+        const names = displayEntryTypes.map((et) => et.name);
+        // Focus moves to the row that takes the removed one's place, else the one before it, else
+        // the heading.
+        const neighbour = names[names.indexOf(name) + 1] ?? names[names.indexOf(name) - 1] ?? null;
+        if (editingCollection) {
+            if (!onRemoveEntryType)
+                return;
+            setRemoving(true);
+            setEntryTypeStatus('');
+            setEntryTypeUnanswered(null);
+            try {
+                const result = await onRemoveEntryType(editingCollection.logicalPath, name);
+                if (result.ok) {
+                    setEntryTypes((prev) => prev.filter((et) => et.name !== name));
+                    setRemoveFailure(null);
+                    announceEntryTypeChange(`Entry type "${name}" removed`);
+                    setFocusRequest({ row: neighbour });
+                }
+                else if (result.unanswered) {
+                    setRemoveFailure(null);
+                    // The re-read settles it when the entry type is gone.
+                    const reloaded = await reloadEntryTypes(editingCollection.logicalPath);
+                    const listed = reloaded?.map((et) => et.name);
+                    if (listed && !listed.includes(name)) {
+                        announceEntryTypeChange(`Entry type "${name}" removed`);
+                        setFocusRequest({ row: neighbour && listed.includes(neighbour) ? neighbour : null });
+                    }
+                    else {
+                        setEntryTypeUnanswered(listed
+                            ? `"${name}" is still listed, so it may not have been removed yet. Remove it again to retry, or close and reopen this collection later to check.`
+                            : `"${name}" may already have been removed. Close and reopen this collection to check before trying again.`);
+                        setFocusRequest({ row: name });
+                    }
+                }
+                else {
+                    setRemoveFailure({ name, message: result.error });
+                    setFocusRequest({ row: name });
+                }
+            }
+            catch (err) {
+                setRemoveFailure({ name, message: getErrorMessage(err) });
+                setFocusRequest({ row: name });
+            }
+            finally {
+                setRemoving(false);
+            }
+        }
+    }, [
+        displayEntryTypes,
+        editingCollection,
+        onRemoveEntryType,
+        announceEntryTypeChange,
+        reloadEntryTypes,
+    ]);
+    const confirmRemoveEntryType = useCallback(async () => {
         if (!deletingEntryType)
             return;
-        const { entryType, index } = deletingEntryType;
-        if (isEditMode && editingCollection) {
-            onRemoveEntryType?.(editingCollection.logicalPath, entryType.name);
+        await removeEntryType(deletingEntryType.entryType.name);
+        closeRemoveConfirm();
+    }, [deletingEntryType, removeEntryType, closeRemoveConfirm]);
+    const removeMessage = deletingEntryType
+        ? `Remove "${deletingEntryType.entryType.name}"? This saves immediately and cannot be undone.`
+        : '';
+    const removeBlockedReason = (entryType) => {
+        if (displayEntryTypes.length === 1) {
+            return 'A collection needs at least one entry type. Add another before removing this one.';
         }
-        else {
-            setFormData((prev) => ({
-                ...prev,
-                entries: prev.entries.filter((_, i) => i !== index),
-            }));
-        }
-        setDeleteEntryTypeModalOpen(false);
-        setDeletingEntryType(null);
-    }, [deletingEntryType, isEditMode, editingCollection, onRemoveEntryType]);
-    const displayEntryTypes = isEditMode
-        ? editingCollection?.entries || []
-        : formData.entries;
-    const displayError = error || validationError;
-    return (_jsxs(_Fragment, { children: [_jsx(Modal, { opened: isOpen, onClose: onClose, title: isEditMode ? `Edit Collection: ${editingCollection?.name}` : 'Create Collection', size: "lg", children: _jsxs(Stack, { gap: "md", children: [displayError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Error", withCloseButton: true, onClose: () => setValidationError(null), children: displayError })), _jsx(TextInput, { label: "Name", description: "Machine-readable identifier (e.g., posts, pages, articles)", placeholder: "posts", value: formData.name, onChange: (e) => updateField('name', e.target.value), required: true }), _jsx(TextInput, { label: "Label", description: "Human-readable display name", placeholder: "Blog Posts", value: formData.label, onChange: (e) => updateField('label', e.target.value) }), isEditMode && (_jsx(TextInput, { label: "Slug", description: "Directory name (filesystem path). Changing this renames the directory.", placeholder: "posts", value: slug, onChange: (e) => {
+        // The server refuses to remove an entry type that entries use. Staged ones have no entries.
+        const used = isEditMode ? usageOf(entryType) : 0;
+        return used > 0
+            ? `${used} ${used === 1 ? 'entry uses' : 'entries use'} this entry type. Move or delete ${used === 1 ? 'it' : 'them'} first.`
+            : undefined;
+    };
+    // The hook's single `isLoading` flag drives `isSaving`, so it is also true while an
+    // entry-type action runs; the footer must not spin or close over that action's result.
+    const entryTypeBusy = entryTypeSaving || removing;
+    // Any request in flight, a details save included: the parent closes this dialog when a details
+    // save succeeds, so an entry-type action started meanwhile would report into a closed dialog.
+    const requestBusy = isSaving || entryTypeBusy;
+    // Mantine's Escape handler fires on every open Modal, so one Esc would close a sub-dialog and
+    // this dialog together, losing staged details. A request in flight must not be hidden either.
+    const dismissBlocked = requestBusy || entryTypeEditorOpen || deleteEntryTypeModalOpen;
+    const propErrorVisible = !!error && !errorDismissed;
+    const displayError = propErrorVisible ? error : validationError;
+    const errorTitle = propErrorVisible
+        ? isEditMode
+            ? "Couldn't save collection details"
+            : "Couldn't create collection"
+        : undefined;
+    // The comparisons handleSave uses to build its update, so "Discard changes" shows exactly when
+    // that update would carry a change.
+    const detailsDirty = editingCollection !== null &&
+        (formData.name !== editingCollection.name ||
+            formData.label !== (editingCollection.label || '') ||
+            (!!slug && slug !== slugOf(editingCollection.logicalPath)));
+    const createStaged = !isEditMode && (!!formData.name || !!formData.label || formData.entries.length > 0);
+    const dismissLabel = detailsDirty
+        ? 'Discard changes'
+        : isEditMode && entryTypeChanged
+            ? 'Close'
+            : 'Cancel';
+    const entryTypesSection = (_jsxs(Stack, { gap: "md", children: [_jsxs("div", { children: [_jsx(Title, { order: 3, size: "h5", tabIndex: -1, ref: entryTypesHeadingRef, children: "Entry types" }), isEditMode && (_jsx(Text, { size: "sm", c: "dimmed", children: "Changes here save to the branch immediately." }))] }), entryTypeUnanswered && (_jsx(Alert, { icon: _jsx(IconAlertTriangle, { size: 16 }), color: "yellow", title: "No answer from the server", withCloseButton: true, onClose: () => {
+                    setEntryTypeUnanswered(null);
+                    setFocusRequest({ row: null });
+                }, children: entryTypeUnanswered })), displayEntryTypes.length === 0 ? (_jsx(Paper, { p: "md", withBorder: true, children: _jsx(Text, { c: "dimmed", ta: "center", size: "sm", children: "No entry types yet. Add at least one to choose what kinds of entries this collection can hold." }) })) : (_jsx(Stack, { gap: "xs", children: displayEntryTypes.map((entryType, index) => (_jsx(Paper, { p: "sm", withBorder: true, children: _jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [_jsx(Group, { gap: "sm", children: _jsxs("div", { children: [_jsxs(Group, { gap: "xs", children: [_jsx(Text, { fw: 500, size: "sm", children: entryType.name }), entryType.default && (_jsx(Badge, { size: "xs", color: "blue", variant: "light", leftSection: _jsx(IconStar, { size: 10 }), children: "Default" })), entryType.maxItems === 1 && (_jsx(Badge, { size: "xs", color: "gray", variant: "light", children: "Singleton" }))] }), _jsxs(Text, { size: "xs", c: "dimmed", children: [entryType.format.toUpperCase(), " \u00B7 ", entryType.schema, entryType.label && ` · "${entryType.label}"`] })] }) }), _jsxs(Menu, { position: "bottom-end", withinPortal: true, onChange: (opened) => setMenuOpenFor(opened ? entryType.name : null), children: [_jsx(Tooltip, { label: `Actions for ${entryType.name}`, disabled: menuOpenFor === entryType.name, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", "aria-label": `Actions for ${entryType.name}`, disabled: requestBusy, ref: (el) => {
+                                                    if (el)
+                                                        triggerRefs.current.set(entryType.name, el);
+                                                    else
+                                                        triggerRefs.current.delete(entryType.name);
+                                                }, children: _jsx(IconDotsVertical, { size: 16, "aria-hidden": true }) }) }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: () => handleOpenEditEntryType(entryType, index), children: "Edit\u2026" }), _jsx(Menu.Divider, {}), _jsx(DestructiveMenuItem, { leftSection: _jsx(IconTrash, { size: 14 }), onClick: () => handleRemoveEntryType(entryType, index), blockedReason: removeBlockedReason(entryType), children: "Remove" })] })] })] }) }, entryType.name))) })), _jsxs(Group, { gap: 6, wrap: "nowrap", role: "status", mih: "calc(var(--mantine-font-size-sm) * var(--mantine-line-height-sm))", children: [isEditMode && entryTypeStatus && (_jsxs(_Fragment, { children: [_jsx(IconCheck, { size: 14, color: "var(--mantine-color-green-text)", "aria-hidden": true }), _jsx(Text, { size: "sm", children: entryTypeStatus })] })), !isEditMode && stagedRemoval && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", children: `Removed entry type "${stagedRemoval.entryType.name}".` }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: undoStagedRemoval, "aria-label": `Undo removing entry type "${stagedRemoval.entryType.name}"`, children: "Undo" })] }))] }), removeFailure && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Couldn't remove entry type", withCloseButton: true, onClose: () => {
+                    setRemoveFailure(null);
+                    setFocusRequest({ row: null });
+                }, children: _jsxs(Stack, { gap: "xs", align: "flex-start", children: [_jsx(Text, { size: "sm", children: removeFailure.message }), _jsx(Button, { size: "xs", variant: "light", color: "red", loading: removing, disabled: requestBusy, onClick: () => void removeEntryType(removeFailure.name), children: "Retry" })] }) })), _jsx(Button, { size: "sm", variant: "light", leftSection: _jsx(IconPlus, { size: 16 }), onClick: handleOpenAddEntryType, disabled: requestBusy, children: "Add entry type\u2026" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { opened: isOpen, onClose: dismissBlocked ? () => { } : onClose, closeOnClickOutside: !detailsDirty && !createStaged, title: isEditMode
+                    ? `Edit collection: ${editingCollection?.label || editingCollection?.name}`
+                    : 'Create collection', size: "lg", children: _jsxs(Stack, { gap: "md", children: [showingRestored && restored && (_jsx(Alert, { icon: _jsx(IconRestore, { size: 16 }), color: "blue", title: "Restored what you entered", children: _jsxs(Stack, { gap: "xs", align: "flex-start", children: [_jsx(Text, { size: "sm", children: isEditMode
+                                            ? "The server didn't answer your last save, and this collection doesn't show it, so your changes are filled in again."
+                                            : "The server didn't answer your last create, and the collection isn't in the content tree, so what you entered is filled in again." }), _jsx(Button, { size: "xs", variant: "light", onClick: discardRestored, children: "Discard changes" })] }) })), displayError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", title: errorTitle, withCloseButton: true, onClose: () => propErrorVisible ? setErrorDismissed(true) : setValidationError(null), children: displayError })), isEditMode && (_jsxs("div", { children: [_jsx(Title, { order: 3, size: "h5", children: "Collection details" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Saved when you select \"Save collection details\"." })] })), _jsx(TextInput, { ref: nameInputRef, label: "Name", description: "Machine-readable identifier (e.g., posts, pages, articles)", placeholder: "e.g. posts", value: formData.name, onChange: (e) => updateField('name', e.target.value), required: true }), _jsx(TextInput, { label: "Label", description: "Human-readable display name", placeholder: "e.g. Blog posts", value: formData.label, onChange: (e) => updateField('label', e.target.value) }), isEditMode && (_jsx(TextInput, { label: "Slug", description: "Directory name (filesystem path). Changing this renames the directory.", placeholder: "e.g. posts", value: slug, onChange: (e) => {
                                 setSlug(e.target.value);
                                 setValidationError(null);
-                            } })), parentPath && !isEditMode && (_jsxs(Text, { size: "sm", c: "dimmed", children: ["This collection will be created inside: ", _jsx("strong", { children: parentPath })] })), _jsx(Divider, { label: "Entry Types", labelPosition: "left", mt: "md" }), displayEntryTypes.length === 0 ? (_jsx(Paper, { p: "md", withBorder: true, children: _jsx(Text, { c: "dimmed", ta: "center", size: "sm", children: "No entry types defined. Add at least one entry type to define what content can be created in this collection." }) })) : (_jsx(Stack, { gap: "xs", children: displayEntryTypes.map((entryType, index) => (_jsx(Paper, { p: "sm", withBorder: true, children: _jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [_jsx(Group, { gap: "sm", children: _jsxs("div", { children: [_jsxs(Group, { gap: "xs", children: [_jsx(Text, { fw: 500, size: "sm", children: entryType.name }), entryType.default && (_jsx(Badge, { size: "xs", color: "blue", leftSection: _jsx(IconStar, { size: 10 }), children: "Default" })), entryType.maxItems === 1 && (_jsx(Badge, { size: "xs", color: "gray", children: "Singleton" }))] }), _jsxs(Text, { size: "xs", c: "dimmed", children: [entryType.format.toUpperCase(), " \u00B7 ", entryType.schema, entryType.label && ` · "${entryType.label}"`] })] }) }), _jsxs(Menu, { position: "bottom-end", withinPortal: true, children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", size: "sm", children: _jsx(IconDotsVertical, { size: 16 }) }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: () => handleOpenEditEntryType(entryType, index), children: "Edit" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { leftSection: _jsx(IconTrash, { size: 14 }), color: "red", onClick: () => handleRemoveEntryType(entryType, index), disabled: displayEntryTypes.length === 1, children: "Remove" })] })] })] }) }, entryType.name))) })), _jsx(Button, { variant: "light", leftSection: _jsx(IconPlus, { size: 16 }), onClick: handleOpenAddEntryType, children: "Add Entry Type" }), _jsxs(Group, { justify: "flex-end", gap: "sm", mt: "md", children: [_jsx(Button, { variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { onClick: handleSave, loading: isSaving, children: isEditMode ? 'Save Changes' : 'Create Collection' })] })] }) }), _jsx(EntryTypeEditor, { isOpen: entryTypeEditorOpen, editingEntryType: editingEntryType, availableSchemas: availableSchemas, existingEntryTypeNames: displayEntryTypes.map((et) => et.name), onSave: handleEntryTypeSave, onClose: () => {
-                    setEntryTypeEditorOpen(false);
-                    setEditingEntryType(null);
-                    setEditingEntryTypeIndex(null);
-                    setEntryTypeError(null);
-                }, isSaving: entryTypeSaving, error: entryTypeError }), _jsx(ConfirmDeleteModal, { isOpen: deleteEntryTypeModalOpen, title: "Remove Entry Type", message: deletingEntryType &&
-                    'usageCount' in deletingEntryType.entryType &&
-                    deletingEntryType.entryType.usageCount
-                    ? `This entry type is used by ${deletingEntryType.entryType.usageCount} ${deletingEntryType.entryType.usageCount === 1 ? 'entry' : 'entries'}. Removing it will prevent editing those entries. Are you sure you want to remove this entry type?`
-                    : 'Are you sure you want to remove this entry type? This cannot be undone.', confirmLabel: "Remove Entry Type", onConfirm: confirmRemoveEntryType, onClose: () => {
-                    setDeleteEntryTypeModalOpen(false);
-                    setDeletingEntryType(null);
-                } })] }));
+                            } })), parentPath && !isEditMode && (_jsxs(Text, { size: "sm", c: "dimmed", children: ["This collection will be created inside: ", _jsx("strong", { children: parentPath })] })), isEditMode ? (_jsx(Paper, { withBorder: true, p: "md", children: entryTypesSection })) : (entryTypesSection), _jsxs(Group, { justify: "flex-end", gap: "sm", mt: "md", "data-testid": "collection-editor-footer", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: () => {
+                                        // "Discard changes" over refilled input discards the kept input too.
+                                        if (detailsDirty && showingRestored && restored)
+                                            onDiscardRestored?.();
+                                        onClose();
+                                    }, disabled: isSaving || entryTypeBusy, children: dismissLabel }), _jsx(Button, { size: "sm", onClick: handleSave, loading: isSaving && !entryTypeBusy, disabled: entryTypeBusy, children: isEditMode ? 'Save collection details' : 'Create collection' })] })] }) }), _jsx(EntryTypeEditor, { isOpen: entryTypeEditorOpen, editingEntryType: editingEntryType, availableSchemas: availableSchemas, existingEntryTypeNames: displayEntryTypes.map((et) => et.name), staged: !isEditMode, onSave: handleEntryTypeSave, onClose: dismissEntryTypeEditor, isSaving: entryTypeSaving, error: entryTypeError, warning: entryTypeWarning }), _jsx(ConfirmDeleteModal, { isOpen: deleteEntryTypeModalOpen, title: "Remove entry type", message: removeMessage, confirmLabel: "Remove entry type", onConfirm: confirmRemoveEntryType, onClose: removing ? () => { } : cancelRemoveConfirm, loading: removing })] }));
 }

package/dist/editor/schema-editor/EntryTypeEditor.d.ts

@@ -24,9 +24,13 @@ export interface EntryTypeEditorProps {
     availableSchemas: string[];
     /** Existing entry type names in the collection (for duplicate validation) */
     existingEntryTypeNames?: string[];
+    /** The caller holds an edit until its own save, so confirming it updates rather than saves. */
+    staged?: boolean;
     onSave: (data: CreateEntryTypeInput | UpdateEntryTypeInput, isNew: boolean) => void;
     onClose: () => void;
     isSaving?: boolean;
     error?: string | null;
+    /** A note above the kept form that the last save's outcome is unknown, and how to retry. */
+    warning?: string | null;
 }
-export declare function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, existingEntryTypeNames, onSave, onClose, isSaving, error, }: EntryTypeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, existingEntryTypeNames, staged, onSave, onClose, isSaving, error, warning, }: EntryTypeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/schema-editor/EntryTypeEditor.js

@@ -9,14 +9,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useCallback, useEffect } from 'react';
 import { Modal, Stack, TextInput, Select, Switch, NumberInput, Group, Button, Text, Alert, Tooltip, } from '@mantine/core';
-import { IconAlertCircle, IconLock } from '@tabler/icons-react';
+import { IconAlertCircle, IconAlertTriangle, IconLock } from '@tabler/icons-react';
 const FORMAT_OPTIONS = [
     { value: 'json', label: 'JSON' },
     { value: 'yaml', label: 'YAML' },
     { value: 'md', label: 'Markdown' },
     { value: 'mdx', label: 'MDX' },
 ];
-export function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, existingEntryTypeNames = [], onSave, onClose, isSaving = false, error = null, }) {
+export function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, existingEntryTypeNames = [], staged = false, onSave, onClose, isSaving = false, error = null, warning = null, }) {
     const isEditMode = editingEntryType !== null;
     const usageCount = editingEntryType?.usageCount ?? 0;
     const isLocked = isEditMode && usageCount > 0;
@@ -29,6 +29,9 @@ export function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, ex
         maxItems: undefined,
     });
     const [validationError, setValidationError] = useState(null);
+    // A refresh hands over a new `availableSchemas` array after every schema change; keying the reset
+    // on its first value rather than its identity keeps what the user is typing.
+    const defaultSchema = availableSchemas[0] || '';
     /* eslint-disable react-hooks/set-state-in-effect -- intentional: sync form state from props on open */
     useEffect(() => {
         if (isOpen) {
@@ -47,14 +50,14 @@ export function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, ex
                     name: '',
                     label: '',
                     format: 'json',
-                    schema: availableSchemas[0] || '',
+                    schema: defaultSchema,
                     default: false,
                     maxItems: undefined,
                 });
             }
             setValidationError(null);
         }
-    }, [isOpen, editingEntryType, availableSchemas]);
+    }, [isOpen, editingEntryType, defaultSchema]);
     /* eslint-enable react-hooks/set-state-in-effect */
     const updateField = useCallback((field, value) => {
         setFormData((prev) => ({ ...prev, [field]: value }));
@@ -128,7 +131,9 @@ export function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, ex
         label: key,
     }));
     const displayError = error || validationError;
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: isEditMode ? `Edit Entry Type: ${editingEntryType?.name}` : 'Add Entry Type', size: "md", children: _jsxs(Stack, { gap: "md", children: [displayError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Error", withCloseButton: true, onClose: () => setValidationError(null), children: displayError })), _jsx(TextInput, { label: "Name", description: "Machine-readable identifier (e.g., post, page, article)", placeholder: "post", value: formData.name, onChange: (e) => updateField('name', e.target.value), disabled: isEditMode, required: !isEditMode }), _jsx(TextInput, { label: "Label", description: "Human-readable display name", placeholder: "Blog Post", value: formData.label, onChange: (e) => updateField('label', e.target.value) }), _jsx(Tooltip, { label: isLocked
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: isEditMode
+            ? `Edit entry type: ${editingEntryType?.label || editingEntryType?.name}`
+            : 'Add entry type', size: "md", children: _jsxs(Stack, { gap: "md", children: [warning && !displayError && (_jsx(Alert, { icon: _jsx(IconAlertTriangle, { size: 16 }), color: "yellow", title: "No answer from the server", children: warning })), displayError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", title: "Error", withCloseButton: true, onClose: () => setValidationError(null), children: displayError })), _jsx(TextInput, { label: "Name", description: "Machine-readable identifier (e.g., post, page, article)", placeholder: "e.g. post", value: formData.name, onChange: (e) => updateField('name', e.target.value), disabled: isEditMode, required: !isEditMode }), _jsx(TextInput, { label: "Label", description: "Human-readable display name", placeholder: "e.g. Blog post", value: formData.label, onChange: (e) => updateField('label', e.target.value) }), _jsx(Tooltip, { label: isLocked
                         ? `Cannot change format: ${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} use this type`
                         : '', disabled: !isLocked, withinPortal: true, children: _jsx(Select, { label: "Format", description: isLocked
                             ? `Locked (${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} exist)`
@@ -136,5 +141,5 @@ export function EntryTypeEditor({ isOpen, editingEntryType, availableSchemas, ex
                         ? `Cannot change schema: ${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} use this type`
                         : '', disabled: !isLocked, withinPortal: true, children: _jsx(Select, { label: "Schema", description: isLocked
                             ? `Locked (${usageCount} ${usageCount === 1 ? 'entry' : 'entries'} exist)`
-                            : 'Field definitions for this entry type', data: schemaOptions, value: formData.schema, onChange: (value) => value && updateField('schema', value), searchable: true, required: true, placeholder: "Select a schema", disabled: isLocked, rightSection: isLocked ? _jsx(IconLock, { size: 14 }) : undefined }) }), _jsx(Switch, { label: "Default entry type", description: "Use this type when adding new items to the collection", checked: formData.default, onChange: (e) => updateField('default', e.currentTarget.checked) }), _jsx(NumberInput, { label: "Max Items", description: "Limit number of items (leave empty for unlimited, use 1 for singleton-like behavior)", placeholder: "Unlimited", value: formData.maxItems ?? '', onChange: (value) => updateField('maxItems', typeof value === 'number' ? value : undefined), min: 1, allowNegative: false, allowDecimal: false }), formData.maxItems === 1 && (_jsx(Text, { size: "xs", c: "dimmed", children: "With maxItems=1, this entry type behaves like a singleton (e.g., homepage, settings)" })), _jsxs(Group, { justify: "flex-end", gap: "sm", mt: "md", children: [_jsx(Button, { variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { onClick: handleSave, loading: isSaving, children: isEditMode ? 'Save Changes' : 'Add Entry Type' })] })] }) }));
+                            : 'Field definitions for this entry type', data: schemaOptions, value: formData.schema, onChange: (value) => value && updateField('schema', value), searchable: true, required: true, placeholder: "Select a schema", disabled: isLocked, rightSection: isLocked ? _jsx(IconLock, { size: 14 }) : undefined }) }), _jsx(Switch, { label: "Default entry type", description: "Use this type when adding new items to the collection", checked: formData.default, onChange: (e) => updateField('default', e.currentTarget.checked) }), _jsx(NumberInput, { label: "Max items", description: "Limit number of items (leave empty for unlimited, use 1 for singleton-like behavior)", placeholder: "Unlimited", value: formData.maxItems ?? '', onChange: (value) => updateField('maxItems', typeof value === 'number' ? value : undefined), min: 1, allowNegative: false, allowDecimal: false }), formData.maxItems === 1 && (_jsx(Text, { size: "xs", c: "dimmed", children: "With maxItems=1, this entry type behaves like a singleton (e.g., homepage, settings)" })), _jsxs(Group, { justify: "flex-end", gap: "sm", mt: "md", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSave, loading: isSaving, children: isEditMode ? (staged ? 'Update entry type' : 'Save entry type') : 'Add entry type' })] })] }) }));
 }

package/dist/editor/schema-editor/collection-draft.d.ts

@@ -0,0 +1,22 @@
+import type { LogicalPath } from '../../paths/types.js';
+import type { CreateCollectionInput, UpdateCollectionInput } from '../../schema/schema-store-types.js';
+import type { EditorCollection } from '../Editor.js';
+/**
+ * What was sent by a collection create or details save that got no answer, so the dialog can fill
+ * it in again. `Editor.tsx` keeps it until the dialog's opener reads it landed, a save of the same
+ * thing succeeds, or the user discards it.
+ */
+export type CollectionDraft = {
+    branch: string;
+} & ({
+    kind: 'create';
+    input: CreateCollectionInput;
+} | {
+    kind: 'details';
+    collectionPath: LogicalPath;
+    updates: UpdateCollectionInput;
+});
+/** The directory name in a logical path, without its embedded id ("posts.abc123" -> "posts"). */
+export declare function slugOf(logicalPath: LogicalPath): string;
+/** Whether `collections`, read from the draft's branch, show the draft's write. */
+export declare function collectionDraftLanded(collections: readonly EditorCollection[], draft: CollectionDraft): boolean;