edytor 1.0.0-rc.2 → 1.0.0

package/dist/labels.js

@@ -1,18 +1,15 @@
 /**
- * The words the editor's chrome shows or says: one dictionary section per
- * bundled plugin, plus `editor` for the view itself (announcements, a
- * suggestion's name). English is the default; each plugin factory takes a
- * `labels` option with the entries to replace (`PartialLabels`), and
- * `<Edytor labels>` takes the `editor` section.
+ * The words the package itself shows or says: the kinds' and commands'
+ * names (the menus search them), the document's own markup (placeholders,
+ * a to-do's checkbox, an empty body's hint, a page's or an entry's
+ * "Untitled"), the accessible names of the elements it renders, and the
+ * view's announcements. English is the default. A view's `labels`
+ * (`<Edytor labels>`) replaces any entry of any section, and its
+ * `keywords` a command's slash keywords, by command id. The words of the
+ * chrome (menus, bars, panels, cards) are the app's: its snippets write them.
  *
  * A label that says something about a value is a function of it, so a
  * language can order and inflect the words: `moved: (what) => …`.
- *
- * Group names (`KindPreset.group`: `Basic blocks`, `Advanced blocks`,
- * `Media`, `Layout`), the toolbar's color names (`TOOLBAR_COLORS`) and the
- * block palette's (`BLOCK_COLORS`, and `default`) are keys: the slash menu's
- * `groups`, the toolbar's `colors` and the block menu's `colors` map them to
- * what is shown.
  */
 /** A byte count for people: `5 B`, `1.2 KB`, `3.4 MB`. */
 const bytes = (count) => {
@@ -35,399 +32,186 @@ const frozen = (value) => {
             frozen(entry);
     return Object.freeze(value);
 };
+const UNTITLED = 'Untitled';
+/** An empty body's hint (`body.hint`). */
+/* @__NO_SIDE_EFFECTS__ */
+const emptyBody = (kind) => `Empty ${kind}. Click or drop blocks inside.`;
+const heading = (level) => `Heading ${level}`;
+const toggleHeading = (level) => `Toggle heading ${level}`;
+/** The `editor` section in English. */
+export const editorEnglish = /* @__PURE__ */ frozen({
+    suggestion: 'Suggestion',
+    block: (kind) => `${kind} block`,
+    blocks: (count) => `${count} blocks`,
+    movedUp: (what) => `Moved ${what} up`,
+    movedDown: (what) => `Moved ${what} down`,
+    indented: (what) => `Indented ${what}`,
+    outdented: (what) => `Outdented ${what}`,
+    moved: (what) => `Moved ${what}`,
+    deleted: (what) => `Deleted ${what}`
+});
+/** The `richText` section in English. */
+export const richTextEnglish = /* @__PURE__ */ frozen({
+    kinds: {
+        paragraph: 'Text',
+        heading1: heading(1),
+        heading2: heading(2),
+        heading3: heading(3),
+        toggleHeading1: toggleHeading(1),
+        toggleHeading2: toggleHeading(2),
+        toggleHeading3: toggleHeading(3),
+        bulletedList: 'Bulleted list',
+        numberedList: 'Numbered list',
+        todoList: 'To-do list',
+        toggleList: 'Toggle list',
+        callout: 'Callout',
+        quote: 'Quote',
+        divider: 'Divider'
+    },
+    marks: {
+        bold: 'Bold',
+        italic: 'Italic',
+        underline: 'Underline',
+        strike: 'Strike',
+        code: 'Code'
+    },
+    checkbox: 'Done',
+    emptyBody: {
+        toggle: emptyBody('toggle'),
+        callout: emptyBody('callout')
+    },
+    calloutIcon: { change: 'Change icon', add: 'Add icon' },
+    placeholders: {
+        heading,
+        toggleHeading,
+        list: 'List',
+        todo: 'To-do',
+        toggle: 'Toggle',
+        quote: 'Empty quote',
+        callout: 'Callout title',
+        caption: 'Write a caption…',
+        empty: "Type '/' for commands"
+    }
+});
+/** The `blockMenu` section in English. */
+export const blockMenuEnglish = /* @__PURE__ */ frozen({
+    turnInto: 'Turn into',
+    color: 'Color',
+    colors: Object.fromEntries(['Default', 'Gray', 'Brown', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Pink', 'Red'].map((name) => [name.toLowerCase(), name])),
+    colorText: (color) => `${color} text`,
+    colorBackground: (color) => `${color} background`,
+    copyLink: 'Copy link to block',
+    duplicate: 'Duplicate',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
+    delete: 'Delete',
+    ctrl: 'Ctrl',
+    shift: 'Shift',
+    deleteKey: 'Del'
+});
+/** The `image` section in English. */
+export const imageEnglish = /* @__PURE__ */ frozen({ image: 'Image' });
+/** The `media` section in English. */
+export const mediaEnglish = /* @__PURE__ */ frozen({
+    embed: 'Embed',
+    bookmark: 'Web bookmark',
+    file: 'File',
+    video: 'Video',
+    audio: 'Audio',
+    fileSize: bytes
+});
+/** The `code` section in English. */
+export const codeEnglish = /* @__PURE__ */ frozen({ code: 'Code' });
+/** The `columns` section in English. */
+export const columnsEnglish = /* @__PURE__ */ frozen({
+    columns: (count) => `${count} columns`,
+    resize: 'Resize columns'
+});
+/** The `page` section in English. */
+export const pageEnglish = /* @__PURE__ */ frozen({ page: 'Page', untitled: UNTITLED });
+/** The `toc` section in English. */
+export const tocEnglish = /* @__PURE__ */ frozen({
+    toc: 'Table of contents',
+    untitled: UNTITLED,
+    empty: 'Add headings to create a table of contents.'
+});
+/** The `pageLink` section in English. */
+export const pageLinkEnglish = /* @__PURE__ */ frozen({ untitled: UNTITLED });
+/** The `comments` section in English. */
+export const commentsEnglish = /* @__PURE__ */ frozen({
+    comment: 'Comment',
+    sidebar: 'Comments'
+});
+/** The `table` section in English. */
+export const tableEnglish = /* @__PURE__ */ frozen({
+    table: 'Table',
+    headerRow: 'Header row',
+    headerColumn: 'Header column',
+    insertRowAbove: 'Insert row above',
+    insertRowBelow: 'Insert row below',
+    insertColumnLeft: 'Insert column left',
+    insertColumnRight: 'Insert column right',
+    deleteRow: 'Delete row',
+    deleteColumn: 'Delete column',
+    resize: 'Resize column',
+    emptyCell: 'Empty cell'
+});
+/** The `equation` section in English. */
+export const equationEnglish = /* @__PURE__ */ frozen({
+    block: 'Block equation',
+    inline: 'Inline equation',
+    blockPlaceholder: 'Add a TeX equation',
+    inlinePlaceholder: 'New equation',
+    invalid: 'Invalid equation'
+});
 /**
  * The English dictionary: the default of every section. Frozen: start
- * yours from a copy (`{ ...englishLabels.toolbar, link: '…' }`).
+ * yours from a copy (`{ ...englishLabels.richText, checkbox: '…' }`). Each
+ * plugin reads only its own section, so an app ships the words of the
+ * plugins it lists.
  */
-export const englishLabels = frozen({
-    editor: {
-        suggestion: 'Suggestion',
-        block: (kind) => `${kind} block`,
-        blocks: (count) => `${count} blocks`,
-        movedUp: (what) => `Moved ${what} up`,
-        movedDown: (what) => `Moved ${what} down`,
-        indented: (what) => `Indented ${what}`,
-        outdented: (what) => `Outdented ${what}`,
-        moved: (what) => `Moved ${what}`,
-        deleted: (what) => `Deleted ${what}`,
-        triggerMenu: 'Suggestions',
-        searching: 'Searching…',
-        noResults: 'No results'
-    },
-    richText: {
-        kinds: {
-            paragraph: 'Text',
-            heading1: 'Heading 1',
-            heading2: 'Heading 2',
-            heading3: 'Heading 3',
-            toggleHeading1: 'Toggle heading 1',
-            toggleHeading2: 'Toggle heading 2',
-            toggleHeading3: 'Toggle heading 3',
-            bulletedList: 'Bulleted list',
-            numberedList: 'Numbered list',
-            todoList: 'To-do list',
-            toggleList: 'Toggle list',
-            callout: 'Callout',
-            quote: 'Quote',
-            divider: 'Divider'
-        },
-        marks: {
-            bold: 'Bold',
-            italic: 'Italic',
-            underline: 'Underline',
-            strike: 'Strike',
-            code: 'Code'
-        },
-        checkbox: 'Done',
-        placeholders: {
-            heading: (level) => `Heading ${level}`,
-            toggleHeading: (level) => `Toggle heading ${level}`,
-            list: 'List',
-            todo: 'To-do',
-            toggle: 'Toggle',
-            quote: 'Empty quote',
-            callout: 'Type something…',
-            caption: 'Write a caption…',
-            empty: "Type '/' for commands"
-        }
-    },
-    toolbar: {
-        bar: 'Text formatting',
-        text: 'Text',
-        turnInto: 'Turn into',
-        link: 'Link',
-        linkUrl: 'Link URL',
-        linkPlaceholder: 'Paste link',
-        apply: 'Apply',
-        applyLink: 'Apply link',
-        remove: 'Remove',
-        removeLink: 'Remove link',
-        color: 'Color',
-        textColor: 'Text color',
-        backgroundColor: 'Background color',
-        colors: {
-            Default: 'Default',
-            Gray: 'Gray',
-            Brown: 'Brown',
-            Orange: 'Orange',
-            Yellow: 'Yellow',
-            Green: 'Green',
-            Blue: 'Blue',
-            Purple: 'Purple',
-            Pink: 'Pink',
-            Red: 'Red'
-        },
-        colorText: (color) => `${color} text`,
-        colorBackground: (color) => `${color} background`,
-        card: 'Link',
-        open: 'Open',
-        openLink: 'Open link in a new tab',
-        edit: 'Edit',
-        editLink: 'Edit link'
-    },
-    slashMenu: {
-        filter: 'Type to filter…',
-        filterLabel: 'Filter block commands',
-        list: 'Block commands',
-        noResults: 'No results',
-        close: 'Close menu',
-        closeKey: 'esc',
-        groups: {
-            'Basic blocks': 'Basic blocks',
-            'Advanced blocks': 'Advanced blocks',
-            Media: 'Media',
-            Layout: 'Layout',
-            Color: 'Color',
-            Inline: 'Inline'
-        }
-    },
-    blockMenu: {
-        search: 'Search actions…',
-        searchLabel: 'Search actions',
-        menu: 'Block actions',
-        block: 'Block',
-        turnInto: 'Turn into',
-        color: 'Color',
-        textColor: 'Text color',
-        backgroundColor: 'Background color',
-        colors: {
-            default: 'Default',
-            gray: 'Gray',
-            brown: 'Brown',
-            orange: 'Orange',
-            yellow: 'Yellow',
-            green: 'Green',
-            blue: 'Blue',
-            purple: 'Purple',
-            pink: 'Pink',
-            red: 'Red'
-        },
-        colorText: (color) => `${color} text`,
-        colorBackground: (color) => `${color} background`,
-        copyLink: 'Copy link to block',
-        duplicate: 'Duplicate',
-        moveUp: 'Move up',
-        moveDown: 'Move down',
-        delete: 'Delete',
-        noResults: 'No results',
-        ctrl: 'Ctrl',
-        shift: 'Shift',
-        deleteKey: 'Del'
-    },
-    blockHandles: {
-        add: (kind) => `Add a block below ${kind} (Alt: above)`,
-        addBeside: (kind) => `Add a block below ${kind} (Alt: a column to the right)`,
-        addHint: 'Click to add below\nAlt-click to add a block above',
-        addBesideHint: 'Click to add below\nAlt-click to add a column to the right',
-        grip: (kind) => `${kind} block: drag to move, click for actions`
-    },
-    image: {
-        image: 'Image',
-        add: 'Add an image',
-        link: 'Image link',
-        linkPlaceholder: 'Paste the image link…',
-        embed: 'Embed image',
-        upload: 'Upload',
-        uploading: 'Uploading…',
-        tooLarge: (limit, upload) => `Inline images are limited to ${limit}: ${upload ? 'upload the file instead' : 'host the image and paste its link'}.`,
-        uploadFailed: 'The upload failed: try again or paste a link.',
-        invalid: "That doesn't look like an image link or upload.",
-        toolbar: 'Image',
-        alignLeft: 'Align left',
-        alignCenter: 'Align center',
-        alignRight: 'Align right',
-        alt: 'Alt text',
-        altPlaceholder: 'Describe the image…'
-    },
-    media: {
-        embed: {
-            label: 'Embed',
-            offer: 'Embed',
-            add: 'Embed a link',
-            placeholder: 'Paste the link…',
-            submit: 'Embed link',
-            invalid: 'No embed provider plays that link.'
-        },
-        bookmark: {
-            label: 'Web bookmark',
-            offer: 'Bookmark',
-            add: 'Add a web bookmark',
-            placeholder: 'Paste the link…',
-            submit: 'Create bookmark',
-            invalid: "That doesn't look like a web link."
-        },
-        file: {
-            label: 'File',
-            add: 'Embed a file',
-            addOrUpload: 'Upload or embed a file',
-            placeholder: 'Paste the file link…',
-            submit: 'Embed link',
-            invalid: "That doesn't look like a file link or upload."
-        },
-        video: {
-            label: 'Video',
-            add: 'Embed a video',
-            placeholder: 'Paste the video link…',
-            submit: 'Embed video',
-            invalid: "That doesn't look like a video link or upload."
-        },
-        audio: {
-            label: 'Audio',
-            add: 'Embed audio',
-            placeholder: 'Paste the audio link…',
-            submit: 'Embed audio',
-            invalid: "That doesn't look like an audio link or upload."
-        },
-        upload: 'Upload',
-        uploading: 'Uploading…',
-        uploadFailed: 'The upload failed: try again or paste a link.',
-        fileSize: bytes,
-        pasteAs: 'Paste as',
-        pasteLink: 'Link'
-    },
-    code: {
-        code: 'Code',
-        language: 'Code language',
-        copy: 'Copy',
-        copied: 'Copied',
-        languages: {}
-    },
-    find: {
-        bar: 'Find in page',
-        query: 'Find',
-        queryPlaceholder: 'Find in page',
-        noResults: 'No results',
-        count: (current, total) => `${current}/${total}`,
-        matchCase: 'Match case',
-        previous: 'Previous match',
-        previousHint: 'Previous match (Shift+Enter)',
-        next: 'Next match',
-        nextHint: 'Next match (Enter)',
-        close: 'Close',
-        closeHint: 'Close (Escape)',
-        replaceWith: 'Replace with',
-        replace: 'Replace',
-        replaceAll: 'Replace all'
-    },
-    suggestions: {
-        suggestion: 'Suggestion',
-        writing: (label) => `${label ?? 'AI'} is writing…`,
-        accept: 'Accept',
-        discard: 'Discard',
-        retry: 'Try again',
-        ctrl: 'Ctrl',
-        escape: 'Esc'
-    },
-    columns: {
-        columns: (count) => `${count} columns`,
-        resize: 'Resize columns'
-    },
-    page: {
-        page: 'Page',
-        untitled: 'Untitled'
-    },
-    toc: {
-        toc: 'Table of contents',
-        untitled: 'Untitled',
-        empty: 'Add headings to create a table of contents.'
-    },
-    pageLink: {
-        menu: 'Pages',
-        searching: 'Searching…',
-        noResults: 'No results',
-        untitled: 'Untitled'
-    },
-    comments: {
-        comment: 'Comment',
-        sidebar: 'Comments',
-        placeholder: 'Add a comment…',
-        reply: 'Reply…',
-        post: 'Comment',
-        cancel: 'Cancel',
-        resolve: 'Resolve',
-        reopen: 'Re-open',
-        delete: 'Delete',
-        resolvedBy: (name) => `Resolved by ${name}`,
-        showResolved: (count) => `Resolved (${count})`,
-        hideResolved: 'Hide resolved',
-        you: 'You',
-        when: (at) => Number.isFinite(at)
-            ? new Intl.DateTimeFormat('en', {
-                month: 'short',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: '2-digit'
-            }).format(at)
-            : '',
-        failed: 'Could not save the comment. Try again.'
-    },
-    table: {
-        table: 'Table',
-        headerRow: 'Header row',
-        headerColumn: 'Header column',
-        insertRowAbove: 'Insert row above',
-        insertRowBelow: 'Insert row below',
-        insertColumnLeft: 'Insert column left',
-        insertColumnRight: 'Insert column right',
-        insertAbove: 'Insert above',
-        insertBelow: 'Insert below',
-        insertLeft: 'Insert left',
-        insertRight: 'Insert right',
-        moveUp: 'Move up',
-        moveDown: 'Move down',
-        moveLeft: 'Move left',
-        moveRight: 'Move right',
-        deleteRow: 'Delete row',
-        deleteColumn: 'Delete column',
-        addRow: 'Add a row',
-        addColumn: 'Add a column',
-        rowMenu: 'Row options',
-        columnMenu: 'Column options',
-        resize: 'Resize column',
-        emptyCell: 'Empty cell'
-    },
-    mention: {
-        menu: 'People',
-        searching: 'Searching…',
-        noResults: 'No results'
-    },
-    history: {
-        title: 'Version history',
-        versions: 'Versions',
-        morning: 'Morning',
-        evening: 'Evening',
-        loading: 'Loading…',
-        empty: 'No versions yet. A version is saved twice a day while the page changes.',
-        noEditors: 'No editors',
-        moreEditors: (count) => `+${count}`,
-        saved: 'Saved',
-        preview: 'Version preview',
-        choose: 'Choose a version to preview it.',
-        highlight: 'Highlight changes',
-        added: (count) => `${count} added since`,
-        removed: (count) => `${count} removed since`,
-        changed: (count) => `${count} changed since`,
-        same: 'Same as the current page',
-        restore: 'Restore version',
-        restoring: 'Restoring…',
-        undo: 'Undo restore',
-        restored: 'Version restored.',
-        unchanged: 'The page already matches this version.',
-        unavailable: 'This version is no longer available.',
-        undone: 'Restore undone.',
-        nothingToUndo: 'There is no restore to undo.',
-        denied: 'You do not have access to this history.',
-        failed: 'The history could not be reached.'
-    },
-    equation: {
-        block: 'Block equation',
-        inline: 'Inline equation',
-        blockPlaceholder: 'Add a TeX equation',
-        inlinePlaceholder: 'New equation',
-        editor: 'Equation',
-        placeholder: 'E = mc^2',
-        done: 'Done',
-        invalid: 'Invalid equation'
-    }
+export const englishLabels = /* @__PURE__ */ frozen({
+    editor: editorEnglish,
+    richText: richTextEnglish,
+    blockMenu: blockMenuEnglish,
+    image: imageEnglish,
+    media: mediaEnglish,
+    code: codeEnglish,
+    columns: columnsEnglish,
+    page: pageEnglish,
+    toc: tocEnglish,
+    pageLink: pageLinkEnglish,
+    comments: commentsEnglish,
+    table: tableEnglish,
+    equation: equationEnglish
 });
+/** Each view's sections, merged once: its `labels` over the English ones. */
+const merged = new WeakMap();
 /**
- * Section `section` of the dictionary with `overrides` over the English one:
- * an entry replaces its English entry, a nested group's entries replace
- * only theirs.
+ * The words of `section` in `view` (`english` its English words): the
+ * view's `labels` entries over them, a nested group's entries replacing
+ * only theirs. English for no view (a document read without one).
  */
-export const labelsWith = (section, overrides) => {
-    const base = englishLabels[section];
+export const labelsOf = (view, section, english) => {
+    const overrides = view?.labels[section];
     if (!overrides)
-        return base;
-    const merged = { ...base };
-    for (const [key, value] of Object.entries(overrides)) {
-        if (value === undefined)
-            continue;
-        const own = base[key];
-        merged[key] = isGroup(own) && isGroup(value) ? { ...own, ...value } : value;
+        return english;
+    let sections = merged.get(view.labels);
+    if (!sections)
+        merged.set(view.labels, (sections = new Map()));
+    let words = sections.get(section);
+    if (!words) {
+        const base = english;
+        const out = { ...base };
+        for (const [key, value] of Object.entries(overrides))
+            if (value !== undefined)
+                out[key] = isGroup(base[key]) && isGroup(value) ? { ...base[key], ...value } : value;
+        sections.set(section, (words = out));
     }
-    return merged;
+    return words;
 };
 /**
- * The keywords of command `id`: `overrides`' entry for it when there is one
- * (it replaces the defaults: list the English ones in it to keep them),
- * else `defaults`.
- */
-export const keywordsOf = (id, defaults, overrides) => overrides?.[id] ?? defaults;
-/**
- * One plugin's labels per view: the first plugin of its kind listed in a
- * view claims them, as its kind records (first wins); its components read
- * them through the view they render in, English when none claimed them.
+ * The slash keywords of command `id` in `view`: its `keywords` entry for
+ * the id when there is one (it replaces the defaults), else `defaults`.
  */
-export const viewLabels = (section) => {
-    const claimed = new WeakMap();
-    return {
-        /** `labels` for `view`, unless a plugin listed before claimed it. */
-        claim: (view, labels) => {
-            if (view && !claimed.has(view))
-                claimed.set(view, labels);
-        },
-        /** The labels of `view` (English for none, or a view no plugin claimed). */
-        of: (view) => (view && claimed.get(view)) || englishLabels[section]
-    };
-};
+export const keywordsOf = (view, id, defaults) => view?.labels.keywords?.[id] ?? defaults;

package/dist/plugins/Chrome.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { Edytor } from '../edytor.svelte.js';
+
+	/**
+	 * A chrome surface the app draws (`mountChrome`): its snippet with the
+	 * controller's payload while `shown` holds; a view turning readonly
+	 * closes it (`close`), as its actions would be refused.
+	 */
+	let {
+		edytor,
+		snippet,
+		payload,
+		shown,
+		close
+	}: {
+		edytor: Edytor;
+		snippet: Snippet<[T]>;
+		payload: T;
+		shown: () => unknown;
+		close?: () => void;
+	} = $props();
+
+	$effect(() => {
+		if (close && shown() && edytor.readonly) close();
+	});
+</script>
+
+{#if shown()}{@render snippet(payload)}{/if}

package/dist/plugins/Chrome.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { Edytor } from '../edytor.svelte.js';
+declare function $$render<T>(): {
+    props: {
+        edytor: Edytor;
+        snippet: Snippet<[T]>;
+        payload: T;
+        shown: () => unknown;
+        close?: () => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Chrome: $$IsomorphicComponent;
+type Chrome<T> = InstanceType<typeof Chrome<T>>;
+export default Chrome;

package/dist/plugins/Control.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" generics="T">
+	import { getContext, type Snippet } from 'svelte';
+	import type { Edytor } from '../edytor.svelte.js';
+
+	/**
+	 * A control inside a block: the app's snippet for it in the view
+	 * rendering it (`own`; a suggestion's preview's too), else the package's
+	 * markup (`initial`), with the control's `payload`.
+	 */
+	let {
+		own,
+		initial,
+		payload
+	}: {
+		own: (view: Edytor | undefined) => Snippet<[T]> | undefined;
+		initial: Snippet<[T]>;
+		payload: T;
+	} = $props();
+	const view = getContext<Edytor | undefined>('edytor');
+	const snippet = $derived(own(view) ?? initial);
+</script>
+
+{@render snippet(payload)}