canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/components/EditorRail.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { ActionIcon, Menu, Stack, Text, Tooltip, VisuallyHidden } from '@mantine/core';
+import { useMergedRef } from '@mantine/hooks';
+import { IconActivity, IconExternalLink, IconFiles, IconGitBranch, IconInfoCircle, IconLayoutColumns, IconLayoutRows, IconLogout, IconMessageCircle, IconPhoto, IconSearch, IconSettings, IconUserCircle, } from '@tabler/icons-react';
+import { ActivityRail, RailButton } from '../shell/ActivityRail.js';
+import { useMenuItemFocusReturn } from '../utils/focus-return.js';
+import { CANOPYCMS_VERSION } from '../../version.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+const ABOUT_URL = 'https://github.com/safeinsights/canopycms';
+/**
+ * @internal Exported for tests. The Settings button and its menu of `items`; with none, no
+ * button, since a menu that opens empty offers nothing.
+ */
+export function SettingsMenu({ items, toggleRef, }) {
+    const [opened, setOpened] = useState(false);
+    const toggle = useRef(null);
+    const mergedRef = useMergedRef(toggle, toggleRef);
+    const menuFocus = useMenuItemFocusReturn(toggle);
+    if (items.length === 0)
+        return null;
+    return (_jsxs(Menu, { shadow: "md", width: 220, position: "right-end", opened: opened, onChange: setOpened, ...menuFocus.menu, children: [_jsx(Menu.Target, { children: _jsx(RailButton, { railId: "settings", label: "Settings", icon: _jsx(IconSettings, { size: 20 }), tooltipDisabled: opened, ref: mergedRef, "data-testid": "settings-button" }) }), _jsx(Menu.Dropdown, { "data-testid": "settings-menu", ...menuFocus.dropdown, children: items })] }));
+}
+const LAYOUTS = {
+    side: {
+        name: 'side by side',
+        title: 'Side by side layout',
+        other: 'stacked',
+        Icon: IconLayoutColumns,
+    },
+    stacked: { name: 'stacked', title: 'Stacked layout', other: 'side', Icon: IconLayoutRows },
+};
+/** One button that shows the current layout and switches to the other. */
+function LayoutButton({ layout, onChange, blocked = false, }) {
+    const [switchedTo, setSwitchedTo] = useState('');
+    const { name, other, Icon } = LAYOUTS[layout];
+    return (_jsxs(_Fragment, { children: [_jsx(RailButton, { railId: "layout", label: `Switch to ${LAYOUTS[other].name} layout (now ${name})`, icon: _jsx(Icon, { size: 20 }), disabledReason: blocked ? 'Restore the preview to change the layout.' : undefined, "data-testid": "rail-layout-button", "data-layout": layout, onClick: () => {
+                    onChange(other);
+                    setSwitchedTo(LAYOUTS[other].title);
+                } }), _jsx(VisuallyHidden, { role: "status", "data-testid": "rail-layout-status", children: switchedTo })] }));
+}
+const monogram = (title) => Array.from(title.trim())[0]?.toUpperCase() ?? '?';
+/** The editor's activity rail: what `ActivityRail` lays out, wired to the editor's surfaces. */
+export function EditorRail({ siteTitle, onHomeOpen, contentPanelOpen, contentPanelId, onContentToggle, onQuickOpen, quickOpenShortcut, quickOpenKeys, branchesOpen, onBranchesOpen, onCommentsOpen, commentsOpen, unresolvedCommentCount, mediaLibraryOpen, onMediaLibraryOpen, mediaButtonRef, layout, onLayoutChange, layoutBlocked, onPermissionManagerOpen, onGroupManagerOpen, onSystemHealthOpen, settingsToggleRef, AccountComponent, onAccountClick, onLogoutClick, }) {
+    const adminItems = [
+        onPermissionManagerOpen && (_jsx(Menu.Item, { "data-testid": "settings-menu-permissions", onClick: onPermissionManagerOpen, children: "Manage permissions" }, "permissions")),
+        onGroupManagerOpen && (_jsx(Menu.Item, { "data-testid": "settings-menu-groups", onClick: onGroupManagerOpen, children: "Manage groups" }, "groups")),
+        onSystemHealthOpen && (_jsx(Menu.Item, { "data-testid": "settings-menu-system-health", leftSection: _jsx(IconActivity, { size: 14 }), onClick: onSystemHealthOpen, children: "System health" }, "system-health")),
+    ].filter((item) => !!item);
+    // Every user gets the version, which bug reports need, so the menu is never empty today.
+    const settingsItems = [
+        ...(adminItems.length > 0
+            ? [
+                _jsx(Menu.Label, { children: "Settings" }, "admin"),
+                ...adminItems,
+                _jsx(Menu.Divider, {}, "divider"),
+            ]
+            : []),
+        _jsx(Menu.Label, { "data-testid": "settings-menu-version", children: `CanopyCMS ${CANOPYCMS_VERSION}` }, "version"),
+        _jsxs(Menu.Item, { component: "a", href: ABOUT_URL, target: "_blank", rel: "noopener noreferrer", "data-testid": "settings-menu-about", leftSection: _jsx(IconInfoCircle, { size: 14 }), rightSection: _jsx(IconExternalLink, { size: 14, "aria-hidden": true }), children: ["About CanopyCMS", _jsx(VisuallyHidden, { component: "span", children: " (opens in a new tab)" })] }, "about"),
+    ];
+    const commentsLabel = unresolvedCommentCount > 0 ? `Comments, ${unresolvedCommentCount} unresolved` : 'Comments';
+    return (_jsx(ActivityRail, { top: _jsxs(_Fragment, { children: [_jsx(RailButton, { railId: "home", label: `Open the first entry of ${siteTitle}`, icon: _jsx(Text, { component: "span", fw: 700, size: "md", "aria-hidden": true, children: monogram(siteTitle) }), tinted: true, "data-testid": "rail-home-button", onClick: onHomeOpen }), _jsx(RailButton, { railId: "content", label: "Content", icon: _jsx(IconFiles, { size: 20 }), active: contentPanelOpen, "aria-expanded": contentPanelOpen, "aria-controls": contentPanelOpen ? contentPanelId : undefined, "data-testid": "content-panel-toggle", onClick: onContentToggle }), _jsx(RailButton, { railId: "search", label: EDITOR_ACTIONS.openEntry, shortcut: quickOpenShortcut, "aria-keyshortcuts": quickOpenKeys, icon: _jsx(IconSearch, { size: 20 }), "aria-haspopup": "dialog", "data-testid": "rail-search-button", onClick: onQuickOpen }), _jsx(RailButton, { railId: "branches", label: "Branches", icon: _jsx(IconGitBranch, { size: 20 }), active: branchesOpen, "aria-haspopup": "dialog", "data-testid": "rail-branches-button", onClick: onBranchesOpen }), onCommentsOpen && (_jsx(RailButton, { railId: "comments", label: commentsLabel, icon: _jsx(IconMessageCircle, { size: 20 }), active: commentsOpen, count: unresolvedCommentCount, countTestId: "comments-unresolved-count", "aria-haspopup": "dialog", "data-testid": "comments-button", onClick: onCommentsOpen })), _jsx(RailButton, { railId: "media", label: "Media library", icon: _jsx(IconPhoto, { size: 20 }), active: mediaLibraryOpen, "aria-haspopup": "dialog", "data-testid": "media-library-button", ref: mediaButtonRef, onClick: onMediaLibraryOpen })] }), bottom: _jsxs(_Fragment, { children: [_jsx(LayoutButton, { layout: layout, onChange: onLayoutChange, blocked: layoutBlocked }), _jsx(SettingsMenu, { items: settingsItems, toggleRef: settingsToggleRef })] }), account: AccountComponent ? (_jsx(AccountComponent, {})) : onAccountClick || onLogoutClick ? (_jsxs(Stack, { gap: 6, align: "center", children: [onAccountClick && (_jsx(Tooltip, { label: "Account", position: "right", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "lg", radius: "md", "aria-label": "Account", onClick: onAccountClick, children: _jsx(IconUserCircle, { size: 20 }) }) })), onLogoutClick && (_jsx(Tooltip, { label: "Sign out", position: "right", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "lg", radius: "md", "aria-label": "Sign out", onClick: onLogoutClick, children: _jsx(IconLogout, { size: 20 }) }) }))] })) : undefined }));
+}

package/dist/editor/components/EntryBreadcrumb.d.ts

@@ -0,0 +1,33 @@
+import { type Ref } from 'react';
+import type { BreadcrumbSegment } from '../editor-utils.js';
+export interface EntryBreadcrumbProps {
+    /** The crumbs before the entry's own, from `buildBreadcrumbSegments`. */
+    segments: BreadcrumbSegment[];
+    /** The open entry's label; undefined when no entry is open. */
+    entryLabel: string | undefined;
+    /** The open entry has unsaved changes. */
+    entryDirty: boolean;
+    /** Why the open entry or its branch is read-only; set, the "Read-only" chip shows. */
+    readOnlyReason?: string;
+    onAllContent: () => void;
+    onCollection: (collectionPath: string) => void;
+    onRefresh: () => void;
+    onDiscard: () => void;
+    /** With `onDelete`, offers "Rename…" and "Delete entry"; absent where a path rule refuses them. */
+    onRename?: () => void;
+    onDelete?: () => void;
+    refreshBlockedReason?: string;
+    discardBlockedReason?: string;
+    /** Why the entry can't be renamed or deleted now. */
+    changeBlockedReason?: string;
+    /** The entry menu's trigger, which stands in for a menu item that opened something. */
+    entryMenuRef?: Ref<HTMLButtonElement>;
+    /** The "All content" crumb, where focus goes once the open entry is gone. */
+    allContentRef?: Ref<HTMLButtonElement>;
+}
+/**
+ * Where the open entry sits: "All content" opens the content panel, a collection crumb reveals
+ * that collection in it, and the entry's own crumb is current and opens the entry menu. Crumbs
+ * shrink and truncate before the entry's own does.
+ */
+export declare function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReason, onAllContent, onCollection, onRefresh, onDiscard, onRename, onDelete, refreshBlockedReason, discardBlockedReason, changeBlockedReason, entryMenuRef, allContentRef, }: EntryBreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EntryBreadcrumb.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Badge, Box, Button, Group, Menu, Text, Tooltip, VisuallyHidden } from '@mantine/core';
+import { useMergedRef } from '@mantine/hooks';
+import { IconChevronDown, IconChevronRight, IconLock } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { DestructiveMenuItem } from './DestructiveMenuItem.js';
+import { ReasonedMenuItem } from './ReasonedMenuItem.js';
+import { useMenuItemFocusReturn } from '../utils/focus-return.js';
+/** Whether the element's text is cut short, kept current as it resizes. */
+function useTruncated(label) {
+    const ref = useRef(null);
+    const [truncated, setTruncated] = useState(false);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const check = () => setTruncated(el.scrollWidth > el.clientWidth);
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [label]);
+    return [ref, truncated];
+}
+const crumbText = (label, ref) => (_jsx(Text, { ref: ref, span: true, inherit: true, truncate: "end", display: "block", children: label }));
+/** A cut-short crumb shows its full label in a Tooltip, on hover and on focus. */
+function CrumbTooltip({ label, truncated, children, }) {
+    return (_jsx(Tooltip, { label: label, disabled: !truncated, events: { hover: true, focus: true, touch: false }, children: children }));
+}
+function CollectionCrumb({ label, onClick, buttonRef, }) {
+    const [ref, truncated] = useTruncated(label);
+    return (_jsx(CrumbTooltip, { label: label, truncated: truncated, children: _jsx(Button, { ref: buttonRef, variant: "subtle", color: "gray", size: "compact-sm", fw: 400, miw: 0, maw: 180, onClick: onClick, "data-testid": "breadcrumb-segment", styles: { label: { minWidth: 0 } }, children: crumbText(label, ref) }) }));
+}
+const separator = (_jsx(IconChevronRight, { size: 14, "aria-hidden": "true", style: { flexShrink: 0, color: 'var(--mantine-color-dimmed)' } }));
+/**
+ * Where the open entry sits: "All content" opens the content panel, a collection crumb reveals
+ * that collection in it, and the entry's own crumb is current and opens the entry menu. Crumbs
+ * shrink and truncate before the entry's own does.
+ */
+export function EntryBreadcrumb({ segments, entryLabel, entryDirty, readOnlyReason, onAllContent, onCollection, onRefresh, onDiscard, onRename, onDelete, refreshBlockedReason, discardBlockedReason, changeBlockedReason, entryMenuRef, allContentRef, }) {
+    const trigger = useRef(null);
+    const triggerRef = useMergedRef(trigger, entryMenuRef);
+    const menuFocus = useMenuItemFocusReturn(trigger);
+    const [entryLabelRef, entryTruncated] = useTruncated(entryLabel ?? '');
+    return (_jsxs(Group, { gap: "xs", wrap: "nowrap", miw: 0, children: [_jsx(Box, { component: "nav", "aria-label": "Breadcrumb", miw: 0, 
+                // Clips crumbs that overflow, padded by the focus ring's reach so the ring is not clipped.
+                style: { flex: '0 1 auto', overflow: 'hidden', padding: 4, margin: -4 }, children: _jsxs(Group, { component: "ol", gap: 2, wrap: "nowrap", miw: 0, style: { listStyle: 'none', margin: 0, padding: 0 }, children: [segments.map((segment, index) => (_jsxs(Group, { component: "li", gap: 2, wrap: "nowrap", miw: 0, 
+                            // Collections give up their width long before the entry's own crumb does.
+                            style: { flex: '0 100 auto' }, children: [index > 0 && separator, segment.folder ? (_jsx(Text, { size: "sm", c: "dimmed", px: 4, miw: 0, truncate: "end", children: segment.label })) : (_jsx(CollectionCrumb, { label: segment.label, buttonRef: index === 0 ? allContentRef : undefined, onClick: () => segment.collectionPath ? onCollection(segment.collectionPath) : onAllContent() }))] }, `${segment.label}-${index}`))), _jsxs(Group, { component: "li", gap: 2, wrap: "nowrap", miw: 64, style: { flex: '0 1 auto' }, children: [separator, entryLabel === undefined ? (_jsx(Text, { size: "sm", c: "dimmed", px: 4, "data-testid": "file-dropdown-button", children: "No entry open" })) : (_jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-start", ...menuFocus.menu, children: [_jsx(CrumbTooltip, { label: entryLabel, truncated: entryTruncated, children: _jsx(Menu.Target, { children: _jsxs(Button, { ref: triggerRef, variant: "subtle", color: "gray", size: "compact-sm", fw: 600, miw: 0, maw: "100%", "aria-current": "page", rightSection: _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), "data-testid": "file-dropdown-button", styles: { label: { minWidth: 0, gap: 6 } }, children: [crumbText(entryLabel, entryLabelRef), entryDirty && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "span", "aria-hidden": "true", w: 8, h: 8, style: {
+                                                                        borderRadius: '50%',
+                                                                        flexShrink: 0,
+                                                                        background: 'var(--mantine-color-text)',
+                                                                    }, "data-testid": "entry-unsaved-dot" }), _jsx(VisuallyHidden, { component: "span", children: ", unsaved changes" })] }))] }) }) }), _jsxs(Menu.Dropdown, { ...menuFocus.dropdown, children: [_jsx(ReasonedMenuItem, { onClick: onRefresh, blockedReason: refreshBlockedReason, "data-testid": "refresh-entry-menu-item", children: EDITOR_ACTIONS.refreshFromServer }), _jsx(ReasonedMenuItem, { "data-testid": "discard-file-draft-menu-item", onClick: onDiscard, blockedReason: discardBlockedReason, children: "Discard changes" }), onRename && onDelete && (_jsxs(_Fragment, { children: [_jsx(Menu.Divider, {}), _jsx(ReasonedMenuItem, { onClick: onRename, blockedReason: changeBlockedReason, "data-testid": "entry-menu-rename", children: "Rename\u2026" }), _jsx(DestructiveMenuItem, { onClick: onDelete, blockedReason: changeBlockedReason, "data-testid": "entry-menu-delete", children: "Delete entry" })] }))] })] }))] })] }) }), readOnlyReason && (_jsx(Tooltip, { label: readOnlyReason, multiline: true, maw: 300, children: _jsxs(Badge, { variant: "light", color: "gray", radius: "sm", leftSection: _jsx(IconLock, { size: 12, "aria-hidden": "true" }), style: { flexShrink: 0, textTransform: 'none' }, "data-testid": "read-only-chip", children: ["Read-only", _jsxs(VisuallyHidden, { component: "span", children: [". ", readOnlyReason] })] }) }))] }));
+}

package/dist/editor/components/EntryCreateModal.d.ts

@@ -1,21 +1,26 @@
+import type { EntryTypeUnavailable } from '../../config/index.js';
 export interface EntryType {
     name: string;
     label?: string;
     format: 'json' | 'md' | 'mdx' | 'yaml';
     default?: boolean;
     maxItems?: number;
+    /** An unavailable type is never offered: it has no schema to create an entry against. */
+    unavailable?: EntryTypeUnavailable;
+    /** Data path of the field that titles an entry of this type; its presence adds the Title input. */
+    titleField?: readonly string[];
 }
 export interface EntryCreateModalProps {
     /** Whether the modal is open */
     isOpen: boolean;
     /** Collection name for display */
     collectionLabel: string;
-    /** Available entry types (if multiple, show selector) */
+    /** The collection's entry types (if more than one is available, show selector) */
     entryTypes: EntryType[];
     /** Pre-selected entry type (if specified) */
     selectedEntryTypeName?: string;
-    /** Called when create is clicked */
-    onCreate: (slug: string, entryTypeName: string) => Promise<void>;
+    /** Called when the form is submitted; `title` is given only for a type with a `titleField`. */
+    onCreate: (slug: string, entryTypeName: string, title?: string) => Promise<void>;
     /** Called when modal is closed */
     onClose: () => void;
     /** Whether a create operation is in progress */
@@ -25,10 +30,10 @@ export interface EntryCreateModalProps {
     /**
      * Slugs already taken in the target collection (from the already-loaded
      * entries list). Lets the client flag an obvious collision early with a
-     * clear message; the server is still the authority, and without this
-     * check an entry type with no required fields would silently succeed via
-     * an update path instead of erroring.
+     * clear message; the server is still the authority.
      */
     existingSlugs?: Set<string>;
+    /** The URL path the entry will be served at, shown under the slug; undefined when it has no page. */
+    previewPath?: (slug: string, entryTypeName: string) => string | undefined;
 }
-export declare function EntryCreateModal({ isOpen, collectionLabel, entryTypes, selectedEntryTypeName, onCreate, onClose, isCreating, error, existingSlugs, }: EntryCreateModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntryCreateModal({ isOpen, collectionLabel, entryTypes: allEntryTypes, selectedEntryTypeName, onCreate, onClose, isCreating, error, existingSlugs, previewPath, }: EntryCreateModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EntryCreateModal.js

@@ -1,24 +1,36 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Modal for creating a new entry: replaces window.prompt with entry-type selection, slug entry, and validation. */
+/** Modal for adding an entry: entry-type selection, a title that seeds the slug, and the slug. */
 import { useState, useEffect, useRef } from 'react';
 import { Modal, Stack, TextInput, Group, Button, Alert, Text, Select } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
-import { parseSlug } from '../../paths/validation.js';
-/** Slug the form is seeded with each time the modal opens. */
-const DEFAULT_SLUG = 'untitled';
-export function EntryCreateModal({ isOpen, collectionLabel, entryTypes, selectedEntryTypeName, onCreate, onClose, isCreating = false, error = null, existingSlugs, }) {
+import { slugFromTitle, validateEntrySlug } from '../slug.js';
+import { unavailableSchemaRefs } from '../unavailable-entry-type.js';
+import { UnavailableTypeMessage } from './UnavailableTypeMessage.js';
+export function EntryCreateModal({ isOpen, collectionLabel, entryTypes: allEntryTypes, selectedEntryTypeName, onCreate, onClose, isCreating = false, error = null, existingSlugs, previewPath, }) {
+    const entryTypes = allEntryTypes.filter((et) => !et.unavailable);
+    const skippedSchemaRefs = unavailableSchemaRefs(allEntryTypes);
+    // Only when nothing is left to create: a collection with some usable types shows them alone.
+    const nothingToCreate = entryTypes.length === 0 && skippedSchemaRefs.length > 0;
+    // A collection that holds only collections has no entry type to add, available or not.
+    const noEntryTypes = allEntryTypes.length === 0;
     const getDefaultEntryTypeName = () => {
-        if (selectedEntryTypeName)
+        const selectedIsUnavailable = allEntryTypes.some((et) => et.name === selectedEntryTypeName && et.unavailable);
+        if (selectedEntryTypeName && !selectedIsUnavailable)
             return selectedEntryTypeName;
         if (entryTypes.length === 1)
             return entryTypes[0].name;
         const defaultType = entryTypes.find((et) => et.default);
         return defaultType?.name || entryTypes[0]?.name || '';
     };
-    const [slug, setSlug] = useState(DEFAULT_SLUG);
+    const [title, setTitle] = useState('');
+    const [slug, setSlug] = useState('');
+    // Once the slug is typed by hand, the title stops rewriting it.
+    const [slugEdited, setSlugEdited] = useState(false);
+    const [titleTouched, setTitleTouched] = useState(false);
+    const [slugTouched, setSlugTouched] = useState(false);
+    const [submitAttempted, setSubmitAttempted] = useState(false);
     const [entryTypeName, setEntryTypeName] = useState(getDefaultEntryTypeName());
-    const [validationError, setValidationError] = useState(null);
     // Seeds the form once per open, on the closed -> open transition. Keys on
     // `isOpen` alone, not on `entryTypes`/`selectedEntryTypeName`: `entryTypes`
     // is an array callers build inline, a fresh identity on every parent
@@ -28,65 +40,47 @@ export function EntryCreateModal({ isOpen, collectionLabel, entryTypes, selected
     const wasOpenRef = useRef(false);
     useEffect(() => {
         if (isOpen && !wasOpenRef.current) {
-            setSlug(DEFAULT_SLUG);
+            setTitle('');
+            setSlug('');
+            setSlugEdited(false);
+            setTitleTouched(false);
+            setSlugTouched(false);
+            setSubmitAttempted(false);
             setEntryTypeName(getDefaultEntryTypeName());
-            setValidationError(null);
         }
         wasOpenRef.current = isOpen;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    // Validate slug format.
-    //
-    // Delegates to `parseSlug` rather than restating its rule: the server refuses to CREATE an
-    // entry whose slug fails it (api/content.ts and ContentStore.write's [SLUG] guards), and the
-    // static build fails outright on one that slipped through (static/index.ts's
-    // assertRoutableSlugs). A second, hand-maintained copy of the charset/length/separator rules
-    // here could only ever drift out of agreement with the boundary that actually decides.
-    //
-    // Imported from '../../paths/validation.js' directly, NOT the `paths` barrel, which pulls
-    // node:fs into the browser bundle (pnpm lint:bundle enforces this).
-    const validateSlug = (value) => {
-        if (!value.trim()) {
-            return 'Slug cannot be empty';
-        }
-        const parsed = parseSlug(value);
-        if (!parsed.ok) {
-            return parsed.error;
-        }
-        // `parseSlug` lowercases before testing, so it accepts 'My-Post' and hands back 'my-post'.
-        // Keep the field itself strict: the value typed here is what the duplicate check below and
-        // the create request are keyed on, so silently normalizing would let 'My-Post' sail past a
-        // collision with an existing 'my-post' and land as a 409 from the server instead of an
-        // inline message here.
-        if (parsed.slug !== value) {
-            return 'Slug must be lowercase';
-        }
-        if (existingSlugs?.has(value)) {
-            return 'An entry with this slug already exists';
-        }
-        return null;
+    const selectedType = entryTypes.find((et) => et.name === entryTypeName);
+    const typeLabel = selectedType?.label || selectedType?.name || '';
+    const hasTitle = !!selectedType?.titleField;
+    // Errors stay quiet until the user has typed, so a fresh form does not open on a red field.
+    const showErrors = submitAttempted || titleTouched || slugTouched;
+    const slugError = validateEntrySlug(slug, { existingSlugs });
+    const titleError = hasTitle && !title.trim() ? 'Enter a title' : null;
+    const handleTitleChange = (value) => {
+        setTitle(value);
+        setTitleTouched(true);
+        if (!slugEdited)
+            setSlug(slugFromTitle(value));
     };
     const handleSlugChange = (value) => {
         setSlug(value);
-        setValidationError(validateSlug(value));
+        setSlugEdited(true);
+        setSlugTouched(true);
     };
-    const handleCreate = async () => {
-        const validation = validateSlug(slug);
-        if (validation) {
-            setValidationError(validation);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (isCreating || !entryTypeName)
             return;
-        }
-        if (!entryTypeName) {
-            setValidationError('Please select an entry type');
+        setSubmitAttempted(true);
+        if (slugError || titleError)
             return;
-        }
-        await onCreate(slug, entryTypeName);
+        await onCreate(slug, entryTypeName, hasTitle ? title.trim() : undefined);
     };
-    const canCreate = !validationError && slug.trim() !== '' && entryTypeName !== '' && !isCreating;
-    const selectedType = entryTypes.find((et) => et.name === entryTypeName);
-    const typeLabel = selectedType?.label || selectedType?.name || '';
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: "Create New Entry" }), size: "md", closeOnClickOutside: !isCreating, closeOnEscape: !isCreating, children: _jsxs(Stack, { gap: "md", "data-testid": "create-entry-modal", children: [error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error })), _jsxs(Text, { size: "sm", c: "dimmed", children: ["Creating in: ", collectionLabel] }), entryTypes.length > 1 && (_jsx(Select, { label: "Entry Type", description: "Select the type of entry to create", value: entryTypeName, onChange: (value) => setEntryTypeName(value || ''), data: entryTypes.map((et) => ({
-                        value: et.name,
-                        label: et.label || et.name,
-                    })), required: true, disabled: isCreating, searchable: true, placeholder: "Select entry type..." })), entryTypes.length === 1 && (_jsxs(Text, { size: "sm", c: "dimmed", children: ["Entry type: ", _jsx("strong", { children: typeLabel })] })), _jsx(TextInput, { label: "Slug", description: "URL-friendly identifier (lowercase, alphanumeric + hyphens)", value: slug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: validationError, placeholder: "my-entry-slug", required: true, disabled: isCreating, "data-autofocus": true, "data-testid": "entry-slug-input" }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Preview: ", _jsx("code", { children: slug })] }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { variant: "subtle", onClick: onClose, disabled: isCreating, children: "Cancel" }), _jsx(Button, { onClick: handleCreate, loading: isCreating, disabled: !canCreate, "data-testid": "create-entry-submit", children: "Create" })] })] }) }));
+    const slugPath = previewPath?.(slug || 'your-slug', entryTypeName);
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsxs(Text, { fw: 600, children: ["Add entry to ", collectionLabel] }), size: "md", closeOnClickOutside: !isCreating, closeOnEscape: !isCreating, children: noEntryTypes ? (_jsxs(Stack, { gap: "md", "data-testid": "create-entry-modal", children: [_jsxs(Alert, { color: "yellow", icon: _jsx(IconAlertCircle, { size: 16 }), "data-testid": "no-entry-types", children: [collectionLabel, " holds only collections, so there is no entry type to add."] }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, children: "Close" }) })] })) : (_jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsxs(Stack, { gap: "md", "data-testid": "create-entry-modal", children: [error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error })), nothingToCreate && (_jsx(Alert, { color: "yellow", icon: _jsx(IconAlertCircle, { size: 16 }), "data-testid": "no-creatable-types", children: _jsx(UnavailableTypeMessage, { schemaRefs: skippedSchemaRefs }) })), entryTypes.length > 1 && (_jsx(Select, { label: "Entry type", value: entryTypeName, onChange: (value) => setEntryTypeName(value || ''), data: entryTypes.map((et) => ({
+                            value: et.name,
+                            label: et.label || et.name,
+                        })), required: true, disabled: isCreating, searchable: true, placeholder: "Select an entry type" })), entryTypes.length === 1 && (_jsxs(Text, { size: "sm", c: "dimmed", children: ["Entry type: ", _jsx("strong", { children: typeLabel })] })), hasTitle && (_jsx(TextInput, { label: "Title", value: title, onChange: (e) => handleTitleChange(e.currentTarget.value), error: showErrors ? titleError : null, required: true, disabled: isCreating, "data-autofocus": true, "data-testid": "entry-title-input" })), _jsx(TextInput, { label: "Slug", description: slugPath ? `URL path: ${slugPath}` : 'Lowercase letters, numbers and hyphens', value: slug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: showErrors ? slugError : null, placeholder: "my-entry-slug", required: true, disabled: isCreating, "data-autofocus": hasTitle ? undefined : true, "data-testid": "entry-slug-input" }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, disabled: isCreating, children: "Cancel" }), _jsx(Button, { size: "sm", type: "submit", loading: isCreating, disabled: !entryTypeName, "data-testid": "create-entry-submit", children: "Add entry" })] })] }) })) }));
 }

package/dist/editor/components/NoEditPermissionNotice.d.ts

@@ -1,10 +1,11 @@
 export interface NoEditPermissionNoticeProps {
-    /** Logical path of the entry the user cannot edit. */
-    entryPath: string;
+    /** Label of the entry the user cannot edit. */
+    entryLabel: string;
 }
 /**
  * Explains why an entry cannot be edited and whom to ask. An entry's `canEdit` is false only
- * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives; a
- * locked or protected branch shows its own banner in the header and a read-only form instead.
+ * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives. A locked
+ * or protected branch instead shows its banner in the header over a read-only form, the rule
+ * `contentReadOnly` in `Editor.tsx` holds.
  */
-export declare function NoEditPermissionNotice({ entryPath }: NoEditPermissionNoticeProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoEditPermissionNotice({ entryLabel }: NoEditPermissionNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/NoEditPermissionNotice.js

@@ -2,10 +2,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Text } from '@mantine/core';
 /**
  * Explains why an entry cannot be edited and whom to ask. An entry's `canEdit` is false only
- * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives; a
- * locked or protected branch shows its own banner in the header and a read-only form instead.
+ * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives. A locked
+ * or protected branch instead shows its banner in the header over a read-only form, the rule
+ * `contentReadOnly` in `Editor.tsx` holds.
  */
-export function NoEditPermissionNotice({ entryPath }) {
+export function NoEditPermissionNotice({ entryLabel }) {
     return (_jsx("div", { role: "status", "data-testid": "no-edit-permission-notice", style: {
             display: 'flex',
             alignItems: 'center',
@@ -13,5 +14,5 @@ export function NoEditPermissionNotice({ entryPath }) {
             height: '100%',
             padding: '0 var(--mantine-spacing-md)',
             textAlign: 'center',
-        }, children: _jsxs(Text, { size: "sm", c: "dimmed", children: ["You don't have edit access to \"", entryPath, "\". Ask a CanopyCMS admin to grant it in Manage Permissions."] }) }));
+        }, children: _jsxs(Text, { size: "sm", c: "dimmed", children: ["You don't have edit access to \"", entryLabel, "\". Ask a CanopyCMS admin to grant it in \"Manage permissions\"."] }) }));
 }

package/dist/editor/components/QuickOpenPalette.d.ts

@@ -0,0 +1,22 @@
+/** @internal Exported for tests. Marks an overlay Mod+P may open over: the palette's own closing dialog. */
+export declare const QUICK_OPEN_REPLACES_ATTR = "data-quick-open-replaces";
+/** @internal Exported for tests and stories. */
+export interface QuickOpenEntry {
+    path: string;
+    label: string;
+    slug?: string;
+    collectionPath?: string;
+    collectionName?: string;
+}
+export interface QuickOpenPaletteProps {
+    opened: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    entries: ReadonlyArray<QuickOpenEntry>;
+    /** Display name for a collection heading; the collection's own name when absent, none when ''. */
+    collectionLabel?: (collectionPath: string) => string | undefined;
+    onSelect: (path: string) => void;
+    /** Names the element that takes focus after the palette closes, for a caller that unmounted the opener. */
+    returnFocusTo?: () => HTMLElement | null;
+}
+export declare function QuickOpenPalette({ opened, onOpen, onClose, entries, collectionLabel, onSelect, returnFocusTo, }: QuickOpenPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/QuickOpenPalette.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Mod+P palette: type part of an entry's title or slug, pick it with the keyboard or mouse. */
+import { useEffect, useMemo, useState } from 'react';
+import { Combobox, Highlight, Modal, ScrollArea, Text, TextInput, useCombobox } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { filterEntries, groupEntriesByCollection } from '../entry-search.js';
+import { modKeyLabel } from '../platform.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { FOCUS_RETURN_ATTR, focusIfIdle } from '../utils/focus-return.js';
+/** @internal Exported for tests. Marks an overlay Mod+P may open over: the palette's own closing dialog. */
+export const QUICK_OPEN_REPLACES_ATTR = 'data-quick-open-replaces';
+/**
+ * True while a modal or drawer (not a popover) is open that `QUICK_OPEN_REPLACES_ATTR` doesn't mark.
+ * Overlays stack in DOM order and the palette's portal precedes the editor's other dialogs, so it
+ * would open hidden under them and take the keyboard from the one in use.
+ */
+const otherOverlayOpen = () => Array.from(document.querySelectorAll('[role="dialog"][aria-modal="true"]')).some((dialog) => !dialog.closest(`[${QUICK_OPEN_REPLACES_ATTR}]`));
+/** Options rendered at once; the rest are reached by typing more. */
+const MAX_OPTIONS = 50;
+export function QuickOpenPalette({ opened, onOpen, onClose, entries, collectionLabel, onSelect, returnFocusTo, }) {
+    // `[]` ignores no tags and `true` fires from contenteditable, so the shortcut works from inside
+    // a text field or the MDX editor.
+    useHotkeys([
+        [
+            'mod+P',
+            (event) => {
+                // Mantine's `mod` is Ctrl or ⌘ everywhere; on macOS Ctrl+P moves the caret up a line.
+                if (modKeyLabel() === '⌘' && !event.metaKey)
+                    return;
+                // Keeps the browser's print dialog shut, even when the palette can't open.
+                event.preventDefault();
+                if (!otherOverlayOpen())
+                    onOpen();
+            },
+            { preventDefault: false },
+        ],
+    ], [], true);
+    const [query, setQuery] = useState('');
+    const [wasOpened, setWasOpened] = useState(opened);
+    if (opened !== wasOpened) {
+        setWasOpened(opened);
+        if (!opened)
+            setQuery('');
+    }
+    // Always open: the options are the palette's body, not a dropdown below a field.
+    const combobox = useCombobox({ opened: true });
+    const { selectFirstOption } = combobox;
+    const matches = useMemo(() => filterEntries(entries, query), [entries, query]);
+    const shown = useMemo(() => matches.slice(0, MAX_OPTIONS), [matches]);
+    const groups = useMemo(() => groupEntriesByCollection(shown, collectionLabel), [shown, collectionLabel]);
+    // Enter right after typing opens the best match, so the first option is always armed. Deferred
+    // a tick: on opening, the modal's portal and the options list mount after this effect.
+    useEffect(() => {
+        if (!opened)
+            return;
+        const timer = setTimeout(selectFirstOption, 0);
+        return () => clearTimeout(timer);
+    }, [opened, query, selectFirstOption]);
+    const handleSubmit = (path) => {
+        onSelect(path);
+        onClose();
+    };
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: EDITOR_ACTIONS.openEntry, size: "lg", yOffset: "10vh", returnFocus: !returnFocusTo, onExitTransitionEnd: () => returnFocusTo && focusIfIdle(returnFocusTo()), [QUICK_OPEN_REPLACES_ATTR]: true, [FOCUS_RETURN_ATTR]: true, children: _jsxs(Combobox, { store: combobox, onOptionSubmit: handleSubmit, children: [_jsx(Combobox.EventsTarget, { withExpandedAttribute: true, "data-mantine-stop-propagation": false, children: _jsx(TextInput, { role: "combobox", "aria-label": "Search entries", "aria-autocomplete": "list", placeholder: "Type an entry title or slug", leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), value: query, onChange: (event) => setQuery(event.currentTarget.value), "data-autofocus": true, "data-testid": "quick-open-input" }) }), _jsx(Combobox.Options, { mt: "sm", "aria-label": "Entries", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "scroll", scrollbars: "y", children: matches.length === 0 ? (_jsxs(Text, { size: "sm", c: "dimmed", p: "xs", "data-testid": "quick-open-empty", children: ["No entries match \u201C", query, "\u201D."] })) : (groups.map((group, index) => (_jsx(Combobox.Group, { label: group.heading || undefined, children: group.entries.map((entry) => (_jsxs(Combobox.Option, { value: entry.path, "data-testid": "quick-open-option", children: [_jsx(Highlight, { highlight: query.trim(), size: "sm", children: entry.label }), entry.slug && _jsx(Text, { size: "xs", children: entry.slug })] }, entry.path))) }, index)))) }) }), matches.length > MAX_OPTIONS && (_jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: ["Showing ", MAX_OPTIONS, " of ", matches.length, ". Keep typing to narrow the list."] }))] }) }));
+}

package/dist/editor/components/ReadOnlyDraftNotice.d.ts

@@ -0,0 +1,11 @@
+export interface ReadOnlyDraftNoticeProps {
+    /** The branch never becomes editable again: the protected base branch, or an archived one. */
+    permanentlyReadOnly: boolean;
+    /** Discards the entry's kept draft; the caller confirms first, since the draft is unsaved work. */
+    onDiscard: () => void;
+}
+/**
+ * Says that this entry has a draft the read-only form is not showing. The draft is kept until it
+ * is discarded, so it comes back as the editable value if the branch unlocks.
+ */
+export declare function ReadOnlyDraftNotice({ permanentlyReadOnly, onDiscard }: ReadOnlyDraftNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ReadOnlyDraftNotice.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Group, Stack, Text } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+/**
+ * Says that this entry has a draft the read-only form is not showing. The draft is kept until it
+ * is discarded, so it comes back as the editable value if the branch unlocks.
+ */
+export function ReadOnlyDraftNotice({ permanentlyReadOnly, onDiscard }) {
+    return (_jsx(Alert, { role: "status", icon: _jsx(IconAlertTriangle, { size: 16 }), color: "yellow", variant: "light", "data-testid": "read-only-draft-notice", children: _jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [_jsxs(Stack, { gap: 2, children: [_jsx(Text, { size: "sm", children: "You have unsaved changes from earlier on this read-only branch." }), _jsx(Text, { size: "sm", children: permanentlyReadOnly
+                                ? "This branch won't become editable, so they can only be discarded."
+                                : "They're kept on this device and come back when the branch is editable again." })] }), _jsx(Button, { variant: "default", onClick: onDiscard, children: "Discard changes" })] }) }));
+}

package/dist/editor/components/ReasonedMenuItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type MenuItemProps } from '@mantine/core';
+export interface ReasonedMenuItemProps extends MenuItemProps {
+    /** Why the item can't act now. Set, the item is blocked and shows this beneath its label. */
+    blockedReason?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    'data-testid'?: string;
+    children: React.ReactNode;
+}
+/**
+ * A menu item that stays visible when it cannot act, with its reason beneath the label. Mantine's
+ * Menu drops a `disabled` or `data-disabled` item from its arrow-key order, hiding the reason from
+ * a keyboard user; a blocked item is `aria-disabled` instead and ignores its click.
+ */
+export declare const ReasonedMenuItem: React.FC<ReasonedMenuItemProps>;

package/dist/editor/components/ReasonedMenuItem.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, Text } from '@mantine/core';
+/**
+ * A menu item that stays visible when it cannot act, with its reason beneath the label. Mantine's
+ * Menu drops a `disabled` or `data-disabled` item from its arrow-key order, hiding the reason from
+ * a keyboard user; a blocked item is `aria-disabled` instead and ignores its click.
+ */
+export const ReasonedMenuItem = ({ blockedReason, onClick, children, color, style, ...rest }) => (_jsxs(Menu.Item, { ...rest, color: blockedReason ? undefined : color, c: blockedReason ? 'dimmed' : rest.c, "aria-disabled": blockedReason ? true : undefined, closeMenuOnClick: blockedReason ? false : undefined, style: blockedReason ? { ...style, cursor: 'not-allowed' } : style, onClick: (event) => {
+        if (blockedReason) {
+            event.stopPropagation();
+            return;
+        }
+        onClick?.(event);
+    }, children: [children, blockedReason && (_jsx(Text, { size: "xs", c: "dimmed", component: "span", display: "block", style: { whiteSpace: 'normal' }, children: blockedReason }))] }));

package/dist/editor/components/ReferencedByList.d.ts

@@ -0,0 +1,11 @@
+import type { EntryReferencedBy } from '../../api/entries.js';
+import type { LogicalPath } from '../../paths/types.js';
+export interface ReferencedByListProps {
+    referencedBy: EntryReferencedBy;
+    /** Opens a referencing entry in the editor. */
+    onOpenEntry: (entryPath: LogicalPath) => void;
+}
+/** The delete dialog's message once the server has refused a delete over references. */
+export declare function referencedDeleteMessage({ entries, hiddenCount }: EntryReferencedBy): string;
+/** The entries a delete would leave pointing at nothing, as far as the user may see them. */
+export declare function ReferencedByList({ referencedBy, onOpenEntry }: ReferencedByListProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ReferencedByList.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Box, Stack, Text } from '@mantine/core';
+// `anywhere`, unlike `break-word`, also lowers the min-content width, so an unbroken
+// title or slug narrows to the dialog instead of widening it into a horizontal scroll.
+const wrapAnywhere = { overflowWrap: 'anywhere' };
+const pluralEntries = (n) => `${n} ${n === 1 ? 'entry' : 'entries'}`;
+/** The delete dialog's message once the server has refused a delete over references. */
+export function referencedDeleteMessage({ entries, hiddenCount }) {
+    const count = entries.length + hiddenCount;
+    return (`This entry is referenced by ${count} other ${count === 1 ? 'entry' : 'entries'}. ` +
+        `Deleting it leaves ${count === 1 ? 'that reference' : 'those references'} pointing at ` +
+        'nothing. This cannot be undone.');
+}
+/** The entries a delete would leave pointing at nothing, as far as the user may see them. */
+export function ReferencedByList({ referencedBy, onOpenEntry }) {
+    const { entries, hiddenCount } = referencedBy;
+    // Not Mantine's `List`: its `nowrap` column `inline-flex` items cannot narrow to the dialog.
+    return (_jsxs(Stack, { component: "ul", gap: 6, m: 0, p: 0, style: { listStyle: 'none' }, 
+        // WebKit drops the list role from a `ul` styled `list-style: none`.
+        role: "list", "data-testid": "referenced-by-list", children: [entries.map((entry) => {
+                const via = [
+                    ...(entry.fields.length > 0 ? [entry.fields.join(', ')] : []),
+                    ...(entry.links.length > 0 ? [`linked from ${entry.links.join(', ')}`] : []),
+                ].join('; ');
+                return (_jsxs(Box, { component: "li", children: [_jsx(Anchor, { component: "button", type: "button", size: "sm", ta: "start", style: wrapAnywhere, onClick: () => onOpenEntry(entry.entryPath), children: entry.title }), _jsxs(Text, { size: "xs", c: "dimmed", style: wrapAnywhere, children: ["(", via, ")"] })] }, entry.entryPath));
+            }), hiddenCount > 0 && (_jsx(Box, { component: "li", children: _jsxs(Text, { size: "sm", c: "dimmed", children: [entries.length > 0 ? 'and ' : '', pluralEntries(hiddenCount), " you can't view"] }) }))] }));
+}

package/dist/editor/components/RelativeTime.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TextProps } from '@mantine/core';
+export interface RelativeTimeProps extends Pick<TextProps, 'size' | 'c' | 'fs'> {
+    /** An ISO timestamp. */
+    iso: string;
+    /** Text before the label, such as "Updated ". */
+    prefix?: string;
+}
+/** A relative label; the absolute date is a tooltip, and visually hidden text for a screen reader. */
+export declare const RelativeTime: React.FC<RelativeTimeProps>;