@atom-forge/brickee 0.0.1 → 0.0.2

package/dist/plugins/Table.svelte

@@ -52,12 +52,9 @@
 		BetweenVerticalEnd,
 		BetweenVerticalStart,
 		Columns3,
-		Info,
 		Rows3,
 		GripHorizontal,
 		GripVertical,
-		PanelBottom,
-		PanelTop,
 		Plus,
 		TextAlignCenter,
 		TextAlignEnd,
@@ -78,17 +75,6 @@
 	let at = $state<{ r: number; c: number } | null>(null);
 	const heads = $derived(tableHeads(props));
 	const headOf = (r: number) => rowHead(heads, r, rows.length);
-	function toggleHead(h: Head) {
-		const next = new Set(heads);
-		if (!next.delete(h)) next.add(h);
-		const { header: _, ...rest } = props;
-		props = { ...rest, heads: HEADS.filter((x) => next.has(x)) } as TableProps;
-	}
-	const HEAD_TOGGLES: { head: Head; icon: typeof PanelTop; label: string }[] = [
-		{ head: 'top', icon: PanelTop, label: 'Header row' },
-		{ head: 'bottom', icon: PanelBottom, label: 'Footer row (e.g. sums)' }
-	];
-
 	/* Dragging a row or a column by its grip: `to` is the slot it would go to (0…count), shown as a blue line. */
 	let drag = $state<{ kind: 'row' | 'col'; from: number; to: number } | null>(null);
 
@@ -250,13 +236,8 @@
 					{/each}
 				</div>
 			{:else}
-				<span class="hint" title={tr('Enter: next row · Shift+Enter: line break · paste from a spreadsheet')}><Info size={14} /></span>
+				<span class="idle">{tr('Click a cell to edit its row and column')}</span>
 			{/if}
-			<div class="seg heads">
-				{#each HEAD_TOGGLES as h (h.head)}
-					<button type="button" title={tr(h.label)} aria-pressed={heads.has(h.head)} class:on={heads.has(h.head)} onmousedown={(e) => e.preventDefault()} onclick={() => toggleHead(h.head)}><h.icon size={15} /></button>
-				{/each}
-			</div>
 		</div>
 	{/if}
 	<div class="grid">
@@ -321,9 +302,9 @@
 	.table {
 		font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
 	}
-	/* Beside the tag and the […] button in the corner; when it wraps, it pushes the table down. */
+	/* The row and column tools of the cell being edited; when it wraps, it pushes the table down. */
 	.bar {
-		margin: 0 9em 8px 0;
+		margin: 0 0 8px;
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
@@ -336,13 +317,17 @@
 		gap: 1px;
 		padding: 2px;
 		border-radius: 8px;
-		background: #f4f4f6;
+		background: var(--color-muted, #f4f4f6);
+	}
+	.idle {
+		font-size: 12px;
+		color: var(--color-muted-contrast, #a0a0a8);
 	}
 	.label {
 		display: inline-grid;
 		place-items: center;
 		padding: 0 4px 0 5px;
-		color: #a0a0a8;
+		color: var(--color-muted-contrast, #a0a0a8);
 	}
 	.bar button {
 		display: inline-grid;
@@ -353,16 +338,16 @@
 		border: 0;
 		border-radius: 6px;
 		background: none;
-		color: #4b4b55;
+		color: var(--color-surface-contrast, #4b4b55);
 		cursor: pointer;
 	}
 	.bar button:hover:not(:disabled) {
-		background: #fff;
-		color: #1d1d1f;
+		background: var(--color-surface, #fff);
+		color: var(--color-surface-contrast, #1d1d1f);
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 	}
 	.bar button.on {
-		background: #fff;
+		background: var(--color-surface, #fff);
 		color: #2563eb;
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 	}
@@ -378,27 +363,16 @@
 		gap: 5px;
 		height: 28px;
 		padding: 0 10px;
-		border: 1px solid #e5e5ea;
+		border: 1px solid var(--color-frame, #e5e5ea);
 		border-radius: 8px;
 		font-size: 12px;
 		font-weight: 500;
 	}
 	.bar .toggle.on {
-		border-color: #bfdbfe;
-		background: #eff6ff;
+		border-color: color-mix(in srgb, #3b82f6 35%, transparent);
+		background: color-mix(in srgb, #3b82f6 8%, transparent);
 		box-shadow: none;
 	}
-	.hint {
-		display: inline-grid;
-		place-items: center;
-		color: #a0a0a8;
-		cursor: help;
-		opacity: 0;
-		transition: opacity 0.12s;
-	}
-	.table:hover .hint {
-		opacity: 1;
-	}
 
 	/* The table, with a + bar on the right (column) and below (row) that shows on hover. */
 	.grid {
@@ -409,9 +383,9 @@
 	}
 	.frame {
 		overflow-x: auto;
-		border: 1px solid #e3e3e8;
+		border: 1px solid var(--color-frame, #e3e3e8);
 		border-radius: 10px;
-		background: #fff;
+		background: var(--color-surface, #fff);
 	}
 	table {
 		width: 100%;
@@ -421,8 +395,8 @@
 	td {
 		height: 1px;
 		padding: 0;
-		border-right: 1px solid #ececf0;
-		border-bottom: 1px solid #ececf0;
+		border-right: 1px solid var(--color-frame, #ececf0);
+		border-bottom: 1px solid var(--color-frame, #ececf0);
 		vertical-align: top;
 		transition: background 0.1s;
 	}
@@ -434,16 +408,16 @@
 	}
 	tr.row-on td,
 	td.col-on {
-		background: #f8faff;
+		background: color-mix(in srgb, #3b82f6 4%, transparent);
 	}
 	/* The header and the footer as on the site: a band above, the sums bold on grey behind a thicker line. */
 	tr.h-top td:not(.rgrip) {
-		background: #f1f1f4;
-		border-bottom: 2px solid #d8d8de;
+		background: var(--color-muted, #f1f1f4);
+		border-bottom: 2px solid var(--color-frame, #d8d8de);
 	}
 	tr.h-bottom td:not(.rgrip) {
-		background: #f1f1f4;
-		border-top: 2px solid #d8d8de;
+		background: var(--color-muted, #f1f1f4);
+		border-top: 2px solid var(--color-frame, #d8d8de);
 	}
 	textarea {
 		display: block;
@@ -461,10 +435,10 @@
 		outline: none;
 	}
 	textarea::placeholder {
-		color: #b8b8c0;
+		color: var(--color-muted-contrast, #b8b8c0);
 	}
 	textarea:focus {
-		background: #fff;
+		background: var(--color-surface, #fff);
 		box-shadow: inset 0 0 0 2px #3b82f6;
 	}
 	tr.h-top textarea {
@@ -472,21 +446,21 @@
 		font-size: 13px;
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
-		color: #3a3a44;
+		color: var(--color-surface-contrast, #3a3a44);
 	}
 	tr.h-bottom textarea {
 		font-weight: 600;
-		color: #1d1d1f;
+		color: var(--color-surface-contrast, #1d1d1f);
 	}
 	/* grips: a thin row above the columns and a thin column before the rows, shown on hover */
 	td.corner,
 	td.rgrip {
 		width: 14px;
-		border-right: 1px solid #ececf0;
+		border-right: 1px solid var(--color-frame, #ececf0);
 	}
 	tr.grips td {
 		height: 14px;
-		border-bottom: 1px solid #ececf0;
+		border-bottom: 1px solid var(--color-frame, #ececf0);
 	}
 	.grip {
 		display: grid;
@@ -497,7 +471,7 @@
 		padding: 0;
 		border: 0;
 		background: none;
-		color: #b0b0b8;
+		color: var(--color-muted-contrast, #b0b0b8);
 		cursor: grab;
 		opacity: 0;
 		touch-action: none;
@@ -509,7 +483,7 @@
 	}
 	.grip:hover {
 		color: #2563eb;
-		background: #eef3fd;
+		background: color-mix(in srgb, #3b82f6 9%, transparent);
 	}
 	table.dragging,
 	table.dragging * {
@@ -540,8 +514,8 @@
 		padding: 0;
 		border: 0;
 		border-radius: 6px;
-		background: #f4f4f6;
-		color: #8a8a94;
+		background: var(--color-muted, #f4f4f6);
+		color: var(--color-muted-contrast, #8a8a94);
 		cursor: pointer;
 		opacity: 0;
 		transition: opacity 0.12s, background 0.12s;
@@ -557,7 +531,7 @@
 	}
 	.add-col:hover,
 	.add-row:hover {
-		background: #e8eefc;
+		background: color-mix(in srgb, #3b82f6 12%, transparent);
 		color: #2563eb;
 	}
 </style>

package/dist/plugins/TablePreview.svelte

@@ -46,7 +46,7 @@
 	th,
 	td {
 		padding: 0.45em 0.7em;
-		border-bottom: 1px solid #e5e5ea;
+		border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
 		text-align: left;
 		vertical-align: top;
 	}
@@ -57,6 +57,6 @@
 		border-bottom-width: 2px;
 	}
 	th.bottom {
-		border-top: 2px solid #e5e5ea;
+		border-top: 2px solid color-mix(in srgb, currentColor 22%, transparent);
 	}
 </style>

package/dist/plugins/YouTubePreview.svelte

@@ -70,7 +70,7 @@
 	}
 	figcaption {
 		margin-top: 0.4em;
-		color: #6b6b76;
+		color: color-mix(in srgb, currentColor 65%, transparent);
 		font: 13px/1.4 system-ui, sans-serif;
 	}
 </style>

package/dist/plugins/index.js

@@ -1,6 +1,6 @@
 // The bundled plugins: plugins like any other (written with the kit), an app picks the ones it wants. Only general
 // blocks live here (video, map, table, gap); anything an app gives its own meaning to belongs in the app.
-import { MapPin, SquarePlay, Table, UnfoldVertical } from '@lucide/svelte';
+import { MapPin, PanelBottom, PanelTop, SquarePlay, Table, UnfoldVertical } from '@lucide/svelte';
 import { mdText } from '../kit/util';
 import { youtubeId } from './util';
 import Gap, { GAP_LINES } from './Gap.svelte';
@@ -42,6 +42,17 @@ export const table = {
     keys: 'table grid rows columns price list',
     icon: Table,
     props: () => ({ rows: [['', ''], ['', '']], heads: ['top'] }),
+    fields: [
+        {
+            key: 'heads',
+            label: 'Header and footer',
+            kind: 'toggles',
+            options: [
+                { value: 'top', label: 'Header row', icon: PanelTop },
+                { value: 'bottom', label: 'Footer row (e.g. sums)', icon: PanelBottom }
+            ]
+        }
+    ],
     tag: (p) => `table · ${p.rows?.length ?? 0}×${p.rows?.[0]?.length ?? 0}`,
     content: 'none',
     markdown: (p) => {

package/dist/schema.js

@@ -1,5 +1,5 @@
 // Server-side validation of a stored document (zod). Only the shape is checked: the renderers escape every text,
-// keep links to http(s)/mailto/tel/site paths, take colours only as #hex and images only from the host's media.
+// keep links to http(s)/mailto/tel/site paths, take colours only as #hex.
 import { z } from 'zod';
 import { acceptsId, MAX_DEPTH, MAX_INDENT } from './model';
 const block = z.lazy(() => z.strictObject({

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-import type { MediaItem } from './media';
 import type { Component } from 'svelte';
 import type { StoredBlock } from './model';
 import type { Icon } from './palette';
@@ -31,10 +30,11 @@ export interface PropField {
     key: string;
     label: string;
     /**
-     * 'image' picks one of the document's images (stores its id), 'images' several (an array of ids, in picking order).
+     * 'toggles' is a row of icon buttons, each switching one of `options` on or off; stored as the list of the ones on
+     * (in `options` order).
      * 'slider' steps through `options` in their order (e.g. heights), or, with `min` and `max`, sets a number freely.
      */
-    kind: 'text' | 'textarea' | 'color' | 'select' | 'slider' | 'image' | 'images';
+    kind: 'text' | 'textarea' | 'color' | 'select' | 'slider' | 'toggles';
     placeholder?: string;
     /** A number slider: its range, step (default 1) and unit shown after the value. */
     min?: number;
@@ -56,10 +56,11 @@ export interface PropField {
         key: string;
         label: string;
     }[];
-    /** For 'select' and 'slider'. */
+    /** For 'select', 'slider' and 'toggles' (where `icon` is the button and `label` its tooltip). */
     options?: {
         value: string;
         label: string;
+        icon?: Icon;
     }[];
     /** The field's text from the stored value; default: the value as a string. */
     format?: (value: unknown) => string;
@@ -86,8 +87,6 @@ export interface PluginPreviewProps<P extends Props = Props> {
 export interface MarkdownContext {
     /** The nested blocks as markdown ('' when it has none). */
     inner: string;
-    /** The media of the document, to turn an attachment id into its url. */
-    media: MediaItem[];
 }
 export interface BlockPlugin<P extends Props = Props> {
     /** Stored `type`; must not start with 'md:'. */
@@ -112,7 +111,7 @@ export interface BlockPlugin<P extends Props = Props> {
      */
     preview?: Component<PluginPreviewProps<any>>;
     /**
-     * For a plugin with nested blocks: the blocks it takes, as palette ids ('md:p', 'image'…); 'md:*' stands for every
+     * For a plugin with nested blocks: the blocks it takes, as palette ids ('md:p', 'youtube'…); 'md:*' stands for every
      * built-in block. Its nested editor offers the host's palette narrowed to these. Default: everything the host has.
      */
     accepts?: string[];

package/docs/en/bundled-plugins.md

@@ -13,7 +13,7 @@ import { table, youtube } from '@atom-forge/brickee/plugins'; // or some
 
 | Export | `type` | Fields | Markdown form | What it is |
 |---|---|---|---|---|
-| `table` | `table` | — (edited in place) | a GFM table | Rows and columns of inline-formatted cells; rows and columns are dragged by their grips. The first row can be a header, the last a footer. |
+| `table` | `table` | header and footer (the cells are edited in place) | a GFM table | Rows and columns of inline-formatted cells; click a cell for its row and column tools (insert, delete, align), drag rows and columns by their grips. The first row can be a header, the last a footer. |
 | `youtube` | `youtube` | video link or id, title | a link | A YouTube video, loaded on click; any YouTube link is reduced to the video id. |
 | `map` | `map` | place or address, zoom slider | a link | A Google Maps embed of a place or an address. |
 | `gap` | `gap` | height slider | none | Empty space between blocks, 1–8 lines high. |

package/docs/en/documents-and-markdown.md

@@ -79,18 +79,17 @@ Markdown is a first-class format: the clipboard carries it, and a host can impor
 | `fromStored(block)` | `StoredBlock` → `Block` | anywhere |
 | `toStored(block)` | `Block` → `StoredBlock` | browser only |
 | `fromMarkdown(text)` | markdown → `Block[]` | anywhere |
-| `toMarkdown(blocks, { plugins, media })` | `Block[]` → markdown | browser only |
+| `toMarkdown(blocks, { plugins })` | `Block[]` → markdown | browser only |
 | `inline(md)` | inline markdown → inline HTML | anywhere |
 
 The markdown functions work on the editor form (`Block[]`), so stored documents go through `fromStored` and `toStored`:
 
 ```ts
-import { fromMarkdown, fromStored, toMarkdown, toStored, type MediaItem, type StoredBlock } from '@atom-forge/brickee';
+import { fromMarkdown, fromStored, toMarkdown, toStored, type StoredBlock } from '@atom-forge/brickee';
 import { PLUGINS } from '@atom-forge/brickee/plugins';
 
 // Stored document -> markdown (browser only).
-export const exportMarkdown = (doc: StoredBlock[], media: MediaItem[]) =>
-	toMarkdown(doc.map(fromStored), { plugins: PLUGINS, media });
+export const exportMarkdown = (doc: StoredBlock[]) => toMarkdown(doc.map(fromStored), { plugins: PLUGINS });
 
 // Markdown -> stored document (browser only).
 export const importMarkdown = (text: string): StoredBlock[] => fromMarkdown(text).map(toStored);
@@ -110,6 +109,6 @@ What `toMarkdown` writes:
 
 - consecutive list items on consecutive lines, every other block separated by a blank line;
 - list items and paragraphs indented by two spaces per level;
-- a plugin block through its plugin's `markdown(props, { inner, media })`, where `inner` is its nested blocks already converted; a plugin without a markdown form, or one returning `''`, is left out.
+- a plugin block through its plugin's `markdown(props, { inner })`, where `inner` is its nested blocks already converted; a plugin without a markdown form, or one returning `''`, is left out.
 
 Writing a markdown form for your own plugin is covered in [Writing plugins](writing-plugins.md#markdown-form).

package/docs/en/editor-and-preview.md

@@ -9,7 +9,6 @@
 | `value` | `StoredBlock[]` (bindable) | `[]` | The document. Written back on every change; a document replaced from outside is loaded again. |
 | `plugins` | `BlockPlugin[]` | `[]` | The plugin blocks this editor can show and offer. |
 | `palette` | `string[]` | every built-in block, then every plugin | The block types the slash menu offers, in this order (see below). |
-| `media` | `MediaItem[]` | — | The images blocks can pick from (see [Host contexts](host-contexts.md)). |
 | `messages` | `Messages` | — | UI text in the host's language: English text → translation. |
 | `readonly` | `boolean` | `false` | Shows the document without editing; plugin fields are hidden. |
 | `placeholder` | `string` | `Write something, or press '/' for blocks…` | The hint of an empty block. |
@@ -23,7 +22,6 @@ An empty document is shown as one empty paragraph, so the value the editor write
 |---|---|---|---|
 | `blocks` | `StoredBlock[]` | — | The document to render. |
 | `plugins` | `BlockPlugin[]` | — | The plugins whose previews render the plugin blocks. |
-| `media` | `MediaItem[]` | — | The images the blocks refer to by id. |
 | `messages` | `Messages` | — | UI text in the host's language. |
 | `markGated` | `boolean` | `true` | Marks the blocks after a gate block (see [Unique and gate blocks](writing-plugins.md#unique-and-gate-blocks)). |
 | `nested` | `boolean` | `false` | Set by plugin previews that render their nested blocks. |
@@ -32,7 +30,7 @@ The preview renders built-in blocks as plain HTML (`p`, `h1`…`h6`, `ul`/`ol` w
 
 Using `Preview` at all is your choice: the editor does not depend on it. An application with its own renderer can render the stored blocks itself, and its plugins can leave `preview` out.
 
-`media` and `messages` given to the top-level editor or preview are inherited by every nested editor, nested preview and plugin component below it.
+`messages` given to the top-level editor or preview are inherited by every nested editor, nested preview and plugin component below it.
 
 ## The palette
 

package/docs/en/getting-started.md

@@ -10,7 +10,7 @@ Everything else is a plugin. A plugin is a plain object (`BlockPlugin`) that nam
 
 - a **view** — a Svelte component shown in the editor;
 - a **preview** — a Svelte component that renders the block on the site;
-- **fields** — the settings shown on the top of the block (text, colour, select, slider, image…);
+- **fields** — the settings shown on the top of the block (text, colour, select, slider…);
 - optionally a **markdown form**, used when the document is copied or exported as markdown.
 
 The package ships four general-purpose plugins — table, YouTube video, map and gap — but they are plugins like any other: nothing in the core depends on them, and you pass only the ones you want. Image blocks, boxes and other site-specific blocks are plugins you write yourself.
@@ -24,7 +24,7 @@ bun add @atom-forge/brickee @atom-forge/ui @lucide/svelte
 | Peer dependency | Why |
 |---|---|
 | `svelte` `^5.0.0` | The editor, the preview and the plugins are Svelte 5 components. |
-| `@atom-forge/ui` `>=0.0.37` | The popups (link prompt, image picker) and the form controls of the block fields. |
+| `@atom-forge/ui` `>=0.0.37` | The popups (link prompt) and the form controls of the block fields. |
 | `@lucide/svelte` `>=1.0.0` | The block icons. |
 | `zod` `^4.0.0` (optional) | Only for the server-side schema in `@atom-forge/brickee/schema`. |
 
@@ -37,6 +37,10 @@ The block fields and popups are `@atom-forge/ui` components, so the application
 
 The top-level `Editor` creates its own popup manager and renders its own popup container; editors nested in plugin blocks share it.
 
+The editor takes its colours from the `@atom-forge/ui` theme tokens (`--color-surface`, `--color-frame`, `--color-muted-contrast`…), so it follows the host's light and dark mode. The preview's borders and captions are drawn from the text colour of the page.
+
+The block handles are drawn in a gutter **left of the editor's box**, about 22 px wide: give the element around the editor that much padding on the left, or the handles stick out of it.
+
 > **Missing theme**
 >
 > Without the `@atom-forge/ui` theme CSS the editor still works, but the block fields, the colour picker, the slider and the popups appear unstyled.

package/docs/en/host-contexts.md

@@ -2,143 +2,21 @@
 
 [← Previous](writing-plugins.md) · [Contents](index.md) · [Next →](server-side.md)
 
-The editor has no props for application concepts. What a host knows — its images, the page width it is showing, its language — reaches the plugins through three Svelte contexts. Each has a `provide…` function, called in a component's initialization above the editor or preview, and a `use…` function for plugin components.
+The editor has no props for application concepts. What a host knows — the page width it is showing, the code languages it highlights, its language — reaches the plugins through three Svelte contexts. Each has a `provide…` function, called in a component's initialization above the editor or preview, and a `use…` function for plugin components.
 
 | Context | Provide | Read | Carries |
 |---|---|---|---|
-| Media | `media` prop, or `provideMedia(() => list)` | `useMedia()` | The images blocks can pick from. |
 | View | `provideView(() => key)` | `useView()` | The view per-view fields edit. |
+| Code languages | `provideCodeLanguages(() => list)` | `useCodeLanguages()` | The languages a code block offers. |
 | Text | `messages` prop, or `provideText(() => messages)` | `useText()` | UI text in the host's language. |
 
 Nested editors and previews inherit all three from their parent.
 
-## Media
-
-Blocks never store image URLs. An image field stores the **id** of a `MediaItem`, and the editor, the preview and the plugins look the item up in the document's media:
-
-```ts
-interface MediaItem {
-	id: string; // stored in the block's props
-	name: string; // file name or title, shown in the picker
-	url: string; // the image's address
-	group?: string; // a heading in the picker (e.g. the attachment category)
-}
-```
-
-The bundled plugins use no images; image blocks are yours to write, because their layout is the site's. A minimal `photo` plugin — an image field, alt text, and a height slider:
-
-```svelte
-<!-- PhotoView.svelte -->
-<script lang="ts" module>
-	export interface PhotoProps extends Record<string, unknown> {
-		/** A MediaItem id. */
-		image: string;
-		alt: string;
-		/** The height in % of the width (20–150), or unset for the image's own shape. */
-		ratio?: unknown;
-	}
-
-	/** A CSS aspect-ratio from a stored height, or undefined. */
-	export const aspect = (v: unknown) => {
-		const n = Number(v);
-		return n >= 20 && n <= 150 ? `100 / ${n}` : undefined;
-	};
-</script>
-
-<script lang="ts">
-	import { ImageIcon } from '@lucide/svelte';
-	import { Empty, findMedia, useMedia, type PluginViewProps } from '@atom-forge/brickee';
-
-	let { props = $bindable(), blocks = $bindable() }: PluginViewProps<PhotoProps> = $props();
-	const media = useMedia();
-	const item = $derived(findMedia(media(), props.image));
-</script>
-
-{#if item}
-	<img src={item.url} alt={props.alt} style="max-width: 100%" />
-{:else}
-	<Empty icon={ImageIcon} text="Pick an image above" />
-{/if}
-```
-
-```svelte
-<!-- PhotoPreview.svelte -->
-<script lang="ts">
-	import { baseValue, findMedia, useMedia, type PluginPreviewProps } from '@atom-forge/brickee';
-	import { aspect, type PhotoProps } from './PhotoView.svelte';
-
-	let { props }: PluginPreviewProps<PhotoProps> = $props();
-	const media = useMedia();
-	const item = $derived(findMedia(media(), props.image));
-</script>
-
-{#if item}
-	<img src={item.url} alt={props.alt ?? ''} style:aspect-ratio={aspect(baseValue(props.ratio))} />
-{/if}
-
-<style>
-	img {
-		width: 100%;
-		object-fit: cover;
-	}
-</style>
-```
-
-```ts
-// photo.ts
-import { ImageIcon } from '@lucide/svelte';
-import { findMedia, mdText, type BlockPlugin } from '@atom-forge/brickee';
-import PhotoView, { type PhotoProps } from './PhotoView.svelte';
-import PhotoPreview from './PhotoPreview.svelte';
-
-export const photo: BlockPlugin<PhotoProps> = {
-	type: 'photo',
-	label: 'Photo',
-	hint: 'One picked image',
-	keys: 'photo image picture',
-	icon: ImageIcon,
-	props: () => ({ image: '', alt: '' }),
-	fields: [
-		{ key: 'image', label: 'Image', kind: 'image' },
-		{ key: 'alt', label: 'Alt text', kind: 'text', placeholder: 'What the image shows' },
-		{ key: 'ratio', label: 'Height', kind: 'slider', min: 20, max: 150, unit: '%', none: 'Original' }
-	],
-	tag: () => 'photo',
-	content: 'none',
-	markdown: (p, { media }) => {
-		const url = findMedia(media, p.image)?.url;
-		return url ? `![${mdText(p.alt)}](${url})` : '';
-	},
-	view: PhotoView,
-	preview: PhotoPreview
-};
-```
-
-Give the editor and the preview the same media:
-
-```svelte
-<script lang="ts">
-	import { Editor, Preview, type MediaItem, type StoredBlock } from '@atom-forge/brickee';
-	import { photo } from './photo';
-
-	let { value = $bindable(), media }: { value: StoredBlock[]; media: MediaItem[] } = $props();
-</script>
-
-<Editor bind:value plugins={[photo]} {media} />
-<Preview blocks={value} plugins={[photo]} {media} />
-```
-
-In a plugin component, read the list with `useMedia()` — it returns a function, so the list stays current — and find an item with `findMedia(list, id)`, as the photo's view and preview do.
-
-> **Thumbnails in the editor**
->
-> The editor only needs small images. Because blocks store ids, you can give the editor a list of thumbnail URLs and the preview on the site a list of full-size URLs with the same ids.
-
-Typical sources are a page's uploaded attachments or a media library. Every image a document refers to must be in the list, or its block renders nothing.
+Images are not a context: what an image block stores and where its pictures come from is decided by the app's own plugin (see [Images](writing-plugins.md#images)).
 
 ## Per-view values
 
-Some settings depend on how the page is shown: an image may need a different aspect ratio on a phone than on a wide screen. A `slider` field with `views` stores a value per view:
+Some settings depend on how the page is shown: an image may need a different aspect ratio on a phone than on a wide screen. A `slider` field with `views` stores a value per view. Here it is the height of the `photo` plugin from [Writing plugins](writing-plugins.md#images) and the bundled `gap`:
 
 ```ts
 import type { BlockPlugin } from '@atom-forge/brickee';
@@ -184,18 +62,17 @@ A preview reads them with `viewValues(value, keys)` — the value for each view,
 
 ```svelte
 <script lang="ts">
-	import { findMedia, useMedia, viewValues, type PluginPreviewProps } from '@atom-forge/brickee';
-	import { aspect, type PhotoProps } from './PhotoView.svelte';
+	import { viewValues, type PluginPreviewProps } from '@atom-forge/brickee';
+	import { aspect, imageSrc, type PhotoProps } from './PhotoView.svelte';
 
 	let { props }: PluginPreviewProps<PhotoProps> = $props();
-	const media = useMedia();
-	const item = $derived(findMedia(media(), props.image));
+	const src = $derived(imageSrc(props.url));
 	// desktop, tablet, phone: a CSS aspect-ratio each ('auto': the image's own shape)
 	const r = $derived(viewValues(props.ratio, ['desktop', 'tablet', 'phone']).map((v) => aspect(v) ?? 'auto'));
 </script>
 
-{#if item}
-	<img src={item.url} alt={props.alt ?? ''} style:--r-desktop={r[0]} style:--r-tablet={r[1]} style:--r-phone={r[2]} />
+{#if src}
+	<img {src} alt={props.alt ?? ''} style:--r-desktop={r[0]} style:--r-tablet={r[1]} style:--r-phone={r[2]} />
 {/if}
 
 <style>
@@ -221,6 +98,23 @@ A preview reads them with `viewValues(value, keys)` — the value for each view,
 >
 > `views` is supported on `slider` fields. Other field kinds ignore it.
 
+## Code languages
+
+A code block's language (`props.lang`, the info string of its markdown fence) is free text by default. When the host knows which languages its site can highlight, it gives the list, and the field in the code block's fields bar becomes a dropdown of them, with *None* first:
+
+```svelte
+<script lang="ts">
+	import { Editor, provideCodeLanguages, type StoredBlock } from '@atom-forge/brickee';
+
+	let { value = $bindable() }: { value: StoredBlock[] } = $props();
+	provideCodeLanguages(() => [{ value: 'ts', label: 'TypeScript' }, { value: 'svelte', label: 'Svelte' }, 'css', 'bash']);
+</script>
+
+<Editor bind:value />
+```
+
+An item is a string or `{ value, label? }`; the value is what is stored. Nested editors inherit the list. A stored language missing from the list stays an option, so opening an older document loses nothing.
+
 ## UI text
 
 The editor and the plugins are written in English, and the English text is the key of its translation. Pass `messages` — an object from English text to your language — to the top-level editor and preview: