@atom-forge/brickee 0.0.0-stage → 0.0.1

package/dist/Editor.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type MediaItem } from './media';
+import { type Messages } from './i18n';
+import { type BlockPlugin, type StoredBlock } from './types';
+interface Props {
+    /** The document: built-in blocks as markdown snippets, plugin blocks with their props. */
+    value?: StoredBlock[];
+    readonly?: boolean;
+    placeholder?: string;
+    /** Built-in block types and plugin types offered in the slash menu, in this order. Shortcuts and paste respect it too. */
+    palette?: string[];
+    /** Custom blocks this editor can show and offer. */
+    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;
+}
+declare const Editor: import("svelte").Component<Props, {}, "value">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/ImagePicker.svelte

@@ -0,0 +1,131 @@
+<!-- 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

@@ -0,0 +1,13 @@
+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/LinkPrompt.svelte

@@ -0,0 +1,42 @@
+<!-- The link field of the formatting toolbar (Ctrl+K), in an atom-forge popup: resolves with the address, '' to remove the link. -->
+<script lang="ts">
+	import { Button, Input, getPopupManager } from '@atom-forge/ui';
+	import type { Translate } from './i18n';
+
+	let { href = '', tr }: { href?: string; tr: Translate } = $props();
+	const popups = getPopupManager();
+	// svelte-ignore state_referenced_locally
+	let url = $state(href);
+	let input = $state<{ focus: () => void }>();
+	$effect(() => input?.focus());
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			popups.resolve(url.trim());
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			popups.resolve(undefined);
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="light link" {onkeydown}>
+	<Input bind:this={input} compact monospace bind:value={url} placeholder="https://…" />
+	<Button compact accent label={tr('OK')} onclick={() => popups.resolve(url.trim())} />
+	{#if href}<Button compact ghost label={tr('Remove')} onclick={() => popups.resolve('')} />{/if}
+</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/LinkPrompt.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Translate } from './i18n';
+type $$ComponentProps = {
+    href?: string;
+    tr: Translate;
+};
+declare const LinkPrompt: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkPrompt = ReturnType<typeof LinkPrompt>;
+export default LinkPrompt;

package/dist/PluginHost.svelte

@@ -0,0 +1,41 @@
+<!-- One plugin block in the editor: its view, and its fields (PropsBar). A plugin drawn in a Frame gets the fields inside
+     the frame, on its top (the Frame claims them through the context); any other gets them above its view. A container
+     gets the host's palette narrowed to its `accepts`. -->
+<script lang="ts" module>
+	import { getContext, setContext, type Snippet } from 'svelte';
+
+	const KEY = Symbol('block-fields');
+	type Host = { fields: Snippet | undefined; claimed: boolean };
+
+	/** For a frame: takes the block's fields to draw them itself; undefined when there are none (or read-only). */
+	export function claimFields(): Snippet | undefined {
+		const host = getContext<Host | undefined>(KEY);
+		if (!host) return undefined;
+		host.claimed = true;
+		return host.fields;
+	}
+</script>
+
+<script lang="ts">
+	import { narrowPalette } from './palette';
+	import type { BlockPlugin, PluginViewProps } from './types';
+
+	interface Props extends Omit<PluginViewProps, 'props' | 'blocks'> {
+		plugin: BlockPlugin;
+		props: PluginViewProps['props'];
+		blocks: PluginViewProps['blocks'];
+		fields?: Snippet;
+	}
+	let { plugin, props = $bindable(), blocks = $bindable(), readonly, palette, plugins, fields }: Props = $props();
+
+	// svelte-ignore state_referenced_locally
+	const host = $state<Host>({ fields, claimed: false });
+	setContext(KEY, host);
+	$effect.pre(() => {
+		host.fields = fields;
+	});
+</script>
+
+{#if fields && !host.claimed}{@render fields()}{/if}
+<!-- a container's nested editor offers only the blocks it accepts -->
+<plugin.view bind:props bind:blocks {readonly} palette={narrowPalette(palette, plugin.accepts)} {plugins} />

package/dist/PluginHost.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+/** For a frame: takes the block's fields to draw them itself; undefined when there are none (or read-only). */
+export declare function claimFields(): Snippet | undefined;
+import type { BlockPlugin, PluginViewProps } from './types';
+interface Props extends Omit<PluginViewProps, 'props' | 'blocks'> {
+    plugin: BlockPlugin;
+    props: PluginViewProps['props'];
+    blocks: PluginViewProps['blocks'];
+    fields?: Snippet;
+}
+declare const PluginHost: import("svelte").Component<Props, {}, "blocks" | "props">;
+type PluginHost = ReturnType<typeof PluginHost>;
+export default PluginHost;

package/dist/Preview.svelte

@@ -0,0 +1,186 @@
+<!-- Styles travel with the markup: the sites show the blocks as server-rendered HTML (see content.server.ts). -->
+<svelte:options css="injected" />
+
+<script lang="ts" module>
+	import type { StoredBlock } from './types';
+
+	const LIST = new Set(['md:ul', 'md:ol', 'md:todo']);
+
+	/** Consecutive list blocks as properly nested lists: an item one level deeper goes into the previous item. */
+	export type ListNode = { type: string; items: { block: StoredBlock; children: ListNode[] }[] };
+	export type Part = { kind: 'block'; block: StoredBlock } | { kind: 'lists'; lists: ListNode[] };
+
+	function nest(run: StoredBlock[], i: number, level: number): [ListNode[], number] {
+		const out: ListNode[] = [];
+		let cur: ListNode | null = null;
+		while (i < run.length && run[i].indent >= level) {
+			const b = run[i];
+			if (b.indent > level && cur) {
+				const [kids, next] = nest(run, i, level + 1);
+				cur.items[cur.items.length - 1].children.push(...kids);
+				i = next;
+				continue;
+			}
+			// A different list type at the same level starts a new list.
+			if (!cur || cur.type !== b.type) out.push((cur = { type: b.type, items: [] }));
+			cur.items.push({ block: b, children: [] });
+			i++;
+		}
+		return [out, i];
+	}
+
+	export function parts(blocks: StoredBlock[]): Part[] {
+		const out: Part[] = [];
+		for (let i = 0; i < blocks.length; ) {
+			if (!LIST.has(blocks[i].type)) {
+				out.push({ kind: 'block', block: blocks[i++] });
+				continue;
+			}
+			let j = i;
+			while (j < blocks.length && LIST.has(blocks[j].type)) j++;
+			const run = blocks.slice(i, j);
+			out.push({ kind: 'lists', lists: nest(run, 0, Math.min(...run.map((b) => b.indent)))[0] });
+			i = j;
+		}
+		return out;
+	}
+</script>
+
+<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. */
+		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();
+
+	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);
+</script>
+
+{#snippet list(node: ListNode)}
+	{#if node.type === 'md:ol'}
+		<ol>{@render items(node)}</ol>
+	{:else}
+		<ul class:todo={node.type === 'md:todo'}>{@render items(node)}</ul>
+	{/if}
+{/snippet}
+
+{#snippet items(node: ListNode)}
+	{#each node.items as it, n (n)}
+		<li>
+			{#if node.type === 'md:todo'}
+				<input type="checkbox" checked={!!it.block.props?.checked} disabled aria-label={tr('Done')} />
+			{/if}
+			{@html html(it.block)}
+			{#each it.children as child, c (c)}{@render list(child)}{/each}
+		</li>
+	{/each}
+{/snippet}
+
+{#snippet run(items: StoredBlock[])}
+	{#each parts(items) as part, n (n)}
+		{#if part.kind === 'lists'}
+			{#each part.lists as l, m (m)}{@render list(l)}{/each}
+		{:else}
+			{@const b = part.block}
+			{@const plugin = pluginOf(b.type)}
+			{#if b.type === 'md:p'}
+				{#if b.text}<p style:margin-left={indent(b)}>{@html html(b)}</p>{/if}
+			{:else if b.type === 'md:h1'}
+				<h1>{@html html(b)}</h1>
+			{:else if b.type === 'md:h2'}
+				<h2>{@html html(b)}</h2>
+			{:else if b.type === 'md:h3'}
+				<h3>{@html html(b)}</h3>
+			{:else if b.type === 'md:h4'}
+				<h4>{@html html(b)}</h4>
+			{:else if b.type === 'md:h5'}
+				<h5>{@html html(b)}</h5>
+			{:else if b.type === 'md:h6'}
+				<h6>{@html html(b)}</h6>
+			{:else if b.type === 'md:quote'}
+				<blockquote style:margin-left={indent(b)}><p>{@html html(b)}</p></blockquote>
+			{:else if b.type === 'md:code'}
+				{@const lang = String(b.props?.lang ?? '')}
+				<pre><code class={lang ? `language-${lang}` : undefined}>{b.text ?? ''}</code></pre>
+			{:else if b.type === 'md:hr'}
+				<hr />
+			{:else if plugin?.preview}
+				<!-- a plugin without a preview is drawn by the app's own renderer, not here -->
+				<plugin.preview props={b.props ?? {}} blocks={b.blocks ?? []} {plugins} />
+			{/if}
+		{/if}
+	{/each}
+{/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}
+</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>

package/dist/Preview.svelte.d.ts

@@ -0,0 +1,35 @@
+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;
+    items: {
+        block: StoredBlock;
+        children: ListNode[];
+    }[];
+};
+export type Part = {
+    kind: 'block';
+    block: StoredBlock;
+} | {
+    kind: 'lists';
+    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. */
+    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>;
+export default Preview;