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

package/dist/editor/media/CropStep.js

@@ -1,41 +1,53 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, Group, Modal, Slider, Stack, Text } from '@mantine/core';
-import Cropper from 'react-easy-crop';
-import { cropAreaPercentToRect, cropRectToAreaPercent } from './crop-math.js';
-const MIN_ZOOM = 1;
-const MAX_ZOOM = 3;
-const ZOOM_STEP = 0.05;
+import { Button, Group, Modal, Stack, Text } from '@mantine/core';
+import ReactCrop from 'react-image-crop';
+import { cropAreaPercentToRect, initialCropBox } from './crop-math.js';
+const MIN_BOX_PX = 16;
+const CORNER_LABEL = (corner) => `${corner} corner. Arrow keys resize the box.`;
+const ARIA_LABELS = {
+    cropArea: 'Crop box. Arrow keys move it; hold Shift for larger steps.',
+    nwDragHandle: CORNER_LABEL('Top-left'),
+    neDragHandle: CORNER_LABEL('Top-right'),
+    seDragHandle: CORNER_LABEL('Bottom-right'),
+    swDragHandle: CORNER_LABEL('Bottom-left'),
+    nDragHandle: 'Top edge. Up and down arrow keys resize the box.',
+    sDragHandle: 'Bottom edge. Up and down arrow keys resize the box.',
+    eDragHandle: 'Right edge. Left and right arrow keys resize the box.',
+    wDragHandle: 'Left edge. Left and right arrow keys resize the box.',
+};
+const PREVIEW_MAX_HEIGHT = 360;
+const toPercentCrop = (box) => ({
+    unit: '%',
+    ...box,
+});
 /**
- * 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 const CropStep = ({ opened, onClose, imageSrc, aspect, initialCrop, onConfirm, }) => {
     return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Crop image", size: "lg", overlayProps: { blur: 2 }, "data-testid": "crop-step-modal", children: opened && (_jsx(CropStepBody, { imageSrc: imageSrc, aspect: aspect, initialCrop: initialCrop, onConfirm: onConfirm, onClose: onClose }, imageSrc)) }));
 };
 const CropStepBody = ({ imageSrc, aspect, initialCrop, onConfirm, onClose, }) => {
-    const [crop, setCrop] = useState({ x: 0, y: 0 });
-    const [zoom, setZoom] = useState(1);
-    const [pendingArea, setPendingArea] = useState(null);
-    const handleConfirm = () => {
-        if (!pendingArea)
-            return;
-        const rect = cropAreaPercentToRect(pendingArea);
-        if (rect)
-            onConfirm(rect);
+    const [box, setBox] = useState(undefined);
+    const [loadFailed, setLoadFailed] = useState(false);
+    // The box can't be seeded until the image's displayed size is known, so Apply stays off until then.
+    const rect = box ? cropAreaPercentToRect(box) : null;
+    const handleImageLoad = (event) => {
+        const { width, height } = event.currentTarget;
+        setBox(toPercentCrop(initialCropBox({ imageWidth: width, imageHeight: height, aspect, existing: initialCrop })));
     };
-    const initialCroppedAreaPercentages = initialCrop ? cropRectToAreaPercent(initialCrop) : undefined;
     return (_jsxs(Stack, { gap: "md", children: [_jsx("div", { style: {
-                    position: 'relative',
-                    width: '100%',
-                    height: 360,
+                    display: 'flex',
+                    justifyContent: 'center',
                     background: 'var(--mantine-color-black)',
-                }, children: _jsx(Cropper, { image: imageSrc, crop: crop, zoom: zoom, aspect: aspect, initialCroppedAreaPercentages: initialCroppedAreaPercentages, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: (croppedArea) => setPendingArea(croppedArea) }) }), _jsxs(Group, { gap: "sm", align: "center", children: [_jsx(Text, { size: "sm", w: 50, children: "Zoom" }), _jsx(Slider, { style: { flex: 1 }, min: MIN_ZOOM, max: MAX_ZOOM, step: ZOOM_STEP, value: zoom, onChange: setZoom, label: (value) => `${value.toFixed(2)}x` })] }), _jsxs(Group, { justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirm, disabled: !pendingArea, "data-testid": "crop-step-apply", children: "Apply crop" })] })] }));
+                    '--rc-focus-color': 'var(--canopy-focus-ring)',
+                }, children: _jsx(ReactCrop, { crop: box, aspect: aspect, minWidth: MIN_BOX_PX, minHeight: MIN_BOX_PX, keepSelection: true, ariaLabels: ARIA_LABELS, onChange: (_pixels, percent) => setBox(percent), children: _jsx("img", { src: imageSrc, alt: "", style: { maxHeight: PREVIEW_MAX_HEIGHT, maxWidth: '100%', display: 'block' }, onLoad: handleImageLoad, onError: () => setLoadFailed(true) }) }) }), loadFailed && (_jsx(Text, { size: "sm", c: "var(--canopy-danger-text)", role: "alert", children: "This image couldn't be loaded, so it can't be cropped." })), _jsx(Text, { size: "sm", c: "dimmed", children: aspect === undefined
+                    ? 'Drag the box to move it, or its edges and corners to resize it. With a keyboard, arrow keys move it; Shift takes larger steps.'
+                    : 'Drag the box to move it, or a corner to resize it. Its shape is fixed. With a keyboard, arrow keys move it; Shift takes larger steps.' }), _jsxs(Group, { justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: () => rect && onConfirm(rect), disabled: !rect, "data-testid": "crop-step-apply", children: "Apply crop" })] })] }));
 };

package/dist/editor/media/crop-availability.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Why `src` can't be cropped, as the full sentence its disabled Crop button shows; `undefined`
+ * when it can. A crop is a directive on a transform URL, which `assetUrl` writes only for a raster
+ * in the asset store, so a vector file or a file outside the store never renders one.
+ */
+export declare function cropBlockedReason(src: string): string | undefined;

package/dist/editor/media/crop-availability.js

@@ -0,0 +1,19 @@
+import { ASSET_PREFIXES } from '../../assets/asset-prefixes.js';
+import { isAssetStoreSrc } from '../../assets/asset-url.js';
+const TRANSFORM_SPACE_PREFIX = `/${ASSET_PREFIXES.transform}/`;
+/**
+ * Why `src` can't be cropped, as the full sentence its disabled Crop button shows; `undefined`
+ * when it can. A crop is a directive on a transform URL, which `assetUrl` writes only for a raster
+ * in the asset store, so a vector file or a file outside the store never renders one.
+ */
+export function cropBlockedReason(src) {
+    const path = src.split(/[?#]/)[0] ?? src;
+    if (/\.svg$/i.test(path))
+        return "SVG images can't be cropped. Replace it with a PNG or JPEG to crop it.";
+    if (!isAssetStoreSrc(src)) {
+        return 'Crop works on media-library images. Replace this file with a library copy to crop it.';
+    }
+    if (!src.startsWith(TRANSFORM_SPACE_PREFIX))
+        return "This file type can't be cropped. Replace it with a PNG or JPEG to crop it.";
+    return undefined;
+}

package/dist/editor/media/crop-math.d.ts

@@ -1,13 +1,13 @@
 /**
- * Pure math for the ImageField crop step: converting between react-easy-crop's
- * percentage-based `Area` shape and CanopyCMS's normalized 0..1 `CropRect`
+ * Pure math for the ImageField crop step: converting between react-image-crop's
+ * percentage-based crop shape and CanopyCMS's normalized 0..1 `CropRect`
  * (the same shape stored in `ImageFieldValue.crop` and accepted by the `c=`
  * transform directive - see assets/transform-directives.ts). Kept dependency-free
- * (no react-easy-crop import) so it's trivially unit-testable and reusable
+ * (no react-image-crop import) so it's trivially unit-testable and reusable
  * without pulling in the cropper UI library.
  */
 import { type CropRect } from '../../assets/transform-directives.js';
-/** react-easy-crop's `Area` shape, expressed in percentages (0..100). */
+/** A crop box in percentages (0..100) of the image, the shape react-image-crop reports for `unit: '%'`. */
 export interface CropAreaPercent {
     x: number;
     y: number;
@@ -15,8 +15,7 @@ export interface CropAreaPercent {
     height: number;
 }
 /**
- * Convert react-easy-crop's `onCropComplete(croppedArea, croppedAreaPixels)`
- * percentage area into a normalized `CropRect`, clamped to [0,1] and then
+ * Convert a percentage crop box into a normalized `CropRect`, clamped to [0,1] and then
  * rounded by `roundCropRect` — the same rounding the transform URL's canonical
  * form applies, so the stored crop is already canonical.
  *
@@ -24,12 +23,19 @@ export interface CropAreaPercent {
  * zero-area selection).
  */
 export declare function cropAreaPercentToRect(area: CropAreaPercent): CropRect | null;
+/** "W:H" -> the numeric aspect ratio react-image-crop's `aspect` prop expects. Mirrors config/schemas/field.ts's ASPECT_RATIO_RE; returns undefined for anything malformed rather than throwing (defensive - the field config was already validated at schema-parse time). */
+export declare function parseAspectRatio(aspect: string | undefined): number | undefined;
 /**
- * Inverse of `cropAreaPercentToRect` - seeds react-easy-crop's
- * `initialCroppedAreaPercentages` when re-opening the crop step for an
- * already-cropped image, so the user sees their previous selection instead
- * of starting over.
+ * The crop box the crop step opens with, once the image's displayed size is known.
+ * A stored crop is kept as it was drawn, unless the field has an `aspect` it no longer
+ * matches (the config changed since); then, like a first crop of a locked field, a box of that
+ * ratio centred on the image. A free field's first box is the whole frame, so Apply with no change trims nothing.
  */
-export declare function cropRectToAreaPercent(rect: CropRect): CropAreaPercent;
-/** "W:H" -> the numeric aspect ratio react-easy-crop's `aspect` prop expects. Mirrors config/schemas/field.ts's ASPECT_RATIO_RE; returns undefined for anything malformed rather than throwing (defensive - the field config was already validated at schema-parse time). */
-export declare function parseAspectRatio(aspect: string | undefined): number | undefined;
+export declare function initialCropBox(opts: {
+    imageWidth: number;
+    imageHeight: number;
+    aspect?: number;
+    existing?: CropRect;
+}): CropAreaPercent;
+/** True for a rectangle covering the whole frame, which renders the image unchanged. */
+export declare function isFullFrameCrop(rect: CropRect): boolean;

package/dist/editor/media/crop-math.js

@@ -1,9 +1,9 @@
 /**
- * Pure math for the ImageField crop step: converting between react-easy-crop's
- * percentage-based `Area` shape and CanopyCMS's normalized 0..1 `CropRect`
+ * Pure math for the ImageField crop step: converting between react-image-crop's
+ * percentage-based crop shape and CanopyCMS's normalized 0..1 `CropRect`
  * (the same shape stored in `ImageFieldValue.crop` and accepted by the `c=`
  * transform directive - see assets/transform-directives.ts). Kept dependency-free
- * (no react-easy-crop import) so it's trivially unit-testable and reusable
+ * (no react-image-crop import) so it's trivially unit-testable and reusable
  * without pulling in the cropper UI library.
  */
 import { isValidCropRect, roundCropRect } from '../../assets/transform-directives.js';
@@ -13,8 +13,7 @@ function clamp01(value) {
     return Math.min(1, Math.max(0, value));
 }
 /**
- * Convert react-easy-crop's `onCropComplete(croppedArea, croppedAreaPixels)`
- * percentage area into a normalized `CropRect`, clamped to [0,1] and then
+ * Convert a percentage crop box into a normalized `CropRect`, clamped to [0,1] and then
  * rounded by `roundCropRect` — the same rounding the transform URL's canonical
  * form applies, so the stored crop is already canonical.
  *
@@ -31,15 +30,14 @@ export function cropAreaPercentToRect(area) {
     return isValidCropRect(rect.x, rect.y, rect.w, rect.h) ? rect : null;
 }
 /**
- * Inverse of `cropAreaPercentToRect` - seeds react-easy-crop's
- * `initialCroppedAreaPercentages` when re-opening the crop step for an
- * already-cropped image, so the user sees their previous selection instead
- * of starting over.
+ * Inverse of `cropAreaPercentToRect` - seeds the crop box when re-opening
+ * the crop step for an already-cropped image, so the user sees their previous
+ * selection instead of starting over.
  */
-export function cropRectToAreaPercent(rect) {
+function cropRectToAreaPercent(rect) {
     return { x: rect.x * 100, y: rect.y * 100, width: rect.w * 100, height: rect.h * 100 };
 }
-/** "W:H" -> the numeric aspect ratio react-easy-crop's `aspect` prop expects. Mirrors config/schemas/field.ts's ASPECT_RATIO_RE; returns undefined for anything malformed rather than throwing (defensive - the field config was already validated at schema-parse time). */
+/** "W:H" -> the numeric aspect ratio react-image-crop's `aspect` prop expects. Mirrors config/schemas/field.ts's ASPECT_RATIO_RE; returns undefined for anything malformed rather than throwing (defensive - the field config was already validated at schema-parse time). */
 export function parseAspectRatio(aspect) {
     if (!aspect)
         return undefined;
@@ -48,3 +46,44 @@ export function parseAspectRatio(aspect) {
         return undefined;
     return Number(match[1]) / Number(match[2]);
 }
+const INITIAL_BOX_FRACTION = 0.9;
+const FREE_BOX = { x: 0, y: 0, width: 100, height: 100 };
+/** How far a stored crop's pixel ratio may sit from the field's `aspect` before it is replaced by a fresh box. */
+const ASPECT_TOLERANCE = 0.02;
+/**
+ * The crop box the crop step opens with, once the image's displayed size is known.
+ * A stored crop is kept as it was drawn, unless the field has an `aspect` it no longer
+ * matches (the config changed since); then, like a first crop of a locked field, a box of that
+ * ratio centred on the image. A free field's first box is the whole frame, so Apply with no change trims nothing.
+ */
+export function initialCropBox(opts) {
+    const { imageWidth, imageHeight, aspect, existing } = opts;
+    const sized = imageWidth > 0 && imageHeight > 0;
+    if (existing) {
+        const box = cropRectToAreaPercent(existing);
+        if (aspect === undefined || !sized)
+            return box;
+        const storedRatio = (existing.w * imageWidth) / (existing.h * imageHeight);
+        if (Math.abs(storedRatio - aspect) / aspect <= ASPECT_TOLERANCE)
+            return box;
+    }
+    if (aspect === undefined || !sized)
+        return { ...FREE_BOX };
+    const wide = aspect >= imageWidth / imageHeight;
+    const width = wide
+        ? imageWidth * INITIAL_BOX_FRACTION
+        : imageHeight * INITIAL_BOX_FRACTION * aspect;
+    const height = wide ? width / aspect : imageHeight * INITIAL_BOX_FRACTION;
+    const widthPct = (width / imageWidth) * 100;
+    const heightPct = (height / imageHeight) * 100;
+    return {
+        x: (100 - widthPct) / 2,
+        y: (100 - heightPct) / 2,
+        width: widthPct,
+        height: heightPct,
+    };
+}
+/** True for a rectangle covering the whole frame, which renders the image unchanged. */
+export function isFullFrameCrop(rect) {
+    return rect.x === 0 && rect.y === 0 && rect.w === 1 && rect.h === 1;
+}

package/dist/editor/preview-bridge.d.ts

@@ -5,6 +5,7 @@ export declare const CANOPY_PREVIEW_HIGHLIGHT = "canopycms:preview:highlight";
 export declare const CANOPY_PREVIEW_READY = "canopycms:preview:ready";
 export declare const CANOPY_PREVIEW_ERROR = "canopycms:preview:error";
 export declare const CANOPY_PREVIEW_MARKS = "canopycms:preview:marks";
+export declare const CANOPY_PREVIEW_NAVIGATE = "canopycms:preview:navigate";
 /**
  * The shape of the preview's `isLoading` for data of type `T`: a `boolean` at each reference
  * position, `true` while the editor is still resolving that reference, under the same keys and
@@ -84,6 +85,11 @@ export interface PreviewMarksMessage {
     count: number;
     paths?: string[];
 }
+/** Preview → editor: a plain click on a link to another page of this origin, left unfollowed. */
+export interface PreviewNavigateMessage {
+    type: typeof CANOPY_PREVIEW_NAVIGATE;
+    href: string;
+}
 /**
  * Preview → editor report that the current draft fails to compile/render
  * (e.g. malformed MDX). `message: null` clears an earlier error.
@@ -142,6 +148,7 @@ export declare const usePreviewHighlight: (opts?: {
 }) => boolean;
 /**
  * Hook for preview pages to emit focus messages when elements with data-canopy-path are clicked.
+ * A click that follows a link, ours or the browser's, goes to another page, not to a field.
  */
 export declare const usePreviewFocusEmitter: (entryPath: string, opts?: {
     editorOrigin?: string;

package/dist/editor/preview-bridge.js

@@ -4,7 +4,7 @@
  * hosts through `canopycms/preview`, so everything it reaches stays free of CSS and editor UI
  * (`pnpm lint:bundle`); the editor's side is `PreviewFrame.tsx`.
  */
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createFieldProps } from './field-props.js';
 import { setPreviewAssetBase } from './preview-asset-base.js';
 import { isSamePreviewPath } from './preview-path.js';
@@ -15,6 +15,7 @@ export const CANOPY_PREVIEW_HIGHLIGHT = 'canopycms:preview:highlight';
 export const CANOPY_PREVIEW_READY = 'canopycms:preview:ready';
 export const CANOPY_PREVIEW_ERROR = 'canopycms:preview:error';
 export const CANOPY_PREVIEW_MARKS = 'canopycms:preview:marks';
+export const CANOPY_PREVIEW_NAVIGATE = 'canopycms:preview:navigate';
 /**
  * Resolve a (possibly relative) URL to an origin for postMessage targeting.
  * Falls back to the page's own origin, so same-origin editor/preview setups
@@ -79,6 +80,7 @@ export const useCanopyPreview = (opts) => {
     });
     const highlightEnabled = usePreviewHighlight(bridgeOpts);
     usePreviewFocusEmitter(resolvedPath, bridgeOpts);
+    usePreviewLinkNavigation({ editorOrigin, highlighting: highlightEnabled });
     const fieldProps = createFieldProps();
     /**
      * Report that the current draft fails to compile/render (the editor surfaces it
@@ -271,8 +273,96 @@ export const usePreviewHighlight = (opts) => {
     }, [enabled, editorOrigin]);
     return enabled;
 };
+const isPlainClick = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+const linkClick = (event) => {
+    // The composed path reaches a link inside a shadow root, which the retargeted `target` hides.
+    const anchor = event
+        .composedPath()
+        .find((node) => node instanceof Element && node.matches('a[href], area[href]'));
+    if (!anchor)
+        return undefined;
+    let url;
+    try {
+        url = new URL(anchor.getAttribute('href') ?? '', document.baseURI);
+    }
+    catch {
+        return undefined;
+    }
+    if (url.protocol !== 'http:' && url.protocol !== 'https:')
+        return undefined;
+    const here = new URL(window.location.href);
+    if (url.href.split('#')[0] === here.href.split('#')[0])
+        return undefined;
+    const target = anchor.getAttribute('target') ?? document.querySelector('base[target]')?.getAttribute('target');
+    if (!isPlainClick(event) || (target && target !== '_self') || anchor.hasAttribute('download')) {
+        return { kind: 'browser' };
+    }
+    return { kind: url.origin === here.origin ? 'navigate' : 'open', href: url.href };
+};
+const isInMark = (event) => event
+    .composedPath()
+    .some((node) => node instanceof Element && node.hasAttribute('data-canopy-path'));
+/** Clicks `usePreviewLinkNavigation` followed itself, so click-to-focus leaves them be. */
+const followedLinkClicks = new WeakSet();
+/**
+ * Hook for preview pages to keep link clicks off public pages that may refuse framing. Captured on
+ * the window, so it runs before the page's own handlers, a client router's included.
+ */
+const usePreviewLinkNavigation = (opts) => {
+    const editorOrigin = opts.editorOrigin;
+    const highlighting = useRef(opts.highlighting);
+    useEffect(() => {
+        highlighting.current = opts.highlighting;
+    });
+    useEffect(() => {
+        if (window.parent === window)
+            return;
+        const targetOrigin = resolveMessageOrigin(editorOrigin);
+        if (isOpaqueOrigin(targetOrigin))
+            return;
+        // Links stay the browser's until the editor speaks: a frame that isn't a trusted editor, such
+        // as a site embedding a public page, would drop the message and leave every link dead.
+        let connected = false;
+        const handleMessage = (event) => {
+            const type = event.data?.type;
+            if (type !== CANOPY_PREVIEW_HIGHLIGHT && type !== CANOPY_PREVIEW_MESSAGE)
+                return;
+            if (isTrustedEditorMessage(event, editorOrigin))
+                connected = true;
+        };
+        const handleClick = (event) => {
+            if (!connected || event.defaultPrevented)
+                return;
+            const link = linkClick(event);
+            if (!link)
+                return;
+            // While fields are outlined, a marked link is a field to pick, which click-to-focus does.
+            if (highlighting.current && isPlainClick(event) && isInMark(event)) {
+                event.preventDefault();
+                return;
+            }
+            if (link.kind === 'browser')
+                return;
+            event.preventDefault();
+            followedLinkClicks.add(event);
+            if (link.kind === 'open') {
+                window.open(link.href, '_blank', 'noopener,noreferrer');
+                return;
+            }
+            const msg = { type: CANOPY_PREVIEW_NAVIGATE, href: link.href };
+            window.parent.postMessage(msg, targetOrigin);
+        };
+        window.addEventListener('message', handleMessage);
+        window.addEventListener('click', handleClick, true);
+        return () => {
+            window.removeEventListener('message', handleMessage);
+            window.removeEventListener('click', handleClick, true);
+        };
+    }, [editorOrigin]);
+};
 /**
  * Hook for preview pages to emit focus messages when elements with data-canopy-path are clicked.
+ * A click that follows a link, ours or the browser's, goes to another page, not to a field.
  */
 export const usePreviewFocusEmitter = (entryPath, opts) => {
     const editorOrigin = opts?.editorOrigin;
@@ -280,6 +370,8 @@ export const usePreviewFocusEmitter = (entryPath, opts) => {
         if (window.parent === window)
             return;
         const handleClick = (event) => {
+            if (followedLinkClicks.has(event) || (!event.defaultPrevented && linkClick(event)))
+                return;
             const target = event.target;
             if (!target)
                 return;

package/dist/editor/preview-path.d.ts

@@ -27,3 +27,8 @@ export declare const siteChromeSrc: (src: string, mount?: PreviewMount) => strin
  * absolute `previewPrefix` mount is what was taken out.
  */
 export declare const displayPreviewPath: (src: string, mount?: PreviewMount) => string;
+/**
+ * The page `url` shows, as origin plus `displayPreviewPath` without a trailing slash, so a preview
+ * link and the entry `src` framing its page match, under the `previewPrefix` mount or not.
+ */
+export declare const previewPageKey: (url: string, mount: PreviewMount, base: string) => string | undefined;

package/dist/editor/preview-path.js

@@ -105,3 +105,21 @@ export const displayPreviewPath = (src, mount = {}) => {
         ? `//${parsed.host}${path}`
         : `${parsed.protocol}//${parsed.host}${path}`;
 };
+/**
+ * The page `url` shows, as origin plus `displayPreviewPath` without a trailing slash, so a preview
+ * link and the entry `src` framing its page match, under the `previewPrefix` mount or not.
+ */
+export const previewPageKey = (url, mount, base) => {
+    let parsed;
+    try {
+        parsed = new URL(url, base);
+    }
+    catch {
+        return undefined;
+    }
+    // A relative mount is a path on the editor's origin, so a URL there is matched to it as a path.
+    const spelled = splitPreviewPrefix(parsed.href, mount) || parsed.origin !== new URL(base).origin
+        ? parsed.href
+        : `${parsed.pathname}${parsed.search}`;
+    return `${parsed.origin}${normalizePreviewPath(displayPreviewPath(spelled, mount))}`;
+};

package/dist/editor/theme.d.ts

@@ -4,6 +4,7 @@ import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
+import 'react-image-crop/dist/ReactCrop.css';
 import '@mdxeditor/editor/style.css';
 export type CanopyColorInput = MantineColorsTuple | string;
 export interface CanopyColorConfig {

package/dist/editor/theme.js

@@ -10,6 +10,7 @@ import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
+import 'react-image-crop/dist/ReactCrop.css';
 import '@mdxeditor/editor/style.css';
 const defaultCanopyColors = {
     brand: '#3b82f6',
@@ -318,7 +319,8 @@ const canopyCssVariablesResolver = (theme) => ({
  * What Mantine draws from class rules, out of the theme variables' reach: unchecked control borders,
  * Switch thumbs, white text on the primary colour (moved to the fill), and dimmed text Mantine
  * draws itself (a blocked menu item, a combobox's empty message, outside days). Outside days lose
- * Mantine's half opacity, under 4.5:1.
+ * Mantine's half opacity, under 4.5:1. The crop box and its handles sit on an arbitrary image, where
+ * no single colour holds 3:1, so they take a white and black pair.
  */
 const CANOPY_STYLES = `
 .mantine-Checkbox-input:not(:checked, :disabled, [data-indeterminate], [data-error]),
@@ -337,6 +339,20 @@ const CANOPY_STYLES = `
   --switch-thumb-bg: var(--canopy-switch-thumb-on, var(--mantine-color-white));
   --switch-thumb-bd: var(--canopy-switch-thumb-on, var(--mantine-color-white));
 }
+.ReactCrop .ReactCrop__crop-selection:focus {
+  outline: 2px solid var(--mantine-color-white);
+  outline-offset: 0;
+  box-shadow: 0 0 0 4px var(--mantine-color-black);
+}
+.ReactCrop .ReactCrop__drag-handle {
+  --rc-drag-handle-bg-colour: var(--mantine-color-white);
+  border-color: var(--mantine-color-black);
+}
+.ReactCrop .ReactCrop__drag-handle:focus {
+  background: var(--canopy-focus-ring);
+  outline: 2px solid var(--mantine-color-white);
+  box-shadow: 0 0 0 4px var(--mantine-color-black);
+}
 [data-combobox-selected] {
   --mantine-primary-color-filled: var(--canopy-primary-fill);
 }

package/dist/server.d.ts

@@ -195,6 +195,8 @@ export { authenticatedAssetBase, readAssetBase } from './editor/raw-asset-base.j
 export { setServerPreviewAssetBaseGetter } from './editor/preview-asset-base.js';
 /** The asset store `createAssetStore` returns and `materializeAssets` takes. */
 export type { AssetStore } from './assets/types.js';
+/** What `AssetStore.presignPublicObjectRead` returns: the URL and how long it may be reused. */
+export type { PresignedRead } from './assets/types.js';
 /** What a create-only store write did: `created`, or `already-exists` (the stored object was kept). */
 export type { CreateOnlyResult } from './assets/types.js';
 /** Thrown by `materializeAssets` when sharp cannot load and keys are missing, so none can be produced. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const CANOPYCMS_VERSION = "0.2.0-int.119";
+export declare const CANOPYCMS_VERSION = "0.2.0-int.121";

package/dist/version.js

@@ -1,3 +1,3 @@
 // Generated by scripts/bump-version.mjs, its only writer. The package builds with plain
 // tsc (rootDir: src), so src/ cannot import ../package.json; version.test.ts keeps the two equal.
-export const CANOPYCMS_VERSION = '0.2.0-int.119';
+export const CANOPYCMS_VERSION = '0.2.0-int.121';

package/package.json

@@ -1,7 +1,7 @@
 {
   "//": "@codemirror/language, @lezer/highlight: workaround — @mdxeditor/editor uses cm6-theme-basic-light which peer-requires these but mdxeditor doesn't declare them as dependencies",
   "name": "canopycms",
-  "version": "0.2.0-int.119",
+  "version": "0.2.0-int.121",
   "description": "CanopyCMS core package: schema-driven content, branch-aware editing, and editor UI for Next.js.",
   "license": "MIT",
   "repository": {
@@ -143,7 +143,7 @@
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
     "proper-lockfile": "^4.1.2",
-    "react-easy-crop": "^6.2.2",
+    "react-image-crop": "^11.1.2",
     "react-remove-scroll": "^2.7.2",
     "react-resizable-panels": "4.14.1",
     "sanitize-html": "^2.17.5",