@atom-forge/brickee 0.0.2 → 0.0.3

package/dist/LinkPrompt.svelte

@@ -22,21 +22,8 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="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: 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);
-	}
-</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']);
 
@@ -55,25 +56,18 @@
 	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;
 		/** 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, messages, markGated = true }: Props = $props();
+	let { blocks, plugins, nested = false, messages }: Props = $props();
 
 	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);
@@ -81,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}
@@ -136,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;
@@ -20,12 +20,10 @@ 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;
     /** 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

@@ -113,26 +113,36 @@
 	const long = $derived(fields.filter((f) => f.kind === 'textarea'));
 </script>
 
-<div class="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 === 'text'}
 				<!-- the field shows the value as kept (a YouTube link becomes its id); its label is the placeholder -->
-				<label class="field" title={tr(f.label)}>
-					<span class="sr">{tr(f.label)}</span>
+				<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, toggles): a click on a label goes to its first button -->
-			<svelte:element this={f.kind === 'select' ? 'label' : 'div'} class="field inline" role={f.kind === 'toggles' ? 'group' : undefined} aria-label={f.kind === 'toggles' ? tr(f.label) : undefined}>
-				<span class="name"
-					>{tr(f.label)}{#if viewLabel(f)}<span class="view" class:own={current(f).mine}>{viewLabel(f)}</span>{/if}</span
+			<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
@@ -142,12 +152,13 @@
 					/>
 				{:else if f.kind === 'toggles'}
 					{@const on = toggled(f)}
-					<span class="toggles">
+					<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="toggle"
-								class:on={on.includes(opt.value)}
+								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)}
@@ -158,8 +169,8 @@
 						{/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
 							small
 							drawStops={!free(f) && (f.options?.length ?? 0) <= 10}
@@ -169,19 +180,20 @@
 							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 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>
@@ -190,8 +202,8 @@
 			{/if}
 		{/each}
 	{#each long as f (f.key)}
-		<label class="field long" title={tr(f.label)} onfocusin={() => (editing = { key: f.key, text: text(f) })} onfocusout={() => (editing = null)}>
-				<span class="sr">{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
 					small
 					rows={2}
@@ -207,199 +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: var(--color-surface-contrast, #1d1d1f);
-	}
-	.bar.open {
-		justify-items: stretch;
-		margin-bottom: 8px;
-		padding: 6px 8px 8px;
-		background: rgba(120, 120, 140, 0.07);
-	}
-	.bar {
-		transition:
-			padding 0.18s,
-			background 0.18s;
-	}
-	/* 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 */
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-		gap: 6px 10px;
-		padding-top: 6px;
-	}
-	.head {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		padding: 0;
-		border: 0;
-		background: none;
-		color: var(--color-muted-contrast, #8e8e96);
-		cursor: pointer;
-		justify-self: start;
-	}
-	.head:hover .tag {
-		background: rgba(120, 120, 140, 0.2);
-		color: var(--color-surface-contrast, #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: var(--color-muted-contrast, #6e6e76);
-		font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-		white-space: nowrap;
-		user-select: none;
-	}
-	.field {
-		display: grid;
-		align-content: start;
-		min-width: 0;
-	}
-	.field.inline {
-		grid-template-columns: auto minmax(0, 1fr);
-		align-items: center;
-		gap: 8px;
-	}
-	/* compact controls: the bar's small type in the inputs too */
-	.field :global(input:not([type='range'])),
-	.field :global(textarea),
-	.field :global(select) {
-		font-size: 12px;
-	}
-	/* the label of a field whose placeholder shows it */
-	.sr {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-		white-space: nowrap;
-	}
-	.toggles {
-		display: inline-flex;
-		justify-self: start;
-		gap: 1px;
-		padding: 2px;
-		border-radius: 7px;
-		background: var(--color-muted, #f4f4f6);
-	}
-	.toggle {
-		display: inline-grid;
-		place-items: center;
-		min-width: 26px;
-		height: 24px;
-		padding: 0 4px;
-		border: 0;
-		border-radius: 5px;
-		background: none;
-		color: var(--color-muted-contrast, #6e6e76);
-		cursor: pointer;
-	}
-	.toggle:hover {
-		color: var(--color-surface-contrast, #1d1d1f);
-	}
-	.toggle.on {
-		background: var(--color-surface, #fff);
-		color: #3b82f6;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-	}
-	/* 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: var(--color-muted-contrast, #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 var(--color-frame, #c8c8d0);
-		border-radius: 4px;
-		color: var(--color-muted-contrast, #6e6e76);
-		font-weight: 500;
-	}
-	.view.own {
-		border-style: solid;
-		border-color: var(--color-surface-contrast, #1d1d1f);
-		color: var(--color-surface-contrast, #1d1d1f);
-	}
-	.slider {
-		display: block;
-		flex: 1;
-		min-width: 80px;
-	}
-	.value {
-		min-width: 4.5em;
-		color: var(--color-surface-contrast, #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 var(--color-frame, #c8c8d0);
-		border-radius: 7px;
-		background: var(--color-surface, #fff);
-		color: var(--color-muted-contrast, #8e8e96);
-		cursor: pointer;
-	}
-	.nocolor:hover {
-		border-color: var(--color-accent, #ea580c);
-		color: var(--color-surface-contrast, #3a3a40);
-	}
-	/* an empty swatch, struck through */
-	.swatch {
-		width: 16px;
-		height: 16px;
-		border: 1px solid var(--color-frame, #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: var(--color-muted-contrast, #8e8e96);
-		font-size: 16px;
-		line-height: 1;
-		cursor: pointer;
-	}
-	.clear:hover {
-		background: rgba(120, 120, 140, 0.14);
-		color: var(--color-surface-contrast, #1d1d1f);
-	}
-</style>

package/dist/code.js

@@ -1,7 +1,7 @@
 // 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 = 'block-editor:code-languages';
+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) {

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;

package/dist/dom.js

@@ -8,6 +8,15 @@ export function rich(node, value) {
         }
     };
 }
+/**
+ * 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 function portal(node) {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+}
 export function serialize(frag) {
     const d = document.createElement('div');
     d.append(frag);

package/dist/editor/BlockMenu.svelte

@@ -0,0 +1,102 @@
+<!-- A block menu of the editor: the slash menu (block types to insert) and the turn-into menu (what the selected
+     blocks can become). Compact one-line rows: icon, label, and the hint after it in grey. The editor keeps the state
+     (which row is active, where the menu is) and handles the keys. -->
+<script lang="ts" module>
+	import type { Icon } from '../palette';
+
+	export interface MenuRow {
+		key: string;
+		icon: Icon;
+		label: string;
+		hint: string;
+		/** The hint as a warning (e.g. "Loses formatting"). */
+		warn?: boolean;
+		/** A destructive row (delete), in red. */
+		danger?: boolean;
+		/** The current type of the selection: a check mark. */
+		current?: boolean;
+		/** A separator line above this row. */
+		gap?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { Check } from '@lucide/svelte';
+	import { portal } from '../dom';
+
+	let {
+		rows,
+		index,
+		x,
+		y,
+		up,
+		turn = false,
+		caption,
+		label,
+		onpick,
+		onhover
+	}: {
+		rows: MenuRow[];
+		index: number;
+		x: number;
+		y: number;
+		/** Opens upwards from `y` (no room below). */
+		up: boolean;
+		/** The turn-into menu: a little narrower and taller. */
+		turn?: boolean;
+		caption?: string;
+		label: string;
+		onpick: (n: number) => void;
+		onhover: (n: number) => void;
+	} = $props();
+
+	let menu: HTMLDivElement;
+	// Keep the highlighted row visible while moving through the menu with the arrow keys.
+	$effect(() => {
+		void index;
+		menu?.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
+	});
+</script>
+
+<!-- `menu`, `turn` and `active` are hooks (closing on an outside click, scrolling the active row into view), not styles.
+     It lives in the body (portal), so it keeps the editor's type size and colour itself. -->
+<div
+	bind:this={menu}
+	use:portal
+	class="menu fixed z-30 overflow-auto text-[17px] leading-[1.65] text-surface-contrast rounded-xl border border-frame bg-surface p-1.5 shadow-[0_10px_36px_rgb(0_0_0/0.2)] {turn
+		? 'turn max-h-[340px] w-60'
+		: 'max-h-[300px] w-[260px]'} {up ? '-translate-y-full' : ''}"
+	style:left="{x}px"
+	style:top="{y}px"
+	role="listbox"
+	aria-label={label}
+>
+	{#if caption}
+		<div class="px-2 pt-1 pb-1.5 font-[system-ui] text-[11px] leading-[normal] font-semibold tracking-[0.06em] text-muted-contrast uppercase">{caption}</div>
+	{/if}
+	{#each rows as row, n (row.key)}
+		{#if row.gap}<div class="mx-1 my-1.5 h-px bg-frame"></div>{/if}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="item flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-[3px] {n === index ? 'active bg-accent/14' : ''} {row.danger ? 'text-[#dc2626]' : ''}"
+			role="option"
+			tabindex="-1"
+			aria-selected={n === index}
+			onmousedown={(e) => {
+				e.preventDefault();
+				onpick(n);
+			}}
+			onmouseenter={() => onhover(n)}
+		>
+			<span class="grid size-6 flex-none place-items-center rounded-md border border-frame {row.danger ? 'text-[#dc2626]' : 'text-surface-contrast'}"
+				><row.icon size={14} /></span
+			>
+			<span class="flex min-w-0 items-baseline gap-1.5 overflow-hidden whitespace-nowrap"
+				><b class="font-[system-ui] text-[13px] leading-[normal] font-medium">{row.label}</b><small
+					class="overflow-hidden text-[11px] text-ellipsis {row.warn ? 'text-[#b45309]' : 'text-muted-contrast'}">{row.hint}</small
+				></span
+			>
+			{#if row.current}<span class="ml-auto flex text-accent"><Check size={16} /></span>{/if}
+		</div>
+	{/each}
+</div>

package/dist/editor/BlockMenu.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Icon } from '../palette';
+export interface MenuRow {
+    key: string;
+    icon: Icon;
+    label: string;
+    hint: string;
+    /** The hint as a warning (e.g. "Loses formatting"). */
+    warn?: boolean;
+    /** A destructive row (delete), in red. */
+    danger?: boolean;
+    /** The current type of the selection: a check mark. */
+    current?: boolean;
+    /** A separator line above this row. */
+    gap?: boolean;
+}
+type $$ComponentProps = {
+    rows: MenuRow[];
+    index: number;
+    x: number;
+    y: number;
+    /** Opens upwards from `y` (no room below). */
+    up: boolean;
+    /** The turn-into menu: a little narrower and taller. */
+    turn?: boolean;
+    caption?: string;
+    label: string;
+    onpick: (n: number) => void;
+    onhover: (n: number) => void;
+};
+declare const BlockMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockMenu = ReturnType<typeof BlockMenu>;
+export default BlockMenu;