canopycms 0.2.0-int.119 → 0.2.0-int.121

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,12 @@
+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.
+ */
+export declare const BranchRowLock: React.FC<{
+    label: string;
+    reason: string;
+}>;

package/dist/editor/components/BranchRowLock.js

@@ -0,0 +1,19 @@
+'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.
+ */
+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", 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/useBranchManager.d.ts

@@ -88,6 +88,8 @@ export interface UseBranchManagerReturn {
     branches: BranchListItem[];
     branchSummaries: BranchSummary[];
     currentBranch: BranchListItem | undefined;
+    /** The listing failed and nothing earlier stands in for it. */
+    branchesLoadFailed: boolean;
     /** Shows a branch the server just created before any listing includes it. */
     addCreatedBranch: (branch: BranchListItem) => void;
     handleSubmit: (branchName: string) => Promise<void>;

package/dist/editor/hooks/useBranchManager.js

@@ -601,6 +601,7 @@ export function useBranchManager(options) {
         branches,
         branchSummaries,
         currentBranch,
+        branchesLoadFailed: !!branchesError && !branchesData,
         addCreatedBranch,
         handleSubmit,
         handleWithdraw,

package/dist/editor/media/AssetCard.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ActionIcon, Badge, Card, Text, Tooltip } from '@mantine/core';
 import { IconEyeOff, IconFileTypePdf, IconPhotoOff, IconRestore } from '@tabler/icons-react';
+import { EDITOR_THUMBNAIL_WIDTHS } from '../../assets/editor-thumbnail-widths.js';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { formatRelativeTime } from '../relative-time.js';
 import { editorImageSrc } from './editor-image-src.js';
 import { CARD_THUMBNAIL_HEIGHT } from './media-library-view.js';
 import { useThumbnailFailure } from './useThumbnailFailure.js';
-const THUMBNAIL_WIDTH = 160;
 /** Over the thumbnail, so opaque: the default fill. */
 const overlayActionStyle = {
     position: 'absolute',
@@ -24,7 +24,9 @@ export const AssetCard = ({ asset, baseUrl, onSelect, onRemove, onRestore, densi
     const compact = density === 'compact';
     const removed = asset.hidden === true;
     const thumbnailHeight = CARD_THUMBNAIL_HEIGHT[density];
-    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', { width: THUMBNAIL_WIDTH });
+    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', {
+        width: EDITOR_THUMBNAIL_WIDTHS.card,
+    });
     const [thumbnailFailed, markThumbnailFailed] = useThumbnailFailure(thumbnailSrc);
     const handleKeyDown = (event) => {
         if (!onSelect)

package/dist/editor/media/AssetListRow.js

@@ -2,13 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ActionIcon, Badge, Group, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import { IconEyeOff, IconFileTypePdf, IconPhotoOff, IconRestore } from '@tabler/icons-react';
+import { EDITOR_THUMBNAIL_WIDTHS } from '../../assets/editor-thumbnail-widths.js';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { formatRelativeTime } from '../relative-time.js';
 import { editorImageSrc } from './editor-image-src.js';
 import { formatBytes } from './format-bytes.js';
 import { useThumbnailFailure } from './useThumbnailFailure.js';
 const THUMBNAIL_SIZE = 40;
-const THUMBNAIL_WIDTH = 80;
 const rowStyle = {
     width: '100%',
     padding: 6,
@@ -32,7 +32,9 @@ const thumbnailBoxStyle = {
  */
 export const AssetListRow = ({ asset, baseUrl, onSelect, onRemove, onRestore, }) => {
     const removed = asset.hidden === true;
-    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', { width: THUMBNAIL_WIDTH });
+    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', {
+        width: EDITOR_THUMBNAIL_WIDTHS.listRow,
+    });
     const [thumbnailFailed, markThumbnailFailed] = useThumbnailFailure(thumbnailSrc);
     const hasDimensions = asset.width !== undefined && asset.height !== undefined;
     const content = (_jsxs(Group, { gap: "sm", wrap: "nowrap", style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: thumbnailBoxStyle, children: asset.kind === 'pdf' ? (_jsx(IconFileTypePdf, { size: 24, stroke: 1.5, "aria-hidden": true })) : thumbnailFailed ? (_jsx(IconPhotoOff, { size: 20, stroke: 1.5, color: "var(--mantine-color-dimmed)", "data-testid": `asset-row-thumbnail-fallback-${asset.hash32}`, "aria-label": "Preview unavailable" })) : (

package/dist/editor/media/CropStep.d.ts

@@ -5,20 +5,18 @@ export interface CropStepProps {
     onClose: () => void;
     /** Full-frame image src to crop - `assetUrl()` with no crop directive, so the user always crops the original frame. */
     imageSrc: string;
-    /** Numeric aspect ratio (width/height) parsed from the field config's "W:H" string. */
-    aspect: number;
-    /** Existing crop rect, if re-cropping - seeds react-easy-crop's initial selection (best effort). */
+    /** Numeric aspect ratio (width/height) parsed from the field config's "W:H" string. Absent: the crop box is free-form. */
+    aspect?: number;
+    /** Existing crop rect, if re-cropping - the box it opens with. */
     initialCrop?: CropRect;
     onConfirm: (rect: CropRect) => void;
 }
 /**
- * react-easy-crop wrapped in a Modal for the ImageField crop step. Percentage
- * -> normalized-rect conversion is delegated to crop-math.ts's pure,
- * independently-unit-tested `cropAreaPercentToRect`.
+ * react-image-crop in a Modal for the ImageField crop step. Box -> normalized-rect
+ * conversion is delegated to crop-math.ts's pure, independently-unit-tested
+ * `cropAreaPercentToRect`.
  *
- * The pan/zoom/pending-selection state lives in `CropStepBody`, mounted only
- * while `opened` and keyed on `imageSrc` - so a fresh crop session always
- * starts from fresh state (React remounts on key change) without an effect
- * that would otherwise need to call `setState` synchronously to reset it.
+ * The box state lives in `CropStepBody`, mounted only while `opened` and keyed on `imageSrc`,
+ * so a fresh crop session always starts from a fresh box (React remounts on key change).
  */
 export declare const CropStep: React.FC<CropStepProps>;