@atom-forge/brickee 0.0.1 → 0.0.2

package/docs/hu/recipes-and-pitfalls.md

@@ -38,23 +38,22 @@ export const messages: Messages = { ...hu, Button: 'Gomb', 'A link as a button':
 ```svelte
 <!-- lib/BlockEditor.svelte -->
 <script lang="ts">
-	import { Editor, provideView, type MediaItem, type StoredBlock } from '@atom-forge/brickee';
+	import { Editor, provideView, type StoredBlock } from '@atom-forge/brickee';
 	import { messages, PAGE_PALETTE, plugins } from './blocks';
 
 	let {
 		value = $bindable(),
-		media = [],
 		palette = PAGE_PALETTE,
 		view
-	}: { value: StoredBlock[]; media?: MediaItem[]; palette?: string[]; view?: string } = $props();
+	}: { value: StoredBlock[]; palette?: string[]; view?: string } = $props();
 
 	provideView(() => view);
 </script>
 
-<Editor bind:value {plugins} {palette} {media} {messages} />
+<Editor bind:value {plugins} {palette} {messages} />
 ```
 
-A közzétett oldalt a `<Preview blocks={doc} {plugins} {media} {messages} />`-val és ugyanazokkal a `plugins`-szal rendereld, így egy blokk ugyanúgy néz ki a szerkesztő előnézetében és az oldalon.
+A közzétett oldalt a `<Preview blocks={doc} {plugins} {messages} />`-val és ugyanazokkal a `plugins`-szal rendereld, így egy blokk ugyanúgy néz ki a szerkesztő előnézetében és az oldalon.
 
 ## A teljes dokumentum másolása markdownként
 
@@ -62,13 +61,13 @@ A kijelölt blokkok másolása már most is markdownt tesz a vágólapra. Egy, a
 
 ```svelte
 <script lang="ts">
-	import { fromStored, toMarkdown, type MediaItem, type StoredBlock } from '@atom-forge/brickee';
+	import { fromStored, toMarkdown, type StoredBlock } from '@atom-forge/brickee';
 	import { plugins } from './blocks';
 
-	let { doc, media = [] }: { doc: StoredBlock[]; media?: MediaItem[] } = $props();
+	let { doc }: { doc: StoredBlock[] } = $props();
 
 	// Kattintáskezelőben fut, így a csak böngészőben működő toMarkdown itt biztonságos.
-	const copy = () => navigator.clipboard.writeText(toMarkdown(doc.map(fromStored), { plugins, media }));
+	const copy = () => navigator.clipboard.writeText(toMarkdown(doc.map(fromStored), { plugins }));
 </script>
 
 <button type="button" onclick={copy}>Copy as markdown</button>
@@ -106,10 +105,12 @@ Az alkalmazás a csomag lefordított `dist/` mappáját olvassa, ezért minden v
 | Tünet | Ok | Megoldás |
 |---|---|---|
 | A blokkmezők és a popupok stílus nélkülinek tűnnek | Hiányzik az `@atom-forge/ui` téma CSS-e vagy a Tailwind `@source`-a | Állítsd be az `@atom-forge/ui`-t a dokumentációja szerint, és az alkalmazást a `Root`-ja alatt rendereld. |
+| A blokkfogantyúk balra kilógnak | A fogantyúk a szerkesztő dobozától balra jelennek meg | Adj a szerkesztőt körülvevő elemnek kb. 22 px bal oldali paddinget. |
 | A popupok nem nyílnak meg, vagy „context not found” hibák linkelt csomaggal | A `svelte` vagy az `@atom-forge/ui` két példányban van jelen | Vedd fel őket a Vite `resolve.dedupe` listájába. |
 | Egy plugin blokkja „Unknown block” feliratot mutat | A pluginja hiányzik a `plugins`-ból | Egy dokumentumtípus minden szerkesztőjének és előnézetének ugyanazokat a pluginokat add át. |
 | Egy blokk hiányzik a `Preview`-ból | A pluginjának nincs `preview`-ja | Adj a pluginnak `preview`-t (a mellékelt pluginoknak van alapértelmezett), vagy rendereld a blokkot a saját megjelenítőddel. |
-| Egy plugin blokkja hiányzik az oldalról | Az előnézet más `plugins`-t kapott, vagy a kép azonosítója nincs a `media`-ban | Ugyanazt a pluginlistát és médiát használd a szerkesztőhöz és az előnézethez. |
+| Egy plugin blokkja hiányzik az oldalról | Az előnézet más `plugins`-t kapott | Ugyanazt a pluginlistát használd a szerkesztőhöz és az előnézethez. |
+| Egy képblokk semmit sem renderel | Az előnézete elutasítja a tárolt címet, vagy az alkalmazás saját keresése nem ismeri a tárolt azonosítót | Olyan címet tárolj, amelyet az előnézet elfogad (`http(s)` vagy az oldalon belüli); az azonosítókat a szerkesztőben és az oldalon ugyanabból az adatból oldd fel. |
 | Egy doboz nem tehető egy másik dobozba | A beágyazott szerkesztők egy szint mélyek | A tárolókat tartalomblokkok befogadására tervezd, ne más tárolókéra. |
 | Egy blokk nem érhető el egy tárolón belül | Az `accepts` vagy az alkalmazás `palette`-je kihagyja | Vedd fel a palettaazonosítót az `accepts`-be (vagy használd az `'md:*'`-ot az összes beépítetthez). |
 | Egy egyedi blokk kétszer jelenik meg | A séma nem kényszeríti ki a `unique`-ot | Ellenőrizd a szerveren, ha az alkalmazásod számít rá. |

package/docs/hu/upgrading.md

@@ -6,11 +6,27 @@ Ez a fejezet azokat a változásokat sorolja fel, amelyek teendőt igényelhetne
 
 A tőled semmit nem igénylő változások – új exportok, javítások, dokumentációfrissítések – csak a változásnaplóban (`CHANGELOG.md`, a csomaggal együtt szállítva) szerepelnek.
 
-> **Egyelőre nincs szükség migrációra**
->
-> Az `@atom-forge/brickee`-nek még nem volt olyan kiadása, amely változtatást igényelt volna az azt használó kódban. Az alábbi szakasz csak azoknak az alkalmazásoknak szól, amelyek már azelőtt használták a szerkesztőt, hogy ebből a csomagból lett volna.
+## A 0.0.1-ről a 0.0.2-re
 
-## A `block-editor` munkaterület-csomagról az Unreleased változatra
+### A képek és a média már nem részei a csomagnak
+
+A csomag többé nem ismeri a kép fogalmát. Hogy egy blokk a kép URL-jét vagy egy azonosítót tárol, hogyan választja ki a felhasználó a képet, és hogyan lesz a tárolt értékből cím, azt az alkalmazás saját képpluginja dönti el (lásd [Képek](writing-plugins.md#képek)).
+
+| Eltávolítva | Mi volt |
+|---|---|
+| `kind: 'image'`, `kind: 'images'` | Mezőfajták, amelyek egy kiválasztott médiaelem azonosítóját (vagy azonosítóit) tárolták, a beépített képválasztó felugró ablakkal |
+| Az `Editor` és a `Preview` `media` propja | A képek, amelyek közül a blokkok választhattak, és amelyekre hivatkozhattak |
+| `provideMedia`, `useMedia`, `findMedia`, `MediaItem` | A média-kontextus, a keresője és a típusa |
+| A `toMarkdown` `media` beállítása | A `toMarkdown(blocks, { plugins, media })` helyett most `toMarkdown(blocks, { plugins })` |
+| `ctx.media` egy plugin `markdown(props, ctx)` függvényében | A `MarkdownContext` most `{ inner }` |
+
+A `PropField['kind']` most `'text' | 'textarea' | 'color' | 'select' | 'slider'`. A tárolt dokumentumokat ez nem érinti: egy blokk propsa megtartja, amit tárolt, az azonosítókat is.
+
+**Teendő:** a képpluginjaidban cseréld le az `image` és `images` mezőket saját kiválasztásra — egy gombra a plugin nézetében, amely megnyitja a médiaablakodat vagy egy feltöltést, és az eredményt a `props`-ba írja, vagy egy egyszerű `text` mezőre egy URL-hez —, és tartsd meg a prop-kulcsokat, hogy a tárolt dokumentumok továbbra is betöltődjenek. Töröld a `media` propot a szerkesztőidről és előnézeteidről, és a `media` beállítást a `toMarkdown`-hívásaidból. Ahol egy nézet, előnézet vagy `markdown` alak a `useMedia`, `findMedia` vagy `ctx.media` segítségével alakított címmé egy azonosítót, ott az alkalmazásod saját adatában keresd ki: az alkalmazásod egy moduljában, vagy egy saját Svelte-kontextusban, amelyet a szerkesztő és az előnézet fölött adsz meg (a `markdown` komponenseken kívül fut, ezért modulbeli adat kell neki). Ha továbbra is szükséged van rá, definiálj egy `MediaItem`-szerű típust az alkalmazásodban.
+
+## A `block-editor` munkaterület-csomagról a 0.0.1-es változatra
+
+Ez a szakasz csak azoknak az alkalmazásoknak szól, amelyek már azelőtt használták a szerkesztőt, hogy ebből a csomagból lett volna.
 
 A szerkesztő `block-editor` néven, egy alkalmazáson belüli munkaterület-csomagként indult. Ugyanazzal a tárolt alakkal költözött ide `@atom-forge/brickee` néven, így az elmentett dokumentumokat nem kell átalakítani. Az import-azonosítók megváltoztak, a plugin-kit a pluginok belépési pontjából átkerült a magba, az oldalspecifikus pluginok pedig az alkalmazásnál maradtak.
 

package/docs/hu/writing-plugins.md

@@ -141,7 +141,7 @@ Regisztráld a többi mellé:
 
 > **A props a felhasználóktól jön**
 >
-> Egy plugin propsa az, ami el lett tárolva — amit egy szerkesztő begépelt, beillesztett, vagy amit bárki, aki dokumentumot menthet, elküldött az API-dnak. A séma csak az alakot ellenőrzi. Minden előnézetnek megbízhatatlanként kell kezelnie a propsot: a színeket a `safeColor`-on keresztül vedd át, ellenőrizd a linkeket, korlátozd a számokat, a képeket pedig a médialistában keresd ki, ne a tárolt URL-eket használd. A Svelte escape-eli a `{...}`-ban lévő szöveget; propot soha ne tegyél `{@html}`-be.
+> Egy plugin propsa az, ami el lett tárolva — amit egy szerkesztő begépelt, beillesztett, vagy amit bárki, aki dokumentumot menthet, elküldött az API-dnak. A séma csak az alakot ellenőrzi. Minden előnézetnek megbízhatatlanként kell kezelnie a propsot: a színeket a `safeColor`-on keresztül vedd át, ellenőrizd a linkeket és a képek címét, és korlátozd a számokat. A Svelte escape-eli a `{...}`-ban lévő szöveget; propot soha ne tegyél `{@html}`-be.
 
 ## Mezők
 
@@ -151,9 +151,9 @@ Minden `PropField` egy beállítás a blokk tetején. A szerkesztő rajzolja ki
 |---|---|
 | `key` | A prop, amelyet szerkeszt. |
 | `label` | A címkéje (a `messages`-en keresztül fordítva). |
-| `kind` | `text`, `textarea`, `color`, `select`, `slider`, `image` vagy `images`. |
+| `kind` | `text`, `textarea`, `color`, `select`, `slider` vagy `toggles`. |
 | `placeholder` | Üres szövegmező tippje; opcionális színnél az a szín, amelyről a „none” gombra kattintás indul. |
-| `options` | `{ value, label }[]` a `select`-hez, valamint az értékeken lépkedő `slider`-hez. Egy opció címkéje tartalmazhat `{n}`-t, amelyet az értéke tölt ki. |
+| `options` | `{ value, label }[]` a `select`-hez, valamint az értékeken lépkedő `slider`-hez. Egy opció címkéje tartalmazhat `{n}`-t, amelyet az értéke tölt ki. A `toggles`-hez `{ value, label, icon }[]`: az `icon` a gomb, a `label` a buboréksúgója. |
 | `min`, `max`, `step`, `unit` | Számcsúszka (`slider`): a tartománya, a lépésköze (alapértelmezés 1) és az érték után mutatott mértékegység. |
 | `none` | A beállítatlan állapot címkéje: számcsúszkánál a `min`-től balra lévő rovátka, opcionális színnél a „none” gomb. |
 | `views` | Nézetenkénti értékek egy `slider`-hez (lásd [Nézetenkénti értékek](host-contexts.md#nézetenkénti-értékek)). |
@@ -169,8 +169,7 @@ Az egyes fajták így tárolják az értéküket:
 | `slider` `options`-szel | A csúszka pozíciójában lévő opció értéke. |
 | `slider` `min`-nel és `max`-szal | A szám szövegként (például `'56'`); a `none` rovátka eltávolítja a kulcsot. |
 | `color` | Egy `#rrggbb` szöveg; `none` esetén a törlése eltávolítja a kulcsot. |
-| `image` | A kiválasztott médiaelem `id`-ja; újbóli kiválasztása eltávolítja. |
-| `images` | Azonosítók tömbje, kiválasztási sorrendben; egy már kiválasztott elem újbóli kiválasztása kiveszi. |
+| `toggles` | A bekapcsolt opciók listája az `options` sorrendjében (ha egy sincs, `[]`); ilyen a beépített táblázat fejléce és lábléce. |
 
 Az üres érték (`''`, `null` vagy `undefined`, akkor is, ha a `parse` adja vissza) eltávolítja a kulcsot a `props`-ból, ezért az előnézetnek mindig kezelnie kell a hiányzó propot. A mező `parse`-a jó hely a bemenet normalizálására is: a mellékelt YouTube-mező bármilyen YouTube-linket elfogad, de csak a videó azonosítóját tárolja.
 
@@ -189,7 +188,7 @@ A `props`-ot és a `blocks`-ot akkor is `$bindable()`-lel deklaráld, ha a néze
 
 ## Az előnézet
 
-Az előnézet `PluginPreviewProps`-ot kap: `props`, `blocks` és `plugins`. Ez egy egyszerű Svelte-komponens, amely az oldal számára rendereli a blokkot. A média, a szövegek és a nézet a kontextusokon keresztül érhető el (`useMedia`, `useText`, `useView`; lásd [Az alkalmazás kontextusai](host-contexts.md)).
+Az előnézet `PluginPreviewProps`-ot kap: `props`, `blocks` és `plugins`. Ez egy egyszerű Svelte-komponens, amely az oldal számára rendereli a blokkot. A szövegek és a nézet a kontextusokon keresztül érhető el (`useText`, `useView`; lásd [Az alkalmazás kontextusai](host-contexts.md)); a képek a plugin saját ügyei (lásd [Képek](#képek)).
 
 ## Tárolók
 
@@ -275,10 +274,7 @@ Mindkettőre tipikus példa egy csak támogatóknak szóló elválasztó: dokume
 
 ## Markdown alak
 
-A `markdown(props, { inner, media })` markdownként adja vissza a blokkot; ezt használja a szerkesztő blokkok másolásakor, és a `toMarkdown`:
-
-- `inner` — a beágyazott blokkok, már markdownként (`''`, ha nincsenek);
-- `media` — a dokumentum médiája, hogy egy kép azonosítóját a `findMedia(media, id)?.url`-lel URL-lé alakíthasd.
+A `markdown(props, { inner })` markdownként adja vissza a blokkot; ezt használja a szerkesztő blokkok másolásakor, és a `toMarkdown`. Az `inner` a beágyazott blokkok, már markdownként (`''`, ha nincsenek).
 
 `''` visszaadásával kihagyod a blokkot. Azoknak a pluginoknak, amelyek kimenetének szövegként nincs értelme (hirdetéshely, a mellékelt `gap`), egyszerűen nincs markdown alakjuk. Három segédfüggvény gondoskodik a jól formált kimenetről:
 
@@ -288,6 +284,111 @@ A `markdown(props, { inner, media })` markdownként adja vissza a blokkot; ezt h
 | `mdJoin(...parts)` | Különálló blokkokként fűzi össze a részeket (köztük üres sorral), kihagyva az üreseket és a hamis értékűeket. |
 | `mdQuote(md)` | Minden sor elé `> `-t tesz, idézetblokként renderelt dobozhoz. |
 
+## Képek
+
+A szerkesztő nem ismeri a kép fogalmát: nincs képmező, nincs képválasztó, nincs médialista. Hogy egy blokk a kép URL-jét vagy az alkalmazás saját médiatárában lévő kép azonosítóját tárolja, hogyan választja ki a felhasználó, és hogyan lesz a tárolt értékből cím, az az alkalmazás döntése, így a képblokk az alkalmazás egy közönséges pluginja.
+
+Egy minimális `photo` plugin a kép címét tárolja, amelyet egy szövegmezőbe kell beírni, mellette alternatív szöveggel és magasságcsúszkával:
+
+```svelte
+<!-- PhotoView.svelte -->
+<script lang="ts" module>
+	export interface PhotoProps extends Record<string, unknown> {
+		/** A kép címe. */
+		url: string;
+		alt: string;
+		/** A magasság a szélesség %-ában (20–150), vagy beállítatlan a kép saját alakjához. */
+		ratio?: unknown;
+	}
+
+	/** A tárolt cím, ha http(s) vagy az oldalon belüli, különben ''. */
+	export const imageSrc = (u: unknown) => {
+		const s = String(u ?? '').trim();
+		return /^(https?:|\/(?!\/))/.test(s) ? s : '';
+	};
+
+	/** CSS aspect-ratio egy tárolt magasságból, vagy 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, type PluginViewProps } from '@atom-forge/brickee';
+
+	let { props = $bindable(), blocks = $bindable() }: PluginViewProps<PhotoProps> = $props();
+	const src = $derived(imageSrc(props.url));
+</script>
+
+{#if src}
+	<img {src} alt={props.alt} style="max-width: 100%" />
+{:else}
+	<Empty icon={ImageIcon} text="Set the image's address above" />
+{/if}
+```
+
+```svelte
+<!-- PhotoPreview.svelte -->
+<script lang="ts">
+	import { baseValue, type PluginPreviewProps } from '@atom-forge/brickee';
+	import { aspect, imageSrc, type PhotoProps } from './PhotoView.svelte';
+
+	let { props }: PluginPreviewProps<PhotoProps> = $props();
+	const src = $derived(imageSrc(props.url));
+</script>
+
+{#if src}
+	<img {src} 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 { 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 image',
+	keys: 'photo image picture',
+	icon: ImageIcon,
+	props: () => ({ url: '', alt: '' }),
+	fields: [
+		{ key: 'url', label: 'Image', kind: 'text', placeholder: 'https://…', parse: (s) => s.trim() },
+		{ 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) => {
+		const src = imageSrc(p.url);
+		return src ? `![${mdText(p.alt)}](${src})` : '';
+	},
+	view: PhotoView,
+	preview: PhotoPreview
+};
+```
+
+A cím ugyanolyan prop, mint a többi, tehát megbízhatatlan: a nézet és az előnézet csak akkor rendereli, ha `http(s)` vagy az oldalon belüli cím, ahogy a gomb is ellenőrzi a linkjét.
+
+Más alkalmazások másként döntenek, de mindezt a pluginon belül:
+
+- **Médiatár.** A blokk URL helyett az alkalmazás médiatárában lévő kép azonosítóját tárolja. A nézet, az előnézet és a `markdown` az alkalmazás saját keresésével alakítja címmé az azonosítót: az alkalmazás egy moduljával, vagy egy saját Svelte-kontextussal, amelyet a szerkesztő és az előnézet fölött ad meg (a plugin-komponensek ezek alatt renderelődnek). A `markdown` komponenseken kívül fut — blokkok másolásakor és a `toMarkdown`-ban —, ezért csak modulbeli adatot használhat.
+- **Kiválasztás.** Szövegmező helyett a nézet saját választót is mutathat — egy gombot, amely megnyitja az alkalmazás médiaablakát vagy egy feltöltést —, és az eredményt a `props`-ba írja, amely kötött (bindable).
+- **Több kép.** Egy galéria egyetlen propban tárol egy listát (URL-ekből vagy azonosítókból), és ugyanígy a nézetében szerkeszti.
+
 ## A kit
 
 | Export | Fajta | Használat |
@@ -299,7 +400,6 @@ A `markdown(props, { inner, media })` markdownként adja vissza a blokkot; ezt h
 | `baseValue(value)` | függvény | Egy nézetenkénti prop alapértéke. |
 | `viewValues(value, keys)` | függvény | Egy nézetenkénti prop értéke minden nézetre. |
 | `mdText`, `mdJoin`, `mdQuote` | függvények | Markdown alakok (fent). |
-| `useMedia`, `findMedia` | függvények | A dokumentum képei (lásd [Az alkalmazás kontextusai](host-contexts.md)). |
 | `useText` | függvény | Lefordítja a plugin saját felületi szövegeit. |
 | `useView` | függvény | Az alkalmazás által éppen mutatott nézet. |
 | `Preview` | komponens | Egy tároló beágyazott blokkjait rendereli (`nested`-del). |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atom-forge/brickee",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"author": {
 		"name": "Gergely Laborci",
 		"url": "https://github.com/laborci"
@@ -87,13 +87,17 @@
 		"@atom-forge/ship": "0.2.0",
 		"@atom-forge/ui": "^0.0.37",
 		"@lucide/svelte": "^1.59.0",
-		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^4.0.1",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/typography": "^0.5.20",
+		"@tailwindcss/vite": "^4.3.5",
 		"publint": "^0.3.15",
 		"svelte": "^5.57.1",
 		"svelte-check": "^4.4.2",
+		"tailwindcss": "^4.3.5",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
 		"zod": "^4.6.7"

package/dist/ImagePicker.svelte

@@ -1,131 +0,0 @@
-<!-- The image picker popup of an image field (see PropsBar): every image attached to the document, grouped. One image:
-     a click picks it and closes; several: clicks add and remove (the numbers show the order), Done or Escape closes. -->
-<script lang="ts">
-	import { Button, getPopupManager } from '@atom-forge/ui';
-	import type { Translate } from './i18n';
-	import type { MediaItem } from './media';
-
-	interface Props {
-		media: MediaItem[];
-		multiple: boolean;
-		/** The picked ids as they are now, in order. */
-		getPicked: () => string[];
-		pick: (id: string) => void;
-		tr: Translate;
-	}
-	let { media, multiple, getPicked, pick, tr }: Props = $props();
-	const popups = getPopupManager();
-	const picked = $derived(getPicked());
-
-	function choose(id: string) {
-		pick(id);
-		if (!multiple) popups.resolve('focus');
-	}
-	function onkeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			popups.resolve('focus');
-		}
-	}
-	let root = $state<HTMLElement>();
-	$effect(() => root?.focus());
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div class="light picker" role="dialog" aria-label={tr('Images')} tabindex="-1" {onkeydown} bind:this={root}>
-	{#if media.length}
-		<div class="grid">
-			{#each media as m, n (m.id)}
-				{@const at = picked.indexOf(m.id)}
-				{#if m.group && m.group !== media[n - 1]?.group}<span class="group">{m.group}</span>{/if}
-				<button type="button" class="thumb" class:on={at >= 0} title={m.name} aria-pressed={at >= 0} onclick={() => choose(m.id)}>
-					<img src={m.url} alt={m.name} />
-					{#if at >= 0}<span class="n">{multiple ? at + 1 : '✓'}</span>{/if}
-				</button>
-			{/each}
-		</div>
-		{#if multiple}
-			<div class="foot">
-				<span>{tr('{n} picked', { n: picked.length })}</span>
-				<Button compact onclick={() => popups.resolve('focus')}>{tr('Done')}</Button>
-			</div>
-		{/if}
-	{:else}
-		<p class="none">{tr('No images attached to this page yet.')}</p>
-	{/if}
-</div>
-
-<style>
-	.picker {
-		width: 360px;
-		max-height: min(440px, calc(100vh - 24px));
-		overflow: auto;
-		padding: 10px;
-		display: grid;
-		gap: 10px;
-		background: #fff;
-		color: #1d1d1f;
-		border: 1px solid #e5e5ea;
-		border-radius: 12px;
-		box-shadow: 0 10px 36px rgba(0, 0, 0, 0.2);
-		font: 13px/1.4 system-ui, sans-serif;
-		outline: none;
-	}
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(5, 1fr);
-		gap: 4px;
-	}
-	.group {
-		grid-column: 1 / -1;
-		margin-top: 4px;
-		color: #8e8e96;
-		font-size: 11px;
-	}
-	.thumb {
-		position: relative;
-		padding: 0;
-		border: 2px solid transparent;
-		border-radius: 7px;
-		background: none;
-		cursor: pointer;
-	}
-	.thumb img {
-		display: block;
-		width: 100%;
-		aspect-ratio: 1;
-		object-fit: cover;
-		border-radius: 5px;
-	}
-	.thumb.on {
-		border-color: var(--color-accent, #ea580c);
-	}
-	.n {
-		position: absolute;
-		top: 2px;
-		right: 2px;
-		min-width: 16px;
-		height: 16px;
-		padding: 0 3px;
-		border-radius: 8px;
-		background: var(--color-accent, #ea580c);
-		color: #fff;
-		font: 600 10px/16px system-ui, sans-serif;
-	}
-	.foot {
-		position: sticky;
-		bottom: -10px;
-		margin: 0 -10px -10px;
-		padding: 8px 10px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background: #fff;
-		border-top: 1px solid #e5e5ea;
-		color: #8e8e96;
-	}
-	.none {
-		margin: 0;
-		color: #8e8e96;
-	}
-</style>

package/dist/ImagePicker.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Translate } from './i18n';
-import type { MediaItem } from './media';
-interface Props {
-    media: MediaItem[];
-    multiple: boolean;
-    /** The picked ids as they are now, in order. */
-    getPicked: () => string[];
-    pick: (id: string) => void;
-    tr: Translate;
-}
-declare const ImagePicker: import("svelte").Component<Props, {}, "">;
-type ImagePicker = ReturnType<typeof ImagePicker>;
-export default ImagePicker;

package/dist/media.d.ts

@@ -1,17 +0,0 @@
-export interface MediaItem {
-    /** Stored in the block's props. */
-    id: string;
-    /** File name or title, shown in the picker. */
-    name: string;
-    /** Address of the image (a thumbnail size is fine for the editor). */
-    url: string;
-    /** Where it comes from (e.g. the attachment category), shown as a heading in the picker. */
-    group?: string;
-}
-type Get = () => MediaItem[];
-/** Call in a component's init. Without its own list, a nested editor or preview keeps its parent's. */
-export declare function provideMedia(own: () => MediaItem[] | undefined): void;
-/** Call in a component's init; the returned function reads the current list. */
-export declare const useMedia: () => Get;
-export declare const findMedia: (list: MediaItem[], id: unknown) => MediaItem | undefined;
-export {};

package/dist/media.js

@@ -1,12 +0,0 @@
-// The images a document can use: the host's attachments (on a CMS page, the page's uploaded images). Blocks store
-// an attachment's id; the editor, the preview and the plugins look it up here.
-import { getContext, setContext } from 'svelte';
-const KEY = 'block-editor:media';
-/** Call in a component's init. Without its own list, a nested editor or preview keeps its parent's. */
-export function provideMedia(own) {
-    const parent = getContext(KEY);
-    setContext(KEY, () => own() ?? parent?.() ?? []);
-}
-/** Call in a component's init; the returned function reads the current list. */
-export const useMedia = () => getContext(KEY) ?? (() => []);
-export const findMedia = (list, id) => list.find((m) => m.id === id);