@atom-forge/brickee 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -7,9 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.2] - 2026-11-10
+
+### Added
+
+- Showcase site in `src/routes` (`bun run dev`), styled like the `@atom-forge/ui` site: a playground (editor beside its preview, stored JSON and markdown), the guide (editor and preview, split view, markdown, stored form and schema), a page per bundled plugin, writing, nesting and overriding plugins, image blocks, and the host contexts (per-view values, code languages, localisation), each with live examples and their code. It resolves `@atom-forge/brickee` to the local source and prerenders to `build/` (`@sveltejs/adapter-static`); it is not part of the npm package.
+- A `toggles` field kind (`PropField`): a row of icon buttons, each switching one of `options` on or off (`options[].icon` is the button, `label` its tooltip), stored as the list of the ones on.
+- `provideCodeLanguages(() => list)` (with `useCodeLanguages` and the `CodeLanguage` type): a host context that turns a code block's language field into a dropdown of the given languages, with *None* first; without it the language stays free text. Nested editors inherit the list, and a stored language missing from it stays an option.
+
 ### Changed
-- Configure releases with Ship.
 
+- The fields bar is more compact: smaller controls and type, text fields show their label as the placeholder (with the field's own placeholder after it), the other fields a short label beside the control.
+- The table's header and footer rows are two icon toggles in its fields bar (a `toggles` field), like any plugin field; the toolbar above the table holds only the row and column tools of the cell being edited, and says to click a cell while none is. The info icon with the keyboard hint is gone.
+- The editor follows the host's light and dark mode: its colours (block fields, popups, frames, the table editor, the block actions) come from the `@atom-forge/ui` theme tokens with the former colours as fallbacks, and the props bar and the link prompt no longer force the light theme. The previews' table borders, video captions and the gap's stripes are drawn from the text colour.
+- A code block's language is edited in the same fields bar as a plugin's (its header shows `code · <language>`), instead of a small input in its corner; read-only, the corner still shows the language.
+- The block handles keep 1px free above and below, so the handles of neighbouring blocks do not touch.
+- The docs note that the block handles are drawn about 22 px left of the editor's box, so the element around it needs that much left padding.
+- Releases are configured with `ship-it init`: the publish workflow comes from Ship's template, `package.json` gains `pub-validate` and `publishConfig`, and npm Trusted Publishing lets CI publish the next versions.
+
+### Removed
+
+- **Breaking:** images and media are no longer the library's concept — whether a block stores a URL or an id, how the user picks an image and how it is resolved is the application's decision. Removed: the `image` and `images` field kinds with their picker, the `media` prop of `Editor` and `Preview`, `provideMedia`, `useMedia`, `findMedia`, the `MediaItem` type, `toMarkdown`'s `media` option and `MarkdownContext.media`. An image block is an app plugin that picks in its own view or dialog and resolves with the app's own data; stored documents are unaffected. See the upgrading chapter.
 
 ## [0.0.1] - 2026-11-10
 

package/README-AI.md

@@ -9,8 +9,10 @@ Brickee is a block editor. Its core is a markdown block editor (`md:p`, `md:h1`
 - Peers: `svelte` 5, `@atom-forge/ui` (popups and field controls), `@lucide/svelte`; `zod` only for `@atom-forge/brickee/schema`. The app must set up `@atom-forge/ui` (Tailwind 4, its theme CSS and `@source`, the app beneath its `Root`).
 - Store the editor's `value` (`StoredBlock[]`) as it is. Built-in types start with `md:`; any other `type` is a plugin's. Never rename a plugin's `type`: stored documents refer to it.
 - Pass the same `plugins` to the `Editor` and the `Preview` of a document type. Restrict what an editor offers with `palette` (palette ids: `md:*` kinds and plugin types), not by dropping plugins.
-- No app-specific editor props: app data reaches plugins through contexts (`media` / `provideMedia`, `provideView`, `messages` / `provideText`) or plugin fields.
-- Plugin props are untrusted user input. Previews sanitize: `safeColor` for colours, check links, clamp numbers, look images up by id in the media list, never `{@html}` with props.
+- The editor's colours come from the `@atom-forge/ui` theme tokens (light/dark follow the host). Its block handles sit ~22 px left of its box: leave that much left padding around it.
+- No app-specific editor props: app data reaches plugins through contexts (`provideView`, `provideCodeLanguages`, `messages` / `provideText`), plugin fields, or the app's own modules and contexts.
+- No image concept: no image field, picker or media list. An image block is an app plugin that stores what the app chooses (a URL, or an id of its own media library), picks it in its view or the app's own dialog, and resolves ids with the app's own data.
+- Plugin props are untrusted user input. Previews sanitize: `safeColor` for colours, check links and image addresses (`http(s)` or site-relative), clamp numbers, never `{@html}` with props.
 - A plugin view declares both `props` and `blocks` with `$bindable()`, even if unused.
 - Containers (`content: 'blocks'`) nest one level only; nested editors never offer containers or unique plugins. `accepts` narrows their content (`'md:*'` = every built-in).
 - `unique`: one per document, top level; not enforced by the schema. `gate`: the preview only *marks* blocks after it; hide gated content on the server.
@@ -24,9 +26,9 @@ Brickee is a block editor. Its core is a markdown block editor (`md:p`, `md:h1`
 
 ```ts
 // @atom-forge/brickee — components
-// <Editor bind:value={StoredBlock[]} plugins?={BlockPlugin[]} palette?={string[]} media?={MediaItem[]}
-//         messages?={Messages} readonly?={boolean} placeholder?={string} />   // `nested` is for Frame only
-// <Preview blocks={StoredBlock[]} plugins={BlockPlugin[]} media?={MediaItem[]} messages?={Messages}
+// <Editor bind:value={StoredBlock[]} plugins?={BlockPlugin[]} palette?={string[]} messages?={Messages}
+//         readonly?={boolean} placeholder?={string} />   // `nested` is for Frame only
+// <Preview blocks={StoredBlock[]} plugins={BlockPlugin[]} messages?={Messages}
 //          markGated?={boolean /* default true */} nested?={boolean} />
 // <Frame bind:blocks {readonly} {palette} {plugins} heading?={string} empty?={string} image?={string} placeholder?={string} />
 // <Empty icon={Icon} text={string} />
@@ -43,15 +45,14 @@ function inline(md: string): string;                 // inline markdown -> safe
 function fromStored(s: StoredBlock): Block;
 function toStored(b: Block): StoredBlock;           // browser only
 function fromMarkdown(src: string): Block[];        // one block per non-empty line; built-in blocks only
-function toMarkdown(blocks: Block[], opts?: { plugins?: BlockPlugin[]; media?: MediaItem[] }): string; // browser only
+function toMarkdown(blocks: Block[], opts?: { plugins?: BlockPlugin[] }): string; // browser only
 
 // contexts (call provide* in component init, above the editor/preview; use* in plugin components)
-interface MediaItem { id: string; name: string; url: string; group?: string }
-function provideMedia(own: () => MediaItem[] | undefined): void;
-function useMedia(): () => MediaItem[];
-function findMedia(list: MediaItem[], id: unknown): MediaItem | undefined;
 function provideView(get: () => string | undefined): void;
 function useView(): () => string | undefined;
+interface CodeLanguage { value: string; label?: string }      // value: stored as the code block's props.lang
+function provideCodeLanguages(own: () => (string | CodeLanguage)[] | undefined): void; // list: the language field is a dropdown
+function useCodeLanguages(): () => CodeLanguage[];             // empty: free text
 type Messages = Record<string, string>;
 type Translate = (text: string, vars?: Record<string, string | number>) => string; // fills {name}
 function provideText(own: () => Messages | undefined): void;
@@ -99,12 +100,12 @@ interface BlockPlugin<P extends Props = Props> {
 }
 interface PluginViewProps<P> { props: P; blocks: StoredBlock[]; readonly: boolean; palette: string[]; plugins: BlockPlugin[] }
 interface PluginPreviewProps<P> { props: P; blocks: StoredBlock[]; plugins: BlockPlugin[] }
-interface MarkdownContext { inner: string; media: MediaItem[] }
+interface MarkdownContext { inner: string }
 interface PropField {
 	key: string; label: string;
-	kind: 'text' | 'textarea' | 'color' | 'select' | 'slider' | 'image' | 'images';
+	kind: 'text' | 'textarea' | 'color' | 'select' | 'slider' | 'toggles'; // toggles: icon buttons, stores the list of the ones on
 	placeholder?: string;
-	options?: { value: string; label: string }[]; // select; stepped slider; label may use {n}
+	options?: { value: string; label: string; icon?: Icon }[]; // select; stepped slider (label may use {n}); toggles (icon + tooltip)
 	min?: number; max?: number; step?: number; unit?: string; // number slider (stored as string)
 	none?: string;                                // unset label (number slider notch, optional colour)
 	views?: { key: string; label: string }[];     // per-view slider values
@@ -113,10 +114,10 @@ interface PropField {
 }
 
 // @atom-forge/brickee/plugins
-// table, youtube, map, gap — the only bundled plugins (none holds nested blocks or uses media); PLUGINS = [table, youtube, map, gap]
+// table, youtube, map, gap — the only bundled plugins (none holds nested blocks or images); PLUGINS = [table, youtube, map, gap]
 // types: TableProps, YouTubeProps, MapProps, GapProps, Head
 // helpers: youtubeId, mapSrc, gapLines, GAP_LINES, GAP_MAX, tableHeads, rowHead, HEADS, square
-// Image blocks, boxes and other containers are app plugins you write yourself (see docs/en/writing-plugins.md, host-contexts.md).
+// Image blocks, boxes and other containers are app plugins you write yourself (see docs/en/writing-plugins.md).
 
 // @atom-forge/brickee/schema (zod)
 const blocksSchema: ZodType<StoredBlock[]>;
@@ -130,16 +131,15 @@ function blocksSchemaFor(plugins: readonly { type: string; accepts?: readonly st
 
 ```svelte
 <script lang="ts">
-	import { Editor, Preview, type MediaItem, type StoredBlock } from '@atom-forge/brickee';
+	import { Editor, Preview, type StoredBlock } from '@atom-forge/brickee';
 	import { PLUGINS } from '@atom-forge/brickee/plugins';
 	import { hu } from '@atom-forge/brickee/locales/hu';
 
-	let { media = [] }: { media?: MediaItem[] } = $props();
 	let value = $state<StoredBlock[]>([]);
 </script>
 
-<Editor bind:value plugins={PLUGINS} {media} messages={hu} />
-<Preview blocks={value} plugins={PLUGINS} {media} messages={hu} />
+<Editor bind:value plugins={PLUGINS} messages={hu} />
+<Preview blocks={value} plugins={PLUGINS} messages={hu} />
 ```
 
 ## Common extensions
@@ -214,7 +214,7 @@ export const plugins: BlockPlugin[] = [
 ];
 ```
 
-**Markdown form and conversion** — `markdown(props, { inner, media })` returns markdown or `''`; use `mdText`, `mdJoin`, `mdQuote`, and `findMedia(media, id)?.url` for images. Whole document: `toMarkdown(doc.map(fromStored), { plugins, media })`; import: `fromMarkdown(text).map(toStored)` (both in the browser).
+**Markdown form and conversion** — `markdown(props, { inner })` returns markdown or `''`; use `mdText`, `mdJoin`, `mdQuote`. Whole document: `toMarkdown(doc.map(fromStored), { plugins })`; import: `fromMarkdown(text).map(toStored)` (both in the browser).
 
 **Per-view fields** — add `views` to a slider field and provide the current view:
 
@@ -256,9 +256,12 @@ const result = blocksSchemaFor(plugins).safeParse(input); // or pass [{ type, ac
 | Symptom | Cause | Fix |
 |---|---|---|
 | Fields and popups unstyled | `@atom-forge/ui` theme CSS / `@source` missing | Set up `@atom-forge/ui`; render beneath its `Root`. |
+| Block handles stick out on the left | Handles are drawn ~22 px left of the editor's box | Give the editor's container ~22 px left padding. |
 | Context errors with a linked local copy | Duplicate `svelte` / `@atom-forge/ui` | Vite `resolve.dedupe: ['svelte', '@atom-forge/ui', '@lucide/svelte', 'zod']`. |
 | A block is missing from `<Preview>` | Its plugin has no `preview` | Add one (bundled plugins have a default) or render it yourself. |
-| "Unknown block" in the editor, block missing on the site | Plugin missing from `plugins`, or image id not in `media` | Same plugins and media for editor and preview. |
+| "Unknown block" in the editor, block missing on the site | Plugin missing from `plugins` | Same plugins for editor and preview. |
+| Image block renders nothing | Preview rejects the stored address, or the app's lookup lacks the id | Store `http(s)` / site-relative addresses; resolve ids from the same app data everywhere. |
+| `media` prop, `useMedia`, `findMedia`, `kind: 'image'` missing | Removed: images are the app's business | Own picking and lookup in the app's image plugin (see `docs/en/upgrading.md`). |
 | Box not offered inside a box | One nesting level | By design. |
 | Block not offered inside a container | `accepts` or host `palette` excludes it | Add its palette id (or `'md:*'`). |
 | Gated content visible to all | `gate` only marks | Cut the document on the server. |

package/dist/Editor.svelte

@@ -19,7 +19,7 @@
 		plainText
 	} from './dom';
 	import { fromMarkdown, fromStored, plainHtml, toMarkdown, toStored } from './markdown';
-	import { provideMedia, useMedia, type MediaItem } from './media';
+	import { useCodeLanguages } from './code';
 	import { provideText, useText, type Messages } from './i18n';
 	import { PopupContainer, createPopupManager, getPopupManager } from '@atom-forge/ui';
 	import LinkPrompt from './LinkPrompt.svelte';
@@ -41,8 +41,6 @@
 		plugins?: BlockPlugin[];
 		/** Set by plugins with nested blocks: a compact editor inside another block. */
 		nested?: boolean;
-		/** Images the blocks can pick from (the page's attachments); nested editors share their parent's. */
-		media?: MediaItem[];
 		/** UI text in the host's language (English text -> translation); nested editors share their parent's. */
 		messages?: Messages;
 	}
@@ -53,18 +51,15 @@
 		palette: paletteProp,
 		plugins = [],
 		nested = false,
-		media,
 		messages
 	}: Props = $props();
 
-	provideMedia(() => media);
 	provideText(() => messages);
 	// Popups (the link field) are atom-forge popups; the top editor has their container, nested editors share it.
 	// svelte-ignore state_referenced_locally
 	const popups = nested ? getPopupManager() : createPopupManager(getPopupManager());
 	const tr = useText();
 	const placeholder = $derived(placeholderProp ?? tr("Write something, or press '/' for blocks…"));
-	const getMedia = useMedia();
 
 	// One level of nesting: an editor inside a block offers no block types that hold blocks themselves, nor unique
 	// ones (those belong to the top level).
@@ -818,7 +813,7 @@
 	function onCopy(e: ClipboardEvent, cut = false) {
 		if (!selSet.size) return;
 		e.preventDefault();
-		e.clipboardData?.setData('text/plain', toMarkdown(value.filter((b) => selSet.has(b.id)), { plugins, media: getMedia() }));
+		e.clipboardData?.setData('text/plain', toMarkdown(value.filter((b) => selSet.has(b.id)), { plugins }));
 		if (cut) deleteSelected();
 	}
 
@@ -843,11 +838,22 @@
 
 	/* ------------------------------------------------------ properties panel */
 
-	// Plugin blocks show their tag and fields on their top (PropsBar); a code block its language in its corner.
-	const CODE_FIELDS: PropField[] = [
-		// Only characters an opening fence can carry (```c++, ```objective-c).
-		{ key: 'lang', label: 'Language', kind: 'text', placeholder: 'e.g. ts, py, css', parse: (s) => s.replace(/[^\w+#.-]/g, '') }
-	];
+	// Plugin blocks and code blocks show their tag and fields on their top (PropsBar); read-only, a code block shows its
+	// language in its corner.
+	// Free text, or a dropdown when the host gives a list (provideCodeLanguages). A stored language missing from the
+	// list stays an option, so opening an older document loses nothing.
+	const codeLanguages = useCodeLanguages();
+	const codeFields = (b: Block): PropField[] => {
+		const list = codeLanguages();
+		if (!list.length)
+			// Only characters an opening fence can carry (```c++, ```objective-c).
+			return [{ key: 'lang', label: 'Language', kind: 'text', placeholder: 'e.g. ts, py, css', parse: (s) => s.replace(/[^\w+#.-]/g, '') }];
+		const lang = typeof b.props?.lang === 'string' ? b.props.lang : '';
+		const options = [{ value: '', label: 'None' }, ...list.map((l) => ({ value: l.value, label: l.label ?? l.value }))];
+		if (lang && !list.some((l) => l.value === lang)) options.push({ value: lang, label: lang });
+		return [{ key: 'lang', label: 'Language', kind: 'select', options }];
+	};
+	const codeTag = (b: Block) => [tr('code'), b.props?.lang].filter(Boolean).join(' · ');
 	function tagOf(b: Block) {
 		const p = pluginOf(b.plugin);
 		return p ? p.tag(b.props ?? {}).split(' · ').map((s) => tr(s)).join(' · ') : (b.plugin ?? '');
@@ -858,19 +864,6 @@
 		return f.format ? f.format(v) : v == null ? '' : String(v);
 	};
 
-	/** Image fields: picking a picked image again takes it out. */
-	function pickMedia(b: Block, f: PropField, id: string) {
-		typed();
-		const next = { ...(b.props ?? {}) };
-		if (f.kind === 'image') {
-			if (next[f.key] === id) delete next[f.key];
-			else next[f.key] = id;
-		} else {
-			const ids = (next[f.key] as string[] | undefined) ?? [];
-			next[f.key] = ids.includes(id) ? ids.filter((x) => x !== id) : [...ids, id];
-		}
-		b.props = next;
-	}
 	/** Sets one property to a value as it is ('' or undefined removes it). */
 	function setValue(b: Block, key: string, v: unknown) {
 		typed();
@@ -1274,7 +1267,7 @@
 					{#if plugin}
 						<div class="plugin">
 							{#snippet propsBar()}
-								<PropsBar block={b} tag={tagOf(b)} fields={plugin.fields ?? []} media={getMedia()} {tr} {setProp} {setValue} {pickMedia} open={fresh.has(b.id)} />
+								<PropsBar block={b} tag={tagOf(b)} fields={plugin.fields ?? []} {tr} {setProp} {setValue} open={fresh.has(b.id)} />
 							{/snippet}
 							<PluginHost
 								{plugin}
@@ -1307,6 +1300,10 @@
 							onclick={() => toggleTodo(b)}
 							>{#if b.checked}<Check size={12} strokeWidth={3} />{/if}</button
 						>
+					{:else if b.type === 'code' && !readonly}
+						<div class="code-fields">
+							<PropsBar block={b} tag={codeTag(b)} fields={codeFields(b)} {tr} {setProp} {setValue} />
+						</div>
 					{/if}
 					<div
 						class="ce"
@@ -1334,20 +1331,12 @@
 						}}
 					></div>
 				{/if}
-				{#if b.type === 'code'}
-					<!-- the language of a code block, in its corner -->
-					<label class="badge">
+				{#if b.type === 'code' && readonly}
+					<!-- read-only: the language of a code block, in its corner -->
+					<div class="badge">
 						<span class="tag">{tr('code')}</span>
-						{#if !readonly}
-							<input
-								class="lang"
-								placeholder={tr('language')}
-								aria-label={tr('Language')}
-								size="6"
-								bind:value={() => fieldText(b, CODE_FIELDS[0]), (v: string) => setProp(b, CODE_FIELDS[0], v)}
-							/>
-						{:else if b.props?.lang}<span class="tag">{b.props.lang}</span>{/if}
-					</label>
+						{#if b.props?.lang}<span class="tag">{b.props.lang}</span>{/if}
+					</div>
 				{:else if b.type === 'plugin' && (readonly || !pluginOf(b.plugin)?.fields?.length)}
 					<div class="badge"><span class="tag">{tagOf(b)}</span></div>
 				{/if}
@@ -1448,12 +1437,12 @@
 
 <style>
 	.editor {
-		--fg: #1d1d1f;
-		--muted: #a0a0a8;
+		--fg: var(--color-surface-contrast, #1d1d1f);
+		--muted: var(--color-muted-contrast, #a0a0a8);
 		--accent: #3b82f6;
 		--sel: rgba(59, 130, 246, 0.14);
-		--surface: #fff;
-		--border: #e5e5ea;
+		--surface: var(--color-surface, #fff);
+		--border: var(--color-frame, #e5e5ea);
 		--code-bg: rgba(120, 120, 140, 0.14);
 		position: relative;
 		outline: none;
@@ -1518,11 +1507,12 @@
 		bottom: -2px;
 	}
 
+	/* 1px short at both ends, so the bars of neighbouring blocks do not touch. */
 	.gutter {
 		position: absolute;
 		left: -22px;
-		top: 0;
-		bottom: 0;
+		top: 1px;
+		bottom: 1px;
 		width: 20px;
 	}
 	.handle {
@@ -1610,7 +1600,7 @@
 		top: 50%;
 		translate: 0 -50%;
 		border: 4px solid transparent;
-		border-right-color: #1d1d1f;
+		border-right-color: var(--color-surface-contrast, #1d1d1f);
 		border-left: 0;
 	}
 	.grab:has(.grip:hover) .bubble,
@@ -1635,8 +1625,9 @@
 		height: 26px;
 		padding: 0;
 		border: 0;
-		color: #fff;
-		background: #1d1d1f;
+		/* inverted: the theme's text colour as the background */
+		color: var(--color-surface, #fff);
+		background: var(--color-surface-contrast, #1d1d1f);
 		cursor: pointer;
 		box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
 	}
@@ -1649,7 +1640,7 @@
 		padding-right: 2px;
 	}
 	.bubble button:hover {
-		background: #3a3a40;
+		background: color-mix(in srgb, var(--color-surface-contrast, #1d1d1f) 82%, var(--color-surface, #fff));
 	}
 	.bubble button.del:hover {
 		background: #c62828;
@@ -1768,7 +1759,7 @@
 	.t-plugin > .badge {
 		top: calc(0.35em + 5px);
 		/* Readable over a map or an image. */
-		background: rgba(255, 255, 255, 0.92);
+		background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
 		border-radius: 6px;
 	}
 	.tag {
@@ -1782,25 +1773,22 @@
 		font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
 		user-select: none;
 	}
-	.lang {
-		width: 7em;
-		padding: 1px 6px;
-		border: 1px solid transparent;
-		border-radius: 5px;
-		background: none;
-		color: var(--fg);
-		font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-		outline: none;
+	/* the fields bar on its own row above the code */
+	.t-code {
+		flex-wrap: wrap;
+		row-gap: 0;
+	}
+	.code-fields,
+	.t-code .ce {
+		flex-basis: 100%;
 	}
-	.lang:hover,
-	.lang:focus {
-		border-color: var(--border);
-		background: var(--bg, #fff);
+	.t-code:has(> .badge) .ce {
+		padding-right: 7.5em;
 	}
 	.t-code .ce {
 		background: var(--code-bg);
 		border-radius: 8px;
-		padding: 0.7em 7.5em 0.7em 0.9em;
+		padding: 0.7em 0.9em;
 		font: 0.88em/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
 		white-space: pre-wrap;
 	}

package/dist/Editor.svelte.d.ts

@@ -1,4 +1,3 @@
-import { type MediaItem } from './media';
 import { type Messages } from './i18n';
 import { type BlockPlugin, type StoredBlock } from './types';
 interface Props {
@@ -12,8 +11,6 @@ interface Props {
     plugins?: BlockPlugin[];
     /** Set by plugins with nested blocks: a compact editor inside another block. */
     nested?: boolean;
-    /** Images the blocks can pick from (the page's attachments); nested editors share their parent's. */
-    media?: MediaItem[];
     /** UI text in the host's language (English text -> translation); nested editors share their parent's. */
     messages?: Messages;
 }

package/dist/LinkPrompt.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="light link" {onkeydown}>
+<div class="link" {onkeydown}>
 	<Input bind:this={input} compact monospace bind:value={url} placeholder="https://…" />
 	<Button compact accent label={tr('OK')} onclick={() => popups.resolve(url.trim())} />
 	{#if href}<Button compact ghost label={tr('Remove')} onclick={() => popups.resolve('')} />{/if}
@@ -34,8 +34,8 @@
 		gap: 6px;
 		width: 340px;
 		padding: 8px;
-		background: #fff;
-		border: 1px solid #e5e5ea;
+		background: var(--color-surface, #fff);
+		border: 1px solid var(--color-frame, #e5e5ea);
 		border-radius: 12px;
 		box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
 	}

package/dist/Preview.svelte

@@ -49,7 +49,6 @@
 <script lang="ts">
 	import { useText } from './i18n';
 	import { inline } from './markdown';
-	import { provideMedia, type MediaItem } from './media';
 	import { provideText, type Messages } from './i18n';
 	import type { BlockPlugin } from './types';
 
@@ -58,16 +57,13 @@
 		plugins: BlockPlugin[];
 		/** Set by plugins rendering their nested blocks; only the top level splits at the supporters-only divider. */
 		nested?: boolean;
-		/** The images blocks refer to by id; nested previews share their parent's. */
-		media?: MediaItem[];
 		/** UI text in the host's language; nested previews share their parent's. */
 		messages?: Messages;
 		/** Mark the blocks after a gate (the supporters-only divider) with a label and a dashed line; default: yes. */
 		markGated?: boolean;
 	}
-	let { blocks, plugins, nested = false, media, messages, markGated = true }: Props = $props();
+	let { blocks, plugins, nested = false, messages, markGated = true }: Props = $props();
 
-	provideMedia(() => media);
 	provideText(() => messages);
 	const tr = useText();
 

package/dist/Preview.svelte.d.ts

@@ -15,7 +15,6 @@ export type Part = {
     lists: ListNode[];
 };
 export declare function parts(blocks: StoredBlock[]): Part[];
-import { type MediaItem } from './media';
 import { type Messages } from './i18n';
 import type { BlockPlugin } from './types';
 interface Props {
@@ -23,8 +22,6 @@ interface Props {
     plugins: BlockPlugin[];
     /** Set by plugins rendering their nested blocks; only the top level splits at the supporters-only divider. */
     nested?: boolean;
-    /** The images blocks refer to by id; nested previews share their parent's. */
-    media?: MediaItem[];
     /** UI text in the host's language; nested previews share their parent's. */
     messages?: Messages;
     /** Mark the blocks after a gate (the supporters-only divider) with a label and a dashed line; default: yes. */