@markii/html 0.8.1 → 0.10.0

package/dist/components/callout.d.ts

@@ -3,7 +3,8 @@ 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
+ * `info` rather than throwing. `text` (`left | center | right`) aligns the
+ * box's own text, header and body alike. 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.
  */

package/dist/components/callout.js

@@ -1,3 +1,4 @@
+import { withTextClass } from '../layout.js';
 const CALLOUT_TYPES = ['info', 'warning', 'danger'];
 const CALLOUT_ICONS = {
     info: 'ℹ',
@@ -10,7 +11,8 @@ function isCalloutType(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
+ * `info` rather than throwing. `text` (`left | center | right`) aligns the
+ * box's own text, header and body alike. 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.
  */
@@ -21,7 +23,7 @@ export const Callout = (attributes, childrenHtml, ctx) => {
     const titleHtml = title
         ? `<span class="mk-callout__title">${ctx.esc(title)}</span>`
         : '';
-    return (`<div class="mk-callout mk-callout--${type}" role="note">` +
+    return (`<div class="${withTextClass(`mk-callout mk-callout--${type}`, attributes.text)}" role="note">` +
         `<div class="mk-callout__header">` +
         `<span class="mk-callout__icon" aria-hidden="true">${CALLOUT_ICONS[type]}</span>` +
         `${titleHtml}</div>` +

package/dist/components/card.d.ts

@@ -1,7 +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
+ * title row is omitted entirely (not rendered empty) when absent. `text`
+ * (`left | center | right`) aligns the panel's own text, title and body
+ * alike. 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.

package/dist/components/card.js

@@ -1,6 +1,9 @@
+import { withTextClass } from '../layout.js';
 /**
  * `:::card{title="..."} ... :::` — a titled panel. `title` is optional; the
- * title row is omitted entirely (not rendered empty) when absent. Matches
+ * title row is omitted entirely (not rendered empty) when absent. `text`
+ * (`left | center | right`) aligns the panel's own text, title and body
+ * alike. 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.
@@ -10,6 +13,6 @@ export const Card = (attributes, childrenHtml, ctx) => {
     const titleHtml = title
         ? `<div class="mk-card__title">${ctx.esc(title)}</div>`
         : '';
-    return (`<div class="mk-card">${titleHtml}` +
+    return (`<div class="${withTextClass('mk-card', attributes.text)}">${titleHtml}` +
         `<div class="mk-card__body">${childrenHtml}</div></div>`);
 };

package/dist/components/cell.d.ts

@@ -4,6 +4,9 @@ import type { HtmlComponent } from '../registry.js';
  * 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.
+ * Its one attribute is `text` (`left | center | right`), which aligns the
+ * content inside this cell and overrides the enclosing `:::row{text=...}`
+ * by declaring a value where the row only offered an inherited one.
+ * Matches the React component.
  */
 export declare const Cell: HtmlComponent;

package/dist/components/cell.js

@@ -1,10 +1,14 @@
+import { withTextClass } from '../layout.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.
+ * Its one attribute is `text` (`left | center | right`), which aligns the
+ * content inside this cell and overrides the enclosing `:::row{text=...}`
+ * by declaring a value where the row only offered an inherited one.
+ * Matches the React component.
  */
-export const Cell = (_attributes, childrenHtml) => {
-    return `<div class="mk-cell">${childrenHtml}</div>`;
+export const Cell = (attributes, childrenHtml) => {
+    return `<div class="${withTextClass('mk-cell', attributes.text)}">${childrenHtml}</div>`;
 };

package/dist/components/divider.d.ts

@@ -0,0 +1,16 @@
+import type { HtmlComponent } from '../registry.js';
+export type DividerVariant = 'line' | 'dots' | 'ornament';
+export type DividerLabelAlign = 'left' | 'center' | 'right';
+/**
+ * `::divider` / `::divider{label="..." variant="line|dots|ornament"
+ * label-align="left|center|right"}` — a leaf directive rendering a
+ * horizontal separator, optionally labeled. Unknown/missing/bare-null
+ * `variant` falls back to `line` rather than throwing, matching `callout`'s
+ * posture for its `type` attribute; `label-align` falls back to `center`
+ * the same way, and is component-scoped, distinct from the reserved
+ * `width`/`align` layout attributes. Matches `@markii/react`'s `Divider`
+ * 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 Divider: HtmlComponent;

package/dist/components/divider.js

@@ -0,0 +1,52 @@
+const DIVIDER_VARIANTS = [
+    'line',
+    'dots',
+    'ornament',
+];
+const ORNAMENT_GLYPH = '❖';
+function isDividerVariant(value) {
+    return DIVIDER_VARIANTS.includes(value);
+}
+const LABEL_ALIGNS = ['left', 'center', 'right'];
+function isDividerLabelAlign(value) {
+    return LABEL_ALIGNS.includes(value);
+}
+/**
+ * `::divider` / `::divider{label="..." variant="line|dots|ornament"
+ * label-align="left|center|right"}` — a leaf directive rendering a
+ * horizontal separator, optionally labeled. Unknown/missing/bare-null
+ * `variant` falls back to `line` rather than throwing, matching `callout`'s
+ * posture for its `type` attribute; `label-align` falls back to `center`
+ * the same way, and is component-scoped, distinct from the reserved
+ * `width`/`align` layout attributes. Matches `@markii/react`'s `Divider`
+ * 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 Divider = (attributes, _childrenHtml, ctx) => {
+    const rawVariant = attributes.variant ?? 'line';
+    const variantName = isDividerVariant(rawVariant)
+        ? rawVariant
+        : 'line';
+    const rawLabel = attributes.label ?? null;
+    const label = rawLabel ? rawLabel : null;
+    const rawLabelAlign = attributes['label-align'];
+    const labelAlign = rawLabelAlign && isDividerLabelAlign(rawLabelAlign)
+        ? rawLabelAlign
+        : 'center';
+    const labelAlignClass = labelAlign === 'center' ? '' : ` mk-divider--label-${labelAlign}`;
+    const ariaLabel = label ? ` aria-label="${ctx.esc(label)}"` : '';
+    const labelSpan = label
+        ? `<span class="mk-divider__label">${ctx.esc(label)}</span>`
+        : '';
+    let inner;
+    if (variantName === 'ornament') {
+        const ornamentSpan = `<span class="mk-divider__ornament" aria-hidden="true">${ORNAMENT_GLYPH}</span>`;
+        inner = label ? `${ornamentSpan}${labelSpan}${ornamentSpan}` : ornamentSpan;
+    }
+    else {
+        inner = labelSpan;
+    }
+    return (`<div class="mk-divider mk-divider--${variantName}${labelAlignClass}" role="separator"${ariaLabel}>` +
+        `${inner}</div>`);
+};

package/dist/components/index.d.ts

@@ -7,9 +7,11 @@ export { Card } from './card.js';
 export { Cell } from './cell.js';
 export { Chart } from './chart.js';
 export { Details } from './details.js';
+export { Divider } from './divider.js';
+export type { DividerVariant } from './divider.js';
 export { Figure } from './figure.js';
 export { Kbd } from './kbd.js';
-export { createLayoutWrapper, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
+export { createLayoutWrapper, layoutWrapperPresetAxis, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
 export type { LayoutWrapperPreset } from './layout-wrapper.js';
 export { Progress } from './progress.js';
 export { Rating } from './rating.js';

package/dist/components/index.js

@@ -6,9 +6,10 @@ import { Card } from './card.js';
 import { Cell } from './cell.js';
 import { Chart } from './chart.js';
 import { Details } from './details.js';
+import { Divider } from './divider.js';
 import { Figure } from './figure.js';
 import { Kbd } from './kbd.js';
-import { createLayoutWrapper } from './layout-wrapper.js';
+import { createLayoutWrapper, layoutWrapperPresetAxis, } from './layout-wrapper.js';
 import { Progress } from './progress.js';
 import { Rating } from './rating.js';
 import { Row } from './row.js';
@@ -21,9 +22,10 @@ export { Card } from './card.js';
 export { Cell } from './cell.js';
 export { Chart } from './chart.js';
 export { Details } from './details.js';
+export { Divider } from './divider.js';
 export { Figure } from './figure.js';
 export { Kbd } from './kbd.js';
-export { createLayoutWrapper, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
+export { createLayoutWrapper, layoutWrapperPresetAxis, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
 export { Progress } from './progress.js';
 export { Rating } from './rating.js';
 export { Row } from './row.js';
@@ -42,6 +44,20 @@ export { Tabs } from './tabs.js';
 function inlineFromContract(name) {
     return getContract(name)?.kind === 'inline';
 }
+/**
+ * One layout-wrapper registration: the shared wrapper component bound to
+ * `preset`, plus the `layout` axis that preset sets by its own name, which
+ * is what tells `render.ts` to drop a same-axis attribute and hand the other
+ * axis down through `ctx` instead of wrapping the component in a second
+ * `<div>`. Matches `@markii/react`'s `layoutWrapperEntry`.
+ */
+function layoutWrapperEntry(preset) {
+    return {
+        component: createLayoutWrapper(preset),
+        inline: inlineFromContract(preset),
+        layout: layoutWrapperPresetAxis(preset),
+    };
+}
 /**
  * The built-in standard components, pre-registered under their names —
  * matching `@markii/react`'s `defaultRegistry` in full, including the
@@ -53,6 +69,7 @@ export const defaultHtmlRegistry = createHtmlRegistry({
     callout: { component: Callout, inline: inlineFromContract('callout') },
     kbd: { component: Kbd, inline: inlineFromContract('kbd') },
     rating: { component: Rating, inline: inlineFromContract('rating') },
+    divider: { component: Divider, inline: inlineFromContract('divider') },
     details: { component: Details, inline: inlineFromContract('details') },
     card: { component: Card, inline: inlineFromContract('card') },
     badge: { component: Badge, inline: inlineFromContract('badge') },
@@ -64,28 +81,11 @@ export const defaultHtmlRegistry = createHtmlRegistry({
     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'),
-    },
+    center: layoutWrapperEntry('center'),
+    left: layoutWrapperEntry('left'),
+    right: layoutWrapperEntry('right'),
+    wide: layoutWrapperEntry('wide'),
+    narrow: layoutWrapperEntry('narrow'),
+    full: layoutWrapperEntry('full'),
+    fit: layoutWrapperEntry('fit'),
 });

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

@@ -1,23 +1,41 @@
+import type { LayoutAxis } from '@markii/stdlib';
 import type { HtmlComponent } from '../registry.js';
 /**
- * The closed set of layout-wrapper container names (docs/format.md): six
+ * The closed set of layout-wrapper container names (docs/format.md):
  * 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.
+ * `normal` alias: the default needs no wrapper at all.
  */
-export declare const LAYOUT_WRAPPER_PRESETS: readonly ["center", "left", "right", "wide", "narrow", "full"];
-/** One of the six closed layout-wrapper preset names. */
+export declare const LAYOUT_WRAPPER_PRESETS: readonly ["center", "left", "right", "wide", "narrow", "full", "fit"];
+/** One of the 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-
+ * Creates the registry component for one of docs/format.md's layout-
  * wrapper container names — `:::center`, `:::left`, `:::right`, `:::wide`,
- * `:::narrow`, `:::full`. One shared implementation, bound to `preset` at
- * registration time, matching `@markii/react`'s `createLayoutWrapper`.
+ * `:::narrow`, `:::full`, and `:::fit`. 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.
+ * A wrapper sets ONE of the two layout axes by its name and takes the OTHER
+ * as an attribute (docs/spec.md §3), so `:::center{width=fit}` is centered
+ * AND sized to its content. It still never reads `attributes`: `width` and
+ * `align` are reserved and stripped before any component sees them, so
+ * `render.ts` resolves the open axis and hands the result down as
+ * `ctx.layoutClassName`. That class is appended to this wrapper's own on the
+ * SAME `<div>`, so the two engines emit one element carrying both classes.
+ * An attribute for the wrapper's own axis never arrives at all: `render.ts`
+ * drops it, and the name wins.
+ *
+ * `ctx.layoutClassName` is composed of fixed class literals from
+ * `layout.ts`'s closed maps, never author text, so it is interpolated
+ * without escaping for the same reason `className` above is.
  */
 export declare function createLayoutWrapper(preset: LayoutWrapperPreset): HtmlComponent;
+/**
+ * The layout axis `preset` sets by its own name, read from
+ * `@markii/stdlib`'s one classification of the seven wrapper names.
+ * Used by `components/index.ts` to register each wrapper with the right
+ * `HtmlRegistryEntry.layout`. Mirrors `@markii/react`'s
+ * `layoutWrapperPresetAxis`.
+ */
+export declare function layoutWrapperPresetAxis(preset: LayoutWrapperPreset): LayoutAxis;

package/dist/components/layout-wrapper.js

@@ -1,9 +1,9 @@
+import { layoutWrapperAxis } from '@markii/stdlib';
 /**
- * The closed set of layout-wrapper container names (docs/format.md): six
+ * The closed set of layout-wrapper container names (docs/format.md):
  * 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.
+ * `normal` alias: the default needs no wrapper at all.
  */
 export const LAYOUT_WRAPPER_PRESETS = [
     'center',
@@ -12,11 +12,12 @@ export const LAYOUT_WRAPPER_PRESETS = [
     'wide',
     'narrow',
     'full',
+    'fit',
 ];
 /**
  * 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
+ * existing `mk-align-*` classes; `wide`/`narrow`/`full`/`fit` 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.
  */
@@ -27,19 +28,51 @@ const WRAPPER_CLASSES = Object.assign(Object.create(null), {
     wide: 'mk-layout mk-width-wide',
     narrow: 'mk-layout mk-width-narrow',
     full: 'mk-layout mk-width-full',
+    fit: 'mk-layout mk-width-fit',
 });
 /**
- * Creates the registry component for one of docs/format.md's six layout-
+ * Creates the registry component for one of docs/format.md's layout-
  * wrapper container names — `:::center`, `:::left`, `:::right`, `:::wide`,
- * `:::narrow`, `:::full`. One shared implementation, bound to `preset` at
- * registration time, matching `@markii/react`'s `createLayoutWrapper`.
+ * `:::narrow`, `:::full`, and `:::fit`. 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.
+ * A wrapper sets ONE of the two layout axes by its name and takes the OTHER
+ * as an attribute (docs/spec.md §3), so `:::center{width=fit}` is centered
+ * AND sized to its content. It still never reads `attributes`: `width` and
+ * `align` are reserved and stripped before any component sees them, so
+ * `render.ts` resolves the open axis and hands the result down as
+ * `ctx.layoutClassName`. That class is appended to this wrapper's own on the
+ * SAME `<div>`, so the two engines emit one element carrying both classes.
+ * An attribute for the wrapper's own axis never arrives at all: `render.ts`
+ * drops it, and the name wins.
+ *
+ * `ctx.layoutClassName` is composed of fixed class literals from
+ * `layout.ts`'s closed maps, never author text, so it is interpolated
+ * without escaping for the same reason `className` above is.
  */
 export function createLayoutWrapper(preset) {
     const className = WRAPPER_CLASSES[preset] ?? 'mk-layout';
-    return (_attributes, childrenHtml) => `<div class="${className}">${childrenHtml}</div>`;
+    return (_attributes, childrenHtml, ctx) => {
+        const full = ctx.layoutClassName
+            ? `${className} ${ctx.layoutClassName}`
+            : className;
+        return `<div class="${full}">${childrenHtml}</div>`;
+    };
+}
+/**
+ * The layout axis `preset` sets by its own name, read from
+ * `@markii/stdlib`'s one classification of the seven wrapper names.
+ * Used by `components/index.ts` to register each wrapper with the right
+ * `HtmlRegistryEntry.layout`. Mirrors `@markii/react`'s
+ * `layoutWrapperPresetAxis`.
+ */
+export function layoutWrapperPresetAxis(preset) {
+    const axis = layoutWrapperAxis(preset);
+    if (axis === undefined) {
+        // Unreachable for the closed preset list above; kept as a narrowing
+        // branch rather than a non-null assertion.
+        throw new Error(`"${preset}" is not a layout-wrapper name`);
+    }
+    return axis;
 }

package/dist/components/row.d.ts

@@ -2,8 +2,12 @@ import type { HtmlComponent } from '../registry.js';
 /**
  * `:::row{cols=3} ... :::` — docs/format.md's one layout *container*. An
  * absent or invalid `cols` value degrades to plain `mk-row` (auto-fit)
- * rather than an error. Matches `@markii/react`'s `Row` markup byte-for-byte
- * so one stylesheet covers both renderers. No outer margin: the document
- * stylesheet owns spacing between this and its siblings.
+ * rather than an error. `text` (`left | center | right`) aligns the content
+ * inside the row's cells, reaching them through ordinary CSS inheritance;
+ * the reserved `align` keeps its ordinary meaning of placing the row's own
+ * box, which a full-width grid has no room to act on. Matches
+ * `@markii/react`'s `Row` 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 Row: HtmlComponent;

package/dist/components/row.js

@@ -1,3 +1,4 @@
+import { withTextClass } from '../layout.js';
 /** The exact `cols` values that select a fixed-column-count class; anything else degrades to auto-fit. */
 const COLS_VALUES = ['2', '3', '4'];
 function isColsValue(value) {
@@ -6,14 +7,16 @@ function isColsValue(value) {
 /**
  * `:::row{cols=3} ... :::` — docs/format.md's one layout *container*. An
  * absent or invalid `cols` value degrades to plain `mk-row` (auto-fit)
- * rather than an error. Matches `@markii/react`'s `Row` markup byte-for-byte
- * so one stylesheet covers both renderers. No outer margin: the document
- * stylesheet owns spacing between this and its siblings.
+ * rather than an error. `text` (`left | center | right`) aligns the content
+ * inside the row's cells, reaching them through ordinary CSS inheritance;
+ * the reserved `align` keeps its ordinary meaning of placing the row's own
+ * box, which a full-width grid has no room to act on. Matches
+ * `@markii/react`'s `Row` 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 Row = (attributes, childrenHtml) => {
     const rawCols = attributes.cols ?? '';
-    const className = isColsValue(rawCols)
-        ? `mk-row mk-row--cols-${rawCols}`
-        : 'mk-row';
+    const className = withTextClass(isColsValue(rawCols) ? `mk-row mk-row--cols-${rawCols}` : 'mk-row', attributes.text);
     return `<div class="${className}">${childrenHtml}</div>`;
 };

package/dist/doc-css.generated.js

@@ -2,4 +2,4 @@
 // Regenerate with: node scripts/generate-doc-css.ts
 // Source of truth: packages/platforms/markii-react/src/doc.css
 /** The shared document stylesheet (@markii/react's doc.css), embedded as a string for exportHtmlDocument's <style> block. */
-export const DOC_CSS = "/*\n * Document rhythm: components own their insides only, never outer margins.\n * This single rule spaces every block-level child of `.doc` identically —\n * paragraphs, headings, and components alike — so new components always\n * sit correctly in the flow with zero per-component tuning.\n */\n.doc > * + * {\n  margin-block-start: 1rem;\n}\n\n/*\n * ============================================================================\n * TIER 1 TOKENS — the theming contract\n * ============================================================================\n * Every host that wants a themed (in particular, a dark) `.doc` remaps ONLY\n * these custom properties, deliberately scoped to `.doc` and not `:root`:\n * `doc.css` is a library stylesheet embedded into other people's pages\n * (Obsidian injects it globally), so it must stay polite and never claim\n * `:root`. A host theme layer loaded after this one, at the same\n * specificity, simply redeclares the ones below on `.doc` (or a more\n * specific selector) to win the cascade — see `apps/vscode/src/webview/\n * theme.css` and `apps/obsidian/src/obsidian-theme.css`.\n *\n * Nine neutrals + five semantic hues. This list is deliberately small: a\n * host maps ~14 tokens instead of ~60 individual selectors, and a\n * derivation layer below (Tier 2) builds every finer shade FROM these, so\n * remapping these 14 makes every callout/badge/chart/etc. variant\n * theme-correct for free.\n */\n.doc {\n  /* ---------- neutrals ---------- */\n  --mk-bg: #fff; /* page ground */\n  --mk-raised: #fff; /* raised surface for cards — distinct from ground; dark themes need real separation here where light themes get it from the border alone */\n  --mk-fg: #1a1a1a; /* body text */\n  --mk-surface: #f4f4f5; /* subtle fill one step off the ground: pre, kbd, script marker, details, default callout, zebra rows */\n  --mk-surface-strong: #f0f0f2; /* second step off the ground: inline code, th, progress track, default badge background */\n  --mk-border: #e4e4e7; /* hairlines */\n  --mk-muted: #52525b; /* secondary text: captions, labels, script summary */\n  --mk-faint: #94a3b8; /* tertiary/empty: missing values, empty-chart text, unfilled stars */\n  --mk-accent: #3b82f6; /* the single interactive/brand color: active tab, progress bar, chart stroke/fill */\n  --mk-on-accent: #fff; /* ink that sits ON a solid --mk-accent fill; a host must supply this because it cannot be derived: it depends on the accent's own lightness, not on the page palette */\n\n  /* ---------- semantic hues ---------- */\n  --mk-info: #3b82f6;\n  --mk-success: #15803d;\n  --mk-warning: #d97706;\n  --mk-danger: #dc2626;\n  --mk-limit: #7c3aed; /* the purple, used for the \"hit a resource limit\" failure kind */\n}\n\n/*\n * ============================================================================\n * TIER 2 DERIVATION FORMULAS\n * ============================================================================\n * Every finer shade `doc.css` needs (a callout's tinted background, a\n * badge's tinted text) is a MIX of a Tier 1 hue against `--mk-bg`/`--mk-fg`,\n * never a literal of its own. Because the mix targets those two tokens\n * specifically, a dark host palette flips the derived shade's polarity\n * correctly with no extra work on the host's part — the whole point of\n * this refactor.\n *\n * Exactly three named percentages are used anywhere in this file. A future\n * component reuses one of these three; it does not invent a fourth.\n *\n *   --mk-mix-variant-fill:  color-mix(in srgb, <hue> 14%, var(--mk-bg))\n *     A quiet tinted background — callout body fill.\n *   --mk-mix-strong-fill:   color-mix(in srgb, <hue> 18%, var(--mk-bg))\n *     A slightly stronger tinted background — badge background.\n *   --mk-mix-ink:           color-mix(in srgb, <hue> 85%, var(--mk-fg))\n *     A hue nudged toward body text — usable as ink (badge text, star\n *     color) or as a border (callout border).\n *\n * `color-mix()` is unsupported in most email clients, and a custom property\n * whose value fails to parse does not fall back — the declaration goes\n * invalid-at-computed-value and effectively vanishes. `doc.css` is embedded\n * verbatim into `@markii/html`'s `exportHtmlDocument`, whose documented\n * targets include email and archive output, so every derived token below is\n * defined TWICE: first as a literal hex (today's existing light-mode\n * value), then, guarded by `@supports (color: color-mix(in srgb, red,\n * red))`, redefined via the real mix. A modern browser or either Electron\n * host gets live derivation that tracks a remapped Tier 1 palette; an old\n * email client silently keeps exactly today's light palette.\n */\n.doc {\n  /* ---- literal light-mode fallback (used verbatim where color-mix is unsupported) ---- */\n  --mk-info-fill: #eff6ff;\n  --mk-info-strong-fill: #dbeafe;\n  --mk-info-ink: #3b82f6;\n  --mk-success-strong-fill: #dcfce7;\n  --mk-success-ink: #15803d;\n  --mk-warning-fill: #fffbeb;\n  --mk-warning-strong-fill: #fef3c7;\n  --mk-warning-ink: #d97706;\n  --mk-danger-fill: #fef2f2;\n  --mk-danger-strong-fill: #fee2e2;\n  --mk-danger-ink: #dc2626;\n  --mk-limit-ink: #7c3aed;\n  /*\n   * The keycap's inset depth line. Not a themed hue, but not theme-neutral\n   * either: a low-alpha BLACK line is invisible on a dark surface, so the\n   * literal below is only the no-`color-mix` fallback (where the palette is\n   * the light one anyway). The derivation in the `@supports` block below\n   * expresses it against `--mk-fg` instead, so it flips to a light line\n   * when a host supplies a dark palette, which is the correct depth cue\n   * there. Kept in this block, not the Tier 1 block above, so its literal\n   * stays inside a block the no-raw-color-literal test allows.\n   */\n  --mk-shadow-sm: rgba(0, 0, 0, 0.05);\n}\n\n@supports (color: color-mix(in srgb, red, red)) {\n  .doc {\n    --mk-shadow-sm: color-mix(in srgb, var(--mk-fg) 8%, transparent);\n\n    --mk-info-fill: color-mix(in srgb, var(--mk-info) 14%, var(--mk-bg));\n    --mk-info-strong-fill: color-mix(in srgb, var(--mk-info) 18%, var(--mk-bg));\n    --mk-info-ink: color-mix(in srgb, var(--mk-info) 85%, var(--mk-fg));\n\n    --mk-success-strong-fill: color-mix(\n      in srgb,\n      var(--mk-success) 18%,\n      var(--mk-bg)\n    );\n    --mk-success-ink: color-mix(in srgb, var(--mk-success) 85%, var(--mk-fg));\n\n    --mk-warning-fill: color-mix(in srgb, var(--mk-warning) 14%, var(--mk-bg));\n    --mk-warning-strong-fill: color-mix(\n      in srgb,\n      var(--mk-warning) 18%,\n      var(--mk-bg)\n    );\n    --mk-warning-ink: color-mix(in srgb, var(--mk-warning) 85%, var(--mk-fg));\n\n    --mk-danger-fill: color-mix(in srgb, var(--mk-danger) 14%, var(--mk-bg));\n    --mk-danger-strong-fill: color-mix(\n      in srgb,\n      var(--mk-danger) 18%,\n      var(--mk-bg)\n    );\n    --mk-danger-ink: color-mix(in srgb, var(--mk-danger) 85%, var(--mk-fg));\n\n    --mk-limit-ink: color-mix(in srgb, var(--mk-limit) 85%, var(--mk-fg));\n  }\n}\n\n.doc {\n  color: var(--mk-fg);\n  font-family:\n    system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  line-height: 1.6;\n}\n\n.doc pre {\n  overflow-x: auto;\n  background: var(--mk-surface);\n  padding: 0.75rem 1rem;\n  border-radius: 6px;\n}\n\n.doc code {\n  background: var(--mk-surface-strong);\n  border-radius: 3px;\n  padding: 0.1em 0.35em;\n  font-size: 0.9em;\n}\n\n.doc pre code {\n  background: none;\n  padding: 0;\n}\n\n/* ---------- GFM table ---------- */\n\n/*\n * `display: block` on the table itself (rather than wrapping it in an\n * extra element the renderer doesn't otherwise inject) is what makes a wide\n * table scroll horizontally instead of overflowing the page or the doc\n * column — the table box becomes independently scrollable content, the\n * same trick used by GitHub's own Markdown rendering.\n */\n.doc table {\n  display: block;\n  overflow-x: auto;\n  border-collapse: collapse;\n  font-size: 0.95em;\n}\n\n.doc th,\n.doc td {\n  border: 1px solid var(--mk-border);\n  padding: 0.4rem 0.75rem;\n  text-align: left;\n}\n\n.doc th {\n  font-weight: 600;\n  background: var(--mk-surface-strong);\n}\n\n.doc tr:nth-child(even) {\n  background: var(--mk-surface);\n}\n\n/* ---------- GFM task list ---------- */\n\n/*\n * `li:has(> input[type=\"checkbox\"])` scopes bullet removal + checkbox\n * alignment to task-list items only — an ordinary `<ul>`/`<ol>` item keeps\n * its normal bullet/number, since GFM only adds a leading `<input>` to\n * items that used `- [ ]`/`- [x]` syntax.\n */\n.doc li:has(> input[type='checkbox']) {\n  list-style: none;\n  margin-inline-start: -1.5em;\n}\n\n.doc li > input[type='checkbox'] {\n  margin-inline-end: 0.5em;\n  vertical-align: middle;\n}\n\n/* ---------- callout ---------- */\n\n.mk-callout {\n  border: 1px solid var(--mk-callout-border, var(--mk-border));\n  border-left-width: 4px;\n  border-radius: 6px;\n  padding: 0.75rem 1rem;\n  background: var(--mk-callout-bg, var(--mk-surface));\n}\n\n.mk-callout--info {\n  --mk-callout-border: var(--mk-info-ink);\n  --mk-callout-bg: var(--mk-info-fill);\n}\n\n.mk-callout--warning {\n  --mk-callout-border: var(--mk-warning-ink);\n  --mk-callout-bg: var(--mk-warning-fill);\n}\n\n.mk-callout--danger {\n  --mk-callout-border: var(--mk-danger-ink);\n  --mk-callout-bg: var(--mk-danger-fill);\n}\n\n.mk-callout__header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n}\n\n.mk-callout__icon {\n  line-height: 1;\n}\n\n/*\n * `display: flex; flex-direction: column` is load-bearing here, not just\n * `> * + *` margin: several block-holding components (`stat`, `badge`)\n * declare their OWN outer display as `inline-flex`/`inline-block` (correct\n * for sitting inline in a sentence), so without a flex/grid parent they\n * flow side-by-side on the same line instead of stacking — a\n * `margin-block-start` on a same-line inline-level sibling creates no\n * visible gap. Making the body a column flex container forces every\n * child's *used* display to blockify (CSS Flexbox: a flex item's outer\n * display is always block-level), so they stack regardless of the\n * component's own declared display, and the margin rule below then has\n * something to actually separate.\n */\n.mk-callout__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.mk-callout__body > :first-child {\n  margin-block-start: 0.5rem;\n}\n\n.mk-callout__body > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- kbd ---------- */\n\n.mk-kbd {\n  display: inline-block;\n  vertical-align: baseline;\n  line-height: 1.4;\n  height: 1.4em;\n  padding: 0 0.4em;\n  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;\n  font-size: 0.85em;\n  border: 1px solid var(--mk-border);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n  background: var(--mk-surface);\n  box-shadow: inset 0 -1px 0 var(--mk-shadow-sm);\n}\n\n/* ---------- rating ---------- */\n\n.mk-rating {\n  display: inline-flex;\n  gap: 0.15em;\n  font-size: 1.1em;\n  color: var(--mk-faint);\n}\n\n.mk-rating__star--filled {\n  color: var(--mk-warning);\n}\n\n/* ---------- value interpolation ---------- */\n\n.mk-value {\n  display: inline;\n  vertical-align: baseline;\n}\n\n.mk-value--stale {\n  color: var(--mk-warning-ink);\n  border-bottom: 1px dashed var(--mk-warning-ink);\n}\n\n.mk-value--missing {\n  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;\n  font-size: 0.9em;\n  color: var(--mk-faint);\n  font-style: italic;\n}\n\n/*\n * Failure-kind modifiers (`@markii/runtime`'s `FailureKind`, docs/scripting.md) —\n * layered on top of `.mk-value--missing`, only ever added when the\n * resolution's root entry carried a `failureKind` on a genuine error (see\n * `ValueDirective`). Each just tints the dashed-underline treatment a\n * distinct hue so a reader can tell \"script bug\" apart from \"needs\n * permission\" / \"needs a manual run\" / \"hit a resource limit\" at a glance,\n * with the full message still available via the `title` tooltip.\n *\n * Failure kinds map onto the Tier 1 semantic hues: script-error -> danger,\n * capability-denied -> warning, tier-blocked -> info, limit -> limit.\n */\n.mk-value--script-error {\n  border-bottom: 1px dashed var(--mk-danger-ink);\n}\n\n.mk-value--capability-denied {\n  border-bottom: 1px dashed var(--mk-warning-ink);\n}\n\n.mk-value--tier-blocked {\n  border-bottom: 1px dashed var(--mk-info-ink);\n}\n\n.mk-value--limit {\n  border-bottom: 1px dashed var(--mk-limit-ink);\n}\n\n/* ---------- script marker ---------- */\n\n.mk-script {\n  border: 1px solid var(--mk-border);\n  border-radius: 6px;\n  background: var(--mk-surface);\n}\n\n.mk-script__summary {\n  cursor: pointer;\n  padding: 0.5rem 0.75rem;\n  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;\n  font-size: 0.85em;\n  color: var(--mk-muted);\n}\n\n.mk-script[open] > .mk-script__summary {\n  border-bottom: 1px solid var(--mk-border);\n}\n\n.mk-script__code {\n  margin: 0.75rem;\n  margin-block-start: 0;\n}\n\n.mk-script__empty {\n  margin: 0.75rem;\n  margin-block-start: 0;\n  font-size: 0.85em;\n  font-style: italic;\n  color: var(--mk-faint);\n}\n\n/* ---------- details ---------- */\n\n.mk-details {\n  border: 1px solid var(--mk-border);\n  border-radius: 6px;\n  padding: 0.75rem 1rem;\n  background: var(--mk-surface);\n}\n\n.mk-details__summary {\n  cursor: pointer;\n  font-weight: 600;\n}\n\n.mk-details[open] > .mk-details__summary {\n  margin-block-end: 0.5rem;\n}\n\n/* Blockifies inline-flex/inline-block children (`stat`, `badge`, ...) so they stack — see `.mk-callout__body`'s comment above for why this is load-bearing. */\n.mk-details__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.mk-details__body > :first-child {\n  margin-block-start: 0.5rem;\n}\n\n.mk-details__body > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- card ---------- */\n\n.mk-card {\n  border: 1px solid var(--mk-border);\n  border-radius: 8px;\n  padding: 1rem;\n  background: var(--mk-raised);\n}\n\n.mk-card__title {\n  font-weight: 600;\n  margin-block-end: 0.5rem;\n}\n\n/* Blockifies inline-flex/inline-block children (`stat`, `badge`, ...) so they stack — see `.mk-callout__body`'s comment above for why this is load-bearing. */\n.mk-card__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.mk-card__body > :first-child {\n  margin-block-start: 0;\n}\n\n.mk-card__body > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- badge ---------- */\n\n.mk-badge {\n  display: inline-block;\n  vertical-align: baseline;\n  line-height: 1.4;\n  height: 1.4em;\n  padding: 0 0.6em;\n  font-size: 0.8em;\n  font-weight: 600;\n  border-radius: 999px;\n  color: var(--mk-badge-fg, var(--mk-fg));\n  background: var(--mk-badge-bg, var(--mk-surface-strong));\n}\n\n.mk-badge--info {\n  --mk-badge-fg: var(--mk-info-ink);\n  --mk-badge-bg: var(--mk-info-strong-fill);\n}\n\n.mk-badge--success {\n  --mk-badge-fg: var(--mk-success-ink);\n  --mk-badge-bg: var(--mk-success-strong-fill);\n}\n\n.mk-badge--warning {\n  --mk-badge-fg: var(--mk-warning-ink);\n  --mk-badge-bg: var(--mk-warning-strong-fill);\n}\n\n.mk-badge--danger {\n  --mk-badge-fg: var(--mk-danger-ink);\n  --mk-badge-bg: var(--mk-danger-strong-fill);\n}\n\n/* ---------- figure ---------- */\n\n.mk-figure {\n  margin: 0;\n}\n\n.mk-figure__img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  border-radius: 6px;\n}\n\n.mk-figure__caption {\n  margin-block-start: 0.5rem;\n  font-size: 0.9em;\n  color: var(--mk-muted);\n}\n\n.mk-figure__caption > :first-child {\n  margin-block-start: 0;\n}\n\n.mk-figure__caption > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- tabs ---------- */\n\n.mk-tabs__list {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--mk-border);\n}\n\n.mk-tabs__button {\n  cursor: pointer;\n  border: none;\n  background: none;\n  padding: 0.5rem 0.9rem;\n  font: inherit;\n  font-weight: 600;\n  color: var(--mk-muted);\n  border-bottom: 2px solid transparent;\n  margin-block-end: -1px;\n}\n\n.mk-tabs__button--active {\n  color: var(--mk-accent);\n  border-bottom-color: var(--mk-accent);\n}\n\n/* Blockifies inline-flex/inline-block children (`stat`, `badge`, ...) so they stack — see `.mk-callout__body`'s comment above for why this is load-bearing. */\n.mk-tab {\n  display: flex;\n  flex-direction: column;\n  padding-block-start: 0.75rem;\n}\n\n.mk-tab > :first-child {\n  margin-block-start: 0;\n}\n\n.mk-tab > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- stat ---------- */\n\n.mk-stat {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 0.15rem;\n}\n\n.mk-stat__value {\n  font-size: 1.8em;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n.mk-stat__label {\n  font-size: 0.85em;\n  color: var(--mk-muted);\n}\n\n.mk-stat__delta {\n  font-size: 0.85em;\n  font-weight: 600;\n  color: var(--mk-muted);\n}\n\n.mk-stat__delta--up {\n  color: var(--mk-success-ink);\n}\n\n.mk-stat__delta--down {\n  color: var(--mk-danger-ink);\n}\n\n.mk-stat__delta--flat {\n  color: var(--mk-muted);\n}\n\n/* ---------- progress ---------- */\n\n.mk-progress {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n}\n\n.mk-progress__label {\n  font-size: 0.85em;\n  color: var(--mk-muted);\n  flex: 0 0 auto;\n}\n\n.mk-progress__track {\n  flex: 1 1 auto;\n  height: 0.6rem;\n  border-radius: 999px;\n  background: var(--mk-border);\n  overflow: hidden;\n}\n\n.mk-progress__bar {\n  height: 100%;\n  background: var(--mk-accent);\n  border-radius: inherit;\n}\n\n.mk-progress__percent {\n  flex: 0 0 auto;\n  font-size: 0.85em;\n  font-variant-numeric: tabular-nums;\n  color: var(--mk-muted);\n}\n\n/* ---------- chart ---------- */\n\n.mk-chart {\n  display: block;\n  max-width: 100%;\n}\n\n.mk-chart__line {\n  fill: none;\n  stroke: var(--mk-accent);\n  stroke-width: 2;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n\n.mk-chart__bar {\n  fill: var(--mk-accent);\n}\n\n.mk-chart--empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.8em;\n  font-style: italic;\n  color: var(--mk-faint);\n  border: 1px dashed var(--mk-border);\n  border-radius: 6px;\n}\n\n/* ---------- data-binding state (docs/scripting.md) ---------- */\n\n/*\n * The block twins of the `.mk-value--*` markers above: a data-bound\n * component (`stat`, `progress`, `chart`) whose `data=` binding is stale or\n * failed keeps its ordinary QUIET body — `—`, a `0%` bar, `no data` — and\n * says so only through these hooks plus its `title` tooltip. No rule here\n * may add body text (`content:` is deliberately absent) or an outer margin;\n * the failure taxonomy's wording lives in one place only, `components/\n * failure-presentation.ts`.\n *\n * The hues match `.mk-value--*` exactly, so the same failing name reads the\n * same whether it surfaced inline via `:value[...]` or as a component.\n */\n.mk-stat--stale,\n.mk-progress--stale,\n.mk-chart--stale {\n  opacity: 0.8;\n}\n\n.mk-stat--script-error,\n.mk-progress--script-error,\n.mk-chart--script-error {\n  border-bottom: 2px solid var(--mk-danger-ink);\n}\n\n.mk-stat--capability-denied,\n.mk-progress--capability-denied,\n.mk-chart--capability-denied {\n  border-bottom: 2px solid var(--mk-warning-ink);\n}\n\n.mk-stat--tier-blocked,\n.mk-progress--tier-blocked,\n.mk-chart--tier-blocked {\n  border-bottom: 2px solid var(--mk-info-ink);\n}\n\n.mk-stat--limit,\n.mk-progress--limit,\n.mk-chart--limit {\n  border-bottom: 2px solid var(--mk-limit-ink);\n}\n\n/* ---------- layout presets (docs/format.md) ---------- */\n\n/*\n * `render.tsx` only wraps a directive in a `mk-width-*`/`mk-align-*` `<div>`\n * when at least one of these classes actually applies, so the wrapper below\n * IS the element sitting directly in `.doc`'s rhythm flow — never\n * `margin-block` here, that's `.doc > * + *`'s job alone; setting it on the\n * wrapper too would double up spacing. `max-width: min(<size>, 100%)` keeps\n * every preset from ever overflowing the document column, even on a narrow\n * viewport where the size below is wider than the column itself.\n */\n.mk-width-narrow {\n  max-width: min(30rem, 100%);\n}\n\n.mk-width-wide {\n  max-width: min(64rem, 100%);\n}\n\n/* \"full\" is the full available column width — not a viewport-bleed hack with negative margins. */\n.mk-width-full {\n  max-width: 100%;\n}\n\n.mk-align-left {\n  margin-inline-end: auto;\n}\n\n.mk-align-center {\n  margin-inline: auto;\n}\n\n.mk-align-right {\n  margin-inline-start: auto;\n}\n\n/*\n * The five `:::center`/`:::right`/`:::wide`/`:::narrow`/`:::full` layout\n * wrappers (docs/format.md, `layout-wrapper.tsx`) reuse the `mk-width-*`/\n * `mk-align-*` classes above and add `mk-layout` on top for the rules below,\n * which only make sense on a container that has its OWN plain-markdown\n * children (a table, an image, a paragraph) rather than on the bare\n * attribute-interception wrapper `render.tsx` emits for `width=`/`align=`.\n *\n * No outer margin on `.mk-layout` itself, same rule as every component\n * (Architecture rule 4) — `.doc > * + *` spaces the wrapper against its\n * siblings. This rule instead restores RHYTHM *inside* the wrapper's own\n * scope, mirroring `.mk-card__body > * + *`: without it, the wrapper's\n * children would have no spacing between them at all, since `.doc > * + *`\n * only ever sees the wrapper `<div>` as a whole, never reaches inside it.\n */\n.mk-layout > * + * {\n  margin-block-start: 1rem;\n}\n\n/* `center`/`right` additionally set text alignment for everything in scope — not just the shrink-to-fit block alignment below. */\n.mk-layout.mk-align-center {\n  text-align: center;\n}\n\n.mk-layout.mk-align-right {\n  text-align: right;\n}\n\n/*\n * `.mk-align-center`/`.mk-align-right` above (shared with the `align=`\n * attribute wrapper) only center/right-align the wrapper `<div>` ITSELF\n * within ITS container — they say nothing about the wrapper's own children.\n * These two rules do that: they shrink-to-fit and align every direct child\n * of the wrapper's scope, which is what actually centers/right-aligns a\n * narrower-than-column table or image sitting inside `:::center`/`:::right`.\n */\n.mk-layout.mk-align-center > * {\n  margin-inline: auto;\n}\n\n.mk-layout.mk-align-right > * {\n  margin-inline-start: auto;\n  margin-inline-end: 0;\n}\n\n/*\n * `.doc table` (above) sets `display: block` for horizontal-scroll\n * overflow, which also makes the table fill its column — defeating\n * shrink-to-fit alignment before it can even apply. These two rules size a\n * table down to its content instead, so the `margin-inline` rules above\n * have a narrower box to actually move. `.doc th`/`.doc td` set\n * `text-align: left` directly on the cells, so this scope's `text-align`\n * never flips table cell text — only the table's own position in the\n * scope, and any non-table text alongside it.\n */\n.mk-layout.mk-align-center > table,\n.mk-layout.mk-align-right > table {\n  width: fit-content;\n  max-width: 100%;\n}\n\n/* ---------- row ---------- */\n\n.mk-row {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));\n}\n\n/*\n * `minmax(0, 1fr)` — a bare `1fr` track can still grow past an equal share\n * to fit a wide intrinsic-content cell (e.g. a `chart` SVG, a long code\n * span); pinning the minimum to `0` is what keeps such a cell, and\n * therefore the whole row, from blowing out past its column.\n */\n.mk-row--cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.mk-row--cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.mk-row--cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n/*\n * No separate blockification rule is needed here, unlike `.mk-card__body`'s:\n * a grid container (which `.mk-row` is) already promotes every direct\n * child's outer display to block-level as a grid item, same as a flex\n * container does — an inline-flex/inline-block component (`stat`, `badge`,\n * ...) used directly as a row cell already stacks/sizes as a proper grid\n * cell with no extra rule required.\n */\n\n@media (max-width: 40rem) {\n  .mk-row,\n  .mk-row--cols-2,\n  .mk-row--cols-3,\n  .mk-row--cols-4 {\n    grid-template-columns: 1fr;\n  }\n}\n\n/*\n * `:::row{align=...}` (docs/format.md): `align` is intercepted like on any\n * other block directive (`render.tsx`/`layout.ts`), wrapping `.mk-row` in\n * the same generic `mk-align-*` `<div>` every other directive gets — but\n * `margin-inline: auto` (the rule above, under \"layout presets\") has\n * nothing to move: a `.mk-row` grid already fills the document column, so\n * shrink-to-fit placement of the row itself is meaningless. These three\n * rules give `align` on a row its own, more useful meaning instead: they\n * set `text-align` on the row, which every cell's content INHERITS (plain\n * CSS inheritance — `.mk-cell` sets no `text-align` of its own, so nothing\n * blocks it). Scoped to `> .mk-row` specifically, so a non-row directive's\n * `align` wrapper is completely unaffected.\n *\n * Locality wins for free: a more local `:::center`/`:::left`/`:::right`\n * wrapper written inside one cell (`.mk-layout.mk-align-*` above) sets\n * `text-align` directly on itself, and an element's own declared value\n * always wins over one it only inherited — no specificity fight needed.\n */\n.mk-align-left > .mk-row {\n  text-align: left;\n}\n\n.mk-align-center > .mk-row {\n  text-align: center;\n}\n\n.mk-align-right > .mk-row {\n  text-align: right;\n}\n\n/* ---------- cell ---------- */\n\n/*\n * `:::cell` (`cell.tsx`) is a TRANSPARENT grouping container: it has no\n * border, background, padding, or outer margin of its own — its whole job is\n * making several blocks count as ONE `.mk-row` grid cell, so anything visual\n * here would betray that. `.mk-cell` therefore has no rule at all; only the\n * rhythm-restoring rule below exists, mirroring `.mk-layout > * + *`:\n * `.doc > * + *` sees the cell as a single box and never reaches inside it,\n * so without this its children would sit flush against each other.\n */\n.mk-cell > * + * {\n  margin-block-start: 1rem;\n}\n\n/* ---------- empty inline-component marker ---------- */\n\n/*\n * Wraps an `inline: true` component that received no content\n * (`::badge{label=\"x\"}` instead of `:badge[x]`) — see `render.tsx`'s\n * `isRegisteredInline`/`isEmptyContent` and `render.ts`'s HTML-engine\n * mirror. The component underneath renders unchanged; this is a quiet\n * perceptual hook only (a faint dashed underline, matching the treatment\n * `.mk-value--stale` already gives a quiet-but-present state), with the\n * reason carried in the `title` tooltip rather than in the page.\n */\n.mk-inline-empty {\n  border-bottom: 1px dashed var(--mk-faint);\n}\n\n/* ---------- unknown directive fallback ---------- */\n\n.mk-unknown {\n  border: 1px dashed var(--mk-faint);\n  border-radius: 6px;\n  color: var(--mk-muted);\n}\n\n.mk-unknown--block {\n  padding: 0.75rem 1rem;\n}\n\n.mk-unknown--inline {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 0.4em;\n  padding: 0 0.4em;\n  vertical-align: baseline;\n}\n\n.mk-unknown__label {\n  font-size: 0.85em;\n  font-style: italic;\n  margin: 0;\n}\n\n.mk-unknown__content > :first-child {\n  margin-block-start: 0.5rem;\n}\n\n.mk-unknown__content > * + * {\n  margin-block-start: 0.5rem;\n}\n";
+export const DOC_CSS = "/*\n * Document rhythm: components own their insides only, never outer margins.\n * This single rule spaces every block-level child of `.doc` identically —\n * paragraphs, headings, and components alike — so new components always\n * sit correctly in the flow with zero per-component tuning.\n */\n.doc > * + * {\n  margin-block-start: 1rem;\n}\n\n/*\n * ============================================================================\n * TIER 1 TOKENS — the theming contract\n * ============================================================================\n * Every host that wants a themed (in particular, a dark) `.doc` remaps ONLY\n * these custom properties, deliberately scoped to `.doc` and not `:root`:\n * `doc.css` is a library stylesheet embedded into other people's pages\n * (Obsidian injects it globally), so it must stay polite and never claim\n * `:root`. A host theme layer loaded after this one, at the same\n * specificity, simply redeclares the ones below on `.doc` (or a more\n * specific selector) to win the cascade — see `apps/vscode/src/webview/\n * theme.css` and `apps/obsidian/src/obsidian-theme.css`.\n *\n * Nine neutrals + five semantic hues. This list is deliberately small: a\n * host maps ~14 tokens instead of ~60 individual selectors, and a\n * derivation layer below (Tier 2) builds every finer shade FROM these, so\n * remapping these 14 makes every callout/badge/chart/etc. variant\n * theme-correct for free.\n */\n.doc {\n  /* ---------- neutrals ---------- */\n  --mk-bg: #fff; /* page ground */\n  --mk-raised: #fff; /* raised surface for cards — distinct from ground; dark themes need real separation here where light themes get it from the border alone */\n  --mk-fg: #1a1a1a; /* body text */\n  --mk-surface: #f4f4f5; /* subtle fill one step off the ground: pre, kbd, script marker, details, default callout, zebra rows */\n  --mk-surface-strong: #f0f0f2; /* second step off the ground: inline code, th, progress track, default badge background */\n  --mk-border: #e4e4e7; /* hairlines */\n  --mk-muted: #52525b; /* secondary text: captions, labels, script summary */\n  --mk-faint: #94a3b8; /* tertiary/empty: missing values, empty-chart text, unfilled stars */\n  --mk-accent: #3b82f6; /* the single interactive/brand color: active tab, progress bar, chart stroke/fill */\n  --mk-on-accent: #fff; /* ink that sits ON a solid --mk-accent fill; a host must supply this because it cannot be derived: it depends on the accent's own lightness, not on the page palette */\n\n  /* ---------- semantic hues ---------- */\n  --mk-info: #3b82f6;\n  --mk-success: #15803d;\n  --mk-warning: #d97706;\n  --mk-danger: #dc2626;\n  --mk-limit: #7c3aed; /* the purple, used for the \"hit a resource limit\" failure kind */\n}\n\n/*\n * ============================================================================\n * TIER 2 DERIVATION FORMULAS\n * ============================================================================\n * Every finer shade `doc.css` needs (a callout's tinted background, a\n * badge's tinted text) is a MIX of a Tier 1 hue against `--mk-bg`/`--mk-fg`,\n * never a literal of its own. Because the mix targets those two tokens\n * specifically, a dark host palette flips the derived shade's polarity\n * correctly with no extra work on the host's part — the whole point of\n * this refactor.\n *\n * Exactly three named percentages are used anywhere in this file. A future\n * component reuses one of these three; it does not invent a fourth.\n *\n *   --mk-mix-variant-fill:  color-mix(in srgb, <hue> 14%, var(--mk-bg))\n *     A quiet tinted background — callout body fill.\n *   --mk-mix-strong-fill:   color-mix(in srgb, <hue> 18%, var(--mk-bg))\n *     A slightly stronger tinted background — badge background.\n *   --mk-mix-ink:           color-mix(in srgb, <hue> 85%, var(--mk-fg))\n *     A hue nudged toward body text — usable as ink (badge text, star\n *     color) or as a border (callout border).\n *\n * `color-mix()` is unsupported in most email clients, and a custom property\n * whose value fails to parse does not fall back — the declaration goes\n * invalid-at-computed-value and effectively vanishes. `doc.css` is embedded\n * verbatim into `@markii/html`'s `exportHtmlDocument`, whose documented\n * targets include email and archive output, so every derived token below is\n * defined TWICE: first as a literal hex (today's existing light-mode\n * value), then, guarded by `@supports (color: color-mix(in srgb, red,\n * red))`, redefined via the real mix. A modern browser or either Electron\n * host gets live derivation that tracks a remapped Tier 1 palette; an old\n * email client silently keeps exactly today's light palette.\n */\n.doc {\n  /* ---- literal light-mode fallback (used verbatim where color-mix is unsupported) ---- */\n  --mk-info-fill: #eff6ff;\n  --mk-info-strong-fill: #dbeafe;\n  --mk-info-ink: #3b82f6;\n  --mk-success-strong-fill: #dcfce7;\n  --mk-success-ink: #15803d;\n  --mk-warning-fill: #fffbeb;\n  --mk-warning-strong-fill: #fef3c7;\n  --mk-warning-ink: #d97706;\n  --mk-danger-fill: #fef2f2;\n  --mk-danger-strong-fill: #fee2e2;\n  --mk-danger-ink: #dc2626;\n  --mk-limit-ink: #7c3aed;\n  /*\n   * The keycap's inset depth line. Not a themed hue, but not theme-neutral\n   * either: a low-alpha BLACK line is invisible on a dark surface, so the\n   * literal below is only the no-`color-mix` fallback (where the palette is\n   * the light one anyway). The derivation in the `@supports` block below\n   * expresses it against `--mk-fg` instead, so it flips to a light line\n   * when a host supplies a dark palette, which is the correct depth cue\n   * there. Kept in this block, not the Tier 1 block above, so its literal\n   * stays inside a block the no-raw-color-literal test allows.\n   */\n  --mk-shadow-sm: rgba(0, 0, 0, 0.05);\n}\n\n@supports (color: color-mix(in srgb, red, red)) {\n  .doc {\n    --mk-shadow-sm: color-mix(in srgb, var(--mk-fg) 8%, transparent);\n\n    --mk-info-fill: color-mix(in srgb, var(--mk-info) 14%, var(--mk-bg));\n    --mk-info-strong-fill: color-mix(in srgb, var(--mk-info) 18%, var(--mk-bg));\n    --mk-info-ink: color-mix(in srgb, var(--mk-info) 85%, var(--mk-fg));\n\n    --mk-success-strong-fill: color-mix(\n      in srgb,\n      var(--mk-success) 18%,\n      var(--mk-bg)\n    );\n    --mk-success-ink: color-mix(in srgb, var(--mk-success) 85%, var(--mk-fg));\n\n    --mk-warning-fill: color-mix(in srgb, var(--mk-warning) 14%, var(--mk-bg));\n    --mk-warning-strong-fill: color-mix(\n      in srgb,\n      var(--mk-warning) 18%,\n      var(--mk-bg)\n    );\n    --mk-warning-ink: color-mix(in srgb, var(--mk-warning) 85%, var(--mk-fg));\n\n    --mk-danger-fill: color-mix(in srgb, var(--mk-danger) 14%, var(--mk-bg));\n    --mk-danger-strong-fill: color-mix(\n      in srgb,\n      var(--mk-danger) 18%,\n      var(--mk-bg)\n    );\n    --mk-danger-ink: color-mix(in srgb, var(--mk-danger) 85%, var(--mk-fg));\n\n    --mk-limit-ink: color-mix(in srgb, var(--mk-limit) 85%, var(--mk-fg));\n  }\n}\n\n.doc {\n  color: var(--mk-fg);\n  font-family:\n    system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  line-height: 1.6;\n}\n\n.doc pre {\n  overflow-x: auto;\n  background: var(--mk-surface);\n  padding: 0.75rem 1rem;\n  border-radius: 6px;\n}\n\n.doc code {\n  background: var(--mk-surface-strong);\n  border-radius: 3px;\n  padding: 0.1em 0.35em;\n  font-size: 0.9em;\n}\n\n.doc pre code {\n  background: none;\n  padding: 0;\n}\n\n/* ---------- GFM table ---------- */\n\n/*\n * `display: block` on the table itself (rather than wrapping it in an\n * extra element the renderer doesn't otherwise inject) is what makes a wide\n * table scroll horizontally instead of overflowing the page or the doc\n * column — the table box becomes independently scrollable content, the\n * same trick used by GitHub's own Markdown rendering.\n */\n.doc table {\n  display: block;\n  overflow-x: auto;\n  border-collapse: collapse;\n  font-size: 0.95em;\n}\n\n.doc th,\n.doc td {\n  border: 1px solid var(--mk-border);\n  padding: 0.4rem 0.75rem;\n  text-align: left;\n}\n\n.doc th {\n  font-weight: 600;\n  background: var(--mk-surface-strong);\n}\n\n.doc tr:nth-child(even) {\n  background: var(--mk-surface);\n}\n\n/* ---------- GFM task list ---------- */\n\n/*\n * `li:has(> input[type=\"checkbox\"])` scopes bullet removal + checkbox\n * alignment to task-list items only — an ordinary `<ul>`/`<ol>` item keeps\n * its normal bullet/number, since GFM only adds a leading `<input>` to\n * items that used `- [ ]`/`- [x]` syntax.\n */\n.doc li:has(> input[type='checkbox']) {\n  list-style: none;\n  margin-inline-start: -1.5em;\n}\n\n.doc li > input[type='checkbox'] {\n  margin-inline-end: 0.5em;\n  vertical-align: middle;\n}\n\n/* ---------- callout ---------- */\n\n.mk-callout {\n  border: 1px solid var(--mk-callout-border, var(--mk-border));\n  border-left-width: 4px;\n  border-radius: 6px;\n  padding: 0.75rem 1rem;\n  background: var(--mk-callout-bg, var(--mk-surface));\n}\n\n.mk-callout--info {\n  --mk-callout-border: var(--mk-info-ink);\n  --mk-callout-bg: var(--mk-info-fill);\n}\n\n.mk-callout--warning {\n  --mk-callout-border: var(--mk-warning-ink);\n  --mk-callout-bg: var(--mk-warning-fill);\n}\n\n.mk-callout--danger {\n  --mk-callout-border: var(--mk-danger-ink);\n  --mk-callout-bg: var(--mk-danger-fill);\n}\n\n.mk-callout__header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n}\n\n.mk-callout__icon {\n  line-height: 1;\n}\n\n/*\n * `display: flex; flex-direction: column` is load-bearing here, not just\n * `> * + *` margin: several block-holding components (`stat`, `badge`)\n * declare their OWN outer display as `inline-flex`/`inline-block` (correct\n * for sitting inline in a sentence), so without a flex/grid parent they\n * flow side-by-side on the same line instead of stacking — a\n * `margin-block-start` on a same-line inline-level sibling creates no\n * visible gap. Making the body a column flex container forces every\n * child's *used* display to blockify (CSS Flexbox: a flex item's outer\n * display is always block-level), so they stack regardless of the\n * component's own declared display, and the margin rule below then has\n * something to actually separate.\n */\n.mk-callout__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.mk-callout__body > :first-child {\n  margin-block-start: 0.5rem;\n}\n\n.mk-callout__body > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- kbd ---------- */\n\n.mk-kbd {\n  display: inline-block;\n  vertical-align: baseline;\n  line-height: 1.4;\n  height: 1.4em;\n  padding: 0 0.4em;\n  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;\n  font-size: 0.85em;\n  border: 1px solid var(--mk-border);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n  background: var(--mk-surface);\n  box-shadow: inset 0 -1px 0 var(--mk-shadow-sm);\n}\n\n/* ---------- rating ---------- */\n\n.mk-rating {\n  display: inline-flex;\n  gap: 0.15em;\n  font-size: 1.1em;\n  color: var(--mk-faint);\n}\n\n.mk-rating__star--filled {\n  color: var(--mk-warning);\n}\n\n/* ---------- divider ---------- */\n\n/*\n * The `::before`/`::after` pseudo-elements are the flanking hairlines; the\n * label sits between them as ordinary flex children. The label carries its\n * own inline margin rather than a flex `gap` because an unlabeled divider\n * has no label element to create a gap around — with `gap` the rule would\n * split into two disconnected segments instead of staying one unbroken\n * line.\n */\n\n.mk-divider {\n  display: flex;\n  align-items: center;\n  color: var(--mk-faint);\n}\n\n.mk-divider::before,\n.mk-divider::after {\n  content: '';\n  flex: 1 1 0;\n  border-block-start: 1px solid var(--mk-border);\n}\n\n.mk-divider--dots::before,\n.mk-divider--dots::after {\n  border-block-start-style: dotted;\n}\n\n.mk-divider--ornament::before,\n.mk-divider--ornament::after {\n  border-block-start-color: transparent;\n}\n\n.mk-divider--label-left::before {\n  flex: 0 0 1.5rem;\n}\n\n.mk-divider--label-right::after {\n  flex: 0 0 1.5rem;\n}\n\n.mk-divider__label {\n  margin-inline: 0.75em;\n  font-size: 0.85em;\n  color: var(--mk-muted);\n}\n\n.mk-divider__ornament {\n  margin-inline: 0.35em;\n  font-size: 0.9em;\n}\n\n/* ---------- value interpolation ---------- */\n\n.mk-value {\n  display: inline;\n  vertical-align: baseline;\n}\n\n.mk-value--stale {\n  color: var(--mk-warning-ink);\n  border-bottom: 1px dashed var(--mk-warning-ink);\n}\n\n.mk-value--missing {\n  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;\n  font-size: 0.9em;\n  color: var(--mk-faint);\n  font-style: italic;\n}\n\n/*\n * Failure-kind modifiers (`@markii/runtime`'s `FailureKind`, docs/scripting.md) —\n * layered on top of `.mk-value--missing`, only ever added when the\n * resolution's root entry carried a `failureKind` on a genuine error (see\n * `ValueDirective`). Each just tints the dashed-underline treatment a\n * distinct hue so a reader can tell \"script bug\" apart from \"needs\n * permission\" / \"needs a manual run\" / \"hit a resource limit\" at a glance,\n * with the full message still available via the `title` tooltip.\n *\n * Failure kinds map onto the Tier 1 semantic hues: script-error -> danger,\n * capability-denied -> warning, tier-blocked -> info, limit -> limit.\n */\n.mk-value--script-error {\n  border-bottom: 1px dashed var(--mk-danger-ink);\n}\n\n.mk-value--capability-denied {\n  border-bottom: 1px dashed var(--mk-warning-ink);\n}\n\n.mk-value--tier-blocked {\n  border-bottom: 1px dashed var(--mk-info-ink);\n}\n\n.mk-value--limit {\n  border-bottom: 1px dashed var(--mk-limit-ink);\n}\n\n/* ---------- script marker ---------- */\n\n.mk-script {\n  border: 1px solid var(--mk-border);\n  border-radius: 6px;\n  background: var(--mk-surface);\n}\n\n.mk-script__summary {\n  cursor: pointer;\n  padding: 0.5rem 0.75rem;\n  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;\n  font-size: 0.85em;\n  color: var(--mk-muted);\n}\n\n.mk-script[open] > .mk-script__summary {\n  border-bottom: 1px solid var(--mk-border);\n}\n\n.mk-script__code {\n  margin: 0.75rem;\n  margin-block-start: 0;\n}\n\n.mk-script__empty {\n  margin: 0.75rem;\n  margin-block-start: 0;\n  font-size: 0.85em;\n  font-style: italic;\n  color: var(--mk-faint);\n}\n\n/* ---------- details ---------- */\n\n.mk-details {\n  border: 1px solid var(--mk-border);\n  border-radius: 6px;\n  padding: 0.75rem 1rem;\n  background: var(--mk-surface);\n}\n\n.mk-details__summary {\n  cursor: pointer;\n  font-weight: 600;\n}\n\n.mk-details[open] > .mk-details__summary {\n  margin-block-end: 0.5rem;\n}\n\n/* Blockifies inline-flex/inline-block children (`stat`, `badge`, ...) so they stack — see `.mk-callout__body`'s comment above for why this is load-bearing. */\n.mk-details__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.mk-details__body > :first-child {\n  margin-block-start: 0.5rem;\n}\n\n.mk-details__body > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- card ---------- */\n\n.mk-card {\n  border: 1px solid var(--mk-border);\n  border-radius: 8px;\n  padding: 1rem;\n  background: var(--mk-raised);\n}\n\n.mk-card__title {\n  font-weight: 600;\n  margin-block-end: 0.5rem;\n}\n\n/* Blockifies inline-flex/inline-block children (`stat`, `badge`, ...) so they stack — see `.mk-callout__body`'s comment above for why this is load-bearing. */\n.mk-card__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.mk-card__body > :first-child {\n  margin-block-start: 0;\n}\n\n.mk-card__body > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- badge ---------- */\n\n.mk-badge {\n  display: inline-block;\n  vertical-align: baseline;\n  line-height: 1.4;\n  height: 1.4em;\n  padding: 0 0.6em;\n  font-size: 0.8em;\n  font-weight: 600;\n  border-radius: 999px;\n  color: var(--mk-badge-fg, var(--mk-fg));\n  background: var(--mk-badge-bg, var(--mk-surface-strong));\n}\n\n.mk-badge--info {\n  --mk-badge-fg: var(--mk-info-ink);\n  --mk-badge-bg: var(--mk-info-strong-fill);\n}\n\n.mk-badge--success {\n  --mk-badge-fg: var(--mk-success-ink);\n  --mk-badge-bg: var(--mk-success-strong-fill);\n}\n\n.mk-badge--warning {\n  --mk-badge-fg: var(--mk-warning-ink);\n  --mk-badge-bg: var(--mk-warning-strong-fill);\n}\n\n.mk-badge--danger {\n  --mk-badge-fg: var(--mk-danger-ink);\n  --mk-badge-bg: var(--mk-danger-strong-fill);\n}\n\n/* ---------- figure ---------- */\n\n.mk-figure {\n  margin: 0;\n}\n\n.mk-figure__img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  border-radius: 6px;\n}\n\n.mk-figure__caption {\n  margin-block-start: 0.5rem;\n  font-size: 0.9em;\n  color: var(--mk-muted);\n}\n\n.mk-figure__caption > :first-child {\n  margin-block-start: 0;\n}\n\n.mk-figure__caption > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- tabs ---------- */\n\n.mk-tabs__list {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--mk-border);\n}\n\n.mk-tabs__button {\n  cursor: pointer;\n  border: none;\n  background: none;\n  padding: 0.5rem 0.9rem;\n  font: inherit;\n  font-weight: 600;\n  color: var(--mk-muted);\n  border-bottom: 2px solid transparent;\n  margin-block-end: -1px;\n}\n\n.mk-tabs__button--active {\n  color: var(--mk-accent);\n  border-bottom-color: var(--mk-accent);\n}\n\n/* Blockifies inline-flex/inline-block children (`stat`, `badge`, ...) so they stack — see `.mk-callout__body`'s comment above for why this is load-bearing. */\n.mk-tab {\n  display: flex;\n  flex-direction: column;\n  padding-block-start: 0.75rem;\n}\n\n.mk-tab > :first-child {\n  margin-block-start: 0;\n}\n\n.mk-tab > * + * {\n  margin-block-start: 0.5rem;\n}\n\n/* ---------- stat ---------- */\n\n.mk-stat {\n  display: inline-flex;\n  flex-direction: column;\n  gap: 0.15rem;\n}\n\n.mk-stat__value {\n  font-size: 1.8em;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n.mk-stat__label {\n  font-size: 0.85em;\n  color: var(--mk-muted);\n}\n\n.mk-stat__delta {\n  font-size: 0.85em;\n  font-weight: 600;\n  color: var(--mk-muted);\n}\n\n.mk-stat__delta--up {\n  color: var(--mk-success-ink);\n}\n\n.mk-stat__delta--down {\n  color: var(--mk-danger-ink);\n}\n\n.mk-stat__delta--flat {\n  color: var(--mk-muted);\n}\n\n/* ---------- progress ---------- */\n\n.mk-progress {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n}\n\n.mk-progress__label {\n  font-size: 0.85em;\n  color: var(--mk-muted);\n  flex: 0 0 auto;\n}\n\n.mk-progress__track {\n  flex: 1 1 auto;\n  height: 0.6rem;\n  border-radius: 999px;\n  background: var(--mk-border);\n  overflow: hidden;\n}\n\n.mk-progress__bar {\n  height: 100%;\n  background: var(--mk-accent);\n  border-radius: inherit;\n}\n\n.mk-progress__percent {\n  flex: 0 0 auto;\n  font-size: 0.85em;\n  font-variant-numeric: tabular-nums;\n  color: var(--mk-muted);\n}\n\n/* ---------- chart ---------- */\n\n.mk-chart {\n  display: block;\n  max-width: 100%;\n}\n\n.mk-chart__line {\n  fill: none;\n  stroke: var(--mk-accent);\n  stroke-width: 2;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n\n.mk-chart__bar {\n  fill: var(--mk-accent);\n}\n\n.mk-chart--empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.8em;\n  font-style: italic;\n  color: var(--mk-faint);\n  border: 1px dashed var(--mk-border);\n  border-radius: 6px;\n}\n\n/* ---------- data-binding state (docs/scripting.md) ---------- */\n\n/*\n * The block twins of the `.mk-value--*` markers above: a data-bound\n * component (`stat`, `progress`, `chart`) whose `data=` binding is stale or\n * failed keeps its ordinary QUIET body — `—`, a `0%` bar, `no data` — and\n * says so only through these hooks plus its `title` tooltip. No rule here\n * may add body text (`content:` is deliberately absent) or an outer margin;\n * the failure taxonomy's wording lives in one place only, `components/\n * failure-presentation.ts`.\n *\n * The hues match `.mk-value--*` exactly, so the same failing name reads the\n * same whether it surfaced inline via `:value[...]` or as a component.\n */\n.mk-stat--stale,\n.mk-progress--stale,\n.mk-chart--stale {\n  opacity: 0.8;\n}\n\n.mk-stat--script-error,\n.mk-progress--script-error,\n.mk-chart--script-error {\n  border-bottom: 2px solid var(--mk-danger-ink);\n}\n\n.mk-stat--capability-denied,\n.mk-progress--capability-denied,\n.mk-chart--capability-denied {\n  border-bottom: 2px solid var(--mk-warning-ink);\n}\n\n.mk-stat--tier-blocked,\n.mk-progress--tier-blocked,\n.mk-chart--tier-blocked {\n  border-bottom: 2px solid var(--mk-info-ink);\n}\n\n.mk-stat--limit,\n.mk-progress--limit,\n.mk-chart--limit {\n  border-bottom: 2px solid var(--mk-limit-ink);\n}\n\n/* ---------- layout presets (docs/format.md) ---------- */\n\n/*\n * `render.tsx` only wraps a directive in a `mk-width-*`/`mk-align-*` `<div>`\n * when at least one of these classes actually applies, so the wrapper below\n * IS the element sitting directly in `.doc`'s rhythm flow — never\n * `margin-block` here, that's `.doc > * + *`'s job alone; setting it on the\n * wrapper too would double up spacing. `max-width: min(<size>, 100%)` keeps\n * every preset from ever overflowing the document column, even on a narrow\n * viewport where the size below is wider than the column itself.\n */\n.mk-width-narrow {\n  max-width: min(30rem, 100%);\n}\n\n.mk-width-wide {\n  max-width: min(64rem, 100%);\n}\n\n/* \"full\" is the full available column width — not a viewport-bleed hack with negative margins. */\n.mk-width-full {\n  max-width: 100%;\n}\n\n/*\n * \"fit\" is the one preset that sets `width` rather than only capping it: it\n * shrinks the block to its own content instead of filling the column, and\n * `max-width` keeps that from overflowing when the content is wider than\n * the column. Because the box is now narrower than its container, the\n * `mk-align-*` auto margins below finally have room to work, which is what\n * makes `{width=fit align=right}` hug the content AND sit right.\n */\n.mk-width-fit {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.mk-align-left {\n  margin-inline-end: auto;\n}\n\n.mk-align-center {\n  margin-inline: auto;\n}\n\n.mk-align-right {\n  margin-inline-start: auto;\n}\n\n/*\n * The `:::center`/`:::left`/`:::right`/`:::wide`/`:::narrow`/`:::full`/`:::fit`\n * layout wrappers (docs/format.md, `layout-wrapper.tsx`) reuse the `mk-width-*`/\n * `mk-align-*` classes above and add `mk-layout` on top for the rules below,\n * which only make sense on a container that has its OWN plain-markdown\n * children (a table, an image, a paragraph) rather than on the bare\n * attribute-interception wrapper `render.tsx` emits for `width=`/`align=`.\n *\n * No outer margin on `.mk-layout` itself, same rule as every component\n * (Architecture rule 4) — `.doc > * + *` spaces the wrapper against its\n * siblings. This rule instead restores RHYTHM *inside* the wrapper's own\n * scope, mirroring `.mk-card__body > * + *`: without it, the wrapper's\n * children would have no spacing between them at all, since `.doc > * + *`\n * only ever sees the wrapper `<div>` as a whole, never reaches inside it.\n */\n.mk-layout > * + * {\n  margin-block-start: 1rem;\n}\n\n/*\n * An alignment wrapper additionally sets text alignment for everything in\n * scope, not just the shrink-to-fit block alignment below. `left` carries\n * its own rule for a reason: it is the one wrapper written specifically to\n * opt a scope back OUT of an alignment it inherited (a cell of a\n * `:::row{text=center}`), and only a DECLARED value beats an inherited one.\n * Without this rule `:::left` would silently keep the centered text it was\n * written to undo.\n */\n.mk-layout.mk-align-left {\n  text-align: left;\n}\n\n.mk-layout.mk-align-center {\n  text-align: center;\n}\n\n.mk-layout.mk-align-right {\n  text-align: right;\n}\n\n/*\n * `.mk-align-center`/`.mk-align-right` above (shared with the `align=`\n * attribute wrapper) only center/right-align the wrapper `<div>` ITSELF\n * within ITS container — they say nothing about the wrapper's own children.\n * These two rules do that: they shrink-to-fit and align every direct child\n * of the wrapper's scope, which is what actually centers/right-aligns a\n * narrower-than-column table or image sitting inside `:::center`/`:::right`.\n */\n.mk-layout.mk-align-center > * {\n  margin-inline: auto;\n}\n\n.mk-layout.mk-align-right > * {\n  margin-inline-start: auto;\n  margin-inline-end: 0;\n}\n\n/*\n * `.doc table` (above) sets `display: block` for horizontal-scroll\n * overflow, which also makes the table fill its column — defeating\n * shrink-to-fit alignment before it can even apply. These two rules size a\n * table down to its content instead, so the `margin-inline` rules above\n * have a narrower box to actually move. `.doc th`/`.doc td` set\n * `text-align: left` directly on the cells, so this scope's `text-align`\n * never flips table cell text — only the table's own position in the\n * scope, and any non-table text alongside it.\n */\n.mk-layout.mk-align-center > table,\n.mk-layout.mk-align-right > table {\n  width: fit-content;\n  max-width: 100%;\n}\n\n/* ---------- text alignment inside a component (docs/format.md) ---------- */\n\n/*\n * The `text` attribute of `row`, `cell`, `card`, and `callout`. Deliberately\n * separate from the `mk-align-*` classes above: those place a block's BOX\n * within the column and never touch its contents, while these align the\n * content inside one component and never move its box. Two different jobs,\n * two different class names, so neither can be mistaken for the other.\n *\n * One rule per value, defined once and honored by all four components, which\n * is what lets `:::row{text=center}` reach its cells through ordinary CSS\n * inheritance: `.mk-cell` declares no `text-align` of its own, so the row's\n * value flows in, and a cell that declares its own (or an alignment wrapper\n * written inside it) wins simply by being declared.\n */\n.mk-text-left {\n  text-align: left;\n}\n\n.mk-text-center {\n  text-align: center;\n}\n\n.mk-text-right {\n  text-align: right;\n}\n\n/* ---------- row ---------- */\n\n.mk-row {\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));\n}\n\n/*\n * `minmax(0, 1fr)` — a bare `1fr` track can still grow past an equal share\n * to fit a wide intrinsic-content cell (e.g. a `chart` SVG, a long code\n * span); pinning the minimum to `0` is what keeps such a cell, and\n * therefore the whole row, from blowing out past its column.\n */\n.mk-row--cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.mk-row--cols-3 {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.mk-row--cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n/*\n * No separate blockification rule is needed here, unlike `.mk-card__body`'s:\n * a grid container (which `.mk-row` is) already promotes every direct\n * child's outer display to block-level as a grid item, same as a flex\n * container does — an inline-flex/inline-block component (`stat`, `badge`,\n * ...) used directly as a row cell already stacks/sizes as a proper grid\n * cell with no extra rule required.\n */\n\n@media (max-width: 40rem) {\n  .mk-row,\n  .mk-row--cols-2,\n  .mk-row--cols-3,\n  .mk-row--cols-4 {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* ---------- cell ---------- */\n\n/*\n * `:::cell` (`cell.tsx`) is a TRANSPARENT grouping container: it has no\n * border, background, padding, or outer margin of its own — its whole job is\n * making several blocks count as ONE `.mk-row` grid cell, so anything visual\n * here would betray that. `.mk-cell` therefore has no rule at all; only the\n * rhythm-restoring rule below exists, mirroring `.mk-layout > * + *`:\n * `.doc > * + *` sees the cell as a single box and never reaches inside it,\n * so without this its children would sit flush against each other.\n */\n.mk-cell > * + * {\n  margin-block-start: 1rem;\n}\n\n/* ---------- empty inline-component marker ---------- */\n\n/*\n * Wraps an `inline: true` component that received no content\n * (`::badge{label=\"x\"}` instead of `:badge[x]`) — see `render.tsx`'s\n * `isRegisteredInline`/`isEmptyContent` and `render.ts`'s HTML-engine\n * mirror. The component underneath renders unchanged; this is a quiet\n * perceptual hook only (a faint dashed underline, matching the treatment\n * `.mk-value--stale` already gives a quiet-but-present state), with the\n * reason carried in the `title` tooltip rather than in the page.\n */\n.mk-inline-empty {\n  border-bottom: 1px dashed var(--mk-faint);\n}\n\n/* ---------- unknown directive fallback ---------- */\n\n.mk-unknown {\n  border: 1px dashed var(--mk-faint);\n  border-radius: 6px;\n  color: var(--mk-muted);\n}\n\n.mk-unknown--block {\n  padding: 0.75rem 1rem;\n}\n\n.mk-unknown--inline {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 0.4em;\n  padding: 0 0.4em;\n  vertical-align: baseline;\n}\n\n.mk-unknown__label {\n  font-size: 0.85em;\n  font-style: italic;\n  margin: 0;\n}\n\n.mk-unknown__content > :first-child {\n  margin-block-start: 0.5rem;\n}\n\n.mk-unknown__content > * + * {\n  margin-block-start: 0.5rem;\n}\n";

package/dist/layout.d.ts

@@ -1,13 +1,33 @@
+import { LAYOUT_ATTRIBUTE_KEYS } from '@markii/stdlib';
+import type { LayoutAxis } from '@markii/stdlib';
 import type { DirectiveAttributes } from './registry.js';
 /**
  * The closed set of layout-preset attributes (docs/format.md): a small,
  * non-freeform-CSS vocabulary any block directive can carry regardless of
  * which component renders it. These two keys are reserved: always intercepted
  * before a component sees its `attributes`, whether or not their value turns
- * out to be valid. This mirrors `@markii/react`'s `layout.ts` exactly, so the
- * two renderers strip and classify the same keys the same way.
+ * out to be valid. The key list and the two preset vocabularies now live in
+ * `@markii/stdlib`'s `layout.ts`, the one source both this module and
+ * `@markii/react`'s `layout.ts` build their class maps from, so the two
+ * renderers strip and classify the same keys the same way without a
+ * hand-copied literal in either.
  */
-export declare const LAYOUT_ATTRIBUTE_KEYS: readonly ["width", "align"];
+export { LAYOUT_ATTRIBUTE_KEYS };
+/**
+ * Resolves a `text` attribute value to its class, or `undefined` for
+ * anything outside the closed `left | center | right` vocabulary (including
+ * a bare/empty/hostile value): the same defensive shape as `alignClassFor`.
+ * The class name is always one of the fixed literals in `TEXT_CLASSES`; an
+ * author-supplied value is never interpolated into markup. Never throws.
+ */
+export declare function textClassFor(value: string | null | undefined): string | undefined;
+/**
+ * Joins a component's own base class with the `text` class its `text`
+ * attribute resolves to, if any. The one helper the four `text`-accepting
+ * components share, matching `@markii/react`'s `withTextClass` so the two
+ * engines emit the same class string.
+ */
+export declare function withTextClass(baseClassName: string, value: string | null | undefined): string;
 export interface ResolvedLayoutAttributes {
     /** `attributes` with every reserved layout key (present, valid or not) removed. */
     attributes: DirectiveAttributes;
@@ -27,5 +47,13 @@ export interface ResolvedLayoutAttributes {
  * a real key via the prototype chain. An invalid or hostile value never
  * produces a class: it is dropped silently, exactly like an absent attribute.
  * Never throws.
+ *
+ * `ownedAxis` names an axis the DIRECTIVE'S NAME already decided, which only
+ * a layout wrapper has (`:::center` owns `align`, `:::fit` owns `width`; see
+ * `@markii/stdlib`'s `layoutWrapperAxis`). That axis's attribute is still
+ * stripped, exactly like any reserved key, but produces no class: the name
+ * wins, so `:::center{align=right}` is simply centered. The other axis
+ * resolves normally, which is what lets a wrapper carry it
+ * (`:::center{width=fit}`). Mirrors `@markii/react`'s signature.
  */
-export declare function resolveLayoutAttributes(attributes: DirectiveAttributes): ResolvedLayoutAttributes;
+export declare function resolveLayoutAttributes(attributes: DirectiveAttributes, ownedAxis?: LayoutAxis): ResolvedLayoutAttributes;

package/dist/layout.js

@@ -1,31 +1,74 @@
+import { ALIGN_PRESETS, LAYOUT_ATTRIBUTE_KEYS, TEXT_ALIGN_PRESETS, WIDTH_PRESETS, } from '@markii/stdlib';
 /**
  * The closed set of layout-preset attributes (docs/format.md): a small,
  * non-freeform-CSS vocabulary any block directive can carry regardless of
  * which component renders it. These two keys are reserved: always intercepted
  * before a component sees its `attributes`, whether or not their value turns
- * out to be valid. This mirrors `@markii/react`'s `layout.ts` exactly, so the
- * two renderers strip and classify the same keys the same way.
+ * out to be valid. The key list and the two preset vocabularies now live in
+ * `@markii/stdlib`'s `layout.ts`, the one source both this module and
+ * `@markii/react`'s `layout.ts` build their class maps from, so the two
+ * renderers strip and classify the same keys the same way without a
+ * hand-copied literal in either.
  */
-export const LAYOUT_ATTRIBUTE_KEYS = ['width', 'align'];
+export { LAYOUT_ATTRIBUTE_KEYS };
 /** `width=normal` is the explicit default: it maps to no class, same as an absent `width`. */
 const NORMAL_WIDTH = 'normal';
 /**
- * `width` value -> class. Null-prototype so a hostile value like `__proto__`
- * or `constructor` cannot resolve through the prototype chain to an inherited
- * `Object.prototype` member; it simply misses the lookup, same as any other
- * unrecognized value.
+ * `width` value -> class, derived mechanically from `@markii/stdlib`'s
+ * `WIDTH_PRESETS` as `mk-width-<preset>` for every preset except `normal`
+ * (which stays classless — see `NORMAL_WIDTH`). Null-prototype so a
+ * hostile value like `__proto__` or `constructor` cannot resolve through
+ * the prototype chain to an inherited `Object.prototype` member; it simply
+ * misses the lookup, same as any other unrecognized value. `doc.css`
+ * (shared with `@markii/react`) defines `.mk-width-fit`/
+ * `.mk-width-narrow`/`.mk-width-wide`/`.mk-width-full` to match.
  */
-const WIDTH_CLASSES = Object.assign(Object.create(null), {
-    narrow: 'mk-width-narrow',
-    wide: 'mk-width-wide',
-    full: 'mk-width-full',
-});
-/** `align` value -> class. Same null-prototype defense as `WIDTH_CLASSES`. */
-const ALIGN_CLASSES = Object.assign(Object.create(null), {
-    left: 'mk-align-left',
-    center: 'mk-align-center',
-    right: 'mk-align-right',
-});
+const WIDTH_CLASSES = Object.assign(Object.create(null), Object.fromEntries(WIDTH_PRESETS.filter((preset) => preset !== NORMAL_WIDTH).map((preset) => [
+    preset,
+    `mk-width-${preset}`,
+])));
+/**
+ * `align` value -> class, derived mechanically from `@markii/stdlib`'s
+ * `ALIGN_PRESETS` as `mk-align-<preset>`. Same null-prototype defense as
+ * `WIDTH_CLASSES`. `doc.css` defines `.mk-align-left`/`.mk-align-center`/
+ * `.mk-align-right` to match.
+ */
+const ALIGN_CLASSES = Object.assign(Object.create(null), Object.fromEntries(ALIGN_PRESETS.map((preset) => [preset, `mk-align-${preset}`])));
+/**
+ * `text` value -> class, derived mechanically from `@markii/stdlib`'s
+ * `TEXT_ALIGN_PRESETS` as `mk-text-<preset>`. Same null-prototype defense as
+ * the two maps above, and the same class names `@markii/react` emits, so
+ * `doc.css` covers both engines.
+ *
+ * `text` is NOT a reserved layout attribute: it is an ordinary
+ * per-component attribute of `row`/`cell`/`card`/`callout` (docs/spec.md
+ * §3), stripped by nothing and read by those four components themselves.
+ * Its class map lives here only because this module is already this
+ * engine's one home of "preset value -> class".
+ */
+const TEXT_CLASSES = Object.assign(Object.create(null), Object.fromEntries(TEXT_ALIGN_PRESETS.map((preset) => [preset, `mk-text-${preset}`])));
+/**
+ * Resolves a `text` attribute value to its class, or `undefined` for
+ * anything outside the closed `left | center | right` vocabulary (including
+ * a bare/empty/hostile value): the same defensive shape as `alignClassFor`.
+ * The class name is always one of the fixed literals in `TEXT_CLASSES`; an
+ * author-supplied value is never interpolated into markup. Never throws.
+ */
+export function textClassFor(value) {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    return TEXT_CLASSES[value];
+}
+/**
+ * Joins a component's own base class with the `text` class its `text`
+ * attribute resolves to, if any. The one helper the four `text`-accepting
+ * components share, matching `@markii/react`'s `withTextClass` so the two
+ * engines emit the same class string.
+ */
+export function withTextClass(baseClassName, value) {
+    const textClass = textClassFor(value);
+    return textClass ? `${baseClassName} ${textClass}` : baseClassName;
+}
 function widthClassFor(value) {
     if (value === null || value === undefined || value === '')
         return undefined;
@@ -51,21 +94,29 @@ function alignClassFor(value) {
  * a real key via the prototype chain. An invalid or hostile value never
  * produces a class: it is dropped silently, exactly like an absent attribute.
  * Never throws.
+ *
+ * `ownedAxis` names an axis the DIRECTIVE'S NAME already decided, which only
+ * a layout wrapper has (`:::center` owns `align`, `:::fit` owns `width`; see
+ * `@markii/stdlib`'s `layoutWrapperAxis`). That axis's attribute is still
+ * stripped, exactly like any reserved key, but produces no class: the name
+ * wins, so `:::center{align=right}` is simply centered. The other axis
+ * resolves normally, which is what lets a wrapper carry it
+ * (`:::center{width=fit}`). Mirrors `@markii/react`'s signature.
  */
-export function resolveLayoutAttributes(attributes) {
+export function resolveLayoutAttributes(attributes, ownedAxis) {
     let rest = attributes;
     const classes = [];
     if (Object.hasOwn(rest, 'width')) {
         const { width, ...remainder } = rest;
         rest = remainder;
-        const widthClass = widthClassFor(width);
+        const widthClass = ownedAxis === 'width' ? undefined : widthClassFor(width);
         if (widthClass)
             classes.push(widthClass);
     }
     if (Object.hasOwn(rest, 'align')) {
         const { align, ...remainder } = rest;
         rest = remainder;
-        const alignClass = alignClassFor(align);
+        const alignClass = ownedAxis === 'align' ? undefined : alignClassFor(align);
         if (alignClass)
             classes.push(alignClass);
     }

package/dist/registry.d.ts

@@ -7,6 +7,7 @@
  * the React renderer's, so a note resolves the same way in both.
  */
 import type { FailureKind, ValueStatus } from '@markii/runtime';
+import type { LayoutAxis } from '@markii/stdlib';
 /**
  * Attributes parsed off a directive, e.g. `{type=warning title="Careful"}`. A
  * bare attribute (present but valueless, e.g. `{collapsed}`) arrives as
@@ -62,6 +63,17 @@ export interface HtmlRenderContext {
     dataStatus?: ValueStatus;
     dataError?: string;
     dataFailureKind?: FailureKind;
+    /**
+     * The layout class the directive's reserved `width`/`align` attributes
+     * resolved to, handed to the component instead of being applied to a
+     * wrapper `<div>` around it. Present ONLY for an entry registered with
+     * `layout` (a scope component, such as the standard `:::center`), and only
+     * for the axis that entry does not already own. Mirrors
+     * `@markii/react`'s `layoutClassName` prop, carried on `ctx` for the same
+     * reason the data-binding fields are: `HtmlComponent` takes three
+     * arguments and has no room for a fourth.
+     */
+    layoutClassName?: string;
 }
 /**
  * One registry component: receives the directive's raw string attributes
@@ -80,6 +92,17 @@ export type HtmlComponent = (attributes: DirectiveAttributes, childrenHtml: stri
 export interface HtmlRegistryEntry {
     component: HtmlComponent;
     inline?: boolean;
+    /**
+     * Declares this component a LAYOUT SCOPE that already sets one of the two
+     * layout axes by its own name, the way the standard `:::center` (align)
+     * and `:::fit` (width) wrappers do. The reserved attribute for that axis
+     * is dropped without effect; the other axis resolves and arrives as
+     * `ctx.layoutClassName` instead of on a wrapper `<div>`, so the scope
+     * emits one element carrying both classes. Either way a component never
+     * receives `width` or `align` among its attributes (docs/spec.md §2).
+     * Mirrors `@markii/react`'s `RegistryEntry.layout`.
+     */
+    layout?: LayoutAxis;
 }
 /** One alias: a second name for an existing component, optionally carrying preset attributes. */
 export interface RegistryAlias {
@@ -123,6 +146,20 @@ export declare function mergeHtmlRegistries(...registries: HtmlRegistry[]): Html
  * renderer (docs/spec.md requirement 4).
  */
 export declare function readRegistryComponent(entry: HtmlRegistryEntry | undefined): HtmlComponent | undefined;
+/**
+ * The layout axis the component registered under `name` owns, or
+ * `undefined` when there is no such entry, it has no usable component, or it
+ * is not a layout scope. Reads `entry.layout` behind the same try/catch
+ * `readRegistryComponent` uses, so a hostile throwing getter degrades to
+ * "not a layout scope"; a value that is not one of the two axis names is
+ * ignored the same way an invalid `width=` is.
+ *
+ * A broken entry is deliberately NOT a layout scope: it renders the
+ * unknown-directive fallback, which has no root element to hand a class to,
+ * so the directive keeps the ordinary wrapper `<div>` and its `width`/
+ * `align` still show. Mirrors `@markii/react`'s `registryLayoutAxis`.
+ */
+export declare function registryLayoutAxis(registry: HtmlRegistry, name: string): LayoutAxis | undefined;
 /** A directive name and attributes after alias resolution. */
 export interface ResolvedDirective {
     name: string;

package/dist/registry.js

@@ -77,6 +77,31 @@ export function readRegistryComponent(entry) {
         return undefined;
     }
 }
+/**
+ * The layout axis the component registered under `name` owns, or
+ * `undefined` when there is no such entry, it has no usable component, or it
+ * is not a layout scope. Reads `entry.layout` behind the same try/catch
+ * `readRegistryComponent` uses, so a hostile throwing getter degrades to
+ * "not a layout scope"; a value that is not one of the two axis names is
+ * ignored the same way an invalid `width=` is.
+ *
+ * A broken entry is deliberately NOT a layout scope: it renders the
+ * unknown-directive fallback, which has no root element to hand a class to,
+ * so the directive keeps the ordinary wrapper `<div>` and its `width`/
+ * `align` still show. Mirrors `@markii/react`'s `registryLayoutAxis`.
+ */
+export function registryLayoutAxis(registry, name) {
+    const entry = Object.hasOwn(registry, name) ? registry[name] : undefined;
+    if (readRegistryComponent(entry) == null)
+        return undefined;
+    try {
+        const axis = entry?.layout;
+        return axis === 'width' || axis === 'align' ? axis : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 /** Whether `registry` has a real, usable component under `name` (own property, non-nullish, non-throwing). */
 function hasComponent(registry, name) {
     return (Object.hasOwn(registry, name) &&

package/dist/render.js

@@ -1,6 +1,6 @@
 import { toHast, nodeToHast, parseMetaAttributes, isValidScriptName, isBareAttribute, } from '@markii/core';
 import { toHtml } from 'hast-util-to-html';
-import { readRegistryComponent, resolveDirectiveAlias } from './registry.js';
+import { readRegistryComponent, registryLayoutAxis, resolveDirectiveAlias, } from './registry.js';
 import { resolveLayoutAttributes } from './layout.js';
 import { escapeHtml } from './escape.js';
 import { resolveScopedPath } from './resolve.js';
@@ -82,6 +82,18 @@ function createBaseContext(scope) {
         },
     };
 }
+/**
+ * `ctx` with one layout scope's resolved open-axis class attached, for the
+ * single component invocation it belongs to. `undefined` (every ordinary
+ * directive) returns `ctx` untouched, so a component that is not a layout
+ * scope can never observe the field at all, matching how `@markii/react`
+ * only spreads the `layoutClassName` prop when it has one.
+ */
+function withLayoutClass(ctx, layoutClassName) {
+    if (layoutClassName === undefined)
+        return ctx;
+    return { ...ctx, layoutClassName };
+}
 /** `ctx` with one directive's resolved `data=` binding attached, for the single component invocation that binding belongs to. */
 function withDataBinding(ctx, binding) {
     if (!('data' in binding))
@@ -309,7 +321,7 @@ function renderScriptMarker(node) {
     }
 }
 /** Resolves one directive (registry component, `:value[...]`, or the fallback) given its layout-stripped attributes. Never throws. */
-function renderDirectiveContent(name, kind, attributes, childrenHtml, plainLabel, registry, ctx, scope) {
+function renderDirectiveContent(name, kind, attributes, childrenHtml, plainLabel, registry, ctx, scope, layoutClassName) {
     if (name === VALUE_DIRECTIVE_NAME)
         return ctx.valueMarker(plainLabel);
     const inline = kind === TEXT_DIRECTIVE_KIND;
@@ -324,7 +336,7 @@ function renderDirectiveContent(name, kind, attributes, childrenHtml, plainLabel
     const binding = resolveDataAttribute(attributes, scope);
     let rendered;
     try {
-        rendered = component(binding.attributes, childrenHtml, withDataBinding(ctx, binding));
+        rendered = component(binding.attributes, childrenHtml, withLayoutClass(withDataBinding(ctx, binding), layoutClassName));
     }
     catch {
         return componentError(name || '(unnamed)', inline, childrenHtml);
@@ -350,10 +362,18 @@ function renderDirective(element, registry, ctx, scope) {
     const { name, attributes: aliased } = written === VALUE_DIRECTIVE_NAME
         ? { name: written, attributes: rawAttributes }
         : resolveDirectiveAlias(registry, written, rawAttributes);
+    // A LAYOUT SCOPE (an entry registered with `layout`, such as the standard
+    // `:::center`) already sets one axis by its own name: that axis's
+    // attribute is dropped without effect, and the other axis's class goes to
+    // the component through `ctx` rather than onto a wrapper `<div>`, so
+    // `:::center{width=fit}` comes out as one element carrying both classes.
+    // Mirrors `@markii/react`'s `createDirectiveElement` exactly.
     const isBlock = kind !== TEXT_DIRECTIVE_KIND;
-    const { attributes, className } = resolveLayoutAttributes(aliased);
-    const content = renderDirectiveContent(name, kind, attributes, childrenHtml, plainLabel, registry, ctx, scope);
-    return isBlock && className
+    const ownedAxis = registryLayoutAxis(registry, name);
+    const { attributes, className } = resolveLayoutAttributes(aliased, ownedAxis);
+    const isLayoutScope = ownedAxis !== undefined && isBlock;
+    const content = renderDirectiveContent(name, kind, attributes, childrenHtml, plainLabel, registry, ctx, scope, isLayoutScope ? className : undefined);
+    return isBlock && className && !isLayoutScope
         ? `<div class="${escapeHtml(className)}">${content}</div>`
         : content;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markii/html",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "A framework-free static HTML renderer for Markii (.mk.md): a registry-driven hast-to-HTML string engine. Zero React; for stopped-changing documents (publish, CI, email, archive).",
   "keywords": [
     "markdown",
@@ -54,9 +54,9 @@
   },
   "dependencies": {
     "hast-util-to-html": "^9.0.0",
-    "@markii/core": "0.8.1",
-    "@markii/runtime": "0.8.1",
-    "@markii/stdlib": "0.8.1"
+    "@markii/core": "0.10.0",
+    "@markii/runtime": "0.10.0",
+    "@markii/stdlib": "0.10.0"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4"