canopycms 0.2.0-int.119 → 0.2.0

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,12 @@ 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. A navigator row's lock is
+ * drawn only while its row is hovered, focused (Mantine's Tree focuses the `li` around the row, on click and arrow keys), has focus
+ * within, or is selected. It hides by opacity alone, so it keeps its place and stays in the tab order
+ * and the accessibility tree; while hidden it takes no pointer events, so a tap on its slot reaches
+ * the row.
  */
 const CANOPY_STYLES = `
 .mantine-Checkbox-input:not(:checked, :disabled, [data-indeterminate], [data-error]),
@@ -337,6 +343,37 @@ 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-nav-row] [data-row-lock] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+[data-nav-row]:hover [data-row-lock],
+[data-nav-row]:focus-within [data-row-lock],
+[role='treeitem']:focus > [data-nav-row] [data-row-lock],
+[data-nav-row][data-nav-selected] [data-row-lock] {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-nav-row] [data-row-lock] {
+    transition: none;
+  }
+}
 [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";

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';

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",
   "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",