@fuzdev/mdz 0.3.0 → 0.5.0

package/src/lib/mdz_stream_parser_table.ts

@@ -14,16 +14,16 @@
  * @module
  */
 
-import {DEV} from 'esm-env';
+import { DEV } from 'esm-env';
 
 import {
 	NEWLINE,
 	PIPE,
 	is_line_whitespace,
 	mdz_split_table_row,
-	mdz_parse_table_delimiter,
+	mdz_parse_table_delimiter
 } from './mdz_helpers.ts';
-import {MdzTableCellParser, type MdzNode, type MdzTableAlign} from './mdz.ts';
+import { MdzTableCellParser, type MdzNode, type MdzTableAlign } from './mdz.ts';
 import {
 	type MdzStreamParserState,
 	type TryResult,
@@ -33,7 +33,7 @@ import {
 	flush_text,
 	offset,
 	pop_stack_entry,
-	push_stack_entry,
+	push_stack_entry
 } from './mdz_stream_parser_state.ts';
 
 /**
@@ -71,12 +71,12 @@ export const try_table_start = (state: MdzStreamParserState, forced: boolean): T
 
 	const table_id = alloc_id(state);
 	const table_start = offset(state, start);
-	emit(state, {type: 'open', id: table_id, node_type: 'Table', start: table_start, align});
+	emit(state, { type: 'open', id: table_id, node_type: 'Table', start: table_start, align });
 	push_stack_entry(state, table_id, 'Table', table_start);
 	state.table = {
 		id: table_id,
 		item_indent: null,
-		cell_parser: new MdzTableCellParser(state.buffer),
+		cell_parser: new MdzTableCellParser(state.buffer)
 	};
 
 	emit_table_row(state, header_cells, true, start, header_end);
@@ -152,7 +152,7 @@ export const process_table_line = (state: MdzStreamParserState, forced: boolean)
 const process_table_line_in_item = (
 	state: MdzStreamParserState,
 	forced: boolean,
-	item_indent: number,
+	item_indent: number
 ): boolean => {
 	if (state.pos >= state.buffer.length) {
 		if (forced) {
@@ -204,9 +204,9 @@ const process_table_line_in_item = (
  */
 export const close_table = (state: MdzStreamParserState): void => {
 	if (!state.table) return;
-	const {item_indent} = state.table;
+	const { item_indent } = state.table;
 	const entry = pop_stack_entry(state);
-	emit(state, {type: 'close', id: entry.id, end: offset(state)});
+	emit(state, { type: 'close', id: entry.id, end: offset(state) });
 	state.table = null;
 	state.active_text_id = null;
 	if (item_indent === null) {
@@ -220,7 +220,7 @@ export const close_table = (state: MdzStreamParserState): void => {
 
 /** A recognized in-item table head: the header row's cells + the delimiter alignment. */
 export interface TableInItemHead {
-	header_cells: Array<{start: number; end: number}>;
+	header_cells: Array<{ start: number; end: number }>;
 	header_end: number;
 	align: Array<MdzTableAlign>;
 	delim_end: number;
@@ -239,9 +239,9 @@ export const match_table_in_item_head = (
 	state: MdzStreamParserState,
 	header_first: number,
 	marker_indent: number,
-	forced: boolean,
+	forced: boolean
 ): TableInItemHead | 'pending' | null => {
-	const {buffer} = state;
+	const { buffer } = state;
 	const header_end = buffer.indexOf('\n', header_first);
 	if (header_end === -1) return forced ? null : 'pending'; // header needs its newline + a delimiter beneath
 	const header_cells = mdz_split_table_row(buffer, header_first, header_end);
@@ -258,7 +258,7 @@ export const match_table_in_item_head = (
 	}
 	const align = mdz_parse_table_delimiter(buffer, dj, delim_end);
 	if (align === null || align.length !== header_cells.length) return null;
-	return {header_cells, header_end, align, delim_end};
+	return { header_cells, header_end, align, delim_end };
 };
 
 /**
@@ -273,7 +273,7 @@ export const open_table_in_item = (
 	state: MdzStreamParserState,
 	header_first: number,
 	marker_indent: number,
-	head: TableInItemHead,
+	head: TableInItemHead
 ): void => {
 	const table_id = alloc_id(state);
 	const table_start = offset(state, header_first);
@@ -282,13 +282,13 @@ export const open_table_in_item = (
 		id: table_id,
 		node_type: 'Table',
 		start: table_start,
-		align: head.align,
+		align: head.align
 	});
 	push_stack_entry(state, table_id, 'Table', table_start);
 	state.table = {
 		id: table_id,
 		item_indent: marker_indent,
-		cell_parser: new MdzTableCellParser(state.buffer),
+		cell_parser: new MdzTableCellParser(state.buffer)
 	};
 	emit_table_row(state, head.header_cells, true, header_first, head.header_end);
 	// leave the cursor on the delimiter's newline (or EOF) — the in-item body-row
@@ -301,14 +301,14 @@ export const open_table_in_item = (
 /** Emit one table row: open, each cell, close. */
 const emit_table_row = (
 	state: MdzStreamParserState,
-	cells: Array<{start: number; end: number}>,
+	cells: Array<{ start: number; end: number }>,
 	header: boolean,
 	row_start: number,
-	row_end: number,
+	row_end: number
 ): void => {
 	const row_id = alloc_id(state);
 	const row_off = offset(state, row_start);
-	emit(state, {type: 'open', id: row_id, node_type: 'TableRow', start: row_off, header});
+	emit(state, { type: 'open', id: row_id, node_type: 'TableRow', start: row_off, header });
 	push_stack_entry(state, row_id, 'TableRow', row_off);
 	// one lexer/parser shared across the whole table rather than allocated per
 	// row (or per cell) — rebound per row because the buffer string changes
@@ -319,7 +319,7 @@ const emit_table_row = (
 		emit_table_cell(state, cell_parser, cell.start, cell.end);
 	}
 	pop_stack_entry(state);
-	emit(state, {type: 'close', id: row_id, end: offset(state, row_end)});
+	emit(state, { type: 'close', id: row_id, end: offset(state, row_end) });
 	state.active_text_id = null;
 };
 
@@ -331,15 +331,15 @@ const emit_table_cell = (
 	state: MdzStreamParserState,
 	cell_parser: MdzTableCellParser,
 	cell_start: number,
-	cell_end: number,
+	cell_end: number
 ): void => {
 	const cell_id = alloc_id(state);
 	const cell_off = offset(state, cell_start);
-	emit(state, {type: 'open', id: cell_id, node_type: 'TableCell', start: cell_off});
+	emit(state, { type: 'open', id: cell_id, node_type: 'TableCell', start: cell_off });
 	push_stack_entry(state, cell_id, 'TableCell', cell_off);
 	emit_inline_nodes(state, cell_parser.parse(cell_start, cell_end));
 	pop_stack_entry(state);
-	emit(state, {type: 'close', id: cell_id, end: offset(state, cell_end)});
+	emit(state, { type: 'close', id: cell_id, end: offset(state, cell_end) });
 	state.active_text_id = null;
 };
 
@@ -357,7 +357,7 @@ const emit_inline_nodes = (state: MdzStreamParserState, nodes: Array<MdzNode>):
 					content: node.content,
 					text_type: 'Text',
 					start: offset(state, node.start),
-					end: offset(state, node.end),
+					end: offset(state, node.end)
 				});
 				break;
 			case 'Code':
@@ -367,7 +367,7 @@ const emit_inline_nodes = (state: MdzStreamParserState, nodes: Array<MdzNode>):
 					content: node.content,
 					text_type: 'Code',
 					start: offset(state, node.start),
-					end: offset(state, node.end),
+					end: offset(state, node.end)
 				});
 				break;
 			case 'Bold':
@@ -375,17 +375,17 @@ const emit_inline_nodes = (state: MdzStreamParserState, nodes: Array<MdzNode>):
 			case 'Strikethrough': {
 				const id = alloc_id(state);
 				const s = offset(state, node.start);
-				emit(state, {type: 'open', id, node_type: node.type, start: s});
+				emit(state, { type: 'open', id, node_type: node.type, start: s });
 				push_stack_entry(state, id, node.type, s);
 				emit_inline_nodes(state, node.children);
 				pop_stack_entry(state);
-				emit(state, {type: 'close', id, end: offset(state, node.end)});
+				emit(state, { type: 'close', id, end: offset(state, node.end) });
 				break;
 			}
 			case 'Link': {
 				const id = alloc_id(state);
 				const s = offset(state, node.start);
-				emit(state, {type: 'open', id, node_type: 'Link', start: s});
+				emit(state, { type: 'open', id, node_type: 'Link', start: s });
 				push_stack_entry(state, id, 'Link', s);
 				emit_inline_nodes(state, node.children);
 				pop_stack_entry(state);
@@ -394,7 +394,7 @@ const emit_inline_nodes = (state: MdzStreamParserState, nodes: Array<MdzNode>):
 					id,
 					end: offset(state, node.end),
 					reference: node.reference,
-					link_type: node.link_type,
+					link_type: node.link_type
 				});
 				break;
 			}
@@ -402,11 +402,18 @@ const emit_inline_nodes = (state: MdzStreamParserState, nodes: Array<MdzNode>):
 			case 'Component': {
 				const id = alloc_id(state);
 				const s = offset(state, node.start);
-				emit(state, {type: 'open', id, node_type: node.type, start: s, name: node.name});
+				emit(state, {
+					type: 'open',
+					id,
+					node_type: node.type,
+					start: s,
+					name: node.name,
+					attributes: node.attributes
+				});
 				push_stack_entry(state, id, node.type, s, '', node.name);
 				emit_inline_nodes(state, node.children);
 				pop_stack_entry(state);
-				emit(state, {type: 'close', id, end: offset(state, node.end)});
+				emit(state, { type: 'close', id, end: offset(state, node.end) });
 				break;
 			}
 			// cells are inline-only (lexed via `lex_table_cell`); a block node here

package/src/lib/mdz_stream_parser_text.ts

@@ -15,15 +15,15 @@ import {
 	TEXT_CLASS_URL,
 	TEXT_SCAN_CLASS,
 	is_word_char,
-	match_url_prefix_case_insensitive,
+	match_url_prefix_case_insensitive
 } from './mdz_helpers.ts';
 import {
 	type MdzStreamParserState,
 	accumulate_text,
 	ensure_paragraph,
-	offset,
+	offset
 } from './mdz_stream_parser_state.ts';
-import {mdz_debug_work} from './mdz_debug_work.ts';
+import { mdz_debug_work } from './mdz_debug_work.ts';
 
 /**
  * Consume a delimiter at the current position as literal text — the shared

package/src/lib/mdz_stream_parser_url.ts

@@ -23,7 +23,7 @@ import {
 	is_valid_path_char,
 	is_word_char,
 	match_url_prefix_case_insensitive,
-	mdz_trim_url_punctuation,
+	mdz_trim_url_punctuation
 } from './mdz_helpers.ts';
 import {
 	type MdzStreamParserState,
@@ -33,7 +33,7 @@ import {
 	emit,
 	ensure_paragraph,
 	flush_text,
-	offset,
+	offset
 } from './mdz_stream_parser_state.ts';
 
 const HTTPS_PREFIX = 'https://';
@@ -136,7 +136,7 @@ export const try_auto_path_relative = (state: MdzStreamParserState, forced = fal
  */
 export const start_pending_url = (
 	state: MdzStreamParserState,
-	link_type: 'external' | 'internal',
+	link_type: 'external' | 'internal'
 ): void => {
 	flush_text(state);
 	ensure_paragraph(state);
@@ -147,7 +147,7 @@ export const start_pending_url = (
 		link_type,
 		confirmed: true,
 		viable_https: false,
-		viable_http: false,
+		viable_http: false
 	};
 	// don't advance pos — URL chars start at current position, handled by process_url_content
 };
@@ -169,7 +169,7 @@ export const start_speculative_url = (state: MdzStreamParserState): void => {
 		link_type: 'external',
 		confirmed: false,
 		viable_https: true,
-		viable_http: true,
+		viable_http: true
 	};
 };
 
@@ -313,7 +313,7 @@ export const complete_pending_url = (state: MdzStreamParserState): void => {
 			start: pu.start,
 			end: url_end,
 			trim_end,
-			trim_id,
+			trim_id
 		});
 		state.active_text_id = trim_id;
 	} else {
@@ -325,7 +325,7 @@ export const complete_pending_url = (state: MdzStreamParserState): void => {
 			reference,
 			link_type: pu.link_type,
 			start: pu.start,
-			end: url_end,
+			end: url_end
 		});
 		state.active_text_id = null;
 	}
@@ -339,7 +339,7 @@ export const complete_pending_url = (state: MdzStreamParserState): void => {
  */
 export const scan_auto_link_forced = (
 	state: MdzStreamParserState,
-	link_type: 'external' | 'internal',
+	link_type: 'external' | 'internal'
 ): TryResult => {
 	let i = state.pos;
 	while (i < state.buffer.length) {
@@ -366,7 +366,7 @@ export const scan_auto_link_forced = (
 	ensure_paragraph(state);
 
 	const link_id = alloc_id(state);
-	emit(state, {type: 'open', id: link_id, node_type: 'Link', start: link_start});
+	emit(state, { type: 'open', id: link_id, node_type: 'Link', start: link_start });
 	const text_id = alloc_id(state);
 	emit(state, {
 		type: 'text',
@@ -374,9 +374,9 @@ export const scan_auto_link_forced = (
 		content: reference,
 		text_type: 'Text',
 		start: link_start,
-		end: link_end,
+		end: link_end
 	});
-	emit(state, {type: 'close', id: link_id, end: link_end, reference, link_type});
+	emit(state, { type: 'close', id: link_id, end: link_end, reference, link_type });
 
 	state.active_text_id = null;
 	state.column += end_pos - state.pos;

package/src/lib/mdz_stream_state.svelte.ts

@@ -8,10 +8,10 @@
  * @module
  */
 
-import {DEV} from 'esm-env';
+import { DEV } from 'esm-env';
 
-import type {MdzNodeId, MdzNodeType, MdzOpcode} from './mdz_opcodes.ts';
-import type {MdzTableAlign} from './mdz.ts';
+import type { MdzNodeId, MdzNodeType, MdzOpcode } from './mdz_opcodes.ts';
+import type { MdzAttribute, MdzTableAlign } from './mdz.ts';
 
 /**
  * A reactive node in the stream renderer tree.
@@ -27,6 +27,8 @@ export class MdzStreamNode {
 	reference?: string = $state();
 	link_type?: 'external' | 'internal' = $state();
 	name?: string;
+	/** Parsed tag attributes (Element/Component nodes); known at open, never mutated, so plain not `$state`. */
+	attributes?: Array<MdzAttribute>;
 	lang?: string | null;
 	heading_id?: string = $state();
 	ordered?: boolean;
@@ -76,7 +78,7 @@ export class MdzStreamState {
 		const parent = this.#nodes.get(this.#stack[stack_idx - 1]!);
 		if (DEV && !parent) {
 			throw new Error(
-				`MdzStreamState: parent id ${this.#stack[stack_idx - 1]} on stack but missing from nodes`,
+				`MdzStreamState: parent id ${this.#stack[stack_idx - 1]} on stack but missing from nodes`
 			);
 		}
 		return parent ? parent.children : this.root;
@@ -99,12 +101,13 @@ export class MdzStreamState {
 			case 'open': {
 				if (DEV && this.#nodes.has(opcode.id)) {
 					throw new Error(
-						`MdzStreamState: duplicate open for id ${opcode.id} (node_type '${opcode.node_type}')`,
+						`MdzStreamState: duplicate open for id ${opcode.id} (node_type '${opcode.node_type}')`
 					);
 				}
 				const node = new MdzStreamNode(opcode.id, opcode.node_type);
 				if (opcode.level !== undefined) node.level = opcode.level;
 				if (opcode.name !== undefined) node.name = opcode.name;
+				if (opcode.attributes !== undefined) node.attributes = opcode.attributes;
 				if (opcode.lang !== undefined) node.lang = opcode.lang;
 				if (opcode.ordered !== undefined) node.ordered = opcode.ordered;
 				if (opcode.start_number !== undefined) node.start_number = opcode.start_number;
@@ -168,7 +171,7 @@ export class MdzStreamState {
 			case 'text': {
 				if (DEV && this.#nodes.has(opcode.id)) {
 					throw new Error(
-						`MdzStreamState: duplicate text for id ${opcode.id} (text_type '${opcode.text_type}')`,
+						`MdzStreamState: duplicate text for id ${opcode.id} (text_type '${opcode.text_type}')`
 					);
 				}
 				const node = new MdzStreamNode(opcode.id, opcode.text_type);
@@ -215,7 +218,7 @@ export class MdzStreamState {
 			case 'void': {
 				if (DEV && this.#nodes.has(opcode.id)) {
 					throw new Error(
-						`MdzStreamState: duplicate void for id ${opcode.id} (node_type '${opcode.node_type}')`,
+						`MdzStreamState: duplicate void for id ${opcode.id} (node_type '${opcode.node_type}')`
 					);
 				}
 				const node = new MdzStreamNode(opcode.id, opcode.node_type);
@@ -255,7 +258,7 @@ export class MdzStreamState {
 				if (node_idx === -1) {
 					if (DEV) {
 						throw new Error(
-							`MdzStreamState: revert for id ${opcode.id} but node not found in parent's children`,
+							`MdzStreamState: revert for id ${opcode.id} but node not found in parent's children`
 						);
 					}
 					break;

package/src/lib/mdz_to_svelte.ts

@@ -8,12 +8,39 @@
  * @module
  */
 
-import {UnreachableError} from '@fuzdev/fuz_util/error.ts';
-import {escape_svelte_text} from '@fuzdev/fuz_util/svelte_preprocess_helpers.ts';
-import {escape_js_string} from '@fuzdev/fuz_util/string.ts';
-
-import type {MdzNode, MdzNodeTableRow} from './mdz.ts';
-import {mdz_is_void_element, mdz_classify_link} from './mdz_helpers.ts';
+import { UnreachableError } from '@fuzdev/fuz_util/error.ts';
+import { escape_svelte_text } from '@fuzdev/fuz_util/svelte_preprocess_helpers.ts';
+import { escape_js_string } from '@fuzdev/fuz_util/string.ts';
+
+import type { MdzNode, MdzNodeTableRow } from './mdz.ts';
+import type { MdzComponentProps } from './mdz_contexts.ts';
+import {
+	mdz_is_void_element,
+	mdz_classify_link,
+	mdz_filter_element_attributes,
+	mdz_filter_component_attributes,
+	ALLOWED_ELEMENT_ATTRIBUTES
+} from './mdz_helpers.ts';
+
+// emits parsed attributes as Svelte markup, matching the file's `name={'...'}`
+// idiom for string attrs. Booleans emit as `name={true}`, not bare — a bare
+// attribute compiles to `name=""`, while the runtime views spread `true`, which
+// Svelte renders per attribute (`aria-hidden="true"`); the expression form
+// keeps precompiled and runtime output identical. Each entry gets a leading
+// space, so the result splices straight after the tag name.
+/**
+ * A build-time component registry entry: an import path, or an import path
+ * plus the attribute names passed as props (see `MdzComponentProps`).
+ */
+export type MdzComponentImport = string | { path: string; props?: MdzComponentProps };
+
+const format_attributes = (entries: Array<[string, string | true]>): string => {
+	let out = '';
+	for (const [name, value] of entries) {
+		out += value === true ? ` ${name}={true}` : ` ${name}={'${escape_js_string(value)}'}`;
+	}
+	return out;
+};
 
 /**
  * Result of converting `MdzNode` arrays to Svelte markup.
@@ -23,7 +50,7 @@ export interface MdzToSvelteResult {
 	markup: string;
 
 	/** Required imports: `Map<local_name, {path, kind}>`. */
-	imports: Map<string, {path: string; kind: 'default' | 'named'}>;
+	imports: Map<string, { path: string; kind: 'default' | 'named' }>;
 
 	/** Whether content references unconfigured Component or Element tags. */
 	has_unconfigured_tags: boolean;
@@ -38,10 +65,13 @@ const component_local_name = (import_path: string): string =>
  */
 export interface MdzToSvelteOptions {
 	/**
-	 * Component name to import path mapping (e.g., `{Alert: '$lib/Alert.svelte'}`).
+	 * Component name to import mapping, mirroring the runtime `MdzComponents`
+	 * registry: a bare import path receives no attributes
+	 * (`{Note: '#lib/Note.svelte'}`), and the config form names the attributes
+	 * passed as props (`{Alert: {path: '#lib/Alert.svelte', props: ['status']}}`).
 	 * If content references a component not in this map, `has_unconfigured_tags` is set.
 	 */
-	components: Record<string, string>;
+	components: Record<string, MdzComponentImport>;
 
 	/**
 	 * Allowed HTML elements (e.g., `{aside: true, details: true}`).
@@ -53,8 +83,9 @@ export interface MdzToSvelteOptions {
 
 	/**
 	 * Base path for resolving relative links (e.g., `'/docs/usage/'`).
-	 * When provided, relative references (`./`, `../`) are resolved to absolute paths
-	 * and passed through `resolve()`. Trailing slash recommended.
+	 * When provided, relative references (`./`, `../`) are resolved against it and,
+	 * like absolute references, passed through `resolve()` in its pathname form.
+	 * Trailing slash recommended.
 	 */
 	base?: string;
 
@@ -85,10 +116,10 @@ export interface MdzToSvelteOptions {
  */
 export const mdz_to_svelte = (
 	nodes: Array<MdzNode>,
-	options: MdzToSvelteOptions,
+	options: MdzToSvelteOptions
 ): MdzToSvelteResult => {
-	const {components, elements, base, code_component_import, codeblock_component_import} = options;
-	const imports: Map<string, {path: string; kind: 'default' | 'named'}> = new Map();
+	const { components, elements, base, code_component_import, codeblock_component_import } = options;
+	const imports: Map<string, { path: string; kind: 'default' | 'named' }> = new Map();
 	let has_unconfigured_tags = false;
 
 	const render_nodes = (children: Array<MdzNode>): string => {
@@ -105,7 +136,7 @@ export const mdz_to_svelte = (
 					return `<code>${escape_svelte_text(node.content)}</code>`;
 				}
 				const name = component_local_name(code_component_import);
-				imports.set(name, {path: code_component_import, kind: 'default'});
+				imports.set(name, { path: code_component_import, kind: 'default' });
 				return `<${name} reference={'${escape_js_string(node.content)}'} />`;
 			}
 
@@ -116,7 +147,7 @@ export const mdz_to_svelte = (
 					return `<pre><code>${escape_svelte_text(node.content)}</code></pre>`;
 				}
 				const name = component_local_name(codeblock_component_import);
-				imports.set(name, {path: codeblock_component_import, kind: 'default'});
+				imports.set(name, { path: codeblock_component_import, kind: 'default' });
 				return `<${name} ${lang_attr} content={'${escape_js_string(node.content)}'} />`;
 			}
 
@@ -139,8 +170,8 @@ export const mdz_to_svelte = (
 				const link = mdz_classify_link(node.reference, node.link_type, base);
 				if (link.kind === 'unsafe') return children_markup;
 				if (link.kind === 'resolve') {
-					imports.set('resolve', {path: '$app/paths', kind: 'named'});
-					return `<a href={resolve('${escape_js_string(link.href)}')}>${children_markup}</a>`;
+					imports.set('resolve', { path: '$app/paths', kind: 'named' });
+					return `<a href={resolve('${escape_js_string(link.path)}')}>${children_markup}</a>`;
 				}
 				if (link.kind === 'external') {
 					return `<a href={'${escape_js_string(link.href)}'} target="_blank" rel="noopener">${children_markup}</a>`;
@@ -167,7 +198,7 @@ export const mdz_to_svelte = (
 				return `<blockquote>${render_nodes(node.children)}</blockquote>`;
 
 			case 'Table': {
-				const {align} = node;
+				const { align } = node;
 				const render_row = (row: MdzNodeTableRow, tag: 'th' | 'td'): string => {
 					let cells = '';
 					// normalize to the column count: pad short rows, ignore extra cells
@@ -208,25 +239,38 @@ export const mdz_to_svelte = (
 			}
 
 			case 'Element': {
-				if (elements[node.name] === undefined) {
+				if (elements[node.name] !== true) {
 					has_unconfigured_tags = true;
 					return '';
 				}
+				// filter via the SAME helper the node views use, so precompiled and
+				// runtime output stay identical (its DEV-warn fires at build time too)
+				const attrs_str = format_attributes(
+					Object.entries(
+						mdz_filter_element_attributes(node.name, node.attributes, ALLOWED_ELEMENT_ATTRIBUTES)
+					)
+				);
 				if (mdz_is_void_element(node.name)) {
 					// void elements cannot have content — any parsed children are dropped
-					return `<${node.name} />`;
+					return `<${node.name}${attrs_str} />`;
 				}
-				return `<${node.name}>${render_nodes(node.children)}</${node.name}>`;
+				return `<${node.name}${attrs_str}>${render_nodes(node.children)}</${node.name}>`;
 			}
 
 			case 'Component': {
-				const import_path = components[node.name];
-				if (!import_path) {
+				const entry = components[node.name];
+				if (!entry) {
 					has_unconfigured_tags = true;
 					return '';
 				}
-				imports.set(node.name, {path: import_path, kind: 'default'});
-				return `<${node.name}>${render_nodes(node.children)}</${node.name}>`;
+				const { path, props } =
+					typeof entry === 'string' ? { path: entry, props: undefined } : entry;
+				imports.set(node.name, { path, kind: 'default' });
+				// filter via the SAME helper the node views use
+				const attrs_str = format_attributes(
+					Object.entries(mdz_filter_component_attributes(node.name, node.attributes, props))
+				);
+				return `<${node.name}${attrs_str}>${render_nodes(node.children)}</${node.name}>`;
 			}
 
 			default:
@@ -235,5 +279,5 @@ export const mdz_to_svelte = (
 	};
 
 	const markup = render_nodes(nodes);
-	return {markup, imports, has_unconfigured_tags};
+	return { markup, imports, has_unconfigured_tags };
 };