@markii/html 0.6.0

package/dist/components/badge.d.ts

@@ -0,0 +1,9 @@
+import type { HtmlComponent } from '../registry.js';
+export type BadgeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * `:badge[New]{variant=success}` — a status pill for an inline text
+ * directive. Unknown/missing `variant` falls back to `neutral` rather than
+ * throwing. Matches `@markii/react`'s `Badge` markup byte-for-byte so one
+ * stylesheet covers both renderers.
+ */
+export declare const Badge: HtmlComponent;

package/dist/components/badge.js

@@ -0,0 +1,24 @@
+const BADGE_VARIANTS = [
+    'neutral',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+const DEFAULT_VARIANT = 'neutral';
+function isBadgeVariant(value) {
+    return BADGE_VARIANTS.includes(value);
+}
+/**
+ * `:badge[New]{variant=success}` — a status pill for an inline text
+ * directive. Unknown/missing `variant` falls back to `neutral` rather than
+ * throwing. Matches `@markii/react`'s `Badge` markup byte-for-byte so one
+ * stylesheet covers both renderers.
+ */
+export const Badge = (attributes, childrenHtml) => {
+    const rawVariant = attributes.variant ?? DEFAULT_VARIANT;
+    const variant = isBadgeVariant(rawVariant)
+        ? rawVariant
+        : DEFAULT_VARIANT;
+    return `<span class="mk-badge mk-badge--${variant}">${childrenHtml}</span>`;
+};

package/dist/components/callout.d.ts

@@ -0,0 +1,10 @@
+import type { HtmlComponent } from '../registry.js';
+export type CalloutType = 'info' | 'warning' | 'danger';
+/**
+ * `:::callout{type=info|warning|danger title="..."}` — a colored box for an
+ * aside, warning, or danger note. Unknown/missing `type` falls back to
+ * `info` rather than throwing. Matches `@markii/react`'s `Callout` markup
+ * byte-for-byte so one stylesheet covers both renderers. No outer margin:
+ * the document stylesheet owns spacing between this and its siblings.
+ */
+export declare const Callout: HtmlComponent;

package/dist/components/callout.js

@@ -0,0 +1,29 @@
+const CALLOUT_TYPES = ['info', 'warning', 'danger'];
+const CALLOUT_ICONS = {
+    info: 'ℹ',
+    warning: '▲',
+    danger: '✕',
+};
+function isCalloutType(value) {
+    return CALLOUT_TYPES.includes(value);
+}
+/**
+ * `:::callout{type=info|warning|danger title="..."}` — a colored box for an
+ * aside, warning, or danger note. Unknown/missing `type` falls back to
+ * `info` rather than throwing. Matches `@markii/react`'s `Callout` markup
+ * byte-for-byte so one stylesheet covers both renderers. No outer margin:
+ * the document stylesheet owns spacing between this and its siblings.
+ */
+export const Callout = (attributes, childrenHtml, ctx) => {
+    const rawType = attributes.type ?? 'info';
+    const type = isCalloutType(rawType) ? rawType : 'info';
+    const title = attributes.title ?? null;
+    const titleHtml = title
+        ? `<span class="mk-callout__title">${ctx.esc(title)}</span>`
+        : '';
+    return (`<div class="mk-callout mk-callout--${type}" role="note">` +
+        `<div class="mk-callout__header">` +
+        `<span class="mk-callout__icon" aria-hidden="true">${CALLOUT_ICONS[type]}</span>` +
+        `${titleHtml}</div>` +
+        `<div class="mk-callout__body">${childrenHtml}</div></div>`);
+};

package/dist/components/card.d.ts

@@ -0,0 +1,9 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `:::card{title="..."} ... :::` — a titled panel. `title` is optional; the
+ * title row is omitted entirely (not rendered empty) when absent. Matches
+ * `@markii/react`'s `Card` markup byte-for-byte so one stylesheet covers
+ * both renderers. No outer margin: the document stylesheet owns spacing
+ * between this and its siblings.
+ */
+export declare const Card: HtmlComponent;

package/dist/components/card.js

@@ -0,0 +1,15 @@
+/**
+ * `:::card{title="..."} ... :::` — a titled panel. `title` is optional; the
+ * title row is omitted entirely (not rendered empty) when absent. Matches
+ * `@markii/react`'s `Card` markup byte-for-byte so one stylesheet covers
+ * both renderers. No outer margin: the document stylesheet owns spacing
+ * between this and its siblings.
+ */
+export const Card = (attributes, childrenHtml, ctx) => {
+    const title = attributes.title ?? null;
+    const titleHtml = title
+        ? `<div class="mk-card__title">${ctx.esc(title)}</div>`
+        : '';
+    return (`<div class="mk-card">${titleHtml}` +
+        `<div class="mk-card__body">${childrenHtml}</div></div>`);
+};

package/dist/components/cell.d.ts

@@ -0,0 +1,9 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `:::cell ... :::` — a transparent grouping container whose ONLY job is
+ * letting several blocks count as ONE cell of `:::row`. Matches
+ * `@markii/react`'s `Cell` markup byte-for-byte: a plain `<div class="mk-cell">`
+ * with no look of its own (no border, background, padding, or outer margin).
+ * Deliberately never reads `attributes`, matching the React component.
+ */
+export declare const Cell: HtmlComponent;

package/dist/components/cell.js

@@ -0,0 +1,10 @@
+/**
+ * `:::cell ... :::` — a transparent grouping container whose ONLY job is
+ * letting several blocks count as ONE cell of `:::row`. Matches
+ * `@markii/react`'s `Cell` markup byte-for-byte: a plain `<div class="mk-cell">`
+ * with no look of its own (no border, background, padding, or outer margin).
+ * Deliberately never reads `attributes`, matching the React component.
+ */
+export const Cell = (_attributes, childrenHtml) => {
+    return `<div class="mk-cell">${childrenHtml}</div>`;
+};

package/dist/components/chart.d.ts

@@ -0,0 +1,15 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `::chart{kind=line values="1,3,2,5"}` — a minimal hand-rolled inline SVG
+ * chart (no chart library; the SVG is a plain string built by this module).
+ * Data binding (§8): a bound `data` array of numbers (or `{value}` objects)
+ * takes priority over the static `values=` attribute; a numeric-only,
+ * defensively-filtered, capped series is what ever reaches the geometry
+ * math. All plotted values are numbers formatted as plain digits — no
+ * user-controlled text is ever interpolated into the SVG markup.
+ * Missing/error binding with no static fallback renders a small neutral
+ * empty state rather than a broken or empty `<svg>`. Never throws.
+ *
+ * Markup and class names match `@markii/react`'s `Chart` byte-for-byte.
+ */
+export declare const Chart: HtmlComponent;

package/dist/components/chart.js

@@ -0,0 +1,158 @@
+import { safeRead } from '../resolve.js';
+import { dataStateClassName, failureTitle } from '../failure-presentation.js';
+const CHART_KINDS = ['line', 'bar'];
+function isChartKind(value) {
+    return CHART_KINDS.includes(value);
+}
+const DEFAULT_KIND = 'line';
+const DEFAULT_WIDTH = 240;
+const DEFAULT_HEIGHT = 60;
+const PADDING = 4;
+/**
+ * Hard cap on rendered points, independent of source. A hostile or merely
+ * huge `data` array must not translate into thousands of SVG nodes.
+ */
+const MAX_POINTS = 200;
+/** Clamps `value` into `[0, 1]`; a non-finite input maps to the neutral mid-point `0.5`. */
+function clamp01(value) {
+    if (!Number.isFinite(value))
+        return 0.5;
+    if (value < 0)
+        return 0;
+    if (value > 1)
+        return 1;
+    return value;
+}
+/** Returns `value` if finite, otherwise `fallback`. Last line of defense so no `NaN`/`Infinity` ever reaches emitted SVG markup. */
+function safeCoord(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/** Parses a numeric string strictly: empty/whitespace-only text is treated as non-numeric. */
+function parseNumericString(raw) {
+    const trimmed = raw.trim();
+    if (trimmed === '')
+        return undefined;
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+/** Extracts one numeric point from an unknown array entry: a finite number as-is, or a plain object's finite `.value` field. */
+function coercePoint(entry) {
+    if (typeof entry === 'number') {
+        return Number.isFinite(entry) ? entry : undefined;
+    }
+    if (typeof entry === 'string') {
+        return parseNumericString(entry);
+    }
+    if (entry !== null && typeof entry === 'object' && !Array.isArray(entry)) {
+        const value = entry.value;
+        if (typeof value === 'number' && Number.isFinite(value))
+            return value;
+        if (typeof value === 'string')
+            return parseNumericString(value);
+    }
+    return undefined;
+}
+/**
+ * Builds the numeric point series to plot, a bound `data` array taking
+ * priority over a static `values=` attribute. MAY THROW for a hostile bound
+ * value — guarded at the call site via `safeRead`.
+ */
+function resolvePoints(data, dataStatus, rawValues) {
+    if (dataStatus !== 'missing' &&
+        dataStatus !== 'error' &&
+        Array.isArray(data)) {
+        const points = [];
+        for (const entry of data) {
+            const point = coercePoint(entry);
+            if (point !== undefined)
+                points.push(point);
+            if (points.length >= MAX_POINTS)
+                break;
+        }
+        return points;
+    }
+    if (rawValues) {
+        const points = [];
+        for (const token of rawValues.split(',')) {
+            const point = coercePoint(token.trim());
+            if (point !== undefined)
+                points.push(point);
+            if (points.length >= MAX_POINTS)
+                break;
+        }
+        return points;
+    }
+    return [];
+}
+/**
+ * Scales `points` into `[PADDING, width - PADDING] x [PADDING, height - PADDING]`
+ * SVG coordinates, flat series mapping to the vertical mid-line.
+ */
+function scalePoints(points, width, height) {
+    const min = Math.min(...points);
+    const max = Math.max(...points);
+    const range = max - min;
+    const innerWidth = Math.max(width - PADDING * 2, 0);
+    const innerHeight = Math.max(height - PADDING * 2, 0);
+    const step = points.length > 1 ? innerWidth / (points.length - 1) : 0;
+    return points.map((value, index) => {
+        const x = points.length > 1 ? PADDING + step * index : width / 2;
+        const normalized = Number.isFinite(range) && range > 0
+            ? clamp01((value - min) / range)
+            : 0.5;
+        const y = PADDING + innerHeight * (1 - normalized);
+        return { x: safeCoord(x, width / 2), y: safeCoord(y, height / 2) };
+    });
+}
+/**
+ * `::chart{kind=line values="1,3,2,5"}` — a minimal hand-rolled inline SVG
+ * chart (no chart library; the SVG is a plain string built by this module).
+ * Data binding (§8): a bound `data` array of numbers (or `{value}` objects)
+ * takes priority over the static `values=` attribute; a numeric-only,
+ * defensively-filtered, capped series is what ever reaches the geometry
+ * math. All plotted values are numbers formatted as plain digits — no
+ * user-controlled text is ever interpolated into the SVG markup.
+ * Missing/error binding with no static fallback renders a small neutral
+ * empty state rather than a broken or empty `<svg>`. Never throws.
+ *
+ * Markup and class names match `@markii/react`'s `Chart` byte-for-byte.
+ */
+export const Chart = (attributes, _childrenHtml, ctx) => {
+    const { data, dataStatus, dataError, dataFailureKind } = ctx;
+    const rawKind = attributes.kind ?? DEFAULT_KIND;
+    const kind = isChartKind(rawKind) ? rawKind : DEFAULT_KIND;
+    const width = DEFAULT_WIDTH;
+    const height = DEFAULT_HEIGHT;
+    const bound = safeRead(() => resolvePoints(data, dataStatus, attributes.values), () => resolvePoints(undefined, 'missing', attributes.values));
+    const points = bound.fields;
+    const title = failureTitle(dataError ?? bound.fault, dataFailureKind);
+    const titleAttr = title ? ` title="${ctx.esc(title)}"` : '';
+    if (points.length === 0) {
+        const className = dataStateClassName('mk-chart', dataStatus, dataFailureKind, ['mk-chart--empty']);
+        return (`<div class="${className}"${titleAttr} role="img" aria-label="chart: no data" ` +
+            `style="width: ${String(width)}px; height: ${String(height)}px">no data</div>`);
+    }
+    const scaled = scalePoints(points, width, height);
+    const label = `${kind} chart, ${String(points.length)} point${points.length === 1 ? '' : 's'}`;
+    const className = dataStateClassName('mk-chart', dataStatus, dataFailureKind);
+    const titleEl = title ? `<title>${ctx.esc(title)}</title>` : '';
+    const body = kind === 'line'
+        ? `<polyline class="mk-chart__line" points="${scaled
+            .map((p) => `${String(safeCoord(p.x, 0))},${String(safeCoord(p.y, 0))}`)
+            .join(' ')}" />`
+        : scaled
+            .map((p) => {
+            const barWidth = safeCoord(scaled.length > 1
+                ? Math.max((width - PADDING * 2) / scaled.length - 2, 1)
+                : Math.max(width - PADDING * 2, 1), 1);
+            const x = safeCoord(p.x - barWidth / 2, 0);
+            const y = safeCoord(p.y, 0);
+            const barHeight = safeCoord(Math.max(height - PADDING - y, 0), 0);
+            return (`<rect class="mk-chart__bar" x="${String(x)}" y="${String(y)}" ` +
+                `width="${String(barWidth)}" height="${String(barHeight)}" />`);
+        })
+            .join('');
+    return (`<svg class="${className}" viewBox="0 0 ${String(width)} ${String(height)}" ` +
+        `width="${String(width)}" height="${String(height)}" role="img" aria-label="${ctx.esc(label)}">` +
+        `${titleEl}${body}</svg>`);
+};

package/dist/components/details.d.ts

@@ -0,0 +1,10 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `:::details{title="..." open} ... :::` — a collapsible disclosure, folded
+ * by default. `open` is a bare attribute (present -> starts expanded); any
+ * value it carries is irrelevant. Matches `@markii/react`'s `Details`
+ * markup byte-for-byte so one stylesheet covers both renderers. No outer
+ * margin: the document stylesheet owns spacing between this and its
+ * siblings.
+ */
+export declare const Details: HtmlComponent;

package/dist/components/details.js

@@ -0,0 +1,16 @@
+const DEFAULT_TITLE = 'Details';
+/**
+ * `:::details{title="..." open} ... :::` — a collapsible disclosure, folded
+ * by default. `open` is a bare attribute (present -> starts expanded); any
+ * value it carries is irrelevant. Matches `@markii/react`'s `Details`
+ * markup byte-for-byte so one stylesheet covers both renderers. No outer
+ * margin: the document stylesheet owns spacing between this and its
+ * siblings.
+ */
+export const Details = (attributes, childrenHtml, ctx) => {
+    const title = attributes.title ?? DEFAULT_TITLE;
+    const open = Object.hasOwn(attributes, 'open');
+    return (`<details class="mk-details"${open ? ' open' : ''}>` +
+        `<summary class="mk-details__summary">${ctx.esc(title)}</summary>` +
+        `<div class="mk-details__body">${childrenHtml}</div></details>`);
+};

package/dist/components/figure.d.ts

@@ -0,0 +1,18 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `:::figure{src="..." alt="..."} caption markdown :::` — an image with a
+ * rich (markdown) caption. `src` is required; a missing `src` renders no
+ * image at all (the caption still renders, matching the graceful-
+ * degradation spirit of the unknown-directive fallback rather than
+ * throwing).
+ *
+ * Security: `src` is a directive *attribute*, handed to this component as a
+ * raw string and put straight into `<img src>` — that assignment BYPASSES
+ * `@markii/core`'s `to-hast.ts` URL sanitizer, which only walks the hast
+ * tree produced from ordinary markdown links/images. This component closes
+ * that gap by running `src` through `@markii/core`'s own `isSafeUrl` (the
+ * exact same allowlist check the sanitizer uses) and dropping the image
+ * entirely when it fails, rather than re-implementing URL-scheme parsing
+ * here. Matches `@markii/react`'s `Figure` markup byte-for-byte.
+ */
+export declare const Figure: HtmlComponent;

package/dist/components/figure.js

@@ -0,0 +1,28 @@
+import { isSafeUrl } from '@markii/core';
+const DEFAULT_ALT = '';
+/**
+ * `:::figure{src="..." alt="..."} caption markdown :::` — an image with a
+ * rich (markdown) caption. `src` is required; a missing `src` renders no
+ * image at all (the caption still renders, matching the graceful-
+ * degradation spirit of the unknown-directive fallback rather than
+ * throwing).
+ *
+ * Security: `src` is a directive *attribute*, handed to this component as a
+ * raw string and put straight into `<img src>` — that assignment BYPASSES
+ * `@markii/core`'s `to-hast.ts` URL sanitizer, which only walks the hast
+ * tree produced from ordinary markdown links/images. This component closes
+ * that gap by running `src` through `@markii/core`'s own `isSafeUrl` (the
+ * exact same allowlist check the sanitizer uses) and dropping the image
+ * entirely when it fails, rather than re-implementing URL-scheme parsing
+ * here. Matches `@markii/react`'s `Figure` markup byte-for-byte.
+ */
+export const Figure = (attributes, childrenHtml, ctx) => {
+    const rawSrc = attributes.src ?? null;
+    const alt = attributes.alt ?? DEFAULT_ALT;
+    const src = rawSrc && isSafeUrl(rawSrc) ? rawSrc : null;
+    const imgHtml = src
+        ? `<img class="mk-figure__img" src="${ctx.esc(src)}" alt="${ctx.esc(alt)}">`
+        : '';
+    return (`<figure class="mk-figure">${imgHtml}` +
+        `<figcaption class="mk-figure__caption">${childrenHtml}</figcaption></figure>`);
+};

package/dist/components/index.d.ts

@@ -0,0 +1,27 @@
+import type { HtmlRegistry } from '../registry.js';
+export { Badge } from './badge.js';
+export type { BadgeVariant } from './badge.js';
+export { Callout } from './callout.js';
+export type { CalloutType } from './callout.js';
+export { Card } from './card.js';
+export { Cell } from './cell.js';
+export { Chart } from './chart.js';
+export { Details } from './details.js';
+export { Figure } from './figure.js';
+export { Kbd } from './kbd.js';
+export { createLayoutWrapper, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
+export type { LayoutWrapperPreset } from './layout-wrapper.js';
+export { Progress } from './progress.js';
+export { Rating } from './rating.js';
+export { Row } from './row.js';
+export { Stat } from './stat.js';
+export { Tab, DEFAULT_TAB_LABEL, tabPanel } from './tab.js';
+export { Tabs } from './tabs.js';
+/**
+ * The built-in standard components, pre-registered under their names —
+ * matching `@markii/react`'s `defaultRegistry` in full, including the
+ * data-bound `stat`/`progress`/`chart` trio now that this engine's
+ * `HtmlRenderContext` carries a value-resolution seam (`./stat.js`,
+ * `./progress.js`, `./chart.js`; see `render.ts`'s `resolveDataAttribute`).
+ */
+export declare const defaultHtmlRegistry: HtmlRegistry;

package/dist/components/index.js

@@ -0,0 +1,91 @@
+import { getContract } from '@markii/stdlib';
+import { createHtmlRegistry } from '../registry.js';
+import { Badge } from './badge.js';
+import { Callout } from './callout.js';
+import { Card } from './card.js';
+import { Cell } from './cell.js';
+import { Chart } from './chart.js';
+import { Details } from './details.js';
+import { Figure } from './figure.js';
+import { Kbd } from './kbd.js';
+import { createLayoutWrapper } from './layout-wrapper.js';
+import { Progress } from './progress.js';
+import { Rating } from './rating.js';
+import { Row } from './row.js';
+import { Stat } from './stat.js';
+import { Tab } from './tab.js';
+import { Tabs } from './tabs.js';
+export { Badge } from './badge.js';
+export { Callout } from './callout.js';
+export { Card } from './card.js';
+export { Cell } from './cell.js';
+export { Chart } from './chart.js';
+export { Details } from './details.js';
+export { Figure } from './figure.js';
+export { Kbd } from './kbd.js';
+export { createLayoutWrapper, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
+export { Progress } from './progress.js';
+export { Rating } from './rating.js';
+export { Row } from './row.js';
+export { Stat } from './stat.js';
+export { Tab, DEFAULT_TAB_LABEL, tabPanel } from './tab.js';
+export { Tabs } from './tabs.js';
+/**
+ * Derives a registry entry's `inline` flag from `@markii/stdlib`'s standard
+ * component contract for `name`, matching `@markii/react`'s
+ * `inlineFromContract`: `@markii/stdlib`'s `ComponentKind` is the source of
+ * truth for whether a standard component is written as a text directive
+ * (`kind: 'inline'` -> `inline: true`) or a leaf/container directive
+ * (`kind: 'leaf' | 'container'` -> `inline: false`). Falls back to `false`
+ * if `name` has no standard contract.
+ */
+function inlineFromContract(name) {
+    return getContract(name)?.kind === 'inline';
+}
+/**
+ * The built-in standard components, pre-registered under their names —
+ * matching `@markii/react`'s `defaultRegistry` in full, including the
+ * data-bound `stat`/`progress`/`chart` trio now that this engine's
+ * `HtmlRenderContext` carries a value-resolution seam (`./stat.js`,
+ * `./progress.js`, `./chart.js`; see `render.ts`'s `resolveDataAttribute`).
+ */
+export const defaultHtmlRegistry = createHtmlRegistry({
+    callout: { component: Callout, inline: inlineFromContract('callout') },
+    kbd: { component: Kbd, inline: inlineFromContract('kbd') },
+    rating: { component: Rating, inline: inlineFromContract('rating') },
+    details: { component: Details, inline: inlineFromContract('details') },
+    card: { component: Card, inline: inlineFromContract('card') },
+    badge: { component: Badge, inline: inlineFromContract('badge') },
+    figure: { component: Figure, inline: inlineFromContract('figure') },
+    tabs: { component: Tabs, inline: inlineFromContract('tabs') },
+    tab: { component: Tab, inline: inlineFromContract('tab') },
+    row: { component: Row, inline: inlineFromContract('row') },
+    cell: { component: Cell, inline: inlineFromContract('cell') },
+    stat: { component: Stat, inline: inlineFromContract('stat') },
+    progress: { component: Progress, inline: inlineFromContract('progress') },
+    chart: { component: Chart, inline: inlineFromContract('chart') },
+    center: {
+        component: createLayoutWrapper('center'),
+        inline: inlineFromContract('center'),
+    },
+    left: {
+        component: createLayoutWrapper('left'),
+        inline: inlineFromContract('left'),
+    },
+    right: {
+        component: createLayoutWrapper('right'),
+        inline: inlineFromContract('right'),
+    },
+    wide: {
+        component: createLayoutWrapper('wide'),
+        inline: inlineFromContract('wide'),
+    },
+    narrow: {
+        component: createLayoutWrapper('narrow'),
+        inline: inlineFromContract('narrow'),
+    },
+    full: {
+        component: createLayoutWrapper('full'),
+        inline: inlineFromContract('full'),
+    },
+});

package/dist/components/kbd.d.ts

@@ -0,0 +1,7 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `:kbd[Ctrl+S]` — a styled keycap for an inline text directive. Matches
+ * `@markii/react`'s `Kbd` markup byte-for-byte so one stylesheet covers
+ * both renderers.
+ */
+export declare const Kbd: HtmlComponent;

package/dist/components/kbd.js

@@ -0,0 +1,8 @@
+/**
+ * `:kbd[Ctrl+S]` — a styled keycap for an inline text directive. Matches
+ * `@markii/react`'s `Kbd` markup byte-for-byte so one stylesheet covers
+ * both renderers.
+ */
+export const Kbd = (_attributes, childrenHtml) => {
+    return `<kbd class="mk-kbd">${childrenHtml}</kbd>`;
+};

package/dist/components/layout-wrapper.d.ts

@@ -0,0 +1,23 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * The closed set of layout-wrapper container names (docs/format.md): six
+ * aliases of the one shared implementation below (`createLayoutWrapper`),
+ * matching `@markii/react`'s `layout-wrapper.tsx`. There is deliberately no
+ * `normal` alias (the default needs no wrapper at all) and no
+ * attribute-bearing form.
+ */
+export declare const LAYOUT_WRAPPER_PRESETS: readonly ["center", "left", "right", "wide", "narrow", "full"];
+/** One of the six closed layout-wrapper preset names. */
+export type LayoutWrapperPreset = (typeof LAYOUT_WRAPPER_PRESETS)[number];
+/**
+ * Creates the registry component for one of docs/format.md's six layout-
+ * wrapper container names — `:::center`, `:::left`, `:::right`, `:::wide`,
+ * `:::narrow`, `:::full`. One shared implementation, bound to `preset` at
+ * registration time, matching `@markii/react`'s `createLayoutWrapper`.
+ *
+ * Deliberately never reads `attributes`: docs/format.md gives these
+ * wrappers no attribute-bearing form. `width`/`align` written on a wrapper
+ * are intercepted earlier by the engine's reserved-attribute handling
+ * (`layout.ts`), before this component ever runs.
+ */
+export declare function createLayoutWrapper(preset: LayoutWrapperPreset): HtmlComponent;

package/dist/components/layout-wrapper.js

@@ -0,0 +1,45 @@
+/**
+ * The closed set of layout-wrapper container names (docs/format.md): six
+ * aliases of the one shared implementation below (`createLayoutWrapper`),
+ * matching `@markii/react`'s `layout-wrapper.tsx`. There is deliberately no
+ * `normal` alias (the default needs no wrapper at all) and no
+ * attribute-bearing form.
+ */
+export const LAYOUT_WRAPPER_PRESETS = [
+    'center',
+    'left',
+    'right',
+    'wide',
+    'narrow',
+    'full',
+];
+/**
+ * Preset -> class string. Null-prototype, mirroring `layout.ts`'s
+ * `WIDTH_CLASSES`/`ALIGN_CLASSES`. `center`/`left`/`right` reuse the
+ * existing `mk-align-*` classes; `wide`/`narrow`/`full` reuse the existing
+ * `mk-width-*` classes. `mk-layout` is the one class every preset adds on
+ * top. Matches `@markii/react`'s `WRAPPER_CLASSES` byte-for-byte.
+ */
+const WRAPPER_CLASSES = Object.assign(Object.create(null), {
+    center: 'mk-layout mk-align-center',
+    left: 'mk-layout mk-align-left',
+    right: 'mk-layout mk-align-right',
+    wide: 'mk-layout mk-width-wide',
+    narrow: 'mk-layout mk-width-narrow',
+    full: 'mk-layout mk-width-full',
+});
+/**
+ * Creates the registry component for one of docs/format.md's six layout-
+ * wrapper container names — `:::center`, `:::left`, `:::right`, `:::wide`,
+ * `:::narrow`, `:::full`. One shared implementation, bound to `preset` at
+ * registration time, matching `@markii/react`'s `createLayoutWrapper`.
+ *
+ * Deliberately never reads `attributes`: docs/format.md gives these
+ * wrappers no attribute-bearing form. `width`/`align` written on a wrapper
+ * are intercepted earlier by the engine's reserved-attribute handling
+ * (`layout.ts`), before this component ever runs.
+ */
+export function createLayoutWrapper(preset) {
+    const className = WRAPPER_CLASSES[preset] ?? 'mk-layout';
+    return (_attributes, childrenHtml) => `<div class="${className}">${childrenHtml}</div>`;
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,13 @@
+import type { HtmlComponent } from '../registry.js';
+/**
+ * `::progress{value=3 max=5 label="tasks"}` — a meter bar. Data binding
+ * (§8): a bound numeric `data` supplies `value`; a bound object may supply
+ * `value`/`max` — explicit directive attributes always win. Parses
+ * defensively: non-numeric/`NaN`/`Infinity` input (from either source) falls
+ * back to `0` (value) or the default `max` of `1`; `value` is then clamped
+ * to `[0, max]` and `max` is guarded to be positive. Missing/error binding
+ * renders a `0%` bar rather than crashing.
+ *
+ * Markup and class names match `@markii/react`'s `Progress` byte-for-byte.
+ */
+export declare const Progress: HtmlComponent;