@atom-forge/brickee 0.0.1 → 0.0.3

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,21 +22,8 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="light link" {onkeydown}>
+<div class="flex w-[340px] gap-1.5 rounded-xl border border-frame bg-surface p-2 shadow-[0_10px_36px_rgb(0_0_0/0.2)]" {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}
 </div>
-
-<style>
-	.link {
-		display: flex;
-		gap: 6px;
-		width: 340px;
-		padding: 8px;
-		background: #fff;
-		border: 1px solid #e5e5ea;
-		border-radius: 12px;
-		box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
-	}
-</style>

package/dist/Preview.svelte

@@ -1,8 +1,9 @@
-<!-- Styles travel with the markup: the sites show the blocks as server-rendered HTML (see content.server.ts). -->
+<!-- Renders a document the way a site shows it. Styles travel with the markup (injected), so the preview looks the same
+     wherever it is mounted. -->
 <svelte:options css="injected" />
 
 <script lang="ts" module>
-	import type { StoredBlock } from './types';
+	import { olStart, type StoredBlock } from './types';
 
 	const LIST = new Set(['md:ul', 'md:ol', 'md:todo']);
 
@@ -49,35 +50,24 @@
 <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';
 
 	interface Props {
 		blocks: StoredBlock[];
 		plugins: BlockPlugin[];
-		/** Set by plugins rendering their nested blocks; only the top level splits at the supporters-only divider. */
+		/** Set by plugins rendering their nested blocks (a container's preview). */
 		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 }: Props = $props();
 
-	provideMedia(() => media);
 	provideText(() => messages);
 	const tr = useText();
 
 	const pluginOf = (type: string) => plugins.find((p) => p.type === type);
 
-	// Everything after a unique supporters-only divider is for supporters: shown here, marked as such.
-	const lockAt = $derived(nested || !markGated ? -1 : blocks.findIndex((b) => pluginOf(b.type)?.gate));
-	const open = $derived(lockAt < 0 ? blocks : blocks.slice(0, lockAt + 1));
-	const locked = $derived(lockAt < 0 ? [] : blocks.slice(lockAt + 1));
-
 	// Inline markdown -> html: text is escaped first, links are http(s), mailto, tel or site-relative only (see inline()).
 	const html = (b: StoredBlock) => inline(b.text ?? '');
 	const indent = (b: StoredBlock) => (b.indent ? `${b.indent * 1.5}em` : undefined);
@@ -85,7 +75,8 @@
 
 {#snippet list(node: ListNode)}
 	{#if node.type === 'md:ol'}
-		<ol>{@render items(node)}</ol>
+		{@const start = olStart(node.items[0]?.block.props)}
+		<ol start={start === 1 ? undefined : start}>{@render items(node)}</ol>
 	{:else}
 		<ul class:todo={node.type === 'md:todo'}>{@render items(node)}</ul>
 	{/if}
@@ -140,47 +131,25 @@
 {/snippet}
 
 <div class="preview" class:nested>
-	{@render run(open)}
-	{#if locked.length}
-		<div class="supporters" aria-label={tr('For supporters only')}>
-			<p class="supporters-label">{tr('For supporters only')}</p>
-			{@render run(locked)}
-		</div>
-	{/if}
+	{@render run(blocks)}
 </div>
 
-<style>
-	/* Only what the renderer itself adds; the article typography comes from the page that shows it. */
-	.supporters {
-		margin-top: 1.5em;
-		padding-top: 1em;
-		border-top: 2px dashed #f96854;
-	}
-	.supporters-label {
-		font: 600 11px/1 system-ui, sans-serif;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: #f96854;
-	}
-	.preview :global(ul.todo) {
-		list-style: none;
-		padding-left: 0.2em;
-	}
-	.preview :global(ul.todo input) {
-		margin-right: 0.5em;
-	}
-	.preview :global(img) {
-		max-width: 100%;
-	}
-	/* The content starts at its top edge, whatever its first block is (pages often align it with a sidebar). */
-	.preview:not(.nested) > :global(:first-child),
-	.preview:not(.nested) > :global(:first-child > :first-child) {
-		margin-top: 0;
-	}
-	/* Floating images and side boxes stay inside the content. */
-	.preview:not(.nested)::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
-</style>
+<style>.preview :global(ul.todo) {
+  list-style: none;
+  padding-left: 0.2em;
+}
+.preview :global(ul.todo input) {
+  margin-right: 0.5em;
+}
+.preview :global(img) {
+  max-width: 100%;
+}
+.preview:not(.nested) > :global(:first-child),
+.preview:not(.nested) > :global(:first-child > :first-child) {
+  margin-top: 0;
+}
+.preview:not(.nested)::after {
+  content: "";
+  display: block;
+  clear: both;
+}</style>

package/dist/Preview.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { StoredBlock } from './types';
+import { type StoredBlock } from './types';
 /** Consecutive list blocks as properly nested lists: an item one level deeper goes into the previous item. */
 export type ListNode = {
     type: string;
@@ -15,20 +15,15 @@ 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 {
     blocks: StoredBlock[];
     plugins: BlockPlugin[];
-    /** Set by plugins rendering their nested blocks; only the top level splits at the supporters-only divider. */
+    /** Set by plugins rendering their nested blocks (a container's preview). */
     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;
 }
 declare const Preview: import("svelte").Component<Props, {}, "">;
 type Preview = ReturnType<typeof Preview>;

package/dist/PropsBar.svelte

@@ -1,31 +1,27 @@
-<!-- The fields of a plugin block, on the top of its box. Closed: only a small header (the block's tag); a click on it
-     opens the fields in place: a wrapping row (label and control side by side), text areas on their own full-width rows. An image field shows the picked image(s); a click
-     opens the picker (ImagePicker) with all the document's images. -->
+<!-- The fields of a plugin block (or a code block), on the top of its box. Closed: only a small header (the block's
+     tag); a click on it opens the fields in place: a wrapping row (label and control side by side), text areas on their
+     own full-width rows. -->
 <script lang="ts">
-	import { ColorPicker, Input, NativeSelect, Slider, Textarea, getPopupManager } from '@atom-forge/ui';
+	import { ColorPicker, Input, NativeSelect, Slider, Textarea } from '@atom-forge/ui';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 	import { slide } from 'svelte/transition';
-	import ImagePicker from './ImagePicker.svelte';
 	import { useView } from './view';
 	import type { Translate } from './i18n';
-	import type { MediaItem } from './media';
 	import type { Block, PropField } from './types';
 
 	interface Props {
 		block: Block;
 		tag: string;
 		fields: PropField[];
-		media: MediaItem[];
 		tr: Translate;
 		/** Sets one property from its field's text and returns the text as it is now kept. */
 		setProp: (b: Block, f: PropField, raw: string) => string;
 		/** Sets one property to a value as it is ('' or undefined removes it). */
 		setValue: (b: Block, key: string, v: unknown) => void;
-		pickMedia: (b: Block, f: PropField, id: string) => void;
 		/** Start with the fields open (a block just made). */
 		open?: boolean;
 	}
-	let { block, tag, fields, media, tr, setProp, setValue, pickMedia, open: startOpen = false }: Props = $props();
+	let { block, tag, fields, tr, setProp, setValue, open: startOpen = false }: Props = $props();
 	// svelte-ignore state_referenced_locally
 	let open = $state(startOpen);
 
@@ -33,10 +29,18 @@
 		const v = block.props?.[f.key];
 		return f.format ? f.format(v) : v == null ? '' : String(v);
 	};
-	const picked = (f: PropField): string[] => {
+	/** A text field's placeholder: its label, and its own placeholder (an example) after it. */
+	const hint = (f: PropField) => [tr(f.label), f.placeholder && tr(f.placeholder)].filter(Boolean).join(' · ');
+	/** Toggles: the values switched on, kept in the order of the options. */
+	const toggled = (f: PropField): string[] => {
 		const v = block.props?.[f.key];
-		return Array.isArray(v) ? v : v ? [String(v)] : [];
+		return Array.isArray(v) ? v.map(String) : [];
 	};
+	function toggle(f: PropField, value: string) {
+		const on = new Set(toggled(f));
+		if (!on.delete(value)) on.add(value);
+		setValue(block, f.key, (f.options ?? []).map((o) => o.value).filter((x) => on.has(x)));
+	}
 	const optionLabel = (f: PropField, i: number) => {
 		const opt = f.options?.[i];
 		return opt ? tr(opt.label, { n: opt.value }) : '';
@@ -107,57 +111,68 @@
 
 	const short = $derived(fields.filter((f) => f.kind !== 'textarea'));
 	const long = $derived(fields.filter((f) => f.kind === 'textarea'));
-
-	const popups = getPopupManager();
-	const urlOf = (id: string) => media.find((m) => m.id === id);
-	function openPicker(e: MouseEvent, f: PropField) {
-		popups.open.component(
-			ImagePicker,
-			{ media, multiple: f.kind === 'images', getPicked: () => picked(f), pick: (id: string) => pickMedia(block, f, id), tr },
-			{ anchor: e, align: 'left' }
-		);
-	}
 </script>
 
-<div class="light bar" class:open>
-	<button type="button" class="head" aria-expanded={open} title={tr(open ? 'Hide settings' : 'Settings')} onmousedown={(e) => e.preventDefault()} onclick={() => (open = !open)}>
-		<span class="tag">{tag}</span>
-		<ChevronDown size={13} class="chev" />
+<div
+	data-fields
+	class="grid gap-1.5 rounded-lg font-sans text-xs leading-[1.4] text-surface-contrast transition-[padding,background] duration-[180ms] {open
+		? 'mb-2 justify-items-stretch bg-[rgb(120_120_140/0.07)] px-2 pt-1.5 pb-2'
+		: 'mb-1 justify-items-start'}"
+>
+	<button type="button" data-fields-head class="group flex cursor-pointer items-center gap-0.5 justify-self-start border-0 bg-transparent p-0 text-muted-contrast" aria-expanded={open} title={tr(open ? 'Hide settings' : 'Settings')} onmousedown={(e) => e.preventDefault()} onclick={() => (open = !open)}>
+		<span class="rounded-[5px] bg-[rgb(120_120_140/0.12)] px-1.5 py-px font-mono text-[11px] leading-[1.5] font-medium whitespace-nowrap text-muted-contrast select-none group-hover:bg-[rgb(120_120_140/0.2)] group-hover:text-surface-contrast">{tag}</span>
+		<ChevronDown size={13} class="transition-[rotate] duration-150 {open ? 'rotate-180' : ''}" />
 	</button>
 	{#if open}
-	<div class="body" transition:slide={{ duration: 180 }}>
-	<div class="grid">
+	<div transition:slide={{ duration: 180 }}>
+	<!-- the fields in columns as wide as the box allows; text fields carry their label as placeholder, the others a short
+	     label beside the control; the bar's small type in the controls too -->
+	<div class="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-x-2.5 gap-y-1.5 pt-1.5 [&_input:not([type=range])]:text-[12px] [&_select]:text-[12px] [&_textarea]:text-[12px]">
 		{#each short as f (f.key)}
-			{#if f.kind === 'image' || f.kind === 'images'}
-				{@const ids = picked(f)}
-				<div class="field">
-					<span class="name">{tr(f.label)}</span>
-					<button type="button" class="chosen" title={tr('Choose')} onclick={(e) => openPicker(e, f)}>
-						{#each ids as id, n (id)}
-							{@const m = urlOf(id)}
-							{#if m}<img src={m.url} alt={m.name} />{:else}<span class="missing" title={id}>?</span>{/if}
-							{#if f.kind === 'images' && n === 5 && ids.length > 6}<span class="more">+{ids.length - 6}</span>{/if}
-						{:else}
-							<span class="empty">{tr('Choose…')}</span>
-						{/each}
-					</button>
-				</div>
+			{#if f.kind === 'text'}
+				<!-- the field shows the value as kept (a YouTube link becomes its id); its label is the placeholder -->
+				<label class="grid min-w-0 content-start" title={tr(f.label)}>
+					<span class="sr-only">{tr(f.label)}</span>
+					<Input small monospace placeholder={hint(f)} bind:value={() => text(f), (v: string) => setProp(block, f, v)} />
+				</label>
 			{:else}
-			<!-- not a label around buttons (a slider's view buttons, a colour's clear): a click on a label goes to its first button -->
-			<svelte:element this={f.kind === 'slider' || f.kind === 'color' ? 'div' : 'label'} class="field">
-				<span class="name"
-					>{tr(f.label)}{#if viewLabel(f)}<span class="view" class:own={current(f).mine}>{viewLabel(f)}</span>{/if}</span
+			<!-- not a label around buttons (a slider's view buttons, a colour's clear, toggles): a click on a label goes to its first button -->
+			<svelte:element this={f.kind === 'select' ? 'label' : 'div'} class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)] content-start items-center gap-2" role={f.kind === 'toggles' ? 'group' : undefined} aria-label={f.kind === 'toggles' ? tr(f.label) : undefined}>
+				<span class="text-[11.5px] font-semibold whitespace-nowrap text-muted-contrast select-none"
+					>{tr(f.label)}{#if viewLabel(f)}<!-- the view a per-view field edits; dashed while it only takes a wider view's value --><span
+							class="ml-1.5 rounded border px-[5px] font-medium {current(f).mine ? 'border-solid border-surface-contrast text-surface-contrast' : 'border-dashed border-frame text-muted-contrast'}"
+							>{viewLabel(f)}</span
+						>{/if}</span
 				>
 				{#if f.kind === 'select'}
 					<NativeSelect
+						small
 						options={(f.options ?? []).map((opt) => ({ value: opt.value, label: tr(opt.label, { n: opt.value }) }))}
 						bind:value={() => text(f), (v: string) => setProp(block, f, v)}
 					/>
+				{:else if f.kind === 'toggles'}
+					{@const on = toggled(f)}
+					<span class="inline-flex gap-px justify-self-start rounded-[7px] bg-muted p-0.5">
+						{#each f.options ?? [] as opt (opt.value)}
+							<button
+								type="button"
+								class="inline-grid h-6 min-w-[26px] cursor-pointer place-items-center rounded-[5px] border-0 px-1 {on.includes(opt.value)
+									? 'bg-surface text-accent shadow-[0_1px_2px_rgb(0_0_0/0.08)]'
+									: 'bg-transparent text-muted-contrast hover:text-surface-contrast'}"
+								aria-pressed={on.includes(opt.value)}
+								title={tr(opt.label)}
+								aria-label={tr(opt.label)}
+								onmousedown={(e) => e.preventDefault()}
+								onclick={() => toggle(f, opt.value)}
+								>{#if opt.icon}<opt.icon size={15} />{:else}{tr(opt.label)}{/if}</button
+							>
+						{/each}
+					</span>
 				{:else if f.kind === 'slider'}
-					<span class="line">
-					<span class="slider">
+					<span class="flex min-w-0 items-center gap-2">
+					<span class="block min-w-20 flex-1">
 						<Slider
-							compact
+							small
 							drawStops={!free(f) && (f.options?.length ?? 0) <= 10}
 							min={free(f) ? low(f) : 0}
 							max={free(f) ? f.max : (f.options?.length ?? 1) - 1}
@@ -165,35 +180,34 @@
 							bind:value={() => pos(f), (v: number) => setPos(f, v)}
 						/>
 					</span>
-					<span class="value">{posLabel(f)}</span>
+					<span class="min-w-[4.5em] whitespace-nowrap text-surface-contrast tabular-nums">{posLabel(f)}</span>
 					</span>
 				{:else if f.kind === 'color'}
 					<!-- with `none`: an unset colour shows as "none" (a click sets one); a set one can be cleared -->
-					<span class="line">
+					<span class="flex min-w-0 items-center gap-2">
 					{#if f.none && !text(f)}
-						<button type="button" class="nocolor" onclick={() => setProp(block, f, f.placeholder || '#000000')}>
-							<span class="swatch" aria-hidden="true"></span>{tr(f.none)}
+						<button type="button" class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] border border-dashed border-frame bg-surface pr-2.5 pl-1.5 text-muted-contrast hover:border-accent hover:text-surface-contrast" onclick={() => setProp(block, f, f.placeholder || '#000000')}>
+							<!-- an empty swatch, struck through -->
+							<span class="size-4 rounded border border-frame bg-[linear-gradient(to_top_right,transparent_calc(50%-1px),#e5484d_calc(50%-1px),#e5484d_calc(50%+1px),transparent_calc(50%+1px))]" aria-hidden="true"></span>{tr(f.none)}
 						</button>
 					{:else}
-						<ColorPicker bind:value={() => text(f) || '#000000', (v: string) => setProp(block, f, v)} />
+						<ColorPicker small bind:value={() => text(f) || '#000000', (v: string) => setProp(block, f, v)} />
 						{#if f.none}
-							<button type="button" class="clear" title={tr(f.none)} aria-label={tr(f.none)} onclick={() => setProp(block, f, '')}>×</button>
+							<button type="button" class="size-[22px] cursor-pointer rounded-md border-0 bg-transparent p-0 text-base leading-none text-muted-contrast hover:bg-[rgb(120_120_140/0.14)] hover:text-surface-contrast" title={tr(f.none)} aria-label={tr(f.none)} onclick={() => setProp(block, f, '')}>×</button>
 						{/if}
 					{/if}
 					</span>
-				{:else}
-					<!-- the field shows the value as kept (a YouTube link becomes its id) -->
-					<Input monospace placeholder={f.placeholder && tr(f.placeholder)} bind:value={() => text(f), (v: string) => setProp(block, f, v)} />
 				{/if}
 			</svelte:element>
 			{/if}
 		{/each}
 	{#each long as f (f.key)}
-		<label class="field long" onfocusin={() => (editing = { key: f.key, text: text(f) })} onfocusout={() => (editing = null)}>
-				<span class="name">{tr(f.label)}</span>
+		<label class="col-span-full grid min-w-0 content-start" title={tr(f.label)} onfocusin={() => (editing = { key: f.key, text: text(f) })} onfocusout={() => (editing = null)}>
+				<span class="sr-only">{tr(f.label)}</span>
 				<Textarea
-					rows={3}
-					placeholder={f.placeholder && tr(f.placeholder)}
+					small
+					rows={2}
+					placeholder={hint(f)}
 					bind:value={() => (editing?.key === f.key ? editing.text : text(f)), (v: string) => {
 						if (editing?.key === f.key) editing.text = v;
 						setProp(block, f, v);
@@ -205,191 +219,3 @@
 	</div>
 	{/if}
 </div>
-
-<style>
-	.bar {
-		display: grid;
-		justify-items: start;
-		gap: 6px;
-		margin-bottom: 4px;
-		border-radius: 8px;
-		font: 12px/1.4 system-ui, sans-serif;
-		color: #1d1d1f;
-	}
-	.bar.open {
-		justify-items: stretch;
-		margin-bottom: 8px;
-		padding: 8px 12px 12px;
-		background: rgba(120, 120, 140, 0.07);
-	}
-	.bar {
-		transition:
-			padding 0.18s,
-			background 0.18s;
-	}
-	/* the fields in 1–3 columns (as wide as the box allows), each with its label above */
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-		gap: 12px 16px;
-		padding-top: 8px;
-	}
-	.head {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		padding: 0;
-		border: 0;
-		background: none;
-		color: #8e8e96;
-		cursor: pointer;
-		justify-self: start;
-	}
-	.head:hover .tag {
-		background: rgba(120, 120, 140, 0.2);
-		color: #1d1d1f;
-	}
-	.head :global(.chev) {
-		transition: rotate 0.15s;
-	}
-	.open .head :global(.chev) {
-		rotate: 180deg;
-	}
-	.tag {
-		padding: 1px 6px;
-		border-radius: 5px;
-		background: rgba(120, 120, 140, 0.12);
-		color: #6e6e76;
-		font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-		white-space: nowrap;
-		user-select: none;
-	}
-	.field {
-		display: grid;
-		align-content: start;
-		gap: 4px;
-		min-width: 0;
-	}
-	/* text areas take a whole row */
-	.field.long {
-		grid-column: 1 / -1;
-	}
-	.line {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		min-width: 0;
-	}
-	.name {
-		font-size: 11.5px;
-		font-weight: 600;
-		color: #8e8e96;
-		white-space: nowrap;
-		user-select: none;
-	}
-	/* the view a per-view field edits (the host's current one); dashed while it only takes a wider view's value */
-	.view {
-		margin-left: 6px;
-		padding: 0 5px;
-		border: 1px dashed #c8c8d0;
-		border-radius: 4px;
-		color: #6e6e76;
-		font-weight: 500;
-	}
-	.view.own {
-		border-style: solid;
-		border-color: #1d1d1f;
-		color: #1d1d1f;
-	}
-	.slider {
-		display: block;
-		flex: 1;
-		min-width: 80px;
-	}
-	.value {
-		min-width: 4.5em;
-		color: #3a3a40;
-		font-variant-numeric: tabular-nums;
-		white-space: nowrap;
-	}
-	.nocolor {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		height: 30px;
-		padding: 0 10px 0 6px;
-		border: 1px dashed #c8c8d0;
-		border-radius: 7px;
-		background: #fff;
-		color: #8e8e96;
-		cursor: pointer;
-	}
-	.nocolor:hover {
-		border-color: var(--color-accent, #ea580c);
-		color: #3a3a40;
-	}
-	/* an empty swatch, struck through */
-	.swatch {
-		width: 16px;
-		height: 16px;
-		border: 1px solid #c8c8d0;
-		border-radius: 4px;
-		background: linear-gradient(to top right, transparent calc(50% - 1px), #e5484d calc(50% - 1px), #e5484d calc(50% + 1px), transparent calc(50% + 1px));
-	}
-	.clear {
-		width: 22px;
-		height: 22px;
-		padding: 0;
-		border: 0;
-		border-radius: 6px;
-		background: none;
-		color: #8e8e96;
-		font-size: 16px;
-		line-height: 1;
-		cursor: pointer;
-	}
-	.clear:hover {
-		background: rgba(120, 120, 140, 0.14);
-		color: #1d1d1f;
-	}
-	.chosen {
-		display: flex;
-		align-items: center;
-		gap: 3px;
-		min-height: 30px;
-		padding: 2px;
-		border: 1px solid #dcdce2;
-		border-radius: 7px;
-		background: #fff;
-		cursor: pointer;
-	}
-	.chosen:hover {
-		border-color: var(--color-accent, #ea580c);
-	}
-	/* images after the sixth are a "+n" */
-	.chosen > img:nth-of-type(n + 7) {
-		display: none;
-	}
-	.chosen img,
-	.chosen .missing {
-		width: 40px;
-		height: 24px;
-		object-fit: cover;
-		border-radius: 4px;
-	}
-	.chosen .missing {
-		display: grid;
-		place-items: center;
-		background: #eee;
-		color: #8e8e96;
-	}
-	.chosen .more {
-		padding: 0 4px;
-		color: #6e6e76;
-		font-size: 11px;
-	}
-	.chosen .empty {
-		padding: 0 8px;
-		color: #8e8e96;
-	}
-</style>

package/dist/PropsBar.svelte.d.ts

@@ -1,17 +1,14 @@
 import type { Translate } from './i18n';
-import type { MediaItem } from './media';
 import type { Block, PropField } from './types';
 interface Props {
     block: Block;
     tag: string;
     fields: PropField[];
-    media: MediaItem[];
     tr: Translate;
     /** Sets one property from its field's text and returns the text as it is now kept. */
     setProp: (b: Block, f: PropField, raw: string) => string;
     /** Sets one property to a value as it is ('' or undefined removes it). */
     setValue: (b: Block, key: string, v: unknown) => void;
-    pickMedia: (b: Block, f: PropField, id: string) => void;
     /** Start with the fields open (a block just made). */
     open?: boolean;
 }

package/dist/code.d.ts

@@ -0,0 +1,12 @@
+/** A language: its value is stored in the block (`props.lang`, the opening fence's info string). */
+export interface CodeLanguage {
+    value: string;
+    /** Shown in the dropdown; defaults to the value. */
+    label?: string;
+}
+type Get = () => CodeLanguage[];
+/** Call in a component's init (around the editor). Without its own list, a nested editor keeps its parent's. */
+export declare function provideCodeLanguages(own: () => (string | CodeLanguage)[] | undefined): void;
+/** Call in a component's init; the returned function reads the current list (empty: free text). */
+export declare const useCodeLanguages: () => Get;
+export {};

package/dist/code.js

@@ -0,0 +1,15 @@
+// The languages a code block offers. Without a list (the default) its language is free text; with one, the field is a
+// dropdown of these. Which languages make sense is the host's business (what its site can highlight).
+import { getContext, setContext } from 'svelte';
+const KEY = 'brickee:code-languages';
+const normalize = (list) => list.map((l) => (typeof l === 'string' ? { value: l } : l));
+/** Call in a component's init (around the editor). Without its own list, a nested editor keeps its parent's. */
+export function provideCodeLanguages(own) {
+    const parent = getContext(KEY);
+    setContext(KEY, () => {
+        const list = own();
+        return list ? normalize(list) : (parent?.() ?? []);
+    });
+}
+/** Call in a component's init; the returned function reads the current list (empty: free text). */
+export const useCodeLanguages = () => getContext(KEY) ?? (() => []);

package/dist/dom.d.ts

@@ -2,6 +2,14 @@
 export declare function rich(node: HTMLElement, value: string): {
     update(v: string): void;
 };
+/**
+ * Svelte action: moves the element to the end of the body. A floating menu positioned with `position: fixed` is then
+ * placed against the viewport even when the editor sits in a transformed parent (an animated drawer, a dialog), where
+ * `fixed` would be relative to that parent.
+ */
+export declare function portal(node: HTMLElement): {
+    destroy: () => void;
+};
 export declare function serialize(frag: DocumentFragment): string;
 /** Returns '' for html that has no visible text (e.g. `<b></b>`, `<br>`). */
 export declare function clean(h: string): string;