@next-buildr/editor 0.0.0-stage → 2.0.1

package/dist/dialogs/media-picker/index.js

@@ -0,0 +1,3 @@
+export { MediaLibraryProvider, useMediaLibrary } from './library.js';
+export { MediaPicker } from './media-picker.js';
+export { kindsFor, MEDIA_KINDS, mediaRefSchema, mimeTypesFor, parseMediaRef, toMediaRef, } from './media-ref.js';

package/dist/dialogs/media-picker/library.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { DocumentAdapter } from '../../persistence/index.ts';
+/** The media the editor can offer: what the adapter's `media` gives, and where a picked entry lives. */
+export interface MediaLibrary {
+    readonly media: DocumentAdapter['media'];
+    /** The collection a `MediaRef` names (`media` in the Payload plugin's defaults). */
+    readonly collection: string;
+}
+export interface MediaLibraryProviderProps {
+    readonly media: DocumentAdapter['media'];
+    readonly collection?: string | undefined;
+    readonly children: ReactNode;
+}
+export declare function MediaLibraryProvider({ media, collection, children }: MediaLibraryProviderProps): import("react").JSX.Element;
+/** The media library, or `undefined` when the editor was given none (the media control then says so). */
+export declare const useMediaLibrary: () => MediaLibrary | undefined;
+//# sourceMappingURL=library.d.ts.map

package/dist/dialogs/media-picker/library.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"library.d.ts","sourceRoot":"","sources":["../../../src/dialogs/media-picker/library.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,wGAAwG;AACxG,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACzC,oFAAoF;IACpF,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAID,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACzC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,yBAAyB,+BAG9F;AAED,yGAAyG;AACzG,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,SAAuC,CAAC"}

package/dist/dialogs/media-picker/library.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const LibraryContext = createContext(undefined);
+export function MediaLibraryProvider({ media, collection, children }) {
+    const value = useMemo(() => ({ media, collection: collection ?? 'media' }), [media, collection]);
+    return _jsx(LibraryContext.Provider, { value: value, children: children });
+}
+/** The media library, or `undefined` when the editor was given none (the media control then says so). */
+export const useMediaLibrary = () => useContext(LibraryContext);

package/dist/dialogs/media-picker/media-picker.d.ts

@@ -0,0 +1,18 @@
+import type { MediaAsset } from '@next-buildr/core';
+export interface MediaPickerProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    /** Called with the entry the author chose (or just uploaded). */
+    readonly onPick: (asset: MediaAsset) => void;
+    /** The prop's `accept`; narrows the kinds offered. */
+    readonly accept?: readonly string[] | undefined;
+    /** How long after typing the search runs; `0` searches at once. */
+    readonly searchDelayMs?: number | undefined;
+}
+/**
+ * The media picker (docs/editor.md#media): a searchable, filterable grid of the library, paged with
+ * "Load more", plus an upload that will not go without alternative text. Every part is a native
+ * control, so it is operable with Tab, Enter and Space alone; the dialog traps focus and Escape closes it.
+ */
+export declare function MediaPicker(props: MediaPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=media-picker.d.ts.map

package/dist/dialogs/media-picker/media-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-picker.d.ts","sourceRoot":"","sources":["../../../src/dialogs/media-picker/media-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,iEAAiE;IACjE,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAChD,mEAAmE;IACnE,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7C;AAcD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA4HlD"}

package/dist/dialogs/media-picker/media-picker.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { useT } from '../../messages/index.js';
+import { Button, Dialog, Input, Select } from '../../ui/index.js';
+import { useMediaLibrary } from './library.js';
+import { kindsFor, mimeTypesFor } from './media-ref.js';
+const KIND_KEY = {
+    all: 'media.kind.all',
+    image: 'media.kind.image',
+    video: 'media.kind.video',
+    document: 'media.kind.document',
+};
+/**
+ * The media picker (docs/editor.md#media): a searchable, filterable grid of the library, paged with
+ * "Load more", plus an upload that will not go without alternative text. Every part is a native
+ * control, so it is operable with Tab, Enter and Space alone; the dialog traps focus and Escape closes it.
+ */
+export function MediaPicker(props) {
+    const { open, onOpenChange, onPick, accept, searchDelayMs = 250 } = props;
+    const t = useT();
+    const library = useMediaLibrary();
+    const kinds = kindsFor(accept);
+    const [text, setText] = useState('');
+    const [kind, setKind] = useState(kinds[0] ?? 'all');
+    const [load, setLoad] = useState({ state: 'loading' });
+    const [more, setMore] = useState(false);
+    // A reply that arrives after a newer search was made must not replace it.
+    const request = useRef(0);
+    const run = useCallback(async (cursor, previous) => {
+        if (library === undefined)
+            return;
+        const mine = ++request.current;
+        if (cursor === undefined)
+            setLoad({ state: 'loading' });
+        else
+            setMore(true);
+        try {
+            const mimeTypes = mimeTypesFor(kind);
+            const result = await library.media.search({
+                ...(text.trim() !== '' ? { text: text.trim() } : {}),
+                ...(cursor !== undefined ? { cursor } : {}),
+                ...(mimeTypes !== undefined ? { mimeTypes } : {}),
+            });
+            if (mine !== request.current)
+                return;
+            setLoad({
+                state: 'ready',
+                items: [...previous, ...result.items],
+                ...(result.nextCursor !== undefined ? { next: result.nextCursor } : {}),
+            });
+        }
+        catch {
+            if (mine === request.current)
+                setLoad({ state: 'error' });
+        }
+        finally {
+            if (mine === request.current)
+                setMore(false);
+        }
+    }, [library, kind, text]);
+    useEffect(() => {
+        if (!open || library === undefined)
+            return;
+        // Opening, changing the kind and clearing the search load at once; only typing waits for a pause.
+        const timer = setTimeout(() => void run(undefined, []), text === '' ? 0 : searchDelayMs);
+        return () => clearTimeout(timer);
+    }, [open, library, run, searchDelayMs, text]);
+    const pick = (asset) => {
+        onPick(asset);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, title: t('media.picker.title'), description: t('media.picker.description'), children: library === undefined ? (_jsx("p", { className: "bd-field-hint", children: t('media.unavailable') })) : (_jsxs("div", { className: "bd-media-picker", children: [_jsxs("div", { className: "bd-media-tools", children: [_jsx(Input, { type: "search", "aria-label": t('media.search'), placeholder: t('media.search'), value: text, onChange: (event) => setText(event.target.value) }), kinds.length > 1 ? (_jsx(Select, { label: t('media.kind'), value: kind, onValueChange: (next) => setKind(next), options: kinds.map((entry) => ({ value: entry, label: t(KIND_KEY[entry]) })) })) : null] }), load.state === 'loading' ? (_jsx("p", { role: "status", className: "bd-field-hint", children: t('media.loading') })) : null, load.state === 'error' ? (_jsxs("p", { role: "alert", className: "bd-media-error", children: [t('media.error'), ' ', _jsx(Button, { variant: "ghost", onClick: () => void run(undefined, []), children: t('media.retry') })] })) : null, load.state === 'ready' && load.items.length === 0 ? (_jsx("p", { className: "bd-field-hint", children: t('media.empty') })) : null, load.state === 'ready' ? (_jsx("ul", { className: "bd-media-grid", "aria-label": t('media.picker.title'), children: load.items.map((asset) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "bd-media-item", onClick: () => pick(asset), children: [asset.mimeType.startsWith('image/') ? (_jsx("img", { src: asset.url, alt: "", loading: "lazy" })) : (_jsx("span", { className: "bd-media-file", children: asset.mimeType })), _jsx("span", { className: "bd-media-name", children: asset.alt ?? asset.id })] }) }, asset.id))) })) : null, load.state === 'ready' && load.next !== undefined ? (_jsx(Button, { disabled: more, onClick: () => void run(load.next, load.items), children: t('media.more') })) : null, library.media.upload !== undefined ? (_jsx(UploadForm, { upload: library.media.upload, onUploaded: pick })) : null] })) }));
+}
+/** Uploads a file. The alternative text is required: an image without one is an accessibility error. */
+function UploadForm(props) {
+    const t = useT();
+    const id = useId();
+    const [file, setFile] = useState();
+    const [alt, setAlt] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const ready = file !== undefined && alt.trim() !== '' && !busy;
+    const submit = async () => {
+        if (file === undefined || alt.trim() === '')
+            return;
+        setBusy(true);
+        setFailed(false);
+        try {
+            props.onUploaded(await props.upload(file, alt.trim()));
+        }
+        catch {
+            setFailed(true);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("fieldset", { className: "bd-media-upload", children: [_jsx("legend", { children: t('media.upload') }), _jsx(Input, { id: `${id}-file`, type: "file", "aria-label": t('media.upload.file'), onChange: (event) => setFile(event.target.files?.[0]) }), _jsx(Input, { id: `${id}-alt`, type: "text", required: true, "aria-label": t('media.upload.alt'), placeholder: t('media.upload.alt'), "aria-invalid": file !== undefined && alt.trim() === '', value: alt, onChange: (event) => setAlt(event.target.value) }), _jsx(Button, { variant: "primary", disabled: !ready, onClick: () => void submit(), children: busy ? t('media.upload.busy') : t('media.upload.submit') }), failed ? (_jsx("p", { role: "alert", className: "bd-media-error", children: t('media.upload.failed') })) : null] }));
+}

package/dist/dialogs/media-picker/media-picker.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=media-picker.test.d.ts.map

package/dist/dialogs/media-picker/media-picker.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-picker.test.d.ts","sourceRoot":"","sources":["../../../src/dialogs/media-picker/media-picker.test.tsx"],"names":[],"mappings":""}

package/dist/dialogs/media-picker/media-picker.test.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { p } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { axe } from 'vitest-axe';
+import * as matchers from 'vitest-axe/matchers';
+import { MessagesProvider } from '../../messages/index.js';
+import { MediaControl } from '../../panels/inspector/controls/index.js';
+import { MediaLibraryProvider } from './library.js';
+import { MediaPicker } from './media-picker.js';
+import { kindsFor, mimeTypesFor, parseMediaRef, toMediaRef } from './media-ref.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const photo = {
+    id: 'm1',
+    url: '/a.jpg',
+    alt: 'A cat',
+    width: 10,
+    height: 8,
+    mimeType: 'image/jpeg',
+};
+const manual = { id: 'm2', url: '/b.pdf', mimeType: 'application/pdf' };
+describe('media references', () => {
+    it('stores a reference with a snapshot and reads it back', () => {
+        const ref = toMediaRef(photo, 'media');
+        expect(ref).toEqual({
+            source: 'payload',
+            collection: 'media',
+            id: 'm1',
+            snapshot: { url: '/a.jpg', alt: 'A cat', width: 10, height: 8, mimeType: 'image/jpeg' },
+        });
+        expect(parseMediaRef(ref)).toEqual(ref);
+        expect(parseMediaRef(null)).toBeUndefined();
+        expect(parseMediaRef({ id: 'x' })).toBeUndefined();
+    });
+    it('narrows the kinds by what the prop accepts', () => {
+        expect(kindsFor(undefined)).toContain('video');
+        expect(kindsFor(['image'])).toEqual(['image']);
+        expect(kindsFor(['nonsense'])).toContain('all');
+        expect(mimeTypesFor('all')).toBeUndefined();
+        expect(mimeTypesFor('image')).toEqual(['image/*']);
+    });
+});
+describe('the media picker and control', () => {
+    let container;
+    let root;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        Element.prototype.scrollIntoView ??= () => { };
+        Element.prototype.hasPointerCapture ??= () => false;
+        Element.prototype.setPointerCapture ??= () => { };
+        Element.prototype.releasePointerCapture ??= () => { };
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        document.body.innerHTML = '';
+    });
+    function library(overrides = {}) {
+        const search = vi.fn(async (query) => {
+            if (query.cursor === 'page2')
+                return { items: [manual] };
+            if (query.text === 'none')
+                return { items: [] };
+            return { items: [photo], nextCursor: 'page2' };
+        });
+        const media = { search, ...overrides };
+        return { media, search };
+    }
+    const render = async (node) => act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: node })));
+    const byText = (text) => [...document.querySelectorAll('button')].find((b) => b.textContent?.includes(text));
+    const settle = () => act(async () => void (await new Promise((done) => setTimeout(done, 10))));
+    const setValue = (element, value) => act(async () => {
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(element, value);
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    it('lists the library, pages it and picks with the keyboard-reachable buttons', async () => {
+        const { media, search } = library();
+        const onPick = vi.fn();
+        const onOpenChange = vi.fn();
+        await render(_jsx(MediaLibraryProvider, { media: media, children: _jsx(MediaPicker, { open: true, onOpenChange: onOpenChange, onPick: onPick, searchDelayMs: 0 }) }));
+        await settle();
+        expect(document.querySelectorAll('.bd-media-item')).toHaveLength(1);
+        await act(async () => byText('Load more')?.click());
+        expect(search).toHaveBeenLastCalledWith({ cursor: 'page2' });
+        expect(document.querySelectorAll('.bd-media-item')).toHaveLength(2);
+        await act(async () => document.querySelector('.bd-media-item').click());
+        expect(onPick).toHaveBeenCalledWith(photo);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+    it('searches and says when nothing matches', async () => {
+        const { media, search } = library();
+        await render(_jsx(MediaLibraryProvider, { media: media, children: _jsx(MediaPicker, { open: true, onOpenChange: () => undefined, onPick: () => undefined, searchDelayMs: 0 }) }));
+        await setValue(document.querySelector('input[type=search]'), 'none');
+        await settle();
+        expect(search).toHaveBeenLastCalledWith({ text: 'none' });
+        expect(document.body.textContent).toContain('No files found.');
+    });
+    it('will not upload without alternative text, then picks the new file', async () => {
+        const upload = vi.fn(async () => photo);
+        const { media } = library({ upload });
+        const onPick = vi.fn();
+        await render(_jsx(MediaLibraryProvider, { media: media, children: _jsx(MediaPicker, { open: true, onOpenChange: () => undefined, onPick: onPick, searchDelayMs: 0 }) }));
+        const submit = byText('Upload and use');
+        const file = new File(['x'], 'cat.jpg', { type: 'image/jpeg' });
+        const fileInput = document.querySelector('input[type=file]');
+        await act(async () => {
+            Object.defineProperty(fileInput, 'files', { value: [file], configurable: true });
+            fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        expect(submit.disabled).toBe(true);
+        await setValue(document.querySelector('input[aria-label^="Alternative"]'), 'A cat');
+        expect(submit.disabled).toBe(false);
+        await act(async () => submit.click());
+        expect(upload).toHaveBeenCalledWith(file, 'A cat');
+        expect(onPick).toHaveBeenCalledWith(photo);
+    });
+    it('shows a failed library as a retryable error', async () => {
+        const search = vi
+            .fn()
+            .mockRejectedValueOnce(new Error('down'))
+            .mockResolvedValue({ items: [] });
+        await render(_jsx(MediaLibraryProvider, { media: { search }, children: _jsx(MediaPicker, { open: true, onOpenChange: () => undefined, onPick: () => undefined, searchDelayMs: 0 }) }));
+        await settle();
+        expect(document.querySelector('[role=alert]')?.textContent).toContain('could not be reached');
+        await act(async () => byText('Try again')?.click());
+        expect(document.body.textContent).toContain('No files found.');
+    });
+    it('the control chooses, replaces and removes', async () => {
+        const { media } = library();
+        const onChange = vi.fn();
+        const def = p.media({ accept: ['image'] });
+        const mount = (value) => render(_jsx(MediaLibraryProvider, { media: media, collection: "uploads", children: _jsx(MediaControl, { id: "c", def: def, label: "Image", describedBy: undefined, value: value, disabled: false, onChange: onChange }) }));
+        await mount(null);
+        expect(container.textContent).toContain('No file chosen.');
+        await act(async () => byText('Choose file')?.click());
+        await settle();
+        await act(async () => document.querySelector('.bd-media-item').click());
+        expect(onChange).toHaveBeenLastCalledWith(toMediaRef(photo, 'uploads'));
+        await mount(toMediaRef(photo, 'uploads'));
+        expect(container.querySelector('img')?.getAttribute('alt')).toBe('A cat');
+        expect(byText('Replace')).toBeDefined();
+        await act(async () => byText('Remove')?.click());
+        expect(onChange).toHaveBeenLastCalledWith(null);
+    });
+    it('the control says so without a library', async () => {
+        await render(_jsx(MediaControl, { id: "c", def: p.media(), label: "Image", describedBy: undefined, value: null, disabled: false, onChange: () => undefined }));
+        expect(container.textContent).toContain('No media library is connected.');
+        expect(byText('Choose file').disabled).toBe(true);
+    });
+    it('has no accessibility violations', async () => {
+        const { media } = library();
+        await render(_jsx(MediaLibraryProvider, { media: media, children: _jsx(MediaPicker, { open: true, onOpenChange: () => undefined, onPick: () => undefined, searchDelayMs: 0 }) }));
+        await settle();
+        const dialog = document.querySelector('[role=dialog]');
+        expect((await axe(dialog)).violations).toEqual([]);
+    });
+});

package/dist/dialogs/media-picker/media-ref.d.ts

@@ -0,0 +1,28 @@
+import type { MediaAsset } from '@next-buildr/core';
+import { z } from 'zod';
+/** What a media prop stores (docs/payload.md#media): a reference, plus a snapshot to show while the library is not asked. */
+export interface MediaRef {
+    readonly source: 'payload';
+    readonly collection: string;
+    readonly id: string;
+    readonly snapshot?: {
+        readonly url: string;
+        readonly alt?: string | undefined;
+        readonly width?: number | undefined;
+        readonly height?: number | undefined;
+        readonly mimeType?: string | undefined;
+    } | undefined;
+}
+export declare const mediaRefSchema: z.ZodType<MediaRef>;
+/** The value of a media prop, when it is a reference; anything else (`null`, a stale shape) is `undefined`. */
+export declare function parseMediaRef(value: unknown): MediaRef | undefined;
+/** The reference to store for a library entry; the snapshot carries only what a thumbnail needs. */
+export declare function toMediaRef(asset: MediaAsset, collection: string): MediaRef;
+/** Which kinds of file the picker offers. The prop's `accept` (`['image']`) narrows the choice. */
+export type MediaKind = 'all' | 'image' | 'video' | 'document';
+export declare const MEDIA_KINDS: readonly MediaKind[];
+/** The MIME filter the library is asked with; `undefined` for no filter. */
+export declare function mimeTypesFor(kind: MediaKind): readonly string[] | undefined;
+/** The kinds a prop's `accept` allows: all of them when it names none. */
+export declare function kindsFor(accept: readonly string[] | undefined): readonly MediaKind[];
+//# sourceMappingURL=media-ref.d.ts.map

package/dist/dialogs/media-picker/media-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-ref.d.ts","sourceRoot":"","sources":["../../../src/dialogs/media-picker/media-ref.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,6HAA6H;AAC7H,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,QAAQ,CAAC,EACd;QACE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KACxC,GACD,SAAS,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAa7C,CAAC;AAEH,+GAA+G;AAC/G,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAGlE;AAED,oGAAoG;AACpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,GAAG,QAAQ,CAa1E;AAED,mGAAmG;AACnG,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAE/D,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAA0C,CAAC;AAQvF,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAE3E;AAED,0EAA0E;AAC1E,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,GAAG,SAAS,SAAS,EAAE,CAIpF"}

package/dist/dialogs/media-picker/media-ref.js

@@ -0,0 +1,52 @@
+import { z } from 'zod';
+export const mediaRefSchema = z.object({
+    source: z.literal('payload'),
+    collection: z.string().min(1),
+    id: z.string().min(1),
+    snapshot: z
+        .object({
+        url: z.string(),
+        alt: z.string().optional(),
+        width: z.number().optional(),
+        height: z.number().optional(),
+        mimeType: z.string().optional(),
+    })
+        .optional(),
+});
+/** The value of a media prop, when it is a reference; anything else (`null`, a stale shape) is `undefined`. */
+export function parseMediaRef(value) {
+    const parsed = mediaRefSchema.safeParse(value);
+    return parsed.success ? parsed.data : undefined;
+}
+/** The reference to store for a library entry; the snapshot carries only what a thumbnail needs. */
+export function toMediaRef(asset, collection) {
+    return {
+        source: 'payload',
+        collection,
+        id: asset.id,
+        snapshot: {
+            url: asset.url,
+            ...(asset.alt !== undefined ? { alt: asset.alt } : {}),
+            ...(asset.width !== undefined ? { width: asset.width } : {}),
+            ...(asset.height !== undefined ? { height: asset.height } : {}),
+            mimeType: asset.mimeType,
+        },
+    };
+}
+export const MEDIA_KINDS = ['all', 'image', 'video', 'document'];
+const MIME_PATTERNS = {
+    image: ['image/*'],
+    video: ['video/*'],
+    document: ['application/pdf'],
+};
+/** The MIME filter the library is asked with; `undefined` for no filter. */
+export function mimeTypesFor(kind) {
+    return kind === 'all' ? undefined : MIME_PATTERNS[kind];
+}
+/** The kinds a prop's `accept` allows: all of them when it names none. */
+export function kindsFor(accept) {
+    if (accept === undefined || accept.length === 0)
+        return MEDIA_KINDS;
+    const allowed = MEDIA_KINDS.filter((kind) => kind !== 'all' && accept.includes(kind));
+    return allowed.length === 0 ? MEDIA_KINDS : allowed;
+}

package/dist/dnd/check.d.ts

@@ -0,0 +1,8 @@
+import { type BuilderDocument, type DocumentIndex, type DropTarget, type NodeId, type Reason, type RegistryMeta, type Result } from '@next-buildr/core';
+/**
+ * `canMove` for a gap as `node.move` counts it (among the children as they are before the move).
+ * `canMove` itself counts without the node being moved when it stays in its slot, so the end gap of
+ * its own slot is one past what it accepts; the gap is clamped for the check, as the command does.
+ */
+export declare function moveVerdict(doc: BuilderDocument, index: DocumentIndex, registry: RegistryMeta, id: NodeId, target: DropTarget): Result<true, Reason>;
+//# sourceMappingURL=check.d.ts.map

package/dist/dnd/check.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check.d.ts","sourceRoot":"","sources":["../../src/dnd/check.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,MAAM,EACZ,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,YAAY,EACtB,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,UAAU,GACjB,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAKtB"}

package/dist/dnd/check.js

@@ -0,0 +1,12 @@
+import { canMove, } from '@next-buildr/core';
+/**
+ * `canMove` for a gap as `node.move` counts it (among the children as they are before the move).
+ * `canMove` itself counts without the node being moved when it stays in its slot, so the end gap of
+ * its own slot is one past what it accepts; the gap is clamped for the check, as the command does.
+ */
+export function moveVerdict(doc, index, registry, id, target) {
+    const sameSlot = index.parentOf[id] === target.parentId && index.slotOf[id] === target.slot;
+    const count = doc.nodes[target.parentId]?.slots?.[target.slot]?.length ?? 0;
+    const at = sameSlot ? Math.min(target.index, Math.max(0, count - 1)) : target.index;
+    return canMove(doc, index, registry, id, { parentId: target.parentId, slot: target.slot, at });
+}

package/dist/dnd/destinations.d.ts

@@ -0,0 +1,15 @@
+import { type BuilderDocument, type DropTarget, type NodeId, type RegistryMeta } from '@next-buildr/core';
+export interface Destination {
+    readonly target: DropTarget;
+    /** The node the nodes would go into. */
+    readonly parentId: NodeId;
+    readonly slot: string;
+}
+/**
+ * Every place the nodes could be moved to, in document order: the end of each slot of each node the
+ * rules accept (`canMove` for each of them). The keyboard counterpart of dragging; the list is what
+ * the "Move to" dialog shows. Never more than `limit` entries, so a huge document cannot make the
+ * dialog huge.
+ */
+export declare function moveDestinations(doc: BuilderDocument, registry: RegistryMeta, ids: readonly NodeId[], limit?: number): Destination[];
+//# sourceMappingURL=destinations.d.ts.map

package/dist/dnd/destinations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"destinations.d.ts","sourceRoot":"","sources":["../../src/dnd/destinations.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,UAAU,CAAC;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAcD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,SAAS,MAAM,EAAE,EACtB,KAAK,SAAM,GACV,WAAW,EAAE,CAqBf"}

package/dist/dnd/destinations.js

@@ -0,0 +1,43 @@
+import { createIndex, } from '@next-buildr/core';
+import { moveVerdict } from './check.js';
+/** Nodes with no ancestor in the list: moving a node moves what is inside it too. */
+function topmost(doc, ids) {
+    const index = createIndex(doc);
+    const set = new Set(ids);
+    return ids.filter((id) => {
+        for (let up = index.parentOf[id]; up !== undefined; up = index.parentOf[up]) {
+            if (set.has(up))
+                return false;
+        }
+        return true;
+    });
+}
+/**
+ * Every place the nodes could be moved to, in document order: the end of each slot of each node the
+ * rules accept (`canMove` for each of them). The keyboard counterpart of dragging; the list is what
+ * the "Move to" dialog shows. Never more than `limit` entries, so a huge document cannot make the
+ * dialog huge.
+ */
+export function moveDestinations(doc, registry, ids, limit = 200) {
+    const movable = topmost(doc, ids.filter((id) => id !== doc.root && Object.hasOwn(doc.nodes, id)));
+    if (movable.length === 0)
+        return [];
+    const index = createIndex(doc);
+    const out = [];
+    for (const parentId of index.order) {
+        const node = doc.nodes[parentId];
+        if (node === undefined)
+            continue;
+        const slots = new Set(['default', ...Object.keys(node.slots ?? {})]);
+        for (const slot of slots) {
+            const at = (node.slots?.[slot] ?? []).length;
+            const target = { parentId, slot, index: at };
+            if (!movable.every((id) => moveVerdict(doc, index, registry, id, target).ok))
+                continue;
+            out.push({ target, parentId, slot });
+            if (out.length >= limit)
+                return out;
+        }
+    }
+    return out;
+}

package/dist/dnd/dnd-react.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dnd-react.test.d.ts.map

package/dist/dnd/dnd-react.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd-react.test.d.ts","sourceRoot":"","sources":["../../src/dnd/dnd-react.test.tsx"],"names":[],"mappings":""}

package/dist/dnd/dnd-react.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { MessagesProvider } from '../messages/index.js';
+import { LayersPanel } from '../panels/layers/layers-panel.js';
+import { createEditorStore, EditorStoreProvider } from '../store/index.js';
+import { DragProvider } from './react.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const meta = {
+    version: 1,
+    category: 'content',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+};
+const registry = createRegistryMeta({
+    components: [
+        {
+            ...meta,
+            type: 'buildr/page',
+            label: 'Page',
+            capabilities: { root: true },
+            slots: { default: {} },
+        },
+        { ...meta, type: 'buildr/box', label: 'Box', slots: { default: {} } },
+        { ...meta, type: 'buildr/leaf', label: 'Leaf' },
+    ],
+});
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['boxAAAAAA1', 'leafBBBBB1'] } },
+        boxAAAAAA1: { id: 'boxAAAAAA1', type: 'buildr/box' },
+        leafBBBBB1: { id: 'leafBBBBB1', type: 'buildr/leaf' },
+    },
+    components: {},
+});
+describe('drag and drop in the layers panel', () => {
+    let container;
+    let root;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        document.body.innerHTML = '';
+    });
+    async function mount(withProvider) {
+        const store = createEditorStore({
+            doc: fixture(),
+            registry,
+            generateId: createSeededIdGenerator(5),
+            validationDelayMs: null,
+        });
+        store.select('leafBBBBB1');
+        const panel = _jsx(LayersPanel, {});
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(EditorStoreProvider, { store: store, children: withProvider ? _jsx(DragProvider, { children: panel }) : panel }) })));
+        return store;
+    }
+    const rowMenu = async () => {
+        const row = container.querySelector('[data-node-id="leafBBBBB1"]');
+        await act(async () => {
+            row.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }));
+        });
+        return [...document.querySelectorAll('[role=menuitem]')];
+    };
+    it('offers "Move to" only where dragging is set up, and moves with it', async () => {
+        const plain = await mount(false);
+        expect((await rowMenu()).map((i) => i.textContent)).not.toContain('Move to…');
+        expect(plain.getState().doc.nodes['boxAAAAAA1']?.slots).toBeUndefined();
+        await act(async () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' })));
+        act(() => root.unmount());
+        root = createRoot(container);
+        const store = await mount(true);
+        const items = await rowMenu();
+        const move = items.find((i) => i.textContent === 'Move to…');
+        expect(move).toBeDefined();
+        await act(async () => move?.click());
+        const dialog = document.querySelector('[role=dialog]');
+        const into = [...(dialog?.querySelectorAll('button') ?? [])].find((b) => b.textContent?.includes('Box'));
+        expect(into).toBeDefined();
+        await act(async () => into?.click());
+        expect(store.getState().doc.nodes['boxAAAAAA1']?.slots?.['default']).toEqual(['leafBBBBB1']);
+        expect(store.getState().doc.nodes['root']?.slots?.['default']).toEqual(['boxAAAAAA1']);
+    });
+});

package/dist/dnd/dnd.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dnd.test.d.ts.map

package/dist/dnd/dnd.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd.test.d.ts","sourceRoot":"","sources":["../../src/dnd/dnd.test.ts"],"names":[],"mappings":""}