edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/media/EmptySlot.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Component, Snippet } from 'svelte';
+import type { Block } from '../../block/block.svelte.js';
+import type { Edytor } from '../../edytor.svelte.js';
+import type { MediaKind } from './media.js';
+import type { EmptyView, MediaEmptyController } from './empty.svelte.js';
+/** What an empty image or media block renders in its view: the media empty plugin's host and snippet. */
+type EmptyHost = {
+    Host: Component<{
+        block: Block | undefined;
+        kind: MediaKind | 'image';
+        viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
+        empty: Snippet<[MediaEmptyController]>;
+    }>;
+    empty: Snippet<[MediaEmptyController]>;
+};
+/** Each view's empty-block chrome (the first media empty plugin listed claims it). */
+export declare const emptyHosts: WeakMap<object, EmptyHost>;
+type $$ComponentProps = {
+    block: Block | undefined;
+    kind: MediaKind | 'image';
+    viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
+};
+declare const EmptySlot: Component<$$ComponentProps, {}, "">;
+type EmptySlot = ReturnType<typeof EmptySlot>;
+export default EmptySlot;

package/dist/plugins/media/FilePlugin.svelte

@@ -1,27 +1,18 @@
 <script module lang="ts">
-	import type { Plugin, BlockSnippetPayload } from '../../plugins.js';
-	import type { Block } from '../../block/block.svelte.js';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import MediaEmpty from './MediaEmpty.svelte';
-	import { mediaKinds } from '../../crdt/semantics.js';
-	import { keywordsOf, labelsWith } from '../../labels.js';
-	import {
-		escapeHtml,
-		fileNameOf,
-		mediaLabels,
-		safeMediaSrc,
-		mediaUploads,
-		type MediaPluginOptions
-	} from './media.js';
+	import type { Snippet } from 'svelte';
+	import type { Plugin } from '../../plugins.js';
+	import { escapeHtml, fileNameOf, safeMediaSrc, type FileRowPayload } from './media.js';
+	import { sourcePlugin } from './SourceBlock.svelte';
 
-	const uploadOf = new WeakMap<Edytor, MediaPluginOptions['upload']>();
+	export type { FileRowPayload };
 
-	/** Store a file's source, name and size on `block` as one data write; answers whether it did. */
-	const attach = (block: Block | undefined, value: string, name?: string, size?: number) => {
-		const src = safeMediaSrc(value);
-		if (!block || !src) return false;
-		block.setData({ src, name: name || fileNameOf(src), ...(size !== undefined ? { size } : {}) });
-		return true;
+	export type FilePluginOptions = {
+		/**
+		 * A file's row once it has a source (default: Notion's, a paperclip,
+		 * its name and size): `<a href={row.src} {@attach row.link}>`, which
+		 * downloads the file. The first file plugin listed in a view gives its row.
+		 */
+		row?: Snippet<[FileRowPayload]>;
 	};
 
 	/**
@@ -29,95 +20,28 @@
 	 * linked), shown as its name and size, linking to the file, with an
 	 * editable caption. Void: its only text is the caption.
 	 */
-	export const createFilePlugin =
-		(options: MediaPluginOptions = {}): Plugin =>
-		(edytor) => {
-			// First wins, as for the kind: a second listing never replaces it.
-			const first = !!edytor && !uploadOf.has(edytor);
-			if (first) uploadOf.set(edytor, options.upload);
-			const onPaste = first ? mediaUploads(edytor, 'file', options.upload) : undefined;
-			const labels = labelsWith('media', options.labels);
-			mediaLabels.file.claim(edytor, labels);
-			return {
-				...(onPaste ? { onPaste } : {}),
-				blocks: {
-					file: {
-						...mediaKinds.file,
-						snippet: file,
-						element: 'figure',
-						presets: [
-							{
-								label: labels.file.label,
-								icon: '📎',
-								keywords: keywordsOf(
-									'block.file',
-									['attachment', 'upload', 'pdf', 'document'],
-									options.keywords
-								),
-								group: 'Media'
-							}
-						],
-						html: (block, caption) => {
-							const src = safeMediaSrc(block.data?.src);
-							const name = String(block.data?.name || (src && fileNameOf(src)) || '');
-							const link = src ? `<a href="${escapeHtml(src)}">${escapeHtml(name)}</a>` : '';
-							return `<figure data-edytor-file>${link}<figcaption>${caption}</figcaption></figure>`;
-						},
-						plain: (block, caption) =>
-							[safeMediaSrc(block.data?.src), caption].filter(Boolean).join('\n'),
-						// Its own export: a `figure[data-edytor-file]` holding the link.
-						parse: (el) => {
-							if (el.localName !== 'figure' || !el.hasAttribute('data-edytor-file')) return;
-							const anchor = el.querySelector('a[href]');
-							const src = safeMediaSrc(anchor?.getAttribute('href'));
-							const name = anchor?.textContent?.trim().slice(0, 300);
-							return src ? { src, name: name || fileNameOf(src) } : undefined;
-						}
-					}
+	export const createFilePlugin = (options: FilePluginOptions = {}): Plugin =>
+		sourcePlugin(
+			'file',
+			['attachment', 'upload', 'pdf', 'document'],
+			{
+				html: (block, caption) => {
+					const src = safeMediaSrc(block.data?.src);
+					const name = String(block.data?.name || (src && fileNameOf(src)) || '');
+					const link = src ? `<a href="${escapeHtml(src)}">${escapeHtml(name)}</a>` : '';
+					return `<figure data-edytor-file>${link}<figcaption>${caption}</figcaption></figure>`;
+				},
+				plain: (block, caption) =>
+					[safeMediaSrc(block.data?.src), caption].filter(Boolean).join('\n'),
+				// Its own export: a `figure[data-edytor-file]` holding the link.
+				parse: (el) => {
+					if (el.localName !== 'figure' || !el.hasAttribute('data-edytor-file')) return;
+					const anchor = el.querySelector('a[href]');
+					const src = safeMediaSrc(anchor?.getAttribute('href'));
+					const name = anchor?.textContent?.trim().slice(0, 300);
+					return src ? { src, name: name || fileNameOf(src) } : undefined;
 				}
-			};
-		};
-
-	/** The file block, links only. */
-	export const filePlugin = createFilePlugin();
+			},
+			{ row: options.row }
+		);
 </script>
-
-{#snippet file({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
-	{@const src = safeMediaSrc(block.data.src)}
-	{#if src}
-		{@const name =
-			typeof block.data.name === 'string' && block.data.name ? block.data.name : fileNameOf(src)}
-		{@const size =
-			typeof block.data.size === 'number'
-				? mediaLabels.file.of(block.handle?.edytor).fileSize(block.data.size)
-				: ''}
-		<div use:block.void data-edytor-file>
-			<a
-				href={src}
-				target="_blank"
-				rel="noopener noreferrer nofollow"
-				download={name}
-				draggable="false"
-			>
-				<span aria-hidden="true">📎</span>
-				<span data-edytor-file-name>{name}</span>
-				{#if size}<span data-edytor-file-size>{size}</span>{/if}
-			</a>
-		</div>
-	{:else}
-		{@const upload = block.handle && uploadOf.get(block.handle.edytor)}
-		<div use:block.void data-edytor-media-empty>
-			<MediaEmpty
-				block={block.handle}
-				kind="file"
-				icon="📎"
-				{upload}
-				link={(value) => attach(block.handle, value)}
-				file={(picked, src) => attach(block.handle, src, picked.name, picked.size)}
-			/>
-		</div>
-	{/if}
-	<!-- The core renders the kind's <figure> around this markup. -->
-	<!-- svelte-ignore a11y_figcaption_parent -->
-	<figcaption>{@render content()}</figcaption>
-{/snippet}

package/dist/plugins/media/FilePlugin.svelte.d.ts

@@ -1,13 +1,21 @@
+import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
-import { type MediaPluginOptions } from './media.js';
+import { type FileRowPayload } from './media.js';
+export type { FileRowPayload };
+export type FilePluginOptions = {
+    /**
+     * A file's row once it has a source (default: Notion's, a paperclip,
+     * its name and size): `<a href={row.src} {@attach row.link}>`, which
+     * downloads the file. The first file plugin listed in a view gives its row.
+     */
+    row?: Snippet<[FileRowPayload]>;
+};
 /**
  * Notion's file block: an attachment, uploaded through `upload` (or
  * linked), shown as its name and size, linking to the file, with an
  * editable caption. Void: its only text is the caption.
  */
-export declare const createFilePlugin: (options?: MediaPluginOptions) => Plugin;
-/** The file block, links only. */
-export declare const filePlugin: Plugin;
+export declare const createFilePlugin: (options?: FilePluginOptions) => Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/plugins/media/MediaEmpty.svelte

@@ -1,139 +1,82 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { Plugin } from '../../plugins.js';
+	import { emptyHosts } from './EmptySlot.svelte';
+	import Self from './MediaEmpty.svelte';
+
+	export type MediaEmptyOptions = {
+		/**
+		 * An empty image's or media block's markup and its words (Notion's "Add
+		 * an image", "Embed a video"… and their link panel, a pasted or dropped
+		 * file's upload, or a readonly view's placeholder): it receives the
+		 * block's `MediaEmptyController` (`kind` says which: image, embed,
+		 * bookmark, file, video, audio).
+		 */
+		empty: Snippet<[MediaEmptyController]>;
+	};
+
+	/**
+	 * The empty image and media blocks' chrome: your `empty` snippet for each
+	 * of them (without the plugin, an empty block shows nothing). The first
+	 * listed claims the view.
+	 */
+	export const createMediaEmptyPlugin =
+		({ empty }: MediaEmptyOptions): Plugin =>
+		(edytor) => {
+			if (edytor && !emptyHosts.has(edytor)) emptyHosts.set(edytor, { Host: Self, empty });
+			return {};
+		};
+</script>
+
 <script lang="ts">
-	import { getContext, untrack } from 'svelte';
+	import { untrack } from 'svelte';
 	import type { Block } from '../../block/block.svelte.js';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { mediaLabels, type MediaKind } from './media.js';
-	import { fileUploads, type Uploader } from '../uploads.svelte.js';
+	import type { MediaKind } from './media.js';
+	import { MediaEmptyController, type EmptyView } from './empty.svelte.js';
+	import { fileUploads } from '../uploads.svelte.js';
 
 	/**
-	 * A media block's empty state (the image's pattern, Notion): an "Add …"
-	 * button, then a link field (and Upload with an `upload`). `link` answers
-	 * whether it took the link; `file` stores an uploaded file's URL (an
-	 * upload fills `src`, and only a block still empty when it lands). A
-	 * readonly view, or a suggestion's preview (no `block`), shows a passive
-	 * placeholder: no control may run `upload` (or a bookmark's `unfurl`) for
-	 * a write the view would refuse. A pasted or dropped file (`media.files`)
-	 * shows its upload and progress here; a failed one opens the panel with
-	 * its error; data answered while the block was not shown fills it as soon
-	 * as it shows.
+	 * An image's or a media block's empty state: a `MediaEmptyController`,
+	 * which the view's `empty` snippet draws. The kind in the
+	 * block's view (`viewOf`) stores the link, or an uploaded file's URL
+	 * (only on a block still empty when it lands). A readonly view, or a
+	 * suggestion's preview (no `block`), may not write: no control may run
+	 * `upload`. A pasted or dropped file shows its upload (`pending`); a
+	 * failed one opens the panel with its error; data answered while the
+	 * block was not shown fills it as soon as it shows.
 	 */
 	let {
 		block,
 		kind,
-		icon,
-		accept,
-		upload,
-		link,
-		file
+		viewOf,
+		empty
 	}: {
 		block: Block | undefined;
-		/** Whose words it shows, in the labels of the view rendering it (a suggestion's preview included). */
-		kind: MediaKind;
-		icon: string;
-		/** The file picker's `accept`. */
-		accept?: string;
-		upload?: Uploader;
-		link: (value: string) => boolean;
-		file?: (file: File, src: string) => boolean;
+		kind: MediaKind | 'image';
+		/** The kind in a view: how it stores a source. */
+		viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
+		/** The view's `empty` snippet. */
+		empty: Snippet<[MediaEmptyController]>;
 	} = $props();
-	/** The view rendering it (a suggestion's preview included): whose labels it shows. */
-	const view = getContext<Edytor>('edytor');
-	const labels = $derived(mediaLabels[kind].of(view));
-	const words = $derived(labels[kind]);
-	/** The button and placeholder text ("Embed a link"); the file's names its upload. */
-	const label = $derived(upload && 'addOrUpload' in words ? words.addOrUpload : words.add);
-	const { placeholder, submit, invalid } = $derived(words);
+	const panel = untrack(() => new MediaEmptyController(block, kind, viewOf(block?.edytor)));
 	/** The upload of a pasted or dropped file into this block, if any. */
-	const uploads = $derived(block ? fileUploads(block.edytor) : undefined);
-	const pending = $derived(block ? uploads?.of(block.id) : undefined);
+	const pending = $derived(panel.pending);
 	// After the flush that shows the block: never inside the transaction that showed it.
 	$effect(() => {
 		if (pending?.status === 'landed' && block && !block.edytor.readonly) {
 			const id = block.id;
-			untrack(() => uploads?.fill(id));
+			untrack(() => fileUploads(block.edytor)?.fill(id));
 		}
 	});
-	let draft = $state('');
-	let open = $state(false);
-	let failed = $state<'invalid' | 'upload' | false>(false);
 	// The panel opens on a failed upload, with its error; the user closes it.
 	$effect(() => {
 		if (pending?.status === 'failed')
 			untrack(() => {
-				open = true;
-				failed = 'upload';
+				panel.open = true;
+				panel.failed = 'upload';
 			});
 	});
-
-	const embed = (value: string) => {
-		failed = link(value) ? false : 'invalid';
-		if (!failed && block) uploads?.clear(block.id);
-	};
 </script>
 
-{#if pending?.status === 'uploading'}
-	<div data-edytor-media-uploading role="status">
-		<span aria-hidden="true">{icon}</span>
-		<progress value={pending.progress ?? undefined} max="1"></progress>
-		{labels.uploading}
-	</div>
-{:else if !block || block.edytor.readonly}
-	<div data-edytor-media-placeholder><span aria-hidden="true">{icon}</span> {label}</div>
-{:else}
-	<button
-		type="button"
-		data-edytor-media-add
-		onmousedown={(event) => event.preventDefault()}
-		onclick={() => (open = !open)}><span aria-hidden="true">{icon}</span> {label}</button
-	>
-	{#if open}
-		<div data-edytor-media-form>
-			<input
-				{placeholder}
-				aria-label={placeholder}
-				bind:value={draft}
-				onkeydown={(event) => {
-					if (event.key === 'Enter') {
-						event.preventDefault();
-						embed(draft);
-					}
-				}}
-			/>
-			<button type="button" onclick={() => embed(draft)}>{submit}</button>
-			{#if upload}
-				<label data-edytor-media-upload>
-					{labels.upload}
-					<input
-						type="file"
-						{accept}
-						hidden
-						onchange={async (event) => {
-							const picked = event.currentTarget.files?.[0];
-							if (!picked || !block || block.edytor.readonly) return;
-							const { edytor, id, type } = block;
-							let src: string;
-							try {
-								src = await upload(picked, { progress: () => {} });
-							} catch {
-								failed = 'upload';
-								return;
-							}
-							// Write only to the block as it was picked from: still in the
-							// tree, of its kind and empty (a peer may have set a source, or
-							// deleted it, while the upload ran).
-							const live = edytor.idToBlock.get(id);
-							if (!live?.isInTree || live.type !== type || edytor.readonly) return;
-							if (edytor.facade.blockDataOf(id)?.src !== undefined) return;
-							failed = (file ? file(picked, src) : link(src)) ? false : 'invalid';
-						}}
-					/>
-				</label>
-			{/if}
-			{#if failed === 'upload'}
-				<small data-edytor-media-error="upload">{labels.uploadFailed}</small>
-			{:else if failed}
-				<small data-edytor-media-error="invalid">{invalid}</small>
-			{/if}
-		</div>
-	{/if}
-{/if}
+{@render empty(panel)}

package/dist/plugins/media/MediaEmpty.svelte.d.ts

@@ -1,16 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { Plugin } from '../../plugins.js';
+export type MediaEmptyOptions = {
+    /**
+     * An empty image's or media block's markup and its words (Notion's "Add
+     * an image", "Embed a video"… and their link panel, a pasted or dropped
+     * file's upload, or a readonly view's placeholder): it receives the
+     * block's `MediaEmptyController` (`kind` says which: image, embed,
+     * bookmark, file, video, audio).
+     */
+    empty: Snippet<[MediaEmptyController]>;
+};
+/**
+ * The empty image and media blocks' chrome: your `empty` snippet for each
+ * of them (without the plugin, an empty block shows nothing). The first
+ * listed claims the view.
+ */
+export declare const createMediaEmptyPlugin: ({ empty }: MediaEmptyOptions) => Plugin;
 import type { Block } from '../../block/block.svelte.js';
-import { type MediaKind } from './media.js';
-import { type Uploader } from '../uploads.svelte.js';
+import type { Edytor } from '../../edytor.svelte.js';
+import type { MediaKind } from './media.js';
+import { MediaEmptyController, type EmptyView } from './empty.svelte.js';
 type $$ComponentProps = {
     block: Block | undefined;
-    /** Whose words it shows, in the labels of the view rendering it (a suggestion's preview included). */
-    kind: MediaKind;
-    icon: string;
-    /** The file picker's `accept`. */
-    accept?: string;
-    upload?: Uploader;
-    link: (value: string) => boolean;
-    file?: (file: File, src: string) => boolean;
+    kind: MediaKind | 'image';
+    /** The kind in a view: how it stores a source. */
+    viewOf: (edytor: Edytor | undefined) => EmptyView | undefined;
+    /** The view's `empty` snippet. */
+    empty: Snippet<[MediaEmptyController]>;
 };
 declare const MediaEmpty: import("svelte").Component<$$ComponentProps, {}, "">;
 type MediaEmpty = ReturnType<typeof MediaEmpty>;

package/dist/plugins/media/SourceBlock.svelte

@@ -0,0 +1,164 @@
+<script module lang="ts">
+	import type { BlockDefinition, BlockSnippetPayload, Plugin } from '../../plugins.js';
+	import EmptySlot from './EmptySlot.svelte';
+	import Control from '../Control.svelte';
+	import { labelsOf, mediaEnglish } from '../../labels.js';
+	import {
+		claimed,
+		escapeHtml,
+		fileNameOf,
+		mediaControl,
+		mediaLink,
+		mediaPlugin,
+		mediaSourceOf,
+		mediaView,
+		safeMediaSrc,
+		LINK_REL,
+		type FileRowPayload,
+		type MediaView
+	} from './media.js';
+
+	type SourceKind = 'video' | 'audio' | 'file';
+
+	/** The view's file row markup, if the app gave one. */
+	const rowOf = mediaControl('file', 'row');
+
+	/** The files each kind takes: a video, an audio track, any other file. */
+	const ACCEPTS: Record<SourceKind, (file: File) => boolean> = {
+		video: (file) => /^video\//i.test(file.type),
+		audio: (file) => /^audio\//i.test(file.type),
+		file: () => true
+	};
+
+	/**
+	 * The data a source stores: a `safeMediaSrc`, and a file's name (the
+	 * uploaded `file`'s, else its URL's last segment) and size; `null` for
+	 * no source.
+	 */
+	const sourceData = (kind: SourceKind, value: string, file?: File) => {
+		const src = safeMediaSrc(value);
+		if (!src) return null;
+		return kind === 'file'
+			? { src, name: file?.name || fileNameOf(src), ...(file ? { size: file.size } : {}) }
+			: { src };
+	};
+
+	/**
+	 * The plugin of a kind holding one source (a video, an audio track, an
+	 * attachment; Notion's): a media kind (`mediaPlugin`) drawn by this
+	 * snippet, a link or an uploaded file stored as one data write (a file's
+	 * whole data, its source, name and size; a video's or audio track's
+	 * `src`), and with an `upload`, the pasted and dropped files it takes
+	 * (`media.files`, its first listing in a view). A video or an audio track
+	 * exports as its tag in a `figure` and imports from one (bare, or in a
+	 * `figure`) with a safe `src` or `source`; the file kind brings its own
+	 * (`record`), and its `row` markup (`own`).
+	 */
+	export const sourcePlugin = (
+		kind: SourceKind,
+		keywords: string[],
+		record: Partial<BlockDefinition> = {
+			html: (block, caption) => {
+				const src = safeMediaSrc(block.data?.src);
+				// The tag, then its attributes: `<video src="…" controls></video>`.
+				const media = src ? `<${kind}` + ` src="${escapeHtml(src)}" controls></${kind}>` : '';
+				return `<figure>${media}<figcaption>${caption}</figcaption></figure>`;
+			},
+			parse: (el) => {
+				const src = mediaSourceOf(claimed(el, kind));
+				return src ? { src } : undefined;
+			}
+		},
+		own: Pick<MediaView, 'row'> = {}
+	): Plugin =>
+		mediaPlugin(kind, keywords, () => {
+			return {
+				...own,
+				store: (block, value, file) => {
+					const data = sourceData(kind, value, file);
+					if (!data) return 'invalid';
+					if (kind === 'file') block.edytor.patchData(block.id, [{ path: [], value: data }]);
+					else block.edytor.patchData(block.id, [{ path: ['src'], value: data.src }]);
+					return null;
+				},
+				record: {
+					snippet: source,
+					// Its files: with the uploads plugin, an Upload and pasted or dropped files.
+					upload: {
+						accepts: ACCEPTS[kind],
+						fallback: kind === 'file',
+						data: (file, answer) => sourceData(kind, answer, file),
+						filled: (data) => safeMediaSrc(data.src) !== null
+					},
+					...record
+				}
+			};
+		});
+</script>
+
+<!--
+	A file (its name and size, linking to it), a video or an audio track in
+	the browser's player, or the empty block until it has a source; its
+	caption below.
+-->
+{#snippet source({ block, content }: BlockSnippetPayload<Record<string, unknown>>)}
+	{@const src = safeMediaSrc(block.data.src)}
+	{#if src && block.type === 'file'}
+		{@const name =
+			typeof block.data.name === 'string' && block.data.name ? block.data.name : fileNameOf(src)}
+		{@const size = typeof block.data.size === 'number' ? block.data.size : undefined}
+		<div use:block.void data-edytor-file>
+			<Control
+				own={rowOf}
+				{initial}
+				payload={{
+					block: block.handle,
+					src,
+					name,
+					size,
+					sizeLabel:
+						size === undefined
+							? ''
+							: labelsOf(block.handle?.edytor, 'media', mediaEnglish).fileSize(size),
+					link: mediaLink({ draggable: 'false', download: name })
+				}}
+			/>
+		</div>
+	{:else if src && block.type === 'video'}
+		<div use:block.void data-edytor-video>
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video
+				{src}
+				controls
+				preload="metadata"
+				playsinline
+				draggable="false"
+				style="display: block; width: 100%"
+			></video>
+		</div>
+	{:else if src}
+		<div use:block.void data-edytor-audio>
+			<audio {src} controls preload="metadata" style="display: block; width: 100%"></audio>
+		</div>
+	{:else}
+		<div use:block.void data-edytor-media-empty>
+			<EmptySlot
+				block={block.handle}
+				kind={block.type as SourceKind}
+				viewOf={(edytor) => mediaView(edytor, block.type as SourceKind)}
+			/>
+		</div>
+	{/if}
+	<!-- The core renders the kind's <figure> around this markup. -->
+	<!-- svelte-ignore a11y_figcaption_parent -->
+	<figcaption>{@render content()}</figcaption>
+{/snippet}
+
+<!-- A file: its name and size, a link downloading it. -->
+{#snippet initial({ src, name, sizeLabel, link }: FileRowPayload)}
+	<a href={src} target="_blank" rel={LINK_REL} draggable="false" download={name} {@attach link}>
+		<span aria-hidden="true">📎</span>
+		<span data-edytor-file-name>{name}</span>
+		{#if sizeLabel}<span data-edytor-file-size>{sizeLabel}</span>{/if}
+	</a>
+{/snippet}

package/dist/plugins/media/SourceBlock.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { BlockDefinition, Plugin } from '../../plugins.js';
+import { type MediaView } from './media.js';
+type SourceKind = 'video' | 'audio' | 'file';
+/**
+ * The plugin of a kind holding one source (a video, an audio track, an
+ * attachment; Notion's): a media kind (`mediaPlugin`) drawn by this
+ * snippet, a link or an uploaded file stored as one data write (a file's
+ * whole data, its source, name and size; a video's or audio track's
+ * `src`), and with an `upload`, the pasted and dropped files it takes
+ * (`media.files`, its first listing in a view). A video or an audio track
+ * exports as its tag in a `figure` and imports from one (bare, or in a
+ * `figure`) with a safe `src` or `source`; the file kind brings its own
+ * (`record`), and its `row` markup (`own`).
+ */
+export declare const sourcePlugin: (kind: SourceKind, keywords: string[], record?: Partial<BlockDefinition>, own?: Pick<MediaView, "row">) => Plugin;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SourceBlock: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SourceBlock = InstanceType<typeof SourceBlock>;
+export default SourceBlock;