canopycms 0.0.68-int.98 → 0.1.0

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

@@ -0,0 +1,30 @@
+import type { AssetRecord } from '../../api/index.js';
+interface AssetLibraryError {
+    message: string;
+    /** True when page 1 failed: nothing is loaded, and retrying starts over. */
+    firstPage: boolean;
+}
+export interface UseAssetLibraryResult {
+    assets: AssetRecord[];
+    /** Page 1 is in; the library is renderable even while later pages load. */
+    firstPageLoaded: boolean;
+    /** Every page is in. */
+    complete: boolean;
+    error: AssetLibraryError | null;
+    /** Resumes from the page that failed; starts over when page 1 failed or the listing moved. */
+    retry: () => void;
+    /** Puts an uploaded asset in the list; the one already loaded under its hash is replaced. */
+    prepend: (asset: AssetRecord) => void;
+    /** Drops a deleted asset, including from a page still on its way. */
+    remove: (hash32: string) => void;
+}
+/**
+ * Loads the whole library in the background while `opened`: page 1 first, then each following
+ * page in turn, so search and sort see every asset. Closing (or unmounting) stops the walk, and
+ * reopening starts again from page 1.
+ *
+ * Finalize dedups content, so a re-uploaded file comes back as an existing record that may also
+ * arrive in a later page; assets are merged by `hash32`.
+ */
+export declare function useAssetLibrary(opened: boolean): UseAssetLibraryResult;
+export {};

package/dist/editor/media/useAssetLibrary.js

@@ -0,0 +1,126 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getErrorMessage } from '../../utils/error.js';
+import { useApiClient } from '../context/index.js';
+const PAGE_SIZE = 40;
+/** Appends the incoming assets not already present; the first copy of a hash wins. */
+function mergeAssets(existing, incoming, removed) {
+    const seen = new Set(existing.map((asset) => asset.hash32));
+    const added = [];
+    for (const asset of incoming) {
+        if (seen.has(asset.hash32) || removed.has(asset.hash32))
+            continue;
+        seen.add(asset.hash32);
+        added.push(asset);
+    }
+    return added.length === 0 ? [...existing] : [...existing, ...added];
+}
+/**
+ * Loads the whole library in the background while `opened`: page 1 first, then each following
+ * page in turn, so search and sort see every asset. Closing (or unmounting) stops the walk, and
+ * reopening starts again from page 1.
+ *
+ * Finalize dedups content, so a re-uploaded file comes back as an existing record that may also
+ * arrive in a later page; assets are merged by `hash32`.
+ */
+export function useAssetLibrary(opened) {
+    const client = useApiClient();
+    const [assets, setAssets] = useState([]);
+    const [firstPageLoaded, setFirstPageLoaded] = useState(false);
+    const [complete, setComplete] = useState(false);
+    const [error, setError] = useState(null);
+    // A response whose runId is no longer current belongs to a closed opening or a superseded
+    // walk, and is dropped.
+    const generation = useRef(0);
+    // Cursors already requested; a server that returns one twice would otherwise loop forever.
+    const requested = useRef(new Set());
+    const removed = useRef(new Set());
+    const failedCursor = useRef(undefined);
+    const walk = useCallback(async (startCursor, runId) => {
+        let cursor = startCursor;
+        for (;;) {
+            if (cursor !== undefined)
+                requested.current.add(cursor);
+            let page;
+            let message = '';
+            try {
+                const result = await client.assets.list(cursor === undefined
+                    ? { limit: String(PAGE_SIZE) }
+                    : { cursor, limit: String(PAGE_SIZE) });
+                if (result.ok && result.data)
+                    page = result.data;
+                else
+                    message = result.error || 'The server did not return the list.';
+            }
+            catch (err) {
+                message = getErrorMessage(err);
+            }
+            if (runId !== generation.current)
+                return;
+            if (!page) {
+                failedCursor.current = cursor;
+                if (cursor !== undefined)
+                    requested.current.delete(cursor);
+                setError({ message, firstPage: cursor === undefined });
+                return;
+            }
+            const incoming = page.assets;
+            setAssets((prev) => mergeAssets(prev, incoming, removed.current));
+            if (cursor === undefined)
+                setFirstPageLoaded(true);
+            const next = page.nextCursor;
+            if (!next) {
+                setComplete(true);
+                return;
+            }
+            // A cursor seen before means the listing moved under the walk (the local store restarts
+            // from page 1 when its anchor asset is deleted), so pages may be missing: never report
+            // that as complete. Retry starts over.
+            if (requested.current.has(next)) {
+                failedCursor.current = undefined;
+                setError({ message: 'The library changed while it was loading.', firstPage: false });
+                return;
+            }
+            cursor = next;
+        }
+    }, [client]);
+    const start = useCallback(() => {
+        generation.current += 1;
+        requested.current = new Set();
+        removed.current = new Set();
+        failedCursor.current = undefined;
+        setAssets([]);
+        setFirstPageLoaded(false);
+        setComplete(false);
+        setError(null);
+        void walk(undefined, generation.current);
+    }, [walk]);
+    useEffect(() => {
+        if (!opened)
+            return;
+        start();
+        return () => {
+            generation.current += 1;
+        };
+        // Restart only when the drawer/modal (re)opens, not when `start`'s identity changes.
+    }, [opened]);
+    const retry = useCallback(() => {
+        const cursor = failedCursor.current;
+        if (cursor === undefined) {
+            start();
+            return;
+        }
+        generation.current += 1;
+        setError(null);
+        void walk(cursor, generation.current);
+    }, [start, walk]);
+    const prepend = useCallback((asset) => {
+        removed.current.delete(asset.hash32);
+        setAssets((prev) => [asset, ...prev.filter((existing) => existing.hash32 !== asset.hash32)]);
+    }, []);
+    const remove = useCallback((hash32) => {
+        removed.current.add(hash32);
+        setAssets((prev) => prev.filter((existing) => existing.hash32 !== hash32));
+    }, []);
+    return { assets, firstPageLoaded, complete, error, retry, prepend, remove };
+}

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

@@ -0,0 +1,11 @@
+import type { AssetRecord } from '../../api/index.js';
+import { type MediaSort } from './media-library-view.js';
+/**
+ * The assets in display order, which holds still while pages arrive: each new page is sorted and
+ * appended after what is already shown, and the whole list is re-sorted only when `sort` changes
+ * or loading completes. The list API pages in storage order (hash order on S3), so a live re-sort
+ * would move cards under the pointer and a picker click could choose the wrong asset.
+ *
+ * `pinned` hashes (this opening's uploads, newest first) lead the list whatever the sort.
+ */
+export declare function useStableAssetOrder(assets: readonly AssetRecord[], sort: MediaSort, complete: boolean, pinned: readonly string[]): AssetRecord[];

package/dist/editor/media/useStableAssetOrder.js

@@ -0,0 +1,37 @@
+'use client';
+import { useState } from 'react';
+import { sortAssets } from './media-library-view.js';
+/**
+ * The assets in display order, which holds still while pages arrive: each new page is sorted and
+ * appended after what is already shown, and the whole list is re-sorted only when `sort` changes
+ * or loading completes. The list API pages in storage order (hash order on S3), so a live re-sort
+ * would move cards under the pointer and a picker click could choose the wrong asset.
+ *
+ * `pinned` hashes (this opening's uploads, newest first) lead the list whatever the sort.
+ */
+export function useStableAssetOrder(assets, sort, complete, pinned) {
+    const key = `${sort}|${complete}`;
+    const [state, setState] = useState(() => ({
+        key,
+        order: sortAssets(assets, sort).map((asset) => asset.hash32),
+    }));
+    let order = state.order;
+    if (state.key !== key) {
+        order = sortAssets(assets, sort).map((asset) => asset.hash32);
+    }
+    else {
+        const known = new Set(order);
+        const fresh = assets.filter((asset) => !known.has(asset.hash32));
+        if (fresh.length > 0)
+            order = [...order, ...sortAssets(fresh, sort).map((a) => a.hash32)];
+    }
+    // Adjusting state during render rather than in an effect avoids a frame in the old order:
+    // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    if (order !== state.order)
+        setState({ key, order });
+    const byHash = new Map(assets.map((asset) => [asset.hash32, asset]));
+    const pinnedSet = new Set(pinned);
+    const lead = pinned.flatMap((hash) => byHash.get(hash) ?? []);
+    const rest = order.flatMap((hash) => (pinnedSet.has(hash) ? [] : (byHash.get(hash) ?? [])));
+    return [...lead, ...rest];
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Whether the thumbnail at `src` failed to load. A new `src` clears the failure, so a thumbnail
+ * that failed once gets another chance. Adjusting state during render, not in an effect, avoids
+ * an extra pass: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+ */
+export declare function useThumbnailFailure(src: string): [boolean, () => void];

package/dist/editor/media/useThumbnailFailure.js

@@ -0,0 +1,16 @@
+'use client';
+import { useState } from 'react';
+/**
+ * Whether the thumbnail at `src` failed to load. A new `src` clears the failure, so a thumbnail
+ * that failed once gets another chance. Adjusting state during render, not in an effect, avoids
+ * an extra pass: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+ */
+export function useThumbnailFailure(src) {
+    const [failed, setFailed] = useState(false);
+    const [prevSrc, setPrevSrc] = useState(src);
+    if (src !== prevSrc) {
+        setPrevSrc(src);
+        setFailed(false);
+    }
+    return [failed, () => setFailed(true)];
+}

package/dist/editor/permission-manager/GroupSelector.js

@@ -10,7 +10,7 @@ export const GroupSelector = ({ searchQuery, onSearchChange, filteredGroups, onS
     return (_jsx(Paper, { withBorder: true, p: "xs", mt: "xs", style: { maxWidth: 300 }, children: _jsxs(Stack, { gap: "xs", children: [_jsx("input", { type: "text", placeholder: "Search groups...", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), "aria-label": "Search groups", style: {
                         width: '100%',
                         padding: '4px 6px',
-                        border: '1px solid var(--mantine-color-gray-4)',
+                        border: '1px solid var(--canopy-input-border)',
                         borderRadius: 'var(--mantine-radius-sm)',
                         fontSize: '12px',
                     } }), filteredGroups.length > 0 && (_jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: filteredGroups.map((group) => (_jsx("div", { style: {
@@ -19,7 +19,7 @@ export const GroupSelector = ({ searchQuery, onSearchChange, filteredGroups, onS
                             borderRadius: 'var(--mantine-radius-sm)',
                             fontSize: '12px',
                         }, onMouseEnter: (e) => {
-                            e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-1)';
+                            e.currentTarget.style.backgroundColor = 'var(--mantine-color-default-hover)';
                         }, onMouseLeave: (e) => {
                             e.currentTarget.style.backgroundColor = 'transparent';
                         }, onClick: () => onSelectGroup(group.value), children: _jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", children: [_jsx("span", { children: group.label }), _jsx(Text, { size: "10px", c: "dimmed", style: { flexShrink: 0 }, children: GROUP_SOURCE_LABELS[group.source] })] }) }, group.value))) })), searchQuery.trim() && filteredGroups.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No groups found" }))] }) }));

package/dist/editor/permission-manager/PermissionEditor.d.ts

@@ -14,7 +14,7 @@ export interface PermissionEditorProps {
     userSearchQuery: string;
     userSearchError: string | null;
     onSearchUsers: (query: string) => void;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     onToggleUserSearch: (show: boolean) => void;
     onAddUser: (path: string, level: PermissionLevel, userId: string) => void;
     onRemoveUser: (path: string, level: PermissionLevel, userId: string) => void;

package/dist/editor/permission-manager/PermissionEditor.js

@@ -1,12 +1,17 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { ActionIcon, Badge, Button, Group, Paper, Stack, Tabs, Text, Tooltip } from '@mantine/core';
 import { IconSearch, IconX, IconUserOff } from '@tabler/icons-react';
 import { PERMISSION_LEVELS, LEVEL_CONFIG } from './constants.js';
 import { GroupSelector } from './GroupSelector.js';
 import { UserSelector } from './UserSelector.js';
 import { UserBadge } from '../components/UserBadge.js';
+import { useFocusAfterRemove } from '../utils/focus-return.js';
 export const PermissionEditor = ({ node, activeLevel, onSetActiveLevel, canEdit, groups, isSelected, userSearchResults, isSearchingUsers, showUserSearch, userSearchQuery, userSearchError, onSearchUsers, onGetUserMetadata, onToggleUserSearch, onAddUser, onRemoveUser, showGroupSearch, groupSearchQuery, filteredGroups, onSearchGroups, onToggleGroupSearch, onAddGroup, onRemoveGroup, }) => {
+    const { listRef, focusAfterRemove } = useFocusAfterRemove();
+    const addGroupsRef = useRef(null);
+    const addUserRef = useRef(null);
     const directPerm = node.directPermission;
     const inheritedPerm = node.inheritedPermission;
     const getTargetForLevel = (level, source) => {
@@ -19,10 +24,16 @@ export const PermissionEditor = ({ node, activeLevel, onSetActiveLevel, canEdit,
                             return (_jsxs(Tabs.Panel, { value: level, pt: "sm", children: [inheritedTarget && (_jsxs("div", { style: { marginBottom: 'var(--mantine-spacing-sm)' }, children: [_jsx(Text, { size: "xs", fw: 500, mb: 4, c: "dimmed", children: "Inherited from parent" }), _jsxs(Group, { gap: "xs", children: [inheritedTarget.allowedGroups?.map((groupId) => {
                                                         const groupInfo = groups.find((g) => g.value === groupId);
                                                         return (_jsx(Badge, { variant: "outline", color: "gray", size: "xs", children: groupInfo?.label ?? groupId }, `inherited-group-${groupId}`));
-                                                    }), inheritedTarget.allowedUsers?.map((userId) => onGetUserMetadata ? (_jsx(UserBadge, { userId: userId, getUserMetadata: onGetUserMetadata, variant: "avatar-name", size: "xs", badgeVariant: "outline", color: "gray", showEmailTooltip: true, showBadge: true }, `inherited-user-${userId}`)) : (_jsx(Badge, { variant: "outline", color: userId === 'anonymous' ? 'orange' : 'gray', size: "xs", leftSection: userId === 'anonymous' ? _jsx(IconUserOff, { size: 10 }) : undefined, children: userId === 'anonymous' ? 'Anonymous (Public)' : userId }, `inherited-user-${userId}`)))] })] })), canEdit ? (_jsxs("div", { children: [_jsxs(Text, { size: "xs", fw: 500, mb: 4, children: [LEVEL_CONFIG[level].label, " Access"] }), _jsxs(Group, { gap: "xs", mb: "xs", children: [(directTarget?.allowedGroups ?? []).map((groupId) => {
+                                                    }), inheritedTarget.allowedUsers?.map((userId) => (_jsx(UserBadge, { userId: userId, getUserMetadata: onGetUserMetadata, variant: "avatar-name", size: "xs", badgeVariant: "outline", color: "gray", showEmailTooltip: true, showBadge: true, revealIdOnFallback: true }, `inherited-user-${userId}`)))] })] })), canEdit ? (_jsxs("div", { children: [_jsxs(Text, { size: "xs", fw: 500, mb: 4, children: [LEVEL_CONFIG[level].label, " access"] }), _jsxs(Group, { gap: "xs", mb: "xs", ref: listRef, children: [(directTarget?.allowedGroups ?? []).map((groupId, groupIndex) => {
                                                         const groupInfo = groups.find((g) => g.value === groupId);
-                                                        return (_jsx(Badge, { variant: "filled", color: LEVEL_CONFIG[level].color, pr: 3, rightSection: _jsx(ActionIcon, { size: "xs", color: LEVEL_CONFIG[level].color, radius: "xl", variant: "transparent", onClick: () => onRemoveGroup(node.path, level, groupId), children: _jsx(IconX, { size: 12, stroke: 2.5, style: { color: 'white' } }) }), children: groupInfo?.label ?? groupId }, `group-${groupId}`));
-                                                    }), (directTarget?.allowedUsers ?? []).map((userId) => onGetUserMetadata ? (_jsx(UserBadge, { userId: userId, getUserMetadata: onGetUserMetadata, variant: "avatar-name", size: "xs", badgeVariant: "filled", color: userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color, onRemove: () => onRemoveUser(node.path, level, userId), showEmailTooltip: true }, `user-${userId}`)) : (_jsx(Badge, { variant: "filled", color: userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color, pr: 3, leftSection: userId === 'anonymous' ? _jsx(IconUserOff, { size: 12 }) : undefined, rightSection: _jsx(ActionIcon, { size: "xs", color: userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color, radius: "xl", variant: "transparent", onClick: () => onRemoveUser(node.path, level, userId), children: _jsx(IconX, { size: 12, stroke: 2.5, style: { color: 'white' } }) }), children: userId === 'anonymous' ? 'Anonymous (Public)' : userId }, `user-${userId}`))), (!directTarget?.allowedGroups || directTarget.allowedGroups.length === 0) &&
-                                                        (!directTarget?.allowedUsers || directTarget.allowedUsers.length === 0) && (_jsxs(Text, { size: "xs", c: "dimmed", children: ["No groups or users assigned for ", level] }))] }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { size: "xs", variant: "subtle", leftSection: _jsx(IconSearch, { size: 14 }), onClick: () => onToggleGroupSearch(!showGroupSearch), children: showGroupSearch ? 'Cancel' : 'Add Groups' }), _jsx(Button, { size: "xs", variant: "subtle", leftSection: _jsx(IconSearch, { size: 14 }), onClick: () => onToggleUserSearch(!showUserSearch), children: showUserSearch ? 'Cancel' : 'Add User' }), !(directTarget?.allowedUsers ?? []).includes('anonymous') && (_jsx(Tooltip, { label: "Allow unauthenticated/public access", children: _jsx(Button, { size: "xs", variant: "subtle", color: "orange", leftSection: _jsx(IconUserOff, { size: 14 }), onClick: () => onAddUser(node.path, level, 'anonymous'), children: "Add Anonymous" }) }))] }), showGroupSearch && isSelected && activeLevel === level && (_jsx(GroupSelector, { searchQuery: groupSearchQuery, onSearchChange: onSearchGroups, filteredGroups: filteredGroups, onSelectGroup: (groupId) => onAddGroup(node.path, level, groupId) })), showUserSearch && isSelected && activeLevel === level && (_jsx(UserSelector, { searchQuery: userSearchQuery, onSearchChange: onSearchUsers, searchResults: userSearchResults, isSearching: isSearchingUsers, searchError: userSearchError, onSelectUser: (userId) => onAddUser(node.path, level, userId), onGetUserMetadata: onGetUserMetadata }))] })) : (_jsx(Text, { size: "xs", c: "dimmed", children: directTarget ? 'Read-only view' : 'No direct permissions set' }))] }, level));
+                                                        return (_jsx(Badge, { variant: "light", color: LEVEL_CONFIG[level].color, pr: 3, rightSection: _jsx(Tooltip, { label: `Remove ${groupInfo?.label ?? groupId}`, children: _jsx(ActionIcon, { size: "xs", color: LEVEL_CONFIG[level].color, radius: "xl", variant: "transparent", "aria-label": `Remove ${groupInfo?.label ?? groupId}`, onClick: () => {
+                                                                        onRemoveGroup(node.path, level, groupId);
+                                                                        focusAfterRemove(groupIndex, addGroupsRef);
+                                                                    }, children: _jsx(IconX, { size: 12, stroke: 2.5, style: { color: 'var(--mantine-color-text)' } }) }) }), children: groupInfo?.label ?? groupId }, `group-${groupId}`));
+                                                    }), (directTarget?.allowedUsers ?? []).map((userId, userIndex) => (_jsx(UserBadge, { userId: userId, getUserMetadata: onGetUserMetadata, variant: "avatar-name", size: "xs", badgeVariant: "light", color: userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color, onRemove: () => {
+                                                            onRemoveUser(node.path, level, userId);
+                                                            focusAfterRemove((directTarget?.allowedGroups ?? []).length + userIndex, addUserRef);
+                                                        }, showEmailTooltip: true, revealIdOnFallback: true }, `user-${userId}`))), (!directTarget?.allowedGroups || directTarget.allowedGroups.length === 0) &&
+                                                        (!directTarget?.allowedUsers || directTarget.allowedUsers.length === 0) && (_jsxs(Text, { size: "xs", c: "dimmed", children: ["No groups or users assigned for ", level] }))] }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { ref: addGroupsRef, variant: "subtle", leftSection: _jsx(IconSearch, { size: 14 }), onClick: () => onToggleGroupSearch(!showGroupSearch), children: showGroupSearch ? 'Cancel' : 'Add groups' }), _jsx(Button, { ref: addUserRef, variant: "subtle", leftSection: _jsx(IconSearch, { size: 14 }), onClick: () => onToggleUserSearch(!showUserSearch), children: showUserSearch ? 'Cancel' : 'Add user' }), !(directTarget?.allowedUsers ?? []).includes('anonymous') && (_jsx(Tooltip, { label: "Allow unauthenticated/public access", children: _jsx(Button, { variant: "subtle", color: "orange", leftSection: _jsx(IconUserOff, { size: 14 }), onClick: () => onAddUser(node.path, level, 'anonymous'), children: "Add anonymous" }) }))] }), showGroupSearch && isSelected && activeLevel === level && (_jsx(GroupSelector, { searchQuery: groupSearchQuery, onSearchChange: onSearchGroups, filteredGroups: filteredGroups, onSelectGroup: (groupId) => onAddGroup(node.path, level, groupId) })), showUserSearch && isSelected && activeLevel === level && (_jsx(UserSelector, { searchQuery: userSearchQuery, onSearchChange: onSearchUsers, searchResults: userSearchResults, isSearching: isSearchingUsers, searchError: userSearchError, onSelectUser: (userId) => onAddUser(node.path, level, userId), onGetUserMetadata: onGetUserMetadata }))] })) : (_jsx(Text, { size: "xs", c: "dimmed", children: directTarget ? 'Read-only view' : 'No direct permissions set' }))] }, level));
                         })] })] }) }));
 };

package/dist/editor/permission-manager/PermissionLevelBadge.js

@@ -8,7 +8,7 @@ export const PermissionLevelBadge = ({ level, target, inherited, }) => {
         inherited &&
         ((inherited.allowedUsers?.length ?? 0) > 0 || (inherited.allowedGroups?.length ?? 0) > 0);
     if (hasPerms) {
-        return (_jsx(Badge, { size: "xs", variant: "filled", color: LEVEL_CONFIG[level].color, children: LEVEL_CONFIG[level].label }));
+        return (_jsx(Badge, { size: "xs", variant: "light", color: LEVEL_CONFIG[level].color, children: LEVEL_CONFIG[level].label }));
     }
     if (hasInherited) {
         return (_jsx(Tooltip, { label: `${LEVEL_CONFIG[level].label} inherited from parent`, children: _jsx(Badge, { size: "xs", variant: "outline", color: "gray", children: LEVEL_CONFIG[level].label }) }));

package/dist/editor/permission-manager/PermissionTree.d.ts

@@ -20,7 +20,7 @@ export interface PermissionTreeProps {
     onSetActiveLevel: (level: PermissionLevel) => void;
     onUpdatePermission: (path: string, level: PermissionLevel, updates: Partial<PermissionTarget>) => void;
     onSearchUsers: (query: string) => void;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     onToggleUserSearch: (show: boolean) => void;
     onAddUser: (path: string, level: PermissionLevel, userId: string) => void;
     onRemoveUser: (path: string, level: PermissionLevel, userId: string) => void;

package/dist/editor/permission-manager/UserSelector.d.ts

@@ -7,6 +7,6 @@ export interface UserSelectorProps {
     isSearching: boolean;
     searchError: string | null;
     onSelectUser: (userId: string) => void;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
 }
 export declare const UserSelector: React.FC<UserSelectorProps>;

package/dist/editor/permission-manager/UserSelector.js

@@ -1,13 +1,13 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Paper, Stack, Text, Loader } from '@mantine/core';
 import { UserBadge } from '../components/UserBadge.js';
 export const UserSelector = ({ searchQuery, onSearchChange, searchResults, isSearching, searchError, onSelectUser, onGetUserMetadata, }) => {
     return (_jsx(Paper, { withBorder: true, p: "sm", mt: "xs", children: _jsxs(Stack, { gap: "xs", children: [_jsx("input", { type: "text", placeholder: "Search users by name or email...", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), "aria-label": "Search users by name or email", style: {
                         width: '100%',
                         padding: '6px 8px',
-                        border: '1px solid var(--mantine-color-gray-4)',
+                        border: '1px solid var(--canopy-input-border)',
                         borderRadius: 'var(--mantine-radius-sm)',
                         fontSize: '14px',
-                    } }), isSearching && _jsx(Loader, { size: "xs" }), searchError && (_jsx(Text, { size: "xs", c: "red", children: searchError })), searchResults.length > 0 && (_jsx(Stack, { gap: 4, children: searchResults.map((user) => (_jsx(Paper, { p: "xs", withBorder: true, style: { cursor: 'pointer' }, onClick: () => onSelectUser(user.id), children: onGetUserMetadata ? (_jsx(UserBadge, { userId: user.id, getUserMetadata: onGetUserMetadata, variant: "full", size: "sm", cachedUser: user, showEmailTooltip: false })) : (_jsxs(_Fragment, { children: [_jsx(Text, { size: "sm", fw: 500, children: user.name }), _jsx(Text, { size: "xs", c: "dimmed", children: user.email })] })) }, user.id))) })), searchQuery.trim() && !isSearching && searchResults.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No users found" }))] }) }));
+                    } }), isSearching && _jsx(Loader, { size: "xs" }), searchError && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: searchError })), searchResults.length > 0 && (_jsx(Stack, { gap: 4, children: searchResults.map((user) => (_jsx(Paper, { p: "xs", withBorder: true, style: { cursor: 'pointer' }, onClick: () => onSelectUser(user.id), children: _jsx(UserBadge, { userId: user.id, getUserMetadata: onGetUserMetadata, variant: "full", size: "sm", cachedUser: user, showEmailTooltip: false }) }, user.id))) })), searchQuery.trim() && !isSearching && searchResults.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No users found" }))] }) }));
 };

package/dist/editor/permission-manager/index.js

@@ -7,9 +7,16 @@ import { usePermissionTree } from './hooks/usePermissionTree.js';
 import { useGroupsAndUsers } from './hooks/useGroupsAndUsers.js';
 import { PermissionTree } from './PermissionTree.js';
 import { findTreeNode } from './utils.js';
-export const PermissionManager = ({ collections, contentRoot = 'content', permissions, canEdit, onSave, onSearchUsers, onGetUserMetadata, onListGroups, onClose: __, loading = false, contentTree, }) => {
+import { SettingsChangedError } from '../settings-conflict.js';
+import { StagedChangesDrawer, useOpeningKey } from '../components/StagedChangesDrawer.js';
+export const PermissionManager = (props) => {
+    const { key, onExited } = useOpeningKey();
+    return _jsx(PermissionManagerDrawer, { ...props, onExited: onExited }, key);
+};
+const PermissionManagerDrawer = ({ opened, onClose, onExited, returnFocusTo, collections, contentRoot = 'content', permissions, canEdit, onSave, onSearchUsers, onGetUserMetadata, onListGroups, loading = false, contentTree, }) => {
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState(null);
+    const [errorIsConflict, setErrorIsConflict] = useState(false);
     const [activeLevel, setActiveLevel] = useState('read');
     const { annotatedTree, expandedNodes, selectedNode, localPermissions, isDirty, toggleNode, expandAll, collapseAll, selectNode, updateNodePermission, resetPermissions, setIsDirty, } = usePermissionTree({
         collections,
@@ -18,7 +25,8 @@ export const PermissionManager = ({ collections, contentRoot = 'content', permis
         contentTree,
     });
     const { groupSelectData, filteredGroups, groupLoadError, groupSearchQuery, showGroupSearch, setGroupSearchQuery, setShowGroupSearch, clearGroupLoadError, userSearchResults, isSearchingUsers, userSearchQuery, showUserSearch, userSearchError, setUserSearchQuery, toggleUserSearch, } = useGroupsAndUsers({
-        onListGroups,
+        // This panel stays mounted while its drawer is closed; groups load on each opening.
+        onListGroups: opened ? onListGroups : undefined,
         onSearchUsers,
         canEdit,
     });
@@ -33,6 +41,7 @@ export const PermissionManager = ({ collections, contentRoot = 'content', permis
         }
         catch (err) {
             setError(err instanceof Error ? err.message : 'Failed to save permissions');
+            setErrorIsConflict(err instanceof SettingsChangedError);
         }
         finally {
             setIsSaving(false);
@@ -102,7 +111,7 @@ export const PermissionManager = ({ collections, contentRoot = 'content', permis
             allowedUsers: currentTarget.allowedUsers,
         });
     }, [annotatedTree, localPermissions, updateNodePermission]);
-    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, children: [!canEdit && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "yellow", mb: "sm", title: "Read-only", children: "You need admin access to edit permissions" })), error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", mb: "sm", title: "Error", withCloseButton: true, onClose: () => setError(null), children: error })), groupLoadError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "orange", mb: "sm", title: "Warning", withCloseButton: true, onClose: clearGroupLoadError, children: groupLoadError })), _jsxs(Group, { gap: "xs", pb: "sm", children: [_jsx(Button, { size: "xs", variant: "subtle", onClick: expandAll, children: "Expand All" }), _jsx(Button, { size: "xs", variant: "subtle", onClick: collapseAll, children: "Collapse All" })] }), _jsx(ScrollArea, { style: { flex: 1 }, pb: "md", children: loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading permissions..." })] })) : (_jsx(PermissionTree, { node: annotatedTree, expandedNodes: expandedNodes, selectedNode: selectedNode, canEdit: canEdit, groups: groupSelectData, activeLevel: activeLevel, userSearchResults: userSearchResults, isSearchingUsers: isSearchingUsers, showUserSearch: showUserSearch, userSearchQuery: userSearchQuery, userSearchError: userSearchError, showGroupSearch: showGroupSearch, groupSearchQuery: groupSearchQuery, filteredGroups: filteredGroups, onToggle: toggleNode, onSelect: selectNode, onSetActiveLevel: setActiveLevel, onUpdatePermission: updateNodePermission, onSearchUsers: setUserSearchQuery, onGetUserMetadata: onGetUserMetadata, onToggleUserSearch: toggleUserSearch, onAddUser: handleAddUser, onRemoveUser: handleRemoveUser, onSearchGroups: setGroupSearchQuery, onToggleGroupSearch: setShowGroupSearch, onAddGroup: handleAddGroup, onRemoveGroup: handleRemoveGroup })) }), canEdit && isDirty && (_jsxs(Group, { justify: "flex-end", py: "sm", gap: "sm", style: { borderTop: '1px solid var(--mantine-color-gray-3)' }, children: [_jsx(Button, { variant: "subtle", color: "neutral", onClick: handleDiscard, disabled: isSaving, children: "Discard Changes" }), _jsx(Button, { onClick: handleSave, loading: isSaving, disabled: isSaving, children: "Save Permissions" })] }))] }));
+    return (_jsx(StagedChangesDrawer, { opened: opened, onClose: onClose, title: "Permissions", description: "Manage content access by path (read, edit, review)", size: 700, isDirty: isDirty, isSaving: isSaving, canEdit: canEdit, saveLabel: "Save permissions", onSave: handleSave, onDiscard: handleDiscard, onExited: onExited, returnFocusTo: returnFocusTo, children: _jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, children: [!canEdit && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "yellow", mb: "sm", title: "Read-only", children: "You need admin access to edit permissions" })), error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: errorIsConflict ? 'yellow' : 'red', mb: "sm", title: errorIsConflict ? 'Not saved' : 'Error', withCloseButton: true, onClose: () => setError(null), children: error })), groupLoadError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "orange", mb: "sm", title: "Warning", withCloseButton: true, onClose: clearGroupLoadError, children: groupLoadError })), _jsxs(Group, { gap: "xs", pb: "sm", children: [_jsx(Button, { variant: "subtle", onClick: expandAll, children: "Expand all" }), _jsx(Button, { variant: "subtle", onClick: collapseAll, children: "Collapse all" })] }), _jsx(ScrollArea, { style: { flex: 1 }, pb: "md", children: loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading permissions..." })] })) : (_jsx(PermissionTree, { node: annotatedTree, expandedNodes: expandedNodes, selectedNode: selectedNode, canEdit: canEdit, groups: groupSelectData, activeLevel: activeLevel, userSearchResults: userSearchResults, isSearchingUsers: isSearchingUsers, showUserSearch: showUserSearch, userSearchQuery: userSearchQuery, userSearchError: userSearchError, showGroupSearch: showGroupSearch, groupSearchQuery: groupSearchQuery, filteredGroups: filteredGroups, onToggle: toggleNode, onSelect: selectNode, onSetActiveLevel: setActiveLevel, onUpdatePermission: updateNodePermission, onSearchUsers: setUserSearchQuery, onGetUserMetadata: onGetUserMetadata, onToggleUserSearch: toggleUserSearch, onAddUser: handleAddUser, onRemoveUser: handleRemoveUser, onSearchGroups: setGroupSearchQuery, onToggleGroupSearch: setShowGroupSearch, onAddGroup: handleAddGroup, onRemoveGroup: handleRemoveGroup })) })] }) }));
 };
 export { usePermissionTree } from './hooks/usePermissionTree.js';
 export { useGroupsAndUsers } from './hooks/useGroupsAndUsers.js';

package/dist/editor/permission-manager/types.d.ts

@@ -2,6 +2,10 @@ import type { PathPermission, PermissionLevel, PermissionTarget } from '../../co
 import type { UserSearchResult, GroupSource, PermissionGroupOption } from '../../auth/types.js';
 import type { EditorCollection } from '../Editor.js';
 export interface PermissionManagerProps {
+    opened: boolean;
+    /** Closes the drawer; while there are unsaved changes it runs only after the user confirms discarding them. */
+    onClose: () => void;
+    returnFocusTo?: () => HTMLElement | null;
     /** Collections from API */
     collections?: EditorCollection[];
     /** Content root path (default: 'content') */
@@ -11,10 +15,9 @@ export interface PermissionManagerProps {
     canEdit: boolean;
     onSave?: (permissions: PathPermission[]) => Promise<void>;
     onSearchUsers?: (query: string, limit?: number) => Promise<UserSearchResult[]>;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     /** Handler to list groups (internal + external, tagged by `source`) */
     onListGroups?: () => Promise<PermissionGroupOption[]>;
-    onClose?: () => void;
     loading?: boolean;
     /** Optional: actual filesystem content tree (for entries not in schema) */
     contentTree?: ContentNode;

package/dist/editor/platform.d.ts

@@ -0,0 +1,3 @@
+/** Platform detection for shortcut labels. */
+/** The label for Mantine's `mod` key: ⌘ on Apple platforms, Ctrl elsewhere (and during SSR). */
+export declare function modKeyLabel(): '⌘' | 'Ctrl';

package/dist/editor/platform.js

@@ -0,0 +1,9 @@
+/** Platform detection for shortcut labels. */
+/** The label for Mantine's `mod` key: ⌘ on Apple platforms, Ctrl elsewhere (and during SSR). */
+export function modKeyLabel() {
+    if (typeof navigator === 'undefined')
+        return 'Ctrl';
+    const nav = navigator;
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    return /mac|iphone|ipad/i.test(platform) ? '⌘' : 'Ctrl';
+}

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

@@ -0,0 +1,9 @@
+/**
+ * The prefix a live preview puts `/assets/t/` srcs behind, for `assets/asset-url.ts`; imports
+ * nothing. A browser stores it from drafts and `usePreviewAssetBaseGate`. A server reads the
+ * getter `canopycms-next`'s preview page registers, which is request-scoped, so a render outside a
+ * preview request, including every static build, sees `undefined`.
+ */
+export declare function setPreviewAssetBase(base: string | undefined): void;
+export declare function setServerPreviewAssetBaseGetter(getter: (() => string | undefined) | undefined): void;
+export declare function getPreviewAssetBase(): string | undefined;

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

@@ -0,0 +1,17 @@
+/**
+ * The prefix a live preview puts `/assets/t/` srcs behind, for `assets/asset-url.ts`; imports
+ * nothing. A browser stores it from drafts and `usePreviewAssetBaseGate`. A server reads the
+ * getter `canopycms-next`'s preview page registers, which is request-scoped, so a render outside a
+ * preview request, including every static build, sees `undefined`.
+ */
+let previewAssetBase;
+let serverPreviewAssetBase;
+export function setPreviewAssetBase(base) {
+    previewAssetBase = base;
+}
+export function setServerPreviewAssetBaseGetter(getter) {
+    serverPreviewAssetBase = getter;
+}
+export function getPreviewAssetBase() {
+    return typeof window === 'undefined' ? serverPreviewAssetBase?.() : previewAssetBase;
+}

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

@@ -1,16 +1,30 @@
-import type { CSSProperties } from 'react';
-import { type CanopyPathSegment } from './canopy-path.js';
-export declare const __CANOPY_PREVIEW_CLIENT__ = true;
+import type { ResolvedReferenceMeta } from '../entry-schema.js';
 export declare const CANOPY_PREVIEW_MESSAGE = "canopycms:draft:update";
 export declare const CANOPY_PREVIEW_FOCUS = "canopycms:preview:focus";
 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";
+/**
+ * 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
+ * indexes as the data. A reference typed by `resolvedSchema` is recognized by its resolved or
+ * `unavailable` shape; any other non-object leaf may be an untyped reference, so it is a
+ * `boolean` too. Every key is optional because only reference positions are present, and nothing
+ * is before the first draft arrives.
+ */
+export type PreviewLoadingState<T> = T extends readonly (infer U)[] ? PreviewLoadingState<NonNullable<U>>[] : T extends ResolvedReferenceMeta | {
+    unavailable: true;
+} ? boolean : T extends object ? {
+    [K in keyof T]?: PreviewLoadingState<NonNullable<T[K]>>;
+} : boolean;
 export interface DraftUpdateMessage {
     type: typeof CANOPY_PREVIEW_MESSAGE;
     path: string;
     data?: unknown;
     isLoading?: unknown;
+    /** The editor's authenticated asset route; see `PreviewFrame`'s `assetBase`. */
+    assetBase?: unknown;
 }
 /**
  * Resolve a (possibly relative) URL to an origin for postMessage targeting.
@@ -18,6 +32,13 @@ export interface DraftUpdateMessage {
  * need no configuration.
  */
 export declare const resolveMessageOrigin: (url?: string) => string;
+/**
+ * Opaque origins (sandboxed iframes, data: URLs) serialize to the string 'null':
+ * never trust them for inbound messages, and never post to them — every window in
+ * a sandboxed embed shares that string, so it identifies nothing, and postMessage
+ * throws on a literal 'null' targetOrigin. '' covers the SSR fallback.
+ */
+export declare const isOpaqueOrigin: (origin: string) => boolean;
 /**
  * True only for messages from the embedding editor window with the expected origin.
  *
@@ -28,7 +49,6 @@ export declare const resolveMessageOrigin: (url?: string) => string;
  * expected editor origin (same-origin unless `editorOrigin` is configured).
  */
 export declare const isTrustedEditorMessage: (event: MessageEvent, editorOrigin?: string) => boolean;
-export declare const sendDraftUpdate: (iframe: HTMLIFrameElement | null, message: DraftUpdateMessage, targetOrigin?: string) => void;
 export interface PreviewFocusMessage {
     type: typeof CANOPY_PREVIEW_FOCUS;
     entryPath: string;
@@ -38,6 +58,22 @@ export interface HighlightMessage {
     type: typeof CANOPY_PREVIEW_HIGHLIGHT;
     enabled: boolean;
 }
+/** The most distinct mark paths one report carries, and the longest path it carries. */
+export declare const MARK_REPORT_LIMITS: {
+    readonly paths: 500;
+    readonly pathLength: 512;
+};
+/**
+ * Preview → editor, while highlighting is on: how many `data-canopy-path` elements the page has,
+ * so the editor can say when there is nothing to outline, and their distinct paths as the page
+ * spells them, within `MARK_REPORT_LIMITS`, so it can say which name no field. An older bridge
+ * sends no report, and one before `paths` sends only the count.
+ */
+export interface PreviewMarksMessage {
+    type: typeof CANOPY_PREVIEW_MARKS;
+    count: number;
+    paths?: string[];
+}
 /**
  * Preview → editor report that the current draft fails to compile/render
  * (e.g. malformed MDX). `message: null` clears an earlier error.
@@ -59,11 +95,9 @@ export declare const useCanopyPreview: <T>(opts: {
     editorOrigin?: string;
 }) => {
     data: T;
-    isLoading: Record<string, boolean>;
+    isLoading: PreviewLoadingState<T>;
     highlightEnabled: boolean;
-    fieldProps: (canopyPath: string | CanopyPathSegment[]) => {
-        'data-canopy-path': string;
-    };
+    fieldProps: import("./field-props.js").FieldProps<T>;
     reportError: (message: string | null, fieldPath?: string) => void;
 };
 /**
@@ -74,8 +108,16 @@ export declare const usePreviewData: <T>(path: string, initialData: T, opts?: {
     editorOrigin?: string;
 }) => {
     data: T;
-    isLoading: Record<string, boolean>;
+    isLoading: PreviewLoadingState<T>;
 };
+/**
+ * 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 declare const usePreviewAssetBaseGate: (assetBase: unknown) => boolean;
 /**
  * Hook for preview pages to listen for highlight mode and toggle an outline on clickable elements.
  */
@@ -88,21 +130,3 @@ export declare const usePreviewHighlight: (opts?: {
 export declare const usePreviewFocusEmitter: (entryPath: string, opts?: {
     editorOrigin?: string;
 }) => void;
-/**
- * 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 declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, }: {
-    src: string;
-    path: string;
-    data?: unknown;
-    isLoading?: unknown;
-    className?: string;
-    style?: CSSProperties;
-    highlightEnabled?: boolean;
-    /** Called when the preview reports a draft compile/render error; null clears it. */
-    onPreviewError?: (error: {
-        message: string;
-        fieldPath?: string;
-    } | null) => void;
-}) => import("react/jsx-runtime").JSX.Element;