canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/preview-bridge.js

@@ -1,14 +1,20 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { formatCanopyPath } from './canopy-path.js';
+/**
+ * The preview bridge's protocol and its host-page side: the hooks a framed page runs. Served to
+ * 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 { createFieldProps } from './field-props.js';
+import { setPreviewAssetBase } from './preview-asset-base.js';
 import { isSamePreviewPath } from './preview-path.js';
-export const __CANOPY_PREVIEW_CLIENT__ = true;
+import { readAssetBase } from './raw-asset-base.js';
 export const CANOPY_PREVIEW_MESSAGE = 'canopycms:draft:update';
 export const CANOPY_PREVIEW_FOCUS = 'canopycms:preview:focus';
 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';
 /**
  * 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
@@ -32,7 +38,7 @@ export const resolveMessageOrigin = (url) => {
  * a sandboxed embed shares that string, so it identifies nothing, and postMessage
  * throws on a literal 'null' targetOrigin. '' covers the SSR fallback.
  */
-const isOpaqueOrigin = (origin) => origin === 'null' || origin === '';
+export const isOpaqueOrigin = (origin) => origin === 'null' || origin === '';
 /**
  * True only for messages from the embedding editor window with the expected origin.
  *
@@ -50,14 +56,8 @@ export const isTrustedEditorMessage = (event, editorOrigin) => {
         return false;
     return event.origin === expected && event.source === window.parent;
 };
-export const sendDraftUpdate = (iframe, message, targetOrigin) => {
-    if (!iframe?.contentWindow)
-        return;
-    const target = targetOrigin ?? resolveMessageOrigin(iframe.src);
-    if (isOpaqueOrigin(target))
-        return;
-    iframe.contentWindow.postMessage(message, target);
-};
+/** The most distinct mark paths one report carries, and the longest path it carries. */
+export const MARK_REPORT_LIMITS = { paths: 500, pathLength: 512 };
 const resolvePreviewPath = (explicit) => {
     if (explicit)
         return explicit;
@@ -76,9 +76,7 @@ export const useCanopyPreview = (opts) => {
     const { data, isLoading } = usePreviewData(resolvedPath, opts.initialData, bridgeOpts);
     const highlightEnabled = usePreviewHighlight(bridgeOpts);
     usePreviewFocusEmitter(resolvedPath, bridgeOpts);
-    const fieldProps = (canopyPath) => ({
-        'data-canopy-path': Array.isArray(canopyPath) ? formatCanopyPath(canopyPath) : canopyPath,
-    });
+    const fieldProps = createFieldProps();
     /**
      * Report that the current draft fails to compile/render (the editor surfaces it
      * next to the preview). Call with null once the draft renders cleanly again.
@@ -106,6 +104,7 @@ export const useCanopyPreview = (opts) => {
  */
 export const usePreviewData = (path, initialData, opts) => {
     const [data, setData] = useState(initialData);
+    // Every key of the loading state is optional, so an empty object is a valid one.
     const [isLoading, setIsLoading] = useState({});
     const editorOrigin = opts?.editorOrigin;
     useEffect(() => {
@@ -121,6 +120,8 @@ export const usePreviewData = (path, initialData, opts) => {
                 return;
             if (typeof msg.path !== 'string' || !isSamePreviewPath(msg.path, path))
                 return;
+            // Before setData, so the render the draft triggers already reads it.
+            setPreviewAssetBase(readAssetBase(msg.assetBase));
             setData(msg.data);
             if (msg.isLoading !== undefined) {
                 setIsLoading(msg.isLoading);
@@ -128,8 +129,8 @@ export const usePreviewData = (path, initialData, opts) => {
         };
         window.addEventListener('message', handler);
         // Notify parent that this preview page is ready to receive draft updates.
-        // This is needed because onLoad in the parent fires before React effects run,
-        // so the first postMessage from the parent arrives before this listener is set up.
+        // This is needed because onLoad in the parent can fire before React effects run,
+        // so the first postMessage from the parent may arrive before this listener is set up.
         const target = resolveMessageOrigin(editorOrigin);
         if (!isOpaqueOrigin(target)) {
             window.parent.postMessage({ type: CANOPY_PREVIEW_READY, path }, target);
@@ -138,6 +139,26 @@ export const usePreviewData = (path, initialData, opts) => {
     }, [path, editorOrigin]);
     return { data, isLoading };
 };
+/** React 18 warns about a layout effect in a server render, where no effect runs. */
+const useBrowserLayoutEffect = (effect, deps) => (typeof window === 'undefined' ? useEffect : useLayoutEffect)(effect, deps);
+/**
+ * Holds a `createPreviewPage` view back until hydration commits, then stores `assetBase` and opens
+ * before paint: the server HTML has no public `/assets/t/` URL and nothing to mismatch. A draft's
+ * prefix still wins, since drafts follow the ready message `usePreviewData` posts from a passive
+ * effect. With no `assetBase` (a public page) it is open from the start.
+ * @internal `withCanopyPreview` is its only caller.
+ */
+export const usePreviewAssetBaseGate = (assetBase) => {
+    const held = assetBase !== undefined;
+    const [open, setOpen] = useState(!held);
+    useBrowserLayoutEffect(() => {
+        if (open)
+            return;
+        setPreviewAssetBase(readAssetBase(assetBase));
+        setOpen(true);
+    }, [open, assetBase]);
+    return open;
+};
 /**
  * Hook for preview pages to listen for highlight mode and toggle an outline on clickable elements.
  */
@@ -175,6 +196,70 @@ export const usePreviewHighlight = (opts) => {
         window.addEventListener('message', handler);
         return () => window.removeEventListener('message', handler);
     }, [editorOrigin]);
+    // Reported after the render that turned highlighting on, whenever the marks change (content
+    // rendered after hydration), and after every trusted draft even when they do not: the editor checks a
+    // report against its draft as it stood when the report arrived, so a block whose template
+    // changed under unchanged marks needs a fresh one.
+    useEffect(() => {
+        if (!enabled || window.parent === window)
+            return;
+        const target = resolveMessageOrigin(editorOrigin);
+        if (isOpaqueOrigin(target))
+            return;
+        let reported;
+        const report = () => {
+            const marks = document.querySelectorAll('[data-canopy-path]');
+            const paths = new Set();
+            for (const mark of marks) {
+                if (paths.size === MARK_REPORT_LIMITS.paths)
+                    break;
+                const path = mark.getAttribute('data-canopy-path') ?? '';
+                if (path.length <= MARK_REPORT_LIMITS.pathLength)
+                    paths.add(path);
+            }
+            const msg = {
+                type: CANOPY_PREVIEW_MARKS,
+                count: marks.length,
+                paths: [...paths],
+            };
+            const key = JSON.stringify([msg.count, msg.paths]);
+            if (key === reported)
+                return;
+            reported = key;
+            window.parent.postMessage(msg, target);
+        };
+        report();
+        // A trailing throttle, so steady DOM churn cannot hold the report back, on a timer rather
+        // than requestAnimationFrame, which a hidden frame never runs. It also gives a draft time to
+        // render before the report it triggers.
+        let timer;
+        const schedule = () => {
+            timer ??= setTimeout(() => {
+                timer = undefined;
+                report();
+            }, 100);
+        };
+        const observer = new MutationObserver(schedule);
+        observer.observe(document.body, {
+            subtree: true,
+            childList: true,
+            attributeFilter: ['data-canopy-path'],
+        });
+        const onDraft = (event) => {
+            if (!isTrustedEditorMessage(event, editorOrigin))
+                return;
+            if (event.data?.type !== CANOPY_PREVIEW_MESSAGE)
+                return;
+            reported = undefined;
+            schedule();
+        };
+        window.addEventListener('message', onDraft);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('message', onDraft);
+            clearTimeout(timer);
+        };
+    }, [enabled, editorOrigin]);
     return enabled;
 };
 /**
@@ -207,129 +292,3 @@ export const usePreviewFocusEmitter = (entryPath, opts) => {
         return () => document.removeEventListener('click', handleClick);
     }, [entryPath, editorOrigin]);
 };
-/**
- * Lightweight iframe wrapper to keep the preview in sync with form state.
- * It posts the latest draft data to the iframe after load and when data changes.
- */
-export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, }) => {
-    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
-    // silently stops participating in the bridge.
-    const previewOrigin = resolveMessageOrigin(src);
-    // Show progress bar while waiting for the preview's ready handshake.
-    const [syncPending, setSyncPending] = useState(data !== undefined);
-    // Reset when navigating to a different entry (src change = new iframe page load).
-    const [prevSrc, setPrevSrc] = useState(src);
-    if (src !== prevSrc) {
-        setPrevSrc(src);
-        setSyncPending(data !== undefined);
-    }
-    // Inject the progress bar keyframe animation once per page.
-    useEffect(() => {
-        const styleId = 'canopycms-preview-sync-style';
-        if (!document.getElementById(styleId)) {
-            const el = document.createElement('style');
-            el.id = styleId;
-            el.textContent = `@keyframes canopy-preview-sync { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }`;
-            document.head.appendChild(el);
-        }
-    }, []);
-    const post = () => {
-        if (data === undefined)
-            return;
-        sendDraftUpdate(iframeRef.current, {
-            type: CANOPY_PREVIEW_MESSAGE,
-            path,
-            data,
-            isLoading,
-        }, previewOrigin);
-    };
-    const postHighlight = () => {
-        if (!iframeRef.current?.contentWindow)
-            return;
-        if (isOpaqueOrigin(previewOrigin))
-            return;
-        const msg = {
-            type: CANOPY_PREVIEW_HIGHLIGHT,
-            enabled: Boolean(highlightEnabled),
-        };
-        iframeRef.current.contentWindow.postMessage(msg, previewOrigin);
-    };
-    // Keep refs pointing at the latest closures so the message handler below never goes stale.
-    const postRef = useRef(post);
-    const postHighlightRef = useRef(postHighlight);
-    const onPreviewErrorRef = useRef(onPreviewError);
-    useEffect(() => {
-        postRef.current = post;
-        postHighlightRef.current = postHighlight;
-        onPreviewErrorRef.current = onPreviewError;
-    });
-    useEffect(() => {
-        post();
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
-    }, [data, isLoading]);
-    useEffect(() => {
-        postHighlight();
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- postHighlight is tracked via ref
-    }, [highlightEnabled]);
-    // When the preview page's React effects have run and its message listener is ready,
-    // it sends CANOPY_PREVIEW_READY. We respond with the current data so the preview
-    // receives the draft even if it wasn't ready when onLoad fired.
-    useEffect(() => {
-        const handleMessage = (event) => {
-            if (!iframeRef.current || event.source !== iframeRef.current.contentWindow)
-                return;
-            // Source check alone is insufficient if the iframe navigated cross-origin.
-            if (isOpaqueOrigin(previewOrigin) || event.origin !== previewOrigin)
-                return;
-            const type = event.data?.type;
-            if (type === CANOPY_PREVIEW_READY) {
-                postRef.current();
-                postHighlightRef.current();
-                setSyncPending(false);
-            }
-            else if (type === CANOPY_PREVIEW_ERROR) {
-                const msg = event.data;
-                // Shape-check the payload: an adopter passing an Error object (instead of
-                // err.message) must not crash the editor when rendered as a React child.
-                if (msg.message != null && typeof msg.message !== 'string')
-                    return;
-                const fieldPath = typeof msg.fieldPath === 'string' ? msg.fieldPath : undefined;
-                onPreviewErrorRef.current?.(msg.message == null
-                    ? null
-                    : { message: msg.message, ...(fieldPath ? { fieldPath } : {}) });
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        return () => window.removeEventListener('message', handleMessage);
-    }, [previewOrigin]);
-    return (_jsxs("div", { className: className, style: { position: 'relative', overflow: 'hidden', ...style }, children: [syncPending && (_jsx("div", { style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    height: 3,
-                    zIndex: 1,
-                    overflow: 'hidden',
-                }, children: _jsx("div", { style: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        height: '100%',
-                        width: '40%',
-                        background: 'var(--mantine-color-blue-filled, #228be6)',
-                        borderRadius: '0 2px 2px 0',
-                        animation: 'canopy-preview-sync 1.5s ease-in-out infinite',
-                    } }) })), _jsx("iframe", { ref: iframeRef, src: src, style: {
-                    display: 'block',
-                    position: 'absolute',
-                    inset: 0,
-                    width: '100%',
-                    height: '100%',
-                    border: 'none',
-                }, onLoad: () => {
-                    post();
-                    postHighlight();
-                } })] }));
-};

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

@@ -0,0 +1,15 @@
+import type { FieldConfig } from '../config/index.js';
+/** A preview mark whose path names no field of the entry, and the closest path that does. */
+export interface InexactMark {
+    /** The mark's path, normalized. */
+    path: string;
+    /** Its longest prefix that names a field, absent when not even the first segment does. */
+    nearest?: string;
+}
+/**
+ * The marks naming no field: a key the schema lacks, a segment below a reference, image or
+ * scalar, or another template's field. Walks the schema, not the form's DOM, which leaves out
+ * collapsed fields; the draft only picks a block item's template, and an item it lacks takes
+ * every path, since marks can trail a draft by one report.
+ */
+export declare const findInexactMarks: (fields: readonly FieldConfig[], data: unknown, paths: readonly string[]) => InexactMark[];

package/dist/editor/preview-marks.js

@@ -0,0 +1,74 @@
+import { flattenGroupFields } from '../utils/flatten-group-fields.js';
+import { resolveBlockItem } from '../validation/field-traversal.js';
+import { formatCanopyPath, normalizeCanopyPath, parseCanopyPath } from './canopy-path.js';
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const itemAt = (list, index) => Array.isArray(list) ? list[index] : undefined;
+const enterField = (field, value) => {
+    if (field.type === 'block')
+        return { kind: 'blocks', field: field, data: value };
+    if ('list' in field && field.list)
+        return { kind: 'items', field, data: value };
+    if (field.type === 'object') {
+        return { kind: 'record', fields: field.fields, data: value };
+    }
+    return { kind: 'leaf' };
+};
+const step = (position, segment) => {
+    switch (position.kind) {
+        case 'unknown':
+            return position;
+        case 'leaf':
+            return undefined;
+        case 'record': {
+            if (typeof segment !== 'string')
+                return undefined;
+            const field = flattenGroupFields(position.fields).find((f) => f.name === segment);
+            if (!field)
+                return undefined;
+            return enterField(field, isRecord(position.data) ? position.data[segment] : undefined);
+        }
+        case 'items': {
+            if (typeof segment !== 'number')
+                return undefined;
+            if (position.field.type !== 'object')
+                return { kind: 'leaf' };
+            const fields = position.field.fields;
+            return { kind: 'record', fields, data: itemAt(position.data, segment) };
+        }
+        case 'blocks': {
+            if (typeof segment !== 'number')
+                return undefined;
+            const item = itemAt(position.data, segment);
+            const resolved = isRecord(item) ? resolveBlockItem(position.field, item) : undefined;
+            return resolved ? { kind: 'record', ...resolved } : { kind: 'unknown' };
+        }
+    }
+};
+/**
+ * The marks naming no field: a key the schema lacks, a segment below a reference, image or
+ * scalar, or another template's field. Walks the schema, not the form's DOM, which leaves out
+ * collapsed fields; the draft only picks a block item's template, and an item it lacks takes
+ * every path, since marks can trail a draft by one report.
+ */
+export const findInexactMarks = (fields, data, paths) => {
+    const inexact = new Map();
+    for (const raw of paths) {
+        const path = normalizeCanopyPath(raw);
+        const segments = parseCanopyPath(path);
+        let position = { kind: 'record', fields, data };
+        let matched = 0;
+        for (const segment of segments) {
+            position = step(position, segment);
+            if (!position)
+                break;
+            matched++;
+        }
+        if (position && segments.length > 0)
+            continue;
+        inexact.set(path, {
+            path,
+            ...(matched > 0 ? { nearest: formatCanopyPath(segments.slice(0, matched)) } : {}),
+        });
+    }
+    return [...inexact.values()];
+};

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

@@ -8,3 +8,15 @@
 export declare const normalizePreviewPath: (url: string) => string;
 /** Whether two preview URLs name the same page; see `normalizePreviewPath`. */
 export declare const isSamePreviewPath: (a: string, b: string) => boolean;
+/** Where `buildPreviewSrc` mounts the preview routes, and the `basePath` the site's pages keep. */
+export interface PreviewMount {
+    basePath?: string;
+    previewPrefix?: string;
+}
+/**
+ * The previewed page's path on the site, as the preview toolbar shows and copies it: without the
+ * `previewPrefix` mount, the `branch` query the top bar already names, or a fragment. A relative
+ * URL stays relative. An absolute one keeps its origin, since it may be another site, unless an
+ * absolute `previewPrefix` mount is what was taken out.
+ */
+export declare const displayPreviewPath: (src: string, mount?: PreviewMount) => string;

package/dist/editor/preview-path.js

@@ -1,4 +1,4 @@
-import { stripTrailingSlashes } from '../utils/url-prefix.js';
+import { isAbsoluteUrl, joinUrlPrefix, stripTrailingSlashes } from '../utils/url-prefix.js';
 /**
  * Reduces a preview URL to what identifies the page, its path and query, with no origin,
  * fragment or trailing slash. The editor names a page by the `src` it built and the framed page
@@ -18,3 +18,47 @@ export const normalizePreviewPath = (url) => {
 };
 /** Whether two preview URLs name the same page; see `normalizePreviewPath`. */
 export const isSamePreviewPath = (a, b) => normalizePreviewPath(a) === normalizePreviewPath(b);
+/** `url` with the `previewPrefix` mount taken out, so `/base/preview/posts/x` reads `/base/posts/x`. */
+const stripPreviewPrefix = (url, { basePath, previewPrefix }) => {
+    if (!previewPrefix || !stripTrailingSlashes(previewPrefix))
+        return url;
+    const mount = stripTrailingSlashes(joinUrlPrefix(basePath, joinUrlPrefix(previewPrefix, '/')));
+    if (!url.startsWith(mount))
+        return url;
+    const rest = url.slice(mount.length);
+    if (rest !== '' && !/^[/?#]/.test(rest))
+        return url;
+    // An absolute prefix skips `basePath`, so the page under it has none either.
+    const base = isAbsoluteUrl(mount) ? '' : stripTrailingSlashes(joinUrlPrefix(basePath, '/'));
+    return rest.startsWith('/') ? `${base}${rest}` : `${base || '/'}${rest}`;
+};
+/**
+ * The previewed page's path on the site, as the preview toolbar shows and copies it: without the
+ * `previewPrefix` mount, the `branch` query the top bar already names, or a fragment. A relative
+ * URL stays relative. An absolute one keeps its origin, since it may be another site, unless an
+ * absolute `previewPrefix` mount is what was taken out.
+ */
+export const displayPreviewPath = (src, mount = {}) => {
+    const url = stripPreviewPrefix(src, mount);
+    let parsed;
+    try {
+        parsed = new URL(url, 'http://preview.invalid');
+    }
+    catch {
+        return url;
+    }
+    // Filtered as text: a URLSearchParams round trip would form-encode the query it keeps (`flag`
+    // becomes `flag=`, `%20` becomes `+`).
+    const query = parsed.search
+        .slice(1)
+        .split('&')
+        .filter((part) => part !== '' && part.split('=', 1)[0] !== 'branch')
+        .join('&');
+    const path = `${parsed.pathname}${query ? `?${query}` : ''}`;
+    if (!isAbsoluteUrl(url))
+        return path;
+    // `origin` is 'null' for a scheme the URL spec does not treat as special.
+    return url.startsWith('//')
+        ? `//${parsed.host}${path}`
+        : `${parsed.protocol}//${parsed.host}${path}`;
+};

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

@@ -0,0 +1,27 @@
+import type { PreviewWidth } from './hooks/useEditorLayout.js';
+/** The CSS width each fixed preview width renders the site at. */
+export declare const PREVIEW_DEVICE_WIDTHS: {
+    readonly desktop: 1280;
+    readonly tablet: 768;
+    readonly mobile: 390;
+};
+/** Where and how large the preview iframe renders inside a pane of a given size. */
+export interface PreviewViewport {
+    /** The iframe's CSS width: the width the site's breakpoints see. */
+    frameWidth: number;
+    /** The iframe's CSS height, before scaling; scaled, it fills the pane's height. */
+    frameHeight: number;
+    /** The factor the iframe is scaled by, at most 1. */
+    scale: number;
+    /** The left offset that centres the scaled iframe in the pane. */
+    offsetX: number;
+}
+/**
+ * Fits the preview into a pane. "fit" renders at the pane's width. A fixed width renders at
+ * exactly that CSS width and, when the pane is narrower, scales down so the whole width shows,
+ * stretching the CSS height by the same factor so the scaled frame still fills the pane's height.
+ * An unmeasured pane (zero or non-finite) renders unscaled.
+ */
+export declare function computePreviewViewport(previewWidth: PreviewWidth, paneWidth: number, paneHeight: number): PreviewViewport;
+/** The readout beside the width selector: the CSS width, plus the scale when it rounds below 100%. */
+export declare function formatPreviewWidthReadout({ frameWidth, scale }: PreviewViewport): string;

package/dist/editor/preview-scale.js

@@ -0,0 +1,34 @@
+/** The CSS width each fixed preview width renders the site at. */
+export const PREVIEW_DEVICE_WIDTHS = {
+    desktop: 1280,
+    tablet: 768,
+    mobile: 390,
+};
+const positiveOr = (value, fallback) => Number.isFinite(value) && value > 0 ? value : fallback;
+/**
+ * Fits the preview into a pane. "fit" renders at the pane's width. A fixed width renders at
+ * exactly that CSS width and, when the pane is narrower, scales down so the whole width shows,
+ * stretching the CSS height by the same factor so the scaled frame still fills the pane's height.
+ * An unmeasured pane (zero or non-finite) renders unscaled.
+ */
+export function computePreviewViewport(previewWidth, paneWidth, paneHeight) {
+    const width = positiveOr(paneWidth, 0);
+    const height = positiveOr(paneHeight, 0);
+    if (previewWidth === 'fit') {
+        return { frameWidth: width, frameHeight: height, scale: 1, offsetX: 0 };
+    }
+    const frameWidth = PREVIEW_DEVICE_WIDTHS[previewWidth];
+    const scale = width > 0 ? Math.min(1, width / frameWidth) : 1;
+    return {
+        frameWidth,
+        frameHeight: height / scale,
+        scale,
+        offsetX: width > 0 ? Math.max(0, (width - frameWidth * scale) / 2) : 0,
+    };
+}
+/** The readout beside the width selector: the CSS width, plus the scale when it rounds below 100%. */
+export function formatPreviewWidthReadout({ frameWidth, scale }) {
+    const px = `${Math.round(frameWidth)} px`;
+    const percent = Math.round(scale * 100);
+    return percent < 100 ? `${px} at ${percent}%` : px;
+}

package/dist/editor/raw-asset-base.d.ts

@@ -0,0 +1,5 @@
+/** The signed-in asset prefix, React-free so `createPreviewPage` can build it on a server. */
+/** The raw route under `basePath`: unlike `/assets`, it computes derivatives no build made. */
+export declare function authenticatedAssetBase(basePath?: string): string;
+/** `value` if it is a same-origin path: nothing else may steer a preview's `<img>`s. */
+export declare function readAssetBase(value: unknown): string | undefined;

package/dist/editor/raw-asset-base.js

@@ -0,0 +1,14 @@
+/** The signed-in asset prefix, React-free so `createPreviewPage` can build it on a server. */
+import { joinUrlPrefix, toSameOriginPath } from '../utils/url-prefix.js';
+/** The raw asset route (`api/assets.ts`'s `assetRawRoute`) under the default API base. */
+const RAW_ASSET_ROUTE = '/api/canopycms/assets/raw';
+/** The raw route under `basePath`: unlike `/assets`, it computes derivatives no build made. */
+export function authenticatedAssetBase(basePath) {
+    return joinUrlPrefix(basePath, RAW_ASSET_ROUTE);
+}
+/** `value` if it is a same-origin path: nothing else may steer a preview's `<img>`s. */
+export function readAssetBase(value) {
+    return typeof value === 'string' && value.startsWith('/') && toSameOriginPath(value) === value
+        ? value
+        : undefined;
+}

package/dist/editor/relative-time.d.ts

@@ -1,7 +1,7 @@
 /**
- * Formats an ISO timestamp as a short relative-time label ("just now",
- * "5m ago", "3h ago", "2d ago"), falling back to a locale date string once
- * the timestamp is more than a week old. Invalid input is returned
- * unchanged so callers never render "Invalid Date" to the user.
+ * Formats an ISO timestamp as a short relative-time label ("just now", "5m ago", "3h ago",
+ * "2d ago", "2w ago", "3mo ago", "1y ago"). Weeks run to 4, months to 11. A timestamp in the
+ * future reads "just now", and invalid input is returned unchanged so callers never render
+ * "Invalid Date" to the user.
  */
 export declare function formatRelativeTime(iso: string): string;

package/dist/editor/relative-time.js

@@ -1,8 +1,11 @@
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
 /**
- * Formats an ISO timestamp as a short relative-time label ("just now",
- * "5m ago", "3h ago", "2d ago"), falling back to a locale date string once
- * the timestamp is more than a week old. Invalid input is returned
- * unchanged so callers never render "Invalid Date" to the user.
+ * Formats an ISO timestamp as a short relative-time label ("just now", "5m ago", "3h ago",
+ * "2d ago", "2w ago", "3mo ago", "1y ago"). Weeks run to 4, months to 11. A timestamp in the
+ * future reads "just now", and invalid input is returned unchanged so callers never render
+ * "Invalid Date" to the user.
  */
 export function formatRelativeTime(iso) {
     const date = new Date(iso);
@@ -10,16 +13,21 @@ export function formatRelativeTime(iso) {
         return iso;
     }
     const diffMs = Date.now() - date.getTime();
-    const minutes = Math.floor(diffMs / (1000 * 60));
+    const minutes = Math.floor(diffMs / MINUTE_MS);
     if (minutes < 1)
         return 'just now';
     if (minutes < 60)
         return `${minutes}m ago`;
-    const hours = Math.floor(diffMs / (1000 * 60 * 60));
+    const hours = Math.floor(diffMs / HOUR_MS);
     if (hours < 24)
         return `${hours}h ago`;
-    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    const days = Math.floor(diffMs / DAY_MS);
     if (days < 7)
         return `${days}d ago`;
-    return date.toLocaleDateString();
+    if (days < 35)
+        return `${Math.floor(days / 7)}w ago`;
+    const years = Math.floor(days / 365);
+    if (years >= 1)
+        return `${years}y ago`;
+    return `${Math.min(11, Math.max(1, Math.floor(days / 30)))}mo ago`;
 }

package/dist/editor/schema-editor/CollectionEditor.d.ts

@@ -39,10 +39,27 @@ export interface CollectionEditorProps {
     onAddEntryType?: (collectionPath: LogicalPath, entryType: CreateEntryTypeInput) => Promise<SchemaOpResult>;
     /** Called when an entry type is updated (edit mode only); resolves to the save result */
     onUpdateEntryType?: (collectionPath: LogicalPath, entryTypeName: string, updates: Partial<CreateEntryTypeInput>) => Promise<SchemaOpResult>;
-    /** Called when an entry type is removed (edit mode only) */
-    onRemoveEntryType?: (collectionPath: LogicalPath, entryTypeName: string) => Promise<SchemaOpResult> | void;
+    /** Called when an entry type is removed (edit mode only); resolves to the save result */
+    onRemoveEntryType?: (collectionPath: LogicalPath, entryTypeName: string) => Promise<SchemaOpResult>;
+    /**
+     * Re-reads the entry types from the branch (edit mode only), after an action the server never
+     * answered; resolves to null when the read fails.
+     */
+    onReloadEntryTypes?: (collectionPath: LogicalPath) => Promise<ExistingEntryType[] | null>;
     onClose: () => void;
     isSaving?: boolean;
     error?: string | null;
+    /**
+     * What was entered for a create or details save that got no answer and that the opener's fresh
+     * read did not show landed, filled in when the dialog opens (docs/ux-guidelines.md: a create closed after no answer
+     * prefills its dialog's next open).
+     */
+    restored?: RestoredCollectionInput | null;
+    /** Drops `restored`, once the user discards it. */
+    onDiscardRestored?: () => void;
 }
-export declare function CollectionEditor({ isOpen, editingCollection, parentPath, availableSchemas, onSave, onAddEntryType, onUpdateEntryType, onRemoveEntryType, onClose, isSaving, error, }: CollectionEditorProps): import("react/jsx-runtime").JSX.Element;
+/** A create's input, or a details save's changed fields. */
+export type RestoredCollectionInput = Partial<CollectionFormData> & {
+    slug?: string;
+};
+export declare function CollectionEditor({ isOpen, editingCollection, parentPath, availableSchemas, onSave, onAddEntryType, onUpdateEntryType, onRemoveEntryType, onReloadEntryTypes, onClose, isSaving, error, restored, onDiscardRestored, }: CollectionEditorProps): import("react/jsx-runtime").JSX.Element;