canopycms 0.2.0-int.119 → 0.2.0

package/dist/editor/EntryNavigator.js

@@ -8,6 +8,7 @@ import { matchesEntryQuery } from './entry-search.js';
 import { EDITOR_ACTIONS } from './copy.js';
 import { DestructiveMenuItem } from './components/DestructiveMenuItem.js';
 import { UnsavedMark } from './components/UnsavedMark.js';
+import { BranchRowLock } from './components/BranchRowLock.js';
 import { ReasonedMenuItem } from './components/ReasonedMenuItem.js';
 import { UnavailableTypeMessage } from './components/UnavailableTypeMessage.js';
 const UnavailableTypeRow = ({ schemaRefs }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", align: "flex-start", mt: 4, "data-testid": "unavailable-type-message", children: [_jsx(Box, { c: "orange", style: { display: 'flex', flexShrink: 0, paddingTop: 2 }, children: _jsx(IconAlertTriangle, { size: 14, "aria-hidden": true }) }), _jsx(Text, { size: "xs", c: "orange", children: _jsx(UnavailableTypeMessage, { schemaRefs: schemaRefs }) })] }));
@@ -123,7 +124,7 @@ const stopTreeKeys = (event) => {
         event.stopPropagation();
 };
 const UnsavedDot = ({ label }) => (_jsx(Tooltip, { label: label, withinPortal: true, children: _jsx(UnsavedMark, { role: "img", "aria-label": label, "data-testid": "unsaved-dot" }) }));
-export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, dirtyPaths, revealCollection, onRevealed, }) => {
+export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, readOnlyReason, dirtyPaths, revealCollection, onRevealed, }) => {
     // Shadow the entry-mutation callbacks with undefined when readOnly, so every
     // downstream reference (hasEntryMenu, canReorder, the menu items themselves)
     // sees them as absent rather than threading a readOnly check through each
@@ -476,15 +477,16 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         const status = node.nodeProps?.status;
         const entryMissing = !!node.nodeProps?.missing;
         const entryNoPage = !!node.nodeProps?.noPage;
-        // Collection-level mutation callbacks are nulled when readOnly, same as
-        // the entry-level ones above -- this removes the collection menu button
-        // entirely (hasCollectionMenu below) rather than leaving it enabled.
-        const onAdd = readOnly ? undefined : node.nodeProps?.onAdd;
-        const onEdit = readOnly ? undefined : node.nodeProps?.onEdit;
-        const onAddSubCollection = readOnly
-            ? undefined
-            : node.nodeProps?.onAddSubCollection;
-        const onDelete = readOnly ? undefined : node.nodeProps?.onDelete;
+        // Collection-level mutation callbacks are nulled when readOnly, same as the entry-level ones
+        // above, so hasCollectionMenu is false; a row that would have had a menu shows its lock.
+        const rawOnAdd = node.nodeProps?.onAdd;
+        const rawOnEdit = node.nodeProps?.onEdit;
+        const rawOnAddSubCollection = node.nodeProps?.onAddSubCollection;
+        const rawOnDelete = node.nodeProps?.onDelete;
+        const onAdd = readOnly ? undefined : rawOnAdd;
+        const onEdit = readOnly ? undefined : rawOnEdit;
+        const onAddSubCollection = readOnly ? undefined : rawOnAddSubCollection;
+        const onDelete = readOnly ? undefined : rawOnDelete;
         const entryPath = node.nodeProps?.entryPath;
         const contentId = node.nodeProps?.contentId;
         const parentCollectionPath = node.nodeProps?.parentCollectionPath;
@@ -494,7 +496,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         const isEntry = node.nodeProps?.isEntry;
         const conflictNotice = node.nodeProps?.conflictNotice;
         const unavailableSchemaRefs = node.nodeProps?.unavailableSchemaRefs;
-        // A read-only navigator already says so once, in the branch banner.
+        // A read-only navigator already says writes are refused, so the add-refused line is not repeated.
         const addRefused = !readOnly && !!node.nodeProps?.addRefused;
         const isLeaf = !hasChildren || isEntry;
         const selected = node.value === selectedPath;
@@ -504,26 +506,42 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         // Mantine only provides hasChildren=true if children.length > 0, but we want
         // collections to always be expandable
         const showChevron = hasChildren || Boolean(isCollection);
-        const canReorder = onReorderEntry && contentId && parentCollectionPath && typeof childIndex === 'number';
+        const reorderPosition = contentId && parentCollectionPath && typeof childIndex === 'number';
+        const canReorder = onReorderEntry && reorderPosition;
         const canMoveUp = canReorder && childIndex > 0;
         const canMoveDown = canReorder && typeof totalChildrenCount === 'number' && childIndex < totalChildrenCount - 1;
         // Collections show menu for add/edit/delete actions OR for reordering (subcollections)
         const hasCollectionMenu = isCollection && (onAdd || onEdit || onAddSubCollection || onDelete || canReorder);
         // An unavailable entry cannot be written, so its menu (rename, delete, reorder) is not offered.
         const entryUnavailable = node.nodeProps?.unavailable;
-        // The same holds for an entry this user may not edit. A read-only navigator already says so
-        // once, in the branch banner, so only a lone read-only entry gets its own lock.
-        const entryLocked = !readOnly && !!node.nodeProps?.itemReadOnly;
+        // The same holds for an entry this user may not edit, on any branch: its own lock stays, since a
+        // path rule, not the branch, refuses it, and the branch lock leaves that row's slot empty.
+        const entryLocked = !!node.nodeProps?.itemReadOnly;
         const hasEntryMenu = isEntry &&
             entryPath &&
             !entryUnavailable &&
             !entryLocked &&
             (onDeleteEntry || onRenameEntry || onReorderEntry);
+        // The lock holds the slot where the menu would be, on exactly the rows that would otherwise have
+        // one, so rows never shift. The stylesheet reveals it on the hovered, focused or selected
+        // row (`data-nav-selected`), which keeps touch and keyboard users' route to the reason.
+        const wouldHaveCollectionMenu = isCollection &&
+            !!(rawOnAdd ||
+                rawOnEdit ||
+                rawOnAddSubCollection ||
+                rawOnDelete ||
+                (onReorderEntryProp && reorderPosition));
+        const wouldHaveEntryMenu = isEntry &&
+            !!entryPath &&
+            !entryUnavailable &&
+            !entryLocked &&
+            !!(onDeleteEntryProp || onRenameEntryProp || onReorderEntryProp);
+        const showsLockSlot = readOnly && (wouldHaveCollectionMenu || wouldHaveEntryMenu);
         const showEntryDirtyDot = isEntry && !!entryPath && !!dirtyPaths?.has(entryPath);
         const showCollectionDirtyDot = !isEntry && dirtyCollections.has(node.value);
         const adminItems = onAddSubCollection || onEdit || onDelete;
         const hasCollectionContentItems = onAdd || canReorder;
-        return (_jsxs(Box, { ...elementProps, ref: selected ? selectedNodeRef : undefined, "data-nav-row": true, "data-testid": `entry-nav-item-${testIdSuffix}`, onClick: (event) => {
+        return (_jsxs(Box, { ...elementProps, ref: selected ? selectedNodeRef : undefined, "data-nav-row": true, "data-nav-selected": selected ? '' : undefined, "data-testid": `entry-nav-item-${testIdSuffix}`, onClick: (event) => {
                 elementProps.onClick(event);
                 if (isLeaf && isEntry) {
                     onSelect(node.value);
@@ -566,7 +584,11 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                                                     }, children: "Edit collection\u2026" })), onDelete && (_jsx(DestructiveMenuItem, { leftSection: _jsx(IconTrash, { size: 14 }), onClick: (event) => {
                                                         event.stopPropagation();
                                                         onDelete();
-                                                    }, children: "Delete collection" }))] })] })), hasEntryMenu && (_jsxs(Menu, { shadow: "md", width: 180, withinPortal: true, position: "bottom-end", children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Entry actions", "data-testid": `entry-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onRenameEntry && (_jsxs(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
+                                                    }, children: "Delete collection" }))] })] })), showsLockSlot &&
+                                    (readOnlyReason ? (_jsx(BranchRowLock, { label: isCollection ? 'Collection actions' : 'Entry actions', reason: readOnlyReason })) : (
+                                    // The branch's state is still loading: hold the slot so rows do not shift. It draws
+                                    // nothing, so it needs no reveal.
+                                    _jsx(Box, { w: 18, h: 18, "aria-hidden": true, "data-testid": "branch-lock-pending" }))), hasEntryMenu && (_jsxs(Menu, { shadow: "md", width: 180, withinPortal: true, position: "bottom-end", children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Entry actions", "data-testid": `entry-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onRenameEntry && (_jsxs(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
                                                         event.stopPropagation();
                                                         onRenameEntry(entryPath);
                                                     }, "data-testid": "rename-entry-menu-item", children: [entryNoPage ? EDITOR_ACTIONS.changeSlug : EDITOR_ACTIONS.changeUrl, "\u2026"] })), onReorderEntry && contentId && parentCollectionPath && (_jsxs(_Fragment, { children: [_jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowUp, { size: 14 }), blockedReason: canMoveUp ? undefined : 'Already first', onClick: (event) => {

package/dist/editor/PreviewFrame.d.ts

@@ -15,7 +15,7 @@ export type SiteChromeSupport = 'supported' | 'unsupported' | 'unanswered';
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
  * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, busy, }: {
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, busy, }: {
     src: string;
     path: string;
     data?: unknown;
@@ -44,6 +44,8 @@ export declare const PreviewFrame: ({ src, path, data, isLoading, className, sty
     onReload?: () => void;
     /** Called with what the page's handshake says of the site's header and footer. */
     onSiteChrome?: (support: SiteChromeSupport) => void;
+    /** A preview link's absolute URL, unfollowed; focus follows into the next page unless moved. */
+    onNavigate?: (href: string) => void;
     /** The editor is loading the next page's data: this page stays in view, dimmed and inert. */
     busy?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewFrame.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
+import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_NAVIGATE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
 /**
  * How long after the iframe's `load` the preview has to send its ready message before the frame
  * says live updates are off. Ready can also arrive before `load`, which waits for images too.
@@ -22,6 +22,21 @@ const visuallyHidden = {
 const isMarkPaths = (paths) => Array.isArray(paths) &&
     paths.length <= MARK_REPORT_LIMITS.paths &&
     paths.every((path) => typeof path === 'string' && path.length <= MARK_REPORT_LIMITS.pathLength);
+/** Only http(s) on the preview's origin, so the editor never opens a `javascript:` URL or another site. */
+const isPreviewNavigateMessage = (data, previewOrigin) => {
+    if (typeof data !== 'object' || data === null)
+        return false;
+    const { type, href } = data;
+    if (type !== CANOPY_PREVIEW_NAVIGATE || typeof href !== 'string')
+        return false;
+    try {
+        const url = new URL(href);
+        return (url.protocol === 'http:' || url.protocol === 'https:') && url.origin === previewOrigin;
+    }
+    catch {
+        return false;
+    }
+};
 const sendDraftUpdate = (iframe, message, targetOrigin) => {
     if (!iframe?.contentWindow)
         return;
@@ -36,7 +51,7 @@ const sendDraftUpdate = (iframe, message, targetOrigin) => {
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
  * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, busy = false, }) => {
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, busy = false, }) => {
     const iframeRef = useRef(null);
     // Pin the preview origin from the src prop: outbound messages target it (never '*'),
     // and inbound messages must come from it. An iframe that navigates cross-origin
@@ -51,10 +66,15 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const [retries, setRetries] = useState(0);
     // A new src is a new page, with a handshake of its own.
     const [prevSrc, setPrevSrc] = useState(src);
+    // The frame a followed link was clicked in is replaced, which drops focus to the editor's body.
+    const [followingLink, setFollowingLink] = useState(false);
+    const [focusOnLoad, setFocusOnLoad] = useState(false);
     if (src !== prevSrc) {
         setPrevSrc(src);
         setHandshake('waiting');
         setLoaded(false);
+        setFocusOnLoad(followingLink);
+        setFollowingLink(false);
     }
     useEffect(() => {
         if (!loaded || handshake !== 'waiting')
@@ -114,17 +134,30 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const onPreviewErrorRef = useRef(onPreviewError);
     const onMarksRef = useRef(onMarks);
     const onSiteChromeRef = useRef(onSiteChrome);
+    const onNavigateRef = useRef(onNavigate);
     useEffect(() => {
         postRef.current = post;
         postHighlightRef.current = postHighlight;
         onPreviewErrorRef.current = onPreviewError;
         onMarksRef.current = onMarks;
         onSiteChromeRef.current = onSiteChrome;
+        onNavigateRef.current = onNavigate;
     });
     useEffect(() => {
         if (handshake === 'missing')
             onSiteChromeRef.current?.('unanswered');
     }, [handshake]);
+    // Focus the user puts anywhere before the next page loads is theirs to keep.
+    useEffect(() => {
+        if (!followingLink && !focusOnLoad)
+            return;
+        const keep = () => {
+            setFollowingLink(false);
+            setFocusOnLoad(false);
+        };
+        document.addEventListener('focusin', keep);
+        return () => document.removeEventListener('focusin', keep);
+    }, [followingLink, focusOnLoad]);
     useEffect(() => {
         post();
         // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
@@ -169,6 +202,10 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                     onMarksRef.current?.({ count, ...(isMarkPaths(paths) ? { paths } : {}) });
                 }
             }
+            else if (isPreviewNavigateMessage(event.data, previewOrigin)) {
+                onNavigateRef.current?.(event.data.href);
+                setFollowingLink(true);
+            }
         };
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
@@ -227,5 +264,9 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                     post();
                     postHighlight();
                     setLoaded(true);
+                    if (focusOnLoad) {
+                        iframeRef.current?.focus();
+                        setFocusOnLoad(false);
+                    }
                 } }, `${retries}:${src}`)] }));
 };

package/dist/editor/PreviewPane.d.ts

@@ -52,6 +52,8 @@ export interface PreviewPaneProps {
      * them, and whenever `siteChrome` is on, so it can always be turned off.
      */
     onSiteChromeChange?: (siteChrome: boolean) => void;
+    /** Called with the absolute URL of a link clicked in the preview; see `PreviewFrame`. */
+    onNavigate?: (href: string) => void;
 }
 /**
  * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A

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

@@ -6,16 +6,15 @@ export interface BranchLockInput {
     branchWriteBlocked?: boolean;
 }
 /**
- * Which lock applies. `branchWriteBlocked` is the server's own answer (getBranchProtection), so
- * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
- * base-branch read-only takes precedence over a workflow status lock.
+ * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
+ * @internal Exported for tests.
  */
-export declare function branchLockState({ branchStatus, branchReadOnly, branchWriteBlocked, }: BranchLockInput): {
-    statusLocked: boolean;
-    branchDataUnavailable: boolean;
-};
-/** Whether the banner renders; the top bar reads the same answer, so the two cannot drift. */
 export declare function branchLockBannerShown(lock: BranchLockInput): boolean;
+/**
+ * Why the branch takes no writes, with the way forward; undefined when it does take them. The
+ * top bar's Save and the navigator's row locks say this; the banner describes the same lock.
+ */
+export declare function describeBranchLock(lock: BranchLockInput): string | undefined;
 export interface BranchLockBannerProps extends BranchLockInput {
     branchName: string;
     onBranchManagerOpen: () => void;

package/dist/editor/components/BranchLockBanner.js

@@ -7,7 +7,7 @@ import { EDITOR_ACTIONS } from '../copy.js';
  * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
  * base-branch read-only takes precedence over a workflow status lock.
  */
-export function branchLockState({ branchStatus, branchReadOnly = false, branchWriteBlocked = false, }) {
+function branchLockState({ branchStatus, branchReadOnly = false, branchWriteBlocked = false, }) {
     const statusLocked = branchWriteBlocked && !branchReadOnly;
     // `branchStatus` can't describe the lock while branch data loads (undefined) or under version
     // skew (an old server omits `branchWriteBlocked` but reports 'editing'), so both read as
@@ -15,10 +15,33 @@ export function branchLockState({ branchStatus, branchReadOnly = false, branchWr
     const branchDataUnavailable = statusLocked && (branchStatus === undefined || branchStatus === 'editing');
     return { statusLocked, branchDataUnavailable };
 }
-/** Whether the banner renders; the top bar reads the same answer, so the two cannot drift. */
+/**
+ * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
+ * @internal Exported for tests.
+ */
 export function branchLockBannerShown(lock) {
     return !!lock.branchReadOnly || branchLockState(lock).statusLocked;
 }
+/**
+ * Why the branch takes no writes, with the way forward; undefined when it does take them. The
+ * top bar's Save and the navigator's row locks say this; the banner describes the same lock.
+ */
+export function describeBranchLock(lock) {
+    if (!branchLockBannerShown(lock))
+        return undefined;
+    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
+    if (lock.branchReadOnly)
+        return 'The base branch is read-only. Create a branch to make changes.';
+    if (branchDataUnavailable)
+        return 'Branch details could not be loaded. Use "Switch branch…" to retry.';
+    if (!statusLocked)
+        return undefined;
+    if (lock.branchStatus === 'submitted')
+        return 'This branch is in review. Withdraw it to make changes.';
+    if (lock.branchStatus === 'approved')
+        return 'This branch is approved. Withdraw it to make changes.';
+    return `This branch is ${lock.branchStatus}. Its content is read-only.`;
+}
 /** The banner region's explanation of a read-only branch; not dismissible while it applies. */
 export function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }) {
     const { branchDataUnavailable } = branchLockState(lock);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * The lock a navigator row shows in the slot its "…" menu would fill, on a branch that takes no
+ * writes. It matches the menu button's footprint so rows do not shift between branches, and takes
+ * the menu's name; the reason is its Tooltip and its description. It stays `aria-disabled` rather
+ * than `disabled`, so the reason opens on keyboard focus and touch too. Space is stopped here: the
+ * tree would read it as expand/collapse. `data-row-lock` marks it for the theme stylesheet, which
+ * draws it only on the hovered, focused or selected row (opacity, never `display`, so
+ * focusing it reveals it); a touch user sees it on the row they tapped.
+ */
+export declare const BranchRowLock: React.FC<{
+    label: string;
+    reason: string;
+}>;

package/dist/editor/components/BranchRowLock.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { ActionIcon, Tooltip, VisuallyHidden } from '@mantine/core';
+import { IconLock } from '@tabler/icons-react';
+/**
+ * The lock a navigator row shows in the slot its "…" menu would fill, on a branch that takes no
+ * writes. It matches the menu button's footprint so rows do not shift between branches, and takes
+ * the menu's name; the reason is its Tooltip and its description. It stays `aria-disabled` rather
+ * than `disabled`, so the reason opens on keyboard focus and touch too. Space is stopped here: the
+ * tree would read it as expand/collapse. `data-row-lock` marks it for the theme stylesheet, which
+ * draws it only on the hovered, focused or selected row (opacity, never `display`, so
+ * focusing it reveals it); a touch user sees it on the row they tapped.
+ */
+export const BranchRowLock = ({ label, reason }) => {
+    const reasonId = useId();
+    return (_jsx(Tooltip, { label: reason, withinPortal: true, position: "bottom-end", multiline: true, w: 240, events: { hover: true, focus: true, touch: true }, children: _jsxs(ActionIcon, { size: "xs", variant: "transparent", c: "dimmed", "aria-disabled": true, "aria-label": label, "aria-describedby": reasonId, "data-testid": "branch-lock", "data-row-lock": true, style: { cursor: 'default' }, onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+                if (event.nativeEvent.code === 'Space')
+                    event.stopPropagation();
+            }, children: [_jsx(IconLock, { size: 14, "aria-hidden": true }), _jsx(VisuallyHidden, { component: "span", id: reasonId, children: reason })] }) }));
+};

package/dist/editor/components/EditorHeader.js

@@ -6,7 +6,7 @@ import { branchBarStatusPresentation } from '../branch-status.js';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { SYSTEM_USER_ID } from '../../system-users.js';
 import { TopBar } from '../shell/TopBar.js';
-import { branchLockBannerShown, branchLockState } from './BranchLockBanner.js';
+import { describeBranchLock } from './BranchLockBanner.js';
 import { BranchPill } from './BranchPill.js';
 import { EntryBreadcrumb } from './EntryBreadcrumb.js';
 import { SaveSplitButton } from './SaveSplitButton.js';
@@ -15,23 +15,8 @@ import { SaveSplitButton } from './SaveSplitButton.js';
  * pill, Submit or Withdraw, and Save with Save all.
  */
 export function EditorHeader({ currentEntry, branchName, operatingMode, busy, breadcrumbSegments, editedFiles, modifiedCount, onCollectionOpen, navigatorToggleRef, branchToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onEntrySelect, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onSave, onSaveAll, saveAllProgress, saving = false, savedSignal, savedHere = false, entryListFailed = false, onSubmit, onWithdraw, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected = false, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, }) {
-    const lock = { branchStatus, branchReadOnly, branchWriteBlocked };
-    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
-    // Why the branch takes no writes, with the way forward; shared by Save and Save all. It is set
-    // exactly when BranchLockBanner renders, which says the same.
-    const branchLockReason = !branchLockBannerShown(lock)
-        ? undefined
-        : branchReadOnly
-            ? 'The base branch is read-only. Create a branch to make changes.'
-            : branchDataUnavailable
-                ? 'Branch details could not be loaded. Use "Switch branch…" to retry.'
-                : statusLocked
-                    ? branchStatus === 'submitted'
-                        ? 'This branch is in review. Withdraw it to make changes.'
-                        : branchStatus === 'approved'
-                            ? 'This branch is approved. Withdraw it to make changes.'
-                            : `This branch is ${branchStatus}. Its content is read-only.`
-                    : undefined;
+    // Shared by Save and Save all; set exactly when BranchLockBanner renders.
+    const branchLockReason = describeBranchLock({ branchStatus, branchReadOnly, branchWriteBlocked });
     const entryLockReason = entryReadOnly
         ? "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it."
         : undefined;

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

@@ -0,0 +1,5 @@
+/**
+ * Says a preview link's page has no entry, so it went to a new tab: once the editor is in view, as
+ * the toast's timer runs while hidden. A blocked tab's note stays, linking the page for a new click.
+ */
+export declare const showPreviewLinkOutcome: (href: string, path: string, opened: boolean) => void;

package/dist/editor/components/PreviewLinkToast.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Anchor } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+/**
+ * Says a preview link's page has no entry, so it went to a new tab: once the editor is in view, as
+ * the toast's timer runs while hidden. A blocked tab's note stays, linking the page for a new click.
+ */
+export const showPreviewLinkOutcome = (href, path, opened) => {
+    if (!opened) {
+        notifications.show({
+            color: 'yellow',
+            autoClose: false,
+            message: (_jsxs(_Fragment, { children: [path, " has no entry here, and your browser blocked the new tab.", ' ', _jsxs(Anchor, { href: href, target: "_blank", rel: "noopener noreferrer", children: ["Open ", path] })] })),
+        });
+        return;
+    }
+    const show = () => notifications.show({
+        color: 'blue',
+        message: `${path} has no entry here, so it opened in a new tab.`,
+    });
+    setTimeout(() => {
+        if (document.visibilityState === 'visible')
+            return show();
+        const onVisible = () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            document.removeEventListener('visibilitychange', onVisible);
+            show();
+        };
+        document.addEventListener('visibilitychange', onVisible);
+    }, 300);
+};

package/dist/editor/fields/FieldLabel.d.ts

@@ -18,7 +18,7 @@ export interface FieldLabelProps {
     labelId?: string;
     /** Slot right after the label text, for the field's comment control. */
     commentControl?: React.ReactNode;
-    /** Right-aligned slot for field actions (Expand all, an object's "…" menu). */
+    /** Right-aligned slot for field actions (Expand all, an object's "…" menu); it wraps under the label when the row is too narrow for both. */
     actions?: React.ReactNode;
 }
 export declare const FieldLabel: React.FC<FieldLabelProps>;

package/dist/editor/fields/FieldLabel.js

@@ -6,7 +6,7 @@ export const FieldLabel = ({ label, required, description, descriptionBaseId, ht
     const hasRow = Boolean(label) || Boolean(commentControl) || Boolean(actions);
     if (!hasRow && !description)
         return null;
-    return (_jsxs(Stack, { gap: 2, children: [hasRow && (_jsxs(Group, { justify: "space-between", wrap: "nowrap", gap: "xs", align: "center", children: [_jsxs(Group, { gap: 4, wrap: "nowrap", style: { minWidth: 0 }, children: [label && (_jsx(Input.Label, { required: required, htmlFor: htmlFor, id: labelId, labelElement: htmlFor ? 'label' : 'div', children: label })), commentControl] }), actions && (_jsx(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: actions }))] })), descriptionBaseId && (_jsx(FieldDescription, { baseId: descriptionBaseId, description: description }))] }));
+    return (_jsxs(Stack, { gap: 2, children: [hasRow && (_jsxs(Group, { justify: "space-between", wrap: "wrap", gap: "xs", align: "center", children: [_jsxs(Group, { gap: 4, wrap: "nowrap", style: { minWidth: 0, flex: '1 1 8rem' }, children: [label && (_jsx(Input.Label, { required: required, htmlFor: htmlFor, id: labelId, labelElement: htmlFor ? 'label' : 'div', children: label })), commentControl] }), actions && (_jsx(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0, marginLeft: 'auto' }, children: actions }))] })), descriptionBaseId && (_jsx(FieldDescription, { baseId: descriptionBaseId, description: description }))] }));
 };
 /**
  * A Mantine input under a `FieldLabel` row, in place of the input's own `label` prop, so the

package/dist/editor/fields/ImageField.d.ts

@@ -11,7 +11,7 @@ export interface ImageFieldProps {
     description?: string;
     value: ImageFieldValue | undefined;
     onChange: (value: ImageFieldValue | undefined) => void;
-    /** "W:H" aspect ratio - when set, picking/uploading a new image opens the crop step before the value commits, and a "Crop" button appears on the filled state. */
+    /** "W:H" aspect ratio - when set, picking or uploading a new raster opens the crop step before the value commits, and Crop keeps that shape. Without it, a pick commits as is and Crop is free-form. */
     aspect?: string;
     /** Allow empty alt text. Default: required (accessibility). */
     altOptional?: boolean;

package/dist/editor/fields/ImageField.js

@@ -1,21 +1,22 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
-import { Alert, Button, Group, Stack, Text, TextInput } from '@mantine/core';
+import { Alert, Button, Group, Paper, Stack, Text, TextInput, Tooltip, VisuallyHidden, } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconAlertCircle, IconPhoto, IconPhotoOff, IconUpload } from '@tabler/icons-react';
-import { isAssetStoreSrc } from '../../assets/asset-url.js';
+import { EDITOR_THUMBNAIL_WIDTHS } from '../../assets/editor-thumbnail-widths.js';
 import { useAssetContext } from '../context/index.js';
 import { CropStep } from '../media/CropStep.js';
+import { cropBlockedReason } from '../media/crop-availability.js';
 import { editorImageSrc } from '../media/editor-image-src.js';
-import { parseAspectRatio } from '../media/crop-math.js';
+import { isFullFrameCrop, parseAspectRatio } from '../media/crop-math.js';
 import { MediaLibrary } from '../media/MediaLibrary.js';
 import { useAssetUpload } from '../media/useAssetUpload.js';
 import { ACCEPTED_IMAGE_MIME_TYPES, MAX_UPLOAD_BYTES } from '../media/upload-constants.js';
 import { useFieldCommentControl } from '../comments/field-comment-context.js';
-import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
+import { groupDescriptionProps } from './FieldDescription.js';
 import { FieldLabel } from './FieldLabel.js';
-const PREVIEW_WIDTH = 320;
+const PREVIEW_WIDTH = EDITOR_THUMBNAIL_WIDTHS.imageField;
 export const ImageField = ({ id, label, description, value, onChange, aspect, altOptional, dataCanopyField, errors, readOnly = false, onRemoved, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
@@ -34,8 +35,8 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
     const previewSrc = value
         ? editorImageSrc(value.src, baseUrl, { width: PREVIEW_WIDTH, crop: value.crop })
         : undefined;
-    // `assetUrl` never applies a crop to a src outside the asset store, so one stored there never renders.
-    const canCrop = aspectRatio !== undefined && !!value && isAssetStoreSrc(value.src);
+    const cropBlocked = value ? cropBlockedReason(value.src) : undefined;
+    const cropReasonId = `${inputId}-crop-reason`;
     // Broken-preview fallback, mirroring AssetCard.tsx's thumbnail fallback (same
     // icon/copy, same reset-during-render pattern). Covers both an asset broken
     // at upload time and a transform failing at render time.
@@ -71,7 +72,7 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
     };
     const handleAssetReady = (asset) => {
         setPickerOpen(false);
-        if (aspectRatio !== undefined) {
+        if (aspectRatio !== undefined && !cropBlockedReason(asset.src)) {
             setCropRequest({ kind: 'new', asset });
         }
         else {
@@ -102,12 +103,16 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
         onRemoved?.(value);
         field?.focus();
     };
+    // A whole-frame rectangle stores no crop: it would only turn the image's URL into a derivative
+    // that looks the same, and it is how an editor takes a crop back off.
     const handleCropConfirm = (rect) => {
+        const crop = isFullFrameCrop(rect) ? undefined : rect;
         if (cropRequest?.kind === 'new') {
-            commitAsset(cropRequest.asset, rect);
+            commitAsset(cropRequest.asset, crop);
         }
         else if (cropRequest?.kind === 'existing' && value) {
-            edit({ ...value, crop: rect });
+            const { crop: _previous, ...rest } = value;
+            edit(crop ? { ...rest, crop } : rest);
         }
         setCropRequest(null);
     };
@@ -117,20 +122,24 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
             ? editorImageSrc(value.src, baseUrl)
             : '';
     const cropInitial = cropRequest?.kind === 'existing' ? value?.crop : undefined;
-    return (_jsxs(Stack, { gap: 4, "data-canopy-field": dataCanopyField, "data-testid": `image-field-${dataCanopyField}`, ...groupDescriptionProps(inputId, description), role: "group", "aria-label": label, "data-removal-focus": true, tabIndex: -1, children: [_jsx(FieldLabel, { label: label, commentControl: commentControl }), _jsx(FieldDescription, { baseId: inputId, description: description }), !hasValue && readOnly ? (_jsx(Text, { size: "sm", c: "dimmed", "data-testid": `image-field-empty-${dataCanopyField}`, children: "No image" })) : !hasValue ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: ACCEPTED_IMAGE_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": `image-field-dropzone-${dataCanopyField}`, children: _jsxs(Group, { justify: "center", gap: "xs", py: "xs", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 18 }), _jsx(Text, { size: "xs", children: "Drop an image here, or click to browse" })] }) }), _jsx(Group, { justify: "center", children: _jsx(Button, { variant: "light", leftSection: _jsx(IconPhoto, { size: 14 }), onClick: () => setPickerOpen(true), "data-testid": `image-field-browse-library-${dataCanopyField}`, children: "Browse library" }) }), (upload.error || dropError) && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", children: upload.error || dropError })), errors?.src && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: errors.src }))] })) : (_jsxs(Stack, { gap: "xs", children: [previewFailed ? (_jsxs("div", { "data-testid": `image-field-preview-fallback-${dataCanopyField}`, style: {
-                            width: PREVIEW_WIDTH,
-                            height: 160,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            gap: 4,
-                            borderRadius: 'var(--mantine-radius-sm)',
-                            background: 'var(--canopy-surface-muted)',
-                        }, children: [_jsx(IconPhotoOff, { size: 28, stroke: 1.5, color: "var(--mantine-color-dimmed)" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Preview unavailable" })] })) : (_jsx("img", { src: previewSrc, alt: value.alt, style: {
-                            maxWidth: PREVIEW_WIDTH,
-                            maxHeight: PREVIEW_WIDTH,
-                            borderRadius: 'var(--mantine-radius-sm)',
-                            display: 'block',
-                        }, onError: () => setPreviewFailed(true) })), errors?.src && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: errors.src })), _jsx(TextInput, { id: inputId, ref: altInputRef, label: "Alt text", required: !altOptional, readOnly: readOnly, value: value.alt, onChange: (event) => handleAltChange(event.currentTarget.value), error: errors?.alt, size: "sm", "data-testid": `image-field-alt-${dataCanopyField}` }), !readOnly && (_jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "light", onClick: () => setPickerOpen(true), "data-testid": `image-field-replace-${dataCanopyField}`, children: "Replace" }), canCrop && (_jsx(Button, { variant: "light", onClick: () => setCropRequest({ kind: 'existing' }), "data-testid": `image-field-crop-${dataCanopyField}`, children: "Crop" })), _jsx(Button, { variant: "subtle", color: "red", onClick: handleRemove, "data-testid": `image-field-remove-${dataCanopyField}`, children: "Remove" })] })), errors?.crop && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: errors.crop }))] })), !readOnly && (_jsx(MediaLibrary, { opened: pickerOpen, onClose: () => setPickerOpen(false), mode: "picker", onSelect: handleAssetReady })), aspectRatio !== undefined && !readOnly && (_jsx(CropStep, { opened: cropRequest !== null, onClose: () => setCropRequest(null), imageSrc: cropImageSrc, aspect: aspectRatio, initialCrop: cropInitial, onConfirm: handleCropConfirm }))] }));
+    const actions = hasValue && !readOnly ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "compact-sm", variant: "light", onClick: () => setPickerOpen(true), "data-testid": `image-field-replace-${dataCanopyField}`, children: "Replace" }), _jsx(Tooltip, { label: cropBlocked, disabled: !cropBlocked, position: "bottom-end", multiline: true, maw: 280, children: _jsx(Button, { size: "compact-sm", variant: "light", onClick: () => {
+                        if (!cropBlocked)
+                            setCropRequest({ kind: 'existing' });
+                    }, "data-disabled": cropBlocked ? true : undefined, "aria-disabled": cropBlocked ? true : undefined, "aria-describedby": cropBlocked ? cropReasonId : undefined, "data-testid": `image-field-crop-${dataCanopyField}`, children: "Crop" }) }), cropBlocked && _jsx(VisuallyHidden, { id: cropReasonId, children: cropBlocked }), _jsx(Button, { size: "compact-sm", variant: "subtle", color: "red", onClick: handleRemove, "data-testid": `image-field-remove-${dataCanopyField}`, children: "Remove" })] })) : undefined;
+    return (_jsx(Paper, { withBorder: true, p: "md", bg: "var(--canopy-surface-subtle)", shadow: "xs", "data-canopy-field": dataCanopyField, "data-testid": `image-field-${dataCanopyField}`, ...groupDescriptionProps(inputId, description), role: "group", "aria-label": label, "data-removal-focus": true, tabIndex: -1, children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldLabel, { label: label, description: description, descriptionBaseId: inputId, commentControl: commentControl, actions: actions }), !hasValue && readOnly ? (_jsx(Text, { size: "sm", c: "dimmed", "data-testid": `image-field-empty-${dataCanopyField}`, children: "No image" })) : !hasValue ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: ACCEPTED_IMAGE_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": `image-field-dropzone-${dataCanopyField}`, children: _jsxs(Group, { justify: "center", gap: "xs", py: "xs", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 18 }), _jsx(Text, { size: "xs", children: "Drop an image here, or click to browse" })] }) }), _jsx(Group, { justify: "center", children: _jsx(Button, { variant: "light", leftSection: _jsx(IconPhoto, { size: 14 }), onClick: () => setPickerOpen(true), "data-testid": `image-field-browse-library-${dataCanopyField}`, children: "Browse library" }) }), (upload.error || dropError) && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", children: upload.error || dropError })), errors?.src && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: errors.src }))] })) : (_jsxs(Stack, { gap: "xs", children: [previewFailed ? (_jsxs("div", { "data-testid": `image-field-preview-fallback-${dataCanopyField}`, style: {
+                                width: PREVIEW_WIDTH,
+                                height: 160,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: 4,
+                                borderRadius: 'var(--mantine-radius-sm)',
+                                background: 'var(--canopy-surface-muted)',
+                            }, children: [_jsx(IconPhotoOff, { size: 28, stroke: 1.5, color: "var(--mantine-color-dimmed)" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Preview unavailable" })] })) : (_jsx("img", { src: previewSrc, alt: value.alt, style: {
+                                maxWidth: PREVIEW_WIDTH,
+                                maxHeight: PREVIEW_WIDTH,
+                                borderRadius: 'var(--mantine-radius-sm)',
+                                display: 'block',
+                            }, onError: () => setPreviewFailed(true) })), errors?.src && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: errors.src })), _jsx(TextInput, { id: inputId, ref: altInputRef, label: "Alt text", required: !altOptional, readOnly: readOnly, value: value.alt, onChange: (event) => handleAltChange(event.currentTarget.value), error: errors?.alt, size: "sm", "data-testid": `image-field-alt-${dataCanopyField}` }), errors?.crop && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: errors.crop }))] })), !readOnly && (_jsx(MediaLibrary, { opened: pickerOpen, onClose: () => setPickerOpen(false), mode: "picker", onSelect: handleAssetReady })), !readOnly && (_jsx(CropStep, { opened: cropRequest !== null, onClose: () => setCropRequest(null), imageSrc: cropImageSrc, aspect: aspectRatio, initialCrop: cropInitial, onConfirm: handleCropConfirm }))] }) }));
 };

package/dist/editor/hooks/editor-history.d.ts

@@ -0,0 +1,7 @@
+/** Shows `url`, pushed, or replaced keeping the entry's other state; never rewrites the URL shown. */
+export declare function writeEditorUrl(url: string, push: boolean): void;
+/** Stamps the history entry the editor opened on, keeping Next.js's keys: the URL is unchanged. */
+export declare function markEditorHistoryStart(): void;
+/** On `popstate`: entries moved, undefined if an end is not this run's, null for an undo's. */
+export declare function recordHistoryMove(): number | undefined | null;
+export declare function undoHistoryMove(moved: number): void;